/* =========================================================
 * 첫 방문 인트로 (intro.js)
 * ========================================================= */
html.intro-open, html.intro-open body { overflow: hidden; }
.intro {
  position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column;
  background: radial-gradient(ellipse at 50% 38%, #3b2415 0%, #1a110b 55%, #0a0706 100%);
  color: #f6ecd9; opacity: 0; transition: opacity .45s ease; outline: none;
  -webkit-tap-highlight-color: transparent; user-select: none; cursor: pointer;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
.intro.in { opacity: 1; }
.intro.out { opacity: 0; }
.intro-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.smoke { position: absolute; bottom: 30%; width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,240,220,.10), transparent 70%); filter: blur(10px);
  animation: smoke 9s linear infinite; }
.smoke.s1 { left: 8%; }
.smoke.s2 { right: 6%; animation-delay: -3s; }
.smoke.s3 { left: 40%; animation-delay: -6s; }
@keyframes smoke { from { transform: translateY(60px) scale(.6); opacity: 0; } 30% { opacity: .9; } to { transform: translateY(-420px) scale(1.6); opacity: 0; } }

.intro-top { position: relative; z-index: 2; display: flex; justify-content: space-between; padding: 14px 16px; max-width: 520px; width: 100%; margin: 0 auto; }
.intro-top button { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); color: #f6ecd9; border-radius: 999px; padding: 7px 14px; font-size: 14px; }
.intro-top .intro-mute { width: 40px; padding: 7px 0; }

/* 무대 */
.intro-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: flex-end; justify-content: center; max-width: 520px; width: 100%; margin: 0 auto; overflow: hidden; animation: camSway 9s ease-in-out infinite; }
@keyframes camSway { 0%, 100% { transform: translateX(-7px); } 50% { transform: translateX(7px); } }
.ss-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center -15%; z-index: 0; }
.shaman { position: relative; z-index: 1; height: min(68vh, 720px); max-height: 100%; width: auto; aspect-ratio: 768 / 1376; transform-origin: 50% 100%; animation: sway 6s ease-in-out infinite; transition: opacity .6s ease; }
.shaman img, .shaman video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.ss-desk { transform: translateY(35%) scale(1.8); transform-origin: 50% 20%; }
@keyframes sway { 50% { transform: rotate(-.5deg) translateY(-2px); } }
.ss-char {
    transition: filter .25s;
    scale: 1.5;
    transform-origin: 50% 30%;
}
.ss-char.talking { animation: talkGlow .5s ease-in-out infinite alternate; }
@keyframes talkGlow { to { filter: brightness(1.12) drop-shadow(0 0 18px rgba(255,207,122,.5)); } }
.ss-char.shake { animation: shakeX .12s linear 5 alternate; }
@keyframes shakeX { from { translate: -3px 0; } to { translate: 3px 0; } }

/* 엽전 */
.coins { position: absolute; left: 0; right: 0; bottom: 90px; height: 70px; display: flex; justify-content: center; align-items: flex-end; perspective: 700px; pointer-events: none; z-index: 2; }
.coin { position: absolute; bottom: 0; width: 96px; height: 96px; transform-style: preserve-3d; opacity: 0; transform: translateY(20px); transition: opacity .4s, transform .4s; }
.coins.ready .coin { opacity: 1; transform: translate(calc((var(--i) - 1) * 44px), 0); }
.coin .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 50%; box-shadow: 0 3px 6px rgba(0,0,0,.4); }
.coin .face img { width: 100%; height: 100%; display: block; object-fit: contain; }
.coin .back { transform: rotateX(180deg); }
.coin.is-front .front, .coin.is-back .back { box-shadow: 0 0 2.8px rgba(255,180,40,.95); }
.intro.await-toss .coins.ready .coin { animation: bob 1.2s ease-in-out infinite; }
.intro.await-toss .coins.ready .coin:nth-child(2) { animation-delay: .15s; }
.intro.await-toss .coins.ready .coin:nth-child(3) { animation-delay: .3s; }
@keyframes bob { 50% { translate: 0 -8px; } }
.coin-result { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; text-align: center; font-family: var(--serif); font-weight: 700; letter-spacing: .3em; color: #ffd27a; opacity: 0; transform: translateY(6px); transition: .4s; font-size: 20px; }
.coin-result.show { opacity: 1; transform: none; }

/* 대화창 */
.intro-talk { position: relative; z-index: 3; padding: 12px 16px 18px; max-width: 520px; width: 100%; margin: 0 auto; max-height: 46vh; overflow-y: auto; flex-shrink: 0; }
.talk-box { position: relative; background: rgba(20,13,9,.86); border: 1.5px solid #8a6a3a; border-radius: 16px; padding: 22px 18px 18px; min-height: 108px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 0 0 4px rgba(138,106,58,.18); }
.talk-name { position: absolute; top: -13px; left: 16px; background: linear-gradient(135deg, #9b2335, #6d1424); color: #fff3dc; font-family: var(--serif); font-weight: 700; font-size: 13px; padding: 3px 12px; border-radius: 999px; border: 1px solid #c9a15d; }
.talk-text { margin: 0; font-family: var(--serif); font-size: 17px; line-height: 1.65; color: #fbf1de; min-height: 3.3em; white-space: pre-line; }
.talk-next { position: absolute; right: 14px; bottom: 8px; font-size: 12px; color: #d6b476; animation: nudge 1s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(3px); opacity: .5; } }
.intro.await-toss .intro-stage::after { content: "👆 화면을 터치하세요"; position: absolute; left: 0; right: 0; bottom: 20px; z-index: 2; text-align: center; font-size: 19px; font-weight: 700; color: #ffd27a; animation: nudge 1s ease-in-out infinite; }
.talk-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.talk-choices:empty { display: none; }
.talk-choice { flex: 1 1 calc(50% - 8px); background: rgba(255,244,222,.08); color: #fbf1de; border: 1px solid #8a6a3a; border-radius: 12px; padding: 12px 10px; font-size: 15px; font-weight: 600;
  opacity: 0; animation: choiceIn .35s ease forwards; transition: background .15s; }
.talk-choice:hover, .talk-choice:focus-visible { background: rgba(255,214,140,.18); outline: none; }
.talk-choice.primary { flex-basis: 100%; background: linear-gradient(135deg, var(--primary), var(--primary-2)); border-color: transparent; color: #fff; font-size: 16px; padding: 15px; }
@keyframes choiceIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 쿠폰 뽑기 */
.draw-wrap { display: flex; justify-content: center; gap: 18px; width: 100%; padding: 8px 0; cursor: default; }
.draw-box { background: none; border: 0; padding: 8px; cursor: pointer;
  opacity: 0; animation: choiceIn .35s ease forwards; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); transition: transform .15s; }
.draw-box img { width: 72px; height: 72px; object-fit: contain; display: block; }
.draw-box:hover { transform: scale(1.08) rotate(-3deg); }
.draw-box.hit { animation: giftShake .55s ease; pointer-events: none; }
.draw-box.fade { animation: none; opacity: .25 !important; transition: opacity .4s; pointer-events: none; }
@keyframes giftShake {
  0%, 100% { transform: rotate(0deg) scale(1); }
  20% { transform: rotate(-12deg) scale(1.05); }
  40% { transform: rotate(10deg) scale(1.1); }
  60% { transform: rotate(-8deg) scale(1.15); }
  80% { transform: rotate(6deg) scale(1.2); }
  95% { transform: scale(1.6); opacity: .3; }
  100% { transform: scale(0); opacity: 0; }
}
.coupon-card { position: relative; overflow: hidden; width: 100%; text-align: center; cursor: default;
  background: linear-gradient(160deg, #fff6df, #ffe4ad); border: 1.5px solid #d9a63c; border-radius: 16px;
  padding: 18px 16px 16px; opacity: 0; animation: choiceIn .4s ease forwards; }
.coupon-shine { position: absolute; inset: -50% -20%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.65) 50%, transparent 60%);
  animation: couponShine 1.6s ease .1s 1 forwards; }
@keyframes couponShine { from { transform: translateX(-60%); } to { transform: translateX(60%); } }
.coupon-badge { display: inline-block; background: #c0392b; color: #fff8ea; font-weight: 800; font-size: 13px; padding: 4px 14px; border-radius: 999px; margin-bottom: 10px; }
.coupon-code { font-family: var(--serif); font-size: 22px; font-weight: 900; letter-spacing: .06em; color: #5c3a12;
  background: rgba(255,255,255,.6); border: 1.5px dashed #b9862f; border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.coupon-note { margin: 0 0 12px; font-size: 12.5px; color: #7a5a2a; }
.coupon-card .talk-choice.primary { opacity: 1; animation: none; }

/* 생년월일 입력 (대화창 안) */
.birth-form { display: grid; gap: 8px; cursor: default; width: 100%; }
.bf-row { display: flex; gap: 6px; }
.bf-date select { flex: 1; }
.bf-date select:first-child { flex: 1.3; }
.birth-form select {
  width: 100%; appearance: none; -webkit-appearance: none; font: inherit; font-size: 15px;
  background: rgba(255,244,222,.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23d6b476' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 10px center;
  color: #fbf1de; border: 1px solid #8a6a3a; border-radius: 10px; padding: 11px 26px 11px 10px;
}
.birth-form select option { color: #1b1b1f; }
.bf-seg { display: flex; flex: 1; border: 1px solid #8a6a3a; border-radius: 10px; overflow: hidden; }
.bf-seg + .bf-seg { flex: .7; }
.bf-seg label { flex: 1; cursor: pointer; }
.bf-seg input { position: absolute; opacity: 0; pointer-events: none; }
.bf-seg span { display: block; text-align: center; padding: 10px 0; font-size: 14px; color: #d9c7a4; }
.bf-seg label + label span { border-left: 1px solid rgba(138,106,58,.5); }
.bf-seg input:checked + span { background: #8a6a3a; color: #fff6e3; font-weight: 700; }
.bf-seg input:focus-visible + span { outline: 2px solid #ffd27a; outline-offset: -2px; }
.bf-err { margin: 0; min-height: 0; color: #ff9b8f; font-size: 13px; }
.bf-err:empty { display: none; }
.birth-form .talk-choice.primary { opacity: 1; animation: none; }
.bf-skip { background: none; border: 0; color: #b9a684; font-size: 13px; text-decoration: underline; padding: 4px; }

/* 원국 카드 */
.intro.has-chart .shaman { opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.intro.has-chart .coins, .intro.has-chart .coin-result { display: none; }
.saju-card {
  position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px;
  background: #fbf5e8; color: #2b2118; border-radius: 14px; padding: 12px 12px 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5); border: 1px solid #c9a15d; cursor: default;
  opacity: 0; transform: translateY(16px) scale(.97); transition: opacity .5s ease .2s, transform .5s ease .2s;
}
.saju-card.show { opacity: 1; transform: none; }
.sj-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.sj-head span { font-family: var(--serif); font-weight: 700; font-size: 14px; }
.sj-head small { font-size: 11px; color: #7a6a55; text-align: right; }
.sj-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sj-col { display: grid; gap: 3px; justify-items: center; padding: 4px 0; border-radius: 10px; }
.sj-col.me { background: rgba(201,161,93,.18); box-shadow: inset 0 0 0 1.5px #c9a15d; }
.sj-label { font-size: 11px; color: #7a6a55; font-weight: 700; }
.sj-god { font-size: 10.5px; color: #6b5a44; min-height: 14px; }
.sj-cell { width: 100%; max-width: 62px; aspect-ratio: 1 / .9; border-radius: 8px; display: grid; place-content: center; text-align: center; line-height: 1.05; }
.sj-cell b { font-family: var(--serif); font-size: 24px; font-weight: 900; }
.sj-cell small { font-size: 10px; opacity: .85; }
.sj-cell.unknown { background: #e9e1d2; color: #a4967f; border: 1px dashed #b9a88c; }
.el-목 { background: #3f8f4f; color: #fff; }
.el-화 { background: #d6453a; color: #fff; }
.el-토 { background: #d4a13a; color: #2b2118; }
.el-금 { background: #e4e6ea; color: #2b2118; }
.el-수 { background: #223052; color: #fff; }
.sj-els { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 10px; }
.sj-el { display: grid; justify-items: center; gap: 3px; font-size: 11px; }
.sj-el .dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 11px; }
.sj-el i { width: 100%; height: 5px; border-radius: 9px; background: #e6dccb; overflow: hidden; }
.sj-el em { display: block; height: 100%; border-radius: 9px; transition: width .8s ease .3s; }
.sj-el b { font-size: 12px; }
.sj-luck { margin-top: 8px; font-size: 12px; color: #5c4c38; text-align: center; background: #f1e7d3; border-radius: 8px; padding: 6px; }
.sj-luck b { color: #8a2433; }

@media (max-height: 640px) {
  .shaman { height: 58vh; }
  .talk-text { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .shaman, .shaman *, .smoke, .talk-next, .intro-stage { animation: none !important; }
  .intro { transition: none; }
}