/* ============================================================
     테마 토큰 — 다크(기본) / 라이트 / 기기 설정 따라가기
     html[data-theme] 값: auto | light | dark
     ============================================================ */
  :root{
    color-scheme:dark;
    --bg:#0f0e17; --bg-g1:rgba(140,123,255,.18); --bg-g2:rgba(255,110,156,.14);
    --card:#1a1926; --card2:#232134;
    --ink:#fffffe; --ink2:#d6d4e8; --sub:#a7a5c0;
    --mut:#8886a3; --mut2:#6c6a85; --mut3:#5d5b75; --mut4:#4a4860;
    --line:#2e2b44; --tint:rgba(255,255,255,.02);
    --accent:#ff6e9c; --accent2:#8c7bff; --good:#4ecdc4; --warn:#ffb86b;
    --on-accent:#0f0e17;
    --sel:#fff; --sel-soft:rgba(255,255,255,.35); --sel-ring:rgba(255,255,255,.25);
    --toast-bg:#fff; --toast-ink:#111;
    --chip-bg:rgba(140,123,255,.12); --chip-line:rgba(140,123,255,.35);
    --edge-bg:rgba(78,205,196,.08); --edge-line:rgba(78,205,196,.3); --edge-ink:#cfeceb;
    --norm-bg:rgba(140,123,255,.09); --norm-line:rgba(140,123,255,.28); --norm-ink:#ddd9f5;
    --banner-bg:linear-gradient(135deg, rgba(255,110,156,.15), rgba(140,123,255,.15));
    --banner-line:rgba(255,110,156,.35);
    --btn-shadow:0 10px 30px rgba(255,110,156,.25);
    --band-hot-bg:rgba(255,110,156,.18);  --band-hot-ink:#ff8fb4;
    --band-mid-bg:rgba(140,123,255,.18);  --band-mid-ink:#a99bff;
    --band-soft-bg:rgba(167,165,192,.14); --band-soft-ink:#a7a5c0;
    --band-edge-bg:rgba(78,205,196,.15);  --band-edge-ink:#4ecdc4;
    /* 궁합 4단계 — 채움색(-)과 글자색(-ink) */
    --t-best:#2f9e93; --t-good:#b08a24; --t-care:#cf7043; --t-hard:#c8455f;
    --t-best-ink:#4ecdc4; --t-good-ink:#e0b04e; --t-care-ink:#f0906a; --t-hard-ink:#ff7d99;
    --radius:20px;
  }
  /* 라이트 모드 값 — 수동 선택(light) + 기기 설정이 밝을 때(auto) 둘 다 적용 */
  :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;
    --mut:#6f6c88; --mut2:#6f6b87; --mut3:#7e7b95; --mut4:#9491aa;
    --line:#e7e3f2; --tint:rgba(0,0,0,.02);
    --accent:#c9336e; --accent2:#6a51e0; --good:#17786f; --warn:#a44d24;
    --on-accent:#fff;
    --sel:#171526; --sel-soft:rgba(23,21,38,.4); --sel-ring:rgba(23,21,38,.18);
    --toast-bg:#171526; --toast-ink:#fff;
    --chip-bg:rgba(106,81,224,.10); --chip-line:rgba(106,81,224,.30);
    --edge-bg:rgba(23,120,111,.07); --edge-line:rgba(23,120,111,.28); --edge-ink:#175f59;
    --norm-bg:rgba(106,81,224,.07); --norm-line:rgba(106,81,224,.25); --norm-ink:#3b3170;
    --banner-bg:linear-gradient(135deg, rgba(201,51,110,.10), rgba(106,81,224,.10));
    --banner-line:rgba(201,51,110,.30);
    --btn-shadow:0 10px 24px rgba(201,51,110,.22);
    --band-hot-bg:rgba(201,51,110,.12);  --band-hot-ink:#b32c62;
    --band-mid-bg:rgba(106,81,224,.12);  --band-mid-ink:#5a45c9;
    --band-soft-bg:rgba(95,92,120,.12);  --band-soft-ink:#5f5c78;
    --band-edge-bg:rgba(23,120,111,.12); --band-edge-ink:#17786f;
    --t-best-ink:#17786f; --t-good-ink:#7d6210; --t-care-ink:#a44d24; --t-hard-ink:#a52741;
  }
  @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;
      --mut:#6f6c88; --mut2:#6f6b87; --mut3:#7e7b95; --mut4:#9491aa;
      --line:#e7e3f2; --tint:rgba(0,0,0,.02);
      --accent:#c9336e; --accent2:#6a51e0; --good:#17786f; --warn:#a44d24;
      --on-accent:#fff;
      --sel:#171526; --sel-soft:rgba(23,21,38,.4); --sel-ring:rgba(23,21,38,.18);
      --toast-bg:#171526; --toast-ink:#fff;
      --chip-bg:rgba(106,81,224,.10); --chip-line:rgba(106,81,224,.30);
      --edge-bg:rgba(23,120,111,.07); --edge-line:rgba(23,120,111,.28); --edge-ink:#175f59;
      --norm-bg:rgba(106,81,224,.07); --norm-line:rgba(106,81,224,.25); --norm-ink:#3b3170;
      --banner-bg:linear-gradient(135deg, rgba(201,51,110,.10), rgba(106,81,224,.10));
      --banner-line:rgba(201,51,110,.30);
      --btn-shadow:0 10px 24px rgba(201,51,110,.22);
      --band-hot-bg:rgba(201,51,110,.12);  --band-hot-ink:#b32c62;
      --band-mid-bg:rgba(106,81,224,.12);  --band-mid-ink:#5a45c9;
      --band-soft-bg:rgba(95,92,120,.12);  --band-soft-ink:#5f5c78;
      --band-edge-bg:rgba(23,120,111,.12); --band-edge-ink:#17786f;
      --t-best-ink:#17786f; --t-good-ink:#7d6210; --t-care-ink:#a44d24; --t-hard-ink:#a52741;
    }
  }

  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);
    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%);
    min-height:100%;
    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)}
  
  .invite-banner{
    background:var(--banner-bg);
    border:1px solid var(--banner-line);
    border-radius:var(--radius);padding:16px 18px;margin-bottom:24px;font-size:14px;line-height:1.6;display:none;word-break:keep-all
  }
  .invite-banner b{color:var(--accent)}
  .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;
  }

  a.btn{text-decoration:none;box-sizing:border-box}
  a.btn.ghost{display:block}
  
  .foot-note{margin-top:28px;font-size:11.5px;color:var(--mut2);line-height:1.7;word-break:keep-all}

  /* ---------- mode select ---------- */
  .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)}
  .modes{display:flex;flex-direction:column;gap:10px}
  .mode-card{
    display:flex;align-items:center;gap:14px;text-align:left;width:100%;cursor:pointer;font-family:inherit;
    background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;
    transition:all .12s ease;color:var(--ink)
  }
  .mode-card:hover{border-color:var(--accent)}
  .mode-card:active{transform:scale(.98)}
  .mode-card .emo{font-size:24px;line-height:1}
  .mode-card .mt{font-size:16px;font-weight:800;margin-bottom:3px;display:block}
  .mode-card .ms{font-size:12.5px;color:var(--sub);line-height:1.5;word-break:keep-all;display:block}
  .mode-card .done{margin-left:auto;font-size:11.5px;color:var(--good);font-weight:800;white-space:nowrap}
  .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)}
  .mode-chip{
    display:inline-block;font-size:12px;font-weight:700;color:var(--accent2);
    background:var(--chip-bg);border:1px solid var(--chip-line);
    border-radius:99px;padding:6px 13px;margin-bottom:14px
  }

  /* ---------- 비교 ---------- */
  .cmp-row{display:flex;align-items:center;gap:10px;margin-bottom:16px}
  .cmp-box{flex:1;background:var(--card2);border-radius:14px;padding:14px 10px;text-align:center}
  .cmp-box .cb-mode{font-size:11px;color:var(--sub);margin-bottom:6px;word-break:keep-all}
  .cmp-box .cb-code{font-size:22px;font-weight:900;letter-spacing:.04em;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .cmp-box .cb-nick{font-size:11px;color:var(--sub);margin-top:4px;word-break:keep-all;line-height:1.4}
  .cmp-arrow{font-size:18px;color:var(--mut2)}
  .cmp-diff{list-style:none;margin-top:4px}
  .cmp-diff li{font-size:13.5px;line-height:1.6;color:var(--ink2);padding:9px 0;border-bottom:1px dashed var(--line);word-break:keep-all}
  .cmp-diff li:last-child{border-bottom:0}
  .cmp-diff b{color:var(--accent)}

  /* ---------- 궁합표 ---------- */
  .grid-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px}
  table.cgrid{border-collapse:separate;border-spacing:5px;margin:0 auto}
  table.cgrid th{font-size:11px;color:var(--sub);font-weight:700;padding:2px;white-space:nowrap}
  table.cgrid th.rowh{text-align:right;padding-right:6px}
  table.cgrid td{padding:0}
  .cell{
    width:62px;height:56px;border-radius:12px;border:2px solid transparent;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
    color:#fff;transition:transform .1s ease
  }
  /* 하트가 같은 색 칸 위에서 묻히지 않도록 밝은 칩 위에 얹는다 */
  .cell .c-ico{
    font-size:14px;line-height:1;background:rgba(255,255,255,.95);
    border-radius:99px;padding:2px 6px 3px;box-shadow:0 1px 2px rgba(0,0,0,.18)
  }
  .cell .c-num{font-size:18px;font-weight:900;line-height:1.1;margin-top:3px;font-variant-numeric:tabular-nums}
  .cell:active{transform:scale(.94)}
  .cell.sel{border-color:var(--sel);box-shadow:0 0 0 3px var(--sel-ring)}
  .cell.mine{outline:2px dashed var(--sel-soft);outline-offset:2px}
  .legend{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
  .legend span{font-size:11.5px;color:var(--sub);display:flex;align-items:center;gap:6px;word-break:keep-all}
  .legend i{display:inline-block;width:14px;height:14px;border-radius:4px;flex:none}
  .grid-hint{font-size:11.5px;color:var(--mut);margin-top:14px;text-align:center;word-break:keep-all}
  .rank{list-style:none}
  .rank li{
    display:grid;grid-template-columns:18px 76px 1fr auto;align-items:center;gap:9px;
    font-size:14px;padding:11px 0;border-bottom:1px dashed var(--line);color:var(--ink2)
  }
  .rank li:last-child{border-bottom:0}
  .rank .rk{font-size:12px;color:var(--mut2);font-weight:800}
  .rank .rg{font-weight:800;color:var(--ink);word-break:keep-all;font-size:13.5px}
  .rank .rbar{height:8px;background:var(--card2);border-radius:99px;overflow:hidden}
  .rank .rbar i{display:block;height:100%;border-radius:99px;width:0;transition:width .8s cubic-bezier(.2,.8,.2,1)}
  .rank .rs{font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:13.5px}

  /* ---------- 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:26px}
  
  .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;
    width:100%;display:block;font-family:inherit
  }
  .opt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

  .backlink{background:none;border:0;color:var(--mut2);font-size:13px;cursor:pointer;padding:6px;font-family:inherit}

  /* ---------- result ---------- */
  .shared-banner{
    background:var(--banner-bg);border:1px solid var(--banner-line);
    border-radius:var(--radius);padding:16px 18px;margin-bottom:22px;
    font-size:14px;line-height:1.6;display:none;word-break:keep-all;text-align:center
  }
  .shared-banner b{color:var(--accent)}
  .result-label{font-size:13px;color:var(--sub);text-align:center;margin-bottom:10px}
  .code{
    font-size:64px;font-weight:900;letter-spacing:.06em;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
  }
  .nick{font-size:22px;font-weight:800;text-align:center;margin-bottom:6px;word-break:keep-all}
  .intensity{text-align:center;margin:-4px 0 10px}
  .intensity span{
    font-size:13px;font-weight:800;color:var(--on-accent);
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    padding:5px 13px;border-radius:99px;letter-spacing:.02em
  }
  .band{font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:99px;margin-left:6px;vertical-align:1px}
  .band.극{background:var(--band-hot-bg);color:var(--band-hot-ink)}
  .band.찐{background:var(--band-mid-bg);color:var(--band-mid-ink)}
  .band.은근{background:var(--band-soft-bg);color:var(--band-soft-ink)}
  .band.경계{background:var(--band-edge-bg);color:var(--band-edge-ink)}
  .tune-list li::before{content:"◆";color:var(--accent2);font-size:12px;top:11px}
  .edge-box{
    margin-top:14px;padding:14px;border-radius:12px;
    background:var(--edge-bg);border:1px solid var(--edge-line);
    font-size:13px;line-height:1.7;color:var(--edge-ink);word-break:keep-all
  }
  .edge-box b{color:var(--good)}
  .norm-box{
    margin-top:14px;padding:14px;border-radius:12px;
    background:var(--norm-bg);border:1px solid var(--norm-line);
    font-size:13px;line-height:1.7;color:var(--norm-ink);word-break:keep-all
  }
  .norm-box b{color:var(--accent2)}
  .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}
  .axis .lab b{color:var(--ink)}
  .meter{height:10px;background:var(--card2);border-radius:99px;overflow:hidden;position:relative}
  .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}

  /* ---------- 만나면 이렇게 돼요 (좋은/어려운 궁합) ---------- */
  .match{display:flex;flex-direction:column;gap:12px}
  .m-card{border-radius:14px;padding:16px;border:1px solid;position:relative}
  .m-card .m-head{
    font-size:12px;font-weight:900;letter-spacing:.02em;
    display:inline-flex;align-items:center;gap:5px;margin-bottom:10px;
    padding:4px 10px;border-radius:99px
  }
  .m-card .m-code{font-size:22px;font-weight:900;letter-spacing:.04em;line-height:1.2}
  .m-card .m-nick{font-size:12.5px;color:var(--sub);margin-top:2px;word-break:keep-all}
  .m-card .m-t{font-size:13.5px;color:var(--ink2);line-height:1.65;margin-top:9px;word-break:keep-all}
  .m-good{background:var(--edge-bg);border-color:var(--edge-line)}
  .m-good .m-head{background:var(--band-edge-bg);color:var(--t-best-ink)}
  .m-good .m-code{color:var(--t-best-ink)}
  .m-bad{background:var(--band-hot-bg);border-color:var(--banner-line)}
  .m-bad .m-head{background:var(--band-hot-bg);color:var(--t-hard-ink)}
  .m-bad .m-code{color:var(--t-hard-ink)}

  /* ---------- 우리 둘의 궁합 (초대받아 온 경우) ---------- */
  .compat-hero{text-align:center;margin-bottom:16px}
  .ch-codes{font-size:17px;font-weight:800;letter-spacing:.03em;color:var(--ink);word-break:keep-all}
  .ch-codes span{color:var(--mut);margin:0 6px;font-weight:600}
  .ch-score{font-size:52px;font-weight:900;line-height:1.1;margin:6px 0 2px;font-variant-numeric:tabular-nums}
  .ch-score small{font-size:16px;font-weight:800;margin-left:3px}
  .ch-gauge{height:12px;background:var(--card2);border-radius:99px;overflow:hidden;margin:12px 0 12px}
  .ch-gauge i{display:block;height:100%;border-radius:99px;width:0;transition:width .9s cubic-bezier(.2,.8,.2,1)}
  .ch-tier{font-size:15px;font-weight:900;display:inline-flex;align-items:center;gap:6px;
    padding:6px 14px;border-radius:99px;margin-bottom:8px}
  .ch-name{font-size:14px;color:var(--sub);word-break:keep-all}
  .compat-title{font-size:16px;font-weight:800;margin-bottom:8px;word-break:keep-all}
  .evidence{font-size:12.5px;color:var(--mut);line-height:1.7;word-break:keep-all}
  .evidence b{color:var(--sub)}
  .share-area{margin-top:24px}
  .share-area .btn{margin-top:12px}
  .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}

  /* ---------- 광고 슬롯 ---------- */
  .ad-slot{margin:22px 0;min-height:0;text-align:center;overflow:hidden}
  .ad-slot:empty{display:none}
  .ad-label{font-size:10px;color:var(--mut4);letter-spacing:.08em;margin-bottom:6px}

  /* ---------- 푸터 ---------- */
  .site-foot{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);text-align:center}
  .site-foot a{color:var(--mut2);font-size:12px;text-decoration:none;margin:0 8px}
  .site-foot a:hover{color:var(--sub)}
  .site-foot p{font-size:11px;color:var(--mut4);margin-top:12px}