/* [2026-09-17] 빠른답변 준비 중 상태.
   은행 보기가 먼저 뜨고 1.8초 뒤 AI 보기로 바뀌면 깜빡임으로 보인다.
   은행 보기를 반투명으로 두면 학생은 '준비 중' 으로 읽는다. AI 보기가
   오면 불투명으로 바뀌고, 안 오면 2.5초 뒤 은행 보기가 불투명해진다. */
#chat-quick-wrap.pia-qk--pending .chat-quick { opacity: .45; transition: opacity .25s; pointer-events: none; }
#chat-quick-wrap .chat-quick { transition: opacity .25s; }


  body { font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", "맑은 고딕", sans-serif; }
  [aria-pressed="true"] { background:#1f2937; color:#fff; }
  .pill { padding:2px 8px; border-radius:999px; font-size:11px; font-weight:600; display:inline-block; }
  .hidden { display:none; }
  .aud-btn[aria-selected="true"] { background:#111827; color:#fff; }
/* 홈 — 2026-09-02 개편 */
.pia-group-btn{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid #D6DCE5;
  border-radius:14px;padding:15px 18px;cursor:pointer;font:inherit;text-align:left;transition:border-color .15s,background .15s;}
.pia-group-btn:hover{border-color:#246BEB;background:#F7FAFF;}
.pia-group-btn__tag{background:#EAF1FE;color:#1D56BC;font-size:12px;font-weight:800;padding:3px 9px;border-radius:7px;white-space:nowrap;}
.pia-group-btn__t{flex:1;font-size:16px;font-weight:800;color:#141413;}
.pia-group-btn__ar{color:#9AA5B4;font-size:19px;line-height:1;}
.pia-prevlink{display:block;width:100%;margin-top:14px;background:none;border:0;cursor:pointer;font:inherit;
  font-size:14.5px;font-weight:700;color:#4A5361;text-align:center;padding:6px;}
.pia-prevlink:hover{color:#246BEB;text-decoration:underline;}
.pia-chip{display:inline-block;border:1px solid #E0E4EA;border-radius:999px;padding:3px 9px;font-size:11.5px;
  color:#636D76;background:#fff;white-space:nowrap;}
.pia-step--lock .pia-step__ic{opacity:.45;}
.pia-step--lock .pia-step__t{color:#636D76;}
/* 잠금 안내는 칸이 좁아 두 줄로 두고, 시간 칩은 세 단계가 같은 높이에 오도록
   자리를 미리 잡아 둔다. 안 그러면 잠긴 단계만 아래로 밀려 어긋난다. */
.pia-step__lock{display:block;font-size:11px;color:#636D76;line-height:1.3;
  word-break:keep-all;text-align:center;}
/* 세 단계의 칸 높이를 맞추고 시간 칩을 바닥에 붙인다.
   높이를 em 으로 맞추려 하면 자물쇠 아이콘 때문에 몇 px 씩 어긋난다. */
.pia-steps{align-items:stretch!important;}
.pia-step{justify-content:flex-start;}
.pia-step__d{margin-top:auto;}
.pia-step__ar{align-self:center;}
.pia-optfold{width:100%;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #E0E4EA;
  border-radius:14px;padding:16px 18px;cursor:pointer;font:inherit;text-align:left;}
.pia-optfold:hover{border-color:#246BEB;}
.pia-optfold__tx{flex:1;min-width:0;}
.pia-optfold__t{display:block;font-size:16px;font-weight:800;color:#141413;}
.pia-optfold__d{display:block;font-size:12.5px;color:#6D7882;margin-top:3px;}
.pia-optfold__ar{color:#9AA5B4;font-size:19px;line-height:1;transition:transform .15s;}
.pia-optfold--open .pia-optfold__ar{transform:rotate(90deg);}
  /* 인쇄용 스타일 */
  @media print {
    body { background:#fff !important; }
    header, nav, #topNav, .no-print, button { display:none !important; }
    section[data-view].hidden { display:none !important; }
    section[data-view]:not(.hidden) { display:block !important; padding:0; }
    html, body { height:auto !important; max-height:none !important; overflow:visible !important; }
    #fullreport-wrap { max-height:none !important; height:auto !important; overflow:visible !important; }
    #fullreport-wrap, section[data-view="fullreport"], .min-h-screen { overflow:visible !important; max-height:none !important; }
    #pia-report .page:not(:last-child) { page-break-after:always; }
    #pia-report .page { break-inside:avoid; }
    .max-w-6xl { max-width:100% !important; padding:0 !important; }
    .border, .rounded-2xl, .rounded-xl, .rounded-lg { border:1px solid #ccc !important; box-shadow:none !important; }
    canvas { max-height:200px !important; }
    .audience-only-screen { display:none !important; }
    @page { size: A4; margin: 10mm; }
  }

/* ===== 결과지 CSS (scoped: #pia-report) ===== */

/* ===== 기본 설정 ===== */
* {box-sizing:border-box;margin:0;padding:0;}
body {font-family:'Malgun Gothic','맑은 고딕','Apple SD Gothic Neo',sans-serif;background:#e8e8e8;color:#222;font-size:13px;}

/* ===== 페이지 래퍼 ===== */
#pia-report .page {width:794px;min-height:1123px;background:#fff;margin:20px auto;padding:30px 35px;position:relative;box-shadow:0 2px 8px rgba(0,0,0,.18);page-break-after:always;}
#pia-report .page:last-child {page-break-after:auto;}

/* ===== 인쇄 ===== */
@media print{
body {background:#fff;}
#pia-report .page {margin:0!important;box-shadow:none!important;width:auto!important;max-width:100%!important;min-height:0!important;padding:4mm 3mm!important;page-break-after:always;break-inside:auto;}
#pia-report .page:last-child{page-break-after:auto;}
#pia-report .no-print {display:none!important;}
}

/* ===== 공통 헤더 ===== */
#pia-report .page-header {display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #d97757;padding-bottom:6px;margin-bottom:14px;}
#pia-report .page-header .logo-area {font-size:11px;color:#555;}
#pia-report .page-header .page-title {font-size:15px;font-weight:700;color:#b04928;}
#pia-report .page-header .page-num {font-size:11px;color:#6e6b60;}

/* ===== 섹션 타이틀 ===== */
#pia-report .section-title {display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#fff;background:#b04928;padding:5px 12px;margin:14px 0 8px;}
#pia-report .section-title-diamond {font-size:15px;font-weight:700;color:#6a3fb5;margin:14px 0 8px;display:flex;align-items:center;gap:5px;}
#pia-report .section-icon {color:#fff;font-size:14px;}

/* ===== 정보 테이블 ===== */
#pia-report .info-table {width:100%;border-collapse:collapse;margin-bottom:10px;}
#pia-report .info-table td {border:1px solid #ccc;padding:5px 8px;font-size:11px;}
#pia-report .info-table .lbl {background:#f0f0f0;font-weight:700;width:80px;color:#333;}
#pia-report .info-table .val {background:#fff;color:#222;}

/* ===== 범용 테이블 ===== */
#pia-report .data-table {width:100%;border-collapse:collapse;margin-bottom:10px;}
#pia-report .data-table th {background:#f3ebe1;color:#7a3a20;font-weight:700;padding:5px 8px;border:1px solid #e3d3c4;font-size:11px;text-align:center;}
#pia-report .data-table td {border:1px solid #ccc;padding:5px 8px;font-size:11px;text-align:center;vertical-align:middle;}
#pia-report .data-table tr:nth-child(even) td {background:#f8f8fc;}
#pia-report .data-table .row-head {background:#f0f0f0;font-weight:700;text-align:left;color:#333;}

/* ===== 레인보우 그라디언트 바 ===== */
#pia-report .rainbow-bar-wrap {position:relative;margin:18px 0 28px;}
#pia-report .rainbow-bar {height:18px;border-radius:9px;background:linear-gradient(to right,
  #e53935 0%,#ef6c00 17%,#f9a825 34%,#43a047 51%,#00897b 68%,#1565c0 100%);
  position:relative;}
#pia-report .rainbow-label-row {display:flex;justify-content:space-between;margin-top:2px;}
#pia-report .rainbow-label-row span {font-size:10px;color:#555;font-weight:600;}
#pia-report .rainbow-grade-row {display:flex;margin-top:1px;}
#pia-report .rainbow-grade-row .grade-seg {flex:1;text-align:center;font-size:10px;font-weight:700;color:#6e6b60;}
#pia-report .score-marker {position:absolute;top:-6px;transform:translateX(-50%);cursor:default;}
#pia-report .score-marker-circle {width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid #d97757;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#b04928;box-shadow:0 1px 4px rgba(0,0,0,.2);}
#pia-report .avg-label {position:absolute;top:20px;transform:translateX(-50%);font-size:8.5px;font-weight:700;white-space:nowrap;}
#pia-report .avg-label.cls {color:#dd302e;}
#pia-report .avg-label.sch {color:#1565c0;}
#pia-report .avg-label.sd {color:#6e6b60;}

/* ===== 반원형 게이지 ===== */
#pia-report .gauge-wrap {display:flex;flex-direction:column;align-items:center;}
#pia-report .gauge-wrap svg {overflow:visible;}
#pia-report .gauge-score {font-size:16px;font-weight:700;color:#b04928;line-height:1;}
#pia-report .gauge-grade {font-size:11px;color:#555;margin-top:2px;}

/* ===== 황색 진행 바 ===== */
#pia-report .prog-bar-wrap {display:flex;align-items:center;gap:6px;}
#pia-report .prog-bar-bg {flex:1;height:12px;background:#e0e0e0;border-radius:6px;overflow:hidden;}
#pia-report .prog-bar-fill {height:100%;border-radius:6px;background:linear-gradient(to right,#FFC107,#FF9800);}
#pia-report .prog-bar-val {font-size:11px;font-weight:700;color:#c84501;min-width:28px;text-align:right;}

/* ===== 점수등급 박스 ===== */
/* [2026-09-27] 1.4.3 흰 글자 대비 — 색상(OKLCH hue)은 그대로 두고 명도만 낮춰 4.5:1 이상으로.
   A #00897b 4.32→#068376 4.65 · B+ #43a047 3.30→#25862d 4.64 · B #f9a825 1.97→#a16904 4.63
   C #ef6c00 3.08→#c05500 4.62 · D #e53935 4.23→#dd302e 4.63 · A+ #1565c0 5.75 유지.
   게이지·막대·무지개 띠 채움색(gradeColor)은 옆에 점수 글자가 있어 장식으로 보고 그대로 둔다. */
#pia-report .grade-box {display:inline-block;padding:2px 10px;border-radius:3px;font-size:12px;font-weight:700;}
#pia-report .grade-A-plus {background:#1565c0;color:#fff;}
#pia-report .grade-A {background:#068376;color:#fff;}
#pia-report .grade-B-plus {background:#25862d;color:#fff;}
#pia-report .grade-B {background:#a16904;color:#fff;}
#pia-report .grade-C {background:#c05500;color:#fff;}
#pia-report .grade-D {background:#dd302e;color:#fff;}

/* ===== 경고(핑크) 박스 ===== */
#pia-report .alert-box {background:#fce4ec;border:1px solid #f48fb1;border-radius:4px;padding:8px 12px;margin:8px 0;font-size:11px;color:#880e4f;}
#pia-report .alert-box strong {color:#c62828;}

/* ===== 레이더(오각형) ===== */
#pia-report .radar-container {display:flex;justify-content:center;margin:10px 0;}

/* ===== 항목 상세 카드 ===== */
#pia-report .item-card {border:1px solid #ccc;border-radius:4px;margin-bottom:14px;overflow:hidden;}
#pia-report .item-card-head {background:#b04928;color:#fff;padding:6px 12px;display:flex;align-items:center;justify-content:space-between;}
#pia-report .item-card-head .item-name {font-size:13px;font-weight:700;}
#pia-report .item-card-body {padding:10px 14px;}
#pia-report .compare-index {font-size:11px;color:#555;margin:4px 0 8px;white-space:nowrap;overflow:visible;}
#pia-report .item-card svg, #pia-report .two-col svg, #pia-report .gauge-wrap svg {overflow:visible;}

/* ===== 이중 바(계열적성) ===== */
#pia-report .dual-bar-row {display:flex;align-items:center;gap:4px;margin-bottom:4px;}
#pia-report .dual-bar-lbl {width:60px;font-size:10px;text-align:right;color:#333;}
#pia-report .dual-bar-bg {flex:1;height:12px;background:#e0e0e0;border-radius:6px;position:relative;}
#pia-report .dual-bar-got {height:8px;border-radius:4px;background:#1565c0;position:absolute;top:2px;left:0;}
#pia-report .dual-bar-val {font-size:10px;color:#555;min-width:20px;}
#pia-report .mini-bar-wrap span {font-size:10px!important;}

/* ===== 표지 ===== */
#pia-report .cover-wrap {display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:900px;text-align:center;}
#pia-report .cover-title-main {font-size:32px;font-weight:900;color:#d97757;letter-spacing:2px;margin-bottom:12px;}
#pia-report .cover-title-sub {font-size:18px;color:#333;margin-bottom:30px;}
#pia-report .cover-badge {background:#b04928;color:#fff;padding:8px 28px;border-radius:20px;font-size:14px;font-weight:700;display:inline-block;margin-bottom:30px;}
#pia-report .cover-info-box {border:2px solid #d97757;border-radius:10px;padding:28px 48px;margin:28px auto;display:inline-block;}
#pia-report .cover-info-box table {border-collapse:collapse;}
#pia-report .cover-info-box td {padding:11px 18px;font-size:17px;line-height:1.5;}
#pia-report .cover-info-box .lbl {font-weight:700;color:#b04928;text-align:right;white-space:nowrap;}
#pia-report .cover-info-box .val {color:#222;text-align:left;border-bottom:1px solid #ccc;min-width:200px;font-weight:600;}
#pia-report .stamp {width:80px;height:80px;border:3px solid #c62828;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#c62828;font-size:9px;font-weight:700;line-height:1.3;text-align:center;transform:rotate(-15deg);margin:10px auto;}
#pia-report .stamp-wrap {position:absolute;bottom:60px;right:60px;}

/* ===== 도구 바 ===== */
#pia-report .toolbar {position:fixed;top:0;left:0;right:0;z-index:9999;background:#b04928;color:#fff;display:flex;align-items:center;gap:12px;padding:8px 20px;box-shadow:0 2px 6px rgba(0,0,0,.3);}
#pia-report .toolbar span {font-size:13px;font-weight:700;}
#pia-report .toolbar button {background:#fff;color:#b04928;border:none;border-radius:4px;padding:5px 14px;font-size:12px;font-weight:700;cursor:pointer;}
#pia-report .toolbar button:hover {background:#e3f0ff;}

/* ===== P1~P9 미니바 ===== */
#pia-report .mini-bar-wrap {display:flex;align-items:center;gap:4px;}
#pia-report .mini-bar-bg {width:80px;height:8px;background:#e0e0e0;border-radius:4px;overflow:hidden;}
#pia-report .mini-bar-fill {height:100%;border-radius:4px;}

/* 오른쪽 정렬 */
#pia-report .right {text-align:right!important;}
#pia-report .center {text-align:center!important;}
#pia-report .bold {font-weight:700!important;}

/* 특이사항 문단 */
#pia-report .desc-para {font-size:11px;line-height:1.7;color:#333;margin:8px 0;text-indent:1em;}

/* 소제목 */
#pia-report .sub-heading {font-size:11px;font-weight:700;color:#b04928;border-left:3px solid #d97757;padding-left:6px;margin:8px 0 4px;}

/* 두 열 레이아웃 */
#pia-report .two-col {display:flex;gap:14px;}
#pia-report .two-col > div {flex:1;}

#pia-report { background:#e8e8e8; padding:10px 0; }
#fullreport-wrap { overflow-y:auto; max-height:calc(100vh - 120px); }

/* ===== 고도화 v4.0: 접근성 · UX ===== */
html { scroll-behavior: smooth; }
:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; border-radius: 4px; }
.pia-typing { display:inline-flex; gap:4px; align-items:center; }
.pia-typing > span { width:6px; height:6px; border-radius:50%; background:#94a3b8; display:inline-block; animation:piaBlink 1.2s infinite ease-in-out; }
.pia-typing > span:nth-child(2) { animation-delay:.2s; }
.pia-typing > span:nth-child(3) { animation-delay:.4s; }
@keyframes piaBlink { 0%,80%,100% { opacity:.25; transform:translateY(0); } 40% { opacity:1; transform:translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .pia-typing > span { animation:none; } }

<link rel="stylesheet" href="/vendor/fonts/fonts.css">
<style id="claude-theme">
:root{
  --c-cream:#faf9f5;--c-paper:#fffdf8;--c-ink:#141413;--c-clay:#d97757;--c-clay-d:#c4623f;
  --c-blue:#6a9bcc;--c-green:#788c5d;--c-line:#e6e3d8;--c-line2:#d4d0c2;
  --font-ui:'Noto Sans KR',-apple-system,BlinkMacSystemFont,'Segoe UI','맑은 고딕',sans-serif;
  --font-read:'Noto Sans KR',-apple-system,BlinkMacSystemFont,'Segoe UI','맑은 고딕',sans-serif;
}
body{font-family:var(--font-ui);background:var(--c-cream);color:var(--c-ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
h1,h2,h3,h4,h5,h6{font-family:var(--font-ui);letter-spacing:-.01em;}
button,input,select,textarea,nav,.pill{font-family:var(--font-ui);}
.leading-relaxed,#pia-report p,#pia-report td,#pia-report li,#pia-report .val{font-family:var(--font-read);}
::selection{background:rgba(217,119,87,.25);}
/* 중립색 → 따뜻한 크림 뉴트럴 */
.bg-slate-50{background-color:#faf9f5!important;}
.bg-slate-100{background-color:#f1efe6!important;}
.bg-slate-200{background-color:#e7e4d9!important;}
.bg-slate-400{background-color:#b0aea5!important;}
.bg-slate-900{background-color:#141413!important;}
.text-slate-400{color:#6f6d64!important;}
.text-slate-500{color:#6e6b60!important;}
.text-slate-600{color:#5f5d54!important;}
.text-slate-700{color:#46443d!important;}
.text-slate-800{color:#2d2b27!important;}
.text-slate-900{color:#141413!important;}
.border-slate-100{border-color:#efece2!important;}
.border-slate-200{border-color:#e6e3d8!important;}
.border-slate-300{border-color:#d4d0c2!important;}
.hover\:bg-slate-50:hover{background-color:#f1efe6!important;}
.hover\:bg-slate-100:hover{background-color:#e8e6dc!important;}
.hover\:text-slate-700:hover{color:#46443d!important;}
/* 흰 카드 → 종이톤 + 부드러운 그림자 */
.bg-white{background-color:#fffdf8!important;}
header.bg-white,section.bg-white{box-shadow:0 1px 2px rgba(20,20,19,.04),0 6px 20px rgba(20,20,19,.05);}
/* Primary accent: Claude Clay */
.bg-blue-600,.bg-indigo-600,.bg-violet-600{background-color:#b04928!important;}
.hover\:bg-blue-700:hover,.hover\:bg-indigo-700:hover,.hover\:bg-violet-700:hover{background-color:#8f3d22!important;}
.bg-violet-50{background-color:#fbf1ec!important;}
.bg-violet-100{background-color:#f4ddd0!important;}
.text-violet-900{color:#8a3d22!important;}
.text-violet-700{color:#9c4023!important;}
.border-violet-200{border-color:#eccfc1!important;}
.hover\:bg-violet-100:hover{background-color:#f4ddd0!important;}
/* Info: Claude Blue */
.bg-sky-50,.bg-indigo-50{background-color:#eef3f9!important;}
.bg-sky-100{background-color:#dce8f4!important;}
.bg-sky-600{background-color:#4878a7!important;}
.text-sky-600{color:#41719f!important;}
.text-sky-700,.text-indigo-700{color:#41658a!important;}
.text-sky-800{color:#35547a!important;}
.text-sky-900{color:#2c4a6b!important;}
.border-sky-200{border-color:#c4d8ec!important;}
.border-sky-300{border-color:#a9c6e2!important;}
.hover\:bg-sky-100:hover{background-color:#dce8f4!important;}
.hover\:bg-sky-700:hover{background-color:#376694!important;}
/* Success: Claude Green */
.bg-emerald-50{background-color:#f1f4ea!important;}
.bg-emerald-100{background-color:#dde6cd!important;}
.bg-emerald-500{background-color:#788c5d!important;}
.bg-emerald-600{background-color:#67794f!important;}
.text-emerald-600{color:#67794f!important;}
.text-emerald-700{color:#566840!important;}
.text-emerald-800{color:#495838!important;}
.text-emerald-900{color:#3a4630!important;}
.border-emerald-200{border-color:#cdd9b8!important;}
.hover\:bg-emerald-100:hover{background-color:#dde6cd!important;}
.hover\:bg-emerald-700:hover{background-color:#566840!important;}
/* Warning: warm amber */
.bg-amber-50{background-color:#fbf3e3!important;}
.bg-amber-100{background-color:#f6e6c2!important;}
.bg-amber-500{background-color:#d9982f!important;}
.text-amber-500{color:#c98a1e!important;}
.text-amber-700{color:#8a611d!important;}
.text-amber-800{color:#76521a!important;}
.text-amber-900{color:#5f4316!important;}
.border-amber-200{border-color:#ecd6a6!important;}
.border-amber-300{border-color:#e2c587!important;}
.hover\:bg-amber-100:hover{background-color:#f6e6c2!important;}
.hover\:bg-amber-700:hover{background-color:#76521a!important;}
/* Danger: warm red (긴급 가독성 유지) */
.bg-rose-50,.bg-red-50{background-color:#fbeeeb!important;}
.bg-rose-100,.bg-red-100{background-color:#f6dbd4!important;}
.bg-rose-500{background-color:#cf5b4a!important;}
.bg-rose-600,.bg-red-600{background-color:#c0392b!important;}
.bg-red-700{background-color:#a83226!important;}
.text-rose-700{color:#9a3a2c!important;}
.text-rose-800{color:#873025!important;}
.text-rose-900,.text-red-900{color:#6f271e!important;}
.text-red-800{color:#87241a!important;}
.border-rose-300{border-color:#e6b8ad!important;}
.border-red-300{border-color:#e6b3a8!important;}
.hover\:bg-rose-600:hover{background-color:#bd4d3e!important;}
.hover\:bg-rose-700:hover{background-color:#a83b2e!important;}
.hover\:bg-red-700:hover{background-color:#a83226!important;}
.bg-orange-50{background-color:#fbf1ea!important;}
/* 그라디언트 stop 재매핑 */
.from-violet-500{--tw-gradient-from:#d97757 var(--tw-gradient-from-position)!important;--tw-gradient-to:rgba(217,119,87,0) var(--tw-gradient-to-position)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important;}
.from-violet-100{--tw-gradient-from:#f4ddd0 var(--tw-gradient-from-position)!important;--tw-gradient-to:rgba(244,221,208,0) var(--tw-gradient-to-position)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important;}
.from-sky-50{--tw-gradient-from:#eef3f9 var(--tw-gradient-from-position)!important;--tw-gradient-to:rgba(238,243,249,0) var(--tw-gradient-to-position)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important;}
.to-emerald-50{--tw-gradient-to:#f1f4ea var(--tw-gradient-to-position)!important;}
.to-violet-50{--tw-gradient-to:#fbf1ec var(--tw-gradient-to-position)!important;}
.via-indigo-50{--tw-gradient-stops:var(--tw-gradient-from),#eef3f9 var(--tw-gradient-via-position),var(--tw-gradient-to)!important;}
/* 활성 내비/탭 */
body:not(.pia-v2) [aria-pressed="true"]{background:#141413!important;color:#fff!important;}
.aud-btn[aria-selected="true"]{background:#141413!important;color:#fff!important;}
/* 버튼/입력 폴리시 */
button{transition:background-color .15s ease,transform .06s ease,box-shadow .15s ease;}
button:active{transform:translateY(1px);}
input,select,textarea{transition:border-color .15s ease,box-shadow .15s ease;}
input:focus,select:focus,textarea:focus{border-color:var(--c-clay)!important;box-shadow:0 0 0 3px rgba(217,119,87,.16)!important;outline:none;}
:focus-visible{outline:2px solid var(--c-clay)!important;outline-offset:2px;}
/* 홈 카드 hover lift */
#home-content>*{transition:transform .15s ease,box-shadow .15s ease;}
#home-content>*:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(20,20,19,.09);}
/* 스크롤바 */
*{scrollbar-color:#cfcabb transparent;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:#d4d0c2;border-radius:6px;border:2px solid var(--c-cream);}
::-webkit-scrollbar-thumb:hover{background:#b0aea5;}
/* 결과지 종이 */
#pia-report .page{box-shadow:0 2px 16px rgba(20,20,19,.12);}


/* 2026 트렌드: 표현적 타이포 · 플로팅 카드 · 목적 있는 마이크로인터랙션 (Claude 팔레트 유지) */
h1{font-weight:700;letter-spacing:-.02em;}
h2,h3{letter-spacing:-.015em;}
header.bg-white{position:sticky;top:0;z-index:30;-webkit-backdrop-filter:saturate(1.1) blur(8px);backdrop-filter:saturate(1.1) blur(8px);background:rgba(255,253,248,.82)!important;}
section.bg-white,.rounded-2xl.bg-white,#home-content>*{box-shadow:0 1px 2px rgba(20,20,19,.04),0 8px 28px -12px rgba(20,20,19,.10);transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s ease;}
.rounded-2xl.bg-white:hover{box-shadow:0 2px 4px rgba(20,20,19,.05),0 16px 40px -16px rgba(20,20,19,.16);}
button{transition:transform .08s ease,background-color .15s ease,box-shadow .15s ease;}
button:active{transform:scale(.97);}
section[data-view]:not(.hidden){animation:viewIn .28s cubic-bezier(.2,.7,.3,1);}
@keyframes viewIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
:focus-visible{outline:2px solid #d97757;outline-offset:2px;border-radius:6px;}
@media (prefers-reduced-motion: reduce){section[data-view]:not(.hidden){animation:none;}button:active{transform:none;}}
/* 모바일 탭 응답성 + 알림 오버레이가 버튼을 가리지 않도록 */
button,a,select,input,textarea,label,[onclick]{touch-action:manipulation;}
*{-webkit-tap-highlight-color:rgba(20,20,19,.06);}
.notif-overlay{pointer-events:none!important;}
.notif-overlay .notif-inner{pointer-events:auto;}
@media (max-width:640px){
  button{min-height:42px;}
  select,input,textarea{min-height:40px;font-size:16px;}
  .flex.flex-wrap.gap-2>button,.flex.flex-wrap.gap-3>button{flex:1 1 auto;}
  nav button,#topNav button{padding-top:.5rem;padding-bottom:.5rem;}
}
@media (hover: none), (pointer: coarse), (max-width: 768px){
  header.bg-white{ -webkit-backdrop-filter:none!important; backdrop-filter:none!important; background:#fffdf8!important; }
  section.bg-white,.rounded-2xl.bg-white,#home-content>*{ transition:none!important; }
  .rounded-2xl.bg-white:hover{ box-shadow:0 1px 2px rgba(20,20,19,.04),0 8px 28px -12px rgba(20,20,19,.10)!important; transform:none!important; }
  section[data-view]:not(.hidden){ animation:none!important; }
  *{ will-change:auto!important; }
}


:root{--sh-soft:0 1px 2px rgba(20,20,19,.04),0 14px 38px -18px rgba(20,20,19,.16);--sh-lift:0 3px 8px rgba(20,20,19,.06),0 26px 56px -24px rgba(20,20,19,.26);}
h1,.text-xl{font-family:'Noto Sans KR',-apple-system,BlinkMacSystemFont,'Segoe UI','맑은 고딕',sans-serif!important;font-weight:700;letter-spacing:-.02em;}
section.bg-white,.bg-white.rounded-2xl,#home-content>*{border-radius:18px!important;border:1px solid #ece8dd!important;box-shadow:var(--sh-soft)!important;}
section.bg-white:hover,.bg-white.rounded-2xl:hover,#home-content>*:hover{box-shadow:var(--sh-lift)!important;}
header.bg-white{border:1px solid #ece8dd!important;box-shadow:var(--sh-soft)!important;}
.rounded-xl{border-radius:13px!important;}
button{border-radius:11px;}
.bg-blue-600,.bg-indigo-600,.bg-violet-600{box-shadow:0 8px 20px -9px rgba(217,119,87,.55)!important;}
.bg-slate-900{box-shadow:0 8px 20px -9px rgba(20,20,19,.45)!important;}
.pill{letter-spacing:.01em;}
nav button{letter-spacing:.005em;}
::selection{background:rgba(217,119,87,.22);}


/* 결과지: 화면에서는 떠 있는 카드/라운드/정돈된 타이포, 인쇄 시에는 단정한 문서로 자동 전환 */
@media screen {
  #pia-report .page{border-radius:14px;box-shadow:0 14px 48px -22px rgba(20,20,19,.32),0 2px 8px rgba(20,20,19,.06);}
  #pia-report .section-title{border-radius:8px;box-shadow:0 6px 16px -10px rgba(217,119,87,.45);}
  #pia-report .section-title-diamond,#pia-report .page-title{letter-spacing:-.01em;}
  #pia-report .grade-box{border-radius:6px;}
  #pia-report .info-table,#pia-report .data-table{border-radius:10px;}
}
@media print {
  #pia-report .page{box-shadow:none!important;border-radius:0!important;}
  #pia-report .section-title{box-shadow:none!important;border-radius:0!important;}
}


/* 결과지: 화면 = 고급 문서, 인쇄 = 단정한 평면 문서 */
@media screen{
  #pia-report{background:#efebe2;padding:10px 0;}
  #pia-report .page{border-radius:16px!important;box-shadow:0 18px 60px -26px rgba(20,20,19,.35),0 2px 10px rgba(20,20,19,.06)!important;border:1px solid #e6e0d2!important;}
  #pia-report .cover-title-main,#pia-report .cover-title-sub,#pia-report .page-title,#pia-report .section-title-diamond{font-family:'Noto Sans KR',-apple-system,BlinkMacSystemFont,'Segoe UI','맑은 고딕',sans-serif;letter-spacing:-.01em;}
  #pia-report .cover-badge{border-radius:999px;box-shadow:0 8px 20px -10px rgba(217,119,87,.5);}
  #pia-report .cover-info-box{border-radius:14px;overflow:hidden;box-shadow:0 12px 32px -18px rgba(20,20,19,.2);}
  #pia-report .section-title{border-radius:9px;box-shadow:0 8px 18px -11px rgba(217,119,87,.5);letter-spacing:.01em;}
  #pia-report .info-table{border-radius:10px;overflow:hidden;}
  #pia-report .data-table{border:1px solid #ece6da;}
  #pia-report .grade-box{border-radius:7px;}
}
@media print{
  #pia-report{background:#fff!important;}
  #pia-report .page{box-shadow:none!important;border-radius:0!important;border:none!important;}
  #pia-report .section-title,#pia-report .cover-badge,#pia-report .cover-info-box,#pia-report .info-table{box-shadow:none!important;border-radius:0!important;}
}


/* 본문 리듬 */
body{line-height:1.55;}
/* 헤더 상단 클레이 악센트 */
header.bg-white{border-top:3px solid #d97757!important;}
/* 리커트·SJT 선택지 — 프리미엄 인터랙션(큰 탭영역·헤어라인·호버 슬라이드) */
body:not(.pia-v2) [id^="choices-"] button,
body:not(.pia-v2) #sjt-choices button{
  border:1px solid #e6e3d8!important;border-radius:14px!important;padding:14px 16px!important;
  background:#fffdf8!important;color:#2d2b27!important;font-size:14px!important;line-height:1.5!important;
  transition:transform .12s ease,border-color .15s ease,box-shadow .15s ease,background-color .15s ease!important;
}
body:not(.pia-v2) [id^="choices-"] button:hover,
body:not(.pia-v2) #sjt-choices button:hover{
  border-color:#d97757!important;background:#fbf1ec!important;transform:translateX(3px);
  box-shadow:0 10px 24px -13px rgba(217,119,87,.55)!important;
}
body:not(.pia-v2) [id^="choices-"] button:active,
body:not(.pia-v2) #sjt-choices button:active{transform:translateX(3px) scale(.99);}
/* 결과 영웅 타이포 */
#hero-type{font-family:'Noto Sans KR',-apple-system,BlinkMacSystemFont,'Segoe UI','맑은 고딕',sans-serif!important;letter-spacing:-.02em;}
/* 레이더·도넛은 가로로 긴 상자에 들어가면 납작하게 눌린다(1391x280 같은 5:1).
   높이에 맞춰 폭을 제한해 정사각형에 가깝게 만든다. 막대 차트는 넓을수록 좋으므로 제외. */
.pia-chart-square{max-width:min(100%,34rem);margin-left:auto;margin-right:auto;}
@media print{ .pia-chart-square{max-width:110mm;} }
/* 입력 라운드 통일 */
input,select,textarea{border-radius:11px!important;}
/* 스크롤바 */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:#d8d3c6;border-radius:8px;border:2px solid #faf9f5;}
@media (prefers-reduced-motion: reduce){body:not(.pia-v2) [id^="choices-"] button:hover, body:not(.pia-v2) #sjt-choices button:hover{transform:none;}}


/* ===== 반응형 강화 (PC·모바일) — CSS only, JS/DOM 무관 ===== */
:root{
  --paper:#faf9f5; --paper-2:#f3f1ea; --paper-3:#efece2;
  --ink:#141413; --ink-soft:#3d3d3a; --line:#e3e0d6; --mid:#b0aea5;
  --rust:#d97757; --rust-deep:#c4623f; --sky:#6a9bcc; --moss:#788c5d;
  --rust-tint:#f6e9e2; --sky-tint:#e6eef6; --moss-tint:#e9eee1;
}
html,body{max-width:100%;overflow-x:hidden;}
img,canvas,svg,video{max-width:100%;height:auto;}
.max-w-6xl{max-width:min(72rem,100%);}
.overflow-x-auto{-webkit-overflow-scrolling:touch;}
@media (max-width:1023px){
  .max-w-6xl{padding-left:1rem;padding-right:1rem;}
}
@media (max-width:768px){
  .max-w-6xl{padding-left:.85rem;padding-right:.85rem;}
  header.bg-white{flex-direction:column;align-items:stretch;gap:.65rem;}
  header.bg-white nav#topNav{width:100%;}
  nav#topNav button{flex:1 1 calc(50% - .5rem);min-height:44px;justify-content:center;}
  #pia-report .page{width:100%!important;min-width:0!important;padding:18px 14px!important;}
  #home-content{grid-template-columns:1fr!important;}
  .grid.sm\:grid-cols-2,.grid.lg\:grid-cols-3{grid-template-columns:1fr!important;}
  canvas{max-height:320px;}
  button,a[role="button"],.aud-btn,[onclick]{min-height:44px;}
  input,select,textarea{min-height:44px;font-size:16px;}
  h1,.text-2xl{font-size:1.4rem!important;}
  h2,.text-xl{font-size:1.2rem!important;}
}
@media (max-width:400px){
  nav#topNav button{flex:1 1 100%;}
  .max-w-6xl{padding-left:.6rem;padding-right:.6rem;}
}
body,button,input,select,textarea,label,nav{font-family:'Noto Sans KR',-apple-system,BlinkMacSystemFont,'Segoe UI','맑은 고딕',sans-serif;}
h1,h2,h3,h4,h5,h6{font-family:'Noto Sans KR',-apple-system,BlinkMacSystemFont,'Segoe UI','맑은 고딕',sans-serif;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;}
}


@keyframes piaNextGlow{0%,100%{box-shadow:0 0 0 0 rgba(217,119,87,0)}50%{box-shadow:0 0 0 6px rgba(217,119,87,.28),0 10px 26px -8px rgba(217,119,87,.55)}}
.pia-next-glow{animation:piaNextGlow 1.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.pia-next-glow{animation:none}}
@media print{.pia-print-hide{display:none!important}}


/* ===== AI PIA Premium Polish ===== */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3{letter-spacing:-0.02em}
::selection{background:rgba(217,119,87,.22)}
header.bg-white{backdrop-filter:saturate(150%) blur(12px);-webkit-backdrop-filter:saturate(150%) blur(12px);background:rgba(255,255,255,.82)!important;box-shadow:0 10px 32px -24px rgba(20,20,19,.32)}
#home-content .rounded-2xl.border-2{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s;box-shadow:0 16px 40px -30px rgba(20,20,19,.28)}
#home-content .rounded-2xl.border-2:hover{transform:translateY(-5px);box-shadow:0 28px 58px -30px rgba(20,20,19,.40)}
#home-content .bg-gradient-to-r{box-shadow:0 18px 46px -30px rgba(20,20,19,.30)}
button{transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
button:not(:disabled):hover{filter:saturate(108%) brightness(1.02)}
button:not(:disabled):active{transform:scale(.985)}
#detailed-result .rounded-2xl,#detailed-result .bg-white,#extended-sections .rounded-2xl{box-shadow:0 18px 46px -32px rgba(20,20,19,.26)}
input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 3px rgba(217,119,87,.18)}

/* [2026-09-26 성능] 첫 화면 레이아웃 이동(CLS) 방지.
   pia-boot.js 가 DOMContentLoaded 에서 body 에 pia-v2 를 붙이기 전까지는 예전 머리말·검사 선택 가이드가
   보인다. 그 사이 첫 화면 본문(#home-content)이 먼저 그려지면, pia-v2 가 붙어 위 요소가 사라지는 순간
   본문 전체가 위로 튀어 오른다(실측 CLS 0.23, 운영 Lighthouse 의 0.228 과 같은 값).
   pia-v2 가 붙기 전에는 본문을 칠하지만 않는다(자리는 그대로) — 붙은 뒤의 모양은 예전과 같다. */
body:not(.pia-v2) #home-content{visibility:hidden;animation:pia-home-failsafe 0s linear 2.5s forwards}
/* 안전장치: pia-boot.js 가 실패해 pia-v2 가 끝내 붙지 않아도 2.5초 뒤에는 본문이 보인다. */
@keyframes pia-home-failsafe{to{visibility:visible}}