:root{
    color-scheme:dark;
    --bg:#0f0e17; --bg-g1:rgba(140,123,255,.20); --bg-g2:rgba(255,110,156,.13);
    --card:#1a1926; --card2:#232134;
    --ink:#fffffe; --ink2:var(--ink2); --sub:#a7a5c0; --line:#2e2b44; --faint:#6c6a85;
    --mut:var(--mut); --mut3:var(--mut3); --tint:rgba(255,255,255,.02);
    --accent:#8c7bff; --accent2:#ff6e9c; --good:#4ecdc4; --warn:#ffb86b;
    --on-accent:#0f0e17; --toast-bg:#fff; --toast-ink:#111;
    --chip-bg:var(--chip-bg); --chip-line:var(--chip-line);
    --glow:rgba(140,123,255,.25);
    /* 차트 전용 — 표면 대비를 검증한 값 (테마별로 다름) */
    --viz-sleep:#8c7bff; --viz-peak:#e05c7e; --viz-dim:#4a4763;
    --viz-grid:#3b3856; --viz-axis:#6c6a85; --viz-mark:#fffffe;
    --radius:20px;
  }
  :root[data-theme="light"]{
    color-scheme:light;
    --bg:#fbfaff; --bg-g1:rgba(140,123,255,.10); --bg-g2:rgba(255,110,156,.09);
    --card:#fff; --card2:#f3f1fa;
    --ink:#171526; --ink2:#3d3a52; --sub:#5f5c78; --line:#e7e3f2; --faint:#6f6b87;
    --mut:#6f6c88; --mut3:#7e7b95; --tint:rgba(0,0,0,.02);
    --accent:#6a51e0; --accent2:#c9336e; --good:#17786f; --warn:#a44d24;
    --on-accent:#fff; --toast-bg:#171526; --toast-ink:#fff;
    --chip-bg:rgba(106,81,224,.10); --chip-line:rgba(106,81,224,.30);
    --glow:rgba(106,81,224,.22);
    --viz-sleep:#5a45c9; --viz-peak:#c03a63; --viz-dim:#cfcbe0;
    --viz-grid:#ded9ec; --viz-axis:#6f6b87; --viz-mark:#171526;
  }
  @media (prefers-color-scheme: light){
    :root[data-theme="auto"]{
      color-scheme:light;
      --bg:#fbfaff; --bg-g1:rgba(140,123,255,.10); --bg-g2:rgba(255,110,156,.09);
      --card:#fff; --card2:#f3f1fa;
      --ink:#171526; --ink2:#3d3a52; --sub:#5f5c78; --line:#e7e3f2; --faint:#6f6b87;
      --mut:#6f6c88; --mut3:#7e7b95; --tint:rgba(0,0,0,.02);
      --accent:#6a51e0; --accent2:#c9336e; --good:#17786f; --warn:#a44d24;
      --on-accent:#fff; --toast-bg:#171526; --toast-ink:#fff;
      --chip-bg:rgba(106,81,224,.10); --chip-line:rgba(106,81,224,.30);
      --glow:rgba(106,81,224,.22);
      --viz-sleep:#5a45c9; --viz-peak:#c03a63; --viz-dim:#cfcbe0;
      --viz-grid:#ded9ec; --viz-axis:#6f6b87; --viz-mark:#171526;
    --viz-grid:#ded9ec; --viz-axis:#6f6b87; --viz-mark:#171526;
    }
  }

  

  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;
  }
  .wrap{max-width:520px;margin:0 auto;padding:58px 20px 60px}

  

  /* ---------- intro ---------- */
  .logo{font-weight:800;letter-spacing:.14em;font-size:13px;color:var(--accent);margin-bottom:34px}

  
  
  .badge{font-size:12px;color:var(--sub);border:1px solid var(--line);border-radius:99px;padding:7px 12px;background:var(--tint)}
  
  .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:0 10px 30px var(--glow);transition:transform .12s ease;
  }

  
  .foot-note{margin-top:28px;font-size:11.5px;color:var(--faint);line-height:1.7;word-break:keep-all}

  /* ---------- meta ---------- */
  .mode-title{font-size:27px;font-weight:800;line-height:1.35;margin:18px 0 14px;word-break:keep-all}
  .mode-sub{color:var(--sub);font-size:14px;line-height:1.7;margin-bottom:24px;word-break:keep-all}
  .mode-sub b{color:var(--ink)}
  .grp{margin-bottom:26px}
  .grp .gl{font-size:13px;font-weight:800;color:var(--sub);margin-bottom:11px}
  .chips{display:flex;gap:8px;flex-wrap:wrap}
  .chip{
    font-size:14px;font-weight:700;color:var(--sub);font-family:inherit;cursor:pointer;
    background:var(--card);border:1px solid var(--line);border-radius:99px;padding:11px 18px;
    transition:all .12s ease
  }
  .chip:hover{border-color:var(--accent)}
  .chip:active{transform:scale(.96)}
  .chip.on{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--accent),var(--accent2))}
  .mode-hint{margin-top:20px;font-size:12.5px;color:var(--mut);line-height:1.7;word-break:keep-all}
  .mode-hint b{color:var(--sub)}
  .backlink{background:none;border:0;color:var(--faint);font-size:13px;cursor:pointer;padding:6px;font-family:inherit}

  /* ---------- quiz ---------- */

  .bar{height:6px;background:var(--card2);border-radius:99px;overflow:hidden;margin-bottom:34px}

  
  .qtext{font-size:21px;font-weight:800;line-height:1.5;min-height:95px;word-break:keep-all;margin-bottom:8px}
  .qhint{font-size:13px;color:var(--faint);line-height:1.6;margin-bottom:22px;word-break:keep-all}
  
  .opt{
    background:var(--card);border:1px solid var(--line);border-radius:14px;
    padding:16px 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:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  
  .opt.on{border-color:var(--accent);background:var(--chip-bg)}
  .tfield{margin-bottom:16px}
  .tfield label{display:block;font-size:13px;font-weight:700;color:var(--sub);margin-bottom:8px}
  .tfield input[type=time]{
    width:100%;background:var(--card);border:1px solid var(--line);color:var(--ink);
    border-radius:14px;padding:15px 16px;font-size:17px;font-family:inherit;font-weight:700
  }
  .tfield input[type=time]::-webkit-calendar-picker-indicator{filter:invert(.65)}
  .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}

  /* ---------- result ---------- */
  .mode-chip{display:inline-block;font-size:12px;font-weight:700;color:var(--accent);
    background:var(--chip-bg);border:1px solid var(--chip-line);
    border-radius:99px;padding:6px 13px;margin-bottom:14px}
  .result-label{font-size:13px;color:var(--sub);text-align:center;margin-bottom:10px}
  .code{
    font-size:64px;font-weight:900;letter-spacing:.02em;text-align:center;line-height:1;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    -webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:10px;
    font-variant-numeric:tabular-nums
  }
  .nick{font-size:22px;font-weight:800;text-align:center;margin-bottom:6px;word-break:keep-all}
  .group-tag{text-align:center;margin-bottom:26px}
  
  .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.75;color:var(--ink2);word-break:keep-all}
  
  .traits li{font-size:14.5px;line-height:1.6;color:var(--ink2);padding:10px 0 10px 26px;position:relative;
    border-bottom:1px dashed var(--line);word-break:keep-all}
  
  .traits li::before{content:"✓";position:absolute;left:2px;color:var(--accent);font-weight:800}
  .advice-list li{padding-left:30px}
  .advice-list li::before{content:"→";color:var(--good)}

  .axes{display:flex;flex-direction:column;gap:16px}
  .axis .lab{display:flex;justify-content:space-between;font-size:12.5px;color:var(--sub);margin-bottom:6px;gap:8px}
  .axis .lab b{color:var(--ink);white-space:nowrap}
  .meter{height:10px;background:var(--card2);border-radius:99px;overflow:hidden}
  .meter i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent2));width:0%;transition:width .9s cubic-bezier(.2,.8,.2,1)}
  .axis .pct{font-size:11.5px;color:var(--mut);margin-top:5px;word-break:keep-all}
  .sched{list-style:none}
  .sched li{display:flex;justify-content:space-between;align-items:center;gap:10px;
    font-size:14.5px;color:var(--ink2);padding:12px 0;border-bottom:1px dashed var(--line);word-break:keep-all}
  .sched li:last-child{border-bottom:0}
  .sched b{font-size:16px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
  figure{margin:0}
  svg{display:block;width:100%;height:auto;overflow:visible}
  figcaption{font-size:12px;color:var(--mut);margin-top:12px;line-height:1.65;word-break:keep-all}
  .legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;font-size:12px;color:var(--sub)}
  .legend span{display:flex;align-items:center;gap:6px}
  .sw{width:11px;height:11px;border-radius:3px;display:inline-block}
  details summary{cursor:pointer;font-size:12.5px;color:var(--faint);margin-top:14px}
  table.tv{width:100%;border-collapse:collapse;font-size:13px;margin-top:12px}
  table.tv th,table.tv td{text-align:left;padding:8px 0;border-bottom:1px solid var(--line);color:var(--sub)}
  table.tv th{color:var(--faint);font-weight:700;font-size:11.5px}
  table.tv td:last-child,table.tv th:last-child{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
  .hist li{display:flex;justify-content:space-between;font-size:13px;color:var(--sub);padding:9px 0;border-bottom:1px dashed var(--line);list-style:none}
  .hist li:last-child{border-bottom:0}
  .evidence{font-size:12.5px;color:var(--mut);line-height:1.75;word-break:keep-all}
  .evidence b{color:var(--sub)}
  .share-area{margin-top:24px}
  .toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(20px);
    background:var(--toast-bg);color:var(--toast-ink);font-size:14px;font-weight:700;padding:12px 20px;border-radius:99px;
    opacity:0;pointer-events:none;transition:all .3s ease;white-space:nowrap;z-index:9}
  
  .disclaimer{margin-top:26px;font-size:11px;color:var(--mut3);line-height:1.7;text-align:center;word-break:keep-all}
  .disclaimer a{color:var(--mut)}
  .sitefoot{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);text-align:center;
    font-size:11px;color:var(--mut3);line-height:1.9}
  .sitefoot a{color:var(--mut);text-decoration:none;margin:0 7px}
  .sitefoot .brand{color:var(--sub);font-weight:800;letter-spacing:.1em;font-size:11px;display:block;margin-bottom:7px}
  /* 광고 슬롯 — 결과 확인 직후 구간에는 넣지 않음 */
  .ad-slot{margin:22px 0;min-height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:var(--tint);border:1px solid var(--line);border-radius:14px;padding:12px;overflow:hidden}
  .ad-slot:empty{display:none}
  .ad-label{font-size:9.5px;letter-spacing:.16em;color:var(--mut3);margin-bottom:8px;font-weight:700}
  .peer{display:flex;gap:10px;margin-top:14px}
  .peer > div{flex:1;background:var(--card2);border-radius:14px;padding:14px 12px;text-align:center}
  .peer .pv{font-size:21px;font-weight:900;letter-spacing:.02em;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .peer .pl{font-size:11px;color:var(--sub);margin-top:5px;line-height:1.5;word-break:keep-all}