/* 콩콩판 키즈카페 — 키즈카페 디자인 샘플 (디코랩)
   구성: 페이지 = 주사위 보드게임 판. 섹션은 판의 큰 칸, 칸 사이는 트랙(길)과 "쉬어 가는 칸"(이용 규칙).
   색은 놀이터 실물에서: 퍼즐 매트, 주사위 눈, 연두 놀이 매트, 볼풀 공, 쉬어 가는 칸 스티커 */
:root {
  --color-mat: #F3F5EA;        /* 퍼즐 매트 — 배경 */
  --color-mat-line: #E1E7CF;   /* 매트 이음선 */
  --color-dice: #22262E;       /* 주사위 눈 — 본문 글자·선 */
  --color-muted: #59606B;      /* 보조 글자 (흰 바탕 6.4:1) */
  --color-sprout: #7DBB2E;    /* 연두 놀이 매트 — 칸 머리띠·트랙·theme-color (진한 글자 6.4:1) */
  --color-leaf: #3D6B12;       /* 잎 초록 — 흰 바탕 위 작은 강조 글자 (6.3:1) */
  --color-sprout-pale: #D9EDB8;      /* 옅은 매트 연두 — 트랙 칸·보조 면 */
  --color-sprout-soft: #F7FAEE;
  --color-ball: #FF6B4A;       /* 볼풀 공 다홍 — 주 버튼에만 */
  --color-ball-deep: #F2522D;
  --color-sticker: #FFF0B3;    /* 쉬어 가는 칸 스티커 — 규칙 칸·추천 칸 */
  --color-star: #FFD34E;       /* 반짝이는 별 */
  --color-paper: #FFFFFF;

  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui,
          "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-display: "Kirang Haerang", var(--font);

  --fs-h1: clamp(2.6rem, 1.6rem + 3.8vw, 4.6rem);
  --fs-h2: clamp(2.05rem, 1.55rem + 1.9vw, 3rem);
  --fs-h3: 1.15rem;
  --fs-body: 1.0625rem;
  --fs-small: .875rem;

  --radius: 22px;
  --header-h: 60px;
  --rail: 34px;               /* 모바일: 왼쪽 레일 폭 */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 14px); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--color-dice);
  background-color: var(--color-mat);
  /* 퍼즐 매트 이음선 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='132'%3E%3Cpath d='M0 1H52c0 10 6 14 14 14s14-4 14-14H132M1 0V52c10 0 14 6 14 14s-4 14-14 14V132' fill='none' stroke='%23E1E7CF' stroke-width='2.5'/%3E%3C/svg%3E");
  background-size: 132px 132px;
  word-break: keep-all;
  overflow-wrap: anywhere;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.25; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--color-dice); color: #fff; border-radius: 8px; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--color-leaf); outline-offset: 3px; }

/* 실제 정보 자리 */
.ph { display: inline-block; padding: 0 .4em; border: 1.5px dashed currentColor; border-radius: 6px; opacity: .85; font-size: .92em; line-height: 1.6; }

/* 샘플 안내 띠 */
.sample-banner { background: var(--color-dice); color: #E6E8EC; font-size: var(--fs-small); line-height: 1.55; }
.sample-banner__inner { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; }
.sample-banner__tag { flex: none; padding: 1px 8px; border-radius: 99px; background: var(--color-star); color: var(--color-dice); font-weight: 700; font-size: .78rem; }
.sample-banner a { color: var(--color-star); font-weight: 600; }

/* 헤더 — backdrop-filter·transform 을 쓰지 않는다(모바일 메뉴가 헤더 높이로 잘리는 문제) */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--color-paper); border-bottom: 3px solid var(--color-dice); }
.site-header__inner { display: flex; align-items: center; gap: 12px; height: var(--header-h); }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; margin-right: auto; }
.logo svg { width: 36px; height: 36px; flex: none; }
.logo b { display: flex; align-items: baseline; gap: 5px; font-family: var(--font-display); font-weight: 400; font-size: 1.75rem; line-height: 1; letter-spacing: 0; white-space: nowrap; }
.logo small { font-family: var(--font); font-size: .8rem; font-weight: 700; color: var(--color-muted); }
.gnb__title, .gnb__tel { display: none; }
.gnb a { text-decoration: none; }
.header-tel { display: grid; place-items: center; width: 44px; height: 44px; border: 2.5px solid var(--color-dice); border-radius: 50%; color: var(--color-dice); text-decoration: none; }
.header-tel svg { width: 20px; height: 20px; }
.header-tel span { display: none; }
.menu-toggle { display: block; width: 44px; height: 44px; border: 0; background: none; padding: 0; cursor: pointer; position: relative; }
.menu-toggle__bar, .menu-toggle__bar::before, .menu-toggle__bar::after { position: absolute; left: 10px; width: 24px; height: 3px; border-radius: 2px; background: var(--color-dice); content: ""; transition: transform .25s, opacity .2s; }
.menu-toggle__bar { top: 21px; }
.menu-toggle__bar::before { left: 0; top: -7px; }
.menu-toggle__bar::after { left: 0; top: 7px; }
.site-header.is-open .menu-toggle__bar { background: transparent; }
.site-header.is-open .menu-toggle__bar::before { transform: translateY(7px) rotate(45deg); }
.site-header.is-open .menu-toggle__bar::after { transform: translateY(-7px) rotate(-45deg); }

/* 모바일 메뉴: 칸 목록이 세로 트랙처럼 */
@media (max-width: 1199px) {
  .gnb { position: fixed; z-index: 45; left: 0; right: 0; top: var(--menu-top, var(--header-h)); bottom: 0; display: flex; flex-direction: column; gap: 0; padding: 14px 20px 40px; background: var(--color-mat); overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease, visibility 0s .2s; }
  .site-header.is-open .gnb { visibility: visible; opacity: 1; transform: none; transition: opacity .2s ease, transform .2s ease; }
  .gnb__title { display: block; font-size: var(--fs-small); font-weight: 700; color: var(--color-muted); margin: 0 0 6px 4px; }
  .gnb a:not(.gnb__tel) { position: relative; display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 6px 4px; font-weight: 700; font-size: 1.1rem; }
  .gnb a:not(.gnb__tel) + a:not(.gnb__tel)::before { content: ""; position: absolute; left: 20px; top: -14px; height: 22px; border-left: 3px dotted var(--color-sprout); }
  .gnb a svg { width: 34px; height: 34px; flex: none; color: var(--color-dice); }
  .gnb a.is-active svg { --die-face: var(--color-sprout); color: var(--color-dice); }
  .gnb a.is-active span::after { content: "지금 칸"; margin-left: 8px; padding: 1px 8px; border-radius: 99px; background: var(--color-star); font-size: .78rem; vertical-align: .15em; }
  .gnb__tel { display: flex; align-items: center; justify-content: center; min-height: 54px; margin-top: 20px; border-radius: 99px; background: var(--color-ball); border: 2.5px solid var(--color-dice); font-weight: 800; }
}

/* 버튼 — 다홍(볼풀 공)은 전환 버튼에만 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px; border-radius: 999px; font-weight: 800; font-size: 1.02rem; text-decoration: none; border: 2.5px solid var(--color-dice); cursor: pointer; font-family: inherit; box-shadow: 0 4px 0 var(--color-dice); transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--color-dice); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--color-dice); }
.btn--ball { background: var(--color-ball); color: var(--color-dice); }
.btn--ball:hover { background: var(--color-ball-deep); }
.btn--line { background: var(--color-paper); color: var(--color-dice); }
.btn--line:hover { background: var(--color-sprout-soft); }
.btn--plain { background: var(--color-paper); color: var(--color-dice); }
.btn--lg { min-height: 60px; font-size: 1.1rem; padding: 0 28px; }

/* ===== 판 ===== */
.board { position: relative; width: min(1200px, 100% - 24px); margin-inline: auto; padding: 22px 0 72px; }
.track { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; overflow: visible; }
.track__road { fill: none; stroke: var(--color-sprout-pale); stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.track__sq { stroke: var(--color-dice); stroke-width: 2; }
.track__sq--a { fill: var(--color-paper); }
.track__sq--b { fill: var(--color-sprout-pale); }
.stop use { color: var(--color-dice); --die-face: var(--color-paper); transition: color .3s ease; }
.stop.is-passed use { --die-face: var(--color-sprout); color: var(--color-dice); }
.stop__shadow { fill: var(--color-dice); }
.stop__label { font: 800 15px var(--font); fill: var(--color-dice); text-anchor: middle; }
.stop--start rect.stop__face { fill: var(--color-star); stroke: var(--color-dice); stroke-width: 3; }
.stop--start text { font: 400 28px var(--font-display); fill: var(--color-dice); }

.token { position: absolute; left: 0; top: 0; z-index: 4; width: 38px; height: 51px; pointer-events: none; display: none; }
.js .token.is-ready { display: block; }
.token__body { width: 100%; height: 100%; transform-origin: 50% 100%; }
.token__body svg { width: 100%; height: 100%; }
body.nav-open .token { visibility: hidden; }

/* 칸 */
.cell { position: relative; z-index: 1; background: var(--color-paper); border: 3px solid var(--color-dice); border-radius: var(--radius); box-shadow: 0 6px 0 var(--color-dice); }
.cell__band { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--color-sprout); color: var(--color-dice); border-radius: calc(var(--radius) - 3px) calc(var(--radius) - 3px) 0 0; border-bottom: 3px solid var(--color-dice); font-weight: 700; font-size: 1.02rem; }
.band__die { width: 32px; height: 32px; flex: none; color: var(--color-dice); --die-face: #fff; }
.band__no { font-family: var(--font-display); font-weight: 400; font-size: 1.75rem; line-height: 1; }
.cell__body { padding: 24px 18px 28px; }
.cell__head { max-width: 36em; margin-bottom: 24px; }
.cell__head h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -.01em; margin-bottom: 10px; }
.cell__head p { color: var(--color-muted); }
.cell h3 { font-size: var(--fs-h3); }

/* 쉬어 가는 칸(이용 규칙) */
.rule { position: relative; z-index: 3; display: flex; gap: 12px; align-items: center; margin: 18px 0 18px var(--rail); padding: 12px 16px; background: var(--color-sticker); border: 3px solid var(--color-dice); border-radius: 18px; box-shadow: 0 4px 0 var(--color-dice); font-size: .93rem; line-height: 1.55; }
.rule__icon { width: 40px; height: 40px; flex: none; }
.rule p { color: var(--color-dice); }
.rule__kicker { display: block; font-family: var(--font-display); font-size: 1.2rem; line-height: 1.2; color: var(--color-leaf); }
.rule b { display: block; font-size: 1.05rem; }

.row { margin-left: var(--rail); }
.row__deco { display: none; }

/* ===== 출발: 히어로 ===== */
.hero { overflow: hidden; padding: 22px 18px 0; }
.hero__grid { display: grid; gap: 14px; }
.cell__band--start { display: inline-flex; padding: 4px 14px 4px 5px; border: 2.5px solid var(--color-dice); border-radius: 99px; background: var(--color-sprout-soft); color: var(--color-dice); font-size: .92rem; margin-bottom: 14px; }
.cell__band--start .band__no { padding: 5px 10px 4px; border-radius: 99px; background: var(--color-dice); color: #fff; font-size: 1.25rem; }
.hero__title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h1); line-height: 1.1; letter-spacing: -.01em; margin-bottom: 14px; }
.hero__lead { max-width: 30em; color: var(--color-muted); margin-bottom: 20px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.hero__facts { display: grid; gap: 2px; margin: 0; padding: 12px 0 0; border-top: 2.5px dashed var(--color-sprout-pale); font-size: .93rem; }
.hero__facts div { display: flex; gap: 10px; align-items: baseline; }
.hero__facts dt { width: 6.6em; flex: none; color: var(--color-muted); font-weight: 600; font-size: .85rem; }
.hero__facts dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 640px) {
  .hero__facts { grid-template-columns: repeat(3, auto); justify-content: start; gap: 4px 28px; }
  .hero__facts div { display: block; }
  .hero__facts dt { width: auto; }
}
.hero__art { margin: 0 -18px; }
.playground { width: 100%; height: auto; max-width: 560px; margin: 0 auto; }
.start-spot { position: absolute; left: 2px; bottom: -15px; width: 26px; height: 26px; }
/* JS 가 트랙을 못 그려도 모바일 레일 자리는 점선으로 남긴다 */
@media (max-width: 1023px) {
  .board::before { content: ""; position: absolute; left: 13px; top: 120px; bottom: 80px; border-left: 4px dotted var(--color-sprout-pale); }
  .board.has-track::before { display: none; }
}

/* 등장: 보이는 상태가 기본, has-motion 일 때만 숨겼다 보여 준다 */
.has-motion [data-hero-item] { opacity: 0; transform: translateY(16px); }
.has-motion .is-ready [data-hero-item] { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1); }
.has-motion .is-ready [data-hero-item]:nth-child(2) { transition-delay: .07s; }
.has-motion .is-ready [data-hero-item]:nth-child(3) { transition-delay: .14s; }
.has-motion .is-ready [data-hero-item]:nth-child(4) { transition-delay: .21s; }
.has-motion .is-ready [data-hero-item]:nth-child(5) { transition-delay: .28s; }
.pg-die, .pg-fly, .pg-zip { transform-box: fill-box; transform-origin: center; }
.has-motion .is-ready .pg-die { animation: dieRoll .9s cubic-bezier(.3,1.3,.5,1) .3s both; }
.has-motion .is-ready .pg-fly { animation: ballHop .7s ease-out .55s 2 alternate both; }
@keyframes dieRoll { from { opacity: 0; transform: translate(-40px, -60px) rotate(-200deg); } to { opacity: 1; transform: none; } }
@keyframes ballHop { from { transform: translateY(0); } to { transform: translateY(-16px); } }

.has-motion .reveal { opacity: 0; transform: translateY(20px); }
.has-motion .reveal.is-in { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1); }
.has-motion .rule.reveal { transform: scale(.9) rotate(-2deg); }
.has-motion .rule.reveal.is-in { transform: none; transition: opacity .4s ease, transform .5s cubic-bezier(.3,1.5,.5,1); }

/* ===== 1칸: 놀이 구역 ===== */
.zone-grid { list-style: none; display: grid; gap: 12px; }
.zone-tile { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: start; padding: 14px; background: var(--color-sprout-soft); border: 2.5px solid var(--color-dice); border-radius: 16px; transition: background-color .3s ease, border-color .3s ease; }
.zone-tile__icon { width: 52px; height: 52px; }
.zone-tile h3 { font-size: 1.12rem; }
.zone-tile__age { display: inline-block; margin: 2px 0 6px; padding: 0 9px; border-radius: 99px; background: var(--color-paper); border: 1.5px solid var(--color-dice); font-size: .8rem; font-weight: 700; }
.zone-tile p:not(.zone-tile__age) { font-size: .95rem; line-height: 1.6; color: var(--color-muted); }
.zone-tile--cafe { background: var(--color-paper); border-style: dashed; }
.zone-tile--cafe a { font-weight: 700; color: var(--color-leaf); }
.zone-tile.is-pick { background: var(--color-sticker); }
.zone-tile.is-pick::after { content: "추천"; position: absolute; top: -10px; right: 12px; padding: 0 9px; border-radius: 99px; background: var(--color-sprout); color: var(--color-dice); font-size: .76rem; font-weight: 800; line-height: 1.7; border: 2px solid var(--color-dice); }

/* ===== 2칸: 이용료 ===== */
.fee { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.fee > * { min-width: 0; }
.fee-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.pick { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pick legend, .stepper__label { width: 100%; margin-bottom: 6px; font-weight: 800; font-size: .95rem; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: baseline; gap: 5px; min-height: 44px; padding: 9px 15px; border-radius: 12px; border: 2.5px solid var(--color-dice); background: var(--color-paper); font-weight: 700; font-size: .95rem; line-height: 1.4; transition: background-color .18s, color .18s; }
.chip small { font-weight: 500; font-size: .78rem; opacity: .85; }
.chip input:checked + span { background: var(--color-sprout); color: var(--color-dice); box-shadow: 0 3px 0 var(--color-dice); }
.chip input:focus-visible + span { outline: 3px solid var(--color-ball); outline-offset: 2px; }
.counts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stepper { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 6px; }
.stepper__label { grid-column: 1 / -1; margin-bottom: 0; }
.stepper button { width: 44px; height: 44px; border-radius: 12px; border: 2.5px solid var(--color-dice); background: var(--color-paper); font: 800 1.3rem/1 var(--font); color: var(--color-dice); cursor: pointer; transition: background-color .15s; }
.stepper button:hover { background: var(--color-sprout-pale); }
.stepper button:disabled { opacity: .35; cursor: not-allowed; }
.stepper output { text-align: center; font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; }

.fee-result { background: var(--color-dice); color: #fff; border: 3px solid var(--color-dice); border-radius: 18px; padding: 18px 18px 16px; box-shadow: 0 5px 0 var(--color-dice); }
.fee-result__label { color: var(--color-sprout); font-family: var(--font-display); font-size: 1.35rem; line-height: 1.1; }
.fee-result__total { color: var(--color-sprout); font-size: clamp(2.3rem, 1.8rem + 1.6vw, 2.9rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-bottom: 10px; }
.fee-result__total span { display: inline-block; }
.fee-result__total.is-bump span { animation: bump .35s cubic-bezier(.3,1.6,.5,1); }
@keyframes bump { from { transform: translateY(-6px) scale(1.06); } to { transform: none; } }
.fee-result__lines { list-style: none; margin-bottom: 10px; border-top: 2px dashed rgba(255,255,255,.45); }
.fee-result__lines li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 2px dashed rgba(255,255,255,.45); font-size: .95rem; }
.fee-result__lines b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fee-result__note { font-size: .84rem; color: #E3E8E0; line-height: 1.55; }
.fee-result__tip { margin-bottom: 8px; padding: 8px 12px; border-radius: 10px; background: var(--color-sticker); color: var(--color-dice); font-size: .9rem; font-weight: 700; line-height: 1.5; }

.playmap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px; background: var(--color-sprout-soft); border: 2.5px solid var(--color-dice); border-radius: 18px; }
.playmap__title { font-weight: 700; }
.playmap__title b { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; color: var(--color-leaf); }
.playmap__grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 360px; }
.playmap__grid li { position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; aspect-ratio: 1; padding: 6px 4px; background: var(--color-paper); border: 2.5px solid var(--color-dice); border-radius: 12px; font-size: .78rem; font-weight: 700; line-height: 1.25; text-align: center; transition: background-color .3s ease; }
.playmap__grid svg { width: 46%; height: auto; aspect-ratio: 1; }
.playmap__grid li.is-pick { background: var(--color-sticker); border-color: var(--color-leaf); box-shadow: inset 0 0 0 2px var(--color-leaf); }
.playmap__grid li.is-pick::after { content: ""; position: absolute; top: -9px; right: -9px; width: 22px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l2.6 7.2 7.4 2.8-7.4 2.8L12 21.5l-2.6-7.2L2 11.5l7.4-2.8z' fill='%23FFD34E' stroke='%2322262E' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.playmap__grid li.is-flash { animation: pop .45s cubic-bezier(.3,1.6,.5,1); }
.playmap__grid li.is-flash::after { animation: twinkle .45s ease-in-out 4 alternate; }
.zone-tile.is-flash { animation: pop .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes pop { from { transform: scale(.88); } to { transform: none; } }
@keyframes twinkle { from { transform: scale(.5) rotate(-30deg); opacity: .4; } to { transform: scale(1.15) rotate(10deg); opacity: 1; } }
.playmap__cafe { background: var(--color-sprout-pale) !important; }
.playmap__door { border-style: dashed !important; color: var(--color-muted); }
.picks { list-style: none; display: grid; gap: 6px; }
.picks li { padding-left: 16px; position: relative; font-size: .95rem; line-height: 1.55; }
.picks li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 2px; background: var(--color-sprout); }
.picks b { margin-right: 4px; }

.ratecard { margin-top: 18px; border: 2.5px solid var(--color-dice); border-radius: 14px; background: var(--color-paper); }
.ratecard summary { cursor: pointer; padding: 12px 16px; font-weight: 800; }
.ratecard__scroll { overflow-x: auto; padding: 0 12px 12px; }
.ratecard table { width: 100%; min-width: 440px; border-collapse: collapse; font-size: .93rem; font-variant-numeric: tabular-nums; }
.ratecard th, .ratecard td { padding: 8px 8px; border-bottom: 1.5px solid var(--color-mat-line); text-align: left; }
.ratecard thead th { font-size: .82rem; color: var(--color-muted); }
.fee__party { margin-top: 14px; font-size: .95rem; color: var(--color-muted); }
.fee__party a { font-weight: 700; color: var(--color-leaf); }

/* ===== 3칸: 처음 오는 날 ===== */
.steps { list-style: none; counter-reset: st; display: grid; gap: 10px; margin-bottom: 22px; }
.steps li { counter-increment: st; position: relative; padding: 12px 14px 12px 58px; background: var(--color-sprout-soft); border: 2.5px solid var(--color-dice); border-radius: 14px; font-size: .95rem; line-height: 1.55; color: var(--color-muted); }
.steps li::before { content: counter(st); position: absolute; left: 12px; top: 12px; width: 34px; height: 34px; border-radius: 10px; background: var(--color-sprout); color: var(--color-dice); border: 2px solid var(--color-dice); display: grid; place-items: center; font-weight: 800; font-size: 1rem; line-height: 1; }
.steps b { display: block; color: var(--color-dice); font-size: 1.02rem; }
.safe { padding: 18px; border-radius: 16px; background: var(--color-sticker); border: 2.5px solid var(--color-dice); }
.safe h3 { margin-bottom: 10px; }
.safe ul { list-style: none; display: grid; gap: 8px; }
.safe li { position: relative; padding-left: 28px; font-size: .96rem; line-height: 1.6; }
.safe li::before { content: ""; position: absolute; left: 2px; top: .3em; width: 18px; height: 18px; border-radius: 6px; background: var(--color-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' fill='none' stroke='%233D6B12' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; border: 2px solid var(--color-dice); }

/* ===== 4칸: 생일 파티룸 ===== */
.rooms { display: grid; gap: 12px; }
.room { padding: 18px; border: 2.5px solid var(--color-dice); border-radius: 16px; background: var(--color-sprout-soft); }
.room h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; line-height: 1.1; }
.room__size { font-weight: 700; margin: 4px 0 10px; }
.room__price { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.room__price small { display: block; font-size: .8rem; font-weight: 600; color: var(--color-muted); }
.room--big { background: var(--color-sprout); color: var(--color-dice); }
.room--big .room__price small { color: #34481A; }
.rooms__note { margin: 10px 0 22px; font-size: .9rem; color: var(--color-muted); }
.party-flow { margin-bottom: 22px; }
.party-flow h3 { margin-bottom: 12px; }
.party-flow ol { list-style: none; display: grid; gap: 0; border-left: 3px dotted var(--color-sprout); margin-left: 10px; }
.party-flow li { position: relative; padding: 4px 0 14px 22px; font-weight: 600; line-height: 1.5; }
.party-flow li::before { content: ""; position: absolute; left: -10px; top: 8px; width: 15px; height: 15px; border-radius: 4px; background: var(--color-star); border: 2.5px solid var(--color-dice); }
.party-flow time { display: block; font-size: .82rem; font-weight: 800; color: var(--color-leaf); font-variant-numeric: tabular-nums; }
.party-flow__inc { padding: 12px 14px; border-radius: 12px; background: var(--color-mat); font-size: .93rem; line-height: 1.6; color: var(--color-muted); }
.party-call { display: grid; gap: 10px; justify-items: start; }
.party-call p { font-size: .9rem; color: var(--color-muted); }

/* ===== 5칸: 보호자 카페 ===== */
.menu { display: grid; gap: 18px; padding: 20px; margin-bottom: 18px; border: 2.5px solid var(--color-dice); border-radius: 16px; background: var(--color-dice); color: #fff; }
.menu h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; line-height: 1.1; margin-bottom: 8px; color: var(--color-star); }
.menu ul { list-style: none; display: grid; gap: 6px; }
.menu li { display: flex; align-items: baseline; gap: 8px; }
.menu li i { flex: 1; border-bottom: 2px dotted rgba(255,255,255,.4); transform: translateY(-4px); }
.menu li b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.menu__note { font-size: .82rem; color: #CDD2DA; }
.amenity { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.amenity li { padding: 6px 14px; border-radius: 99px; border: 2px solid var(--color-dice); background: var(--color-sprout-soft); font-weight: 700; font-size: .92rem; }

/* ===== 6칸: 자주 묻는 질문 ===== */
.qa { border-bottom: 2.5px solid var(--color-dice); }
.qa:first-child { border-top: 2.5px solid var(--color-dice); }
.qa h3 { font-size: 1.05rem; }
.qa button { width: 100%; display: flex; justify-content: space-between; gap: 14px; align-items: center; text-align: left; padding: 16px 2px; border: 0; background: none; font: inherit; font-weight: 700; color: inherit; cursor: pointer; line-height: 1.45; }
.qa button::after { content: ""; flex: none; width: 26px; height: 26px; border-radius: 8px; border: 2.5px solid var(--color-dice); background: linear-gradient(var(--color-dice), var(--color-dice)) center / 12px 2.5px no-repeat, linear-gradient(var(--color-dice), var(--color-dice)) center / 2.5px 12px no-repeat; transition: transform .25s ease, background-color .2s; }
.qa button[aria-expanded="true"]::after { transform: rotate(45deg); background-color: var(--color-star); }
.qa__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.qa__panel > div { overflow: hidden; min-height: 0; }
.qa__panel p { padding: 0 2px 16px; color: var(--color-muted); }
.qa h3:has(button[aria-expanded="true"]) + .qa__panel { grid-template-rows: 1fr; }

/* ===== 도착: 오시는 길 ===== */
.cell--goal .cell__band { background: var(--color-dice); }
.visit { display: grid; gap: 22px; }
.hours h3 { margin-bottom: 8px; }
.hours table { width: 100%; border-collapse: collapse; margin-bottom: 16px; font-variant-numeric: tabular-nums; }
.hours th, .hours td { padding: 10px 8px; text-align: left; border-bottom: 1.5px solid var(--color-mat-line); vertical-align: top; }
.hours th { width: 8em; font-weight: 700; }
.hours td { font-weight: 700; }
.hours td small { display: block; font-weight: 500; color: var(--color-muted); }
.hours tr.is-today { background: var(--color-sticker); }
.today-chip { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 99px; background: var(--color-sprout); color: var(--color-dice); font-size: .74rem; vertical-align: .1em; }
.info { margin: 0 0 18px; }
.info div { display: grid; grid-template-columns: 5.5em 1fr; gap: 10px; padding: 8px 0; border-bottom: 1.5px solid var(--color-mat-line); }
.info dt { font-weight: 700; }
.info dd { margin: 0; color: var(--color-muted); }
.visit__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.map-art svg { width: 100%; height: auto; border: 2.5px solid var(--color-dice); border-radius: 16px; }
.map-art__label { font: 400 24px var(--font-display); fill: var(--color-dice); }
.map-art__mark { font: 800 20px var(--font); fill: var(--color-dice); }
.map-art__p { font: 800 26px var(--font); fill: #fff; }
.map-art__sub { font: 600 16px var(--font); fill: var(--color-dice); }

/* 푸터 */
.site-footer { background: var(--color-dice); color: #CDD2DA; font-size: var(--fs-small); padding: 40px 0 calc(40px + 64px + env(safe-area-inset-bottom)); }
.site-footer__inner { display: grid; gap: 18px; }
.site-footer__logo { font-family: var(--font-display); font-size: 1.6rem; color: #fff; margin-bottom: 6px; }
.site-footer__biz { line-height: 1.9; }
.site-footer__links { margin-top: 10px; display: flex; gap: 16px; }
.site-footer__links .strong { font-weight: 800; color: #fff; }
.site-footer__credit a { color: var(--color-star); }

/* 모바일 하단 고정 바 */
.quickbar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr 1.3fr; background: var(--color-paper); border-top: 3px solid var(--color-dice); padding-bottom: env(safe-area-inset-bottom); }
.quickbar a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 58px; text-decoration: none; font-weight: 800; font-size: .95rem; }
.quickbar a + a { border-left: 2px solid var(--color-mat-line); }
.quickbar svg { width: 20px; height: 20px; }
.quickbar__cta { background: var(--color-ball); }
body.nav-open .quickbar { visibility: hidden; }

/* ===== 중간 폭 ===== */
@media (min-width: 640px) {
  .zone-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .rooms { grid-template-columns: 1fr 1fr; }
  .menu { grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .menu__note { grid-column: 1 / -1; }
  .playmap { grid-template-columns: minmax(0, 300px) 1fr; align-items: start; column-gap: 20px; }
  .playmap__title { grid-column: 1 / -1; }
  .cell__body { padding: 30px 28px 32px; }
  .hero { padding: 30px 28px 0; }
  .hero__art { margin: 0 -28px; }
  .party-flow ol { grid-template-columns: repeat(4, 1fr); border-left: 0; border-top: 3px dotted var(--color-sprout); margin: 10px 0 14px; }
  .party-flow li { padding: 16px 10px 0 0; }
  .party-flow li::before { left: 0; top: -10px; }
  .site-footer__inner { grid-template-columns: 1fr auto; align-items: end; }
}

@media (min-width: 760px) {
  .fee { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; }
  .playmap { grid-column: 1 / -1; }
  .visit { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ===== 데스크톱: 칸이 좌우로 번갈아 놓이고 트랙이 빈 쪽 기둥으로 내려간다 ===== */
@media (min-width: 1024px) {
  :root { --rail: 0px; }
  .board { padding: 36px 0 120px; }
  .token { width: 58px; height: 77px; }
  .hero { padding: 40px 44px 0; }
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 24px; }
  .hero__copy { padding-bottom: 64px; }
  .hero__art { margin: 0 -44px 0 0; align-self: end; }
  .playground { max-width: none; }
  .start-spot { left: calc(66% + 72px - 32px); bottom: -32px; width: 64px; height: 64px; }

  .row { display: grid; grid-template-columns: 66% 34%; align-items: start; margin-left: 0; }
  .row--right { grid-template-columns: 34% 66%; }
  .row--right .cell { grid-column: 2; grid-row: 1; }
  .row--right .row__deco { grid-column: 1; grid-row: 1; }
  .row__deco { display: block; padding: 150px 4px 0 132px; }
  .row--right .row__deco { padding: 150px 132px 0 4px; }
  .row__deco svg { width: 100%; max-width: 230px; height: auto; margin-inline: auto; }
  .row--last .row__deco { align-self: end; padding-top: 0; padding-bottom: 40px; }

  .rule { width: 330px; margin: 54px auto; padding: 14px 18px; }
  .rule--start { margin-left: calc(66% + 72px - 165px); }
  .cell__body { padding: 34px 38px 38px; }
  .cell__band { padding: 12px 20px; font-size: 1.1rem; }
  .band__die { width: 36px; height: 36px; }
  .band__no { font-size: 2rem; }
  .party-call { grid-template-columns: auto 1fr; align-items: center; gap: 18px; }
}

@media (min-width: 1200px) {
  :root { --header-h: 72px; }
  .menu-toggle { display: none; }
  .gnb { display: flex; align-items: center; gap: 0; }
  .gnb a { position: relative; display: flex; align-items: center; gap: 5px; padding: 8px 7px; font-weight: 700; font-size: .92rem; border-radius: 10px; white-space: nowrap; }
  .gnb .gnb__tel { display: none; }
  .header-tel { white-space: nowrap; }
  .gnb a:hover { background: var(--color-sprout-soft); }
  .gnb a svg { width: 22px; height: 22px; color: var(--color-dice); }
  .gnb a.is-active svg { --die-face: var(--color-sprout); color: var(--color-dice); }
  .gnb a.is-active span { box-shadow: inset 0 -3px 0 var(--color-leaf); }
  .header-tel { width: auto; height: 46px; display: flex; gap: 6px; padding: 0 18px; border-radius: 99px; background: var(--color-ball); font-weight: 800; box-shadow: 0 3px 0 var(--color-dice); margin-left: 8px; }
  .header-tel span { display: inline; }
  .quickbar { display: none; }
  .site-footer { padding-bottom: 40px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .quickbar { display: none; }
  .site-footer { padding-bottom: 40px; }
}

/* 동작 줄이기 — 마지막 안전망. 3단계(색·투명도 피드백)는 다시 살린다 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .btn:active { transform: none; }
  .chip span, .zone-tile, .playmap__grid li, .stop use, .qa__panel, .stepper button { transition-duration: .2s !important; }
}