: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}
  
  .share-area .btn{margin-top:12px}
  .foot-note{margin-top:28px;font-size:11.5px;color:var(--mut2);line-height:1.7;word-break:keep-all}

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

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

  
  .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:.08em;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:8px
  }
  .mix{text-align:center;font-size:14px;color:var(--sub);margin-bottom:12px;word-break:keep-all}
  .mix b{color:var(--ink);font-weight:800}
  .nick{font-size:22px;font-weight:800;text-align:center;margin-bottom:26px;word-break:keep-all}
  .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:"\2713";position:absolute;left:2px;color:var(--accent);font-weight:800}
  .advice-list li{padding-left:30px}
  .advice-list li::before{content:"\2192";color:var(--good)}

  /* 다섯 축 막대 */
  .axes{display:flex;flex-direction:column;gap:15px}
  .axis .lab{display:flex;align-items:baseline;gap:7px;font-size:13px;color:var(--sub);margin-bottom:6px}
  .axis .lab .an{font-weight:800;color:var(--ink)}
  .axis .lab .av{margin-left:auto;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums}
  .axis .lab .rk{font-size:10.5px;font-weight:900;padding:2px 7px;border-radius:99px;background:var(--card2);color:var(--mut)}
  .axis.top1 .lab .rk{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}
  .axis.top2 .lab .rk{background:var(--chip-bg);color:var(--accent2)}
  .meter{height:10px;background:var(--card2);border-radius:99px;overflow:hidden}
  /* 1·2위는 그라디언트로 강조, 나머지도 채워진 게 보이도록 은은한 색을 준다
     (트랙과 같은 색이면 막대가 아예 안 보임) */
  .meter i{display:block;height:100%;border-radius:99px;background:var(--mut3);opacity:.55;
    width:0%;transition:width .9s cubic-bezier(.2,.8,.2,1)}
  .axis.top1 .meter i,.axis.top2 .meter i{
    background:linear-gradient(90deg,var(--accent),var(--accent2));opacity:1}
  .axis .dsc{font-size:11.5px;color:var(--mut);margin-top:5px;word-break:keep-all}
  .band{font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:99px;margin-left:2px}
  .band.\uadf9{background:var(--band-hot-bg);color:var(--band-hot-ink)}
  .band.\ucc10{background:var(--band-mid-bg);color:var(--band-mid-ink)}
  .band.\uc740\uadfc{background:var(--band-soft-bg);color:var(--band-soft-ink)}
  .band.\uacbd\uacc4{background:var(--band-edge-bg);color:var(--band-edge-ink)}

  /* 썸 떠보기 */
  .probe-cta{
    background:var(--banner-bg);border:1px solid var(--banner-line);
    border-radius:var(--radius);padding:20px;margin-bottom:16px;text-align:center
  }
  .probe-cta h4{font-size:16px;font-weight:800;margin-bottom:8px;word-break:keep-all}
  .probe-cta p{font-size:13.5px;color:var(--sub);line-height:1.65;margin-bottom:16px;word-break:keep-all}
  .probe-head{text-align:center;margin-bottom:14px}
  .probe-emo{font-size:40px;line-height:1;margin-bottom:8px}
  .probe-name{font-size:20px;font-weight:900;word-break:keep-all}
  .probe-bars{display:flex;flex-direction:column;gap:9px;margin-top:16px}
  .pb{display:grid;grid-template-columns:88px 1fr 30px;align-items:center;gap:9px;font-size:12.5px;color:var(--sub)}
  .pb .pbn{font-weight:700;color:var(--ink2);word-break:keep-all}
  .pb .pbb{height:8px;background:var(--card2);border-radius:99px;overflow:hidden}
  .pb .pbb i{display:block;height:100%;border-radius:99px;width:0;background:var(--mut3);transition:width .7s cubic-bezier(.2,.8,.2,1)}
  .pb.win .pbb i{background:linear-gradient(90deg,var(--accent),var(--accent2))}
  .pb .pbv{text-align:right;font-weight:800;font-variant-numeric:tabular-nums;color:var(--mut)}
  .pb.win .pbv{color:var(--ink)}
  .tipbox{
    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
  }
  .tipbox b{color:var(--good)}

  /* 연애세포 연결 */
  .bridge{display:flex;align-items:center;gap:10px;margin-bottom:14px}
  .bridge > div{flex:1;background:var(--card2);border-radius:14px;padding:14px 10px;text-align:center}
  .bridge .bt{font-size:11px;color:var(--sub);margin-bottom:6px}
  .bridge .bc{font-size:20px;font-weight:900;letter-spacing:.04em;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .bridge .bn{font-size:11px;color:var(--sub);margin-top:4px;word-break:keep-all;line-height:1.4}
  .bridge-arrow{font-size:18px;color:var(--mut2)}

  .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}
  .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}
  .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}

  /* ---------- 궁합표 ---------- */
  .mode-title{font-size:22px;font-weight:800;margin:14px 0 6px;line-height:1.35}
  .mode-sub{font-size:14px;color:var(--sub);line-height:1.7;margin-bottom:20px;word-break:keep-all}
  .grid-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px}
  .cgrid{border-collapse:separate;border-spacing:4px;width:100%;table-layout:fixed}
  .cgrid th{font-size:10.5px;font-weight:700;color:var(--sub);padding:2px 0;word-break:keep-all;line-height:1.25}
  .cgrid th.rowh{text-align:right;padding-right:6px;white-space:nowrap;font-size:10.5px}
  .cell{
    width:100%;aspect-ratio:1/1;border:0;border-radius:10px;cursor:pointer;padding:0;
    display:flex;align-items:center;justify-content:center;font-size:15px;font-family:inherit;
    transition:transform .12s ease,box-shadow .12s ease;
  }
  .cell .c-ico{background:rgba(255,255,255,.95);border-radius:99px;padding:2px 6px 3px;box-shadow:0 1px 2px rgba(0,0,0,.18);line-height:1}
  /* 칸 안에는 아이콘만 — 뜻은 아래 범례로 읽습니다. 글자는 화면에서만 숨기고 읽기 도구에는 남겨둬요 */
  .cell .c-lab{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cell:active{transform:scale(.92)}
  .cell.mine{box-shadow:0 0 0 2px var(--ink)}
  .cell.sel{box-shadow:0 0 0 3px var(--accent)}
  .cell:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .legend{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:14px;justify-content:center}
  .legend span{font-size:12px;color:var(--sub);display:inline-flex;align-items:center;gap:5px}
  .legend i{width:12px;height:12px;border-radius:4px;display:inline-block;font-style:normal}
  .grid-hint{font-size:11.5px;color:var(--mut3);line-height:1.7;margin-top:12px;word-break:keep-all;text-align:center}

  /* ---------- 결과 안의 궁합 카드 ---------- */
  .compat-hero{text-align:center;padding:6px 0 4px}
  .ch-codes{font-size:13px;color:var(--sub);font-weight:700;word-break:keep-all;line-height:1.6}
  .ch-codes span{color:var(--mut3);margin:0 6px}
  .ch-emo{font-size:42px;line-height:1;margin:12px 0 8px}
  .ch-tier{font-size:15px;font-weight:800}
  .ch-name{font-size:17px;font-weight:800;margin-top:8px;word-break:keep-all}