@import url('https://fonts.googleapis.com/css2?family=Jua&family=Gaegu:wght@700&display=swap');
/* ===== 호랑이 사주 · 파스텔 디자인 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root{
  --orange:#ff9d2e; --orange-d:#f08200; --cream:#fff6ea; --brown:#5a3b22;
  --pink:#ff7a9b; --ink:#4a3526;
  --cute:'Jua','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
}
body{
  font-family:'Apple SD Gothic Neo','Malgun Gothic','Pretendard',sans-serif;
  color:var(--ink); line-height:1.55;
  background:linear-gradient(170deg,#fff3df 0%,#ffe6cf 45%,#ffd9c2 100%);
  background-attachment:fixed; min-height:100vh; padding:18px 14px 40px;
}
/* 귀여운 동글 폰트 — 제목·버튼·카드 타이틀에 (본문 풀이 글은 가독성 위해 기본폰트 유지) */
h1,.hero .speech,.hc-ttl,.frame-band,.btn-main,.btn-pay,.ttl,.rd-title,
.score-num,.day-date,.day-rank,.gh-who,.pkg-name,.mname,.dt-gj{
  font-family:var(--cute); font-weight:400; letter-spacing:0;
}
.wrap{ max-width:440px; margin:0 auto; }

/* ===== 마스코트 ===== */
.hero{ text-align:center; padding:8px 0 18px; }
.hero.small{ padding-bottom:6px; }
.mascot-wrap{ position:relative; display:inline-block; margin-bottom:6px; }
.mascot{
  width:130px; height:130px; border-radius:50%; object-fit:cover; object-position:center 32%;
  border:5px solid #fff; box-shadow:0 10px 24px rgba(240,130,0,.28);
}
.hero.small .mascot{ width:88px; height:88px; }
.mascot.tiny{ width:54px; height:54px; border-width:3px; }
.float{ animation:bob 3s ease-in-out infinite; }
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
.speech{
  position:absolute; top:6px; right:-70px; background:#fff; color:var(--brown);
  font-size:13px; font-weight:700; padding:9px 13px; border-radius:16px 16px 16px 4px;
  box-shadow:0 6px 16px rgba(0,0,0,.1); white-space:nowrap;
}
.speech::after{ content:''; position:absolute; left:-7px; bottom:8px;
  border:7px solid transparent; border-right-color:#fff; }

h1{ font-size:32px; color:var(--orange-d); letter-spacing:-1px; margin-top:4px;
  text-shadow:0 2px 0 #fff; }
.sub{ font-size:15px; color:#9a6b45; margin-top:6px; }
.hl{ background:linear-gradient(transparent 60%, #ffd27a 60%); font-weight:800; padding:0 3px; }
.inputline{ font-size:14px; color:#9a6b45; font-weight:700; margin-top:4px; }

/* ===== 카드 공통 ===== */
.card{
  background:#fff; border-radius:24px; padding:22px 18px; margin:16px 0;
  box-shadow:0 8px 26px rgba(200,120,40,.14); position:relative;
}
.ttl{ font-size:20px; color:var(--brown); margin-bottom:14px; display:flex;
  align-items:center; gap:8px; }
.sub-ttl{ font-size:15px; color:var(--orange-d); margin:18px 0 10px; font-weight:800; }
.free{ font-size:12px; background:#9be08a; color:#1c6b2e; padding:3px 9px; border-radius:20px; font-weight:800; }
.paidtag{ font-size:12px; background:#ffd27a; color:#8a5a00; padding:3px 9px; border-radius:20px; font-weight:800; }

/* ===== 사주 기둥 ===== */
.pillars{ display:flex; gap:8px; justify-content:center; }
.pillar{ flex:1; text-align:center; }
.pillar.me .han{ outline:3px solid var(--pink); outline-offset:1px; }
.pname{ font-size:12px; color:#a98; font-weight:700; margin-bottom:6px; min-height:30px; }
.pname em{ color:var(--pink); font-style:normal; font-size:11px; }
.han{ color:#fff; font-size:30px; font-weight:800; padding:10px 0; border-radius:12px;
  margin-bottom:5px; text-shadow:0 1px 3px rgba(0,0,0,.2); }
.kor{ font-size:12px; color:#8a6; color:#a98; font-weight:700; }

/* ===== 만세력 그리드 (사주아이형 깊은 만세력) ===== */
.manse{ display:flex; gap:6px; justify-content:center; }
.mcol{ flex:1; text-align:center; }
.mcol.me{ background:#fff4f8; border-radius:12px; padding:2px; }
.mcol.me .han.gan{ outline:3px solid var(--pink); outline-offset:1px; }
.mname{ font-size:12px; font-weight:800; color:#a98; margin-bottom:4px; }
.mname em{ color:var(--pink); font-style:normal; font-size:10px; }
.msip{ font-size:10.5px; font-weight:700; color:var(--orange-d); margin:2px 0; min-height:14px; }
.msip.top{ color:#b08; }
.manse .han{ font-size:27px; padding:8px 0; margin-bottom:3px; }
.mkor{ font-size:11px; color:#a98; font-weight:700; margin-top:1px; }
.msub{ font-size:10px; color:#9a8a7a; margin-top:3px; line-height:1.3; }
.msub .mlab{ display:block; font-size:8.5px; color:#c4b5a5; font-weight:700; }

/* ===== 일일운세 점수 게이지 ===== */
.score-wrap{ text-align:center; margin:6px 0 16px; }
.score-ring{ position:relative; width:130px; height:130px; border-radius:50%; margin:0 auto;
  background:conic-gradient(var(--orange) calc(var(--p)*1%), #ffe6cf 0);
  display:flex; align-items:center; justify-content:center; }
.score-ring::before{ content:''; position:absolute; top:13px; left:13px; width:104px; height:104px; border-radius:50%; background:#fff; }
.score-num{ position:relative; font-size:38px; font-weight:800; color:var(--orange-d); }
.score-num span{ font-size:15px; }
.score-ttl{ margin-top:8px; font-size:13px; color:#a98; font-weight:700; }
.cat-row{ display:flex; gap:10px; padding:9px 0; border-bottom:1px dashed #f0e0d0; font-size:13px; }
.cat-row:last-child{ border-bottom:0; }
.cat-lab{ flex:0 0 76px; font-weight:700; color:var(--orange-d); }
.cat-val{ flex:1; color:#7a5a40; line-height:1.45; }

/* ===== 택일 ===== */
.day-card{ display:flex; gap:12px; align-items:center; background:var(--cream);
  border-radius:14px; padding:13px; margin-bottom:10px; }
.day-card.best{ background:#fff3e6; border:2px solid var(--orange); }
.day-rank{ flex:0 0 40px; height:40px; border-radius:50%; background:var(--orange); color:#fff;
  font-weight:800; display:flex; align-items:center; justify-content:center; font-size:14px; }
.day-date{ font-size:16px; font-weight:800; color:var(--ink); }
.day-ganji{ font-size:12px; color:var(--orange-d); font-weight:700; margin-top:1px; }
.day-reason{ font-size:11.5px; color:#9a8a7a; margin-top:3px; }

/* ===== 대운 타임라인 ===== */
.daeun-tl{ display:flex; gap:6px; overflow-x:auto; padding:4px 0; }
.dt-item{ flex:0 0 auto; text-align:center; background:var(--cream); border-radius:11px; padding:8px 9px; min-width:52px; }
.dt-item.on{ background:var(--orange); color:#fff; }
.dt-age{ font-size:11px; font-weight:700; }
.dt-gj{ font-size:17px; font-weight:800; margin:2px 0; }
.dt-ss{ font-size:10px; opacity:.85; }
.dt-note{ font-size:11.5px; color:#a98; margin-top:8px; }

/* ===== 상담 채팅 ===== */
.chatlog{ display:flex; flex-direction:column; gap:10px; margin:14px 0; }
.chat-bot,.chat-me{ max-width:84%; padding:12px 14px; border-radius:16px; font-size:14px; line-height:1.55; white-space:pre-line; }
.chat-bot{ align-self:flex-start; background:#fff; border:1.5px solid #ffe0c2; color:var(--ink); border-bottom-left-radius:5px; }
.chat-me{ align-self:flex-end; background:var(--orange); color:#fff; border-bottom-right-radius:5px; }
.chat-bot b{ color:var(--orange-d); }
.chat-suggest{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px; }
.chat-suggest .sg{ background:#fff; border:1.5px solid #ffd9b3; color:var(--orange-d);
  border-radius:16px; padding:8px 13px; font-size:12.5px; font-weight:600; cursor:pointer; }
.chat-input{ display:flex; gap:8px; }
.chat-input input{ flex:1; }
.chat-input button{ flex:0 0 auto; background:var(--orange); color:#fff; border:0;
  border-radius:13px; padding:0 18px; font-weight:800; font-size:15px; cursor:pointer; }

/* ===== 카카오 로그인 ===== */
.kakao-btn{ display:flex; align-items:center; justify-content:center; gap:7px;
  font-family:'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  background:#FEE500; color:#191600; text-decoration:none; font-weight:700; font-size:15.5px;
  padding:14px; border-radius:12px; box-shadow:0 4px 12px rgba(250,225,0,.35); margin-bottom:14px; }
.kakao-btn:active{ transform:scale(.98); }
.kakao-ic{ display:flex; align-items:center; }
.or-line{ text-align:center; color:#bba; font-size:13px; margin:14px 0; position:relative; }
.or-line span{ background:transparent; padding:0 10px; }

/* ===== 홈 대분류 카드 ===== */
.bokju{ background:linear-gradient(135deg,#fff0d6,#ffe2bf); border:2px solid #ffd9a0;
  border-radius:18px; padding:14px 16px; margin:4px 0 14px; text-align:center;
  font-size:13.5px; color:#7a5a30; line-height:1.7; box-shadow:0 4px 12px rgba(255,170,60,.15); }
.bokju b{ color:var(--orange-d); }
.home-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:6px 0 4px; }
.home-card{ display:block; border-radius:20px; padding:18px 14px 16px; text-decoration:none;
  color:#fff; box-shadow:0 7px 18px rgba(255,140,50,.18); position:relative; min-height:120px; }
.home-card.wide{ grid-column:1 / -1; min-height:0; padding:16px; display:flex; align-items:center; gap:12px; text-align:left; }
.home-card.c-saju{ background:linear-gradient(135deg,#a98bff,#7d5bff); }
.home-card.c-gh{ background:linear-gradient(135deg,#ff9ec4,#ff6fa5); }
.home-card.c-daeun{ background:linear-gradient(135deg,#5ec8ff,#2f9bff); }
.home-card.c-year{ background:linear-gradient(135deg,#ffc36b,#ff9b3d); }
.home-card.c-today{ background:linear-gradient(135deg,#7ee0a8,#34c46f); }
.home-card.c-taekil{ background:linear-gradient(135deg,#ffd56b,#ffb03d); }
.home-card.c-chat{ background:linear-gradient(135deg,#b6a8ff,#8a7bff); }
.home-card.c-dream{ background:linear-gradient(135deg,#7c6fd6,#4b3f9e); }
.hc-emoji{ font-size:30px; }
.home-card.wide .hc-emoji{ font-size:34px; flex:0 0 auto; }
.hc-img{ width:66px; height:66px; object-fit:contain; display:block; margin:0 auto -2px;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.18)); }
.home-card.wide .hc-img{ width:62px; height:62px; margin:0; flex:0 0 auto; }
/* 호랑이 이미지 카드 (그림이 카드 전체) */
.home-card.has-img{ padding:0; background:none; min-height:0; overflow:hidden;
  border-radius:20px; box-shadow:0 6px 16px rgba(180,110,40,.20); }
.card-full{ width:100%; height:auto; display:block; }
.home-card.span2{ grid-column:1 / -1; }
.float-tag{ position:absolute; bottom:8px; right:8px; background:rgba(255,255,255,.92);
  color:var(--orange-d); box-shadow:0 2px 6px rgba(0,0,0,.15); }
.hc-ttl{ font-size:18px; font-weight:800; margin-top:6px; }
.hc-sub{ font-size:11.5px; opacity:.93; margin-top:3px; line-height:1.35; }
.hc-tag{ display:inline-block; margin-top:8px; background:rgba(255,255,255,.28);
  border-radius:8px; padding:2px 9px; font-size:11px; font-weight:700; }
.home-card.wide .hc-body{ flex:1; }
.home-card.wide .hc-ttl{ margin-top:0; }

/* ===== 궁합 ===== */
.gh-person{ background:#fff7ef; border:2px dashed #ffd09a; border-radius:16px; padding:12px 13px 2px; margin-bottom:14px; }
.gh-who{ font-size:15px; font-weight:800; color:var(--orange-d); margin:0 0 10px; }
.seg-row{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:4px; }
.gh-manse{ margin:6px 0; }
.gh-mlabel{ font-size:13px; font-weight:800; color:var(--brown); margin-bottom:5px; text-align:center; }
.gh-heart{ text-align:center; color:var(--pink); font-size:22px; margin:2px 0 8px; }
.entry-cards{ display:grid; grid-template-columns:1fr 1fr; gap:11px; margin:14px 0; }
.entry-card{ display:block; border-radius:18px; padding:20px 14px; text-align:center;
  text-decoration:none; color:#fff; box-shadow:0 6px 16px rgba(255,150,60,.18); }
.entry-card.saju{ background:linear-gradient(135deg,#ffb56b,#ff8a3d); }
.entry-card.gh{ background:linear-gradient(135deg,#ff9ec4,#ff6fa5); }
.entry-card .ec-emoji{ font-size:30px; }
.entry-card .ec-ttl{ font-size:18px; font-weight:800; margin-top:6px; }
.entry-card .ec-sub{ font-size:11.5px; opacity:.92; margin-top:3px; }

/* ===== 사주해설 틀 (대분류 박스) ===== */
.frame{ background:#fff; border:2px solid #ffd9b3; border-radius:20px;
  padding:0 13px 13px; margin:16px 0; box-shadow:0 6px 18px rgba(255,150,60,.12); overflow:hidden; }
.frame-band{ margin:0 -13px 4px; background:linear-gradient(135deg,var(--orange),var(--orange-d));
  color:#fff; font-size:17px; font-weight:800; text-align:center; padding:13px;
  letter-spacing:1px; text-shadow:0 1px 3px rgba(0,0,0,.18); }
.frame-sub{ text-align:center; font-size:12.5px; color:#a98; margin:8px 0 14px; }
.frame-sub b{ color:var(--orange-d); }

/* ===== 사주 감정 요약 ===== */
.gamjeong{ background:var(--cream); border-radius:14px; padding:10px 12px; margin-top:14px; }
.gj-row{ display:flex; gap:8px; padding:5px 0; border-bottom:1px dashed #efe2d4; font-size:12.5px; align-items:flex-start; }
.gj-row:last-child{ border-bottom:0; }
.gj-lab{ flex:0 0 72px; color:#a98; font-weight:700; }
.gj-val{ flex:1; color:#7a5a40; }
.gj-val b{ display:inline-block; background:#fff; border:1px solid #ffd9b3; color:var(--orange-d);
  border-radius:9px; padding:1px 7px; margin:1px 3px 1px 0; font-size:11.5px; font-weight:700; }

.ilgan-box{ background:var(--cream); border-radius:16px; padding:14px; margin-top:18px;
  font-size:14px; text-align:center; }
.ilgan-box b{ color:var(--orange-d); font-size:15px; }
.ilgan-box p{ margin-top:5px; color:#7a5a40; font-size:13.5px; }

/* ===== 오행 분포 ===== */
.ohaeng{ display:flex; gap:8px; align-items:flex-end; justify-content:center;
  height:90px; padding:0 6px; }
.oh-item{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; }
.oh-bar-wrap{ display:flex; align-items:flex-end; height:60px; }
.oh-bar{ width:26px; border-radius:8px 8px 0 0; transition:height .4s; min-height:6px; }
.oh-label{ font-size:12px; font-weight:700; text-align:center; margin-top:5px; }
.oh-label b{ font-size:14px; }
.empty-note{ font-size:13px; color:#9a6b45; text-align:center; margin-top:12px;
  background:var(--cream); padding:9px; border-radius:12px; }

/* ===== 결제 게이트 ===== */
.locked{ overflow:hidden; }
.blur-preview{ filter:blur(5px); opacity:.5; pointer-events:none; }
.blur-preview p{ color:#888; font-size:14px; margin:8px 0; }
.fake-line{ height:12px; background:#eee; border-radius:6px; margin:9px 0; }
.fake-line.short{ width:60%; }
.lock-overlay{ position:absolute; inset:0; background:rgba(255,255,255,.78);
  backdrop-filter:blur(2px); display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:20px; }
.lock-title{ font-size:19px; font-weight:800; color:var(--brown); margin:8px 0 4px; }
.lock-desc{ font-size:14px; color:#9a6b45; margin-bottom:16px; }
.lock-note{ font-size:12px; color:#b09; color:#bba; margin-top:10px; }

/* ===== 버튼 ===== */
.btn-main,.btn-pay{
  width:100%; border:none; cursor:pointer; font-weight:800; color:#fff;
  border-radius:16px; padding:16px; font-size:17px; margin-top:8px;
  background:linear-gradient(135deg,#ffb04d,#ff8a00);
  box-shadow:0 8px 18px rgba(255,138,0,.36); transition:transform .12s;
}
.btn-main:active,.btn-pay:active{ transform:scale(.97); }
.btn-pay{ background:linear-gradient(135deg,#ff8aa6,#ff5c86);
  box-shadow:0 8px 18px rgba(255,92,134,.4); }
.note{ text-align:center; font-size:12px; color:#b39; color:#b8a; margin-top:10px; }
.btn-again{ display:block; text-align:center; text-decoration:none; color:var(--orange-d);
  font-weight:800; background:#fff; border-radius:16px; padding:14px; margin:6px 0;
  box-shadow:0 4px 14px rgba(200,120,40,.12); }

/* ===== 폼 ===== */
.form .field{ display:block; margin-bottom:16px; }
.field>span{ display:block; font-size:14px; font-weight:700; color:var(--brown); margin-bottom:7px; }
.field em{ color:#bba; font-style:normal; font-weight:500; font-size:12px; }
input[type=text],input[type=number],select{
  width:100%; border:2px solid #ffe0c2; border-radius:13px; padding:13px;
  font-size:16px; background:var(--cream); color:var(--ink); outline:none;
}
input:focus,select:focus{ border-color:var(--orange); }
select{ appearance:none; -webkit-appearance:none; }
.situ-box{ background:#fff7ef; border:2px dashed #ffd09a; border-radius:16px;
  padding:14px 14px 2px; margin-bottom:18px; }
.situ-head{ font-size:13px; color:var(--brown); margin:0 0 12px; line-height:1.5; }
.situ-head b{ color:var(--orange-d); }
.situ-head em{ color:#bba; font-style:normal; font-size:12px; }
.time-hint{ font-size:12.5px; color:var(--orange-d); background:#fff4e6; border-radius:10px;
  padding:8px 11px; margin:0 0 8px; line-height:1.5; }
.time-hint b{ color:var(--orange-d); }
.row3{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:8px; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.seg{ display:flex; gap:8px; }
.seg label{ flex:1; position:relative; cursor:pointer; }
.seg input{ position:absolute; opacity:0; }
.seg span{ display:block; text-align:center; padding:12px; border-radius:13px;
  border:2px solid #ffe0c2; background:var(--cream); font-weight:700; font-size:15px; }
.seg input:checked + span{ background:var(--orange); color:#fff; border-color:var(--orange); }

/* ===== 십성/신살/대운 ===== */
.ss-row{ border-bottom:1px dashed #f0e0d0; padding:10px 0; }
.ss-pin{ display:inline-block; font-size:13px; font-weight:800; color:var(--orange-d);
  background:var(--cream); padding:3px 10px; border-radius:20px; margin-bottom:6px; }
.ss-line{ font-size:13.5px; color:#6a4a32; margin:3px 0; }
.ss-line b{ color:var(--brown); }
.ss-line em{ color:#bba; font-style:normal; font-size:12px; }
.strength{ background:var(--cream); border-radius:14px; padding:14px; font-size:14px; }
.strength .badge{ display:inline-block; background:var(--orange); color:#fff;
  font-weight:800; padding:4px 14px; border-radius:20px; margin-right:8px; }
.strength p{ margin-top:8px; color:#7a5a40; font-size:13.5px; }
.sinsal{ list-style:none; }
.sinsal li{ font-size:13.5px; padding:8px 0; border-bottom:1px dashed #f0e0d0; color:#6a4a32; }
.sinsal b{ color:var(--orange-d); }
.daeun{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.daeun-item{ background:var(--cream); border-radius:14px; padding:10px; text-align:center; }
.da-age{ font-size:12px; color:#a98; font-weight:700; }
.da-ganji{ font-size:22px; font-weight:800; color:var(--brown); margin:3px 0; }
.da-ss{ font-size:11px; color:var(--orange-d); font-weight:700; }
.next-up{ background:linear-gradient(135deg,#fff0d6,#ffe2c2); border-radius:14px;
  padding:14px; font-size:13.5px; text-align:center; color:#8a5a30; margin-top:18px; }
.next-up b{ color:var(--orange-d); }

/* ===== 영역별 운세 카드 ===== */
.cat-card{ background:var(--cream); border-radius:14px; padding:13px 14px; margin:9px 0; }
.cat-card.sm{ padding:11px 13px; }
.cat-head{ font-size:15px; font-weight:800; color:var(--brown); margin-bottom:5px;
  display:flex; align-items:center; gap:7px; }
.cat-card p{ font-size:13.5px; color:#6a4a32; line-height:1.5; }
.lvl{ font-size:11px; padding:2px 9px; border-radius:20px; font-weight:800; }
.lvl-강함{ background:#ffd27a; color:#8a5a00; }
.lvl-보통{ background:#cde8c0; color:#3d7a2a; }
.lvl-약함,.lvl-주의{ background:#ffc9c9; color:#b34; }
.lvl-양호{ background:#cde8c0; color:#3d7a2a; }

.yganji{ font-size:14px; color:var(--orange-d); font-weight:800; }
.year-summary{ background:linear-gradient(135deg,#fff0d6,#ffe2c2); border-radius:14px;
  padding:12px 14px; font-size:14px; color:#8a5a30; margin-bottom:10px; text-align:center; }
.year-summary b{ color:var(--orange-d); }

/* 오늘의 운세 */
.today{ display:flex; align-items:center; gap:14px; background:var(--cream);
  border-radius:16px; padding:16px; }
.today-score{ flex-shrink:0; width:78px; height:78px; border-radius:50%;
  background:conic-gradient(var(--orange) calc(var(--s,70)*1%), #ffe6cf 0);
  display:flex; align-items:baseline; justify-content:center; }
.score-num{ font-size:26px; font-weight:900; color:var(--orange-d); }
.score-max{ font-size:12px; color:#a98; }
.today-body{ font-size:14px; color:#6a4a32; }
.today-cats{ margin-top:10px; display:flex; flex-direction:column; gap:7px; }
.today-cats div{ font-size:13px; color:#6a4a32; background:#fff7ee;
  border-radius:10px; padding:9px 11px; border:1px solid #ffe6cf; }

/* 연도별 운세 (가로 스크롤) */
.sewoon-list{ display:flex; gap:8px; overflow-x:auto; padding:4px 2px 10px; }
.sw-item{ flex:0 0 92px; background:var(--cream); border-radius:14px; padding:11px 8px;
  text-align:center; }
.sw-item.now{ background:linear-gradient(135deg,#ffd27a,#ffb04d); }
.sw-year{ font-size:12px; font-weight:700; color:#8a6; color:#a98; }
.sw-item.now .sw-year{ color:#8a5a00; }
.sw-year em{ display:block; font-style:normal; font-size:10px; }
.sw-ganji{ font-size:22px; font-weight:800; color:var(--brown); margin:3px 0; }
.sw-tag{ font-size:10.5px; color:#9a6b45; line-height:1.3; }

/* 월별 운세 */
.wol-list{ display:flex; flex-direction:column; gap:6px; }
.wol-item{ display:grid; grid-template-columns:84px 42px 1fr; align-items:center; gap:8px;
  background:var(--cream); border-radius:12px; padding:9px 12px; font-size:13px; }
.wol-label{ font-weight:700; color:var(--brown); }
.wol-ganji{ font-size:17px; font-weight:800; color:var(--orange-d); text-align:center; }
.wol-flavor{ font-size:12.5px; color:#7a5a40; }
.divider{ border:none; border-top:2px dashed #ffe0c2; margin:22px 0 4px; }

/* ===== 로딩 오버레이 ===== */
#loading{ position:fixed; inset:0; z-index:99; background:linear-gradient(170deg,#fff3df,#ffd9c2);
  display:none; flex-direction:column; align-items:center; justify-content:center; }
#loading.on{ display:flex; }
#loading img{ width:130px; height:130px; border-radius:50%; object-fit:cover;
  object-position:center 32%; border:5px solid #fff; box-shadow:0 10px 24px rgba(240,130,0,.3);
  animation:wob 1.1s ease-in-out infinite; }
@keyframes wob{ 0%,100%{transform:rotate(-6deg) translateY(0)} 50%{transform:rotate(6deg) translateY(-10px)} }
#loading .ld-msg{ margin-top:22px; font-size:16px; font-weight:800; color:var(--brown);
  min-height:24px; text-align:center; }
#loading .ld-dots{ margin-top:8px; color:var(--orange); font-size:22px; letter-spacing:3px;
  animation:blink 1.2s infinite; }
@keyframes blink{ 0%,100%{opacity:.3} 50%{opacity:1} }

/* ===== 잔액 바 ===== */
.wallet-bar{ display:flex; justify-content:space-between; align-items:center;
  background:#fff; border-radius:16px; padding:12px 16px; margin:14px 0;
  box-shadow:0 4px 14px rgba(200,120,40,.12); font-size:15px; font-weight:700; color:var(--brown); }
.wallet-bar b{ color:var(--orange-d); font-size:18px; }
.btn-charge-sm{ border:none; background:linear-gradient(135deg,#ffb04d,#ff8a00); color:#fff;
  font-weight:800; border-radius:20px; padding:8px 18px; font-size:14px; cursor:pointer; }

/* ===== AI 해석 ===== */
.muted{ font-size:12px; color:#bba; font-weight:700; }
.ai-free .reading{ background:var(--cream); border-radius:16px; padding:16px; }
.rd-title{ font-size:17px; color:var(--orange-d); font-weight:800; margin-bottom:9px; line-height:1.4; }
.rd-body{ font-size:14.5px; color:#5a4030; line-height:1.72; }
.more-hook{ text-align:center; font-size:13.5px; color:#9a6b45; margin-top:14px; }
.more-hook b{ color:var(--orange-d); }

/* ===== 유료 항목 ===== */
.sec-item{ border:2px solid #ffe6cf; border-radius:14px; margin:9px 0; overflow:hidden; transition:border-color .2s; }
.sec-item.loaded{ border-color:#ffd27a; }
.sec-head{ width:100%; border:none; background:#fff6ea; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; padding:15px 16px; }
.sec-label{ font-size:15.5px; font-weight:800; color:var(--brown); }
.prem{ font-size:10px; background:#ffd27a; color:#8a5a00; padding:2px 7px; border-radius:10px; margin-left:5px; vertical-align:middle; }
.sec-price{ font-size:13px; font-weight:800; color:var(--orange-d); background:#fff; padding:5px 11px; border-radius:20px; white-space:nowrap; }
.sec-item.loaded .sec-price{ display:none; }
.sec-item.loaded .sec-head::after{ content:'✓ 열림'; font-size:12px; color:#3d9a4a; font-weight:800; }
.sec-body{ padding:4px 16px 18px; }
.sec-body .rd-title{ font-size:16px; margin-top:8px; }

/* ===== 충전 모달 ===== */
.modal{ position:fixed; inset:0; z-index:80; background:rgba(60,40,20,.45);
  display:none; align-items:flex-end; justify-content:center; }
.modal.on{ display:flex; }
.modal-box{ background:#fff; border-radius:22px 22px 0 0; width:100%; max-width:440px;
  padding:20px 18px 28px; animation:slideup .25s ease; }
@keyframes slideup{ from{transform:translateY(40px);opacity:.6} to{transform:none;opacity:1} }
.modal-top{ display:flex; justify-content:space-between; align-items:center; font-size:18px; color:var(--brown); margin-bottom:14px; }
.modal-top .x{ cursor:pointer; color:#bba; font-size:18px; }
/* 충전 메뉴판 보드(사주아이 스타일 재현 — 숫자는 코드 출력값이라 절대 안 틀림) */
.charge-board{ background:linear-gradient(135deg,#FFF6E0,#FFE7B0); border:2px dashed #F0A93B;
  border-radius:18px; padding:14px 12px 13px; margin:2px 0 15px; text-align:center; }
.cb-title{ font-family:'Jua',sans-serif; color:#E8870E; font-size:18px; letter-spacing:2px; margin-bottom:12px; }
.cb-coins{ display:flex; gap:7px; justify-content:center; align-items:center; }
.cb-coin{ flex:1; max-width:126px; background:#fff; border-radius:16px; padding:12px 6px 10px;
  box-shadow:0 3px 9px rgba(240,169,59,.20); display:flex; flex-direction:column; align-items:center; gap:3px; }
.cb-coin .cb-emoji{ font-size:34px; line-height:1.05; }
.cb-coin b{ font-family:'Jua',sans-serif; color:#7a5230; font-size:15px; }
.cb-coin .cb-won{ font-family:'Jua',sans-serif; font-size:20px; color:#E8870E; }
.cb-coin.gogi{ background:#FFEFF4; }
.cb-coin.heung{ background:#FFF6E2; }
/* 어흥 코인 = 호랭이 캐릭터 그림(이미지) */
.cb-coin.heung .cb-emoji{ font-size:0; width:50px; height:42px;
  background:url(cards/tiger.png) center/contain no-repeat; }
.cb-swap{ flex:0 0 auto; font-size:20px; color:#F0A93B; font-weight:900; }
.cb-note{ margin-top:12px; font-size:12.5px; color:#9a7b53; font-family:'Gaegu',sans-serif;
  background:#fff; border:1.5px dashed #EFC988; border-radius:12px; padding:7px 6px; }
/* 상단 충전 탭 */
.nav-charge{ cursor:pointer; color:var(--orange-d)!important; font-weight:800;
  background:#fff3e0; border-radius:11px; padding:3px 10px!important; }
.nav-charge b{ color:var(--brown); }
.pkg{ width:100%; border:2px solid #ffe6cf; background:var(--cream); border-radius:16px;
  display:flex; align-items:center; gap:9px; padding:12px 14px;
  margin-bottom:9px; cursor:pointer; text-align:left; }
.pkg::before{ content:""; width:36px; height:32px; flex:0 0 auto;
  background:url(cards/tiger.png) center/contain no-repeat; }
.pkg.best{ border-color:var(--orange); background:linear-gradient(135deg,#fff0d6,#ffe2c2); }
.pkg-name{ flex:1; font-size:14.5px; font-weight:800; color:var(--brown); line-height:1.55; }
.pkg-name em{ display:inline-block; font-style:normal; font-size:10.5px; color:#fff; background:var(--orange);
  border-radius:8px; padding:1px 7px; margin-left:4px; font-weight:700; }
.pkg.best .pkg-name em{ background:#5b9be0; }
.pkg-right{ font-size:13px; color:#b06a2a; white-space:nowrap; text-align:right; font-weight:700; }
.pkg-right b{ color:var(--orange-d); font-family:'Jua',sans-serif; font-size:18px; margin-left:3px; }
.modal-note{ text-align:center; font-size:11.5px; color:#bba; margin-top:8px; }

/* ===== 로그인/네비 ===== */
.flash{ background:#ffe2e2; color:#c0392b; border-radius:12px; padding:11px 14px;
  text-align:center; font-size:14px; margin:10px 0; font-weight:600; }
.switch-line{ text-align:center; font-size:14px; color:#9a6b45; margin:16px 0; }
.switch-line a{ color:var(--orange-d); font-weight:800; text-decoration:none; }
.topnav{ display:flex; justify-content:flex-end; gap:16px; padding:2px 4px 0; }
.topnav a{ font-size:13px; color:var(--orange-d); font-weight:700; text-decoration:none; }

/* ===== 법적 페이지 ===== */
.legal-nav{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:10px 0; }
.legal-nav a{ font-size:13px; background:#fff; color:var(--orange-d); font-weight:700;
  text-decoration:none; padding:7px 14px; border-radius:20px; box-shadow:0 3px 10px rgba(200,120,40,.1); }
.legal p{ font-size:13.5px; color:#5a4030; line-height:1.7; margin:10px 0; }
.legal b{ color:var(--brown); }
.legal-edit{ background:#fff3df; border-radius:10px; padding:9px 12px; font-size:12.5px !important;
  color:#b5791f !important; }
.foot a{ color:var(--orange-d); font-weight:700; text-decoration:none; }

.foot{ text-align:center; font-size:12px; color:#bba; margin-top:20px; line-height:1.8; }