/* hidden 속성은 display 를 가진 클래스에 밀린다.
   .camrow{display:grid} 가 붙은 줄에 hidden 을 걸면 그대로 보인다 —
   촬영 전에 "다시 찍기"가 떠 있던 것이 이 때문이다. 전역으로 못박는다. */
[hidden]{display:none!important}
/* ═══════════════════════════════════════════════
   오늘온 · 디자인 시스템
   Brand #6B4BFF · Pretendard · 24px icon grid
   ═══════════════════════════════════════════════ */

:root{
  /* brand */
  --brand:#6B4BFF; --brand-d:#5231E0; --brand-l:#8E6BFF;
  --brand-w:#F0EBFF; --brand-w2:#F7F4FF;
  --pink:#FF6FB0; --pink-d:#E0447F; --pink-w:#FFECF4;

  /* surface */
  --bg:#F6F5FA; --card:#FFFFFF; --sunk:#F1EFF8;

  /* text */
  --ink:#1A1826; --ink2:#5A5670; --ink3:#9490A6;
  --line:#E8E5F0;

  /* semantic */
  --good:#27A67C; --good-w:#E6F7F0;
  --warn:#E08A2B; --warn-w:#FFF3E0;
  --info:#2B7FD4; --info-w:#E6F4FF;

  /* shape */
  --r:14px; --r-s:10px; --r-xs:7px;

  /* type */
  --f:"Pretendard","IBM Plex Sans KR","Apple SD Gothic Neo",-apple-system,BlinkMacSystemFont,sans-serif;
  --fm:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;word-break:keep-all}
svg{display:block;flex:none}
button{font-family:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}

/* ── 앱 셸 ────────────────────────────── */
.app{max-width:430px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;
  background:var(--bg);position:relative}
.viewport{flex:1;overflow-y:auto;display:flex;flex-direction:column}
.sbody{flex:1;padding:0 1.1rem 1.4rem}

/* ── 앱바 ─────────────────────────────── */
.appbar{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:.6rem;
  padding:.55rem 1.1rem .6rem;background:var(--bg);
  /* 스크롤해도 제목과 뒤로가기는 남는다 */
  box-shadow:0 1px 0 rgba(26,24,38,0);transition:box-shadow .15s}
.appbar.stuck{box-shadow:0 1px 0 var(--line)}
.appbar .bk{width:28px;height:28px;display:grid;place-items:center;color:var(--ink);
  margin-left:-.35rem;border-radius:6px;border:none;background:none;padding:0}
.appbar .bk:hover{background:var(--sunk)}
.appbar h2{font-size:1.05rem;font-weight:700;margin:0;letter-spacing:-.025em}
.appbar .sp{flex:1}
.appbar .ico{width:28px;height:28px;display:grid;place-items:center;color:var(--ink2);
  border:none;background:none;border-radius:6px;padding:0}
.appbar .ico:hover{background:var(--sunk)}
.appsub{font-size:.78rem;color:var(--ink3);margin:-.4rem 0 .85rem;padding:0 1.1rem}

/* ── 인사 ─────────────────────────────── */
.greet{position:sticky;top:0;z-index:6;background:var(--bg);
  padding:.55rem 1.1rem .85rem;display:flex;align-items:flex-start;
  box-shadow:0 1px 0 rgba(26,24,38,0);transition:box-shadow .15s}
.greet.stuck{box-shadow:0 1px 0 var(--line)}
.greet .g1{font-size:.86rem;color:var(--ink2);margin:0}
.greet .g2{font-size:1.22rem;font-weight:700;margin:.05rem 0 0;letter-spacing:-.03em}
.greet .bell{margin-left:auto;color:var(--ink2);position:relative;border:none;background:none;padding:.2rem}
.greet .bell.dot::after{content:"";position:absolute;top:2px;right:2px;width:6px;height:6px;
  border-radius:50%;background:var(--pink)}

/* ── 섹션 타이틀 ──────────────────────── */
.st{display:flex;align-items:baseline;justify-content:space-between;margin:1.3rem 0 .55rem}
.st h3{font-size:.95rem;font-weight:700;margin:0;letter-spacing:-.025em}
.st a{font-size:.74rem;color:var(--ink3);display:flex;align-items:center;gap:.15rem}

/* ── 오늘의 운세 ──────────────────────── */
.today{background:linear-gradient(135deg,#6B4BFF 0%,#8E6BFF 55%,#A98BFF 100%);
  color:#fff;padding:1.1rem;border-radius:var(--r);margin-bottom:.7rem}
.today.low{background:linear-gradient(135deg,#4A4560 0%,#6B6485 100%)}
.today .ttop{display:flex;justify-content:space-between;align-items:center;
  font-size:.74rem;opacity:.9;margin-bottom:.55rem;font-family:var(--fm)}
.today .caution{font-size:1.02rem;font-weight:700;line-height:1.45;margin:.2rem 0 .6rem}
.today .tmain{display:flex;align-items:center;gap:1rem}
.today .tmsg{margin-top:.75rem;font-size:.82rem;background:rgba(255,255,255,.16);
  padding:.5rem .7rem;border-radius:9px;display:flex;justify-content:space-between;align-items:center}
.today .tmsg em{font-style:normal;font-size:.7rem;opacity:.8}
.ring{width:82px;height:82px;flex:none;position:relative;display:grid;place-items:center}
.ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ring .rv{font-size:1.55rem;font-weight:700;line-height:1;letter-spacing:-.04em}
.ring .rd{font-size:.6rem;opacity:.8;font-family:var(--fm)}
.tbars{flex:1;min-width:0;display:grid;gap:.28rem}
.tb{display:grid;grid-template-columns:2.6rem 1fr 1.7rem;align-items:center;gap:.4rem;font-size:.68rem}
.tb .bl{opacity:.9}
.tb .bt{height:4px;background:rgba(255,255,255,.28);border-radius:2px;overflow:hidden}
.tb .bt i{display:block;height:100%;background:#fff;border-radius:2px}
.tb .bn{text-align:right;font-family:var(--fm);font-size:.66rem;opacity:.92}

/* ── 궁합 4칸 ─────────────────────────── */
.quad{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
.qc{background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);
  padding:.75rem .7rem;position:relative;transition:.14s;display:block;text-align:left}
.qc:hover{border-color:var(--brand-l);transform:translateY(-1px)}
.qc .qi{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;margin-bottom:.42rem}
.qc .qt{font-size:.84rem;font-weight:600;display:block;letter-spacing:-.025em}
.qc .qd{font-size:.66rem;color:var(--ink3);display:block;margin-top:.08rem;line-height:1.4}
.qb{position:absolute;top:.6rem;right:.6rem;font-size:.56rem;font-family:var(--fm);
  padding:.09rem .32rem;border-radius:3px;font-weight:600}
.qb.free{background:var(--brand-w);color:var(--brand)}
.qb.adult{background:var(--pink-w);color:var(--pink-d)}

/* ── 바로가기 ─────────────────────────── */
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}
.qk{background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);
  padding:.65rem .3rem;text-align:center;display:block}
.qk:hover{border-color:var(--brand-l)}
.qk i{display:grid;place-items:center;margin-bottom:.28rem;color:var(--brand)}
.qk span{font-size:.67rem;color:var(--ink2);font-weight:500}

/* ── 카드 · 인용 ──────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1rem;margin-bottom:.7rem}
.quote{background:var(--brand-w2);border:1px solid var(--brand-w);border-radius:var(--r-s);
  padding:.85rem .9rem;display:flex;gap:.65rem;align-items:flex-start}
.quote .ql{font-size:.64rem;color:var(--brand);font-weight:600;font-family:var(--fm);
  letter-spacing:.08em;display:block;margin-bottom:.18rem}
.quote p{margin:0;font-size:.83rem;line-height:1.6}

/* ── 추천 ─────────────────────────────── */
.reco{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.rc{background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);padding:.75rem;display:block}
.rc:hover{border-color:var(--brand-l)}
.rc .rt{font-size:.8rem;font-weight:600;display:block;letter-spacing:-.025em}
.rc .rd{font-size:.65rem;color:var(--ink3);display:block;margin-top:.1rem;line-height:1.4}
.rc .rp{font-size:.72rem;color:var(--brand);font-weight:700;font-family:var(--fm);display:block;margin-top:.4rem}

/* ── 카테고리 그리드 ──────────────────── */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem}
.ct{background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);
  padding:.9rem .5rem;text-align:center;position:relative;transition:.14s;display:block}
.ct:hover{border-color:var(--brand-l);transform:translateY(-1px)}
.ct .ci{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;margin:0 auto .45rem}
.ct .cn{font-size:.79rem;font-weight:600;display:block;letter-spacing:-.025em}
.ct .cd{font-size:.62rem;color:var(--ink3);display:block;margin-top:.1rem}
.ct .cb{position:absolute;top:.42rem;right:.42rem;font-size:.53rem;font-family:var(--fm);
  padding:.07rem .27rem;border-radius:3px;font-weight:600;background:var(--brand-w);color:var(--brand)}

/* ── 리스트 행 ────────────────────────── */
.rows{display:grid;gap:.5rem}
.row{background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);
  padding:.85rem .9rem;display:flex;align-items:center;gap:.75rem;transition:.14s}
.row:hover{border-color:var(--brand-l)}
.row .ri{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none}
.row .rb{flex:1;min-width:0}
.row .rn{font-size:.88rem;font-weight:600;display:block;letter-spacing:-.025em}
.row .rs{font-size:.7rem;color:var(--ink3);display:block;margin-top:.1rem;line-height:1.45}
.row .rr{flex:none;color:var(--ink3);display:flex;align-items:center;gap:.4rem}
.price{font-size:.75rem;font-family:var(--fm);color:var(--brand);font-weight:700}
.tagx{font-size:.55rem;font-family:var(--fm);padding:.1rem .32rem;border-radius:3px;font-weight:600}
.tagx.free{background:var(--brand-w);color:var(--brand)}
.tagx.adult{background:var(--pink-w);color:var(--pink-d)}

/* ── 안내 ─────────────────────────────── */
.notice{background:var(--sunk);border-radius:var(--r-s);padding:.72rem .82rem;
  font-size:.71rem;color:var(--ink2);display:flex;gap:.5rem;line-height:1.55;margin-top:.75rem}
.notice i{flex:none;color:var(--ink3);margin-top:.08rem}
.notice b{color:var(--ink);font-weight:600}

/* ── 폼 ───────────────────────────────── */
.fl{font-size:.76rem;font-weight:600;color:var(--ink2);display:block;margin:.95rem 0 .35rem}
.fi{width:100%;border:1px solid var(--line);border-radius:var(--r-s);padding:.72rem .8rem;
  font-family:var(--f);font-size:.88rem;color:var(--ink);background:var(--card)}
.fi::placeholder{color:var(--ink3)}
.fi:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:transparent}
.frow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.4rem}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-top:.35rem}
.sgb{border:1px solid var(--line);background:var(--card);border-radius:var(--r-s);padding:.62rem;
  font-size:.82rem;font-weight:500;color:var(--ink2)}
.sgb.on{background:var(--brand-w);border-color:var(--brand);color:var(--brand);font-weight:700}
.person{background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);padding:.8rem;margin-bottom:.5rem}
.person .ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:.35rem}
.person .pn{font-size:.8rem;font-weight:700;color:var(--brand)}
.person .px{font-size:.68rem;color:var(--ink3);border:none;background:none;padding:0}
.addp{width:100%;border:1px dashed var(--line);background:none;border-radius:var(--r-s);
  padding:.68rem;color:var(--ink3);font-size:.8rem;display:flex;align-items:center;
  justify-content:center;gap:.3rem}
.addp:hover{border-color:var(--brand);color:var(--brand)}

/* ── 버튼 ─────────────────────────────── */
.cta{position:sticky;bottom:0;z-index:4;
  background:linear-gradient(to top,var(--bg) 74%,transparent);
  padding:.9rem 0 .5rem;margin-top:.6rem}
.btn{width:100%;background:var(--brand);color:#fff;border:none;border-radius:var(--r-s);
  padding:.88rem;font-size:.92rem;font-weight:700;letter-spacing:-.025em}
.btn:hover{background:var(--brand-d)}
.btn.ghost{background:var(--card);color:var(--ink2);border:1px solid var(--line);font-weight:600}
.btn.ghost:hover{background:var(--sunk)}
.btnrow{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
.btnrow.tri{grid-template-columns:1fr 1fr 1.35fr}

/* ── 결과 ─────────────────────────────── */
.rhero{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1rem;margin-bottom:.7rem}
.rhero .rt{display:flex;align-items:center;gap:1rem}
.bigscore{font-size:2.6rem;font-weight:700;color:var(--brand);line-height:1;letter-spacing:-.055em}
.bigscore em{font-style:normal;font-size:.85rem;color:var(--ink3);font-weight:500;font-family:var(--fm)}
.basis{font-size:.66rem;color:var(--ink3);margin:.55rem 0 0;padding-top:.55rem;
  border-top:1px dashed var(--line);line-height:1.5}
.mbars{flex:1;display:grid;gap:.3rem;min-width:0}
.mb{display:grid;grid-template-columns:2.4rem 1fr 1.6rem;align-items:center;gap:.4rem;font-size:.68rem}
.mb .ml{color:var(--ink2)}
.mb .mt{height:5px;background:var(--sunk);border-radius:3px;overflow:hidden}
.mb .mt i{display:block;height:100%;border-radius:3px;background:var(--brand)}
.mb .mn{text-align:right;font-family:var(--fm);color:var(--ink2)}
.tabs{display:flex;gap:.3rem;overflow-x:auto;padding-bottom:.65rem;scrollbar-width:none}
.tabs::-webkit-scrollbar{height:0}
.tab{flex:none;padding:.34rem .7rem;border-radius:20px;font-size:.76rem;
  border:1px solid var(--line);background:var(--card);color:var(--ink2)}
.tab.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:700}
.rsec{margin-bottom:.8rem}
.rsec h4{font-size:.85rem;font-weight:700;margin:0 0 .4rem;letter-spacing:-.025em}
.rsec p{font-size:.82rem;color:var(--ink2);margin:0 0 .55rem;line-height:1.75}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;margin-top:.6rem}
.kvc{background:var(--sunk);border-radius:var(--r-s);padding:.62rem .72rem}
.kvc .kk{font-size:.63rem;color:var(--ink3);display:block;font-family:var(--fm);letter-spacing:.05em}
.kvc .kvv{font-size:.82rem;font-weight:700;display:block;margin-top:.1rem}

.sharecard{background:linear-gradient(160deg,#6B4BFF,#A98BFF);border-radius:var(--r);
  padding:1.15rem;color:#fff;text-align:center}
.sharecard .sl{font-family:var(--fm);font-size:.6rem;letter-spacing:.15em;opacity:.85}
.sharecard .ss{font-size:1.95rem;font-weight:700;margin:.35rem 0 .12rem;letter-spacing:-.045em}
.sharecard .sd{font-size:.76rem;opacity:.92;line-height:1.55}
.sharecard .sb{font-family:var(--fm);font-size:.62rem;opacity:.8;margin-top:.75rem;
  padding-top:.55rem;border-top:1px solid rgba(255,255,255,.25)}

.ccta{background:var(--ink);border-radius:var(--r);padding:.9rem 1rem;color:#fff;
  display:flex;align-items:center;gap:.7rem;margin-top:.7rem}
.ccta .cc1{font-size:.85rem;font-weight:700;display:block}
.ccta .cc2{font-size:.68rem;opacity:.7;display:block;margin-top:.06rem}

/* ── 검색 · 칩 ────────────────────────── */
.searchbar{display:flex;gap:.4rem;margin-bottom:.9rem}
.searchbar .fi{flex:1}
.searchbar button{flex:none;width:46px;background:var(--brand);border:none;
  border-radius:var(--r-s);color:#fff;display:grid;place-items:center}
.chips{display:flex;flex-wrap:wrap;gap:.35rem}
.chp{font-size:.74rem;padding:.32rem .62rem;border-radius:20px;border:1px solid var(--line);
  background:var(--card);color:var(--ink2)}
.chp:hover{border-color:var(--brand);color:var(--brand)}
.chp.on{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:600}
.filters{display:flex;gap:.3rem;overflow-x:auto;padding-bottom:.75rem;scrollbar-width:none}
.filters::-webkit-scrollbar{height:0}
.filters .chp{flex:none}

/* ── 타로 ─────────────────────────────── */
.deck{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem;margin:.85rem 0}
.tcard{aspect-ratio:.62;border-radius:var(--r-xs);transition:.16s;border:1px solid rgba(255,255,255,.22);
  background:url('/assets/tarot/back.png') center/cover;display:grid;place-items:center;
  color:#fff;font-size:1.1rem;text-shadow:0 1px 4px rgba(0,0,0,.7);padding:0}
.tcard:hover{transform:translateY(-5px)}
.tcard.sel{outline:2px solid #FFB84D;outline-offset:2px;transform:translateY(-5px)}
.spread{display:grid;gap:.45rem}
.spd{background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);
  padding:.78rem .85rem;display:flex;align-items:center;gap:.7rem}
.spd:hover{border-color:var(--brand-l)}
.spd .si{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none}
.spd .sn2{font-size:.85rem;font-weight:600;display:block;letter-spacing:-.025em}
.spd .sd2{font-size:.68rem;color:var(--ink3);display:block;margin-top:.06rem}

/* ── 상담 ─────────────────────────────── */
.cnsl{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:.85rem;display:flex;gap:.75rem;margin-bottom:.55rem}
.cnsl:hover{border-color:var(--brand-l)}
.av{width:48px;height:48px;border-radius:14px;flex:none;display:grid;place-items:center;
  font-size:1.35rem;background:var(--brand-w)}
.cnsl .cb2{flex:1;min-width:0}
.cnsl .cn2{font-size:.88rem;font-weight:700;letter-spacing:-.025em}
.cnsl .cm{font-size:.68rem;color:var(--ink3);margin:.12rem 0 0;line-height:1.45}
.cnsl .cf{display:flex;align-items:center;gap:.5rem;margin-top:.42rem;font-size:.68rem}
.cnsl .star{color:#F5A623;font-weight:700;font-family:var(--fm);display:flex;align-items:center;gap:.15rem}
.cnsl .rate{font-family:var(--fm);color:var(--brand);font-weight:700;margin-left:auto}
.onair{font-size:.56rem;font-family:var(--fm);padding:.1rem .34rem;border-radius:3px;
  background:var(--good-w);color:var(--good);font-weight:700}

/* ── 마이 ─────────────────────────────── */
.wallet{background:linear-gradient(135deg,#2A2440,#4A3A7A);border-radius:var(--r);
  padding:1.05rem;color:#fff;margin-bottom:.7rem}
.wallet .wl{font-size:.66rem;opacity:.75;font-family:var(--fm);letter-spacing:.1em;
  display:flex;align-items:center;gap:.35rem}
.wallet .wv{font-size:1.8rem;font-weight:700;letter-spacing:-.035em;margin:.2rem 0 .65rem}
.wallet .wv em{font-style:normal;font-size:.9rem;opacity:.8;font-weight:500}
.wallet .wb{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.wallet .wbtn{background:rgba(255,255,255,.16);border:none;border-radius:8px;padding:.55rem;
  color:#fff;font-size:.78rem;font-weight:600}
.wallet .wbtn:hover{background:rgba(255,255,255,.26)}
.subbanner{background:linear-gradient(120deg,#FF6FB0,#FF9E6B);border-radius:var(--r);
  padding:.92rem 1rem;color:#fff;display:flex;align-items:center;gap:.7rem;margin-bottom:.7rem}
.subbanner.brand{background:linear-gradient(120deg,#6B4BFF,#A98BFF)}
.subbanner .sb1{font-size:.85rem;font-weight:700;display:block}
.subbanner .sb2{font-size:.68rem;opacity:.9;display:block;margin-top:.08rem}
.subbanner .sbp{font-family:var(--fm);font-weight:700;font-size:.85rem;flex:none}
.stat3{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;margin-bottom:.7rem}
.s3{background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);
  padding:.72rem .5rem;text-align:center;display:block}
.s3:hover{border-color:var(--brand-l)}
.s3 .s3v{font-size:1.15rem;font-weight:700;font-family:var(--fm)}
.s3 .s3l{font-size:.66rem;color:var(--ink3);display:block;margin-top:.1rem}

/* ═══ 귀인 지도(StarMap) ══════════════════ */
.smap{width:100%;height:auto;display:block;border-radius:var(--r)}
.smap-hint{text-align:center;font-size:.72rem;color:var(--ink3);padding:.6rem 0 .2rem}
.statN{display:grid;grid-template-columns:repeat(5,1fr);gap:.35rem;margin:.7rem 0}
.sN{background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);
  padding:.55rem .2rem;text-align:center}
.sN .sNv{font-size:1rem;font-weight:700;font-family:var(--fm)}
.sN .sNl{font-size:.6rem;color:var(--ink3);display:block;margin-top:.1rem;white-space:nowrap}
@media (max-width:360px){ .sN .sNl{font-size:.54rem} }
.menu{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.mi{padding:.82rem .9rem;display:flex;align-items:center;gap:.65rem;
  border-bottom:1px solid var(--line);font-size:.85rem}
.mi:last-child{border-bottom:none}
.mi:hover{background:var(--sunk)}
.mi>svg:first-child{color:var(--ink3)}
.mi .mr{margin-left:auto;color:var(--ink3);font-size:.74rem;font-family:var(--fm);
  display:flex;align-items:center;gap:.2rem}

/* ── 보관함 · 상품 ────────────────────── */
.arch,.pitem{background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);
  padding:.82rem .9rem;margin-bottom:.5rem;display:flex;align-items:center;gap:.75rem}
.arch:hover,.pitem:hover{border-color:var(--brand-l)}
.arch .ai,.pitem .pi2{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none}
.arch .ab,.pitem .pb{flex:1;min-width:0}
.arch .an,.pitem .pn2{font-size:.85rem;font-weight:600;display:block;letter-spacing:-.025em}
.arch .ad,.pitem .pd2{font-size:.67rem;color:var(--ink3);display:block;margin-top:.08rem;line-height:1.45}
.arch .ad{font-family:var(--fm)}
.pitem .pp{font-family:var(--fm);font-size:.82rem;font-weight:700;flex:none;color:inherit;text-decoration:none}
/* 목록 행 안에서 좌측은 이동, 우측 가격 버튼은 결제 — 두 동작을 분리한다 */
.pitem-l{flex:1;min-width:0;display:flex;align-items:center;gap:.75rem;color:inherit;text-decoration:none}
.ppb{flex:none;font-family:var(--fm);font-size:.8rem;font-weight:700;color:#fff;background:var(--brand);
  border:0;border-radius:9px;padding:.46rem .68rem;cursor:pointer;letter-spacing:-.02em;
  transition:filter .15s,transform .1s}
.ppb:hover{filter:brightness(1.06)}
.ppb:active{transform:scale(.97)}
.ppb:disabled{opacity:.55;cursor:default}

/* ── 스플래시 ─────────────────────────── */
.splash{flex:1;background:linear-gradient(170deg,#6B4BFF 0%,#8E6BFF 45%,#C0A8FF 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:#fff;padding:2rem}
.splash .logo{font-size:2.6rem;font-weight:700;letter-spacing:-.055em;display:flex;
  align-items:center;justify-content:center;gap:.1rem}
.splash .pw{width:34px;height:34px;border:4px solid #fff;border-radius:50%;
  position:relative;display:inline-block;margin-left:.12rem}
.splash .pw::after{content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  width:4px;height:17px;background:#fff;border-radius:2px;box-shadow:0 0 0 4px #8E6BFF}
.splash .tag{font-size:.9rem;opacity:.92;margin-top:.95rem;line-height:1.65}

/* ── 탭바 ─────────────────────────────── */
.tabbar{flex:none;position:sticky;bottom:0;display:grid;grid-template-columns:repeat(5,1fr);
  background:var(--card);border-top:1px solid var(--line);padding:.42rem 0 .58rem;z-index:5}
.tbi{display:flex;flex-direction:column;align-items:center;gap:.16rem;
  color:var(--ink3);border:none;background:none;padding:.15rem 0}
.tbi span{font-size:.6rem;font-weight:500}
.tbi.on{color:var(--brand)}
.tbi.on span{font-weight:700}

/* ── 접근성 ───────────────────────────── */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── 인트로 ────────────────────────────── */
.intro{position:fixed;inset:0;background:#0B1026;z-index:100;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.intro-vid{width:100%;height:100%;object-fit:cover;display:block}
.intro-skip{position:absolute;right:1rem;bottom:calc(1.4rem + env(safe-area-inset-bottom));
  background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.3);color:#fff;
  border-radius:20px;padding:.42rem .9rem;font-size:.78rem;font-weight:600;
  backdrop-filter:blur(6px);letter-spacing:-.02em}
.intro-skip:hover{background:rgba(0,0,0,.5)}

/* ── 브랜드 마크 ───────────────────────── */
/* 로고: 오늘 + 온(ㅗ 자리에 해). 앱 내부에서는 텍스트+SVG로 조판한다 */
.brand{display:inline-flex;align-items:center;gap:.05em;font-weight:800;
  letter-spacing:-.04em;line-height:1}
.brand .sun{display:inline-block;vertical-align:-.06em}
.brand-tag{font-size:.72rem;color:var(--ink3);letter-spacing:-.02em;font-weight:500}

/* ── 라이브 스트립 ─────────────────────── */
.live{display:flex;align-items:center;gap:.45rem;font-size:.71rem;color:var(--ink2);
  background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:.4rem .75rem;margin-bottom:.7rem;overflow:hidden;white-space:nowrap}
.live b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--good);flex:none;
  box-shadow:0 0 0 0 rgba(39,166,124,.55);animation:pulse 2.2s infinite}
.live-sep{width:1px;height:9px;background:var(--line);flex:none;margin:0 .1rem}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(39,166,124,.5)}
  70%{box-shadow:0 0 0 7px rgba(39,166,124,0)}
  100%{box-shadow:0 0 0 0 rgba(39,166,124,0)}
}

/* ── 롤링 배너 ─────────────────────────── */
.bnr{position:relative;border-radius:var(--r);overflow:hidden;margin-bottom:.7rem}
.bnr-track{display:flex;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.bnr-item{flex:0 0 100%;display:flex;align-items:center;gap:.7rem;
  padding:.85rem 1rem;color:#fff;min-height:70px}
.bnr-item.b-newyear{background:linear-gradient(115deg,#6B4BFF,#A98BFF 60%,#C9B4FF)}
.bnr-item.b-first{background:linear-gradient(115deg,#FF6FB0,#FF9E6B)}
.bnr-item.b-member{background:linear-gradient(115deg,#2E8CE0,#5FD3C4)}
.bnr-txt{flex:1;min-width:0}
.bnr-tag{display:inline-block;font-size:.58rem;font-family:var(--fm);font-weight:600;
  background:rgba(255,255,255,.22);padding:.11rem .4rem;border-radius:3px;
  letter-spacing:.04em;margin-bottom:.22rem}
.bnr-item strong{display:block;font-size:.92rem;font-weight:700;letter-spacing:-.03em}
.bnr-d{display:block;font-size:.7rem;opacity:.88;margin-top:.08rem}
.bnr-dots{position:absolute;right:.7rem;bottom:.6rem;display:flex;gap:.22rem}
.bnr-dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.42);transition:.25s}
.bnr-dots i.on{background:#fff;width:13px;border-radius:3px}

/* ── 탭바 배지 · 안전영역 ──────────────── */
.tabbar{padding-bottom:calc(.58rem + env(safe-area-inset-bottom))}
.tbi{position:relative}
.tbi .badge{position:absolute;top:-1px;left:calc(50% + 5px);min-width:15px;height:15px;
  padding:0 4px;border-radius:8px;background:var(--pink-d);color:#fff;
  font-size:.56rem;font-weight:700;font-family:var(--fm);
  display:grid;place-items:center;line-height:1}
.tbi .dot{position:absolute;top:1px;left:calc(50% + 7px);width:6px;height:6px;
  border-radius:50%;background:var(--pink-d)}

/* ── 화면 전환 ─────────────────────────── */
.viewport>*{animation:fadeUp .22s ease-out}
@keyframes fadeUp{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ── 홈 화면 추가 안내 ─────────────────── */
.a2hs{display:flex;align-items:center;gap:.65rem;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:.75rem .9rem;margin-bottom:.7rem}
.a2hs img{width:34px;height:34px;border-radius:9px;flex:none}
.a2hs .a1{font-size:.8rem;font-weight:700;display:block;letter-spacing:-.025em}
.a2hs .a2{font-size:.67rem;color:var(--ink3);display:block;margin-top:.06rem}
.a2hs .abtn{flex:none;background:var(--brand);color:#fff;border:none;border-radius:7px;
  padding:.4rem .7rem;font-size:.72rem;font-weight:700}
.a2hs .ax{flex:none;border:none;background:none;color:var(--ink3);padding:.2rem}
.a2hs .ax svg{transform:rotate(45deg)}

/* ═══ 분석중 연출 ═══════════════════════ */
.anz{position:absolute;inset:0;z-index:8;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.15rem;padding:2rem 1.5rem;transition:opacity .35s,visibility .35s}
.anz.done{opacity:0;visibility:hidden;pointer-events:none}
.anz-orb{position:relative;width:64px;height:64px;margin-bottom:1.1rem}
.anz-orb span{position:absolute;inset:0;border-radius:50%;border:2.5px solid transparent}
.anz-orb span:nth-child(1){border-top-color:var(--brand);animation:spin 1.15s linear infinite}
.anz-orb span:nth-child(2){inset:9px;border-right-color:var(--pink);animation:spin 1.6s linear infinite reverse}
.anz-orb span:nth-child(3){inset:18px;border-bottom-color:var(--warn);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.anz-label{font-size:.95rem;font-weight:700;letter-spacing:-.03em;margin:0 0 .9rem;color:var(--ink)}
.anz-steps{display:grid;gap:.4rem;margin-bottom:1.3rem;min-width:11rem}
.anz-step{display:flex;align-items:center;gap:.45rem;font-size:.78rem;
  color:var(--ink3);opacity:.45;transition:.3s}
.anz-step.on{opacity:1;color:var(--ink2)}
.anz-tick{width:16px;height:16px;border-radius:50%;background:var(--sunk);color:transparent;
  display:grid;place-items:center;flex:none;transition:.3s}
.anz-step.on .anz-tick{background:var(--brand);color:#fff}
.anz-bar{width:11rem;height:3px;border-radius:2px;background:var(--sunk);overflow:hidden}
.anz-bar i{display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--brand),var(--pink));transition:width .35s ease-out}

/* 결과가 차오르는 전환 */
[data-count]{font-variant-numeric:tabular-nums}
.tb .bt i,.mb .mt i{width:0;transition:width .9s cubic-bezier(.22,1,.36,1)}
.ring circle:last-child{transition:stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1)}
[data-anz-host]{position:relative}

/* 스켈레톤 */
.sk{background:linear-gradient(100deg,var(--sunk) 30%,#fff 50%,var(--sunk) 70%);
  background-size:220% 100%;animation:shim 1.3s infinite;border-radius:6px}
@keyframes shim{to{background-position:-220% 0}}
@media (prefers-reduced-motion:reduce){
  .anz-orb span,.sk{animation:none}
  .tb .bt i,.mb .mt i,.ring circle:last-child{transition:none}
}

/* ═══ 상단 프로필 스트립 ═══════════════ */
.tbar{position:sticky;top:0;z-index:7;display:flex;align-items:center;gap:.6rem;
  background:var(--bg);padding:.55rem 1.1rem .6rem;
  box-shadow:0 1px 0 rgba(26,24,38,0);transition:box-shadow .15s}
.tbar.stuck{box-shadow:0 1px 0 var(--line)}
.tbar-me{display:flex;align-items:center;gap:.55rem;min-width:0;flex:1;color:inherit;text-decoration:none}
.tbar-av{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:1rem;background:linear-gradient(135deg,var(--brand-l),var(--pink));
  box-shadow:0 2px 8px rgba(107,75,255,.28)}
.tbar-txt{min-width:0}
.tbar-hi{display:block;font-size:.82rem;color:var(--ink2);letter-spacing:-.025em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbar-hi b{color:var(--ink);font-weight:700}
.tbar-gr{display:block;font-size:.65rem;color:var(--ink3);margin-top:.05rem}
.tbar-gr b{color:var(--brand);font-weight:700}
.tbar-right{display:flex;align-items:center;gap:.4rem;flex:none}
.tbar-ic{position:relative;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background:var(--card);border:1px solid var(--line);color:var(--ink2)}
.tbar-ic .nb{position:absolute;top:-4px;right:-4px;min-width:15px;height:15px;padding:0 4px;
  border-radius:8px;background:var(--pink-d);color:#fff;font-size:.55rem;font-weight:700;
  font-family:var(--fm);display:grid;place-items:center;line-height:1}
.pt{display:flex;align-items:center;gap:.32rem;padding:.32rem .6rem .32rem .34rem;
  border-radius:999px;background:linear-gradient(135deg,var(--brand),var(--brand-l));
  color:#fff;box-shadow:0 2px 10px rgba(107,75,255,.3)}
.pt-coin{width:19px;height:19px;border-radius:50%;background:rgba(255,255,255,.26);
  display:grid;place-items:center;font-size:.58rem;font-weight:900;flex:none}
.pt b{font-size:.78rem;font-weight:700;font-family:var(--fm);letter-spacing:-.01em}

/* ═══ 토스트 ═══════════════════════════ */
#toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%) translateY(14px);
  background:rgba(26,24,38,.96);color:#fff;padding:.62rem 1.1rem;border-radius:999px;
  font-size:.8rem;font-weight:600;white-space:nowrap;z-index:9999;opacity:0;
  transition:opacity .24s,transform .24s;pointer-events:none;backdrop-filter:blur(10px);
  letter-spacing:-.02em;max-width:88vw;overflow:hidden;text-overflow:ellipsis}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ═══ 히어로 ═══════════════════════════ */
.hero{position:relative;border-radius:var(--r);padding:1.3rem 1.1rem 1.2rem;
  margin-bottom:.8rem;color:#fff;overflow:hidden;text-align:center}
.hero-bg{position:absolute;inset:0;opacity:.5;
  background:radial-gradient(120% 90% at 50% -20%,rgba(255,255,255,.5),transparent 60%)}
.hero-brand{background:linear-gradient(135deg,#6B4BFF,#A98BFF)}
.hero-pink {background:linear-gradient(135deg,#FF6FB0,#FF9E6B)}
.hero-warn {background:linear-gradient(135deg,#F5A623,#FFCF6B)}
.hero-good {background:linear-gradient(135deg,#1FA97F,#5FD3C4)}
.hero-info {background:linear-gradient(135deg,#2E8CE0,#7FC4FF)}
.hero-dark {background:linear-gradient(135deg,#2A2440,#5A4A8A)}
.hero>*{position:relative}
.hero-emo{display:block;font-size:2.1rem;line-height:1;margin-bottom:.45rem;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.18));animation:float 3.4s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.hero-t{font-size:1.15rem;font-weight:800;letter-spacing:-.035em;margin:0 0 .25rem;line-height:1.35}
.hero-d{font-size:.78rem;opacity:.92;margin:0;line-height:1.55;max-width:26ch;
  margin-left:auto;margin-right:auto}
.hero-stats{display:flex;justify-content:center;gap:1.6rem;margin-top:.9rem;
  padding-top:.8rem;border-top:1px solid rgba(255,255,255,.22)}
.hero-stats div{text-align:center}
.hero-stats b{display:block;font-size:1.05rem;font-weight:800;font-family:var(--fm);letter-spacing:-.02em}
.hero-stats span{display:block;font-size:.63rem;opacity:.85;margin-top:.05rem}

/* ═══ 게임 허브 ═══════════════════════ */
.pbanner{display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(120deg,#2A2440,#4A3A7A);border-radius:var(--r);
  padding:.9rem 1rem;color:#fff;margin-bottom:.75rem}
.pb-l{display:block;font-size:.68rem;opacity:.78}
.pbanner b{font-size:1.5rem;font-weight:800;font-family:var(--fm);letter-spacing:-.03em}
.pb-max{font-size:.66rem;opacity:.7;font-family:var(--fm)}
.glist{display:grid;gap:.5rem}
.gcard{display:flex;align-items:center;gap:.75rem;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-s);padding:.85rem .9rem;transition:.14s}
.gcard:hover{border-color:var(--brand-l);transform:translateY(-1px)}
.gci{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none}
.gtx{flex:1;min-width:0}
.gn{display:flex;align-items:center;gap:.35rem;font-size:.88rem;font-weight:700;letter-spacing:-.025em}
.gd{display:block;font-size:.68rem;color:var(--ink3);margin-top:.08rem}
.gtag{font-size:.55rem;font-family:var(--fm);font-weight:700;padding:.08rem .3rem;
  border-radius:3px;background:var(--brand-w);color:var(--brand);font-style:normal}
.gtag.hot{background:var(--pink-w);color:var(--pink-d)}
.invite-cta{display:flex;align-items:center;gap:.7rem;padding:.95rem 1rem;border-radius:var(--r);
  background:linear-gradient(120deg,#FF6FB0,#FFB06B);color:#fff}
.ic1{display:block;font-size:.88rem;font-weight:800;letter-spacing:-.03em}
.ic2{display:block;font-size:.68rem;opacity:.92;margin-top:.08rem}
.ic-emo{font-size:1.6rem;flex:none}

/* ═══ 출석 ═══════════════════════════ */
.streak{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:1.1rem;text-align:center;margin-bottom:.75rem}
.sk-l{display:block;font-size:.7rem;color:var(--ink3)}
.streak b{display:block;font-size:2rem;font-weight:800;color:var(--brand);
  letter-spacing:-.04em;line-height:1.15;font-variant-numeric:tabular-nums}
.sk-d{display:block;font-size:.72rem;color:var(--ink2);margin-top:.2rem}
.sk-d b{display:inline;font-size:inherit;color:var(--brand)}
.cal{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem;margin-bottom:.3rem}
.cal .cd{background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);
  padding:.6rem .3rem;text-align:center;position:relative}
.cd-n{display:block;font-size:.6rem;color:var(--ink3);font-family:var(--fm)}
.cd-i{display:grid;place-items:center;width:26px;height:26px;margin:.25rem auto;border-radius:50%;
  background:var(--sunk);color:var(--ink3);font-size:.62rem;font-weight:800;font-family:var(--fm)}
.cd-p{display:block;font-size:.6rem;color:var(--ink2);font-weight:600;font-family:var(--fm)}
.cal .cd.done{background:var(--brand-w2);border-color:var(--brand-w)}
.cal .cd.done .cd-i{background:var(--brand);color:#fff}
.cal .cd.today{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-w)}
.cal .cd.today .cd-i{background:var(--brand);color:#fff;animation:pulse2 1.6s infinite}
@keyframes pulse2{0%,100%{transform:scale(1)}50%{transform:scale(1.13)}}
.cal .cd:nth-child(7){grid-column:span 2}

/* ═══ 뽑기 ═══════════════════════════ */
.draw-wrap{display:flex;flex-direction:column}
.draw-stage{position:relative;min-height:340px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(170deg,#1B1533,#3A2A6B 60%,#6B4BFF);padding:1.5rem 1rem}
.orb-bg{position:absolute;inset:0;
  background:radial-gradient(60% 45% at 50% 42%,rgba(255,220,120,.34),transparent 68%)}
.pouch{position:relative;cursor:pointer;transition:transform .2s}
.pouch:active{transform:scale(.94)}
.pouch-body{font-size:5rem;line-height:1;filter:drop-shadow(0 8px 22px rgba(0,0,0,.36));
  animation:float 3s ease-in-out infinite}
.pouch.shake .pouch-body{animation:shake .42s cubic-bezier(.36,.07,.19,.97) 3}
@keyframes shake{10%,90%{transform:translateX(-2px) rotate(-3deg)}
  30%,70%{transform:translateX(4px) rotate(4deg)}50%{transform:translateX(-5px) rotate(-5deg)}}
.pouch-glow{position:absolute;inset:-24px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(255,225,140,.7),transparent 66%);transition:opacity .4s}
.pouch.hot .pouch-glow{opacity:1;animation:glow 1s ease-in-out infinite}
@keyframes glow{0%,100%{transform:scale(1);opacity:.65}50%{transform:scale(1.16);opacity:1}}
.draw-msg{position:relative;color:rgba(255,255,255,.9);font-size:.82rem;margin:1.1rem 0 0;
  text-align:center;letter-spacing:-.02em}
.reveal{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:1.2rem}
.rv-card{background:rgba(255,255,255,.97);border-radius:16px;padding:1.3rem 1.1rem;text-align:center;
  width:100%;max-width:16rem;box-shadow:0 18px 50px rgba(0,0,0,.4);
  animation:pop .55s cubic-bezier(.34,1.56,.64,1)}
@keyframes pop{0%{transform:scale(.7) rotate(-6deg);opacity:0}100%{transform:none;opacity:1}}
.rv-grade{display:inline-block;font-size:.62rem;font-weight:800;font-family:var(--fm);
  padding:.15rem .5rem;border-radius:4px;background:var(--brand-w);color:var(--brand);letter-spacing:.06em}
.rv-han{display:block;font-size:2.5rem;font-weight:800;color:var(--ink);margin:.35rem 0 .1rem;
  letter-spacing:.06em;line-height:1}
.rv-name{display:block;font-size:.9rem;font-weight:700;color:var(--brand)}
.rv-desc{font-size:.76rem;color:var(--ink2);margin:.6rem 0 0;line-height:1.65}
.rv-parts{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.pt-dot{position:absolute;width:7px;height:7px;border-radius:50%;
  animation:burst .95s ease-out forwards}
@keyframes burst{0%{transform:translate(0,0) scale(1);opacity:1}
  100%{transform:translate(var(--tx),var(--ty)) scale(.2);opacity:0}}
.odds{margin-top:.7rem}
.odds details{background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);padding:.7rem .85rem}
.odds summary{font-size:.76rem;color:var(--ink2);font-weight:600;cursor:pointer}
.odds-rows{display:grid;gap:.3rem;margin-top:.6rem}
.odds-rows div{display:flex;justify-content:space-between;font-size:.76rem;font-family:var(--fm)}
.og{font-family:var(--f);font-weight:700;font-size:.75rem}
.og.g4{color:#D9375E}.og.g3{color:#B2731A}.og.g2{color:var(--brand)}.og.g1{color:var(--ink3)}
.odds-n{font-size:.66rem;color:var(--ink3);margin:.55rem 0 0;line-height:1.5}

/* ═══════════════════════════════════════
   인증 · 온보딩
   ═══════════════════════════════════════ */
.auth{flex:1;display:flex;flex-direction:column;padding:0 1.4rem 1.4rem;
  background:linear-gradient(175deg,#F7F4FF,var(--bg) 45%)}
.auth-top{padding:3.4rem 0 2.2rem;text-align:center}
.auth-tag{font-size:.84rem;color:var(--ink2);margin:.5rem 0 0}
.auth-body{flex:1}
.sso{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;
  border-radius:11px;padding:.85rem;font-size:.9rem;font-weight:700;letter-spacing:-.025em;margin-bottom:.5rem}
.sso-ic{width:20px;height:20px;display:grid;place-items:center;flex:none}
.sso.kakao{background:#FEE500;color:#191600}
.sso.naver{background:#03C75A;color:#fff}
.sso.apple{background:#000;color:#fff}
.auth-or{display:flex;align-items:center;gap:.7rem;margin:1.2rem 0 .9rem;color:var(--ink3);font-size:.74rem}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-legal{font-size:.68rem;color:var(--ink3);line-height:1.65;margin:1.3rem 0 0;text-align:center}
.auth-legal b{color:var(--ink2);font-weight:600;text-decoration:underline}
.auth-skip{text-align:center;font-size:.8rem;color:var(--ink3);padding:1rem 0 .3rem}

.pwbar{height:3px;background:var(--sunk);border-radius:2px;margin-top:.4rem;overflow:hidden}
.pwbar i{display:block;height:100%;width:0;border-radius:2px;background:var(--danger,#D63A5B);transition:.25s}
.pwbar i.mid{background:var(--warn)} .pwbar i.ok{background:var(--good)}
.fhint{font-size:.7rem;color:var(--ink3);margin:.3rem 0 0}

.agree{margin-top:1.3rem;border-top:1px solid var(--line);padding-top:.9rem}
.ck{display:flex;align-items:center;gap:.55rem;padding:.42rem 0;font-size:.8rem;color:var(--ink2);cursor:pointer}
.ck.all{font-size:.87rem;color:var(--ink);padding-bottom:.7rem;margin-bottom:.35rem;border-bottom:1px solid var(--line)}
.ck input{position:absolute;opacity:0;width:0;height:0}
.ck .bx{width:19px;height:19px;border-radius:5px;border:1.5px solid var(--line);flex:none;
  display:grid;place-items:center;color:transparent;transition:.15s}
.ck input:checked~.bx{background:var(--brand);border-color:var(--brand);color:#fff}
.ck em{font-style:normal;font-size:.66rem;color:var(--brand);font-weight:700;margin-left:.15rem}
.ck .opt{font-size:.66rem;color:var(--ink3);margin-left:.15rem}
.ck a{margin-left:auto;color:var(--ink3)}

.prog{height:4px;background:var(--sunk);border-radius:2px;overflow:hidden;margin:.3rem 0 .4rem}
.prog i{display:block;height:100%;border-radius:2px;background:var(--brand);transition:width .4s cubic-bezier(.22,1,.36,1)}
.prog-t{font-size:.72rem;color:var(--ink3);font-family:var(--fm);margin:0 0 1.1rem}
.prog-t b{color:var(--brand)}
.onb{display:none} .onb.on{display:block;animation:fadeUp .26s ease-out}
.onb-q{font-size:1.18rem;font-weight:800;letter-spacing:-.035em;margin:0 0 .3rem;line-height:1.4}
.hours{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;margin-top:.35rem}
.hr{border:1px solid var(--line);background:var(--card);border-radius:9px;padding:.5rem .2rem;text-align:center}
.hr b{display:block;font-size:.92rem;font-weight:700;font-family:var(--f)}
.hr span{display:block;font-size:.6rem;color:var(--ink3);font-family:var(--fm);margin-top:.05rem}
.hr.on{background:var(--brand-w);border-color:var(--brand);color:var(--brand)}
.hr.wide{grid-column:span 4;padding:.62rem}
.hr.wide b{display:none}
.hr.wide::after{content:"시간을 모릅니다";font-size:.8rem;font-weight:600}
.hr.wide span{display:none}

/* ═══════════════════════════════════════
   행운번호
   ═══════════════════════════════════════ */
.lotto{background:linear-gradient(170deg,#2A2440,#4A3A7A);border-radius:var(--r);
  padding:1.5rem 1rem;text-align:center;margin-bottom:.75rem}
.lo-balls{display:flex;justify-content:center;gap:.45rem;flex-wrap:wrap}
.lo-ball{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.45);font-family:var(--fm);font-size:.92rem;font-weight:700;
  transition:.3s cubic-bezier(.34,1.56,.64,1)}
.lo-ball.pop{background:linear-gradient(150deg,#FFB84D,#FF7A45);border-color:transparent;
  color:#fff;transform:scale(1.14);box-shadow:0 6px 18px rgba(255,140,60,.42)}
.lo-ball.rolling{animation:roll .28s linear infinite}
@keyframes roll{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.lo-msg{color:rgba(255,255,255,.85);font-size:.8rem;margin:1.1rem 0 0}
.lucky3{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem}
.l3{background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);padding:.75rem .4rem;text-align:center}
.l3e{display:block;font-size:1.2rem;line-height:1}
.l3 b{display:block;font-size:.85rem;font-weight:700;margin-top:.28rem}
.l3 span:last-child{display:block;font-size:.63rem;color:var(--ink3);margin-top:.05rem}

/* ═══════════════════════════════════════
   별자리
   ═══════════════════════════════════════ */
.zgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem}
.zc{border:1px solid var(--line);background:var(--card);border-radius:var(--r-s);padding:.65rem .3rem;text-align:center}
.zc.on{border-color:var(--brand);background:var(--brand-w2);box-shadow:0 0 0 2px var(--brand-w)}
.zg{display:block;font-size:1.15rem;color:var(--brand);line-height:1}
.zc b{display:block;font-size:.74rem;font-weight:700;margin-top:.2rem}
.zd{display:block;font-size:.58rem;color:var(--ink3);font-family:var(--fm);margin-top:.05rem}
.zrow{display:flex;align-items:center;justify-content:space-between;padding:.4rem 0;
  border-bottom:1px solid var(--line);font-size:.84rem}
.zrow:last-of-type{border-bottom:none}
.stars{color:#F5A623;letter-spacing:.1em;font-size:.82rem}
.ztext{font-size:.83rem;color:var(--ink2);line-height:1.75;margin:.8rem 0 0;
  padding-top:.8rem;border-top:1px dashed var(--line)}
.dt{font-size:.72rem;color:var(--ink3);font-family:var(--fm)}
.wk{display:flex;align-items:flex-end;gap:.35rem;height:110px;padding:.4rem 0 0}
.wk-c{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end}
.wk-c i{width:100%;max-width:26px;border-radius:4px 4px 0 0;background:var(--brand);
  min-height:4px;transition:height .8s cubic-bezier(.22,1,.36,1)}
.wk-c span{font-size:.65rem;color:var(--ink3);margin-top:.3rem}
.lucky6{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem}
.zperiods{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}
.zper{background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);padding:.6rem .5rem}
.zper b{display:block;font-size:.76rem;font-weight:700;color:var(--brand);margin-bottom:.25rem}
.zper p{font-size:.74rem;color:var(--ink2);line-height:1.55;margin:0}
.zmatch{display:flex;flex-wrap:wrap;gap:.4rem}
.zm-g,.zm-c{display:inline-flex;align-items:center;gap:.3rem;font-size:.8rem;font-weight:600;
  padding:.4rem .7rem;border-radius:999px}
.zm-g{background:var(--good-w);color:var(--good)}
.zm-c{background:var(--warn-w);color:var(--warn)}

/* ═══════════════════════════════════════
   MBTI 문항
   ═══════════════════════════════════════ */
.qbox{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.2rem 1.1rem}
.q-ax{font-family:var(--fm);font-size:.66rem;letter-spacing:.1em;color:var(--brand);font-weight:600}
.q-t{font-size:1.1rem;font-weight:800;letter-spacing:-.035em;margin:.4rem 0 1rem;line-height:1.45}
.q-opts{display:grid;gap:.45rem}
.qo{text-align:left;border:1px solid var(--line);background:var(--bg);border-radius:var(--r-s);
  padding:.85rem .9rem;font-size:.86rem;color:var(--ink);line-height:1.5;transition:.14s}
.qo:hover{border-color:var(--brand);background:var(--brand-w2)}
.qo.pick{border-color:var(--brand);background:var(--brand-w);color:var(--brand);font-weight:600}
.qhist{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:1rem}
.qhist i{width:7px;height:7px;border-radius:50%;background:var(--sunk)}
.qhist i.done{background:var(--brand)}

/* ═══════════════════════════════════════
   택일
   ═══════════════════════════════════════ */
.dp-kinds{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem}
.dk{border:1px solid var(--line);background:var(--card);border-radius:var(--r-s);padding:.7rem .3rem;text-align:center}
.dk span{display:block;font-size:1.15rem;line-height:1}
.dk b{display:block;font-size:.78rem;font-weight:700;margin-top:.25rem}
.dk.on{border-color:var(--brand);background:var(--brand-w2)}
.dk.on b{color:var(--brand)}
.dscore{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:var(--brand-w);color:var(--brand);font-family:var(--fm);font-weight:700;font-size:.85rem}

/* ═══════════════════════════════════════
   관상
   ═══════════════════════════════════════ */
.upload{display:block;border:1.5px dashed var(--line);border-radius:var(--r);
  padding:2rem 1rem;text-align:center;background:var(--card);cursor:pointer;transition:.15s}
.upload:hover{border-color:var(--brand);background:var(--brand-w2)}
.up-ic{font-size:2rem;line-height:1;margin-bottom:.5rem}
.upload b{display:block;font-size:.94rem;font-weight:700;letter-spacing:-.025em}
.upload span{display:block;font-size:.72rem;color:var(--ink3);margin-top:.25rem}
.upguide{display:grid;gap:.3rem;margin:.85rem 0}
.ug{display:flex;align-items:center;gap:.45rem;font-size:.78rem;color:var(--ink2)}
.privacy{display:flex;gap:.7rem;background:var(--good-w,#E6F7F0);border-radius:var(--r-s);padding:.85rem .95rem;
  color:var(--good)}
.privacy>div{flex:1}
.privacy b{display:block;font-size:.82rem;font-weight:700}
.privacy p{margin:.2rem 0 0;font-size:.73rem;line-height:1.6;color:var(--ink2)}
.ftype{display:inline-block;font-size:.9rem;font-weight:800;color:var(--brand);letter-spacing:-.03em}
.fdesc{font-size:.78rem;color:var(--ink2);margin:.25rem 0 0;line-height:1.6}
.fpart{background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);padding:.85rem .9rem;margin-bottom:.5rem}
.fp-h{display:flex;align-items:center;gap:.5rem;margin-bottom:.45rem}
.fp-h b{font-size:.88rem;font-weight:700}
.fp-t{font-size:.72rem;color:var(--ink3)}
.fp-s{margin-left:auto;font-family:var(--fm);font-weight:700;color:var(--brand);font-size:.85rem}
.fpart .mt{height:5px;background:var(--sunk);border-radius:3px;overflow:hidden}
.fpart .mt i{display:block;height:100%;background:var(--brand);border-radius:3px;width:0;
  transition:width .9s cubic-bezier(.22,1,.36,1)}
.fpart p{font-size:.78rem;color:var(--ink2);margin:.5rem 0 0;line-height:1.65}

/* AI 전생 초상 */
.portrait{background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);
  padding:1rem;text-align:center;margin-bottom:.4rem}
.portrait-img{width:100%;max-width:280px;border-radius:var(--r-s);margin:0 auto .8rem;display:block;
  box-shadow:var(--shadow-float)}
.portrait-story{font-size:.82rem;color:var(--ink2);line-height:1.7;margin:0 0 .8rem;font-style:italic}
.portrait-wait{padding:1.4rem .5rem;display:flex;flex-direction:column;align-items:center;gap:.7rem}
.portrait-wait p{font-size:.8rem;color:var(--ink2);line-height:1.6;margin:0}
.portrait-spin{width:28px;height:28px;border-radius:50%;
  border:3px solid var(--sunk);border-top-color:var(--brand);
  animation:portrait-spin-anim .9s linear infinite}
@keyframes portrait-spin-anim{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){
  .portrait-spin{animation:none;border-top-color:var(--sunk)}
}

/* ═══════════════════════════════════════
   꿈해몽 상세
   ═══════════════════════════════════════ */
.dm-meta{display:flex;align-items:center;gap:.5rem;font-size:.72rem;color:var(--ink3);margin-bottom:.3rem}
.dm-meta b{color:var(--ink2);font-family:var(--fm)}
.dm-p{font-size:.83rem;color:var(--ink2);line-height:1.8;margin:0 0 .6rem}
.dm-p:last-child{margin-bottom:0}
.dm-p b{color:var(--ink)}
.dmg{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;
  font-size:.78rem;font-weight:700}
.dmg.g{background:var(--brand-w);color:var(--brand)}
.dmg.b{background:var(--warn-w);color:var(--warn)}

/* ═══════════════════════════════════════
   타로 결과
   ═══════════════════════════════════════ */
.tr-deck{display:flex;gap:.5rem;justify-content:center;padding:.5rem 0 0}
.tr-card{flex:1;max-width:6.5rem;aspect-ratio:.62;perspective:900px;cursor:pointer}
.tr-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.4,0,.2,1);transition-delay:var(--d,0s)}
.tr-card.flip .tr-in{transform:rotateY(180deg)}
.tr-back,.tr-front{position:absolute;inset:0;backface-visibility:hidden;border-radius:9px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.4rem}
.tr-back{background:url('/assets/tarot/back.png') center/cover;color:transparent;font-size:1.2rem;
  border:1px solid rgba(255,255,255,.2)}
.tr-front{transform:rotateY(180deg);background:var(--card);border:1.5px solid var(--c,var(--brand));text-align:center}
.tr-pos{font-size:.58rem;font-family:var(--fm);color:var(--ink3);letter-spacing:.06em}
.tr-sym{font-size:1.3rem;color:var(--c,var(--brand));margin:.15rem 0}
.tr-kr{font-size:.72rem;font-weight:700;line-height:1.25}
.tr-en{font-size:.5rem;font-family:var(--fm);color:var(--ink3);margin-top:.1rem;letter-spacing:.04em}
.tr-hint{text-align:center;font-size:.74rem;color:var(--ink3);margin:.7rem 0 0}
.tr-h{display:flex;align-items:center;gap:.45rem;margin-bottom:.45rem}
.tr-h b{font-size:.88rem;font-weight:700}
.tr-h em{font-style:normal;font-size:.62rem;font-family:var(--fm);color:var(--ink3);margin-left:auto}
.tr-badge{font-size:.6rem;font-family:var(--fm);color:#fff;padding:.1rem .35rem;border-radius:3px;font-weight:600}

/* ═══════════════════════════════════════
   궁합 결과
   ═══════════════════════════════════════ */
.mr-hero{background:linear-gradient(135deg,#6B4BFF,#A98BFF);border-radius:var(--r);
  padding:1.3rem 1rem;text-align:center;color:#fff;margin-bottom:.75rem}
.mr-l{display:block;font-size:.7rem;opacity:.85}
.mr-hero b{display:block;font-size:2.6rem;font-weight:800;letter-spacing:-.05em;line-height:1.1;margin:.15rem 0}
.mr-hero b em{font-style:normal;font-size:1rem;font-weight:500;opacity:.85}
.mr-d{display:block;font-size:.78rem;opacity:.92}
.mr-people{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}
.mp{background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);padding:.6rem .3rem;text-align:center}
.mp-av{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;margin:0 auto .3rem;
  background:var(--brand-w);color:var(--brand);font-size:.7rem;font-weight:800}
.mp b{display:block;font-size:.74rem;font-weight:700}
.mp span:last-child{display:block;font-size:.6rem;color:var(--ink3);margin-top:.05rem}
.mrow{display:grid;grid-template-columns:3.6rem 1fr 2rem;align-items:center;gap:.5rem;
  padding:.42rem 0;font-size:.8rem}
.mrow>span:first-child{color:var(--ink2)}
.mrow .mt{height:6px;background:var(--sunk);border-radius:3px;overflow:hidden}
.mrow .mt i{display:block;height:100%;background:var(--brand);border-radius:3px;width:0;
  transition:width .9s cubic-bezier(.22,1,.36,1)}
.mrow b{text-align:right;font-family:var(--fm);color:var(--brand);font-weight:700}
.syn{display:grid;gap:.55rem}
.sy{display:grid;grid-template-columns:1.9rem 1fr;gap:.7rem;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-s);padding:.8rem .9rem}
.sy-n{font-family:var(--fm);font-size:.74rem;font-weight:700;color:var(--brand);
  background:var(--brand-w);border-radius:6px;display:grid;place-items:center;height:1.9rem}
.sy b{font-size:.84rem;font-weight:700}
.sy p{font-size:.76rem;color:var(--ink2);margin:.2rem 0 0;line-height:1.6}

/* ═══════════════════════════════════════
   주간 예측
   ═══════════════════════════════════════ */
.pd-timer{display:flex;align-items:center;justify-content:space-between;
  background:var(--ink);color:#fff;border-radius:var(--r-s);padding:.65rem .9rem;margin-bottom:.8rem;font-size:.78rem}
.pd-timer b{font-family:var(--fm);font-weight:700}
.pd-opts{display:grid;gap:.45rem}
.pd{position:relative;display:flex;align-items:center;gap:.7rem;border:1px solid var(--line);
  background:var(--card);border-radius:var(--r-s);padding:.75rem .9rem;overflow:hidden;text-align:left}
.pd.on{border-color:var(--brand);background:var(--brand-w2)}
.pd-e{font-size:1.3rem;flex:none}
.pd-t{flex:1;min-width:0}
.pd-t b{display:block;font-size:.86rem;font-weight:700}
.pd-t span{display:block;font-size:.68rem;color:var(--ink3);margin-top:.05rem}
.pd-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--sunk)}
.pd-bar i{display:block;height:100%;background:var(--brand);width:0;
  transition:width 1s cubic-bezier(.22,1,.36,1)}
.pd-pc{font-family:var(--fm);font-size:.8rem;font-weight:700;color:var(--brand);flex:none}
.pd-note{display:flex;align-items:center;gap:.4rem;font-size:.72rem;color:var(--ink3);margin:.7rem 0 0}
.pd-note b{color:var(--ink2);font-family:var(--fm)}
.pdres{width:38px;height:38px;border-radius:10px;flex:none;display:grid;place-items:center;
  font-size:.7rem;font-weight:700}
.pdres.o{background:var(--brand-w);color:var(--brand)}
.pdres.x{background:var(--sunk);color:var(--ink3)}

/* ═══════════════════════════════════════
   친구초대 · 미션 · 랭킹
   ═══════════════════════════════════════ */
.invcode{display:flex;align-items:center;gap:.5rem;background:var(--card);border:1.5px dashed var(--brand);
  border-radius:var(--r-s);padding:.85rem .95rem}
.invcode b{flex:1;font-family:var(--fm);font-size:1.05rem;font-weight:700;color:var(--brand);letter-spacing:.06em}
.ivbtn{border:none;background:var(--brand);color:#fff;border-radius:7px;padding:.42rem .85rem;
  font-size:.78rem;font-weight:700}
.sharerow{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;margin-top:.55rem}
.sh{display:flex;align-items:center;justify-content:center;gap:.4rem;border-radius:9px;
  padding:.72rem;font-size:.84rem;font-weight:700;border:none}
.sh.kakao{background:#FEE500;color:#191600}
.sh.link{background:var(--card);border:1px solid var(--line);color:var(--ink2)}
.bnextrow{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:.5rem;font-size:.82rem}
.bnextrow b{font-weight:700}
.bnextrow span{font-family:var(--fm);color:var(--ink3);font-size:.76rem}
.fav{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--brand-w);color:var(--brand);font-weight:700;font-size:.82rem}
.price.muted{color:var(--ink3)}
.mdone{font-size:.7rem;color:var(--good);font-weight:700;display:flex;align-items:center;gap:.2rem;flex:none}
.mpt{font-family:var(--fm);font-size:.8rem;font-weight:700;color:var(--brand);flex:none}
.gcard.is-done{opacity:.62}
.myrank{background:linear-gradient(135deg,#2A2440,#4A3A7A);border-radius:var(--r);
  padding:1.2rem 1rem;text-align:center;color:#fff;margin-bottom:.8rem}
.myrank b{display:block;font-size:2.4rem;font-weight:800;letter-spacing:-.05em;line-height:1.1;margin:.1rem 0}
.myrank b em{font-style:normal;font-size:1rem;font-weight:500;opacity:.85}
.rk{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.rkrow{display:flex;align-items:center;gap:.6rem;padding:.72rem .9rem;border-bottom:1px solid var(--line)}
.rkrow:last-child{border-bottom:none}
.rkrow.me{background:var(--brand-w2)}
.rk-n{width:26px;text-align:center;font-family:var(--fm);font-size:.85rem;font-weight:700;color:var(--ink3);flex:none}
.rk-av{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--sunk);color:var(--ink2);font-size:.78rem;font-weight:700}
.rk-nm{flex:1;font-size:.85rem;font-weight:600}
.rk-nm i{font-style:normal;font-size:.6rem;background:var(--brand);color:#fff;padding:.06rem .28rem;
  border-radius:3px;margin-left:.25rem;font-family:var(--fm)}
.rk-v{font-family:var(--fm);font-size:.85rem;font-weight:700;color:var(--brand)}

/* ═══════════════════════════════════════
   알림함
   ═══════════════════════════════════════ */
.nt{display:flex;gap:.7rem;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-s);padding:.85rem .9rem;margin-bottom:.45rem;position:relative}
.nt.new{border-color:var(--brand-w);background:var(--brand-w2)}
.nt.new::after{content:"";position:absolute;top:.75rem;right:.75rem;width:6px;height:6px;
  border-radius:50%;background:var(--pink-d)}
.nt-i{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center}
.nt-b{flex:1;min-width:0}
.nt-t{display:block;font-size:.84rem;font-weight:700;letter-spacing:-.025em}
.nt-d{display:block;font-size:.73rem;color:var(--ink2);margin-top:.12rem;line-height:1.55}
.nt-w{font-size:.65rem;color:var(--ink3);font-family:var(--fm);flex:none;padding-top:.1rem}
.nt-end{text-align:center;font-size:.7rem;color:var(--ink3);padding:1.2rem 0 .3rem}

/* ═══════════════════════════════════════
   충전 · 멤버십 · 설정
   ═══════════════════════════════════════ */
.chg{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
.cg{border:1px solid var(--line);background:var(--card);border-radius:var(--r-s);padding:.8rem .5rem;text-align:center}
.cg b{display:block;font-size:.92rem;font-weight:700;font-family:var(--fm)}
.cg-b{display:block;font-size:.66rem;color:var(--brand);font-weight:600;margin-top:.15rem}
.cg-b.muted{color:var(--ink3);font-weight:400}
.cg.on{border-color:var(--brand);background:var(--brand-w2)}
.cg:nth-child(5){grid-column:span 2}
.pays{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem}
.pay{border:1px solid var(--line);background:var(--card);border-radius:var(--r-s);padding:.65rem .3rem;text-align:center}
.pay span{display:block;font-size:1.05rem;line-height:1}
.pay b{display:block;font-size:.72rem;font-weight:600;margin-top:.2rem}
.pay.on{border-color:var(--brand);background:var(--brand-w2)}
.pay.on b{color:var(--brand)}
.perks{display:grid;gap:.45rem}
.pk{display:flex;gap:.7rem;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-s);padding:.8rem .9rem}
.pk-i{width:32px;height:32px;border-radius:9px;flex:none;display:grid;place-items:center}
.pk b{font-size:.85rem;font-weight:700;letter-spacing:-.025em}
.pk p{font-size:.72rem;color:var(--ink3);margin:.12rem 0 0;line-height:1.55}
.plans{display:grid;gap:.45rem}
.pl{position:relative;border:1.5px solid var(--line);background:var(--card);border-radius:var(--r-s);
  padding:.95rem 1rem;text-align:left}
.pl.on{border-color:var(--brand);background:var(--brand-w2)}
.pl-tag{position:absolute;top:-.55rem;left:1rem;font-size:.6rem;font-family:var(--fm);font-weight:700;
  background:var(--brand);color:#fff;padding:.14rem .45rem;border-radius:4px}
.pl b{display:block;font-size:.85rem;font-weight:700}
.pl-p{display:block;font-size:1.35rem;font-weight:800;font-family:var(--fm);letter-spacing:-.035em;margin-top:.1rem}
.pl-p em{font-style:normal;font-size:.75rem;font-weight:500;color:var(--ink3);font-family:var(--f)}
.pl-s{display:block;font-size:.72rem;color:var(--brand);font-weight:600;margin-top:.1rem}
.mi.sw{position:relative;cursor:pointer}
.mi.sw>span:first-child{flex:1}
.mi.sw em{font-style:normal;font-size:.7rem;color:var(--ink3);margin-left:.4rem}
.mi.sw input{position:absolute;opacity:0;width:0;height:0}
.mi.sw .tg{width:38px;height:21px;border-radius:11px;background:var(--line);position:relative;
  flex:none;transition:.2s}
.mi.sw .tg::before{content:"";position:absolute;width:15px;height:15px;left:3px;top:3px;background:#fff;
  border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.mi.sw input:checked~.tg{background:var(--brand)}
.mi.sw input:checked~.tg::before{transform:translateX(17px)}
.danger{display:grid;gap:.4rem;margin-top:1.3rem}
.danger button{border:1px solid var(--line);background:var(--card);border-radius:var(--r-s);
  padding:.72rem;font-size:.83rem;color:var(--ink2);font-weight:600}
.danger .del{color:var(--pink-d);border-color:var(--pink-w)}

/* ═══════════════════════════════════════
   상담사 상세 · 채팅
   ═══════════════════════════════════════ */
.cd-hero{display:flex;gap:.9rem;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:1rem;margin-bottom:.7rem}
.cd-av{width:62px;height:62px;border-radius:18px;flex:none;display:grid;place-items:center;
  font-size:1.9rem;background:var(--brand-w)}
.cd-info{flex:1;min-width:0}
.cd-nm{display:flex;align-items:center;gap:.35rem;font-size:1.02rem;font-weight:800;letter-spacing:-.03em}
.cd-fld{font-size:.75rem;color:var(--ink3);margin:.2rem 0 0}
.cd-st{display:flex;gap:.7rem;margin-top:.45rem;font-size:.72rem;color:var(--ink3)}
.cd-st .star{color:#F5A623;font-weight:700;font-family:var(--fm);display:flex;align-items:center;gap:.15rem}
.cd-rate{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;margin-bottom:.3rem}
.cd-rate div{background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);
  padding:.65rem .3rem;text-align:center}
.cd-rate span{display:block;font-size:.66rem;color:var(--ink3)}
.cd-rate b{display:block;font-size:.85rem;font-weight:700;font-family:var(--fm);margin-top:.15rem}
.cd-rate b.hot{color:var(--pink-d)}
.cd-time{background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden}
.ct-row{display:flex;justify-content:space-between;padding:.62rem .9rem;border-bottom:1px solid var(--line);font-size:.8rem}
.ct-row:last-child{border-bottom:none}
.ct-row.off{color:var(--ink3)}
/* 상담사 후기 카드.
   예전 이름이 그냥 `.rv` 였는데, 홈의 점수 원 안쪽 숫자도 `.rv` 다.
   그래서 후기 카드의 흰 배경·테두리·패딩이 점수 숫자에 그대로 붙어
   짙은 히어로 위에서 흰 글자가 흰 상자에 얹혀 안 보였다. `.rvs` 로 가둔다. */
.rvs{background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);padding:.8rem .9rem;margin-bottom:.45rem}
.rv-h{display:flex;align-items:center;gap:.5rem;margin-bottom:.35rem}
.rv-h b{font-size:.8rem;font-weight:700}
.rv-h .star{color:#F5A623;font-size:.72rem;letter-spacing:.05em}
.rv-w{margin-left:auto;font-size:.66rem;color:var(--ink3);font-family:var(--fm)}
.rvs p{font-size:.78rem;color:var(--ink2);margin:0;line-height:1.65}

/* 점수 숫자는 원 안에 그대로 놓인다 — 배경도 테두리도 없다 */
.ring .rv{background:none;border:0;padding:0;margin:0}

.chatwrap{flex:1;display:flex;flex-direction:column;min-height:0}
.chat-meter{display:flex;align-items:center;gap:.45rem;padding:.5rem 1.1rem;background:var(--brand-w2);
  border-bottom:1px solid var(--brand-w);font-size:.72rem;color:var(--ink2)}
.chat-meter b{font-family:var(--fm);color:var(--brand);font-weight:700}
.cm-cash{margin-left:auto;font-family:var(--fm);color:var(--ink3)}
.chat{flex:1;overflow-y:auto;padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.5rem}
.cmsg{display:flex;gap:.45rem;max-width:84%}
.cmsg.sys{align-self:center;max-width:100%;font-size:.68rem;color:var(--ink3);background:var(--sunk);
  padding:.4rem .8rem;border-radius:20px;text-align:center}
.cmsg.them{align-self:flex-start}
.cmsg.me{align-self:flex-end}
.cav{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--brand-w);font-size:.85rem}
.cav:empty{background:none}
.cb{border-radius:14px;padding:.6rem .8rem;font-size:.82rem;line-height:1.6}
.cmsg.them .cb{background:var(--card);border:1px solid var(--line);border-top-left-radius:5px}
.cmsg.me .cb{background:var(--brand);color:#fff;border-top-right-radius:5px}
.cmsg.them .cb b{color:var(--brand)}
.cmsg.typing .cb{display:flex;gap:.22rem;padding:.75rem .8rem}
.cmsg.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink3);animation:bounce 1.3s infinite}
.cmsg.typing i:nth-child(2){animation-delay:.18s}
.cmsg.typing i:nth-child(3){animation-delay:.36s}
@keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}
.chat-in{flex:none;display:flex;align-items:center;gap:.4rem;padding:.6rem 1.1rem;
  border-top:1px solid var(--line);background:var(--card)}
.ci-plus,.ci-send{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;border:none}
.ci-plus{background:var(--sunk);color:var(--ink2)}
.ci-send{background:var(--brand);color:#fff}

/* ═══ 사주 명식 · 오행 · 대운 ═══════════ */
.myeong{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;margin-bottom:.4rem}
.mj{background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);padding:.6rem .2rem;text-align:center}
.mj.me{border-color:var(--brand);background:var(--brand-w2)}
.mj-l{display:block;font-size:.6rem;color:var(--ink3);font-family:var(--fm)}
.mj-metag{display:inline-block;font-style:normal;font-size:.55rem;color:var(--brand);border:.5px solid var(--brand);border-radius:99px;padding:0 .3rem;margin-left:.2rem}
.mj-me-note{font-size:.74rem;color:var(--ink3);line-height:1.5;background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);padding:.6rem .75rem;margin:.4rem 0 0}
[data-mj-me]{cursor:pointer}
.mj-g,.mj-j{display:block;font-size:1.5rem;font-weight:700;line-height:1.15}
.mj-g.none,.mj-j.none{color:var(--ink3);font-size:1rem}
.mj-k{display:block;font-size:.6rem;color:var(--ink3);margin-top:.15rem}
.mj-note{font-size:.74rem;color:var(--ink2);margin:0 0 .8rem;text-align:center}
.mj-note b{color:var(--ink);font-weight:700}
.mj-warn{display:block;font-size:.68rem;color:var(--warn);margin-top:.25rem}
.ohbars{display:grid;gap:.32rem}
.ohb{display:grid;grid-template-columns:1.4rem 1fr 1.2rem;align-items:center;gap:.5rem;font-size:.78rem}
.oh-n{font-weight:700}
.oh-t{height:7px;background:var(--sunk);border-radius:4px;overflow:hidden}
.oh-t i{display:block;height:100%;border-radius:4px;width:0;transition:width .9s cubic-bezier(.22,1,.36,1)}
.oh-c{text-align:right;font-family:var(--fm);color:var(--ink3)}
.daeun{display:grid;grid-template-columns:repeat(4,1fr);gap:.35rem}
.du{background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-s);padding:.5rem .2rem;text-align:center;min-width:0}
.du-a{display:block;font-size:.6rem;color:var(--ink3);font-family:var(--fm)}
.du b{display:block;font-size:.85rem;font-weight:700;line-height:1.2;margin:.1rem 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.du-k{display:block;font-size:.56rem;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.src-note{font-size:.68rem;color:var(--ink3);text-align:center;margin:.8rem 0 0;line-height:1.55}
.sso.off{opacity:.42;pointer-events:auto}
.sso.off::after{content:"미연결";font-size:.6rem;font-family:var(--fm);opacity:.7;margin-left:.3rem}

/* ═══ 신년운세 ═══════════════════════ */
.ny-hero{background:linear-gradient(150deg,#6B4BFF,#A98BFF 55%,#FF9E6B);border-radius:var(--r);
  padding:1.5rem 1rem 1.4rem;text-align:center;color:#fff;margin-bottom:.75rem;position:relative;overflow:hidden}
.ny-hero::after{content:"";position:absolute;inset:0;
  background:radial-gradient(80% 60% at 50% -10%,rgba(255,255,255,.42),transparent 62%)}
.ny-hero>*{position:relative}
.ny-y{display:block;font-family:var(--fm);font-size:.75rem;opacity:.85;letter-spacing:.12em}
.ny-g{display:block;font-size:2.6rem;font-weight:800;letter-spacing:.05em;line-height:1.15;margin:.1rem 0}
.ny-k{display:block;font-size:.78rem;opacity:.9}
.ny-sc{font-size:2.1rem;font-weight:800;letter-spacing:-.04em;margin-top:.7rem;
  padding-top:.7rem;border-top:1px solid rgba(255,255,255,.24)}
.ny-sc em{font-style:normal;font-size:.85rem;font-weight:500;opacity:.85}
.ny-t{font-size:.92rem;font-weight:700;margin:.15rem 0 0;letter-spacing:-.025em}
.ny-months{display:flex;align-items:flex-end;gap:.25rem;height:96px}
.nm{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end}
.nm i{width:100%;max-width:20px;border-radius:3px 3px 0 0;background:var(--brand-l);min-height:4px;
  transition:height .8s cubic-bezier(.22,1,.36,1)}
.nm.peak i{background:var(--brand)}
.nm span{font-size:.58rem;color:var(--ink3);margin-top:.25rem;font-family:var(--fm)}
.nm.peak span{color:var(--brand);font-weight:700}

/* ── 카탈로그 연동으로 새로 생긴 상태들 ───────────────── */
.empty{display:grid;place-items:center;gap:.5rem;padding:2.6rem 1rem;color:var(--ink3);
  background:var(--card);border:1px solid var(--line);border-radius:16px;margin:.6rem 0}
.empty svg{opacity:.45}
.empty p{margin:0;font-size:.87rem}

.offair{font-size:.68rem;font-weight:700;color:var(--ink3);background:var(--line);
  padding:.12rem .4rem;border-radius:6px;letter-spacing:-.02em}

.hintline{margin:.5rem .1rem 0;font-size:.76rem;color:var(--ink3);line-height:1.5}

.agate{display:flex;align-items:center;gap:.6rem;padding:.85rem .9rem;margin:0 0 .8rem;
  background:color-mix(in srgb,var(--pink) 10%,var(--card));
  border:1px solid color-mix(in srgb,var(--pink) 30%,var(--line));border-radius:14px}
.agate>svg{flex:none;color:var(--pink)}
.agate b{display:block;font-size:.85rem;letter-spacing:-.02em}
.agate p{margin:.15rem 0 0;font-size:.76rem;color:var(--ink2);line-height:1.45}
.agate .btn{flex:none}

/* ── 결제 복귀 화면 ─────────────────────────────── */
.payret{display:grid;place-items:center;text-align:center;padding:3rem 1.2rem;gap:.5rem;
  background:var(--card);border:1px solid var(--line);border-radius:18px;margin:.6rem 0}
.payret>div{display:none;flex-direction:column;align-items:center;gap:.55rem}
.payret[data-state="wait"] .pr-wait,
.payret[data-state="done"] .pr-done,
.payret[data-state="fail"] .pr-fail{display:flex}
.payret b{font-size:1.02rem;letter-spacing:-.03em}
.payret p{margin:0;font-size:.82rem;color:var(--ink2);line-height:1.55;max-width:19rem}
.payret .btn,.payret .btnrow{margin-top:.7rem}
.payret .btnrow{display:flex;gap:.5rem}
.pr-ic{display:grid;place-items:center;width:60px;height:60px;border-radius:50%}
.pr-ic.ok{background:var(--good-w,#E6F7F0);color:var(--good,#27A67C)}
.pr-ic.er{background:var(--pink-w);color:var(--pink-d)}
.spin{width:38px;height:38px;border-radius:50%;border:3px solid var(--line);
  border-top-color:var(--brand,#6B4BFF);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pdres.n{background:var(--sunk);color:var(--ink3)}
.pd:disabled{cursor:default}
.pd:disabled:hover{border-color:var(--line)}
a.nt{color:inherit;text-decoration:none}
.mr-sel{margin-left:auto;border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:8px;padding:.3rem .5rem;font:inherit;font-size:.8rem}
.rk-gap{text-align:center;color:var(--ink3);letter-spacing:.3em;padding:.35rem 0;font-size:.8rem}

/* ── 결제 잠금 ─────────────────────────────────── */
/* 잠긴 자리를 비우지 않고 흐리게 덮는다 — 분량이 눈으로 보여야 살 마음이 생긴다 */
.paywall{position:relative;margin:-3.2rem 0 .6rem;pointer-events:none}
/* 잠긴 분량 자리표시자 — 진짜 문장은 서버가 내려보내지 않는다 */
.pw-skel{display:grid;gap:.55rem;margin:.4rem 0 0}
.pw-sk-row{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.9rem 1rem;
  display:grid;gap:.5rem}
.pw-sk-t{height:13px;width:32%;border-radius:5px;background:var(--sunk)}
.pw-sk-l{height:10px;border-radius:5px;background:var(--sunk);opacity:.7}
.pw-skel .pw-sk-row:last-child{-webkit-mask-image:linear-gradient(180deg,#000 20%,transparent);
  mask-image:linear-gradient(180deg,#000 20%,transparent)}
.pw-box{pointer-events:auto;display:grid;justify-items:center;text-align:center;gap:.45rem;
  background:var(--card);border:1px solid var(--line);border-radius:18px;padding:1.5rem 1.2rem 1.3rem;
  box-shadow:0 8px 28px rgba(26,24,38,.07)}
.pw-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
  background:var(--brand-w,#EEE9FF);color:var(--brand);margin-bottom:.15rem}
.pw-t{font-size:1rem;font-weight:700;letter-spacing:-.03em}
.pw-d{margin:0;font-size:.81rem;color:var(--ink2);line-height:1.55;max-width:20rem}
.pw-btn{width:100%;max-width:17rem;margin-top:.55rem}
.pw-hint{margin:.15rem 0 0;font-size:.73rem;color:var(--ink3)}
.pw-coupon{width:100%;max-width:17rem;margin-top:.35rem}
.pw-coupon .inp{width:100%;text-align:center;box-sizing:border-box}
.pw-sub{margin-top:.2rem;font-size:.78rem;color:var(--ink3);text-decoration:none}
.pw-sub b{color:var(--brand)}
/* 참고: 잠금은 CSS가 아니라 서버에서 한다. 이 클래스는 쓰지 않는다. */

/* 상담 이용권 선택 */
.cnpass{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:.2rem 0 .3rem}
.cnp{display:grid;gap:.15rem;padding:.75rem .5rem;border:1px solid var(--line);background:var(--card);
  border-radius:13px;cursor:pointer;text-align:center;font:inherit;color:inherit;transition:.14s}
.cnp:hover:not(:disabled){border-color:var(--brand);transform:translateY(-1px)}
.cnp b{font-size:.92rem;letter-spacing:-.03em}
.cnp span{font-size:.75rem;color:var(--ink3);font-family:var(--fm)}
.cnp.have{border-color:var(--good);background:color-mix(in srgb,var(--good) 7%,var(--card));cursor:default}
.cnp.have span{color:var(--good);font-weight:700}
a.spd{color:inherit;text-decoration:none}
.spd.on{border-color:var(--brand);background:var(--brand-w2)}

/* ══════════════════════════════════════════════════════════
   사주 입력 — 고르게 만드는 위젯
   손으로 적게 하면 사람마다 다르게 적어서 계산에 못 쓰는 값이 된다.
   ══════════════════════════════════════════════════════════ */
.fs{width:100%;-webkit-appearance:none;appearance:none;
    border:1px solid var(--line);border-radius:var(--r-s);
    padding:.72rem 2rem .72rem .8rem;font-size:.95rem;font-family:inherit;
    background:var(--card) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23999' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right .8rem center;
    color:inherit;line-height:1.3}
.fs:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:transparent}
.fs option[hidden]{display:none}
.selrow{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:.4rem}
.selrow.two{grid-template-columns:1fr 1fr;margin-top:.5rem}
.opt{font-weight:500;color:var(--ink3);font-size:.7rem;margin-left:.25rem}

.chk{display:flex;align-items:center;gap:.5rem;margin-top:.55rem;
     padding:.62rem .75rem;border:1px solid var(--line);border-radius:var(--r-s);
     background:var(--card);font-size:.84rem;cursor:pointer}
.chk input{width:1.05rem;height:1.05rem;accent-color:var(--brand);flex:none}

/* 12지시 — 12칸이라 3열이 아니면 글자가 깨진다 */
.hgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem;margin-top:.35rem}
.hrow{display:grid;grid-template-columns:1fr 1fr;gap:.35rem;margin-top:.35rem}
.hb{border:1px solid var(--line);background:var(--card);border-radius:var(--r-s);
    padding:.5rem .3rem;text-align:center;cursor:pointer;font-family:inherit;color:inherit;
    display:flex;flex-direction:column;gap:.12rem;min-height:52px;justify-content:center}
.hb b{font-size:.85rem;font-weight:700;letter-spacing:-.02em}
.hb small{font-size:.63rem;color:var(--ink3);letter-spacing:-.03em;white-space:nowrap}
.hb.on{background:var(--brand-w);border-color:var(--brand);color:var(--brand)}
.hb.on small{color:var(--brand)}
.hb.wide{min-height:48px}

/* 입력 중 원국 미리보기 — 지금 고른 값이 사주로 어떻게 잡히는지 바로 보여준다 */
.opre{margin-top:.6rem;border:1px solid var(--line);border-radius:var(--r-s);
      background:var(--sunk);padding:.7rem .8rem}
.opre .ot{font-size:.72rem;color:var(--ink3);margin-bottom:.45rem}
.opil{display:grid;grid-template-columns:repeat(4,1fr);gap:.35rem}
.opil .pc{border:1px solid var(--line);border-radius:8px;background:var(--card);
          padding:.4rem .2rem;text-align:center}
.opil .pc i{display:block;font-style:normal;font-size:.6rem;color:var(--ink3)}
.opil .pc b{display:block;font-size:1.02rem;font-weight:700;letter-spacing:.02em;margin-top:.1rem}
.opil .pc.dim b{color:var(--ink3);font-weight:500}

/* ══════════════════════════════════════════════════════════
   관상 — 셀프카메라
   ══════════════════════════════════════════════════════════ */
.cam{position:relative;border-radius:var(--r);overflow:hidden;background:#12101a;
     aspect-ratio:3/4;margin-top:.2rem}
.cam video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
           transform:scaleX(-1);background:#12101a}
.cam .guide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
            pointer-events:none;z-index:2}
.cam .oval{width:64%;aspect-ratio:.82/1;border:2px dashed rgba(255,255,255,.75);
           border-radius:50%;position:relative;box-shadow:0 0 0 100vmax rgba(0,0,0,.28)}
.cam .oval span{position:absolute;left:50%;transform:translateX(-50%);bottom:-1.7rem;
                font-size:.72rem;color:#fff;white-space:nowrap;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.cam .note{position:absolute;left:0;right:0;bottom:.7rem;text-align:center;z-index:4;
           font-size:.76rem;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.9);padding:0 1rem}
.cam .count{position:absolute;inset:0;z-index:5;display:none;
            align-items:center;justify-content:center;background:rgba(10,8,16,.22);
            font-size:4.6rem;font-weight:800;color:#fff;text-shadow:0 6px 34px rgba(0,0,0,.75)}
.cam .count.on{display:flex}
.cam .flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:9}
.cam .flash.go{animation:ou-flash .45s ease-out}
@keyframes ou-flash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
.cam .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:3;display:none}
.cam.done .shot{display:block}
.cam.done .guide,.cam.done .note{display:none}

.camrow{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;margin-top:.6rem}
.camrow.one{grid-template-columns:1fr}
.btn.gh2{background:var(--card);border:1px solid var(--line);color:inherit}

/* ══════════════════════════════════════════════════════════
   인트로 — 첫 화면
   ══════════════════════════════════════════════════════════ */
.ointro{position:fixed;inset:0;z-index:9999;background:#0b0913;overflow:hidden}
.ointro .bg,.ointro iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
     width:100%;height:100%;object-fit:cover;border:0;pointer-events:none}
.ointro iframe{width:177.78vh;min-width:100%;height:56.25vw;min-height:100%}
/*
 * 영상 뒤에 깔아 두는 캐릭터 화면.
 *
 * z-index 를 안 주면 안쪽의 .ob-char 가 z-index:1 을 들고 **루트 쌓임 맥락**에
 * 그대로 올라온다 — 그래서 마스코트만 영상 위로 튀어나와 겹쳐 보였다.
 * 여기에 z-index:0 을 주면 .obrand 가 자기 쌓임 맥락을 만들어 안쪽 값이 갇힌다.
 */
.ointro #oback{z-index:0}
.ointro iframe{z-index:1}
.ointro .vig{position:absolute;inset:0;z-index:2;pointer-events:none;
     background:radial-gradient(ellipse at center,rgba(0,0,0,0) 38%,rgba(0,0,0,.62) 100%),
                linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 62%,rgba(0,0,0,.72) 100%)}
.ointro .brandbar{position:absolute;top:calc(env(safe-area-inset-top,0px) + 1.1rem);left:0;right:0;
     z-index:4;display:flex;justify-content:center;color:#fff}
.ointro .catch{position:absolute;inset:0;z-index:5}
.ointro .hint{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 3.4rem);
     z-index:6;text-align:center;color:#fff;pointer-events:none}
.ointro .ring{width:74px;height:74px;margin:0 auto .8rem;border-radius:50%;
     border:1.5px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;
     font-size:1.6rem;animation:ou-pulse 2s ease-in-out infinite}
@keyframes ou-pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,255,255,.28)}
                    50%{transform:scale(1.06);box-shadow:0 0 0 16px rgba(255,255,255,0)}}
.ointro .hint b{display:block;font-size:1.02rem;font-weight:700;letter-spacing:-.02em}
.ointro .hint small{display:block;font-size:.68rem;letter-spacing:.22em;opacity:.62;margin-top:.3rem}
.ointro .skip{position:absolute;top:calc(env(safe-area-inset-top,0px) + .9rem);right:.9rem;z-index:7;
     background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.28);color:#fff;
     border-radius:999px;padding:.34rem .78rem;font-size:.74rem;font-family:inherit;cursor:pointer}
.ointro .snd{position:absolute;top:calc(env(safe-area-inset-top,0px) + .9rem);left:.9rem;z-index:7;
     background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.28);color:#fff;
     border-radius:999px;width:32px;height:32px;font-size:.9rem;cursor:pointer;line-height:1}
.ointro .bar{position:absolute;left:0;bottom:0;height:2px;z-index:7;background:#fff;width:0}
@media(prefers-reduced-motion:reduce){.ointro .ring{animation:none}}


/* ══════════════════════════════════════════════════════════
   2026 VISUAL REFRESH · 오늘온 고유의 새벽빛
   기존 마크업과 기능은 그대로 두고 41개 화면의 인상을 통일한다.
   ══════════════════════════════════════════════════════════ */
:root{
  --brand:#6047E8;--brand-d:#4933BE;--brand-l:#8E7AF3;
  --brand-w:#EDE9FF;--brand-w2:#F6F3FF;
  --pink:#F05C8D;--pink-d:#D84273;--pink-w:#FFF0F5;
  --bg:#F8F6F2;--card:#FFFEFC;--sunk:#F1EEE9;
  --ink:#1F1B2D;--ink2:#615B70;--ink3:#96909F;--line:#E7E2DC;
  --good:#168F74;--good-w:#E8F7F2;--warn:#D77A25;--warn-w:#FFF1DE;
  --info:#2978C7;--info-w:#EAF4FE;
  --r:22px;--r-s:16px;--r-xs:10px;
  --shadow-card:0 1px 1px rgba(32,25,55,.025),0 10px 28px rgba(49,38,79,.055);
  --shadow-float:0 14px 36px rgba(58,42,119,.16);
}

body{font-size:15px;line-height:1.55;background:#EEEAE4;letter-spacing:-.012em}
.app{background:
  radial-gradient(circle at 108% -3%,rgba(240,92,141,.09),transparent 19rem),
  radial-gradient(circle at -10% 14rem,rgba(96,71,232,.08),transparent 21rem),
  var(--bg)}
.viewport{scrollbar-width:none}.viewport::-webkit-scrollbar{display:none}
.sbody{padding:0 1.15rem 1.8rem}
.appbar{padding:.65rem 1.15rem .8rem;background:rgba(248,246,242,.88);backdrop-filter:blur(18px)}
.appbar h2{font-size:1.16rem;font-weight:780;letter-spacing:-.04em}
.appbar .bk,.appbar .ico{width:34px;height:34px;border-radius:12px}
.appsub{font-size:.8rem;margin:-.48rem 0 1rem;padding:0 1.2rem;color:var(--ink3)}
.greet{background:rgba(248,246,242,.88);backdrop-filter:blur(18px);padding:.65rem 1.15rem .9rem}
.greet .g2{font-size:1.3rem}.greet .g1{font-size:.8rem}
.st{margin:1.65rem 0 .72rem}.st h3{font-size:1.08rem;font-weight:780;letter-spacing:-.045em}
.st a{font-size:.76rem;color:var(--ink3)}

/* 카드에 테두리 대신 가벼운 물성을 준다 */
.card,.qc,.qk,.rc,.ct,.row,.rhero,.person,.cnp,.spd,.chk,.kvc,.fi,.fs{
  border-color:rgba(68,54,91,.08);box-shadow:var(--shadow-card)}
.card,.rhero{padding:1.12rem}.qc,.qk,.rc,.ct,.row,.card,.rhero,.person{background:rgba(255,254,252,.94)}
.qc:hover,.qk:hover,.rc:hover,.ct:hover,.row:hover{border-color:rgba(96,71,232,.28);box-shadow:0 12px 28px rgba(73,51,190,.11)}

/* 홈 상단: 포인트보다 오늘의 운세가 기억에 남게 */
.tbar{padding-top:.7rem!important;padding-bottom:.85rem!important}
.tbar-av{box-shadow:0 8px 22px rgba(96,71,232,.18)!important}
.pt{box-shadow:0 8px 20px rgba(96,71,232,.18)!important}
.live{background:rgba(255,254,252,.78)!important;border-color:rgba(68,54,91,.08)!important;backdrop-filter:blur(12px)}
.bnr{border-radius:20px!important;box-shadow:var(--shadow-float);overflow:hidden}
.bnr-item{min-height:96px!important;padding:1rem 1.05rem!important}
.bnr-item strong{font-size:1.02rem!important;letter-spacing:-.04em}
.today{position:relative;overflow:hidden;padding:1.2rem;border-radius:24px;margin-top:.95rem;
  background:linear-gradient(145deg,#241C43 0%,#4A36A1 52%,#8B63DB 100%);box-shadow:0 18px 40px rgba(48,34,105,.25)}
.today::before{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-75px;top:-95px;
  background:radial-gradient(circle,rgba(255,184,132,.52),rgba(255,122,168,.15) 48%,transparent 70%)}
.today::after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;left:-65px;bottom:-75px;
  border:1px solid rgba(255,255,255,.15)}
.today>*{position:relative;z-index:1}.today .ttop{font-family:var(--f);font-weight:650;letter-spacing:.01em}
.today .tmsg{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px);border-radius:13px}
.today.low{background:linear-gradient(145deg,#292735,#4C485D 65%,#766B78)}
.ring .rv{font-size:1.72rem}.tb .bt{height:5px}
.qc{min-height:118px;padding:.86rem .8rem}.qc .qi{width:38px;height:38px;border-radius:13px}.qc .qt{font-size:.9rem;font-weight:720}.qc .qd{font-size:.7rem}
.quick{gap:.55rem}.qk{padding:.8rem .3rem}.qk i{margin-bottom:.35rem}.qk span{font-size:.7rem;font-weight:650}
.quote{padding:1rem;border:0;background:linear-gradient(135deg,#F0EBFF,#FFF4F2);box-shadow:var(--shadow-card)}
.quote .ql{font-size:.61rem}.quote p{font-size:.86rem;color:var(--ink)}
.rc{padding:.9rem}.rc .rt{font-size:.85rem}.rc .rp{font-size:.78rem}

/* 서비스 목록은 작은 카드 9개가 아니라 컬렉션처럼 보이게 */
.cats{gap:.7rem}.ct{padding:1.05rem .45rem 1rem;min-height:132px}
.ct .ci{width:46px;height:46px;border-radius:16px;margin-bottom:.58rem}
.ct .cn{font-size:.86rem;font-weight:740}.ct .cd{font-size:.66rem}
.ct:nth-child(3n+1){transform:translateY(0)}
.notice{border:1px solid rgba(68,54,91,.06);background:rgba(241,238,233,.72);border-radius:15px}

/* 결과·리포트는 읽는 문서처럼 */
.rhero{border:0;background:linear-gradient(145deg,#FFFEFC,#F2EEFF);box-shadow:var(--shadow-card)}
.bigscore{font-size:3rem;color:var(--brand-d)}
.tabs{padding:.2rem 0 .85rem;gap:.42rem}.tab{padding:.42rem .82rem;border-color:rgba(68,54,91,.09);box-shadow:0 3px 10px rgba(32,25,55,.035)}
.tab.on{background:#211C32;border-color:#211C32}
.rsec{margin-bottom:1.05rem}.rsec h4{font-size:.92rem}.rsec p{font-size:.84rem;line-height:1.8}
.sharecard{background:linear-gradient(150deg,#241C43,#5C43C4 58%,#EF7195);box-shadow:var(--shadow-float);border-radius:24px}
.ccta{background:#211C32;border-radius:18px;box-shadow:0 12px 28px rgba(31,27,45,.16)}

/* 폼·결제·목록 */
.row{padding:.95rem}.row .ri{width:46px;height:46px;border-radius:15px}.row .rn{font-size:.92rem;font-weight:720}.row .rs{font-size:.72rem}
.fi,.fs{background:#FFFEFC;padding:.8rem .85rem}.fi:focus,.fs:focus{box-shadow:0 0 0 4px rgba(96,71,232,.11);outline:none;border-color:var(--brand)}
.sgb,.hb{border-color:rgba(68,54,91,.1);border-radius:14px;background:#FFFEFC}.sgb.on,.hb.on{box-shadow:0 6px 16px rgba(96,71,232,.1)}
.btn{border-radius:16px;padding:.95rem;background:linear-gradient(135deg,#6047E8,#7B5DEB);box-shadow:0 10px 24px rgba(96,71,232,.22)}
.btn:hover{background:linear-gradient(135deg,#5037D2,#684BDA)}
.btn.ghost{box-shadow:none;background:#FFFEFC}
.cta{background:linear-gradient(to top,var(--bg) 78%,transparent);padding-top:1.1rem}
.filters{gap:.4rem}.chp{padding:.4rem .72rem;border-color:rgba(68,54,91,.09);background:rgba(255,254,252,.9)}
.chp.on{background:#211C32;border-color:#211C32}

/* 하단 내비게이션: 떠 있는 앱 도크 */
.tabbar{margin:0 .7rem .65rem!important;width:auto!important;border:1px solid rgba(68,54,91,.08)!important;
  border-radius:20px!important;background:rgba(255,254,252,.92)!important;backdrop-filter:blur(20px);
  box-shadow:0 12px 34px rgba(35,27,54,.14)!important;padding:.45rem .25rem calc(.35rem + env(safe-area-inset-bottom,0px))!important}
.tbi{border-radius:14px!important;padding:.28rem 0!important}.tbi.on{background:var(--brand-w2)}
.tbi span{font-size:.63rem!important}.tbi svg{width:21px;height:21px}

@media(max-width:360px){.sbody{padding-left:.9rem;padding-right:.9rem}.cats{gap:.5rem}.ct{min-height:122px}.today{padding:1rem}.quad{gap:.45rem}}
@media(prefers-reduced-motion:no-preference){
  .today,.bnr,.card,.row,.ct,.qc{animation:ou-rise .38s ease both}
  .ct:nth-child(2),.qc:nth-child(2),.row:nth-child(2){animation-delay:.04s}
  .ct:nth-child(3),.qc:nth-child(3),.row:nth-child(3){animation-delay:.08s}
  @keyframes ou-rise{from{opacity:.5;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
}


/* ══════════════════════════════════════════════════════════
   개선본 위에 얹는 보정
   새 디자인을 그대로 받되, 그 과정에서 깨진 것과
   대비가 모자란 곳만 되돌린다.
   ══════════════════════════════════════════════════════════ */

/* 1) 셀렉트 화살표를 되살린다.
      개선본의 `.fi,.fs{background:#FFFEFC}` 가 배경 단축 속성이라
      화살표 그림까지 같이 지워 버렸다. 화살표 없는 셀렉트는
      그냥 흰 상자로 보여서 누를 수 있는 줄 모른다. */
.fs{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2396909F' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .95rem center;
  padding-right:2.3rem}

/* 2) 작은 글씨 대비를 올린다.
      따뜻한 아이보리 배경(#F8F6F2) 위에서 #96909F 는 약 3:1 이라
      본문 옆 설명·캡션이 밝은 데서 잘 안 읽힌다. 4.5:1 을 넘긴다. */
:root{--ink3:#7C7689}

/* 3) 히어로만 옛 형광 배색으로 남아 있어 나머지와 따로 논다.
      새 팔레트의 채도에 맞춰 낮춘다. */
.hero-brand{background:linear-gradient(140deg,#4933BE,#8E7AF3)}
.hero-pink {background:linear-gradient(140deg,#C93D74,#F2856B)}
.hero-warn {background:linear-gradient(140deg,#C26A18,#EFB055)}
.hero-good {background:linear-gradient(140deg,#0F7A62,#57BFA0)}
.hero-info {background:linear-gradient(140deg,#1F62A8,#5FA6E8)}
.hero{border-radius:var(--r);box-shadow:var(--shadow-card)}

/* 4) 12지시 12칸은 '고르는 것'으로 보여야 한다.
      테두리가 거의 사라져 글자 덩어리로 읽혔다. */
.hb{border-color:rgba(68,54,91,.14);box-shadow:0 2px 6px rgba(32,25,55,.03)}
.hb.on{border-color:var(--brand);background:var(--brand-w)}
.hgrid{gap:.42rem}.hrow{gap:.42rem}

/* 5) 원국 미리보기도 새 물성에 맞춘다 */
.opre{border-color:rgba(68,54,91,.08);border-radius:var(--r-s);background:rgba(241,238,233,.72)}
.opil .pc{border-color:rgba(68,54,91,.08);border-radius:12px;background:#FFFEFC}

/* 6) 관상 카메라 — 둥근 모서리를 새 값에 맞춘다 */
.cam{border-radius:var(--r);box-shadow:var(--shadow-card)}


/* ══════════════════════════════════════════════════════════
   편집 이미지 (개선본 2에서 받음)
   반복 카드 리듬을 끊고 서비스마다 장면을 만든다.
   ══════════════════════════════════════════════════════════ */
/* 편집 이미지 — 반복 카드 리듬을 끊고 서비스마다 장면을 만든다 */
.editorial-hero{height:242px;margin:.1rem 0 1.25rem;border-radius:26px;overflow:hidden;position:relative;background:#201c2c;box-shadow:0 18px 38px rgba(26,22,39,.18)}
.editorial-hero img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.88) contrast(1.02)}
.editorial-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,13,24,.02) 30%,rgba(15,13,24,.78) 100%)}
.editorial-hero figcaption{position:absolute;z-index:2;left:1.15rem;right:1.15rem;bottom:1rem;color:#fff}
.editorial-hero small{display:block;font-family:var(--fm);font-size:.58rem;letter-spacing:.16em;opacity:.72;margin-bottom:.32rem}
.editorial-hero strong{display:block;font-size:1.24rem;line-height:1.35;letter-spacing:-.045em;font-weight:720;text-wrap:balance}
.dream-visual img{object-position:center 62%}.tarot-visual img{object-position:center 55%}.year-visual img{object-position:68% center}
.year-visual::after{background:linear-gradient(90deg,rgba(25,20,38,.68),rgba(25,20,38,.06) 70%),linear-gradient(180deg,transparent 50%,rgba(25,20,38,.35))}
.year-visual figcaption{top:1.2rem;bottom:auto}.year-visual figcaption small{opacity:.82}
.b-newyear{background-image:linear-gradient(90deg,rgba(31,25,47,.84),rgba(31,25,47,.22)),url("editorial/dawn-hero.webp")!important;background-size:cover!important;background-position:66% 56%!important}
.b-newyear .bnr-tag{background:#E66543!important}.b-newyear strong,.b-newyear .bnr-d{color:#fff!important}
@media(max-width:360px){.editorial-hero{height:218px;border-radius:22px}.editorial-hero strong{font-size:1.12rem}}

/* 꿈해몽 이미지는 달과 문이 함께 보여야 뜻이 산다.
   242px 가로 슬롯에 세로 그림을 넣으면 둘 중 하나가 반드시 잘린다.
   이 화면만 높이를 키우고, 그림도 그 비율에 맞춰 미리 잘라 두었다. */
.dream-visual{height:296px}
.dream-visual img{object-position:center 42%}
@media(max-width:360px){.dream-visual{height:262px}}

/* ══════════════════════════════════════════════════════════
   글자 히어로 — 사진이 없는 화면용
   사주·궁합·관상에는 편집 사진이 없다. 남는 자리를 카드로 채우면
   다시 밋밋해지고, 아무 사진이나 넣으면 스톡 사진처럼 겉돈다.
   대신 그 서비스를 한 글자로 세운다. 파일을 하나도 안 받으므로
   월 4GB 짜리 호스팅에서는 이쪽이 사진보다 낫다.
   ══════════════════════════════════════════════════════════ */
.editorial-hero.glyph{height:186px;background:linear-gradient(150deg,#1E1930 0%,#332A55 55%,#4A3A78 100%)}
.editorial-hero.glyph::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E")}
.editorial-hero.glyph::after{background:linear-gradient(105deg,rgba(15,13,24,.72) 30%,rgba(15,13,24,.12) 100%)}
/* 글자는 통째로 보여야 한다. 획이 중간에서 잘리면 멋이 아니라 실수로 읽힌다. */
.editorial-hero.glyph .gl{position:absolute;z-index:1;right:.55rem;top:50%;transform:translateY(-50%);
  font-size:9.2rem;line-height:.82;font-weight:700;color:rgba(255,255,255,.14);
  letter-spacing:-.02em;user-select:none;pointer-events:none}
.editorial-hero.glyph figcaption{right:42%}
.editorial-hero.glyph strong{font-size:1.16rem}
/* 글자가 클수록 캡션을 밀어낸다 — 좁은 화면에서는 글자를 줄인다 */
@media(max-width:380px){.editorial-hero.glyph{height:168px}
  .editorial-hero.glyph .gl{font-size:7.6rem}.editorial-hero.glyph figcaption{right:38%}}

/* 궁합 참여자 — 간편 모드에서는 연도만 묻는다.
   동료의 생년월일까지 정확히 아는 경우는 드물어서, 다 물으면 거기서 멈춘다. */
.mfrm.simple .pm,.mfrm.simple .pd,.mfrm.simple .pcal{display:none}
.mfrm.simple .pdate{grid-template-columns:1fr}
.person .selrow{margin-top:0}

/* 커플 관상 — 두 사람이 함께 들어와야 하므로 가이드를 가로로 눕힌다.
   세로 타원 두 개를 그리면 서로 멀찍이 서서 얼굴이 작게 찍힌다. */
.cam.duo{aspect-ratio:4/3}
.cam.duo .oval{width:88%;aspect-ratio:1.9/1;border-radius:50%/50%}
.cam.live .oval span{display:none}

/* 바로 보기 — 여덟 칸이면 두 줄이 된다. 무료 배지는 작게 얹는다. */
.quick{row-gap:.4rem}
.qk{position:relative}
.qk .qf{position:absolute;top:.28rem;right:.3rem;font-style:normal;font-size:.55rem;font-weight:700;
  color:var(--brand);background:var(--brand-w);border-radius:999px;padding:.06rem .28rem;letter-spacing:-.02em}

/* 근거 토글 — "AI 가 지어낸 말 아니냐" 는 의심을 깨는 자리 */
.basis-t{margin-top:.55rem;border-top:1px dashed var(--line);padding-top:.5rem}
.basis-t summary{font-size:.74rem;color:var(--ink3);cursor:pointer;list-style:none;
  display:inline-flex;align-items:center;gap:.25rem}
.basis-t summary::-webkit-details-marker{display:none}
.basis-t summary::before{content:"▾";display:inline-block;transition:transform .18s ease;font-size:.7em}
.basis-t[open] summary::before{transform:rotate(180deg)}
.basis-b{display:flex;gap:.5rem;align-items:baseline;margin-top:.4rem;
  background:var(--sunk);border-radius:8px;padding:.5rem .6rem}
.basis-b .bl{font-size:.6rem;font-weight:700;color:var(--brand);flex:none;letter-spacing:.02em}
.basis-b code{font-family:var(--fm);font-size:.72rem;color:var(--ink2);line-height:1.6;word-break:keep-all}
.todo-t{margin-top:.5rem;font-size:.79rem;color:var(--ink2);line-height:1.65;
  background:var(--brand-w2,var(--sunk));border-radius:8px;padding:.5rem .6rem}
.todo-t .tl{display:inline-block;font-size:.6rem;font-weight:700;color:var(--brand);margin-right:.4rem}
.todo-t.warn{background:var(--warn-w,var(--sunk))}
.todo-t.warn .tl{color:var(--warn)}

/* 3·2·1 다음에 "찰칵!" — 숫자만 바뀌면 언제 찍히는지 몰라 눈을 감는다 */
.cam .count.snap{font-size:2.1rem;letter-spacing:-.03em;animation:ou-snap .5s ease-out}
@keyframes ou-snap{0%{transform:scale(.7);opacity:0}35%{transform:scale(1.12);opacity:1}100%{transform:scale(1);opacity:1}}

/* 분석 중 돌아가는 문구 — 막대만 있으면 그냥 기다리는 시간이 된다 */
.anz-msg{margin:.35rem 0 .9rem;font-size:.82rem;color:var(--ink3);min-height:1.3em;
  font-family:var(--fm);letter-spacing:-.01em}
.anz-msg.in{animation:ou-msg .5s ease-out}
@keyframes ou-msg{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}

/* ═══════════════════════════════════════════════
   1.1.2 — 매일 · 띠운세 · 이벤트
   앞 겹을 이기도록 맨 뒤에 둔다. 새 이름만 쓰고
   기존 이름(.cd · .rv 처럼)은 건드리지 않는다.
   ═══════════════════════════════════════════════ */

/* ── 홈: 오늘 받을 포인트 띠 ───────────── */
.dbar{display:flex;align-items:center;gap:.7rem;margin:.9rem 0 0;padding:.85rem .95rem;
  background:linear-gradient(100deg,#FFF6E3,#FFEFD6);border:1px solid #F3DFB8;
  border-radius:var(--r);box-shadow:0 2px 10px rgba(224,138,43,.08)}
.db-e{font-size:1.5rem;flex:none}
.db-t{flex:1;min-width:0;display:flex;flex-direction:column}
.db-t b{font-size:.93rem;color:#7A4E10;letter-spacing:-.01em}
.db-t span{font-size:.76rem;color:#9A7233}
.db-go{flex:none;background:#E08A2B;color:#fff;font-size:.8rem;font-weight:800;
  border-radius:999px;padding:.36rem .82rem}

/* ── 홈: 띠운세 + 행운번호 두 칸 ───────── */
.dpair{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.7rem}
.dzod,.dluk{display:flex;flex-direction:column;gap:.16rem;padding:.85rem .9rem;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 2px 8px rgba(26,24,38,.04);min-width:0}
.dz-e{font-size:1.4rem;line-height:1}
.dz-l{font-size:.74rem;color:var(--ink3);font-weight:700}
.dz-r{font-size:1.35rem;font-weight:800;color:var(--brand);line-height:1.1}
.dz-r em{font-size:.72rem;font-style:normal;margin-left:.1rem;color:var(--ink2)}
.dz-d{font-size:.72rem;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dzod.zt-top{background:linear-gradient(160deg,#F7F4FF,#FFFFFF)}
.dzod.zt-low{background:linear-gradient(160deg,#F4F6FA,#FFFFFF)}
.dl-l{font-size:.74rem;color:var(--ink3);font-weight:700}
.dl-n{display:flex;flex-wrap:nowrap;gap:.16rem;margin:.3rem 0 .16rem}
/* 반 칸짜리 카드 안에 여섯 개가 들어가야 한다. 줄바꿈을 허용하면
   두 줄이 되면서 옆 칸(띠운세)과 높이가 어긋난다. 폭에 맞춰 줄인다. */
.dl-n i{font-style:normal;font-size:.66rem;font-weight:800;color:#fff;background:var(--brand);
  flex:1 1 0;min-width:0;aspect-ratio:1;max-width:1.5rem;border-radius:50%;
  display:grid;place-items:center;font-family:var(--fm)}
.dl-n i:nth-child(2){background:var(--pink)} .dl-n i:nth-child(3){background:var(--info)}
.dl-n i:nth-child(4){background:var(--good)} .dl-n i:nth-child(5){background:var(--warn)}
.dl-n i:nth-child(6){background:var(--brand-l)}
.dl-d{font-size:.72rem;color:var(--ink2)}

/* ── 오늘: 받아가기 ────────────────────── */
.dtop{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  background:var(--brand);color:#fff;border-radius:var(--r);padding:.95rem 1.05rem;margin-top:.2rem}
.dt-l{display:block;font-size:.74rem;opacity:.8;font-weight:700}
.dtop b{font-size:1.45rem;font-weight:800;letter-spacing:-.02em;font-family:var(--fm)}
.dt-r{font-size:.76rem;background:rgba(255,255,255,.18);border-radius:999px;padding:.24rem .68rem;font-weight:700}

.dtray{display:flex;flex-direction:column;gap:.5rem;margin-top:.6rem}
.dtc{display:flex;align-items:center;gap:.75rem;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:.8rem .9rem;transition:opacity .2s,background .2s}
.dtc-e{font-size:1.45rem;flex:none;width:2.4rem;height:2.4rem;border-radius:12px;
  background:var(--brand-w2);display:grid;place-items:center}
.dtc-t{flex:1;min-width:0;display:flex;flex-direction:column}
.dtc-t b{font-size:.9rem;letter-spacing:-.01em}
.dtc-t span{font-size:.75rem;color:var(--ink3)}
.dtc-b{flex:none;border:0;background:var(--brand);color:#fff;font-weight:800;font-size:.8rem;
  border-radius:999px;padding:.44rem .95rem;min-width:4.1rem}
.dtc.done{background:var(--sunk);opacity:.72}
.dtc.done .dtc-e{background:var(--card)}
.dtc.done .dtc-b{background:var(--line);color:var(--ink3);cursor:default}

/* ── 오늘: 내 띠 카드 ──────────────────── */
.zme{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:1rem 1.05rem;box-shadow:0 2px 10px rgba(26,24,38,.05)}
.zme.zt-top{background:linear-gradient(155deg,#F5F1FF,#FFFFFF);border-color:#E3DAFF}
.zme.zt-mid{background:linear-gradient(155deg,#F3F8FF,#FFFFFF);border-color:#DCE8F7}
.zme.zt-low{background:linear-gradient(155deg,#F5F6F9,#FFFFFF)}
.zme-h{display:flex;align-items:center;gap:.75rem}
.zme-e{font-size:2rem;line-height:1;flex:none}
.zme-h>div{flex:1;min-width:0;display:flex;flex-direction:column}
.zme-h>div b{font-size:1.05rem;font-weight:800;letter-spacing:-.02em}
.zme-h>div span{font-size:.76rem;color:var(--ink2)}
.zme-s{flex:none;font-size:1.7rem;font-weight:800;color:var(--brand);font-family:var(--fm);line-height:1}
.zme-l{margin:.7rem 0 0;font-size:.9rem;line-height:1.62;color:var(--ink)}
.zme-tip{margin-top:.75rem;background:rgba(107,75,255,.06);border-radius:var(--r-s);
  padding:.55rem .75rem;display:flex;align-items:center;gap:.5rem}
.zme-tip span{font-size:.7rem;font-weight:800;color:var(--brand);flex:none}
.zme-tip b{font-size:.82rem;font-weight:600;color:var(--ink2)}

/* ── 오늘: 12띠 전체 ───────────────────── */
.zall{margin-top:.6rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.zall summary{list-style:none;cursor:pointer;padding:.8rem 1rem;font-size:.85rem;font-weight:700;color:var(--ink2)}
.zall summary::-webkit-details-marker{display:none}
.zall summary::after{content:'▾';float:right;color:var(--ink3)}
.zall[open] summary::after{content:'▴'}
.zlist{border-top:1px solid var(--line)}
.zrow{display:flex;align-items:center;gap:.55rem;padding:.6rem 1rem;border-bottom:1px solid var(--line)}
.zrow:last-child{border-bottom:0}
.zrow.me{background:var(--brand-w2)}
.zr-n{flex:none;width:1.7rem;text-align:center;font-size:.82rem;font-weight:800;color:var(--ink3)}
.zr-e{flex:none;font-size:1.05rem}
.zr-m{flex:none;font-size:.84rem;font-weight:700;min-width:3.7rem}
.zr-m i{font-style:normal;font-size:.66rem;background:var(--brand);color:#fff;
  border-radius:999px;padding:.04rem .32rem;margin-left:.16rem;vertical-align:middle}
.zr-t{flex:1;min-width:0;font-size:.74rem;color:var(--ink3);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.zr-s{flex:none;font-size:.84rem;font-weight:800;color:var(--brand);font-family:var(--fm)}

/* ── 오늘: 행운번호 구슬 ───────────────── */
.dnums{display:flex;gap:.45rem;justify-content:space-between;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:.85rem .9rem}
.dn{flex:1;aspect-ratio:1;max-width:2.9rem;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-weight:800;font-family:var(--fm);font-size:.92rem;
  background:var(--brand);box-shadow:inset 0 -3px 6px rgba(0,0,0,.14)}
.dn:nth-child(2){background:var(--pink)} .dn:nth-child(3){background:var(--info)}
.dn:nth-child(4){background:var(--good)} .dn:nth-child(5){background:var(--warn)}
.dn:nth-child(6){background:var(--brand-l)}

/* ── 이벤트 배너 ───────────────────────── */
/* 한 칸을 꽉 채운다. 옆 카드를 잘라 보여 주면 밀 수 있다는 신호는 되지만
   어느 것도 제대로 안 읽힌다. 넘기는 일은 시간(4초)이 대신한다. */
.evwrap{margin-top:.2rem}
.evstrip{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.evstrip::-webkit-scrollbar{display:none}
.evc{flex:0 0 100%;width:100%;scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;flex-direction:column;
  border-radius:var(--r);padding:1rem 1.1rem;color:#fff;position:relative;overflow:hidden;
  box-shadow:0 4px 14px rgba(26,24,38,.12)}
.ev-brand{background:linear-gradient(135deg,#6B4BFF,#8E6BFF)}
.ev-warn{background:linear-gradient(135deg,#E08A2B,#F0A94E)}
.ev-good{background:linear-gradient(135deg,#1F8F6B,#33B58A)}
.ev-pink{background:linear-gradient(135deg,#E0447F,#FF6FB0)}
.evc-e{font-size:1.5rem;line-height:1}
.evc-n{font-size:1rem;font-weight:800;letter-spacing:-.02em;margin-top:.35rem}
.evc-d{font-size:.77rem;opacity:.92;line-height:1.5;margin-top:.15rem}
.evc-f{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.7rem}
.evc-f em{font-style:normal;font-size:.72rem;font-weight:800;background:rgba(255,255,255,.22);
  border-radius:999px;padding:.2rem .6rem}
.evc-f i{font-style:normal;font-size:.72rem;opacity:.85}

.evdots{display:flex;justify-content:center;gap:.32rem;margin-top:.5rem}
.evd{width:.42rem;height:.42rem;padding:0;border:0;border-radius:999px;
  background:var(--line);transition:width .25s,background .25s}
.evd.on{width:1.1rem;background:var(--brand)}

/* ── 이벤트 상세 ───────────────────────── */
.evlead{margin:.9rem 0 0;font-size:.88rem;line-height:1.7;color:var(--ink2)}
.evhow{margin:.5rem 0 0;padding:0;list-style:none;counter-reset:h}
.evhow li{display:flex;align-items:flex-start;gap:.6rem;padding:.55rem 0;
  font-size:.85rem;color:var(--ink);border-bottom:1px solid var(--line)}
.evhow li:last-child{border-bottom:0}
.evhow li span{flex:none;width:1.35rem;height:1.35rem;border-radius:50%;background:var(--brand-w);
  color:var(--brand);font-size:.72rem;font-weight:800;display:grid;place-items:center;margin-top:.1rem}

.e99{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:1.1rem;text-align:center}
.e99.hit{background:linear-gradient(155deg,#FFF6E3,#FFFFFF);border-color:#F3DFB8}
.e9-n{font-size:2.6rem;font-weight:800;font-family:var(--fm);color:var(--brand);letter-spacing:-.03em}
.e99 em{font-style:normal;font-size:.9rem;color:var(--ink3);margin-left:.25rem}
.e99 p{margin:.35rem 0 0;font-size:.82rem;color:var(--ink2)}

.crown2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.cw{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:1rem .8rem;
  background:linear-gradient(160deg,#FFF8E8,#FFFFFF);border:1px solid #F1E2BE;border-radius:var(--r)}
.cw.empty{background:var(--sunk);border-color:var(--line)}
.cw-e{font-size:1.8rem;line-height:1}
.cw-l{font-size:.72rem;color:var(--ink3);font-weight:700}
.cw-n{font-size:.98rem;font-weight:800;letter-spacing:-.02em;text-align:center}
.cw-s{font-size:.76rem;color:var(--ink2)}

.evjoin{display:flex;align-items:center;gap:.7rem;margin-top:.7rem;padding:.8rem .9rem;
  background:var(--brand-w2);border:1px solid #E3DAFF;border-radius:var(--r)}
.ej-e{font-size:1.35rem;flex:none}
.ej-t{flex:1;min-width:0;display:flex;flex-direction:column}
.ej-t b{font-size:.87rem;letter-spacing:-.01em}
.ej-t span{font-size:.75rem;color:var(--ink2)}

.win99{display:flex;align-items:center;gap:.7rem;padding:.9rem 1rem;margin-bottom:.7rem;
  background:linear-gradient(100deg,#FFF3D6,#FFE9C2);border:1px solid #F0D69C;border-radius:var(--r)}
.w9-e{font-size:1.7rem;flex:none}
.win99>div{flex:1;min-width:0;display:flex;flex-direction:column}
.win99 b{font-size:.95rem;color:#7A4E10}
.win99 span{font-size:.76rem;color:#9A7233}
.w9-go{flex:none;background:#7A4E10;color:#fff;font-size:.76rem;font-weight:800;
  border-radius:999px;padding:.34rem .74rem}

/* ── 페이월: 캐시로 열기 ────────────────── */
/* 결제 수단이 없을 때 가격은 글자로만 적는다. 큼직한 보라색 버튼을 그려 놓고
   disabled 를 걸면 눌러도 아무 일이 없어 앱이 고장 난 것처럼 보인다. */
.pw-price{margin:.5rem 0 .1rem;font-size:1.9rem;font-weight:800;letter-spacing:-.03em;
  color:var(--ink);font-family:var(--fm)}
.pw-price span{font-size:.9rem;font-weight:700;margin-left:.12rem;color:var(--ink2);font-family:var(--f)}
a.pw-btn{display:grid;place-items:center;min-height:2.9rem}
/* 두 번 누르기 확인 상태 — 색이 바뀌어야 "지금 누르면 나간다"가 보인다 */
.pw-btn.arm{background:var(--warn);border-color:var(--warn);color:#fff}

/* ── 앱바 부제가 잘려 보이던 것 ────────── */
/*
 * `.appbar` 는 sticky · z-index 6 · 불투명 배경이고, `.appsub` 는 그 바로 뒤에서
 * margin-top 을 음수(-.48rem)로 끌어올리고 있었다. 끌어올린 만큼이 앱바 배경 **아래**로
 * 들어가 글자 윗부분이 잘렸다 — 화면마다 부제 첫 줄이 반쯤 지워져 보이던 원인.
 * 겹치지 않게 되돌리고, 대신 앱바 아래 여백을 줄여 간격은 그대로 유지한다.
 */
.appbar{padding-bottom:.5rem}
.appsub{margin:.05rem 0 .95rem;position:relative;z-index:1}

/* ── 로그인: 빠른 로그인 (개발·검수용) ──── */
.devbox{margin-top:1rem;border:1px dashed var(--line);border-radius:var(--r);
  padding:.85rem .9rem;background:var(--sunk)}
.dev-h{display:block;font-size:.72rem;font-weight:800;color:var(--ink3);margin-bottom:.55rem}
.dev-row{display:grid;grid-template-columns:1fr;gap:.5rem}
.dev-b{display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.6rem .5rem;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-s)}
.dev-b b{font-size:.84rem;font-weight:800}
.dev-b span{font-size:.7rem;color:var(--ink3)}
.dev-e{margin:.5rem 0 0;font-size:.74rem;color:var(--warn)}

/* ═══════════════════════════════════════════════
   1.2.0 — 다인 프로필 · 고민 입력 · 수다방 · 오행/십신
   ═══════════════════════════════════════════════ */

/* ── 내 사람들 ─────────────────────────── */
.pfl{display:flex;flex-direction:column;gap:.55rem;margin-top:.3rem}
.pfc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.pfc.on{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-w)}
.pf-go{display:flex;align-items:center;gap:.75rem;padding:.85rem .95rem}
.pf-av{flex:none;width:2.6rem;height:2.6rem;border-radius:14px;background:var(--brand-w2);
  display:grid;place-items:center;font-size:1.3rem}
.pf-t{flex:1;min-width:0;display:flex;flex-direction:column}
.pf-t b{font-size:.94rem;letter-spacing:-.015em}
.pf-t b i{font-style:normal;font-size:.64rem;font-weight:800;background:var(--brand);color:#fff;
  border-radius:999px;padding:.06rem .38rem;margin-left:.28rem;vertical-align:middle}
.pf-t>span{font-size:.75rem;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-t em{font-style:normal;font-size:.72rem;color:var(--ink2);margin-top:.12rem}
.pf-act{display:flex;gap:0;border-top:1px solid var(--line)}
.pf-b{flex:1;border:0;background:none;padding:.55rem 0;font-family:inherit;font-size:.78rem;
  font-weight:700;color:var(--ink2);border-right:1px solid var(--line)}
.pf-b:last-child{border-right:0}
.pf-b.del{color:var(--pink-d)}
.pf-b.arm{background:var(--warn);color:#fff}
.pf-max{margin:.6rem 0 0;font-size:.78rem;color:var(--ink3);text-align:center}
.relrow{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin-bottom:.2rem}

/* ── 고민 입력 ─────────────────────────── */
.askwho{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.7rem .9rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.aw-l{font-size:.88rem;font-weight:700}
.aw-c{font-size:.76rem;font-weight:700;color:var(--brand)}
.asktip{display:flex;gap:.6rem;align-items:flex-start;margin-top:.55rem;padding:.8rem .9rem;
  background:var(--sunk);border-radius:var(--r)}
.at-e{font-size:1.1rem;flex:none;line-height:1.5}
.asktip p{margin:0;font-size:.83rem;line-height:1.65;color:var(--ink2)}
.fi.ta{min-height:7.5rem;resize:vertical;line-height:1.7;padding-top:.75rem}
.tacount{display:flex;justify-content:space-between;align-items:center;margin-top:.3rem;
  font-size:.74rem;color:var(--ink3)}
.tacount b{font-family:var(--fm);font-weight:700}
.askchips{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.7rem}

/* ── 수다권 ────────────────────────────── */
/* 창(window) 모양 — "도착했어요" 가 알림처럼 보여야 눌러 본다 */
.tik{border:2px solid var(--ink);border-radius:12px;overflow:hidden;background:var(--card);
  box-shadow:3px 3px 0 rgba(26,24,38,.14)}
.tik.out{opacity:.72;box-shadow:none}
.tik-bar{display:flex;align-items:center;justify-content:space-between;
  padding:.4rem .7rem;background:linear-gradient(90deg,var(--brand-w),var(--pink-w));
  border-bottom:2px solid var(--ink)}
.tik-t{font-size:.8rem;font-weight:800}
.tik-x{font-size:.62rem;color:var(--ink2);letter-spacing:.1em}
.tik-in{display:flex;align-items:center;gap:.8rem;padding:.9rem 1rem}
.tik-l{flex:1;min-width:0;display:flex;flex-direction:column}
.tik-l b{font-size:.95rem;letter-spacing:-.02em}
.tik-l span{font-size:.76rem;color:var(--ink3);margin-top:.1rem}
.tik-n{flex:none;min-width:4.2rem;text-align:center;background:#FFF3D6;border:2px solid var(--ink);
  border-radius:10px;padding:.4rem .5rem;box-shadow:2px 2px 0 rgba(26,24,38,.18)}
.tik-n b{display:block;font-size:1.5rem;font-weight:800;line-height:1;font-family:var(--fm)}
.tik-n span{font-size:.66rem;color:var(--ink2)}
.tik-buy{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:.5rem;
  padding:.65rem .85rem;background:var(--sunk);border-radius:var(--r)}
.tik-buy>span:first-child{flex:1;min-width:0;font-size:.8rem;color:var(--ink2);line-height:1.5}
.tik-buy .btn{flex:none;white-space:nowrap}

/* ── 캐릭터 목록 ───────────────────────── */
.pers{display:flex;flex-direction:column;gap:.55rem}
.pc2{display:flex;align-items:center;gap:.8rem;padding:.8rem .9rem;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:0 2px 8px rgba(26,24,38,.04)}
.pc-av{flex:none;width:3.2rem;height:3.2rem;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;font-size:1.5rem;background:var(--brand-w2)}
.pc-av img{width:100%;height:100%;object-fit:cover;display:block}
.pc2.pc-brand .pc-av{box-shadow:0 0 0 2px var(--brand)}
.pc2.pc-info  .pc-av{box-shadow:0 0 0 2px var(--info)}
.pc2.pc-good  .pc-av{box-shadow:0 0 0 2px var(--good)}
.pc2.pc-warn  .pc-av{box-shadow:0 0 0 2px var(--warn)}
.pc-t{flex:1;min-width:0;display:flex;flex-direction:column}
.pc-t b{font-size:.92rem;letter-spacing:-.015em}
.pc-t b i{font-style:normal;font-size:.68rem;font-weight:600;color:var(--ink3);margin-left:.35rem}
.pc-t>span{font-size:.76rem;color:var(--ink2);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc-go{flex:none;color:var(--ink3)}

/* ── 대화방 ────────────────────────────── */
.chead{display:flex;align-items:center;gap:.7rem;padding:.7rem .9rem;background:var(--card);
  border-bottom:1px solid var(--line)}
.ch-av{flex:none;width:2.6rem;height:2.6rem;border-radius:50%;overflow:hidden;background:var(--brand-w2);
  display:grid;place-items:center;font-size:1.3rem}
.ch-av img{width:100%;height:100%;object-fit:cover;display:block}
.ch-t{flex:1;min-width:0;display:flex;flex-direction:column}
.ch-t b{font-size:.92rem}
.ch-t span{font-size:.74rem;color:var(--ink3)}
.ch-tk{flex:none;font-size:.74rem;font-weight:800;color:var(--brand);
  background:var(--brand-w);border-radius:999px;padding:.22rem .6rem}
.cav img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.cout{margin:.6rem .9rem 0;padding:.9rem;background:var(--sunk);border-radius:var(--r);text-align:center}
.cout b{display:block;font-size:.9rem}
.cout span{display:block;font-size:.76rem;color:var(--ink3);margin:.15rem 0 .5rem}
.cdisc{margin:.5rem .9rem 1rem;font-size:.72rem;color:var(--ink3);text-align:center;line-height:1.6}

/* ── 홈: 캐릭터가 기다리고 있어요 ───────── */
.wait{display:flex;flex-direction:column;gap:.45rem;margin-top:.7rem}
.wc{display:flex;align-items:center;gap:.7rem;padding:.75rem .85rem;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r)}
.wc-av{flex:none;width:2.9rem;height:2.9rem;border-radius:50%;overflow:hidden;background:var(--brand-w2);
  display:grid;place-items:center;font-size:1.35rem;box-shadow:0 0 0 2px var(--pink-w)}
.wc-av img{width:100%;height:100%;object-fit:cover;display:block}
.wc-t{flex:1;min-width:0;display:flex;flex-direction:column}
.wc-t b{font-size:.9rem;letter-spacing:-.015em}
.wc-t span{font-size:.77rem;color:var(--ink2);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wc-go{flex:none;width:1.8rem;height:1.8rem;border-radius:50%;background:var(--pink-w);
  color:var(--pink-d);display:grid;place-items:center}

/* ── 오행 요약 · 십신 ──────────────────── */
.ohsum{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-top:.55rem}
.ohs{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:.8rem .85rem}
.ohs-l{display:block;font-size:.71rem;font-weight:800;color:var(--ink3)}
.ohs b{display:block;font-size:1.05rem;font-weight:800;margin:.12rem 0 .3rem}
.ohs-d{display:block;font-size:.76rem;color:var(--ink2);line-height:1.6}
.ohall{margin-top:.55rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ohall summary{list-style:none;cursor:pointer;padding:.75rem .95rem;font-size:.84rem;font-weight:700;color:var(--ink2)}
.ohall summary::-webkit-details-marker{display:none}
.ohall summary::after{content:'▾';float:right;color:var(--ink3)}
.ohall[open] summary::after{content:'▴'}
.ohl{border-top:1px solid var(--line)}
.ohr{display:flex;gap:.65rem;padding:.65rem .95rem;border-bottom:1px solid var(--line)}
.ohr:last-child{border-bottom:0}
.ohr-n{flex:none;width:1.9rem;height:1.9rem;border-radius:9px;color:#fff;font-weight:800;
  font-size:.85rem;display:grid;place-items:center}
.ohr-t{flex:1;min-width:0;display:flex;flex-direction:column}
.ohr-t b{font-size:.84rem}
.ohr-t b i{font-style:normal;font-size:.7rem;color:var(--ink3);font-weight:600;margin-left:.2rem}
.ohr-t span{font-size:.76rem;color:var(--ink2);line-height:1.6}

.sipl{display:flex;flex-direction:column;gap:.5rem}
.sipc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:.85rem .95rem}
.sip-h{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.sip-p{font-size:.68rem;font-weight:800;background:var(--sunk);color:var(--ink2);
  border-radius:999px;padding:.1rem .45rem}
.sip-n{font-size:1rem;font-weight:800;letter-spacing:-.02em;color:var(--brand)}
.sip-s{font-size:.76rem;color:var(--ink3)}
.sip-b{margin:.4rem 0 0;font-size:.85rem;line-height:1.7;color:var(--ink)}
.sip-c{display:flex;gap:.35rem;align-items:flex-start;margin:.45rem 0 0;padding-top:.45rem;
  border-top:1px dashed var(--line);font-size:.79rem;color:var(--ink2);line-height:1.6}
.sip-c svg{flex:none;margin-top:.18rem;color:var(--ink3)}

/* ── 마스코트 ──────────────────────────── */
.anz-mascot{display:grid;place-items:center;margin-bottom:.5rem}
.anz-char{animation:ou-float 2.4s ease-in-out infinite;filter:drop-shadow(0 6px 14px rgba(107,75,255,.22))}
@keyframes ou-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(2deg)}}
/* 분석중 화면마다 다른 짧은 루프 영상 — 사주/궁합/관상/신년이 서로 다른 색·모션으로 보인다 */
.anz-mascot-vid{position:relative;width:112px;height:112px;border-radius:50%;overflow:hidden;
  filter:drop-shadow(0 6px 14px rgba(107,75,255,.18))}
.anz-vid{width:112px;height:112px;object-fit:cover;display:block}
.anz-vid-static{display:none;width:112px;height:112px;object-fit:cover;position:absolute;inset:0}
@media(prefers-reduced-motion:reduce){
  .anz-vid{display:none}
  .anz-vid-static{display:block}
}
.auth-mascot{display:grid;place-items:center;margin-bottom:.2rem}
.auth-char{animation:ou-float 3.2s ease-in-out infinite;filter:drop-shadow(0 8px 18px rgba(107,75,255,.2))}
.empty-char{margin:0 auto .3rem;filter:drop-shadow(0 6px 14px rgba(107,75,255,.14))}

/* ── 대화 입력줄 ───────────────────────── */
/* 이름을 .ci / .cs 로 두지 않는다 — `.ct .ci`(카테고리 타일 아이콘)와 두 글자가 겹친다.
   두 글자 이름 충돌로 이미 두 번(.cd · .rv) 화면이 깨졌다. */
.chatwrap{min-height:calc(100dvh - 13rem)}
.cdisc{margin-bottom:5.2rem}
.cbox{flex:1;overflow-y:auto;padding:.9rem .9rem 1rem;display:flex;flex-direction:column;gap:.55rem}
.cmsg{display:flex;align-items:flex-end;gap:.45rem;max-width:88%}
.cmsg.me{align-self:flex-end;flex-direction:row-reverse}
.cmsg .cav{flex:none;width:1.9rem;height:1.9rem;border-radius:50%;overflow:hidden;
  background:var(--brand-w2);display:grid;place-items:center;font-size:.95rem}
.cmsg .cb{background:var(--card);border:1px solid var(--line);border-radius:16px 16px 16px 5px;
  padding:.65rem .85rem;font-size:.88rem;line-height:1.65;white-space:pre-wrap;word-break:break-word}
.cmsg.me .cb{background:var(--brand);color:#fff;border-color:var(--brand);
  border-radius:16px 16px 5px 16px}
.cb.typing{display:flex;gap:.25rem;align-items:center;padding:.75rem .9rem}
.cb.typing i{width:.38rem;height:.38rem;border-radius:50%;background:var(--ink3);
  animation:ou-typ 1.1s ease-in-out infinite}
.cb.typing i:nth-child(2){animation-delay:.16s}
.cb.typing i:nth-child(3){animation-delay:.32s}
@keyframes ou-typ{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* 하단 도크(.tabbar)도 sticky bottom:0 이라 그대로 두면 도크가 입력줄을 덮는다.
   도크 높이(≈4.6rem)만큼 띄운다. */
.cinput{position:sticky;bottom:4.7rem;display:flex;gap:.45rem;padding:.6rem .9rem;
  background:var(--bg);border-top:1px solid var(--line);z-index:4}
.cin{flex:1;min-width:0;height:2.85rem;border:1px solid var(--line);border-radius:999px;
  padding:0 1rem;font-family:inherit;font-size:.9rem;background:var(--card);color:var(--ink)}
.cin:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-w2)}
.cin:disabled{background:var(--sunk);color:var(--ink3)}
.csend{flex:none;width:2.85rem;height:2.85rem;border:0;border-radius:50%;background:var(--brand);
  color:#fff;display:grid;place-items:center}
.csend:disabled{background:var(--line);color:var(--ink3)}

/* ── 설치가 덜 됐습니다 ────────────────── */
.needup{display:flex;gap:.7rem;align-items:flex-start;padding:.95rem 1rem;margin-bottom:.7rem;
  background:#FFF6E3;border:1px solid #F0D69C;border-radius:var(--r);flex-wrap:wrap}
.nu-e{font-size:1.4rem;flex:none;line-height:1.4}
.nu-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.nu-t b{font-size:.92rem;color:#7A4E10}
.nu-t span{font-size:.79rem;color:#8A6520;line-height:1.6}
.nu-t code{font-family:var(--fm);font-size:.72rem;background:rgba(122,78,16,.1);
  border-radius:5px;padding:.05rem .3rem}
.nu-fix{color:#9A7233!important}
.needup .nu-go{flex:none;width:100%;margin-top:.2rem;text-align:center;background:#7A4E10;color:#fff;
  font-size:.82rem;font-weight:800;border-radius:10px;padding:.55rem 1rem}

/* ── 브랜드 인트로 (영상 없이) ─────────── */
/* 유튜브는 '퍼가기 허용'이 꺼져 있으면 검은 화면만 뜨고, 파일 모드는 우리 트래픽을 먹는다.
   이 모드는 파일 0KB 에 재생 실패가 없다. */
.obrand{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 18%,#2B1E63 0%,#160F35 55%,#0C0820 100%)}
.ob-sky{position:absolute;inset:0;pointer-events:none}
.ob-sky i{position:absolute;width:4px;height:4px;border-radius:50%;background:#FFE9A8;
  opacity:.85;animation:ob-tw 3.4s ease-in-out infinite}
.ob-sky i:nth-child(1){left:16%;top:22%;animation-delay:0s}
.ob-sky i:nth-child(2){left:78%;top:18%;width:3px;height:3px;animation-delay:.5s}
.ob-sky i:nth-child(3){left:28%;top:64%;width:5px;height:5px;animation-delay:1.1s}
.ob-sky i:nth-child(4){left:86%;top:58%;animation-delay:1.7s}
.ob-sky i:nth-child(5){left:52%;top:12%;width:3px;height:3px;animation-delay:2.2s}
.ob-sky i:nth-child(6){left:10%;top:46%;width:3px;height:3px;animation-delay:2.8s}
@keyframes ob-tw{0%,100%{opacity:.2;transform:scale(.7)}50%{opacity:1;transform:scale(1.25)}}
.ob-char{position:relative;z-index:1;animation:ob-in .9s cubic-bezier(.22,1,.36,1) both, ou-float 3s ease-in-out .9s infinite;
  filter:drop-shadow(0 14px 34px rgba(255,214,120,.28))}
@keyframes ob-in{from{opacity:0;transform:translateY(26px) scale(.86)}to{opacity:1;transform:none}}

/* ── 로그아웃 · 탈퇴 ───────────────────── */
.menu button.mi{width:100%;text-align:left;border:0;background:none;font-family:inherit;font-size:inherit}
.menu button.mi.logout{color:var(--ink2)}
.dangernote{margin:.6rem 0 0;font-size:.76rem;color:var(--ink3);line-height:1.65}
.danger .del.arm{background:var(--warn);border-color:var(--warn);color:#fff}

/* 섹션 제목 옆의 링크형 버튼 — <a> 자리에 들어가므로 모양을 맞춘다 */
.st .lnk{border:0;background:none;font-family:inherit;font-size:inherit;color:var(--brand);
  display:inline-flex;align-items:center;gap:.15rem;padding:0}

/* 점수와 단위가 겹쳐 보이던 것 — 문자 간격(-.055em)이 단위까지 먹고 있었다 */
.bigscore{display:inline-flex;align-items:baseline;gap:.14rem}
.bigscore em{letter-spacing:0;margin-left:.02rem}

/* ── 부적 그림 ─────────────────────────── */
/* 파일이 아니라 서버가 만든 SVG 다. 요청이 추가되지 않으므로 월 4GB 한도와 무관하다. */
.rv-img{display:grid;place-items:center;margin:.5rem 0 .7rem}
.rv-img svg{display:block;max-width:100%;height:auto;border-radius:7px;
  box-shadow:0 10px 28px rgba(0,0,0,.28);animation:ou-charm .7s cubic-bezier(.22,1,.36,1) both}
@keyframes ou-charm{from{opacity:0;transform:translateY(14px) scale(.94) rotate(-2deg)}to{opacity:1;transform:none}}

/* 부적 카드가 스테이지를 넘쳐 등급·설명이 가려지던 것 */
.draw-stage{min-height:430px}
.reveal{position:relative;inset:auto;padding:.6rem 1.1rem 1.1rem}
.rv-card{padding:1rem .95rem 1.1rem;max-width:20rem;margin:0 auto}
.rv-img{margin:.45rem 0 .55rem}
.rv-img svg{box-shadow:0 8px 22px rgba(0,0,0,.22)}
.rv-desc{margin-top:.5rem}

/* ── 타로 카드 그림 ────────────────────── */
/* 서버가 그린 SVG 를 카드 앞면에 꽉 채운다. 파일 요청이 없다. */
.tr-front{padding:0;overflow:hidden;display:block}
.tr-front .tr-pos{position:absolute;top:.3rem;left:0;right:0;z-index:2;font-size:.6rem;
  font-weight:800;color:var(--c,var(--brand));opacity:.9;text-align:center}
.tcard-art{width:100%;height:100%;display:block;border-radius:8px;position:relative;overflow:hidden}
.tcard-art img{width:100%;height:100%;object-fit:contain;background:#F4EFE1;border-radius:8px;display:block}
.tcard-anim{animation:tcardFloat 3.6s ease-in-out infinite}
@keyframes tcardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.tcard-shine{animation:tcardShine 4.2s ease-in-out infinite}
@keyframes tcardShine{0%,25%{transform:translateX(0)}60%{transform:translateX(calc(var(--tw,150px)*1.4))}100%{transform:translateX(calc(var(--tw,150px)*1.4))}}
.tcard-back-wrap{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:6px}
.tcard-back{position:relative;display:inline-block;width:var(--tw,150px);height:var(--th,258px);border-radius:9px;overflow:hidden}
.tcard-back img{display:block;width:100%;height:100%;object-fit:cover;border-radius:9px}
.tcard-back-glow{position:absolute;inset:0;pointer-events:none;border-radius:9px;background:radial-gradient(circle at 50% 42%,rgba(255,214,120,.35),transparent 55%);animation:tcardPulse 3.6s ease-in-out infinite}
@keyframes tcardPulse{0%,100%{opacity:.45}50%{opacity:.85}}
.tcard-brand{font-size:11px;font-weight:700;letter-spacing:1.2px;color:#E7C983;background:rgba(11,20,42,.55);border:.5px solid rgba(231,201,131,.5);border-radius:999px;padding:2px 10px}
.hwatu-card{position:relative;display:inline-block;width:var(--hw,110px);border-radius:8px;overflow:hidden;transform:translateZ(0);transition:transform .25s ease}
.hwatu-card img{display:block;width:100%;border-radius:8px}
.hwatu-card:hover{transform:rotate(-2deg) translateY(-2px)}
.hwatu-gwang{animation:hwFloat 3.4s ease-in-out infinite}
@keyframes hwFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.hwatu-shine{position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);background-size:250% 250%;background-position:-100% -100%}
.hwatu-gwang .hwatu-shine{animation:hwShine 3.4s ease-in-out infinite}
@keyframes hwShine{0%,20%{background-position:-100% -100%}55%{background-position:100% 100%}100%{background-position:100% 100%}}
.hwatu-back-wrap{position:relative;display:inline-block;width:var(--hw,110px)}
.hwatu-back-wrap img{display:block;width:100%;border-radius:8px}
.hwatu-back-glow{position:absolute;inset:0;pointer-events:none;border-radius:8px;background:radial-gradient(circle at 50% 42%,rgba(217,179,108,.4),transparent 55%);animation:hwBackPulse 3.6s ease-in-out infinite}
@keyframes hwBackPulse{0%,100%{opacity:.4}50%{opacity:.8}}
@media (prefers-reduced-motion: reduce){.tcard-anim,.tcard-shine,.tcard-back-glow,.hwatu-card,.hwatu-gwang,.hwatu-shine,.hwatu-back-glow{animation:none !important;transition:none !important}}
/* .tr-front(타로 플립카드) 안에 화투 카드를 넣을 때 — 고정 px폭이 아니라 박스를 꽉 채운다.
   .tr-card가 aspect-ratio:.62로 크기를 정하고 overflow:hidden이라, 안쪽 이미지가
   그보다 조금이라도 크거나 다른 비율이면 삐져나온 부분이 잘려 보인다. */
.tr-front .hwatu-card{width:100% !important;height:100%}
.tr-front .hwatu-card img{width:100%;height:100%;object-fit:contain;background:#7A2018}
.tr-front .tcard-art{width:100% !important;height:100%}
.tr-back .hwatu-back-wrap{width:100% !important;height:100%}
.tr-back .hwatu-back-wrap img{width:100%;height:100%;object-fit:contain;background:#7A2018}

/* 화투 짝맞추기 보드 */
.hm-stats{display:flex;align-items:center;gap:14px;font-size:.82rem;color:var(--ink3);margin-bottom:.6rem}
.hm-stats b{color:var(--ink);font-family:var(--fm)}
.hm-board{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}
.hm-cell{position:relative;aspect-ratio:.62;padding:0;border:none;background:none;cursor:pointer;border-radius:6px;overflow:hidden;transition:transform .15s}
.hm-cell:active{transform:scale(.94)}
.hm-cell .hm-back,.hm-cell .hm-front{position:absolute;inset:0;transition:opacity .18s}
.hm-cell .hm-back img,.hm-cell .hm-front img{width:100%;height:100%;object-fit:contain;background:#7A2018;border-radius:6px}
.hm-cell .hm-front{opacity:0;pointer-events:none}
.hm-cell.open .hm-back{opacity:0}
.hm-cell.open .hm-front{opacity:1}
.hm-cell.matched{opacity:.35;cursor:default}
.hm-cell.wrong .hm-front{animation:hmShake .35s}
@keyframes hmShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.hm-done{margin-top:1rem;padding:1rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);text-align:center}

/* 영상(유튜브) 목록 */
/* ── 영상(?s=videos) — 카테고리별 랭킹 콘텐츠 화면 ── */
.yt-search-wrap{margin-bottom:.9rem}
.yt-search{width:100%;box-sizing:border-box;padding:.75rem 1rem;border-radius:99px;border:1.5px solid var(--line);
  background:var(--card);font-size:.85rem;outline:none}
.yt-search:focus{border-color:var(--brand)}

.yt-chgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.yt-chcard{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.9rem .5rem;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);text-decoration:none;color:inherit;
  transition:border-color .15s,transform .15s}
.yt-chcard:hover{border-color:var(--yc,var(--brand-l));transform:translateY(-1px)}
.yt-chavatar-img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.yt-chavatar-img.big{width:56px;height:56px}
.yt-chavatar-big{width:52px;height:52px;border-radius:50%;color:#fff;font-weight:800;font-size:1.15rem;
  display:flex;align-items:center;justify-content:center}
.yt-chcard-name{font-size:.76rem;font-weight:700;text-align:center;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.yt-chcard-subs{font-size:.65rem;color:var(--ink3)}

.yt-chhead{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem;padding:.9rem;background:var(--sunk);border-radius:var(--r-s)}
.yt-chhead b{display:block;font-size:.98rem}
.yt-chhead span{font-size:.76rem;color:var(--ink3)}

.yt-cattabs{display:flex;gap:6px;overflow-x:auto;margin-bottom:1rem;scrollbar-width:none;padding-bottom:2px}
.yt-cattabs::-webkit-scrollbar{display:none}
.yt-cattab{flex:1 1 0;display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:700;
  padding:.55rem .5rem;border-radius:99px;background:var(--card);border:1.5px solid var(--line);color:var(--ink3);white-space:nowrap}
.yt-cattab.on{background:var(--ycbg);border-color:var(--yc);color:var(--yc)}

.yt-sec-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.85rem;padding:.85rem 1rem;
  background:var(--ycbg);border-radius:var(--r-s);border:1px solid var(--yc)}
.yt-sec-emo{font-size:1.5rem;flex:none}
.yt-sec-head b{display:block;font-size:.95rem;color:var(--yc);letter-spacing:-.02em}
.yt-sec-head span{font-size:.72rem;color:var(--ink3)}

.yt-banner{display:block;position:relative;height:190px;border-radius:16px;overflow:hidden;margin-bottom:.7rem;
  background-size:cover;background-position:center;text-decoration:none;color:#fff;
  display:flex;flex-direction:column;justify-content:space-between;padding:.9rem 1rem;box-sizing:border-box}
.yt-banner-top{display:flex;align-items:center;justify-content:space-between}
.yt-banner-tag{background:rgba(255,255,255,.16);backdrop-filter:blur(6px);padding:.3rem .7rem;border-radius:99px;
  font-size:.74rem;font-weight:800;border:1px solid rgba(255,255,255,.3)}
.yt-banner-play{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);color:#111;
  display:flex;align-items:center;justify-content:center;font-size:.8rem;padding-left:2px}
.yt-banner-title{display:block;font-size:1rem;font-weight:800;line-height:1.3;letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.yt-banner-ch{display:block;font-size:.74rem;color:rgba(255,255,255,.85);margin-top:.25rem}
.yt-banner-stats{display:flex;gap:.6rem;margin-top:.5rem;flex-wrap:wrap}
.yt-banner-stats span{font-size:.66rem;font-weight:700;background:rgba(255,255,255,.14);padding:.22rem .55rem;border-radius:99px}

.yt-list{display:flex;flex-direction:column;gap:10px}
.yt-card{display:flex;gap:.7rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);
  padding:.65rem;text-decoration:none;color:inherit;align-items:stretch;transition:border-color .15s,transform .15s}
.yt-card:hover{border-color:var(--yc,var(--brand-l));transform:translateY(-1px)}
.yt-rankwrap{flex:none;width:28px;display:flex;align-items:center;justify-content:center}
.yt-medal{font-size:1.35rem;line-height:1}
.yt-rank-num{font-size:.78rem;font-weight:800;color:var(--ink3);font-family:var(--fm)}
.yt-thumbwrap{flex:none;width:118px;height:68px;border-radius:8px;overflow:hidden;background:#000}
.yt-thumb{width:100%;height:100%;object-fit:cover;display:block}
.yt-meta{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:.28rem}
.yt-title{font-size:.85rem;font-weight:700;line-height:1.35;letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.yt-chrow{display:flex;align-items:center;gap:.32rem}
.yt-chavatar{flex:none;width:16px;height:16px;border-radius:50%;background:var(--yc,var(--brand));color:#fff;
  font-size:.6rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.yt-chname{font-size:.72rem;color:var(--ink2);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yt-views{font-size:.7rem;color:var(--ink3)}
.yt-meta{display:flex;flex-direction:column;gap:4px;justify-content:center;min-width:0}
.yt-title{font-size:.85rem;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.yt-sub{font-size:.72rem;color:var(--ink3)}

/* 행운번호 히스토리 · 공식 결과 */
.lo-ball.sm{width:32px;height:32px;font-size:.85rem}
.lo-ball.xs{width:26px;height:26px;font-size:.72rem}
.lo-ball.bonus{background:linear-gradient(150deg,#8E6BFF,#4A2FCB);border-color:transparent;color:#fff}
.lo-ball.hit{background:linear-gradient(150deg,#FFB84D,#FF7A45);border-color:transparent;color:#fff}
.lotto-official{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.lo-plus{color:var(--ink3);font-size:.85rem}
.lucky-history{display:flex;flex-direction:column;gap:8px}
.lh-row{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);padding:.6rem .7rem;flex-wrap:wrap}
.lh-date{font-size:.72rem;color:var(--ink3);font-family:var(--fm);min-width:52px}
.lh-nums{display:flex;gap:4px;flex-wrap:wrap}
.lh-tag{font-size:.7rem;color:var(--ink3);margin-left:auto}
.lh-tag.strong{color:#FF7A45;font-weight:700}

/* 과거 관통 테스트 */
.pc-prog{height:4px;background:var(--line);border-radius:99px;overflow:hidden;margin:.6rem 0 .2rem}
.pc-prog i{display:block;height:100%;background:var(--brand);transition:width .3s}

/* 사주 로딩 화면 */
.loading-spin{width:44px;height:44px;border:3px solid var(--line);border-top-color:var(--brand);border-radius:50%;animation:loadingSpin .8s linear infinite}
@keyframes loadingSpin{to{transform:rotate(360deg)}}

/* 만세력 설명 카드 · 분야별 바로가기 */
.myeong-explain{background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);padding:.6rem .75rem;margin-bottom:.6rem;font-size:.82rem}
.myeong-explain summary{cursor:pointer;font-weight:600}
.quickcat{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:.8rem}
.quickcat a{font-size:.76rem;padding:.35rem .7rem;background:var(--card);border:1px solid var(--line);border-radius:99px;color:var(--ink);text-decoration:none}
.tr-front .tr-pos{top:.22rem;text-shadow:0 1px 2px rgba(255,255,255,.9)}

/* ── 상담 정리 카드 · 세션 안내 ─────────────────────────────
   수다권 한 장이 «한 세션» 이 되면서, 세션이 끝날 때 남는 것이 필요해졌다.
   말풍선으로 그리면 그냥 흘러가는 말이 된다 — 카드로 그린다.
   ══════════════════════════════════════════════════════════ */
.ccard{margin:.9rem .2rem;border:1px solid var(--line);border-radius:14px;overflow:hidden;
     background:linear-gradient(180deg,var(--card) 0%,var(--sunk) 100%)}
.ccard .cc-h{display:flex;align-items:center;gap:.4rem;padding:.7rem .9rem;
     border-bottom:1px solid var(--line);color:var(--brand)}
.ccard .cc-h b{font-size:.86rem;letter-spacing:-.01em}
.ccard .cc-h span{margin-left:auto;font-size:.72rem;color:var(--ink3)}
.ccard .cc-b{padding:.85rem .95rem}
.ccard .cc-t{display:block;font-size:.79rem;color:var(--brand);letter-spacing:-.01em;
     margin:.85rem 0 .3rem}
.ccard .cc-t:first-child{margin-top:0}
.ccard .cc-p{margin:0 0 .35rem;font-size:.855rem;line-height:1.72;color:var(--ink2)}
.ccard .cc-li{margin:0 0 .28rem;padding-left:.85rem;position:relative;
     font-size:.855rem;line-height:1.7;color:var(--ink2)}
.ccard .cc-li::before{content:'';position:absolute;left:.15rem;top:.62em;
     width:4px;height:4px;border-radius:50%;background:var(--brand)}
.ccard .cc-f{display:flex;gap:.4rem;padding:.2rem .95rem .9rem}
.ccard .cc-f .btn{flex:1;text-align:center}

.cses{margin:.1rem .95rem .35rem;font-size:.755rem;line-height:1.6;color:var(--ink3);text-align:center}
.cses b{color:var(--brand)}
.chatwrap .ch-tk{white-space:nowrap}

/* ── 궁합 15개 절 ────────────────────────────────────────────
   예전에는 화면이 소제목 세 개를 코드에 박아 두고 그것만 꺼내 썼다.
   이제 엔진이 준 절을 전부 그린다 — 앞의 셋은 펼쳐 두고 나머지는 접는다.
   15개를 다 펼쳐 두면 스크롤이 끝없이 길어 오히려 안 읽는다.
   ══════════════════════════════════════════════════════════ */
.mrsecs{display:flex;flex-direction:column;gap:.5rem}
.mrsec{border:1px solid var(--line);border-radius:12px;background:var(--card);overflow:hidden}
.mrsec>summary{display:flex;align-items:center;gap:.55rem;padding:.8rem .9rem;cursor:pointer;
     list-style:none;-webkit-tap-highlight-color:transparent}
.mrsec>summary::-webkit-details-marker{display:none}
.mrsec>summary b{flex:1;font-size:.88rem;letter-spacing:-.015em;line-height:1.45}
.mrsec>summary svg{flex:none;color:var(--ink3);transition:transform .18s ease}
.mrsec[open]>summary svg{transform:rotate(90deg)}
.mrs-n{flex:none;min-width:1.6rem;height:1.6rem;display:grid;place-items:center;border-radius:7px;
     background:var(--brand-w,var(--sunk));color:var(--brand);
     font-size:.68rem;font-weight:700;font-variant-numeric:tabular-nums}
.mrs-b{padding:0 .9rem .9rem;border-top:1px solid var(--line)}
.mrs-p{margin:.6rem 0 0;font-size:.875rem;line-height:1.78;color:var(--ink2)}
.mrs-li{margin:.42rem 0 0;padding-left:.85rem;position:relative;
     font-size:.875rem;line-height:1.72;color:var(--ink2)}
.mrs-li::before{content:'';position:absolute;left:.15rem;top:.66em;
     width:4px;height:4px;border-radius:50%;background:var(--brand)}
.mrs-b b{color:var(--ink)}

/* ── 관상 · 실시간 얼굴 인식 ────────────────────────────────
   영상(z-1) 위, 가이드 타원(z-2) 아래에 점 마스킹을 그린다.
   화면은 거울로 보여주고 있으므로 캔버스는 뒤집지 않는다 —
   좌표를 그릴 때 JS 가 이미 뒤집어서 넘긴다(두 번 뒤집으면 어긋난다).
   ══════════════════════════════════════════════════════════ */
.cam .mesh{position:absolute;inset:0;width:100%;height:100%;z-index:2;
     pointer-events:none;display:none}
.cam.live .mesh{display:block}
.cam.done .mesh{display:none}

/* 얼굴이 잡혔다는 표시 — 촬영해도 되는 순간에만 뜬다 */
.cam .fbadge{position:absolute;top:.6rem;left:.6rem;z-index:6;display:flex;align-items:center;
     gap:.32rem;padding:.26rem .6rem .26rem .48rem;border-radius:999px;
     background:rgba(10,8,20,.62);backdrop-filter:blur(6px);
     color:#fff;font-size:.7rem;font-weight:600;letter-spacing:-.01em}
.cam .fbadge i{width:6px;height:6px;border-radius:50%;background:#4fd18b;
     box-shadow:0 0 0 0 rgba(79,209,139,.6);animation:ou-fpulse 1.6s ease-out infinite}
@keyframes ou-fpulse{
  0%{box-shadow:0 0 0 0 rgba(79,209,139,.55)}
  70%{box-shadow:0 0 0 7px rgba(79,209,139,0)}
  100%{box-shadow:0 0 0 0 rgba(79,209,139,0)}
}

/* 얼굴이 없는데 촬영을 눌렀다 — 화면이 한 번 흔들려 «아직» 이라고 말한다 */
.cam.warn{animation:ou-shake .34s ease}
@keyframes ou-shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)} 40%{transform:translateX(5px)}
  60%{transform:translateX(-3px)} 80%{transform:translateX(2px)}
}
@media(prefers-reduced-motion:reduce){
  .cam .fbadge i{animation:none}
  .cam.warn{animation:none}
}

/* 타로 안내 — 카드를 든 토끼 */
.tarot-guide{display:flex;align-items:center;gap:.7rem;margin:.9rem 0 .2rem;
     padding:.75rem .85rem;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.tarot-guide img{flex:none;width:64px;height:64px;object-fit:contain}
.tarot-guide p{margin:0;font-size:.79rem;line-height:1.65;color:var(--ink2)}
.tarot-guide b{color:var(--ink)}