/* 밑줄스터디 — 무인 스터디카페 디자인 샘플 (디코랩)
   색은 공부 책상 위 물건에서: 모눈 노트, 연필심, 형광펜 핑크, 포스트잇, 스탠드 불빛 */
:root {
  --color-graph: #F2F5F7;      /* 모눈 노트 바탕 */
  --color-grid: #DCE5EC;       /* 모눈 선 */
  --color-graphite: #24262B;   /* 연필심 — 글자·도면 선 */
  --color-pencil: #5A616B;     /* 연필 회색 — 보조 글자 */
  --color-marker: #FF5DA2;     /* 형광펜 핑크 — 주 버튼·고른 자리 */
  --color-marker-soft: rgba(255, 93, 162, .42);
  --color-postit: #FFE97A;     /* 포스트잇 — 자리 메모·운영 규칙 */
  --color-lamp: #FFF4DC;       /* 스탠드 불빛 — 따뜻한 보조 면 */
  --color-paper: #FFFFFF;
  --color-kakao: #FEE500;

  /* 소리 구역 */
  --zone-quiet: #DCE8F3;       /* 무음 — 모눈 파랑 */
  --zone-type: #FFE6C7;        /* 타자 허용 — 스탠드 불빛 */
  --zone-talk: #DDF0D8;        /* 대화 가능 — 연두 포스트잇 */

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

  --fs-h1: clamp(2rem, 1.3rem + 2.4vw, 2.6rem);
  --fs-h2: clamp(1.4rem, 1.1rem + 1vw, 1.85rem);
  --fs-body: 1.0625rem;
  --fs-small: .875rem;

  --header-h: 60px;
  --gutter: 16px;
  --line: 2px solid var(--color-graphite);
}

*, *::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.7;
  color: var(--color-graphite);
  background-color: var(--color-graph);
  /* 모눈 노트 — 도면을 그리는 종이 */
  background-image: linear-gradient(var(--color-grid) 1px, transparent 1px), linear-gradient(90deg, var(--color-grid) 1px, transparent 1px);
  background-size: 24px 24px;
  word-break: keep-all;
  overflow-wrap: anywhere;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.3; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.container { width: min(1320px, 100% - var(--gutter) * 2); margin-inline: auto; }
.container--wide { width: min(1600px, 100% - var(--gutter) * 2); }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--color-graphite); color: #fff; border-radius: 8px; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--color-marker); outline-offset: 3px; }

/* 실제 정보 자리 */
.ph { display: inline-block; word-spacing: normal; letter-spacing: 0; padding: 0 .4em; border: 1.5px dashed currentColor; border-radius: 6px; opacity: .8; font-size: .92em; line-height: 1.5; }
.ph--title { font-size: .62em; vertical-align: .18em; font-family: var(--font); }

/* 샘플 안내 띠 */
.sample-banner { background: #E3EAF0; border-bottom: 1.5px solid #C9D5DE; font-size: var(--fs-small); line-height: 1.6; }
.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-graphite); color: #fff; font-weight: 700; font-size: .78rem; }
.sample-banner a { font-weight: 700; }

/* 헤더 — backdrop-filter 를 쓰지 않는다 (모바일 메뉴가 헤더 높이로 잘리는 문제) */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--color-paper); border-bottom: var(--line); }
.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: 34px; height: 34px; }
.logo b { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; letter-spacing: -.02em; }
.logo__mark { background: linear-gradient(transparent 55%, var(--color-postit) 55% 92%, transparent 92%); }
.gnb { display: flex; align-items: center; gap: 2px; }
.gnb a { position: relative; padding: 8px 11px; text-decoration: none; font-weight: 600; font-size: .95rem; border-radius: 8px; }
.gnb a:not(.gnb__cta):hover { background: var(--color-graph); }
.gnb a.is-active:not(.gnb__cta)::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 4px; height: 8px; border-radius: 3px; background: var(--color-marker-soft); z-index: -1; }
.gnb a.is-active { font-weight: 800; }
.gnb__cta { margin-left: 8px; background: var(--color-kakao); border: var(--line); padding: 7px 16px !important; border-radius: 99px !important; }
.header-tel { display: none; width: 42px; height: 42px; border: var(--line); border-radius: 50%; place-items: center; color: var(--color-graphite); }
.header-tel svg { width: 20px; height: 20px; }
.menu-toggle { display: none; 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: 2.5px; border-radius: 2px; background: var(--color-graphite); 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); }

/* 버튼 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px; border-radius: 999px; font-weight: 700; font-size: 1rem; text-decoration: none; border: var(--line); cursor: pointer; font-family: inherit; color: var(--color-graphite); transition: transform .18s ease, background-color .18s ease; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn--marker { background: var(--color-marker); }
.btn--marker:hover { background: #FF74B0; }
.btn--kakao { background: var(--color-kakao); }
.btn--line { background: var(--color-paper); }
.btn--line:hover { background: var(--color-graph); }
.btn--block { width: 100%; }

/* ============ 1. 첫 화면 = 좌석 배치도 ============ */
.seatmap { padding: 16px 0 28px; }
.plan { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--color-paper); border: var(--line); border-radius: 20px; overflow: hidden; }
.plan > * { min-width: 0; }
.plan__head { padding: 20px 18px 16px; }
.plan__kicker { font-size: var(--fs-small); font-weight: 700; color: var(--color-pencil); margin-bottom: 8px; }
.plan__title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h1); line-height: 1.25; letter-spacing: -.03em; word-spacing: -.15em; margin-bottom: 10px; }
.hl { background: linear-gradient(transparent 56%, var(--color-postit) 56% 94%, transparent 94%); padding: 0 .06em; }
.plan__lead { display: none; color: var(--color-pencil); max-width: 30em; }
.plan__right { display: contents; }
.plan__head { order: 1; }
.plan__board { order: 2; }
.plan__types { order: 3; }
.memo { order: 4; }
.plan__facts { order: 5; }
.plan__actions { order: 6; }
.plan__facts { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 0; margin: 16px 18px 0; border: var(--line); border-radius: 10px; overflow: hidden; }
.plan__facts div { padding: 6px 12px; border-left: 1.5px solid var(--color-graphite); }
.plan__facts div:first-child { border-left: 0; }
.plan__facts dt { font-size: .74rem; font-weight: 700; color: var(--color-pencil); line-height: 1.4; }
.plan__facts dd { margin: 0; font-weight: 700; font-size: .9rem; line-height: 1.45; }

/* 배치도 */
.plan__board { position: relative; border-block: var(--line); background-color: #FBFCFD; background-image: linear-gradient(#E8EEF3 1px, transparent 1px), linear-gradient(90deg, #E8EEF3 1px, transparent 1px); background-size: 16px 16px; padding: 10px 0 12px; }
.plan__hint { display: flex; align-items: center; gap: 6px; padding: 0 14px 6px; font-size: var(--fs-small); font-weight: 600; color: var(--color-pencil); }
.plan__hint svg { width: 18px; height: 18px; }
.plan__scroll { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding: 0 12px 8px; }
.floor { width: 100%; min-width: 780px; height: auto; overflow: visible; }
.floor text { font-family: var(--font); }
.floor__base { fill: #fff; stroke: var(--color-graphite); stroke-width: 6; }
.floor__glass { stroke: #8EC1EA; stroke-width: 9; }
.floor__quiet { fill: none; stroke: #6F96B8; stroke-width: 2; stroke-dasharray: 8 6; }
.floor__zone-name { font-size: 15px; font-weight: 700; fill: #4E6F8C; }
.floor__note { font-size: 15px; font-weight: 800; fill: var(--color-graphite); }
.floor__label { font-size: 14px; font-weight: 700; fill: var(--color-pencil); }
.floor__door { stroke: #fff; stroke-width: 5; }
.floor__entry { stroke: #fff; stroke-width: 9; }
.floor__swing { fill: none; stroke: var(--color-graphite); stroke-width: 1.5; stroke-dasharray: 4 4; }
.room { fill: none; stroke: var(--color-graphite); stroke-width: 3; }

.zone { cursor: pointer; }
.zone:focus { outline: none; }
.zone__area { stroke: transparent; stroke-width: 2.5; transition: stroke .2s ease; }
.zone__area--quiet { fill: var(--zone-quiet); }
.zone__area--type { fill: var(--zone-type); }
.zone__area--talk { fill: var(--zone-talk); }
.zone:hover .zone__area, .zone:focus-visible .zone__area { stroke: var(--color-graphite); stroke-dasharray: 7 5; }
.zone:focus-visible .zone__area { stroke: var(--color-marker); stroke-width: 4; }
/* 형광펜 — 고른 구역 위를 왼쪽에서 오른쪽으로 칠한다 */
.zone__hl { fill: var(--color-marker); opacity: .4; mix-blend-mode: multiply; pointer-events: none; transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0); }
.zone.is-on .zone__hl { transform: scaleX(1); }
.has-motion .zone__hl { transition: transform .55s cubic-bezier(.6, .05, .25, 1); }
.map-pill rect { fill: #fff; stroke: var(--color-graphite); stroke-width: 2; transition: fill .2s ease; }
.map-pill text { font-size: 17px; font-weight: 800; text-anchor: middle; fill: var(--color-graphite); transition: fill .2s ease; }
.zone.is-on .map-pill rect { fill: var(--color-graphite); }
.zone.is-on .map-pill text { fill: #fff; }

.plan__legend { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; justify-content: space-between; padding: 4px 14px 0; font-size: var(--fs-small); }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-weight: 700; }
.legend .sw + .sw, .legend .sw { margin-left: 6px; }
.legend .sw:first-child { margin-left: 0; }
.plan__note { color: var(--color-pencil); }
.sw { display: inline-block; flex: none; width: 14px; height: 14px; border: 1.5px solid var(--color-graphite); border-radius: 4px; vertical-align: -2px; }
.sw--quiet { background: var(--zone-quiet); }
.sw--type { background: var(--zone-type); }
.sw--talk { background: var(--zone-talk); }

/* 자리 종류 칩 — 고르면 형광펜이 칠해진다 */
.plan__types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 16px 18px 4px; }
.seat-chip { position: relative; isolation: isolate; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; text-align: left; min-height: 54px; padding: 7px 12px; border: var(--line); border-radius: 12px; background: #fff; font: inherit; font-weight: 700; font-size: .95rem; line-height: 1.3; color: var(--color-graphite); cursor: pointer; overflow: hidden; }
.seat-chip .sw { grid-row: span 2; }
.seat-chip small { grid-column: 2; font-size: .78rem; font-weight: 600; color: var(--color-pencil); }
.seat-chip::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-marker-soft); transform: scaleX(0); transform-origin: 0 50%; }
.has-motion .seat-chip::before { transition: transform .4s cubic-bezier(.6, .05, .25, 1); }
.seat-chip[aria-pressed="true"]::before { transform: scaleX(1); }
.seat-chip[aria-pressed="true"] small { color: var(--color-graphite); }
.seat-chip:hover { background: var(--color-graph); }

/* 포스트잇 메모 */
.memo { position: relative; margin: 18px 18px 6px; padding: 20px 18px 16px; background: var(--color-postit); border: var(--line); border-radius: 4px 4px 4px 18px; transform: rotate(-.8deg); }
.memo::before { content: ""; position: absolute; top: -12px; left: 50%; width: 84px; height: 22px; margin-left: -42px; background: rgba(255, 255, 255, .7); border: 1.5px solid rgba(36, 38, 43, .25); transform: rotate(2deg); }
.memo__tag { font-size: .78rem; font-weight: 800; color: #6B5A00; }
.memo__title { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; letter-spacing: -.02em; word-spacing: -.15em; margin: 2px 0 10px; }
.memo__title span { font-family: var(--font); font-size: .95rem; font-weight: 700; color: var(--color-pencil); margin-left: 4px; letter-spacing: 0; }
.memo__facts { margin: 0 0 10px; }
.memo__facts div { display: grid; grid-template-columns: 3.6em 1fr; gap: 8px; padding: 6px 0; border-top: 1.5px dashed rgba(36, 38, 43, .35); }
.memo__facts dt { font-weight: 800; font-size: .9rem; }
.memo__facts dd { margin: 0; font-size: .95rem; line-height: 1.55; }
.memo__fit { font-size: .95rem; line-height: 1.55; margin-bottom: 10px; }
.memo__fit b { margin-right: 6px; }
.memo__link { font-weight: 800; font-size: .95rem; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.has-motion .memo.is-stuck { animation: stick .45s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes stick { from { opacity: .3; transform: translateY(-10px) rotate(-4deg); } to { opacity: 1; transform: rotate(-.8deg); } }

.noise { display: inline-block; padding: 0 8px; margin-right: 4px; border: 1.5px solid var(--color-graphite); border-radius: 99px; font-size: .78rem; font-weight: 800; line-height: 1.6; white-space: nowrap; vertical-align: 1px; }
.noise--quiet { background: var(--zone-quiet); }
.noise--type { background: var(--zone-type); }
.noise--talk { background: var(--zone-talk); }

.plan__actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px 20px; }
.plan__actions .btn { flex: 1 1 160px; }

/* ============ 2. 대시보드 타일 ============ */
.dash { padding: 4px 0 72px; }
.dash__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.tile { position: relative; background: var(--color-paper); border: var(--line); border-radius: 18px; padding: 22px 18px; min-width: 0; scroll-margin-top: calc(var(--header-h) + 14px); }
.tile__head { margin-bottom: 18px; }
.tile__head > p:last-child:not(.tile__label) { color: var(--color-pencil); margin-top: 6px; }
.tile__head--row { display: grid; gap: 6px; }
.tile__label { display: inline-block; margin-bottom: 8px; padding: 1px 10px; border: var(--line); border-radius: 8px; background: var(--color-graph); font-size: .82rem; font-weight: 800; }
.tile h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2); letter-spacing: -.03em; word-spacing: -.15em; }
.tile__foot { margin-top: 14px; font-size: .95rem; color: var(--color-pencil); }
.tile__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.tile__actions .btn { flex: 1 1 170px; }
.tile--rules { background: var(--color-postit); }
.tile--rules .tile__label { background: #fff; }
.tile--hours { background: var(--color-lamp); }

/* 등장: 보이는 상태가 기본, has-motion 일 때만 숨겼다 보여 준다 */
.has-motion .reveal { opacity: 0; transform: translateY(22px); }
.has-motion .reveal.is-in { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .2, 1); }
.has-motion .plan { opacity: 0; transform: translateY(14px); }
.has-motion .seatmap.is-ready .plan { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }

/* 이용권 계산 */
.calc { display: grid; gap: 18px; align-items: start; }
.calc__form { display: grid; gap: 18px; min-width: 0; }
.calc__group { border: 0; margin: 0; padding: 0; min-width: 0; }
.calc__group legend { padding: 0; margin-bottom: 8px; font-weight: 800; }
.calc__group legend small { font-weight: 500; font-size: .82rem; color: var(--color-pencil); margin-left: 4px; }
.calc__modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.calc__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.calc__opts--seat { margin-top: 10px; }
.opt { position: relative; cursor: pointer; }
.opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opt span { display: flex; flex-direction: column; justify-content: center; min-height: 52px; padding: 6px 14px; border: var(--line); border-radius: 12px; background: #fff; font-weight: 700; line-height: 1.35; transition: background-color .18s ease, color .18s ease; }
.opt small { font-size: .78rem; font-weight: 600; color: var(--color-pencil); transition: color .18s ease; }
.opt--mode span { height: 100%; padding: 10px 12px; }
.opt--mode b { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; word-spacing: -.15em; }
.opt input:checked + span { background: var(--color-graphite); color: #fff; }
.opt input:checked + span small { color: #E1E5EA; }
.opt input:focus-visible + span { outline: 3px solid var(--color-marker); outline-offset: 2px; }
.opt span:hover { background: var(--color-graph); }
.opt input:checked + span:hover { background: var(--color-graphite); }
.check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--color-graphite); }
.check small { font-weight: 600; color: var(--color-pencil); margin-left: 4px; }
.calc__habit { display: grid; gap: 6px; }
.range { display: grid; gap: 2px; font-weight: 600; }
.range output { font-family: var(--font-display); font-size: 1.25rem; margin: 0 2px; }
.range input { width: 100%; height: 30px; accent-color: var(--color-graphite); }

.calc__result { background: var(--color-graph); border: var(--line); border-radius: 14px; padding: 20px 18px; display: grid; gap: 8px; scroll-margin-top: calc(var(--header-h) + 14px); }
.calc__label { font-size: .85rem; font-weight: 800; }
.calc__total { font-family: var(--font); font-weight: 800; font-size: clamp(2.3rem, 1.8rem + 2vw, 3rem); line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.calc__total span { background: linear-gradient(transparent 58%, var(--color-marker-soft) 58% 94%, transparent 94%); }
.calc__line { font-weight: 700; }
.calc__per, .calc__tip { font-size: .97rem; line-height: 1.6; }
.calc__tip { padding-top: 8px; border-top: 1.5px dashed rgba(36, 38, 43, .35); }
.calc__note { font-size: .82rem; color: var(--color-pencil); margin-bottom: 6px; }
.calc__peek { position: sticky; bottom: calc(66px + env(safe-area-inset-bottom)); z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border: var(--line); border-radius: 12px; background: var(--color-graphite); color: #fff; font-weight: 700; }
.calc__peek b { font-weight: 800; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.calc__peek a { font-size: .9rem; color: var(--color-postit); }

.tile--pass { display: flex; flex-direction: column; }
.room-note { margin-top: auto; display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: center; padding: 18px; border: var(--line); border-radius: 14px; background: var(--zone-talk); }
.tile--pass .calc { margin-bottom: 22px; }
.room-note svg { width: 64px; height: 64px; }
.room-note h3 { font-size: 1.05rem; margin-bottom: 2px; }
.room-note p { font-size: .95rem; line-height: 1.6; }
.room-note a { font-weight: 800; text-underline-offset: 4px; }

/* 이용 방법 — 실제 순서라 번호를 둔다 */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { counter-increment: step; position: relative; display: grid; padding: 10px 0 10px 48px; border-top: 1.5px dashed rgba(36, 38, 43, .3); line-height: 1.55; }
.steps li:first-child { border-top: 0; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 10px; width: 34px; height: 34px; border: var(--line); border-radius: 10px; display: grid; place-items: center; font-family: var(--font-display); font-size: 1.05rem; background: #fff; }
.steps b { font-size: 1.02rem; }
.steps span { color: var(--color-pencil); font-size: .97rem; }

/* 운영 규칙 */
.noise-steps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.noise-steps li { display: grid; grid-template-columns: 5.6em 1fr; gap: 10px; align-items: start; padding: 10px 12px; background: rgba(255, 255, 255, .65); border: 1.5px solid var(--color-graphite); border-radius: 10px; }
.noise-steps .noise { justify-self: start; margin-top: 2px; }
.noise-steps p { line-height: 1.55; font-size: .97rem; }
.noise-steps b { display: block; }
.rule-list { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; line-height: 1.6; }

/* 자리 비교표 */
.compare table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.compare thead { display: none; }
.compare tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 12px 0; border-top: 1.5px solid rgba(36, 38, 43, .2); }
.compare tbody tr:first-child { border-top: 0; }
.compare th[scope="row"] { grid-column: 1 / -1; text-align: left; font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; word-spacing: -.15em; }
.compare td { line-height: 1.5; }
.compare td::before { content: attr(data-label); display: block; font-size: .76rem; font-weight: 800; color: var(--color-pencil); }

/* 시설 */
.fac { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.fac li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; padding: 12px 0; border-top: 1.5px dashed rgba(36, 38, 43, .3); }
.fac li:first-child { border-top: 0; }
.fac svg { width: 40px; height: 40px; }
.fac b { display: block; }
.fac span { color: var(--color-pencil); font-size: .97rem; line-height: 1.55; }

/* 운영 시간 */
.hours { margin: 0; }
.hours div { display: grid; grid-template-columns: 5.5em 1fr; gap: 10px; padding: 10px 0; border-top: 1.5px solid rgba(36, 38, 43, .2); }
.hours div:first-child { border-top: 0; }
.hours dt { font-weight: 800; }
.hours dd { margin: 0; font-variant-numeric: tabular-nums; }
.hours dd b { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; margin-right: 4px; }

/* 오시는 길 */
.location { display: grid; gap: 18px; margin-bottom: 18px; }
.map-art svg { width: 100%; height: auto; border: var(--line); border-radius: 14px; }
.map-art__label { font: 800 15px var(--font); fill: var(--color-graphite); }
.map-art__mark { font: 800 18px var(--font); fill: var(--color-graphite); }
.map-art__p { font: 800 22px var(--font); fill: #fff; }
.info { margin: 0; }
.info div { display: grid; grid-template-columns: 5.5em 1fr; gap: 10px; padding: 9px 0; border-top: 1.5px solid rgba(36, 38, 43, .2); }
.info div:first-child { border-top: 0; }
.info dt { font-weight: 800; }
.info dd { margin: 0; color: var(--color-pencil); }

/* FAQ */
.qa { border-bottom: var(--line); }
.qa:first-child { border-top: var(--line); }
.qa h3 { font-size: 1.02rem; }
.qa button { width: 100%; display: flex; justify-content: space-between; gap: 14px; align-items: center; text-align: left; padding: 15px 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: var(--line); background: linear-gradient(var(--color-graphite), var(--color-graphite)) center / 12px 2px no-repeat, linear-gradient(var(--color-graphite), var(--color-graphite)) center / 2px 12px no-repeat; transition: transform .25s ease, background-color .2s ease; }
.qa button[aria-expanded="true"]::after { transform: rotate(45deg); background-color: var(--color-postit); }
.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-pencil); }
.qa h3:has(button[aria-expanded="true"]) + .qa__panel { grid-template-rows: 1fr; }

/* 푸터 */
.site-footer { background: #E3EAF0; border-top: var(--line); font-size: var(--fs-small); padding: 36px 0 calc(36px + 66px + env(safe-area-inset-bottom)); }
.site-footer__inner { display: grid; gap: 16px; }
.site-footer__logo { font-family: var(--font-display); font-size: 1.25rem; margin-bottom: 8px; }
.site-footer__logo .ph { font-family: var(--font); font-size: .7em; vertical-align: .2em; }
.site-footer__biz { line-height: 1.9; color: var(--color-pencil); }
.site-footer__links { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.site-footer__links .strong { font-weight: 800; }
.site-footer__credit a { font-weight: 700; }

/* 모바일 하단 고정 바 */
.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: var(--line); 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: 700; font-size: .95rem; }
.quickbar a + a { border-left: 1.5px solid rgba(36, 38, 43, .2); }
.quickbar svg { width: 20px; height: 20px; }
.quickbar__kakao { background: var(--color-kakao); }
body.nav-open .quickbar { visibility: hidden; }

.toast { position: fixed; z-index: 60; left: 50%; bottom: calc(78px + env(safe-area-inset-bottom)); width: max-content; max-width: calc(100% - 32px); transform: translateX(-50%); padding: 12px 18px; border-radius: 12px; background: var(--color-graphite); color: #fff; font-weight: 600; font-size: .95rem; line-height: 1.5; }

/* 모바일 메뉴 */
@media (max-width: 1099px) {
  .header-tel { display: grid; }
  .menu-toggle { display: block; }
  .gnb { position: fixed; z-index: 45; left: 0; right: 0; top: var(--menu-top, var(--header-h)); bottom: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 10px var(--gutter) 40px; background: var(--color-paper); 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 a { padding: 15px 4px; font-size: 1.1rem; border-radius: 0; border-bottom: 1.5px solid rgba(36, 38, 43, .15); }
  .gnb a.is-active:not(.gnb__cta)::after { left: 0; right: auto; width: 6px; top: 14px; bottom: 14px; height: auto; background: var(--color-marker); z-index: 0; }
  .gnb a.is-active { padding-left: 16px; }
  .gnb__cta { margin: 18px 0 0; text-align: center; }
}

@media (min-width: 560px) {
  .compare tbody tr { grid-template-columns: repeat(3, 1fr); }
  .plan__types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 720px) {
  :root { --gutter: 24px; }
  .plan__lead { display: block; }
  .fac { grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .fac li:nth-child(2) { border-top: 0; }
  .location { grid-template-columns: 1.1fr 1fr; align-items: center; }
  .site-footer__inner { grid-template-columns: 1fr auto; align-items: end; }
  .calc__peek { display: none; }
}

@media (min-width: 900px) {
  .dash__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 18px; }
  .tile { padding: 26px 26px; }
  .tile--pass { grid-row: span 2; }
  .tile--compare { grid-column: 1 / -1; }
  .tile__head--row { grid-template-columns: 1fr auto; align-items: end; gap: 20px; }
  .tile__head--row > p { margin-top: 0 !important; }
  /* 비교표는 넓은 화면에서 진짜 표로 */
  .compare thead { display: table-header-group; }
  .compare tbody tr { display: table-row; }
  .compare th, .compare td { padding: 12px 12px; text-align: left; vertical-align: top; border-top: 1.5px solid rgba(36, 38, 43, .2); }
  .compare thead th { border-top: 0; border-bottom: var(--line); font-size: .82rem; font-weight: 800; color: var(--color-pencil); padding-top: 0; }
  .compare tbody tr:first-child th, .compare tbody tr:first-child td { border-top: 0; }
  .compare td::before { display: none; }
  .compare th[scope="row"] { white-space: nowrap; }
  .fac { grid-template-columns: 1fr 1fr; }
  .location { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1100px) {
  :root { --header-h: 70px; }
  .quickbar { display: none; }
  .site-footer { padding-bottom: 36px; }
  .toast { bottom: 28px; }
  .seatmap { padding: 22px 0 34px; }
  /* 도면 표제란처럼: 왼쪽 띠에 제목·자리 종류·메모, 오른쪽은 위 표제 줄 + 배치도 + 버튼 줄 */
  .plan { grid-template-columns: 390px minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
  .plan__head { grid-column: 1; grid-row: 1; padding: 22px 24px 0; }
  .plan__types { grid-column: 1; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 18px 24px 0; }
  .memo { grid-column: 1; grid-row: 3; align-self: start; margin: 22px 24px 22px; padding: 16px 18px 14px; }
  .plan__right { grid-column: 2; grid-row: 1 / 4; display: flex; flex-direction: column; border-left: var(--line); }
  .plan__right > * { order: 0; }
  .seat-chip { min-height: 48px; padding: 5px 12px; }
  .memo__facts dd, .memo__fit { font-size: .92rem; }
  .plan__lead { display: block; }
  .plan__title { font-size: 2.45rem; }
  .plan__facts { margin: 0; border: 0; border-bottom: var(--line); border-radius: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #fff; }
  .plan__facts div { padding: 9px 20px; }
  .plan__board { flex: 1; border-block: 0; display: flex; flex-direction: column; justify-content: flex-start; padding: 22px 10px 14px; }
  .plan__hint { display: none; }
  .plan__scroll { overflow: visible; padding: 0 14px; }
  .floor { min-width: 0; max-width: max(760px, calc((100svh - 290px) * 1.5625)); margin-inline: auto; }
  .plan__legend { padding: 10px 24px 0; }
  .plan__actions { border-top: var(--line); justify-content: flex-end; padding: 14px 20px; background: #fff; }
  .plan__actions .btn { flex: 0 0 auto; min-width: 190px; }  .location { grid-template-columns: 1.1fr 1fr; }
  .calc { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; }
  .calc__result { position: sticky; top: calc(var(--header-h) + 18px); }
  .calc__modes { grid-template-columns: minmax(0, 1fr); }
  .opt--mode span { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 10px; }
}

@media (min-width: 1400px) {
  .plan { grid-template-columns: 420px minmax(0, 1fr); }
  .plan__right { grid-row: 1 / 4; }
}

/* 동작 줄이기 — 마지막 안전망. 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 { transform: none; }
  .opt span, .map-pill rect, .map-pill text, .qa__panel, .zone__area { transition-duration: .2s !important; }
}