/* reset (standalone, no artifact skeleton) */
*{box-sizing:border-box}img{max-width:100%}[hidden]{display:none!important}
.in-quiz .catbar,.in-quiz #sitefoot{display:none}
a{color:inherit;text-decoration:none}

  /* 레이아웃: 다크 '밤의 놀이터' 허브 — 슬림 헤더 + 중앙 1열(max 520) + 카테고리별 액센트 컬러. 단일 다크 테마(콘텐츠 세계관에 맞춤) */
  :root{
    --bg:#131120; --bg2:#1a1730; --surface:#201c37; --surface2:#28243f; --line:#36314f;
    --fg:#ece7f4; --muted:#a79fc2; --faint:#746c94;
    --brand:#ffc24a; --brand-deep:#e0a235;
    --c-sunsak:#f6b23c; --c-ifso:#9d84e6; --c-urisai:#ff79a9; --c-game:#3fc7a6;
    --gold:#d8ac4e; --gold-soft:#ecce8b;
    --r-cheon:#d8ac4e; --r-in:#6fb49a; --r-su:#d1573f; --r-chuk:#c79a63; --r-a:#a989cf; --r-ji:#e8824a;
    --font-display:"Black Han Sans", sans-serif;
    --font-body:"IBM Plex Sans KR","Apple SD Gothic Neo", sans-serif;
    --font-serif:"Nanum Myeongjo", serif;
    color-scheme: dark;
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{
    background:
      radial-gradient(130% 60% at 50% -8%, #26203f 0%, rgba(38,32,63,0) 58%),
      var(--bg);
    color:var(--fg); font-family:var(--font-body); line-height:1.6; -webkit-font-smoothing:antialiased;
  }

  /* ───── 상단바 ───── */
  .topstack{position:sticky; top:env(safe-area-inset-top,0px); z-index:30; background:var(--bg)}
  .topbar{display:flex; align-items:center; justify-content:space-between;
    padding:11px 16px; background:rgba(19,17,32,.82); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line)}
  /* 카테고리 병렬 바 */
  .catbar{display:flex; background:rgba(19,17,32,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); padding:0 6px}
  .catbar button{flex:1; min-width:0; background:none; border:0; cursor:pointer; font-family:var(--font-body); color:var(--muted); font-weight:600; font-size:.8rem; padding:9px 2px 10px; position:relative; display:flex; flex-direction:column; align-items:center; gap:5px; transition:color .15s}
  .catbar button .d{width:6px; height:6px; border-radius:50%; background:var(--ac); opacity:.55; transition:opacity .15s, transform .15s}
  .catbar button:hover{color:var(--fg)}
  .catbar button.active{color:var(--fg)}
  .catbar button.active .d{opacity:1; transform:scale(1.25)}
  .catbar button.active::after{content:""; position:absolute; left:14%; right:14%; bottom:0; height:2.5px; border-radius:2px 2px 0 0; background:var(--ac)}
  .brand{display:flex; align-items:baseline; gap:3px; cursor:pointer; background:none; border:0; padding:0; font-family:var(--font-display); color:var(--brand); font-size:1.5rem; letter-spacing:.02em; line-height:1}
  .brand .dot{color:var(--c-urisai); font-size:1.1rem}
  .brand small{font-family:var(--font-body); color:var(--faint); font-weight:500; font-size:.66rem; letter-spacing:.14em; margin-left:5px}
  .mute{width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--fg); font-size:.95rem; cursor:pointer; display:grid; place-items:center; opacity:.8; line-height:1}
  .mute:hover{opacity:1; border-color:var(--brand)}

  .wrap{max-width:520px; margin:0 auto; padding-inline:18px; padding-block:22px 36px}
  .screen{animation:rise .4s cubic-bezier(.2,.7,.3,1) both}
  @keyframes rise{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
  @media (prefers-reduced-motion:reduce){ .screen,.sweep{animation:none!important} }

  /* ───── 홈 히어로 ───── */
  .hero{text-align:center; padding:18px 0 8px; position:relative}
  .hero .glow{position:absolute; inset:-30% 10% auto; height:220px; background:radial-gradient(closest-side, rgba(255,194,74,.22), transparent 70%); filter:blur(8px); z-index:-1}
  .hero .logo{font-family:var(--font-display); font-size:clamp(4.4rem,22vw,6.6rem); line-height:.92; color:var(--brand); letter-spacing:.01em; text-shadow:0 6px 34px rgba(255,194,74,.3)}
  .hero .logo .dot{color:var(--c-urisai)}
  .hero .tag{font-family:var(--font-display); font-size:clamp(1.15rem,5.2vw,1.5rem); margin-top:8px; color:var(--fg)}
  .hero .sub{color:var(--muted); font-size:.96rem; margin-top:9px}

  .sec-head{display:flex; align-items:baseline; justify-content:space-between; margin:30px 2px 13px}
  .sec-head h2{font-family:var(--font-display); font-size:1.18rem; margin:0; color:var(--fg); letter-spacing:.01em}
  .sec-head .more{font-size:.8rem; color:var(--faint)}

  /* 피처드 카드 */
  .feat{position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:var(--surface); cursor:pointer; display:block; width:100%; text-align:left; padding:0; color:inherit; font-family:inherit}
  .feat:hover{border-color:var(--brand)}
  .feat .ph{aspect-ratio:1200/630; width:100%; object-fit:cover; display:block}
  .feat .body{padding:14px 16px 16px}
  .feat .chips{display:flex; gap:7px; margin-bottom:8px; flex-wrap:wrap}
  .chip{font-size:.72rem; padding:4px 10px; border-radius:999px; background:var(--surface2); color:var(--muted); border:1px solid var(--line)}
  .chip.new{background:rgba(255,194,74,.16); color:var(--brand); border-color:transparent; font-weight:700}
  .chip.cat{color:var(--c-sunsak)}
  .feat h3{font-family:var(--font-display); font-size:1.24rem; margin:0 0 5px; letter-spacing:.01em}
  .feat p{margin:0; color:var(--muted); font-size:.9rem}
  .feat .go{margin-top:12px; display:inline-flex; align-items:center; gap:6px; color:var(--brand); font-weight:700; font-size:.92rem}

  /* 카테고리 그리드 */
  .cat-grid{display:grid; grid-template-columns:1fr 1fr; gap:11px}
  .cat-tile{position:relative; text-align:left; border:1px solid var(--line); background:var(--surface); border-radius:15px; padding:15px 14px 16px; cursor:pointer; color:inherit; font-family:inherit; overflow:hidden; min-height:128px; display:flex; flex-direction:column; transition:transform .12s, border-color .15s}
  .cat-tile:hover{transform:translateY(-2px); border-color:var(--ac)}
  .cat-tile .ico{width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:color-mix(in srgb,var(--ac) 20%, transparent); color:var(--ac); margin-bottom:11px}
  .cat-tile .ico svg{width:21px; height:21px; display:block}
  .cat-tile h3{font-family:var(--font-display); font-size:1.02rem; margin:0 0 3px; letter-spacing:.01em}
  .cat-tile p{margin:0; color:var(--muted); font-size:.78rem; line-height:1.4}
  .cat-tile .cnt{margin-top:auto; padding-top:9px; font-size:.72rem; color:var(--ac); font-weight:600}
  .cat-tile .cnt.soon{color:var(--faint); font-weight:500}
  .cat-tile .edge{position:absolute; top:0; left:0; right:0; height:3px; background:var(--ac); opacity:.8}

  /* ───── 카테고리 페이지 ───── */
  .page-head{margin:6px 2px 18px}
  .back{display:inline-flex; align-items:center; gap:5px; background:none; border:0; color:var(--muted); font-family:inherit; font-size:.86rem; cursor:pointer; padding:6px 0; margin-bottom:6px}
  .back:hover{color:var(--fg)}
  .page-head .ct-eyebrow{font-size:.74rem; letter-spacing:.14em; font-weight:600; color:var(--ac)}
  .page-head h1{font-family:var(--font-display); font-size:1.9rem; margin:4px 0 6px; letter-spacing:.01em}
  .page-head p{margin:0; color:var(--muted); font-size:.92rem}

  .test-list{display:flex; flex-direction:column; gap:11px}
  .test-row{display:flex; gap:13px; align-items:center; border:1px solid var(--line); background:var(--surface); border-radius:14px; padding:11px; cursor:pointer; color:inherit; font-family:inherit; text-align:left; width:100%}
  .test-row:hover{border-color:var(--ac)}
  .test-row .tt{width:74px; height:74px; border-radius:10px; object-fit:cover; flex:none; background:var(--surface2)}
  .test-row .meta{min-width:0; flex:1}
  .test-row .meta h3{font-family:var(--font-display); font-size:1.04rem; margin:0 0 4px}
  .test-row .meta p{margin:0; color:var(--muted); font-size:.82rem; line-height:1.4}
  .test-row .meta .row-chips{margin-top:7px; display:flex; gap:6px}

  .soon-wrap{text-align:center; padding:40px 20px 46px; border:1.5px dashed var(--line); border-radius:16px; background:rgba(255,255,255,.012)}
  .soon-wrap .mascot{width:122px; height:122px; margin:0 auto 16px; display:block; animation:bob 2.6s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)}}
  .soon-wrap .big{font-family:var(--font-display); font-size:1.3rem; color:var(--ac); margin-bottom:8px}
  .soon-wrap p{color:var(--muted); font-size:.9rem; margin:0 auto; max-width:300px}

  /* ───── 공통 버튼 ───── */
  .btn{width:100%; border:0; border-radius:14px; cursor:pointer; font-family:var(--font-body); font-weight:700; font-size:1.02rem; padding:15px 18px; color:#1a1428; background:linear-gradient(180deg,var(--gold-soft),var(--gold)); box-shadow:0 6px 20px rgba(216,172,78,.22); transition:transform .12s, box-shadow .12s}
  .btn:hover{transform:translateY(-1px); box-shadow:0 9px 26px rgba(216,172,78,.3)}
  .btn:active{transform:translateY(0)}
  .btn.ghost{background:transparent; color:var(--muted); border:1px solid var(--line); box-shadow:none; font-weight:500}
  .btn.ghost:hover{color:var(--fg); border-color:var(--gold)}
  :focus-visible{outline:2px solid var(--brand); outline-offset:3px}

  /* ───── 윤회 테스트(기존 세계관) ───── */
  .t-intro .eyebrow{font-size:.72rem; letter-spacing:.26em; color:var(--gold); text-align:center; font-weight:600; font-family:var(--font-body)}
  .hero-img{width:100%; border-radius:14px; display:block; border:1px solid var(--line); box-shadow:0 16px 46px -18px rgba(0,0,0,.85)}
  .lead{color:var(--muted); text-align:center; font-size:1.0rem; margin:16px 4px 0; text-wrap:pretty}
  .meta{display:flex; gap:8px; justify-content:center; margin:18px 0 22px; flex-wrap:wrap}
  .mchip{font-size:.8rem; color:var(--muted); background:var(--surface); border:1px solid var(--line); padding:6px 13px; border-radius:999px}
  .mchip b{color:var(--gold-soft); font-weight:600}

  .progress{display:flex; gap:4px; margin-bottom:20px}
  .progress i{flex:1; height:4px; border-radius:2px; background:var(--surface2); transition:background .3s}
  .progress i.done{background:var(--gold)} .progress i.now{background:var(--gold-soft)}
  .qnum{font-size:.76rem; letter-spacing:.2em; color:var(--muted); text-align:center; margin-bottom:12px}
  .panel{position:relative; aspect-ratio:3/4; width:auto; max-width:100%; max-height:40vh; margin:0 auto 20px; border-radius:12px; overflow:hidden; background:linear-gradient(180deg,#201b33,#171326); border:1px solid var(--line); box-shadow:0 10px 30px -14px rgba(0,0,0,.7); display:grid; place-items:center}
  .panel img{width:100%; height:100%; object-fit:cover; display:block}
  .panel.noimg{aspect-ratio:3/4; max-height:32vh}
  .panel.noimg::after{content:'상황 일러스트 준비 중'; position:absolute; inset:0; display:grid; place-items:center; font-size:.82rem; color:var(--faint)}
  .panel .flame{position:absolute; left:-4%; right:-4%; height:58%; bottom:-58%; pointer-events:none; z-index:2; background:linear-gradient(to top, rgba(8,3,0,.95) 0%, rgba(120,28,0,.92) 24%, rgba(255,120,20,.96) 46%, rgba(255,205,95,.72) 62%, rgba(255,170,40,0) 100%); filter:blur(2px); mix-blend-mode:screen; opacity:0}
  .panel.burning .flame{animation:flamerise .92s ease-in forwards}
  @keyframes flamerise{0%{transform:translateY(0);opacity:0}12%{opacity:1}90%{opacity:.9}100%{transform:translateY(-185%);opacity:0}}
  .panel.burning img{animation:char .92s ease-in forwards}
  @keyframes char{0%{filter:none}42%{filter:brightness(.55) contrast(1.25) saturate(.6)}100%{filter:brightness(.04) contrast(1.6) blur(2.5px);opacity:0;transform:scale(.975)}}
  .ash{position:absolute;border-radius:1px;background:var(--gold-soft);box-shadow:0 0 7px rgba(255,160,40,.85);pointer-events:none;z-index:3;opacity:0}
  @keyframes ashrise{0%{transform:translate(0,0) rotate(0);opacity:0}18%{opacity:.95}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}

  .qtext{font-family:var(--font-serif); font-weight:700; font-size:1.2rem; line-height:1.45; text-wrap:balance; margin:0 0 18px}
  .opts{display:flex; flex-direction:column; gap:10px}
  .opt{text-align:left; background:var(--surface); border:1px solid var(--line); color:var(--fg); border-radius:12px; padding:14px 16px; font-size:.97rem; line-height:1.5; cursor:pointer; font-family:var(--font-body); transition:border-color .15s, background .15s, transform .1s}
  .opt:hover{border-color:var(--gold); background:var(--surface2)}
  .opt:active{transform:scale(.99)}
  .opt.chosen{border-color:var(--gold); background:var(--surface2)}
  .opt:disabled{opacity:.45; cursor:default} .opt.chosen:disabled{opacity:1}

  .loading{text-align:center; padding-top:7vh}
  .loading h2{font-family:var(--font-serif); font-weight:700; font-size:1.3rem; margin:0 0 6px}
  .loading p{color:var(--muted); margin:0 0 26px; font-size:.92rem}
  .spinner{width:46px; height:46px; margin:0 auto 30px; border-radius:50%; border:3px solid var(--surface2); border-top-color:var(--gold); animation:spin 1s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}

  .adslot{border:1.5px dashed var(--line); border-radius:12px; padding:16px 14px; text-align:center; color:var(--muted); background:rgba(255,255,255,.012)}
  .adslot .lbl{font-size:.66rem; letter-spacing:.14em; color:var(--faint); font-weight:600; margin-bottom:6px}
  .adslot .big{color:var(--fg); font-weight:600; font-size:.96rem}
  .adslot .sub{font-size:.76rem; margin-top:5px; line-height:1.45}

  .result-eyebrow{display:flex; align-items:center; justify-content:center; gap:13px; color:var(--gold-soft); font-family:var(--font-serif); font-size:1.12rem; letter-spacing:.14em; font-weight:700; margin:4px 0 16px; text-shadow:0 0 22px rgba(236,206,139,.3)}
  .result-eyebrow::before,.result-eyebrow::after{content:""; height:1px; width:38px; background:linear-gradient(90deg,transparent,var(--gold))}
  .result-eyebrow::after{transform:scaleX(-1)}
  .result-card{position:relative; aspect-ratio:3/4; max-width:320px; margin:0 auto; border-radius:12px; background:linear-gradient(180deg,#1b1630,#120f21); overflow:hidden; border:1px solid rgba(0,0,0,.5); box-shadow:0 0 0 1px color-mix(in srgb,var(--rc,#d8ac4e) 45%,transparent), 0 16px 54px -14px var(--rc,#d8ac4e)}
  .result-card img{width:100%; height:100%; object-fit:cover; display:block}
  .rname{font-family:var(--font-serif); font-weight:800; font-size:2rem; text-align:center; margin:20px 0 2px; color:var(--rc)}
  .roneliner{text-align:center; color:var(--gold-soft); font-size:1.05rem; margin:0 0 4px; font-weight:500}
  .rmeta{text-align:center; font-size:.78rem; color:var(--muted); margin-bottom:18px}
  .rmeta b{color:var(--fg); font-weight:500}
  .rdesc{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px 17px; font-size:.97rem; margin-bottom:12px}
  .rcaution{font-size:.9rem; color:var(--muted); padding:2px 2px 0; margin-bottom:22px}
  .rcaution b{color:var(--gold-soft); font-weight:600}
  .breakdown{margin:4px 0 24px}
  .breakdown h3{font-size:.76rem; letter-spacing:.14em; color:var(--muted); text-align:center; font-weight:600; margin:0 0 12px}
  .brow{display:flex; align-items:center; gap:9px; margin-bottom:7px; font-size:.8rem}
  .brow .nm{width:48px; color:var(--muted); flex:none}
  .brow .track{flex:1; height:8px; background:var(--surface2); border-radius:4px; overflow:hidden; min-width:0}
  .brow .fill{height:100%; border-radius:4px; transition:width .9s cubic-bezier(.2,.7,.3,1)}
  .brow .pct{width:30px; text-align:right; color:var(--muted); font-variant-numeric:tabular-nums; flex:none}
  .section-label{font-size:.68rem; letter-spacing:.14em; color:var(--faint); font-weight:600; margin:22px 0 9px; text-align:center}
  .coupon{display:flex; flex-direction:column; gap:9px; margin-top:10px}
  .prod{display:flex; gap:11px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:10px 12px}
  .prod .thumb{width:46px; height:46px; border-radius:8px; background:linear-gradient(135deg,var(--surface2),#1a1530); border:1px dashed var(--line); flex:none}
  .prod .pname{font-size:.9rem; color:var(--fg)} .prod .pnote{font-size:.76rem; color:var(--muted)}
  .afftag{font-size:.72rem; color:var(--faint); text-align:center; margin-top:9px; line-height:1.4}
  .actions{display:flex; flex-direction:column; gap:10px; margin-top:24px}
  .disclaimer{text-align:center; font-size:.74rem; color:var(--faint); margin-top:24px; line-height:1.5}

  .railad{display:none}
  @media (min-width:1120px){
    body.on-result .railad{display:grid; place-items:center; position:fixed; top:50%; transform:translateY(-50%); width:160px; height:600px; z-index:5; padding:16px 10px}
    body.on-result .railad.left{right:calc(50% + 272px)}
    body.on-result .railad.right{left:calc(50% + 272px)}
  }

  /* ───── 정책/푸터 ───── */
  .prose{font-size:.92rem; color:var(--fg)}
  .prose h1{font-family:var(--font-display); font-size:1.7rem; margin:4px 0 16px}
  .prose h2{font-family:var(--font-display); font-size:1.08rem; margin:24px 0 8px; color:var(--brand)}
  .prose p{color:var(--muted); margin:0 0 12px}
  .prose a{color:var(--gold-soft)}
  .prose .upd{font-size:.78rem; color:var(--faint); margin-bottom:20px}
  footer{border-top:1px solid var(--line); margin-top:34px; padding:22px 18px calc(28px + env(safe-area-inset-bottom,0px)); text-align:center}
  footer .fnav{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:12px}
  footer .fnav button{background:none; border:0; color:var(--muted); font-family:inherit; font-size:.82rem; cursor:pointer}
  footer .fnav button:hover{color:var(--fg)}
  footer .aff{font-size:.72rem; color:var(--faint); max-width:420px; margin:0 auto 8px; line-height:1.5}
  footer .cp{font-size:.72rem; color:var(--faint)}

  .toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); background:var(--gold); color:#1a1428; font-weight:600; font-size:.88rem; padding:11px 18px; border-radius:999px; opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:40; box-shadow:0 8px 24px rgba(0,0,0,.4); max-width:90vw; text-align:center}
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ── 배포판: 카테고리 바 링크(<a>)에도 탭 스타일 적용 ── */
.catbar a{flex:1;min-width:0;background:none;border:0;cursor:pointer;font-family:var(--font-body);color:var(--muted);font-weight:600;font-size:.8rem;padding:9px 2px 10px;position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;transition:color .15s;text-decoration:none}
.catbar a .d{width:6px;height:6px;border-radius:50%;background:var(--ac);opacity:.55;transition:opacity .15s,transform .15s}
.catbar a:hover{color:var(--fg)}
.catbar a.active{color:var(--fg)}
.catbar a.active .d{opacity:1;transform:scale(1.25)}
.catbar a.active::after{content:"";position:absolute;left:14%;right:14%;bottom:0;height:2.5px;border-radius:2px 2px 0 0;background:var(--ac)}