/* 상세 리포트 미리보기 카드 (D-74) — 마크업은 report-peek.js. 앱 공용 클래스와 겹치지 않게 rp- 접두사, 색·글꼴은 tokens.css 변수만 */
.rp{position:relative;display:block;color:var(--ink);text-decoration:none;background:var(--surface);border-radius:var(--r-card,10px);box-shadow:var(--shadow-card);padding:16px 18px 0;overflow:hidden;max-height:300px;transition:box-shadow var(--dur,.25s)}
.rp:hover{box-shadow:0 0 0 1.5px var(--ink),var(--shadow-card)}
.rp:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.rp-num{font-family:var(--font-num);font-variant-numeric:tabular-nums}
.rp-head{display:flex;align-items:center;gap:8px;font-size:14px}
.rp-head b{font-weight:600}
.rp-ex{font-size:11px;color:var(--mute);border:1px solid var(--line);border-radius:6px;padding:0 6px}
.rp-more{margin-left:auto;font-size:13px;font-weight:600}
.rp-body{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:18px;margin-top:12px}

/* ① 점수 + 4축 */
.rp-score{max-width:300px}
.rp-big{font-size:52px;font-weight:600;line-height:1;letter-spacing:-.02em}
.rp-big small{font-size:14px;color:var(--mute);margin-left:2px}
.rp-axes{display:grid;gap:8px;margin-top:14px}
.rp-ax{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:8px;font-size:12px;color:var(--mute)}
.rp-ax b{font-size:13px;color:var(--ink);font-weight:600}
.rp-ax i{grid-column:1 / -1;display:block;height:4px;border-radius:2px;margin-top:3px;background:linear-gradient(90deg,var(--bar,#d4d4d4) var(--w),var(--line) var(--w))}
.rp-ax.rp-key{color:var(--ink);font-weight:600}
.rp-ax.rp-key i{background:linear-gradient(90deg,var(--bar-key,var(--ink)) var(--w),var(--line) var(--w))}

/* 블록 — 한 줄 제목 + 작은 그림 */
.rp-blks{display:grid;gap:12px;align-content:start}
.rp-blk{display:grid;gap:6px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.rp-blk:last-child{border-bottom:0}
.rp-bt{margin:0;font-size:13px;font-weight:600;display:flex;gap:8px;align-items:baseline}
.rp-bt .rp-num{font-size:12px;color:var(--mute);font-weight:600}
.rp-tiles{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px;max-width:300px}
.rp-tile{aspect-ratio:1;border-radius:4px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--line)}
.rp-tile i{font-style:normal;font-size:9.5px;color:var(--mute)}
.rp-tile.rp-sent{background:var(--ink);border-color:var(--ink)} .rp-tile.rp-sent i{color:var(--on-ink)}
.rp-tile.rp-trap{border-color:var(--ink);background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--ink) 22%,transparent) 0 1.5px,transparent 1.5px 4px)}
.rp-tile.rp-read{border-color:var(--line-strong)}
.rp-tile.rp-none{border-style:dashed}
.rp-tile.rp-core{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--hl)}
.rp-leg{margin:0;display:flex;align-items:center;gap:4px 6px;flex-wrap:wrap;font-size:11px;color:var(--mute)}
.rp-sw{width:9px;height:9px;border-radius:2px;border:1.5px solid var(--line-strong);margin-left:4px}
.rp-sw:first-child{margin-left:0}
.rp-sw.rp-core{border-color:var(--line-strong);box-shadow:0 0 0 1.5px var(--hl)}
.rp-sw.rp-sent{background:var(--ink);border-color:var(--ink)}
.rp-sw.rp-trap{border-color:var(--ink);background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--ink) 30%,transparent) 0 1.5px,transparent 1.5px 3px)}
.rp-calc{margin:0;font-size:12.5px;color:var(--ink-2);overflow-wrap:anywhere}
.rp-calc mark{white-space:nowrap}
.rp-calc mark{background:var(--hl);color:#171717;padding:0 3px;border-radius:2px;font-weight:600}
.rp-flag{justify-self:start;font-size:11px;font-weight:600;border:1px dashed var(--ink);border-radius:6px;padding:0 6px}
.rp-marks{display:flex;gap:6px}
.rp-mk{width:18px;height:18px;border-radius:4px;position:relative;border:1.5px solid var(--ink)}
.rp-mk.rp-ok{background:var(--ink)}
.rp-mk.rp-ok::after{content:"";position:absolute;left:5px;top:1.5px;width:4px;height:8px;border:solid var(--on-ink);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.rp-mk.rp-no::before,.rp-mk.rp-no::after{content:"";position:absolute;left:3px;right:3px;top:7px;height:1.5px;background:var(--ink);transform:rotate(45deg)}
.rp-mk.rp-no::after{transform:rotate(-45deg)}

/* 아래 페이드 + 한 줄 */
.rp-fade{position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(180deg,transparent,var(--surface) 72%);pointer-events:none}
.rp-note{position:absolute;left:0;right:0;bottom:12px;margin:0;text-align:center;font-size:13.5px;font-weight:600}

/* 화면에 들어올 때 한 번 — 막대가 차고 타일이 차례로 켜진다(처음부터 끝난 모습, 강조만 움직임) */
.rp-motion:not(.rp-in) .rp-ax i{--w:0%!important}
.rp-motion .rp-ax i{transition:--w .8s}
.rp-motion:not(.rp-in) .rp-tile{opacity:.25;transform:scale(.85)}
.rp-motion .rp-tile{transition:opacity .3s,transform .3s}
.rp-motion.rp-in .rp-tile{transition-delay:calc(var(--i,0) * 60ms)}
@property --w{syntax:'<percentage>';inherits:true;initial-value:0%}

@media (max-width:560px){
  .rp{max-height:none;padding-bottom:56px}
  .rp-body{grid-template-columns:minmax(0,1fr);gap:14px}
  .rp-big{font-size:44px}
  .rp-axes{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px}
  .rp-fade{height:90px}
}
@media (prefers-reduced-motion:reduce){.rp *,.rp{transition:none!important}}