/* 실시간 월급 카운터 — 감열지 영수증 + 기계식 카운터
 * 흑백 종이 바탕에 돈 초록 포인트 하나. 숫자는 모노스페이스.
 * UI는 공용 역할 토큰/컴포넌트, 장식 색은 --art-* 로만 쓴다. */
:root {
  --brand: #0f9d58;
  --brand-pressed: #0b8048;
  --brand-soft: #e1f3e8;
  --brand-on: #ffffff;

  --font-display: "IBM Plex Mono", "IBM Plex Sans KR", var(--font-mono);
  --font-num: "IBM Plex Mono", "Space Mono", var(--font-mono);
  --font-kr: "IBM Plex Sans KR", var(--font-sans);

  --art-paper: #ebe7dc;
  --art-slip: #fdfcf7;
  --art-ink: #161615;
  --art-ink-2: #6a675f;
  --art-rule: #bdb8aa;
  --art-housing: #1c1c1a;
  --art-housing-2: #2c2c29;
  --art-wheel: #f6f3ea;
  --art-wheel-shade: #b9b4a6;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --tear: conic-gradient(from -45deg at bottom, transparent, #000 1deg 89deg, transparent 90deg) 50% / 12px 100%;
}

.m0 { margin: 0; }

body {
  font-family: var(--font-kr);
  background-color: var(--art-paper);
  /* 종이 결 (노이즈) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.topbar { background: color-mix(in srgb, var(--art-paper) 92%, transparent); }
.topbar__brand { font-family: var(--font-display); letter-spacing: -0.02em; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* 버튼: 기계식 키처럼 눌렸다가 튀어오른다 */
.btn { transition: background var(--dur-fast) var(--ease-standard), transform 380ms var(--spring); }
.btn:active:not(:disabled) { transform: scale(0.94, 0.9); transition-duration: 70ms; }
.btn--lg { font-family: var(--font-kr); }

/* ---------- 영수증 슬립 (모든 카드의 바탕) ---------- */
.slip {
  position: relative;
  padding: var(--sp-20) var(--sp-20) var(--sp-24);
  background: var(--art-slip);
  color: var(--art-ink);
  -webkit-mask: var(--tear);
  mask: var(--tear);
}
.slip__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-8);
  padding-bottom: var(--sp-12);
  margin-bottom: var(--sp-4);
  border-bottom: 1px dashed var(--art-rule);
}
.slip h1,
.slip h2 { font-family: var(--font-kr); letter-spacing: -0.02em; }
.rule { border: 0; border-top: 1px dashed var(--art-rule); margin: var(--sp-4) 0; }
.barcode {
  height: 36px;
  margin-top: var(--sp-8);
  background: repeating-linear-gradient(90deg, var(--art-ink) 0 2px, transparent 2px 4px, var(--art-ink) 4px 5px, transparent 5px 8px, var(--art-ink) 8px 11px, transparent 11px 12px, var(--art-ink) 12px 13px, transparent 13px 17px);
}
.badge { border-radius: var(--r-4); font-family: var(--font-num); }

/* ---------- 공유받은 배너 ---------- */
.shared-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-12) var(--sp-16) var(--sp-16);
  background: var(--art-slip);
  color: var(--art-ink);
  font: var(--body-03);
  -webkit-mask: var(--tear);
  mask: var(--tear);
}
.shared-banner b { color: var(--color-primary); font-family: var(--font-num); }
.shared-banner__emoji { font-size: 26px; line-height: 1; }

/* ---------- 인트로 ---------- */
.intro__caption { text-align: left; min-height: 96px; }
.intro__caption .t-title-02 { font-family: var(--font-kr); font-size: 27px; line-height: 36px; letter-spacing: -0.03em; }
.intro__steps { justify-content: flex-start; }
.intro__steps span { border-radius: 0; height: 4px; }
.intro__steps span.is-on { width: 28px; background: var(--art-ink); }
.intro__note { margin: 0; }
.kchar { display: inline-block; white-space: pre; animation: kprint 460ms var(--spring) both; }
@keyframes kprint {
  0% { transform: translateY(0.5em) scaleY(0.2); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

/* 장면은 무대 높이를 꽉 채우고, 내용은 그 안 가운데에 모은다 */
.intro__stage { padding: var(--sp-12) 0; }
.scene {
  position: relative;
  align-self: stretch;
  width: 100%;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: var(--sp-12);
}
.scene--center { align-items: center; gap: 0; }
.scene__meta { margin: 0; font: 600 13px/18px var(--font-num); color: var(--art-ink-2); }

/* 영수증 머리말 (POS 헤더) */
.masthead {
  padding: var(--sp-12) var(--sp-16) var(--sp-20);
  background: var(--art-slip);
  color: var(--art-ink);
  text-align: center;
  -webkit-mask: var(--tear);
  mask: var(--tear);
  animation: print-in 700ms steps(8) both;
}
.masthead__store { margin: 0; font: 700 22px/30px var(--font-kr); letter-spacing: 0.08em; }
.masthead__sub { margin: 0 0 var(--sp-8); font: 500 11px/16px var(--font-num); color: var(--art-ink-2); letter-spacing: 0.04em; }
.masthead__pos {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding-top: var(--sp-8);
  border-top: 2px dotted var(--art-rule);
  font: 500 12px/16px var(--font-num);
  color: var(--art-ink-2);
}

/* 넓은 카운터 */
.housing--wide { display: flex; justify-content: center; width: 100%; padding: var(--sp-10) var(--sp-8); }
.odo--lg { --h: 76px; --w: 42px; --fs: 56px; }

/* 영수증 블록 (점선 리더) */
.rcpt { padding: var(--sp-16) var(--sp-16) var(--sp-24); }
.rcpt__grid { display: grid; grid-template-columns: 112px 1fr; gap: var(--sp-16); align-items: end; }
.rcpt__grid .jar { width: 112px; height: 136px; }
.rcpt__title { margin: 0 0 var(--sp-6); font: 700 13px/18px var(--font-kr); letter-spacing: 0.06em; color: var(--art-ink-2); }
.lead-row { display: flex; align-items: baseline; gap: var(--sp-6); padding: var(--sp-4) 0; font: 400 14px/20px var(--font-kr); color: var(--art-ink); }
.lead-row i { flex: 1; min-width: var(--sp-8); border-bottom: 2px dotted var(--art-rule); transform: translateY(-4px); }
.lead-row b { font: 700 15px/20px var(--font-num); }
.lead-row.is-hot b { color: var(--color-primary); }
.rcpt .barcode { height: 28px; margin-top: var(--sp-12); }

/* 장면 2: 영수증 트레이 */
.tray { display: flex; flex-direction: column; gap: var(--sp-8); }
.tray__slot { min-height: 52px; border: 2px dashed var(--art-rule); border-radius: var(--r-4); }
.tray__slot:has(.ticket) { border-color: transparent; }
.tray .ticket { rotate: var(--tilt, 0deg); padding: var(--sp-10) var(--sp-16) var(--sp-16); font-size: 15px; }
.tray .ticket b { font-size: 19px; }
.ticket.is-hot b { color: var(--color-primary); }

/* 장면 3 */
.scene--center .printer { width: 300px; }
.scene--center .paper-wrap { width: 264px; height: auto; flex: 1; max-height: 400px; }
.paper__sub { text-align: center; font: 500 11px/16px var(--font-num); color: var(--art-ink-2); }
.paper__note { text-align: center; font: 700 13px/20px var(--font-kr); }

/* 장면 4 */
.seats { justify-content: space-between; margin-bottom: 0; }
.seat { width: 48px; height: 48px; font-size: 16px; }

/* 기계식 오도미터 */
.odo {
  --h: 64px;
  --w: 40px;
  --fs: 46px;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.odo__wheel {
  position: relative;
  width: var(--w);
  height: var(--h);
  overflow: hidden;
  border-radius: var(--r-4);
  background: var(--art-wheel);
  box-shadow: inset 0 0 0 1px var(--art-wheel-shade);
}
/* 휠의 위아래가 둥글게 말려 들어가는 음영 */
.odo__wheel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(var(--art-wheel-shade), transparent 30%, transparent 70%, var(--art-wheel-shade));
  opacity: 0.9;
}
.odo__strip { display: flex; flex-direction: column; will-change: transform; }
.odo__strip span {
  height: var(--h);
  display: grid;
  place-items: center;
  font: 700 var(--fs) / 1 var(--font-num);
  color: var(--art-ink);
}
.odo__wheel.is-lead span { color: var(--art-wheel-shade); }
.odo__sep { width: 8px; font: 700 calc(var(--fs) * 0.6) / 1 var(--font-num); color: var(--art-ink-2); align-self: flex-end; padding-bottom: var(--sp-6); text-align: center; }
.odo--sm { --h: 46px; --w: 28px; --fs: 32px; }
.odo--xs { --h: 40px; --w: 25px; --fs: 28px; }

.housing {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-10) var(--sp-12);
  border-radius: var(--r-8);
  background: var(--art-housing);
  box-shadow: var(--shadow-m), inset 0 2px 0 var(--art-housing-2);
}
.housing__cur { font: 700 28px/1 var(--font-num); color: var(--color-primary); }

/* 장면 1: 동전 → 저금통 + 카운터 */
.s1 { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: var(--sp-16); width: 100%; margin-top: var(--sp-32); }
.jar { position: relative; width: 132px; height: 160px; }
.jar svg { width: 100%; height: 100%; overflow: visible; }
.jar__glass { fill: none; stroke: var(--art-ink); stroke-width: 3; }
.jar__lid { fill: var(--art-ink); }
.jar__fill { fill: var(--color-primary); opacity: 0.85; transform-origin: 50% 100%; transform-box: fill-box; }
.jar__hatch { stroke: var(--art-ink); stroke-width: 1.5; opacity: 0.2; }
.coin {
  position: absolute;
  left: 50%;
  top: 0;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  background: var(--art-slip);
  border: 2px solid var(--art-ink);
  color: var(--art-ink);
  font: 700 10px/1 var(--font-num);
  pointer-events: none;
}
.coin--drop { animation: coin-drop 820ms both; }
/* 떨어지고 → 바닥에서 찌그러졌다가 → 튕겨 자리 잡기 */
@keyframes coin-drop {
  0% { transform: translate(var(--x, 0), -60px) scale(0.9, 1.15); opacity: 0; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  15% { opacity: 1; }
  70% { transform: translate(calc(var(--x, 0) * 0.3), var(--y, 120px)) scale(1.3, 0.7); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
  85% { transform: translate(calc(var(--x, 0) * 0.3), calc(var(--y, 120px) - 12px)) scale(0.92, 1.08); }
  100% { transform: translate(calc(var(--x, 0) * 0.3), var(--y, 120px)) scale(1); opacity: 1; }
}
.s1__meta { font: 600 13px/18px var(--font-num); color: var(--art-ink-2); margin-top: var(--sp-8); }

/* 장면 2: 화장실 타이머 → 도장 찍히는 영수증 줄 */
.s2 { width: 100%; display: flex; flex-direction: column; gap: var(--sp-16); }
.timer-row { display: flex; align-items: center; gap: var(--sp-16); }
.dial {
  position: relative;
  width: 108px;
  height: 108px;
  flex: none;
  border-radius: var(--r-full);
  background: var(--art-slip);
  box-shadow: inset 0 0 0 3px var(--art-ink);
  display: grid;
  place-items: center;
}
.dial svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.dial__bar { fill: none; stroke: var(--color-primary); stroke-width: 10; stroke-dasharray: 289; stroke-dashoffset: 289; }
.dial__bar.is-run { animation: dial 1500ms cubic-bezier(0.6, 0, 0.3, 1) forwards; }
@keyframes dial { to { stroke-dashoffset: 0; } }
.dial__emoji { font-size: 40px; line-height: 1; }
.timer-row__time { font: 700 48px/1 var(--font-num); color: var(--art-ink); letter-spacing: -0.04em; }
.ticket {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-12);
  width: 100%;
  padding: var(--sp-12) var(--sp-16) var(--sp-20);
  background: var(--art-slip);
  color: var(--art-ink);
  font: 600 16px/22px var(--font-kr);
  -webkit-mask: var(--tear);
  mask: var(--tear);
  animation: slap 560ms var(--spring) both;
}
.ticket b { font: 700 22px/1 var(--font-num); }
.ticket--hot b { color: var(--color-primary); }
@keyframes slap {
  0% { transform: translateY(-30px) scale(1.25); opacity: 0; }
  60% { transform: translateY(0) scale(0.96); opacity: 1; }
  100% { transform: none; opacity: 1; }
}

/* 장면 3: 영수증 출력 */
.s3 { width: 100%; align-items: center; }
.printer {
  position: relative;
  width: 252px;
  height: 46px;
  border-radius: var(--r-12) var(--r-12) var(--r-4) var(--r-4);
  background: var(--art-housing);
  box-shadow: var(--shadow-m), inset 0 2px 0 var(--art-housing-2);
  z-index: 2;
}
.printer::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 8px;
  height: 5px;
  border-radius: var(--r-full);
  background: var(--art-ink);
}
.printer__led { position: absolute; right: 14px; top: 10px; width: 8px; height: 8px; border-radius: var(--r-full); background: var(--color-primary); animation: blink 300ms steps(2) infinite; }
.paper-wrap { width: 212px; height: 262px; overflow: hidden; margin-top: -8px; }
.paper {
  padding: var(--sp-16) var(--sp-16) var(--sp-24);
  background: var(--art-slip);
  color: var(--art-ink);
  font: 500 12px/20px var(--font-num);
  transform: translateY(-100%);
  -webkit-mask: var(--tear);
  mask: var(--tear);
}
.paper.is-print { animation: print-in 2100ms steps(22) forwards; }
@keyframes print-in {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}
.paper__title { font: 700 14px/20px var(--font-kr); text-align: center; margin-bottom: var(--sp-4); }
.paper__row { display: flex; justify-content: space-between; gap: var(--sp-8); }
.paper__row span:first-child { font-family: var(--font-kr); }
.paper__hr { border-top: 1px dashed var(--art-rule); margin: var(--sp-6) 0; }
.paper__total { font-weight: 700; font-size: 14px; }
.paper__total span:last-child { color: var(--color-primary); }

/* 장면 4: 회의 */
.s4 { width: 100%; }
.seats { display: flex; gap: var(--sp-6); margin-bottom: var(--sp-16); }
.seat {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  background: var(--art-slip);
  box-shadow: inset 0 0 0 2px var(--art-ink);
  font: 700 14px/1 var(--font-num);
  color: var(--art-ink);
  animation: seat-in 520ms var(--spring) both;
}
@keyframes seat-in {
  0% { transform: translateY(-24px) scale(0.6, 1.3); opacity: 0; }
  60% { transform: translateY(0) scale(1.2, 0.8); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.s4__cap { font: 600 13px/18px var(--font-num); color: var(--art-ink-2); margin-top: var(--sp-12); }

/* ---------- 설정 화면 ---------- */
.setup,
.app-body { padding: var(--sp-8) 0 var(--sp-24); }

.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-8);
  background: var(--color-surface-sunken);
}
.seg__btn {
  min-height: 44px;
  border: 0;
  border-radius: var(--r-4);
  background: transparent;
  color: var(--color-text-secondary);
  font: var(--label-02);
  cursor: pointer;
  transition: transform 300ms var(--spring);
}
.seg__btn:active { transform: scale(0.94); }
.seg__btn.is-on { background: var(--art-ink); color: var(--art-slip); }

.input-unit { position: relative; }
.input-unit .input { padding-right: 64px; font: 700 20px/1 var(--font-num); letter-spacing: -0.02em; }
.input-unit__suffix {
  position: absolute;
  right: var(--sp-16);
  top: 50%;
  transform: translateY(-50%);
  font: var(--body-03);
  color: var(--color-text-tertiary);
  pointer-events: none;
}
.input { border-radius: var(--r-6); }
.quick { margin-top: calc(var(--sp-8) * -1); }
.quick .chip { min-height: 36px; border-radius: var(--r-4); font-family: var(--font-num); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); }

.stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-2);
  border-radius: var(--r-8);
  background: var(--color-surface-sunken);
}
.stepper .btn { border-color: transparent; background: var(--color-surface); border-radius: var(--r-6); }
.stepper__val { flex: 1; text-align: center; font-family: var(--font-num); }

/* 급여 영수증 (계산 결과) */
.receipt { padding-bottom: var(--sp-32); }
.receipt__store { text-align: center; font: 700 15px/22px var(--font-kr); letter-spacing: 0.1em; }
.receipt__meta { text-align: center; font: 500 12px/18px var(--font-num); color: var(--art-ink-2); }
.result-card { display: flex; flex-direction: column; gap: var(--sp-8); }
.result-card__big { font: 700 40px/48px var(--font-num); letter-spacing: -0.04em; color: var(--color-primary); }
.result-card__big.is-pop { animation: num-pop 520ms var(--spring); }
@keyframes num-pop {
  0% { transform: scale(0.92); }
  100% { transform: none; }
}

.breakdown { width: 100%; border-collapse: collapse; margin: var(--sp-4) 0; font: 500 14px/20px var(--font-num); }
.breakdown th { text-align: left; font: 400 14px/20px var(--font-kr); color: var(--art-ink); padding: var(--sp-4) 0; }
.breakdown td { text-align: right; padding: var(--sp-4) 0; }
.breakdown .is-total th,
.breakdown .is-total td { font: 700 17px/24px var(--font-kr); color: var(--art-ink); padding-top: var(--sp-10); border-top: 1px dashed var(--art-rule); }
.breakdown .is-total td { font-family: var(--font-num); color: var(--color-primary); }
.breakdown .is-sub th { padding-left: var(--sp-12); color: var(--art-ink-2); }
.breakdown .is-sub td { color: var(--art-ink-2); }
.breakdown small { color: var(--art-ink-2); font: 500 11px/1 var(--font-num); }

.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-4); }
.days .chip { justify-content: center; padding: 0; min-height: var(--tap-min); border-radius: var(--r-4); }
.days .chip[aria-pressed="true"] { background: var(--art-ink); border-color: var(--art-ink); color: var(--art-slip); }

/* ---------- 실시간 카운터 ---------- */
.counter {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding: var(--sp-16);
  border-radius: var(--r-12);
  background: var(--art-housing);
  color: var(--art-slip);
  box-shadow: var(--shadow-l), inset 0 2px 0 var(--art-housing-2);
}
.live__coins { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.live__status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  font: 600 13px/18px var(--font-num);
  color: var(--art-wheel-shade);
  letter-spacing: 0.02em;
}
.live__status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: var(--art-ink-2);
}
.live__status.is-work { color: var(--color-primary); }
.live__status.is-work::before { background: var(--color-primary); box-shadow: 0 0 8px var(--color-primary); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.2; } }
#clock { color: var(--art-wheel-shade); font-family: var(--font-num); }
.live__label { margin-top: var(--sp-4); color: var(--art-wheel-shade) !important; }
.live__num { display: flex; align-items: flex-end; gap: var(--sp-4); flex-wrap: nowrap; }
.live__frac { font: 700 20px/1 var(--font-num); color: var(--color-primary); padding-bottom: var(--sp-4); min-width: 2.4em; }
.live__won { font: 700 20px/1 var(--font-kr); color: var(--art-wheel-shade); padding-bottom: var(--sp-6); }
.live__sub { color: var(--art-wheel-shade) !important; font-family: var(--font-num); font-size: 13px; }
.progress { height: 6px; background: var(--art-housing-2); overflow: hidden; margin-top: var(--sp-4); }
.progress span { display: block; height: 100%; width: 0; background: var(--color-primary); transition: width var(--dur-slow) var(--ease-standard); }
.progress-meta { color: var(--art-ink-2); font-family: var(--font-num); }

.fall {
  position: absolute;
  top: -40px;
  display: grid;
  place-items: center;
  pointer-events: none;
  animation: fall 1300ms forwards;
}
.fall--coin { width: 26px; height: 26px; border-radius: var(--r-full); background: var(--art-slip); border: 2px solid var(--art-wheel-shade); color: var(--art-ink); font: 700 9px/1 var(--font-num); }
.fall--bill { width: 58px; height: 28px; border-radius: var(--r-0); background: var(--color-primary); color: var(--brand-on); font: 700 11px/1 var(--font-num); }
@keyframes fall {
  0% { transform: translateY(0) rotate(0) scale(0.8, 1.2); opacity: 0; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  10% { opacity: 1; }
  100% { transform: translateY(260px) rotate(var(--rot, 200deg)); opacity: 0; }
}

/* 환산표 (영수증 리스트) */
.conv { display: flex; flex-direction: column; }
.conv__row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-8);
  padding: var(--sp-8) 0;
  font: 400 15px/22px var(--font-kr);
}
.conv__label { flex: none; color: var(--art-ink); }
.conv__dots { flex: 1; min-width: var(--sp-16); border-bottom: 2px dotted var(--art-rule); transform: translateY(-4px); }
.conv__val { flex: none; font: 700 16px/22px var(--font-num); color: var(--art-ink); }
.conv__row.is-hot .conv__val { color: var(--color-primary); }
.conv__note { font: 400 12px/1 var(--font-num); color: var(--art-ink-2); }

/* 월급루팡 */
.lupang { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); }
.lupang__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  min-height: 92px;
  padding: var(--sp-10) var(--sp-4);
  border: 0;
  border-radius: var(--r-8);
  background: var(--color-surface-sunken);
  box-shadow: inset 0 -4px 0 var(--art-rule);
  color: var(--art-ink);
  cursor: pointer;
  transition: transform 380ms var(--spring), box-shadow 120ms;
}
.lupang__btn:active { transform: translateY(3px) scale(0.96, 0.92); box-shadow: inset 0 -1px 0 var(--art-rule); transition-duration: 70ms; }
.lupang__btn .e { font-size: 26px; line-height: 32px; }
.lupang__btn .n { font: var(--label-02); }
.lupang__btn .v { font: 600 12px/16px var(--font-num); color: var(--art-ink-2); }
.lupang__btn.is-on { background: var(--art-ink); color: var(--art-slip); box-shadow: inset 0 -4px 0 var(--color-primary); }
.lupang__btn.is-on .v { color: var(--color-primary); }
.lupang__now { padding: var(--sp-12) var(--sp-16); border-radius: var(--r-8); background: var(--color-surface-sunken); }
.lupang__now .t-title-03 { font-family: var(--font-num); }
.lupang__now.is-on { background: var(--brand-soft); }
.lupang__now.is-on .t-title-03 { color: var(--color-primary); }

/* 회의 */
.meet__board {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-8);
  padding: var(--sp-16);
  border-radius: var(--r-12);
  background: var(--art-housing);
  color: var(--art-wheel-shade);
}
.meet__board .t-label-02 { color: var(--art-wheel-shade); }
.meet__num { display: flex; align-items: flex-end; gap: var(--sp-4); }
.meet__num .live__won { padding-bottom: var(--sp-4); }
.meet__board .t-body-03 { color: var(--art-wheel-shade); font-family: var(--font-num); font-size: 13px; }
.meet__board.is-on .t-label-02 { color: var(--color-primary); }

.sum-grid { display: flex; flex-direction: column; }
.sum-grid > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-8); padding: var(--sp-6) 0; }
.sum-grid b { font: 700 16px/22px var(--font-num); color: var(--art-ink); }
.sum-grid span { font: 400 14px/20px var(--font-kr); color: var(--art-ink-2); }

.tip { display: flex; align-items: center; gap: var(--sp-12); }
.tip__icon { font-size: 26px; line-height: 1; }

/* ---------- 영수증 시트 ---------- */
.receipt-slot {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-12);
  background: var(--art-housing);
  padding: var(--sp-12) var(--sp-24) 0;
}
.receipt-slot::before {
  content: "";
  position: absolute;
  left: var(--sp-12);
  right: var(--sp-12);
  top: var(--sp-6);
  height: 6px;
  border-radius: var(--r-full);
  background: var(--art-ink);
  z-index: 1;
}
.receipt-paper img { width: 100%; height: auto; }
.receipt-paper.is-print { animation: print-in 1800ms steps(24) both; }
.sheet-actions { margin-top: var(--sp-16); }

/* ---------- SEO ---------- */
.seo h2 { font-family: var(--font-kr); }
.table-wrap { overflow-x: auto; margin: var(--sp-8) 0 var(--sp-12); background: var(--art-slip); }
.seo-table { width: 100%; border-collapse: collapse; font: var(--body-03); }
.seo-table th,
.seo-table td { padding: var(--sp-8) var(--sp-10); text-align: left; border-bottom: 1px dashed var(--art-rule); white-space: nowrap; }
.seo-table thead th { font: var(--label-03); color: var(--art-ink-2); border-bottom: 1px solid var(--art-ink); }
.seo-table tbody th { font-weight: 600; color: var(--art-ink); }
.seo-table tbody tr:last-child th,
.seo-table tbody tr:last-child td { border-bottom: 0; }
.seo-table--num td { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.seo-table--num { font: var(--caption-01); }
.seo-table--num th,
.seo-table--num td { padding: var(--sp-8) var(--sp-6); }
.seo-table--num thead th { text-align: right; }
.seo-table--num thead th:first-child { text-align: left; }
.seo ol { padding-left: var(--sp-20); }

/* 잉크색 버튼 (회의 중 정지 버튼) */
.btn--ink { --_bg: var(--art-ink); --_fg: var(--art-slip); --_bg-pressed: var(--art-housing-2); }

/* 등장 애니메이션 중 커지는 요소가 가로 스크롤을 만들지 않게 */
main.app { overflow-x: clip; }

/* 장면 3: 빈 감열지가 먼저 나오고, 헤드가 한 줄씩 찍는다 */
.scene--center .paper { transform: translateY(-16px); min-height: 100%; padding-top: var(--sp-24); }
.scene--center .paper.is-print { animation: paper-feed 1500ms steps(15) forwards; }
.scene--center .paper > * { visibility: hidden; }
.scene--center .paper > .is-on { visibility: visible; animation: line-in 140ms var(--ease-out) both; }
@keyframes paper-feed { to { transform: translateY(0); } }
@keyframes line-in {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* =========================================================
 * 2차 개편: POS 발행 키, 계산 근거 영수증
 * ========================================================= */

/* 영수증은 화면 맨 위에서 바로 출력돼 나온다 */
.intro { padding-top: 0; }
.masthead h1.masthead__store { font: 700 22px/30px var(--font-kr); }

/* 시작 버튼: POS 단말기의 '발행' 키 */
.pos-key {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: stretch;
  gap: var(--sp-12);
  width: 100%;
  min-height: 72px;
  padding: var(--sp-8);
  border: 0;
  border-radius: var(--r-8);
  background: var(--art-housing);
  box-shadow: var(--shadow-m), inset 0 2px 0 var(--art-housing-2);
  color: var(--art-slip);
  text-align: left;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.pos-key::after {
  content: "↵";
  align-self: center;
  padding-right: var(--sp-8);
  font: 700 22px/1 var(--font-num);
  color: var(--art-ink-2);
  transition: transform 380ms var(--spring), color var(--dur-fast);
}
.pos-key__cap {
  display: grid;
  place-items: center;
  min-width: 84px;
  padding: 0 var(--sp-12) var(--sp-4);
  border-radius: var(--r-4);
  background: var(--brand);
  color: var(--brand-on);
  font: 700 21px/1 var(--font-num);
  letter-spacing: 0.12em;
  box-shadow: inset 0 -6px 0 var(--brand-pressed);
  transition: transform 380ms var(--spring), box-shadow 120ms;
}
.pos-key__body { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-2); min-width: 0; }
.pos-key__body b { font: 700 17px/22px var(--font-kr); letter-spacing: -0.02em; }
.pos-key__body small { font: 500 12px/16px var(--font-num); color: var(--art-wheel-shade); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-key:active:not(:disabled) .pos-key__cap { transform: translateY(4px) scale(0.98, 0.94); box-shadow: inset 0 -2px 0 var(--brand-pressed); transition-duration: 70ms; }
.pos-key:active:not(:disabled)::after { transform: translateX(-4px); color: var(--brand); transition-duration: 70ms; }
.pos-key:disabled { cursor: not-allowed; }
.pos-key:disabled .pos-key__cap { background: var(--art-housing-2); color: var(--art-ink-2); box-shadow: inset 0 -6px 0 var(--art-ink); }
.pos-key:disabled .pos-key__body b { color: var(--art-wheel-shade); }
.pos-key--slim { min-height: 60px; padding: var(--sp-6); }
.pos-key--slim .pos-key__cap { min-width: 68px; font-size: 17px; }
.pos-key--slim .pos-key__body b { font-size: 15px; }
/* 인트로 첫 등장: 키가 단말기에서 한 번 눌렸다 올라온다 */
.intro .pos-key .pos-key__cap { animation: key-tap 900ms var(--spring) 600ms both; }
@keyframes key-tap {
  0% { transform: translateY(-6px); box-shadow: inset 0 -10px 0 var(--brand-pressed); }
  35% { transform: translateY(4px) scale(1, 0.92); box-shadow: inset 0 -2px 0 var(--brand-pressed); }
  100% { transform: none; box-shadow: inset 0 -6px 0 var(--brand-pressed); }
}
.intro__note { margin: 0; font: 500 12px/18px var(--font-num); color: var(--art-ink-2); text-align: left; }
.intro__note a { color: var(--art-ink); text-underline-offset: 3px; }

/* 영수증 점선 리더 한 줄 (설정 화면 실수령 미리보기) */
.net-line { display: flex; align-items: baseline; gap: var(--sp-8); font: 400 15px/22px var(--font-kr); color: var(--art-ink); }
.net-line i { flex: 1; min-width: var(--sp-16); border-bottom: 2px dotted var(--art-rule); transform: translateY(-4px); }
.net-line b { font: 700 22px/28px var(--font-num); color: var(--color-primary); letter-spacing: -0.03em; }
.net-line b.is-pop { animation: num-pop 520ms var(--spring); }

/* 절취선 링크 (다른 페이지로) */
.tear-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  min-height: var(--tap-min);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 2px dashed var(--art-rule);
  color: var(--art-ink);
  font: 600 14px/20px var(--font-kr);
  text-decoration: none;
}
.tear-link span { font: 700 18px/1 var(--font-num); color: var(--color-primary); transition: transform 380ms var(--spring); }
.tear-link:active span { transform: translateX(6px); }

.lupang__how { font: 400 13px/20px var(--font-kr); color: var(--art-ink-2); }
.tip__key {
  flex: none;
  padding: var(--sp-6) var(--sp-8) var(--sp-8);
  border-radius: var(--r-4);
  background: var(--art-housing);
  color: var(--art-slip);
  font: 700 11px/1 var(--font-num);
  letter-spacing: 0.1em;
  box-shadow: inset 0 -3px 0 var(--art-ink);
}
.topbar__brand { font: 700 15px/1 var(--font-num); }

/* 일반 버튼도 둥근 알약 대신 단말기 키처럼 */
.btn { border-radius: var(--r-4); }
.btn--primary { box-shadow: inset 0 -4px 0 var(--brand-pressed); }
.btn--primary:active:not(:disabled) { box-shadow: inset 0 -1px 0 var(--brand-pressed); }

/* ---------- SEO: 계산 근거 영수증 + 약관 ---------- */
.doc-seo { display: flex; flex-direction: column; gap: var(--sp-24); color: var(--art-ink); }
.doc {
  padding: var(--sp-20) var(--sp-16) var(--sp-32);
  background: var(--art-slip);
  -webkit-mask: var(--tear);
  mask: var(--tear);
}
.doc__head { text-align: center; padding-bottom: var(--sp-12); margin-bottom: var(--sp-8); border-bottom: 2px dotted var(--art-rule); }
.seo .doc__store { margin: 0; font: 700 17px/24px var(--font-kr); letter-spacing: 0.02em; color: var(--art-ink); }
.seo .doc__meta { margin: var(--sp-4) 0 0; font: 500 11px/16px var(--font-num); color: var(--art-ink-2); }
.doc-table { width: 100%; border-collapse: collapse; }
.doc-table th { padding: var(--sp-6) 0; text-align: left; font: 400 14px/20px var(--font-kr); color: var(--art-ink); }
.doc-table th small { display: block; font: 500 11px/14px var(--font-num); color: var(--art-ink-2); }
.doc-table td { padding: var(--sp-6) 0; text-align: right; white-space: nowrap; font: 700 15px/20px var(--font-num); vertical-align: top; }
.doc-table .is-sub th { padding-left: var(--sp-12); color: var(--art-ink-2); }
.doc-table .is-sub td { color: var(--art-ink-2); font-weight: 500; }
.doc-table .is-total th,
.doc-table .is-total td { padding-top: var(--sp-10); border-top: 1px dashed var(--art-rule); font-size: 17px; line-height: 24px; font-weight: 700; }
.doc-table .is-total td { color: var(--color-primary); }
.seo .doc__foot { margin: var(--sp-12) 0 0; font: 500 12px/18px var(--font-num); color: var(--art-ink-2); }
.doc__foot a { color: var(--art-ink); }
.doc .table-wrap { margin: 0; background: transparent; }
.doc .seo-table th,
.doc .seo-table td { padding-left: var(--sp-4); padding-right: var(--sp-4); }
/* 자주 묻는 질문: POS 도움말 키. 키를 누르면 답이 감열지로 찍혀 나온다 */
.fkeys { display: flex; flex-direction: column; gap: var(--sp-8); padding-top: var(--sp-4); }
.fkey summary {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  min-height: 52px;
  list-style: none;
  cursor: pointer;
  font: 600 14px/20px var(--font-kr);
  color: var(--art-ink);
  -webkit-user-select: none;
  user-select: none;
}
.fkey summary::-webkit-details-marker { display: none; }
.fkey kbd {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 44px;
  border-radius: var(--r-4);
  background: var(--art-housing);
  color: var(--art-slip);
  font: 700 15px/1 var(--font-num);
  box-shadow: inset 0 -5px 0 var(--art-ink), inset 0 1px 0 var(--art-housing-2);
  transition: transform 380ms var(--spring), box-shadow 120ms, background var(--dur-fast);
}
.fkey summary:active kbd { transform: translateY(3px) scale(0.97, 0.92); box-shadow: inset 0 -2px 0 var(--art-ink); transition-duration: 70ms; }
.fkey[open] kbd { background: var(--brand); color: var(--brand-on); box-shadow: inset 0 -5px 0 var(--brand-pressed); }
.fkey summary span { flex: 1; min-width: 0; }
.seo .fkey__out {
  position: relative;
  margin: var(--sp-2) 0 var(--sp-8) var(--sp-24);
  padding: var(--sp-10) var(--sp-12) var(--sp-16) var(--sp-12);
  background: var(--art-paper);
  font: 500 13px/20px var(--font-kr);
  color: var(--art-ink);
  -webkit-mask: var(--tear);
  mask: var(--tear);
  border-top: 3px solid var(--art-ink);
}
.fkey[open] .fkey__out { animation: fkey-print 520ms steps(8) both; }
@keyframes fkey-print {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0); }
}

/* 하단 추천: 영수증 끝에 인쇄된 절취 쿠폰 */
.more-sites { padding-top: var(--sp-16); }
.more-sites__title {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  margin: 0 0 var(--sp-12);
  padding: 0;
  opacity: 1;
  font: 700 15px/20px var(--font-kr);
  color: var(--art-ink);
}
.more-sites__title small { margin-left: auto; font: 500 11px/14px var(--font-num); color: var(--art-ink-2); }
.cpn-cut {
  display: inline-flex;
  align-items: center;
  font: 700 18px/1 var(--font-num);
  color: var(--art-ink-2);
  transform: rotate(-90deg);
}
.more-sites__title::after { display: none; }
.more-sites { position: relative; }
.more-sites::before {
  content: "- - - - - - - - - - 여기를 잘라 쓰세요 - - - - - - - - - -";
  display: block;
  overflow: hidden;
  margin-bottom: var(--sp-12);
  white-space: nowrap;
  text-align: center;
  font: 500 11px/14px var(--font-num);
  letter-spacing: 0.06em;
  color: var(--art-ink-2);
}
.more-sites__grid { gap: var(--sp-10); counter-reset: cpn; }
.more-sites__item {
  --notch: radial-gradient(circle at 76px 0, transparent 9px, #000 9.5px) top / 100% 51% no-repeat,
    radial-gradient(circle at 76px 100%, transparent 9px, #000 9.5px) bottom / 100% 51% no-repeat;
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: var(--sp-12);
  row-gap: var(--sp-2);
  min-height: 76px;
  padding: var(--sp-12) var(--sp-12) var(--sp-12) 0;
  border: 0;
  border-radius: var(--r-4);
  background: var(--art-slip);
  color: var(--art-ink);
  text-decoration: none;
  -webkit-mask: var(--notch);
  mask: var(--notch);
  transition: transform 380ms var(--spring);
  counter-increment: cpn;
}
.more-sites__item:nth-child(2) { rotate: -0.6deg; }
.more-sites__item:nth-child(3) { rotate: 0.5deg; }
.more-sites__item:active { transform: translateX(6px) rotate(1.2deg); transition-duration: 80ms; }
.cpn__stub {
  grid-row: 1 / 3;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  margin: calc(var(--sp-12) * -1) 0;
  border-right: 2px dashed var(--art-rule);
}
.cpn__stub b { font: 700 26px/1 var(--font-num); color: var(--color-primary); letter-spacing: -0.04em; }
.cpn__stub b small { font: 700 12px/1 var(--font-kr); margin-left: 1px; }
.cpn__stub i { font: 500 9px/12px var(--font-num); font-style: normal; color: var(--art-ink-2); letter-spacing: 0.02em; }
.more-sites__name { grid-column: 2; align-self: end; font: 700 16px/22px var(--font-kr); letter-spacing: -0.02em; color: var(--art-ink); }
.more-sites__desc { grid-column: 2; align-self: start; opacity: 1; font: 500 12px/18px var(--font-num); color: var(--art-ink-2); }
.cpn__use {
  grid-column: 3;
  grid-row: 1 / 3;
  padding: var(--sp-6) var(--sp-8);
  border: 1.5px solid var(--art-ink);
  border-radius: var(--r-4);
  font: 700 12px/1 var(--font-num);
  color: var(--art-ink);
  white-space: nowrap;
}
.more-sites__item:active .cpn__use { background: var(--brand); border-color: var(--brand); color: var(--brand-on); }

/* 인트로 캡션: 제목 + 회색 부제 대신, 영수증 하단 각주 줄 */
.intro__caption p { margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 1px dashed var(--art-rule); font: 500 13px/20px var(--font-num); color: var(--art-ink-2); }
.intro__caption p::before { content: "* "; color: var(--color-primary); }