/* 육아멤버십
   레퍼런스: huyml.co — 무채색 그로테스크 미니멀.
   요지는 "아주 작고 촘촘한 라벨" vs "아주 큰 숫자·헤드라인" 의 극단적 대비다.
   색은 public/theme.js 와 반드시 동기화한다 (canvas·OG 가 같은 값을 쓴다). */

:root{
  --bg:#ECECEC;
  --paper:#FFFFFF;
  --ink:#111111;
  --muted:#8A8A8A;
  --line:#DCDCDC;
  --accent:#0457D4;

  --sans:'Gothic A1',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif;
  --mono:'Nanum Gothic Coding','D2Coding',ui-monospace,Menlo,monospace;

  --r:8px;                 /* 레퍼런스의 라운드 */
  --bar-h:78px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* display 를 명시한 요소(.cta/.toast)는 hidden 속성이 무시된다. 전역으로 못 박는다 */
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  font-weight:400;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
}
body.question-mode{height:100dvh;overflow:hidden}
body.question-mode #app{height:100dvh;overflow:hidden}

#app{max-width:520px;margin:0 auto;position:relative}
.screen{display:none;padding:0 20px}
#s-result{overflow-x:clip}
.screen.is-on{display:block;animation:rise .42s var(--ease) both}
.screen-center{min-height:100dvh;display:none;place-items:center}
.screen-center.is-on{display:grid}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── 마이크로 라벨 — 레퍼런스의 핵심 장치 ── */
.label{
  font-size:10px;line-height:13px;font-weight:500;
  letter-spacing:.01em;color:var(--muted);
  text-transform:uppercase;
}

/* ── 랜딩 ── */
.hero{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;gap:28px;padding:56px 0}
.hero-card-stage{align-self:flex-start;width:min(78vw,292px);padding:8px 0 13px;perspective:900px}
.hero-membership-card{
  position:relative;aspect-ratio:1.586;padding:18px;border-radius:15px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  color:#fff;background:linear-gradient(145deg,#050505,#191919 58%,#050505);
  border:1px solid #272727;box-shadow:0 22px 44px rgba(0,0,0,.2);
  transform:rotate(-4deg) rotateY(7deg);
}
.hero-membership-card::before{content:'';position:absolute;inset:-65% -45%;opacity:.5;
  background:linear-gradient(110deg,transparent 43%,rgba(255,255,255,.32) 49%,transparent 55%);transform:translateX(-23%)}
.hero-membership-card::after{content:'';position:absolute;right:-12%;top:-28%;width:68%;aspect-ratio:1;
  border:1px solid #4e8ef4;border-radius:46% 54% 61% 39%/44% 36% 64% 56%;opacity:.6;
  box-shadow:0 0 38px rgba(4,87,212,.38);transform:rotate(24deg)}
.hero-card-topline,.hero-card-bottomline{position:relative;z-index:1;display:flex;justify-content:space-between;
  font-size:8px;line-height:11px;font-weight:600;letter-spacing:.1em}
.hero-membership-card strong{position:relative;z-index:1;font-size:39px;line-height:1;font-weight:500;letter-spacing:-.055em}
.hero-strip{
  display:none;background:var(--paper);align-self:flex-start;
  padding:20px 24px;border-radius:0;
  box-shadow:0 10px 40px rgba(0,0,0,.07);
}
.hero-strip pre{margin:0;font-family:var(--mono);font-size:12px;line-height:1.75;color:var(--muted)}
.hero h1{
  font-weight:700;
  font-size:clamp(34px,10.5vw,50px);line-height:1.12;
  letter-spacing:-.035em;margin:0;
}
.hero-sub{margin:0;color:var(--muted);font-size:15px;letter-spacing:-.01em}

/* ── 폼 ── */
.pane{padding:64px 0 44px;display:flex;flex-direction:column;gap:24px}
.step-label{
  font-size:10px;line-height:13px;font-weight:500;letter-spacing:.01em;
  color:var(--accent);text-transform:uppercase;
}
.pane h2{font-weight:700;font-size:30px;line-height:1.2;letter-spacing:-.035em;margin:0 0 2px}

.field{display:flex;flex-direction:column;gap:9px}
.field-label{
  font-size:10px;line-height:13px;font-weight:500;letter-spacing:.01em;
  text-transform:uppercase;color:var(--ink);
  display:flex;align-items:center;gap:6px;
}
.req{font-size:9px;font-weight:700;color:var(--paper);background:var(--accent);padding:2px 5px;border-radius:3px;letter-spacing:0}
.opt{font-weight:400;color:var(--muted);text-transform:none;letter-spacing:-.01em;font-size:11px}

input[type=text]{
  width:100%;font:inherit;font-size:16px;letter-spacing:-.01em;
  padding:15px 16px;background:var(--paper);
  border:1px solid transparent;border-radius:var(--r);color:var(--ink);
  transition:border-color .18s var(--ease);
}
input:hover{border-color:var(--line)}
input:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.seg{display:flex;gap:6px}
.seg-btn{
  flex:1;font:inherit;font-size:14px;letter-spacing:-.01em;padding:13px 6px;
  background:var(--paper);border:1px solid transparent;border-radius:var(--r);
  color:var(--muted);cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.seg-btn.is-on{background:var(--ink);color:var(--paper);font-weight:600}

.err{margin:0;color:var(--accent);font-size:13px}

.date-picker{background:var(--paper);border-radius:var(--r);overflow:hidden;box-shadow:0 10px 28px rgba(0,0,0,.045)}
.date-parts{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.date-part{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:14px 15px 13px;background:var(--paper);
  border:0;border-bottom:2px solid transparent;color:var(--muted);font:inherit;text-align:left;cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease)}
.date-part+.date-part{border-left:1px solid var(--line)}
.date-part-label{font-size:10px;line-height:13px;font-weight:600;color:var(--muted)}
.date-part-value{font-size:18px;line-height:22px;font-weight:600;color:var(--ink)}
.date-part:not(.is-set) .date-part-value{color:var(--muted);font-weight:400}
.date-part.is-active{background:#F7F7F7;border-bottom-color:var(--accent);color:var(--ink)}
.date-panel{padding:16px 14px 18px}
.date-panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:13px}
.date-panel-head>span:first-child{font-size:13px;font-weight:700}
.date-panel-hint{font-size:10px;color:var(--muted);white-space:nowrap}
.date-grid{display:grid;gap:6px}
.date-grid.year-grid,.date-grid.month-grid{grid-template-columns:repeat(3,1fr)}
.date-grid.day-grid{grid-template-columns:repeat(7,1fr);gap:5px}
.date-grid button{min-height:44px;padding:8px 3px;background:var(--paper);border:1px solid var(--line);border-radius:6px;color:var(--ink);font:inherit;font-size:13px;cursor:pointer;transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease)}
.date-grid.day-grid button{min-height:38px;border-color:transparent}
.date-grid button:hover{border-color:var(--ink)}
.date-grid button.is-selected{background:var(--ink);border-color:var(--ink);color:var(--paper);font-weight:600}
.date-grid button:disabled{background:#FAFAFA;border-color:transparent;color:#C8C8C8;cursor:default}
.date-grid button:disabled:hover{border-color:transparent}
.date-weekday{text-align:center;padding:1px 0 4px;font-size:10px;line-height:14px;color:var(--muted)}
.date-weekday:first-child{color:var(--accent)}
.date-empty{min-height:38px}

/* ── 멤버십 질문 ── */
.question-screen.is-on{height:100dvh;overflow:hidden}
.question-pane{height:100dvh;padding:calc(34px + env(safe-area-inset-top)) 0 calc(24px + env(safe-area-inset-bottom));gap:18px}
.question-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.question-progress{font-family:var(--mono);font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.question-progress strong{font-size:15px;color:var(--ink)}
.question-card,.question-complete{min-height:0;flex:1;background:var(--paper);border-radius:var(--r);padding:28px 22px 22px;
  display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 14px 36px rgba(0,0,0,.055)}
.question-card h2,.question-complete h2{margin:0;font-size:clamp(24px,7.5vw,34px);line-height:1.38;letter-spacing:-.045em;word-break:keep-all}
.question-kicker{font-size:10px;line-height:13px;font-weight:600;color:var(--accent);letter-spacing:.01em}
.question-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.question-answer{min-height:62px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);color:var(--ink);
  font:inherit;font-size:16px;font-weight:600;cursor:pointer;transition:background .16s var(--ease),color .16s var(--ease),transform .12s var(--ease)}
.question-answer-yes{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.question-answer.is-selected{outline:3px solid color-mix(in srgb,var(--accent) 35%,transparent);outline-offset:2px}
.question-answer:active{transform:scale(.98)}
.question-card.is-entering{animation:questionIn .24s var(--ease) both}
.question-card.is-leaving{animation:questionOut .12s ease-in both}
.question-complete{align-items:stretch;text-align:left}
.question-complete .btn{width:100%}
.question-footer{min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.question-footer p{margin:0;font-size:10px;line-height:1.4;color:var(--muted);text-align:right}
.question-prev{padding:8px 0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:12px;white-space:nowrap;cursor:pointer}

/* ── 결과 ── */
.result{padding:38px 0 calc(var(--bar-h) + 34px);display:flex;flex-direction:column;gap:18px}

.reveal{min-height:auto;display:flex;flex-direction:column;align-items:center;text-align:center}
.reveal>.step-label{align-self:flex-start}
.hours-counter{display:flex;align-items:baseline;gap:8px;margin-top:24px;font-variant-numeric:tabular-nums}
.hours-counter strong{font-size:clamp(56px,18vw,88px);line-height:1;font-weight:500;letter-spacing:-.07em}
.hours-counter span{font-size:13px;color:var(--muted);font-weight:500}
.hours-caption{margin:8px 0 30px;font-size:11px;color:var(--muted)}

.card-stage{--upgrade-color:var(--accent);position:relative;width:min(100%,360px);display:grid;place-items:center;
  perspective:1100px;isolation:isolate}
.card-stage::after{content:'';position:absolute;z-index:4;left:50%;top:50%;width:18px;height:18px;border-radius:48% 52% 44% 56%/55% 42% 58% 45%;
  background:#fff;opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.2);box-shadow:0 0 20px var(--upgrade-color)}
.card-stage[data-upgrade-grade="SILVER"]{--upgrade-color:#AEB7C5}
.card-stage[data-upgrade-grade="GOLD"]{--upgrade-color:#D5B45D}
.card-stage[data-upgrade-grade="VIP"]{--upgrade-color:#0457D4}
.card-stage[data-upgrade-grade="VVIP"]{--upgrade-color:#6AA2FF}
.card-burst{position:absolute;z-index:0;inset:-58px;opacity:0;pointer-events:none;
  background:repeating-conic-gradient(from 8deg,transparent 0 8deg,color-mix(in srgb,var(--upgrade-color) 62%,transparent) 8deg 9deg,transparent 9deg 18deg);
  border-radius:44% 56% 48% 52%/55% 46% 54% 45%;transform:scale(.58)}
.card-stage.is-upgrading{animation:stageImpact .82s cubic-bezier(.2,.8,.2,1)}
.card-stage.is-charging::after{animation:chargeImpact .62s cubic-bezier(.18,.72,.22,1) both}
.card-stage.is-charging .membership-card{animation:cardCharge .62s cubic-bezier(.2,.72,.2,1) both}
.card-stage.is-upgrading .card-burst{animation:cardBurst .82s cubic-bezier(.2,.8,.2,1)}
.upgrade-fx{position:absolute;z-index:3;inset:-72px;pointer-events:none;overflow:visible}
.upgrade-flash{position:absolute;inset:12%;opacity:0;border-radius:42% 58% 54% 46%/57% 45% 55% 43%;
  background:radial-gradient(ellipse at center,color-mix(in srgb,var(--upgrade-color) 75%,#fff) 0%,color-mix(in srgb,var(--upgrade-color) 25%,transparent) 35%,transparent 70%);filter:blur(4px)}
.upgrade-ring{position:absolute;left:50%;top:50%;width:72%;aspect-ratio:1.58;border:2px solid var(--upgrade-color);
  border-radius:47% 53% 45% 55%/55% 44% 56% 45%;opacity:0;box-shadow:0 0 22px color-mix(in srgb,var(--upgrade-color) 58%,transparent)}
.upgrade-ring-b{border-width:1px;border-radius:54% 46% 57% 43%/43% 56% 44% 57%;transform:translate(-50%,-50%) rotate(-8deg)}
.upgrade-glint{position:absolute;left:50%;top:50%;width:78%;height:2px;opacity:0;
  background:linear-gradient(90deg,transparent,var(--upgrade-color),#fff,var(--upgrade-color),transparent);
  box-shadow:0 0 16px color-mix(in srgb,var(--upgrade-color) 75%,transparent);transform:translate(-50%,-50%) scaleX(.1)}
.upgrade-glint::after{content:'';position:absolute;left:50%;top:50%;width:2px;height:150px;
  background:linear-gradient(transparent,var(--upgrade-color),#fff,var(--upgrade-color),transparent);transform:translate(-50%,-50%)}
.upgrade-particles{position:absolute;inset:0}
.upgrade-particles i{position:absolute;left:50%;top:50%;width:var(--particle-w);height:var(--particle-h);opacity:0;
  border-radius:2px;background:linear-gradient(#fff,var(--upgrade-color));
  box-shadow:0 0 10px color-mix(in srgb,var(--upgrade-color) 78%,transparent)}
.upgrade-particles i:nth-child(3n){clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.card-stage.is-upgrading .upgrade-flash{animation:upgradeFlash .72s ease-out .18s both}
.card-stage.is-upgrading .upgrade-ring-a{animation:upgradeRing .72s cubic-bezier(.1,.7,.2,1) .2s both}
.card-stage.is-upgrading .upgrade-ring-b{animation:upgradeRingB .78s cubic-bezier(.1,.7,.2,1) .24s both}
.card-stage.is-upgrading .upgrade-glint{animation:upgradeGlint .54s ease-out .25s both}
.card-stage.is-upgrading .upgrade-particles i{animation:particleFly .64s cubic-bezier(.12,.72,.2,1) calc(.22s + var(--delay)) both}
.membership-card{position:relative;width:100%;aspect-ratio:1.586;border-radius:18px;overflow:hidden;
  z-index:2;transform-style:preserve-3d;background:#fff;border:1px solid var(--line);color:var(--ink);
  padding:22px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;
  box-shadow:0 22px 55px rgba(0,0,0,.13);transition:background .25s,color .25s,border-color .25s}
.membership-card::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.34;
  background:linear-gradient(128deg,transparent 0 44%,rgba(255,255,255,.55) 49%,transparent 55%)}
.membership-card::after{content:'';position:absolute;right:-14%;top:-25%;width:66%;aspect-ratio:1;border:1px solid currentColor;
  border-radius:46% 54% 61% 39%/44% 36% 64% 56%;opacity:.12;transform:rotate(24deg)}
.card-shine{position:absolute;inset:-80% -60%;pointer-events:none;opacity:0;
  background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.62) 49%,transparent 56%);transform:translateX(-42%)}
.card-topline,.card-bottomline{position:relative;z-index:1;display:flex;justify-content:space-between;
  font-size:9px;line-height:12px;font-weight:600;letter-spacing:.1em}
.card-grade{position:relative;z-index:1;font-size:clamp(34px,10vw,52px);font-weight:500;letter-spacing:-.055em}
.membership-card[data-grade="pending"]{background:transparent;color:var(--muted);border-style:dashed;box-shadow:none}
.membership-card[data-grade="일반"]{background:#fff;color:#111}
.membership-card[data-grade="SILVER"]{background:linear-gradient(135deg,#fff 0%,#d8dbe0 48%,#f7f7f7 100%);color:#111;border-color:#c7cbd0}
.membership-card[data-grade="GOLD"]{background:linear-gradient(135deg,#f8f1dc 0%,#d6b96f 52%,#f3e7c5 100%);color:#17130b;border-color:#d1b86e}
.membership-card[data-grade="VIP"]{background:var(--accent);color:#fff;border-color:var(--accent)}
.membership-card[data-grade="VVIP"]{background:linear-gradient(145deg,#050505,#171717 58%,#050505);color:#fff;border-color:#272727}
.membership-card[data-grade="VVIP"]::after{border-color:#4e8ef4;opacity:.55;box-shadow:0 0 40px rgba(4,87,212,.45)}
.membership-card[data-grade="신규개점"]{background:#faf7e8;color:#49230e;border-color:#e5d9bd}
.membership-card.is-issued{animation:cardIssue .58s var(--ease)}
.membership-card.is-flipping-up{animation:cardFlipUp .68s var(--ease)}
.membership-card.is-flipping-down{animation:cardFlipDown .68s var(--ease)}
.membership-card.is-pulsing{animation:cardPulse .3s var(--ease)}
.membership-card.is-flipping-up .card-shine,.membership-card.is-issued .card-shine{animation:shine .68s var(--ease)}

.reveal-event{position:relative;isolation:isolate;width:min(100%,360px);height:46px;margin-top:16px;padding:0 14px;border:1px solid var(--line);border-radius:999px;
  background:var(--paper);display:flex;align-items:center;justify-content:space-between;font-size:12px;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);will-change:transform,opacity}
.reveal-event::before{content:'';position:absolute;z-index:2;left:50%;top:50%;width:16px;height:16px;border-radius:44% 56% 52% 48%/58% 45% 55% 42%;
  background:#fff;opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.2);box-shadow:0 0 10px #fff,0 0 26px var(--accent)}
.reveal-event::after{content:'';position:absolute;z-index:1;left:50%;top:52%;width:8px;height:80px;border-radius:999px;opacity:0;pointer-events:none;
  background:linear-gradient(to bottom,var(--accent),color-mix(in srgb,var(--accent) 24%,transparent),transparent);transform:translate(-50%,0) scaleY(.15);transform-origin:top}
.event-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.event-delta{font-family:var(--mono);font-size:12px;color:var(--accent);font-weight:700}
.reveal-event[data-kind="S"] .event-delta{color:var(--ink)}
.reveal-event[data-phase="cause"]{border-color:color-mix(in srgb,var(--accent) 30%,var(--line));box-shadow:0 8px 24px rgba(4,87,212,.10);animation:bonusReveal .52s var(--ease) both}
.reveal-event[data-phase="cause"] .event-name{font-weight:600}
.reveal-event[data-phase="absorb"]{border-color:transparent;background:transparent;box-shadow:none;animation:bonusAbsorb .62s cubic-bezier(.42,0,.72,.28) both}
.reveal-event[data-phase="absorb"] .event-name,.reveal-event[data-phase="absorb"] .event-delta{animation:bonusTextCollapse .3s ease-in both}
.reveal-event[data-phase="absorb"]::before{animation:soulCore .62s ease-in both}
.reveal-event[data-phase="absorb"]::after{animation:soulTrail .62s ease-in both}
.reveal-event[data-phase="grade"]{justify-content:center;background:var(--ink);border-color:var(--ink);color:var(--paper)}
.reveal-event[data-phase="grade"] .event-name{font-weight:700;letter-spacing:.01em;animation:gradeSuccess .5s cubic-bezier(.16,.8,.26,1) both}
.reveal-event[data-phase="complete"]{background:transparent;border-color:transparent;justify-content:center;color:var(--muted)}

.reveal-final{width:min(100%,360px);padding-top:22px;opacity:0;transform:translateY(8px)}
.reveal-final.is-visible{animation:finalIn .5s var(--ease) forwards}
.result-grade{margin:0;font-size:18px;letter-spacing:-.03em}
.result-grade strong{font-size:30px;font-weight:600}
.result-rank{display:inline-block;margin:8px 0 0;padding:4px 8px;background:var(--ink);color:#fff;border-radius:999px;
  font-size:9px;line-height:13px;font-weight:600;letter-spacing:.04em}
.result-comment{margin:15px 0 20px;font-size:14px;color:var(--muted)}
.reveal-final .btn{width:100%}

.receipt-output{scroll-margin-top:14px}
.printer-head{position:relative;z-index:2;height:58px;background:var(--ink);color:#fff;border-radius:var(--r) var(--r) 2px 2px;
  display:flex;align-items:center;justify-content:space-between;padding:0 18px;box-shadow:0 12px 34px rgba(0,0,0,.18)}
.printer-head::after{content:'';position:absolute;left:18px;right:18px;bottom:8px;height:5px;background:#000;border-radius:4px}
.printer-brand{font-size:9px;letter-spacing:.12em}
.printer-light{width:7px;height:7px;background:#49d17d;border-radius:50%;box-shadow:0 0 10px rgba(73,209,125,.7)}
.receipt-feed{max-height:0;overflow:hidden;margin:0 10px;transform:translateY(-2px);transition:max-height .42s var(--ease)}
.receipt-output.is-printing .receipt-feed{animation:receiptFeed 2.7s steps(24,end) forwards}
.receipt-output.is-printing .printer-head{animation:printerTick .12s steps(2,end) 22}
.receipt-output.is-printed .receipt-feed{max-height:var(--receipt-height)}
.receipt-output.is-collapsed .receipt-feed{max-height:0!important}
.receipt-actions{display:flex;justify-content:center;padding:12px 0 0}
.receipt-actions .btn{font-size:12px;padding:10px 16px}
.post-receipt{display:flex;flex-direction:column;gap:14px}

/* 영수증만 각지게 둔다 — 주변 UI 가 전부 라운드라 종이가 '물건'으로 분리된다 */
.paper{
  background:var(--paper);border-radius:0;
  box-shadow:0 14px 44px rgba(0,0,0,.10);
  padding:28px 14px;overflow-x:auto;
}
.paper pre{
  width:max-content;margin:0 auto;font-family:var(--mono);
  font-size:clamp(11px,3.35vw,14px);line-height:1.62;
  white-space:pre;font-variant-numeric:tabular-nums;letter-spacing:0;
}

.cta{background:var(--paper);border-radius:var(--r);padding:20px;
  display:flex;flex-direction:column;gap:13px;text-align:center}
.cta p{margin:0;font-size:13px;color:var(--muted)}

.basis{background:var(--paper);border-radius:var(--r)}
.basis summary{padding:15px 18px;cursor:pointer;list-style:none;
  font-size:10px;line-height:13px;font-weight:500;letter-spacing:.01em;text-transform:uppercase;
  display:flex;justify-content:space-between;align-items:center}
.basis summary::-webkit-details-marker{display:none}
.basis summary::after{content:'+';font-size:14px;color:var(--muted)}
.basis[open] summary::after{content:'−'}
.basis-body{padding:0 18px 18px;font-size:12px;line-height:1.65;color:var(--muted);
  display:flex;flex-direction:column;gap:8px}
.basis-body p{margin:0}
.basis-h{font-size:10px;line-height:13px;font-weight:600;letter-spacing:.01em;
  text-transform:uppercase;color:var(--ink);margin-top:8px!important}
.basis-body ul{margin:0;padding-left:16px}
.basis-note{border-top:1px solid var(--line);padding-top:11px;margin-top:8px!important}
.again{display:flex;justify-content:center;padding-top:4px}

.melipu-promo{margin-top:22px;padding:24px 4px 18px;border-top:1px solid var(--line)}
.melipu-promo a{display:flex;flex-direction:column;align-items:center;gap:13px;color:var(--ink);text-decoration:none}
.melipu-promo img{display:block;width:160px;height:auto}
.melipu-promo span{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--muted);white-space:nowrap}
.melipu-promo span::after{content:' ↗';font-family:var(--sans);font-size:13px;color:var(--accent)}

/* ── 버튼 ── */
.btn{font:inherit;font-weight:600;font-size:15px;letter-spacing:-.015em;
  padding:16px 20px;border:1px solid transparent;border-radius:var(--r);cursor:pointer;
  transition:opacity .18s var(--ease),transform .12s var(--ease)}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-line{background:var(--paper);color:var(--ink)}
.btn-ghost{background:transparent;color:var(--muted);font-size:12px;padding:11px 16px;
  text-transform:uppercase;letter-spacing:.01em;font-weight:500}
.btn:hover{opacity:.86}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.45;cursor:default}

.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:5;
  display:none;gap:8px;padding:12px 20px calc(12px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(12px);
  box-shadow:0 -1px 0 var(--line);
}
.bar.is-on{display:flex}
.bar .btn{flex:1}
.download-menu{position:absolute;left:20px;right:20px;bottom:calc(100% + 8px);display:flex;flex-direction:column;gap:6px;
  padding:8px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 12px 30px rgba(0,0,0,.12)}
.download-option{width:100%;padding:13px 14px;background:var(--paper);border:0;border-radius:6px;color:var(--ink);
  font:inherit;font-size:13px;text-align:left;cursor:pointer}
.download-option:hover{background:var(--bg)}
.download-option::after{content:'↓';float:right;color:var(--accent)}
@media (min-width:560px){.bar{max-width:520px;margin:0 auto}}

.toast{
  position:fixed;left:50%;bottom:calc(var(--bar-h) + 22px);transform:translateX(-50%);
  background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:var(--r);
  font-size:13px;z-index:10;
}

@keyframes cardIssue{0%{opacity:0;transform:translateY(24px) scale(.9)}70%{transform:translateY(-3px) scale(1.015)}100%{opacity:1;transform:none}}
@keyframes cardFlipUp{0%{transform:rotateY(0) scale(1);filter:brightness(1)}38%{transform:rotateY(92deg) scale(.88);filter:brightness(1.18)}55%{transform:rotateY(268deg) scale(.9);filter:brightness(1.55)}78%{transform:rotateY(342deg) scale(1.045);filter:brightness(1.2)}100%{transform:rotateY(360deg) scale(1);filter:brightness(1)}}
@keyframes cardFlipDown{0%{transform:rotateY(0)}48%{transform:rotateY(-92deg) scale(.94)}100%{transform:rotateY(-360deg)}}
@keyframes cardPulse{50%{transform:scale(1.025);box-shadow:0 28px 65px rgba(0,0,0,.16)}}
@keyframes stageImpact{0%,31%,100%{transform:none}37%{transform:translateX(-3px)}42%{transform:translateX(4px)}47%{transform:translateX(-2px)}55%{transform:none}}
@keyframes cardBurst{0%,22%{opacity:0;transform:scale(.58) rotate(-5deg)}40%{opacity:1}100%{opacity:0;transform:scale(1.16) rotate(11deg)}}
@keyframes upgradeFlash{0%{opacity:0;transform:scale(.45)}28%{opacity:.95}100%{opacity:0;transform:scale(1.18)}}
@keyframes upgradeRing{0%{opacity:.9;transform:translate(-50%,-50%) scale(.52) rotate(4deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.38) rotate(13deg)}}
@keyframes upgradeRingB{0%{opacity:.72;transform:translate(-50%,-50%) scale(.44) rotate(-8deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.58) rotate(-19deg)}}
@keyframes upgradeGlint{0%{opacity:0;transform:translate(-50%,-50%) scaleX(.08)}28%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scaleX(1.22)}}
@keyframes particleFly{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--angle)) translateX(26px) scale(.2)}22%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--angle)) translateX(var(--distance)) scale(1.08)}}
@keyframes shine{0%{opacity:0;transform:translateX(-46%)}45%{opacity:.9}100%{opacity:0;transform:translateX(46%)}}
@keyframes finalIn{to{opacity:1;transform:none}}
@keyframes printerTick{0%{transform:translateX(-1px)}100%{transform:translateX(1px)}}
@keyframes receiptFeed{from{max-height:0}to{max-height:var(--receipt-height)}}
@keyframes questionIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
@keyframes questionOut{to{opacity:0;transform:translateX(-10px)}}
@keyframes bonusReveal{0%{opacity:0;transform:translateY(8px) scale(.96)}62%{transform:translateY(-2px) scale(1.018)}100%{opacity:1;transform:none}}
@keyframes bonusTextCollapse{to{opacity:0;transform:scale(.72);filter:blur(3px)}}
@keyframes bonusAbsorb{0%,18%{opacity:1;transform:none;filter:brightness(1)}48%{opacity:1;transform:translateY(-18px) scale(.94);filter:brightness(1.3)}100%{opacity:0;transform:translateY(clamp(-152px,-39vw,-126px)) scale(.07);filter:brightness(2)}}
@keyframes soulCore{0%,15%{opacity:0;transform:translate(-50%,-50%) scale(.2)}38%{opacity:1;transform:translate(-50%,-50%) scale(1.4)}100%{opacity:1;transform:translate(-50%,-50%) scale(.72)}}
@keyframes soulTrail{0%,32%{opacity:0;transform:translate(-50%,0) scaleY(.15)}55%{opacity:.72}100%{opacity:0;transform:translate(-50%,0) scaleY(1)}}
@keyframes cardCharge{0%,58%{filter:brightness(1);transform:scale(1)}84%{filter:brightness(1.32);transform:scale(1.018);box-shadow:0 24px 64px rgba(4,87,212,.22)}100%{filter:brightness(1);transform:scale(1)}}
@keyframes chargeImpact{0%,72%{opacity:0;transform:translate(-50%,-50%) scale(.2)}84%{opacity:1;transform:translate(-50%,-50%) scale(1.45)}100%{opacity:0;transform:translate(-50%,-50%) scale(3.4)}}
@keyframes gradeSuccess{0%{opacity:0;transform:scale(.72);letter-spacing:.12em}65%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}