/* ============================================================
   내 머릿속 주의력 신호 — 페이지 전용 스타일
   ------------------------------------------------------------
   /_components.css 다음에 로드됩니다. 공용 규칙을 덮어쓰려면
   같은 셀렉터를 그대로 쓰면 됩니다(나중에 로드되므로 이깁니다).

   테마 색을 고칠 때는 아래 :root 블록 3개를 반드시 함께 고치세요.
     ① 다크 기본  ② [data-theme="light"]  ③ prefers-color-scheme 안의 auto
   하나만 고치면 특정 테마에서만 색이 틀어집니다.

   이 테스트만 다른 점 — 다른 테스트가 분홍·보라 계열인 것과 달리
   청록을 주색으로 씁니다. 재미로 보는 테스트들과 톤을 구분하려는
   의도예요. 결과 3단계 색(--t-low/mid/high)도 여기서 정합니다.
   ============================================================ */

:root{
  --bg:#0f0e17; --card:#1a1926; --card2:#232134;
  --ink:#fffffe; --ink2:#d6d4e8; --sub:#a7a5c0; --line:#2e2b44; --faint:#6c6a85;
  --mut:#8886a3; --mut3:#5d5b75; --mut4:#4a4860;
  --accent:#4ecdc4; --accent2:#8c7bff; --warn:#ffb86b;
  --on-accent:#0f0e17;
  --toast-bg:#2a2740; --toast-ink:#fff;
  --chip-bg:rgba(78,205,196,.12); --chip-line:rgba(78,205,196,.32);
  --bg-g1:rgba(78,205,196,.15); --bg-g2:rgba(140,123,255,.13);
  --btn-shadow:0 10px 30px rgba(78,205,196,.20);
  /* 결과 3단계 */
  --t-low:#4ecdc4;   --t-mid:#e0b04e;   --t-high:#a99bff;
  --t-low-bg:rgba(78,205,196,.10);   --t-low-line:rgba(78,205,196,.32);
  --t-mid-bg:rgba(224,176,78,.10);   --t-mid-line:rgba(224,176,78,.32);
  --t-high-bg:rgba(140,123,255,.12); --t-high-line:rgba(140,123,255,.36);
  --care-bg:rgba(255,184,107,.08); --care-line:rgba(255,184,107,.30); --care-ink:#ffd0a0;
  --radius:20px;
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#fbfaff; --card:#fff; --card2:#f3f1fa;
  --ink:#171526; --ink2:#3d3a52; --sub:#5f5c78; --line:#e7e3f2; --faint:#6f6b87;
  --mut:#6f6c88; --mut3:#7e7b95; --mut4:#9491aa;
  --accent:#17786f; --accent2:#6a51e0; --warn:#a44d24;
  --on-accent:#fff;
  --toast-bg:#171526; --toast-ink:#fff;
  --chip-bg:rgba(23,120,111,.09); --chip-line:rgba(23,120,111,.28);
  --bg-g1:rgba(23,120,111,.08); --bg-g2:rgba(140,123,255,.09);
  --btn-shadow:0 10px 24px rgba(23,120,111,.20);
  --t-low:#17786f;   --t-mid:#7d6210;   --t-high:#5a45c9;
  --t-low-bg:rgba(23,120,111,.08);  --t-low-line:rgba(23,120,111,.26);
  --t-mid-bg:rgba(125,98,16,.09);   --t-mid-line:rgba(125,98,16,.26);
  --t-high-bg:rgba(90,69,201,.09);  --t-high-line:rgba(90,69,201,.28);
  --care-bg:rgba(164,77,36,.07); --care-line:rgba(164,77,36,.26); --care-ink:#8a3f1e;
}
@media (prefers-color-scheme: light){
  :root[data-theme="auto"]{
    color-scheme:light;
    --bg:#fbfaff; --card:#fff; --card2:#f3f1fa;
    --ink:#171526; --ink2:#3d3a52; --sub:#5f5c78; --line:#e7e3f2; --faint:#6f6b87;
    --mut:#6f6c88; --mut3:#7e7b95; --mut4:#9491aa;
    --accent:#17786f; --accent2:#6a51e0; --warn:#a44d24;
    --on-accent:#fff;
    --toast-bg:#171526; --toast-ink:#fff;
    --chip-bg:rgba(23,120,111,.09); --chip-line:rgba(23,120,111,.28);
    --bg-g1:rgba(23,120,111,.08); --bg-g2:rgba(140,123,255,.09);
    --btn-shadow:0 10px 24px rgba(23,120,111,.20);
    --t-low:#17786f;   --t-mid:#7d6210;   --t-high:#5a45c9;
    --t-low-bg:rgba(23,120,111,.08);  --t-low-line:rgba(23,120,111,.26);
    --t-mid-bg:rgba(125,98,16,.09);   --t-mid-line:rgba(125,98,16,.26);
    --t-high-bg:rgba(90,69,201,.09);  --t-high-line:rgba(90,69,201,.28);
    --care-bg:rgba(164,77,36,.07); --care-line:rgba(164,77,36,.26); --care-ink:#8a3f1e;
  }
}

body{
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Segoe UI",sans-serif;
  background:var(--bg); color:var(--ink); min-height:100%;
  background-image:radial-gradient(1200px 600px at 80% -10%, var(--bg-g1), transparent 60%),
                   radial-gradient(900px 500px at 0% 110%, var(--bg-g2), transparent 60%);
  transition:background-color .2s ease,color .2s ease;
}
/* 위 여백이 58px인 이유 — 오른쪽 위 테마 버튼이 고정 배치라
   여백이 좁으면 문항 카운터(1 / 18)를 가립니다. 줄이지 마세요. */
.wrap{max-width:520px;margin:0 auto;padding:58px 20px 60px}

/* ---------- 인트로 ---------- */
.logo{font-weight:800;letter-spacing:.14em;font-size:13px;color:var(--accent);margin-bottom:30px}
.badge{font-size:12px;color:var(--sub);border:1px solid var(--line);border-radius:99px;padding:7px 12px;background:var(--card)}
.intro-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:6px 0 22px}
.icard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 10px;text-align:center}
.icard .ie{font-size:22px;margin-bottom:6px}
.icard .it{font-size:12px;font-weight:800;word-break:keep-all}
.icard .is{font-size:10.5px;color:var(--faint);margin-top:3px;word-break:keep-all}
.notice{
  background:var(--care-bg);border:1px solid var(--care-line);border-radius:14px;
  padding:15px 16px;margin:0 0 24px;font-size:13.5px;line-height:1.75;color:var(--care-ink);word-break:keep-all
}
.notice b{color:var(--ink)}
.btn{
  display:block;width:100%;border:0;cursor:pointer;text-align:center;font-family:inherit;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;font-size:17px;font-weight:800;padding:18px;border-radius:16px;
  box-shadow:var(--btn-shadow);transition:transform .12s ease;
}
.btn:focus-visible,.opt:focus-visible,.chk:focus-visible,.backlink:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}
.foot-note{margin-top:26px;font-size:11.5px;color:var(--faint);line-height:1.75;word-break:keep-all}

/* ---------- 문항 ---------- */
.backlink{background:none;border:0;color:var(--faint);font-size:13px;cursor:pointer;padding:6px;font-family:inherit}
.bar{height:6px;background:var(--card2);border-radius:99px;overflow:hidden;margin-bottom:22px}
.qtext{font-size:21px;font-weight:800;line-height:1.5;word-break:keep-all;margin-bottom:14px}
.qwhy{font-size:13px;color:var(--mut);line-height:1.7;word-break:keep-all;margin-bottom:22px}
.opt{
  display:block;width:100%;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:15px 18px;text-align:left;font-size:15px;font-weight:600;color:var(--ink);
  line-height:1.5;word-break:keep-all;cursor:pointer;transition:all .12s ease;font-family:inherit
}
.opt.on{border-color:var(--accent);background:var(--chip-bg)}
/* 감별 화면의 복수 선택 체크 */
.chk{
  display:flex;align-items:flex-start;gap:12px;width:100%;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:15px 16px;text-align:left;font-size:15px;font-weight:600;color:var(--ink);
  line-height:1.5;word-break:keep-all;cursor:pointer;transition:all .12s ease;font-family:inherit;margin-bottom:10px
}
.chk:hover{border-color:var(--accent)}
.chk:active{transform:scale(.98)}
.chk .box{
  flex:0 0 auto;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--mut3);
  display:flex;align-items:center;justify-content:center;font-size:13px;color:transparent;margin-top:1px
}
.chk.on{border-color:var(--accent);background:var(--chip-bg)}
.chk.on .box{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* ---------- 결과 ---------- */
/* 숫자 점수·백분위는 일부러 두지 않았습니다. 자세한 이유는 README.md 참고 */
.tierbox{border-radius:var(--radius);padding:26px 22px;text-align:center;margin:8px 0 16px;border:1px solid}
.tierbox.low {background:var(--t-low-bg); border-color:var(--t-low-line)}
.tierbox.mid {background:var(--t-mid-bg); border-color:var(--t-mid-line)}
.tierbox.high{background:var(--t-high-bg);border-color:var(--t-high-line)}
.tierbox .te{font-size:48px;line-height:1;margin-bottom:12px}
.tierbox .tn{font-size:22px;font-weight:900;line-height:1.35;word-break:keep-all}
.tierbox.low  .tn{color:var(--t-low)}
.tierbox.mid  .tn{color:var(--t-mid)}
.tierbox.high .tn{color:var(--t-high)}
.tierbox .tl{font-size:14.5px;color:var(--ink2);line-height:1.75;margin-top:12px;word-break:keep-all}
.safe-note{
  font-size:12.5px;color:var(--sub);background:var(--chip-bg);border:1px solid var(--chip-line);
  border-radius:12px;padding:12px 14px;margin-bottom:18px;line-height:1.7;word-break:keep-all;text-align:center
}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:16px}
.card p{font-size:14.5px;line-height:1.8;color:var(--ink2);word-break:keep-all}
.card p + p{margin-top:12px}
.traits li{font-size:14.5px;line-height:1.7;color:var(--ink2);padding:11px 0 11px 24px;position:relative;
  border-bottom:1px dashed var(--line);word-break:keep-all}
.traits li::before{content:"·";position:absolute;left:6px;color:var(--accent);font-weight:900;font-size:18px;line-height:1.4}
#r-prep li::before{content:"✓";font-size:13px;left:2px;line-height:1.9}
.helpbox{background:var(--chip-bg);border:1px solid var(--chip-line);border-radius:14px;padding:16px}
.helpbox p{font-size:13.5px;line-height:1.75;color:var(--ink2);word-break:keep-all}
.helpbox p + p{margin-top:10px}
.helpbox b{color:var(--ink)}
.evidence{font-size:13px;line-height:1.8;color:var(--sub);word-break:keep-all}
.evidence b{color:var(--ink2)}
.evidence + .evidence{margin-top:12px}
.share-area{margin:26px 0 8px}
.toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(20px);
  background:var(--toast-bg);color:var(--toast-ink);font-size:13.5px;font-weight:700;padding:12px 20px;border-radius:99px;
  opacity:0;pointer-events:none;transition:all .25s ease;z-index:99}
.disclaimer{font-size:11.5px;color:var(--faint);line-height:1.8;margin-top:26px;word-break:keep-all;text-align:center}
.sitefoot{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--faint);line-height:2;text-align:center}
.sitefoot a{color:var(--sub);text-decoration:none}
.sitefoot .brand{display:block;font-weight:800;letter-spacing:.14em;font-size:11px;color:var(--accent);margin-bottom:4px}