/* 밀덕고래 예약 웹 — 디자인 토큰과 화면 모양
   기본은 흑백 중립(neutral). 오렌지는 필드 페이지 본문(data-theme="paper") 안 첫 화면 띠 하나에만 (계획 10-4).
   이모지·느낌표·그림자·둥근 카드 금지. 모서리는 버튼·입력창만 4px. */

:root {
  --paper: #ffffff;
  --ink: #000000;
  --ink-muted: #6e6e6e;
  --panel: #f2f2f2;
  --line: #bdbdbd;
  /* neutral 에서 accent 는 ink 와 같다. 오렌지는 아래 [data-theme="paper"] 에서만 */
  --accent: var(--ink);
  --on-accent: var(--paper);

  --space-half: 4px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --radius-ui: 4px;

  --stroke-hair: 1px;
  --stroke-rule: 2px;
  --stroke-band: 12px;

  --font-body: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, Menlo, monospace;
  /* 숫자·영문은 Geist Mono, 섞인 한글은 Pretendard 로 */
  --font-mono-ko: "Geist Mono", "Pretendard Variable", Pretendard, ui-monospace, monospace;

  --content-max: 960px;
}

/* 배틀스쿨 테마: 필드 페이지 본문 안에서만 켠다. paper 는 neutral 과 같고 accent 만 오렌지 */
[data-theme="paper"] {
  --accent: #ff4f00;
  --on-accent: #000000;
}

/* 기본 */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  overflow-x: hidden;
  min-width: 320px;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, p, ul, ol, dl, dd, table { margin: 0; }
ul, ol { padding-left: var(--space-3); }

/* hidden 속성이 붙은 것은 아래의 display 규칙과 상관없이 언제나 숨긴다 */
[hidden] { display: none !important; }

/* 글자 스타일 */
.display    { font-size: 40px; line-height: 46px; font-weight: 700; letter-spacing: -0.01em; }
.heading    { font-size: 24px; line-height: 32px; font-weight: 700; }
.ui-title   { font-size: 20px; line-height: 28px; font-weight: 700; }
.ui-body    { font-size: 15px; line-height: 22px; font-weight: 400; }
.ui-caption { font-size: 12px; line-height: 16px; font-weight: 500; }
.ui-number  { font-family: var(--font-mono-ko); font-size: 18px; line-height: 24px; font-weight: 500; }
.ui-code    { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: 0.02em; }
.muted      { color: var(--ink-muted); }

/* 포커스 링: 바탕색 2px 틈 뒤에 2px 단색 링 */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink);
}

/* 버튼 (디자인 시스템 Button): 높이 44px, 주 버튼은 검정 바탕 흰 글자, 모서리 4px.
   주 버튼 색은 accent 를 따르지 않는다. 필드 페이지에서도 예약 흐름과 같은 검정 (10-4) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-ui);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary {
  background: var(--ink);
  color: var(--paper);
  border: var(--stroke-hair) solid var(--ink);
  font-weight: 700;
}
.btn-primary:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn-secondary {
  background: var(--paper);
  color: var(--ink);
  border: var(--stroke-hair) solid var(--ink-muted);
}
.btn-secondary:hover { border-color: var(--ink); }
/* 비활성: 회색 글자 + 옅은 테두리. 색만으로 말하지 않고 글자도 바꾼다 ("마감" 등) */
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--paper);
  color: var(--ink-muted);
  border-color: var(--line);
  cursor: not-allowed;
  text-decoration: none;
}

/* 글자처럼 보이는 버튼 (다시 불러오기 등) */
.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* 입력창 */
.input, input[type="text"], input[type="tel"], input[type="email"], input[type="number"], input[type="password"], select, textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--space-1) 12px;
  border: var(--stroke-hair) solid var(--ink-muted);
  border-radius: var(--radius-ui);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 22px;
}
label { display: block; font-size: 12px; line-height: 16px; font-weight: 500; margin-bottom: var(--space-half); }

/* 표 */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: var(--space-1) 0; border-bottom: var(--stroke-hair) solid var(--line); vertical-align: top; }
th { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }
.summary th { width: 96px; padding-right: var(--space-2); white-space: nowrap; }

/* 배지 (디자인 시스템 Badge): 상태는 글자로. 예약 가능 = 외곽선 / 마감 = 검정 채움 / 취소 = 취소선 + 회색 */
.badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--space-1);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  border: var(--stroke-hair) solid var(--ink);
  color: var(--ink);
  background: var(--paper);
  white-space: nowrap;
}
.badge-filled { background: var(--ink); color: var(--paper); }
.badge-muted { border-color: var(--line); color: var(--ink-muted); text-decoration: line-through; }

/* 바탕 패널 (둥근 모서리·그림자 없음) */
.panel { background: var(--panel); }
/* 안내 띠 (시험 결제 등): panel 바탕 + ink 글자 */
.notice { background: var(--panel); color: var(--ink); padding: 12px var(--space-2); }

/* 오류 안내: 색 대신 굵은 왼쪽 선으로 눈에 띄게 한다 */
.form-error {
  border: var(--stroke-hair) solid var(--ink);
  border-left-width: 4px;
  padding: 12px var(--space-2);
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
}
input[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: -2px;
}
input[type="checkbox"][aria-invalid="true"] { outline-offset: 2px; }

/* ---- 틀: 좌우 여백 16px, 가로 스크롤 없음 ---- */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}
.narrow { max-width: 560px; }

.site-header { border-bottom: var(--stroke-hair) solid var(--line); }
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 64px;
}
.brand {
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  text-decoration: none;
}

main.container { padding-top: var(--space-4); padding-bottom: var(--space-8); }
.stack > * + * { margin-top: var(--space-2); }
.stack-lg > * + * { margin-top: var(--space-4); }
.lines > * + * { margin-top: var(--space-half); }

.site-footer {
  border-top: var(--stroke-hair) solid var(--line);
  padding: var(--space-4) 0 var(--space-6);
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 20px;
}
.site-footer p { margin: 0; overflow-wrap: anywhere; }
.site-footer a { color: var(--ink); }
/* MG 마크 16px. 둘레 여백은 마크 폭의 1/4 (4px). 색 변형·기울이기·테두리 금지 */
.footer-operator { display: flex; align-items: center; }
.mg-mark { width: 16px; height: 16px; margin-left: var(--space-half); }

/* ---- 필드 페이지 (/battleschool/yeongcheon, /) ---- */
.field-page > * + * { margin-top: var(--space-6); }
.field-hero > * + * { margin-top: var(--space-2); }
.field-hero > .band + * { margin-top: var(--space-3); }
/* 오렌지 띠: 이 사이트에서 오렌지가 쓰이는 단 한 곳 */
.band { height: var(--stroke-band); background: var(--accent); }
.lead { font-size: 20px; line-height: 28px; font-weight: 500; }
.hero-facts { font-family: var(--font-mono-ko); font-size: 18px; line-height: 24px; font-weight: 500; }

.field-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  padding: 12px 0;
  border-top: var(--stroke-hair) solid var(--line);
  border-bottom: var(--stroke-hair) solid var(--line);
}

.field-section { max-width: 720px; }
.field-section > * + * { margin-top: var(--space-2); }
.field-section > .heading { padding-bottom: var(--space-1); border-bottom: var(--stroke-rule) solid var(--ink); }
.sub-block > * + * { margin-top: var(--space-1); }
.sub-heading { font-size: 15px; line-height: 22px; font-weight: 700; }

/* 칸 이름 묶음 (디자인 시스템 Label). 한 지면에 한 묶음만 */
.label-group {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-2);
  row-gap: var(--space-half);
  align-items: baseline;
}
.label-group dt {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.label-group dd { font-family: var(--font-mono-ko); font-size: 14px; line-height: 20px; }

/* 사진 자리: panel 바탕 + 칸 이름 글자. 현장 실사가 오면 바꾼다 */
.photo-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
@media (min-width: 640px) {
  .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.photo-slot {
  aspect-ratio: 3 / 2;
  background: var(--panel);
  display: flex;
  align-items: flex-end;
  gap: var(--space-half);
  padding: var(--space-1);
}
.photo-key { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; }
.photo-val { font-size: 12px; line-height: 16px; color: var(--ink-muted); }

/* 항목: 이름 (굵게) — 내용. 좁은 화면에서는 위아래로, 넓으면 두 칸 */
.facts > dt { font-weight: 700; }
.facts > dd + dt { margin-top: var(--space-1); }
@media (min-width: 480px) {
  .facts { display: grid; grid-template-columns: 128px 1fr; column-gap: var(--space-2); row-gap: var(--space-1); }
  .facts > dd + dt { margin-top: 0; }
}

.faq > dt { font-weight: 700; }
.faq > dd { margin-top: var(--space-half); }
.faq > dd + dt { margin-top: var(--space-3); }

.rules > li + li { margin-top: var(--space-1); }

/* ---- 예약 화면 ---- */
.book-steps { max-width: 560px; }
.book-steps > * + * { margin-top: var(--space-4); }
.book-step { border-top: var(--stroke-hair) solid var(--ink); padding-top: var(--space-2); }
.book-step > * + * { margin-top: var(--space-2); }
.book-step-title { font-size: 20px; line-height: 28px; font-weight: 700; }
.step-no { font-family: var(--font-mono); font-size: 15px; font-weight: 500; color: var(--ink-muted); }
.book-step > .btn { width: 100%; }
@media (min-width: 640px) {
  .book-step > .btn { width: auto; min-width: 200px; }
}

/* 달력 */
.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-half); }
.book-step > .cal-head + .cal-grid { margin-top: var(--space-1); }
.cal-head span { text-align: center; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }
.cal-day {
  min-height: 44px;
  padding: 0;
  border: var(--stroke-hair) solid transparent;
  border-radius: var(--radius-ui);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  cursor: pointer;
}
.cal-day:disabled { color: var(--ink-muted); cursor: default; }
.cal-day.is-open { border-color: var(--ink); font-weight: 500; }
.cal-day.is-open:not(:disabled):hover { background: var(--panel); }
.cal-day.is-full { color: var(--ink-muted); text-decoration: line-through; }
.cal-day.is-selected { background: var(--ink); border-color: var(--ink); color: var(--paper); text-decoration: none; }

/* 시간 카드 (디자인 시스템 BookingCard). 각진 카드, 그림자 없음.
   고른 카드는 2px 검정 테두리 (테두리 1px + 안쪽 선 1px, 크기가 흔들리지 않게) */
.card-list > * + * { margin-top: var(--space-2); }
.bcard { display: flex; flex-direction: column; border: var(--stroke-hair) solid var(--ink-muted); background: var(--paper); }
.bcard.is-selected { border-color: var(--ink); outline: var(--stroke-hair) solid var(--ink); outline-offset: -2px; }
.bcard-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-bottom: var(--stroke-hair) solid var(--line);
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-muted);
}
.bcard-field { color: var(--ink); font-weight: 500; }
.bcard-meta { text-align: right; overflow-wrap: anywhere; }
.bcard-body { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2); }
.bcard-title { font-size: 20px; line-height: 28px; font-weight: 700; }
.bcard-time { font-family: var(--font-mono); font-size: 18px; line-height: 24px; font-weight: 500; }
.bcard-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.cap { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-1); }
.cap-bar { position: relative; height: 8px; background: var(--panel); }
.cap-bar > span { position: absolute; inset: 0 auto 0 0; background: var(--ink); }
.cap-text { font-weight: 500; }
.bcard-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2) var(--space-2);
}
.price { font-family: var(--font-mono); font-size: 18px; line-height: 24px; font-weight: 500; }
.price small { font-family: var(--font-body); font-size: 12px; font-weight: 500; color: var(--ink-muted); margin-left: var(--space-half); }
.bcard.is-closed .bcard-title, .bcard.is-closed .bcard-time, .bcard.is-closed .price { color: var(--ink-muted); }

/* 인원 [-] N명 [+] */
.stepper { display: flex; align-items: center; gap: var(--space-1); }
.stepper-btn { width: 44px; padding: 0; font-family: var(--font-mono); font-size: 20px; }
.stepper-value { min-width: 72px; text-align: center; }

/* 동의 */
.check-list > * + * { margin-top: 12px; }
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  cursor: pointer;
}
.check input { flex: none; width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--ink); }
.check span { flex: 1; min-width: 0; }
.check a { font-size: 12px; white-space: nowrap; }

/* 예약 완료 화면: 예약번호 + [복사하기] 한 줄 */
.result-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }

/* ---- 문서 4종 (/terms /privacy /refund /pledge) ---- */
.doc > * + * { margin-top: var(--space-3); }
.doc-article > * + * { margin-top: var(--space-1); }
.doc-heading { font-size: 15px; line-height: 22px; font-weight: 700; }
.doc li + li { margin-top: var(--space-half); }
.doc-table td:last-child { padding-left: var(--space-2); }
.doc-sign { border-top: var(--stroke-hair) solid var(--line); padding-top: var(--space-2); color: var(--ink-muted); }