/* 진단 결과 시각화 공용 스타일. 색은 역할 토큰으로만 쓰고, 상태 색은 항상 아이콘+글자와 함께 쓴다(색만으로 구분하지 않음). */
.viz{--v-surface:#FFFFFF;--v-ink:#0F172A;--v-ink2:#475467;--v-muted:#667085;--v-grid:#EEF1F5;--v-base:#E4E8EF;--v-s1:#0B1F3A;--v-s2:#4F6B8F;--v-s3:#A9B7CB;--v-teal:#0E7C6B;--v-teal-bg:#E7F4F1;--v-critical:#B42318;--v-serious:#B54708;--v-good:#12805C;--v-info:#667085;--v-text-good:#12805C;--v-text-bad:#B42318;--v-text-warn:#B54708;--v-ring:#E4E8EF;--v-tint-risk:rgba(11,31,58,.04);--v-tint-caution:rgba(11,31,58,.04);--v-tint-good:rgba(14,124,107,.08);--v-shadow:0 24px 48px -24px rgba(11,31,58,.22),0 2px 6px rgba(16,24,40,.04)}
@media (prefers-color-scheme:dark){.viz{--v-surface:#132234;--v-ink:#E8EDF4;--v-ink2:#B4BFCD;--v-muted:#8793A3;--v-grid:#1C2C3F;--v-base:#25364B;--v-s1:#E8EDF4;--v-s2:#7C97BB;--v-s3:#41597A;--v-teal:#3DB8A3;--v-teal-bg:#12302C;--v-critical:#E0574C;--v-serious:#D9962A;--v-good:#3DB37E;--v-info:#8793A3;--v-text-good:#4CC38A;--v-text-bad:#F08A80;--v-text-warn:#E0A64A;--v-ring:#25364B;--v-tint-risk:rgba(232,237,244,.05);--v-tint-caution:rgba(232,237,244,.05);--v-tint-good:rgba(61,184,163,.14);--v-shadow:0 24px 48px -24px rgba(0,0,0,.6)}}
.viz{color:var(--v-ink);font-family:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif}
.viz *{box-sizing:border-box}
.v-card{background:var(--v-surface);border:1px solid var(--v-ring);border-radius:18px;padding:24px;margin:16px 0;box-shadow:var(--v-shadow);animation:v-rise .55s cubic-bezier(.2,.7,.2,1) both}
.v-card:nth-child(2){animation-delay:.06s}.v-card:nth-child(3){animation-delay:.12s}.v-card:nth-child(4){animation-delay:.18s}.v-card:nth-child(5){animation-delay:.24s}
.v-card h3{margin:0 0 4px;font-size:1.05rem;font-weight:700;display:flex;align-items:center;gap:8px}
.v-ico{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;background:var(--v-teal-bg);color:var(--v-teal);flex:none}
.v-ico svg,.v-ringtile .em svg,.v-stage .em svg,.v-gi svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.v-gi{display:inline-flex;vertical-align:-4px;margin-right:6px;color:var(--v-teal)}.v-gi svg{width:16px;height:16px}
.v-sub{margin:0 0 14px;font-size:.88rem;color:var(--v-ink2)}
@keyframes v-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes v-pop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}

/* ── 히어로: 계기판 ── */
.v-hero-card{position:relative;overflow:hidden;padding:26px}
.v-hero-card::before{content:none}
.v-hero-card.risk::before{background:radial-gradient(closest-side,var(--v-tint-risk),transparent)}
.v-hero-card.caution::before{background:radial-gradient(closest-side,var(--v-tint-caution),transparent)}
.v-hero-card.good::before{background:radial-gradient(closest-side,var(--v-tint-good),transparent)}
.v-hero{position:relative;display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:30px;align-items:center}
@media (max-width:760px){.v-hero{grid-template-columns:1fr;gap:12px}}
.v-gcol{text-align:center}
.v-gauge{width:100%;max-width:340px;height:auto;overflow:visible}
.v-zone-arc{fill:none;stroke-linecap:butt;opacity:.16;transition:opacity .4s}
.v-zone-arc.on{opacity:1}
.v-zone-arc.risk,.v-zone-arc.caution,.v-zone-arc.good{stroke:var(--v-s1)}
.v-gtick{font-size:11px;fill:var(--v-muted);text-anchor:middle}
.v-needle{transform-origin:150px 150px;transform:rotate(0deg);transition:transform 1.3s cubic-bezier(.2,.9,.25,1.05)}
.v-needle line{stroke:var(--v-ink);stroke-width:4;stroke-linecap:round}
.v-needle circle{fill:var(--v-ink);stroke:var(--v-surface);stroke-width:3}
.v-capmark line{stroke:var(--v-ink);stroke-width:3}.v-capmark text{font-size:11px;font-weight:700;fill:var(--v-ink);text-anchor:middle}
.v-aftermark circle{fill:var(--v-surface);stroke:var(--v-ink);stroke-width:3}.v-aftermark text{font-size:10.5px;font-weight:700;fill:var(--v-ink);text-anchor:middle}
.v-num{font-size:3.6rem;line-height:1;font-weight:700;letter-spacing:-.03em;margin-top:-4px}
.v-num small{font-size:1.15rem;font-weight:500;color:var(--v-muted);margin-left:4px;letter-spacing:0}
.v-band{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:0;border:0;font-weight:600;font-size:.95rem;animation:v-pop .5s .5s both}
.v-band.risk{color:var(--v-text-bad)}.v-band.caution{color:var(--v-text-warn)}.v-band.good{color:var(--v-text-good)}
.v-verdict{margin:0 0 14px;font-size:1.02rem;line-height:1.6}
.v-warnbox{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--v-ring);border-left:3px solid var(--v-serious);background:var(--v-grid);border-radius:10px;padding:10px 12px;margin:0 0 14px;font-size:.9rem;line-height:1.5}
.v-warnbox b{color:var(--v-ink)}
.v-quick{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.v-quick li{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--v-ring);border-radius:12px;background:var(--v-surface);animation:v-rise .5s both}
.v-quick li:nth-child(2){animation-delay:.1s}.v-quick li:nth-child(3){animation-delay:.2s}
.v-quick .no{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--v-s1);color:var(--v-surface);font-size:.8rem;font-weight:700;flex:none}
.v-quick .t{flex:1;min-width:0;overflow-wrap:anywhere;line-height:1.3}
.v-quick .g{font-weight:600;color:var(--v-teal);background:var(--v-tint-good);padding:2px 9px;border-radius:99px;white-space:nowrap;font-size:.88rem}
.v-quick .g.pend{color:var(--v-ink2);background:var(--v-grid);font-weight:600;font-size:.82rem}
.v-after{margin:12px 0 0;font-weight:700;font-size:.98rem}
.v-after span{color:var(--v-teal)}
.v-fine{margin:12px 0 0;font-size:.8rem;color:var(--v-muted);line-height:1.5}

/* ── 경중 도넛 ── */
.v-sevwrap{display:grid;grid-template-columns:170px 1fr;gap:22px;align-items:center}
@media (max-width:520px){.v-sevwrap{grid-template-columns:1fr;justify-items:center}}
.v-donut{width:170px;height:170px;transform:rotate(-90deg);overflow:visible}
.v-donut circle{fill:none;stroke-width:20;transition:stroke-dasharray 1s cubic-bezier(.2,.8,.2,1)}
.v-donut .bg{stroke:var(--v-grid)}
.v-dcenter{position:relative;width:170px;height:170px}
.v-dcenter .mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.v-dcenter .mid b{font-size:2.1rem;line-height:1}.v-dcenter .mid span{font-size:.78rem;color:var(--v-ink2)}
.v-seglist{display:grid;gap:8px;width:100%}
.v-segrow{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;font-size:.92rem}
.v-segrow small{color:var(--v-ink2);display:block;font-size:.78rem}
.v-segrow .cnt{font-weight:700;font-size:1.15rem}
.v-ic{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font-size:.72rem;font-weight:700;color:#fff;flex:none}
.v-ic.urgent{background:var(--v-critical)}.v-ic.caution{background:var(--v-serious);color:#1a1a19}.v-ic.info{background:var(--v-info)}.v-ic.ok{background:var(--v-good)}.v-ic.manual{background:transparent;border:1.5px solid var(--v-muted);color:var(--v-muted)}
.s-urgent{stroke:var(--v-s1)}.s-caution{stroke:var(--v-s2)}.s-info{stroke:var(--v-s3)}.s-ok{stroke:var(--v-teal)}

/* ── 영역별 링 ── */
.v-rings{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.v-ringtile{position:relative;border:1px solid var(--v-ring);border-radius:14px;padding:14px 10px 12px;text-align:center;background:var(--v-surface);cursor:default;transition:transform .2s,box-shadow .2s;animation:v-pop .5s both}
.v-ringtile:nth-child(2){animation-delay:.08s}.v-ringtile:nth-child(3){animation-delay:.16s}.v-ringtile:nth-child(4){animation-delay:.24s}
.v-ringtile:hover,.v-ringtile:focus-visible{transform:translateY(-3px);box-shadow:var(--v-shadow);outline:none}
.v-ringtile.weak{border-color:var(--v-s1)}
.v-ring{position:relative;width:96px;height:96px;margin:0 auto 8px}
.v-ring svg{width:96px;height:96px;transform:rotate(-90deg)}
.v-ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.v-ring .bg{stroke:var(--v-grid)}
.v-ring .fg{transition:stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1)}
.v-ring.risk .fg,.v-ring.caution .fg,.v-ring.good .fg{stroke:var(--v-s1)}
.v-ring .mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.v-ring .mid b{font-size:1.5rem}.v-ring .mid span{font-size:.72rem;font-weight:600}
.v-ring.risk .mid span{color:var(--v-text-bad)}.v-ring.caution .mid span{color:var(--v-text-warn)}.v-ring.good .mid span{color:var(--v-text-good)}
.v-ringtile .nm{font-weight:700;font-size:.9rem;line-height:1.3}
.v-ringtile .em{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--v-teal-bg);color:var(--v-teal);margin-bottom:6px}
.v-lost{display:block;margin-top:3px;font-size:1.05rem;font-weight:700;color:var(--v-text-bad)}.v-lost.none{color:var(--v-text-good);font-size:.85rem}
.v-weak{display:inline-block;margin-top:6px;font-size:.74rem;font-weight:600;color:var(--v-text-bad);padding:0}
.v-ringtile .sub{display:block;margin-top:4px;font-size:.76rem;color:var(--v-ink2)}

/* ── 막대(감점 순위·문제 페이지) ── */
.v-rows{display:flex;flex-direction:column;gap:10px}
.v-row{display:grid;grid-template-columns:minmax(110px,38%) 1fr 56px;gap:10px;align-items:center;font-size:.9rem;padding:3px 6px;border-radius:8px;cursor:default}
.v-row:hover,.v-row:focus-visible{background:var(--v-grid);outline:none}
.v-row[data-jump]{cursor:pointer}
.v-lab{display:flex;gap:6px;align-items:center;min-width:0}.v-lab span:last-child{overflow-wrap:anywhere;line-height:1.3}
.v-bar{position:relative;height:8px;background:var(--v-grid);border-radius:6px;overflow:hidden}
.v-bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--v-s1);border-radius:0 6px 6px 0;min-width:0;transition:width .9s cubic-bezier(.2,.8,.2,1)}
.v-bar.urgent i{background:var(--v-s1)}.v-bar.caution i{background:var(--v-s2)}.v-bar.info i{background:var(--v-s3)}
.v-val{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.v-grid2{display:grid;grid-template-columns:1fr;gap:0}
@media (max-width:520px){.v-row{grid-template-columns:1fr 56px}.v-row .v-bar{grid-column:1/2;grid-row:2}.v-row .v-val{grid-row:1/3;grid-column:2}}

/* ── 정밀 진단: 범위 타일 ── */
.v-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
@media (max-width:640px){.v-tiles{grid-template-columns:repeat(2,1fr)}}
.v-tile{border:1px solid var(--v-ring);border-radius:12px;padding:12px 14px;background:var(--v-surface)}
.v-tile b{display:block;font-size:1.6rem;line-height:1.2}.v-tile span{font-size:.82rem;color:var(--v-ink2)}
.v-progress{height:12px;background:var(--v-grid);border-radius:6px;overflow:hidden;margin:12px 0 6px}
.v-progress i{display:block;height:100%;width:0;background:var(--v-s1);border-radius:0 6px 6px 0;transition:width .5s}

/* ── AI 추천 경로 ── */
.v-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media (max-width:760px){.v-flow{grid-template-columns:1fr}}
.v-stage{position:relative;border:1px solid var(--v-ring);border-radius:14px;padding:14px 12px;background:var(--v-surface);animation:v-pop .5s both}
.v-stage:nth-child(2){animation-delay:.08s}.v-stage:nth-child(3){animation-delay:.16s}.v-stage:nth-child(4){animation-delay:.24s}.v-stage:nth-child(5){animation-delay:.32s}
.v-stage:not(:last-child)::after{content:"›";position:absolute;right:-12px;top:50%;transform:translateY(-50%);font-size:1.6rem;font-weight:700;color:var(--v-muted);z-index:1}
@media (max-width:760px){.v-stage:not(:last-child)::after{content:"⌄";right:auto;left:50%;top:auto;bottom:-20px;transform:translateX(-50%)}}
.v-stage.blocked{border-color:var(--v-s1);background:var(--v-grid)}.v-stage.warn,.v-stage.pass{border-color:var(--v-ring)}
.v-stage .em{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--v-teal-bg);color:var(--v-teal);margin-bottom:6px}
.v-stage .t{font-weight:700;font-size:.95rem}.v-stage .d{font-size:.8rem;color:var(--v-ink2);margin:2px 0 8px;line-height:1.35}
.v-stage .s{display:inline-flex;gap:6px;align-items:center;font-weight:600;font-size:.85rem}
.v-stage.blocked .s{color:var(--v-text-bad)}.v-stage.warn .s{color:var(--v-text-warn)}.v-stage.pass .s{color:var(--v-text-good)}
.v-first{margin:14px 0 0;font-size:.95rem;font-weight:700}

/* ── 상세 항목 ── */
.v-item{border:1px solid var(--v-ring);border-left:3px solid var(--v-ring);border-radius:12px;padding:12px 14px;margin-bottom:10px;background:var(--v-surface);scroll-margin-top:16px;transition:box-shadow .2s}
.v-item.urgent{border-left-color:var(--v-critical)}.v-item.caution{border-left-color:var(--v-serious)}.v-item.info{border-left-color:var(--v-info)}.v-item.ok{border-left-color:var(--v-good)}.v-item.manual{border-left-color:var(--v-muted)}
.v-item.flash{box-shadow:0 0 0 3px var(--v-teal)}
.v-item .top{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.v-item .lbl{font-weight:700}
.v-tag{font-size:.76rem;border-radius:999px;padding:1px 9px;border:1px solid var(--v-ring);color:var(--v-ink2)}
.v-tag.crit{border-color:var(--v-ring);color:var(--v-text-bad);font-weight:600}
.v-loss{margin-left:auto;font-weight:700;font-size:.88rem;color:var(--v-text-bad)}
.v-loss.pend{color:var(--v-ink2);font-weight:700}
.v-val2{margin:6px 0 0;padding:6px 8px;background:var(--v-grid);border-radius:6px;font-size:.86rem;word-break:break-word;color:var(--v-ink2);white-space:pre-wrap}
.v-guide{margin:6px 0 0;font-size:.92rem}
.v-gname{margin:30px 0 12px;font-size:1.1rem;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.v-gname small{font-weight:700;color:var(--v-ink2);border:1px solid var(--v-ring);border-radius:999px;padding:0 10px}

/* ── 표 보기 ── */
.v-table{width:100%;border-collapse:collapse;font-size:.86rem}
.v-table th,.v-table td{border-bottom:1px solid var(--v-grid);padding:6px 8px;text-align:left;vertical-align:top}
.v-table td.n,.v-table th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.viz details{border:1px solid var(--v-ring);border-radius:12px;padding:10px 14px;margin:12px 0;background:var(--v-surface)}
.viz summary{cursor:pointer;font-weight:700}

/* ── 툴팁 ── */
#viz-tip{position:fixed;z-index:50;max-width:320px;background:var(--v-ink,#0b0b0b);color:var(--v-surface,#fff);border-radius:8px;padding:8px 10px;font:.84rem/1.4 system-ui,"Malgun Gothic",sans-serif;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.25);display:none}
#viz-tip b{display:block;margin-bottom:2px}

/* ── 움직임을 줄이는 설정 존중 ── */
@media (prefers-reduced-motion:reduce){
  .v-card,.v-band,.v-quick li,.v-ringtile,.v-stage{animation:none}
  .v-needle,.v-bar i,.v-ring .fg,.v-donut circle,.v-progress i{transition:none}
}

/* ── 인쇄·PDF 저장 ── */
@media print{
  .noprint,form,#state,.tabs,.why,.cta,.banner{display:none!important}
  .viz,.v-zone-arc,.v-bar i,.v-ic,.v-ring .fg,.v-donut circle,.v-hero-card::before,.v-stage{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .v-card,.v-item,.v-stage,.v-ringtile{break-inside:avoid;animation:none;box-shadow:none}
  .v-needle,.v-bar i,.v-ring .fg{transition:none}
  body{background:#fff!important}
}
/* 상태 아이콘의 점·마름모는 글자(●◆) 대신 도형으로 그려 글꼴마다 위치가 어긋나지 않게 한다 */
.v-ic.info,.v-ic.caution{font-size:0}
.v-ic.info::after{content:"";width:7px;height:7px;border-radius:50%;background:#fff}
.v-ic.caution::after{content:"";width:7px;height:7px;background:#1a1a19;transform:rotate(45deg)}