@font-face{font-family:P;src:url(../fonts/Pretendard-Bold.woff2) format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:P;src:url(../fonts/Pretendard-ExtraBold.woff2) format('woff2');font-weight:800 900;font-display:swap}
:root{
  --bg:#1c1226;--bg2:#2a1b38;--card:#33224a;--line:#4a3566;
  --gold:#e7b75f;--gold2:#f6d58e;--txt:#f4ecf8;--sub:#bfaed0;--red:#ff7a6b;
  --r:20px;--rs:12px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{background:var(--bg);color:var(--txt);font-family:P,system-ui,sans-serif;font-weight:700}
body{min-height:100dvh;background:radial-gradient(120% 60% at 50% 0%,#3a2352 0%,var(--bg) 60%) fixed}
#app{max-width:480px;margin:0 auto;min-height:100dvh;position:relative}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
.screen{display:none;padding:0 20px 40px;min-height:100dvh;animation:fade .35s ease}
.screen.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* 첫 화면 */
#s-intro{padding:0 0 40px}
.hero{position:relative;height:56dvh;min-height:340px;overflow:hidden}
.hero-img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.hero-img.noimg{visibility:hidden}
.hero-fade{position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(transparent,var(--bg))}
.intro-body{padding:0 20px;margin-top:-70px;position:relative}
.eyebrow{color:var(--gold);font-size:13px;letter-spacing:.08em}
.title{font-size:34px;font-weight:900;line-height:1.15;margin:6px 0 16px}
.title span{color:var(--gold2);font-size:44px}
.fine{color:var(--sub);font-size:12px;text-align:center;margin-top:14px;line-height:1.6;font-weight:400}

/* 말풍선 */
.bubble{background:#fff8ee;color:#2b1d12;border-radius:var(--r);padding:14px 16px;font-size:16px;line-height:1.55;position:relative;min-height:24px}
.bubble.big{font-size:17px;margin-bottom:18px}
.bubble.big:before{content:"";position:absolute;top:-8px;left:28px;border:8px solid transparent;border-top:0;border-bottom-color:#fff8ee}
.face-row{display:flex;gap:10px;align-items:flex-start;margin:6px 0 18px}
.face{width:54px;height:54px;border-radius:50%;object-fit:cover;object-position:50% 15%;border:2px solid var(--gold);flex:none}
.face-row .bubble{flex:1;border-top-left-radius:4px}

/* 버튼 */
.btn{display:block;width:100%;padding:16px;border-radius:var(--rs);background:var(--card);border:1px solid var(--line);font-size:17px;margin-top:10px;transition:transform .1s}
.btn:active{transform:scale(.98)}
.btn.gold{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#2b1608;border:0;font-weight:900;box-shadow:0 6px 20px #e7b75f40}
.btn.ghost{background:transparent}

/* 상단 */
.top{display:flex;align-items:center;gap:8px;height:56px;font-size:18px}
.back{font-size:30px;width:36px;height:40px;line-height:36px;color:var(--sub)}

/* 고민 */
.topics{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.topic{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 14px;text-align:left;min-height:120px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;transition:transform .1s,border-color .2s}
.topic:active{transform:scale(.97);border-color:var(--gold)}
.topic b{font-size:20px;color:var(--gold2)}
.topic small{font-size:13px;color:var(--sub);font-weight:400}

/* 카드 덱 */
.deck{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:6px 0 4px;perspective:800px}
.dc{aspect-ratio:500/860;border-radius:7px;background:linear-gradient(135deg,#5b3a86,#2c1a45);border:1px solid var(--gold);box-shadow:0 3px 8px #0008;overflow:hidden;position:relative;transition:transform .25s,opacity .3s;animation:deal .45s backwards}
.dc img{width:100%;height:100%;object-fit:cover;display:block}
.dc:active{transform:translateY(-6px)}
.dc.picked{transform:translateY(-14px) scale(1.12);z-index:2;box-shadow:0 0 0 2px var(--gold2),0 10px 24px #000a}
.dc.dim{opacity:.25}
@keyframes deal{from{opacity:0;transform:translateY(-30px) rotate(-8deg)}}
.deck.shuffle .dc{animation:shuf .6s}
@keyframes shuf{30%{transform:translateX(var(--sx)) rotate(var(--sr))}}

/* 결과 카드 뒤집기 */
.flip-wrap{perspective:1200px;width:58%;max-width:230px;margin:6px auto 14px}
.flip{position:relative;aspect-ratio:500/860;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.3,1.3,.5,1)}
.flip.open{transform:rotateY(180deg)}
.flip>div{position:absolute;inset:0;backface-visibility:hidden;border-radius:14px;overflow:hidden;border:2px solid var(--gold);box-shadow:0 14px 40px #000b;background:linear-gradient(135deg,#5b3a86,#2c1a45)}
.flip-back img,.flip-front img{width:100%;height:100%;object-fit:cover;display:block}
.flip-front{transform:rotateY(180deg)}
.flip-front.rev img,.flip-front.rev .noart{transform:rotate(180deg)}
.noart{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:linear-gradient(160deg,#f7ead2,#e2c995);color:#3a2410}
.noart b{font-size:40px}
.noart span{font-size:20px}
.card-name{text-align:center;font-size:24px;font-weight:900;color:var(--gold2)}
.card-name small{display:block;font-size:13px;color:var(--sub);font-weight:400;margin-top:2px}
.kw{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin:10px 0 18px}
.kw span{font-size:13px;padding:5px 10px;border-radius:99px;background:#ffffff14;color:var(--sub)}

/* 할멈 말 */
.talk{display:flex;flex-direction:column;gap:10px}
.say{display:flex;gap:10px;align-items:flex-start;animation:fade .4s ease}
.say .bubble{flex:1;border-top-left-radius:4px}
.say .face{width:42px;height:42px}
.say.hit .bubble{background:#fff;font-size:18px;font-weight:900;border-left:5px solid var(--red)}
.say.tip .bubble{background:#fff;border-left:5px solid var(--gold)}
.say .lab{display:block;font-size:12px;color:#8a6a4a;margin-bottom:4px;font-weight:400}
.typing .bubble{width:70px;flex:none}
.typing i{display:inline-block;width:7px;height:7px;margin:0 2px;border-radius:50%;background:#b39a80;animation:dot 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{opacity:.2;transform:translateY(-3px)}}
.after{display:none;margin-top:20px}
.after.on{display:block;animation:fade .4s}
.cross{display:flex;gap:12px;align-items:center;margin-top:18px;padding:14px;border-radius:var(--r);background:#eaf1ec;color:#1d2a20;text-decoration:none}
.cross img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none}
.cross b{display:block;font-size:15px}
.cross small{font-size:12px;color:#4a5a4e;font-weight:400}

/* 내 기록: 도장·오늘의 카드·도감·생일 카드 (11/11) */
.mybox{margin-top:14px}
.stamp{background:#ffffff0d;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:10px}
.st-head{font-size:15px;color:var(--sub);margin-bottom:10px}
.st-head b{color:var(--gold2);font-size:18px}
.st-row{display:flex;justify-content:space-between}
.st-row span{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;color:var(--sub);font-weight:400}
.st-row i{width:34px;height:34px;border-radius:50%;border:1.5px dashed var(--line);display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:900;font-size:15px}
.st-row .on i{border:2px solid var(--red);color:var(--red);background:#ff7a6b1a;transform:rotate(-12deg)}
.today-mini{display:flex;gap:12px;align-items:center;background:var(--card);border-radius:var(--rs);padding:10px;margin-bottom:4px}
.today-mini img{width:44px;border-radius:4px}
.today-mini img.rev,.bday-card img.rev{transform:rotate(180deg)}
.today-mini span{font-size:13px;color:var(--sub);font-weight:400}
.today-mini b{display:block;font-size:17px;color:var(--gold2);font-weight:900}
.book-count{text-align:center;color:var(--gold2);margin:6px 0 12px}
.book{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.bk{text-align:center}
.bk img{width:100%;aspect-ratio:500/860;object-fit:cover;border-radius:6px;opacity:.35;filter:grayscale(.6)}
.bk.on img{opacity:1;filter:none;box-shadow:0 0 0 1.5px var(--gold)}
.bk small{display:block;font-size:11px;color:var(--sub);margin-top:3px;font-weight:400}
.bday{margin-top:22px;background:var(--card);border-radius:var(--r);padding:16px}
.bday>b{font-size:18px;color:var(--gold2)}
.bday>small{display:block;font-size:12px;color:var(--sub);margin:4px 0 10px;font-weight:400}
.bday-row{display:flex;gap:8px}
.bday-row input{flex:1;min-width:0;border-radius:var(--rs);border:1px solid var(--line);background:#fff;color:#222;font:inherit;font-size:17px;padding:12px}
.bday-row .btn{width:auto;margin:0;padding:12px 18px}
.bday-card{display:flex;gap:12px;margin-top:14px}
.bday-card img{width:96px;border-radius:6px;flex:none}
.bday-card b{font-size:20px;color:var(--gold2)}
.bday-card small{display:block;font-size:12px;color:var(--sub);font-weight:400}
.bday-card p{font-size:14px;line-height:1.6;margin-top:6px;font-weight:400}

/* 2판(11/11): 장 수 고르기·3장 펼침·부적·매장 칸 */
.mode{display:flex;gap:6px;background:#ffffff0d;border:1px solid var(--line);border-radius:99px;padding:4px;margin-bottom:12px}
.mode button{flex:1;padding:10px 6px;border-radius:99px;font-size:15px;color:var(--sub)}
.mode button.on{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#2b1608;font-weight:900}
.slots{display:flex;gap:6px;margin:0 0 10px}
.slots span{flex:1;text-align:center;padding:8px 0;border-radius:var(--rs);border:1.5px dashed var(--line);font-size:14px;color:var(--sub)}
.slots span.on{border:1.5px solid var(--gold);color:var(--gold2);background:#e7b75f14}
.dc[data-n]:after{content:attr(data-n);position:absolute;left:0;right:0;bottom:4px;font-size:10px;font-weight:900;color:#2b1608;background:var(--gold2);padding:1px 0}
.sp-row{display:flex;gap:10px;margin:6px 0 16px;perspective:1000px}
.sp{flex:1;text-align:center;min-width:0}
.sp .flip>div{border-radius:9px;border-width:1.5px}
.sp>b{display:block;color:var(--gold);font-size:14px;margin-top:8px}
.sp>small{display:block;color:var(--gold2);font-size:13px;min-height:18px;font-weight:900}
.store-head{margin:22px 0 8px;color:var(--sub);font-size:13px;text-align:center}
.store{display:flex;flex-direction:column;gap:10px}
.shop{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.shop>b{font-size:17px;color:var(--gold2);display:flex;align-items:baseline;gap:8px}
.shop>b small{font-size:12px;color:var(--sub);font-weight:400}
.shop>p{font-size:13px;color:var(--sub);line-height:1.6;margin:6px 0;font-weight:400}
.shop a{font-size:13px;color:var(--gold)}
.perk{background:#fff8ee;color:#2b1d12;border-radius:var(--rs);padding:12px;margin:8px 0;border:2px dashed var(--red)}
.perk span{font-size:11px;color:#fff;background:var(--red);padding:2px 8px;border-radius:99px}
.perk b{display:block;font-size:17px;margin:6px 0 2px}
.perk p{font-size:14px;font-weight:400}
.perk small{display:block;font-size:11px;color:#7a5a40;margin-top:6px;font-weight:400}
/* 11/11 장사·사업 = 다섯째 주제(한 줄 다 씀), 올해의 카드 */
.topic[data-topic=biz]{grid-column:1/-1;min-height:90px}
#go-year{margin-top:10px}
.yr-form{background:var(--card);border-radius:var(--r);padding:18px 16px;text-align:center}
.yr-form>b{display:block;font-size:20px;color:var(--gold2);margin-bottom:12px}
.yr-row{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:6px}
.yr-row select{font:inherit;font-size:22px;font-weight:800;padding:10px 12px;border-radius:var(--rs);border:1px solid var(--line);background:#fff;color:#222;min-width:84px}
.yr-row span{font-size:20px;color:var(--gold2)}
.yr-form>small{display:block;font-size:13px;color:var(--sub);line-height:1.6;margin-top:10px;font-weight:400;text-align:left}
.yr-card{display:block;width:62%;max-width:280px;margin:4px auto 12px;border-radius:10px;box-shadow:0 14px 40px #000b}
#yr-out .card-name{margin-bottom:14px}
.yr-next{text-align:center;color:var(--gold2);font-size:15px;line-height:1.6;margin:16px 0 4px}
.bj-img{display:block;width:94%;max-width:430px;margin:6px auto 8px;border-radius:12px;box-shadow:0 14px 40px #000b}
#s-bujeok .top b{color:var(--gold2)}

.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);background:#000c;color:#fff;padding:10px 18px;border-radius:99px;font-size:14px;opacity:0;transition:.3s;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}