/*
Theme Name: HAEON
Theme URI: https://haeon.me
Author: HAEON
Description: 치바 훗쓰 해온 단독 클래식 테마. design-a 시안을 그대로 이식했다.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: haeon
*/

/* design-a/style.css 를 그대로 가져온다. 색·간격·타이포를 다시 정하지 않는다. */

/* ==========================================================================
   HAEON - design tokens
   팔레트: paper(종이) + ink(먹) + vermilion(주홍). 주홍은 컨테이너 카페 실사진에서
   샘플링한 값(#cc2424 계열)을 채도 73%로 눌러 잡았다.
   모서리 규칙: 반경 0. 카드, 이미지, 버튼, 입력 필드 전부 직각. 예외 없음.
   ========================================================================== */

:root {
  /* ---- 색 ---- */
  --paper:        #f4f3f0;   /* 페이지 바탕 */
  --paper-deep:   #e8e6e0;   /* 교차 섹션 바탕 */
  --card:         #fbfaf8;   /* 카드 면 */
  --ink:          #16181a;   /* 본문/헤딩. paper 위 16.0:1 */
  --ink-2:        #4a4e52;   /* 보조 텍스트. paper 위 7.6:1 */
  --ink-3:        #62676b;   /* 캡션/메타. paper 위 5.2:1 */
  --line:         #d8d5cd;   /* 테두리 */
  --line-soft:    #e4e1da;
  --accent:       #c42d1e;   /* 주홍. paper 위 5.1:1, 흰 글자와 5.6:1 */
  --accent-deep:  #9e2417;   /* hover / 눌린 상태 */
  --accent-tint:  rgba(196, 45, 30, 0.07);  /* 여행 플랜이 켜진 면. 글자 대비는 그대로 */
  --accent-tint-2:rgba(196, 45, 30, 0.12);  /* 그 면의 hover */
  --on-ink:       #f4f3f0;   /* ink 바탕 위 글자. 16.0:1 */
  --on-ink-2:     #9aa0a5;   /* ink 바탕 위 보조. 6.7:1 */
  --foot-bg:      #16181a;   /* 페이지 하단 어두운 발 */
  --foot-fg:      #f4f3f0;   /* 16.0:1 */
  --foot-fg-2:    #9aa0a5;   /* 6.7:1 */
  --foot-line:    #33383c;
  --focus:        #16181a;

  /* ---- 서체 ---- */
  --font-kr: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
             "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --font-display: "Archivo", "Pretendard Variable", Pretendard,
             -apple-system, "Apple SD Gothic Neo", sans-serif;

  /* ---- 타입 스케일 ---- */
  --t-xs:   0.75rem;    /* 12 라벨 */
  --t-sm:   0.8125rem;  /* 13 메타 */
  --t-base: 0.9375rem;  /* 15 본문 */
  --t-md:   1.0625rem;  /* 17 리드 */
  --t-lg:   clamp(1.1875rem, 3.4vw, 1.4375rem);
  --t-xl:   clamp(1.4375rem, 4.4vw, 1.9375rem);
  --t-2xl:  clamp(1.75rem, 5.2vw, 2.625rem);
  --t-3xl:  clamp(2.0625rem, 6.2vw, 3.375rem);
  --t-num:  clamp(1.5rem, 5.4vw, 2.5rem);

  /* ---- 간격 ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;
  --pad-x: 20px;
  --sec-y: clamp(64px, 9vw, 128px);
  --wrap: 1240px;
  --wrap-wide: 1480px;

  /* ---- 기타 ---- */
  --radius: 0px;
  --nav-h: 60px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

@media (min-width: 900px) {
  :root { --pad-x: 40px; --nav-h: 72px; --t-base: 1rem; --t-md: 1.125rem; }
}
@media (min-width: 1280px) { :root { --pad-x: 56px; } }

/* ==========================================================================
   RESET
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-kr);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: -0.005em;
  word-break: keep-all;          /* 한글 줄바꿈: 어절 단위 유지 */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;            /* 375px 가로 스크롤 방지 최종 안전망 */
}

h1, h2, h3, h4, p, figure, ul, ol, dl, dd, blockquote { margin: 0; }
[hidden] { display: none !important; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

::selection { background: var(--accent); color: #fff; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* 건너뛰기 링크 */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--on-ink);
  padding: 12px 18px; font-size: var(--t-sm); font-weight: 600;
}
.skip:focus { left: 8px; top: 8px; }

/* ==========================================================================
   레이아웃 프리미티브
   ========================================================================== */

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad-x); }
.wrap-wide { width: 100%; max-width: var(--wrap-wide); margin: 0 auto; padding-inline: var(--pad-x); }
.wrap-narrow { width: 100%; max-width: 720px; margin: 0 auto; padding-inline: var(--pad-x); }

.section { padding-block: var(--sec-y); }
.section--deep { background: var(--paper-deep); }
.section--tight { padding-block: clamp(48px, 6vw, 84px); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ==========================================================================
   타이포그래피
   ========================================================================== */

.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: 115%;
  letter-spacing: 0.01em;
}

h1, .h1 {
  font-size: var(--t-3xl);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.035em;
}
h2, .h2 {
  font-size: var(--t-2xl);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.032em;
}
h3, .h3 {
  font-size: var(--t-xl);
  font-weight: 700;
  line-height: 1.36;
  letter-spacing: -0.03em;
}
h4, .h4 {
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.025em;
}

.lead {
  font-size: var(--t-md);
  line-height: 1.85;
  color: var(--ink-2);
  max-width: 40ch;
  letter-spacing: -0.012em;
}
.body { color: var(--ink-2); max-width: 44ch; }
.meta {
  font-size: var(--t-sm);
  color: var(--ink-3);
  line-height: 1.7;
}
.label {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 600;
  font-stretch: 110%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.section-head { max-width: 46ch; }
.section-head h2 { margin-bottom: var(--s-4); }

/* ==========================================================================
   워드마크
   HAEON(Archivo 확장) 위, 해온(Pretendard 넓은 자간) 아래.
   두 줄의 시각적 너비를 맞춘 이중문자 락업.
   ========================================================================== */

.wordmark { display: inline-block; line-height: 1; text-align: left; }
.wordmark__latin {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: 118%;
  letter-spacing: 0.145em;
  text-indent: 0.145em;         /* 자간이 만든 앞뒤 여백 보정 */
  margin-right: -0.145em;
  font-size: 1em;
}
.wordmark__kr {
  display: block;
  margin-top: 0.42em;
  font-size: 0.34em;
  font-weight: 500;
  letter-spacing: 0.62em;
  text-indent: 0.62em;
  margin-right: -0.62em;
  color: var(--ink-2);
}
.wordmark--hero { font-size: clamp(38px, 11vw, 68px); }
.wordmark--nav  { font-size: 21px; }
.wordmark--nav .wordmark__kr { font-size: 0.36em; margin-top: 0.3em; }
.wordmark--foot { font-size: clamp(34px, 9vw, 52px); }
.wordmark--foot .wordmark__kr { color: var(--foot-fg-2); }
.wordmark--page { font-size: clamp(30px, 7vw, 40px); }

/* ==========================================================================
   버튼
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 50px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -0.015em;
  white-space: nowrap;           /* CTA 라벨 줄바꿈 금지 */
  cursor: pointer;
  transition: background-color .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .12s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-deep); }

.btn--ink { background: var(--ink); color: var(--on-ink); }
.btn--ink:hover { background: #2c3033; }

.btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--outline:hover { background: var(--ink); color: var(--on-ink); }

.btn--onink {
  background: var(--foot-fg);
  color: var(--foot-bg);
}
.btn--onink:hover { background: #fff; }

.btn--sm { min-height: 42px; padding: 0 18px; font-size: var(--t-sm); }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* 텍스트 링크 (밑줄이 hover 시 자란다) */
.link {
  display: inline-block;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  transition: color .2s var(--ease);
}
.link:hover { color: var(--accent); }
/* 같은 생김새의 링크지만 이동이 아니라 상태를 바꾸는 것 */
.link--btn { background: none; border-top: 0; border-left: 0; border-right: 0; padding-left: 0; padding-right: 0; cursor: pointer; font-size: inherit; font-family: inherit; }
.link--onink { color: var(--foot-fg); }
.link--onink:hover { color: #fff; }

/* ==========================================================================
   네비게이션
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(8px)) {
  .nav { backdrop-filter: blur(14px) saturate(1.4); }
}
@supports not (color-mix(in srgb, red 50%, blue)) {
  .nav { background: var(--paper); }
}

.nav__inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}
.nav__links { display: none; }
.nav__actions { display: flex; align-items: center; gap: var(--s-3); }

.nav__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  transition: transform .28s var(--ease), opacity .2s var(--ease);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* 모바일 패널 */
.nav__panel {
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  z-index: 55;
  background: var(--paper);
  padding: var(--s-6) var(--pad-x) var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
}
.nav__panel[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
.nav__panel a {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line-soft);
}
.nav__panel .btn { margin-top: var(--s-5); }
.nav__panel-meta { margin-top: auto; padding-top: var(--s-6); }

body[data-lock="true"] { overflow: hidden; }

@media (min-width: 960px) {
  .nav__links {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2.2vw, 34px);
    margin-left: auto;
    margin-right: clamp(18px, 2.4vw, 36px);
  }
  .nav__links a {
    font-size: var(--t-sm);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink-2);
    white-space: nowrap;
    transition: color .2s var(--ease);
  }
  .nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--ink); }
  .nav__toggle { display: none; }
  .nav__panel { display: none; }
}

/* ==========================================================================
   히어로 (비대칭 분할)
   왼쪽 종이면에 타이포, 오른쪽에 세로 사진. 세로 사진이 많은 자산 사정에 맞춘 구조.
   ========================================================================== */

.hero { border-bottom: 1px solid var(--line); }
.hero__grid { display: grid; }

.hero__media {
  position: relative;
  order: -1;
  height: 30svh;
  min-height: 190px;
  max-height: 300px;
  overflow: hidden;
  background: var(--paper-deep);
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}

.hero__body {
  padding: var(--s-5) var(--pad-x) var(--s-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-4);
}
.hero__title { max-width: 15ch; }
.hero__sub { max-width: 34ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero__ctas .btn { flex: 1 1 auto; min-width: 148px; }

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: 1.08fr 0.92fr;
    align-items: stretch;
    min-height: 600px;
    height: calc(100svh - var(--nav-h));
    max-height: 860px;
  }
  .hero__media {
    order: 0;
    height: auto;
    max-height: none;
    min-height: 0;
  }
  .hero__media img { object-position: 50% 55%; }
  .hero__body {
    padding: clamp(48px, 5vw, 88px) clamp(40px, 5vw, 84px);
    max-width: 780px;
    margin-left: auto;
    width: 100%;
    gap: var(--s-6);
  }
  .hero__ctas .btn { flex: 0 0 auto; }
}

/* ==========================================================================
   팩트 스트립
   ========================================================================== */

.facts {
  display: grid;
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.facts > div {
  background: var(--paper);
  padding: var(--s-5) 0;
}
.facts dt { font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase;
  font-family: var(--font-display); font-weight: 600; color: var(--ink-3); margin-bottom: 6px; }
.facts dd { font-size: var(--t-md); font-weight: 600; letter-spacing: -0.02em; }
.facts dd span { display: block; font-size: var(--t-sm); font-weight: 400; color: var(--ink-3); letter-spacing: 0; }

@media (min-width: 720px) {
  .facts { grid-template-columns: repeat(3, 1fr); }
  .facts > div { padding: var(--s-6) var(--s-5); }
  .facts > div:first-child { padding-left: 0; }
}

/* ==========================================================================
   공간: 분할 블록 (텍스트 + 세로 사진 스택)
   ========================================================================== */

.split { display: grid; gap: var(--s-6); align-items: center; }
.split__text { display: flex; flex-direction: column; gap: var(--s-4); align-items: flex-start; }
.split__text .link { margin-top: var(--s-2); }

/* 세로 사진 두 장 오프셋 스택 */
.stack { display: grid; grid-template-columns: repeat(12, 1fr); }
.stack__a {
  grid-column: 1 / 10;
  grid-row: 1;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--paper-deep);
}
.stack__b {
  grid-column: 7 / 13;
  grid-row: 1;
  align-self: end;
  margin-bottom: -14%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--paper-deep);
  border: 6px solid var(--paper);
}
.section--deep .stack__b { border-color: var(--paper-deep); }
.stack img { width: 100%; height: 100%; object-fit: cover; }
.stack + * { margin-top: 8%; }

.stack--flip .stack__a { grid-column: 4 / 13; }
.stack--flip .stack__b { grid-column: 1 / 7; }

@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 88px); }
  .split--media-first .split__text { order: 2; }
  .split--media-first .split__media { order: 1; }
  .split__text { padding-block: var(--s-5); }
}

/* ==========================================================================
   공간: 가로 스냅 행 (카페)
   ========================================================================== */

.snaprow {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 74%;
  gap: var(--s-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--s-4);
  scrollbar-width: thin;
}
.snaprow > figure {
  scroll-snap-align: start;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--paper-deep);
}
.snaprow img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 900px) {
  .snaprow {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-columns: auto;
    overflow: visible;
    gap: var(--s-4);
    padding-bottom: 0;
  }
  .snaprow > figure:nth-child(2) { margin-top: clamp(24px, 4vw, 56px); }
}

/* ==========================================================================
   공간: 벤토 (다이닝) - 텍스트 1칸 + 사진 4칸 = 정확히 5칸
   ========================================================================== */

.bento {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
}
.bento figure { overflow: hidden; background: var(--paper-deep); margin: 0; }
.bento img { width: 100%; height: 100%; object-fit: cover; }
.bento__copy {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  align-items: flex-start;
  padding-bottom: var(--s-3);
}
.bento__tall  { grid-column: 1 / -1; aspect-ratio: 4 / 5; }
.bento__a { aspect-ratio: 1 / 1; }
.bento__b { aspect-ratio: 1 / 1; }
.bento__wide { grid-column: 1 / -1; aspect-ratio: 16 / 10; }

/* 인스타그램 UI가 가장자리에 박힌 원본 사진을 살짝 확대해 잘라낸다 */
.crop-edge { transform: scale(1.17); }

@media (min-width: 900px) {
  .bento {
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(0, auto);
    gap: var(--s-4);
  }
  .bento__copy { grid-column: 1 / 5;  grid-row: 1 / 3; justify-content: center; padding-bottom: 0; padding-right: var(--s-5); }
  .bento__tall { grid-column: 5 / 9;  grid-row: 1 / 3; aspect-ratio: 3 / 4; height: 100%; }
  .bento__a    { grid-column: 9 / 13; grid-row: 1; aspect-ratio: 4 / 3; }
  .bento__b    { grid-column: 9 / 13; grid-row: 2; aspect-ratio: 4 / 3; }
  .bento__wide { grid-column: 1 / 13; grid-row: 3; aspect-ratio: 21 / 8; }
}

/* ==========================================================================
   인원 세그먼트 - 요금 섹션의 첫 조작.
   "우리 몇 명"을 먼저 고르게 하고, 그 뒤 모든 금액이 그 인원에 맞춰 움직인다.
   ========================================================================== */

.seg {
  display: flex;
  width: 100%;
  max-width: 420px;
  border: 1px solid var(--ink);
}
.seg button {
  flex: 1 1 0;
  min-height: 52px;
  padding: 0 8px;
  background: none;
  border: 0;
  border-right: 1px solid var(--ink);
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.seg button:last-child { border-right: 0; }
.seg button:hover { background: var(--line-soft); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.seg button[aria-pressed="true"]:hover { background: var(--ink); }

.segblock { display: grid; gap: var(--s-3); }
.segblock > .label { color: var(--ink); }

/* ==========================================================================
   여행 플랜 스위치 - 요금의 두 번째 축
   인원 세그먼트가 "고르는" 컨트롤이라면 이것은 "더하는" 컨트롤이다.
   그래서 세그먼트처럼 칸을 나눠 하나를 고르게 하지 않고, 왼쪽에 주홍 + 기호
   (아래 .addon__plus 와 같은 글리프)를 세운 한 덩어리로 그렸다.
   켜면 요금표 아홉 칸과 코스 카드 세 장의 숫자가 통째로 같이 올라간다.
   그 움직임 자체가 "코스 대신 고르는 것이 아니라 코스에 얹는 것"이라는 설명이다.
   ========================================================================== */

/* 인원 + 플랜. 두 컨트롤이 같은 줄에 서서 요금의 두 축임을 보인다. */
.pricectl {
  display: grid;
  gap: var(--s-5);
  align-items: start;
}
@media (min-width: 760px) {
  .pricectl {
    grid-template-columns: minmax(0, 420px) minmax(0, 440px);
    gap: var(--s-6);
  }
}

.planswitch {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 440px;
  min-height: 52px;              /* .seg button 과 같은 높이로 두 컨트롤이 정렬된다 */
  padding: 0;
  background: none;
  border: 1px solid var(--ink);
  border-radius: 0;              /* 반경 0 규칙, 예외 없음 */
  text-align: left;
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.planswitch:hover { background: var(--line-soft); }

.planswitch__plus {
  flex: none;
  width: 52px;
  display: grid;
  place-items: center;
  border-right: 1px solid var(--ink);
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 400;
  line-height: 1;
  color: var(--ink-3);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}

.planswitch__txt {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 1px;
  padding: 7px var(--s-3);
}
.planswitch__txt b {
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--ink);
}
.planswitch__txt small {
  font-size: var(--t-xs);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  transition: color .2s var(--ease);
}

/* 트랙과 손잡이도 직각이다 */
.planswitch__track {
  flex: none;
  align-self: center;
  position: relative;
  width: 44px;
  height: 22px;
  margin-right: var(--s-4);
  border: 1px solid var(--ink-3);
  transition: border-color .2s var(--ease);
}
.planswitch__knob {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: 16px;
  background: var(--ink-3);
  transition: transform .3s var(--ease), background-color .2s var(--ease);
}

.planswitch[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-tint); }
.planswitch[aria-pressed="true"]:hover { background: var(--accent-tint-2); }
.planswitch[aria-pressed="true"] .planswitch__plus { color: var(--accent); border-right-color: var(--accent); }
.planswitch[aria-pressed="true"] .planswitch__txt small { color: var(--accent); font-weight: 700; }
.planswitch[aria-pressed="true"] .planswitch__track { border-color: var(--accent); }
.planswitch[aria-pressed="true"] .planswitch__knob { transform: translateX(22px); background: var(--accent); }

/* 요금표 머리에 붙는 띠. 표 안의 숫자가 무엇을 포함한 값인지 한 줄로 말한다. */
.matrix-flag {
  display: none;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--s-2);
  padding: 10px var(--s-3);
  border: 1px solid var(--accent);
  border-bottom: 0;
  background: var(--accent-tint);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--accent);
}
.matrix-flag span {
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-2);
}
:root[data-planon="true"] .matrix-flag { display: flex; }
:root[data-planon="true"] .matrix { border-top-color: var(--accent); }

/* 표 아래 설명은 상태에 따라 문장이 바뀐다 */
.matrix__note--plan { display: none; }
:root[data-planon="true"] .matrix__note--plan { display: block; }
:root[data-planon="true"] .matrix__note--base { display: none; }

/* 숫자가 바뀔 때의 교체 모션.
   세그먼트를 눌렀을 때와 스위치를 켰을 때 같은 방식으로 움직여야
   "같은 표의 같은 숫자가 움직였다"로 읽힌다. */
.matrix__price, .matrix__total,
.course__now b, .course__now i, .course__add,
.addon__calc dd {
  transition: opacity .16s var(--ease), transform .16s var(--ease);
}
[data-swap="true"] { opacity: 0; transform: translateY(-5px); }

@media (prefers-reduced-motion: reduce) {
  .matrix__price, .matrix__total,
  .course__now b, .course__now i, .course__add,
  .addon__calc dd { transition: none; }
  [data-swap="true"] { opacity: 1; transform: none; }
  .planswitch__knob { transition: none; }
}

/* ==========================================================================
   요금 매트릭스 - 이 시안의 중심 장치
   가로축 = 인원(오른쪽으로 갈수록 1인 요금이 내려간다), 세로축 = 코스.
   9칸이 375px 에서 한 화면에 다 들어오고, 고른 인원의 열이 강조된다.
   칸마다 1인 요금(큰 숫자)과 총액(작은 숫자)을 같이 적는다.
   1인가는 내려가지만 총액은 올라가므로 둘을 같이 보여 주지 않으면 오해가 생긴다.
   ========================================================================== */

.matrix {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--ink);
  table-layout: fixed;
}
.matrix caption { text-align: left; padding-bottom: var(--s-4); }

.matrix th, .matrix td {
  padding: var(--s-3) 6px;
  text-align: right;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
}
.matrix thead th {
  border-bottom: 1px solid var(--ink);
  padding: 10px 6px;
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  transition: color .2s var(--ease);
}
.matrix thead th[data-active="true"] { color: var(--ink); background: var(--paper); }
.section--deep .matrix thead th[data-active="true"] { background: var(--card); }
.matrix th:first-child, .matrix td:first-child {
  text-align: left;
  width: 22%;
  padding-left: 0;
  box-shadow: none;
}

/* 코스 이름 셀 */
.matrix__course { line-height: 1.35; }
.matrix__course b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 700;
  font-stretch: 115%;
  letter-spacing: 0.02em;
}
.matrix__course span { display: block; font-size: var(--t-xs); color: var(--ink-3); line-height: 1.4; }

/* 가격 셀 */
.matrix__price {
  display: block;
  font-size: clamp(1rem, 4.4vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  transition: color .25s var(--ease);
  color: var(--ink-3);
}
.matrix__total {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  letter-spacing: -0.01em;
}
.matrix td[data-active="true"] { background: var(--paper); box-shadow: inset 2px 0 0 var(--accent); }
.section--deep .matrix td[data-active="true"] { background: var(--card); }
.matrix td[data-active="true"] .matrix__price { color: var(--ink); }
.matrix td[data-active="true"] .matrix__total { color: var(--ink-2); }

.matrix__note {
  margin-top: var(--s-4);
  font-size: var(--t-sm);
  color: var(--ink-3);
}

@media (min-width: 720px) {
  .matrix th, .matrix td { padding: var(--s-5) var(--s-4); }
  .matrix thead th { padding: var(--s-3) var(--s-4); font-size: var(--t-base); }
  .matrix th:first-child, .matrix td:first-child { width: 30%; }
  .matrix__price { font-size: clamp(1.5rem, 3.2vw, 2.25rem); }
  .matrix__total { font-size: var(--t-sm); }
  .matrix__course span { font-size: var(--t-sm); }
}

/* 코스 상세 카드 */
.courses {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-7);
}
.course {
  background: var(--card);
  border: 1px solid var(--line);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.section--deep .course { border-color: var(--line); }
.course__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.course__letter {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  font-stretch: 118%;
  letter-spacing: 0.04em;
}
.course__now {
  text-align: right;
  font-size: var(--t-xs);
  color: var(--ink-3);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.course__now b {
  display: block;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.course__now i { font-style: normal; display: block; color: var(--ink-2); }

/* 플랜이 켜졌을 때만 나오는 내역 한 줄. 두 숫자가 어디서 왔는지 적는다. */
.course__add {
  display: none;
  font-style: normal;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--accent);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
:root[data-planon="true"] .course__add { display: block; }
.course__dl { display: grid; grid-template-columns: 44px 1fr; gap: var(--s-2) var(--s-3); font-size: var(--t-sm); }
.course__dl dt { color: var(--ink-3); font-weight: 600; }
.course__dl dd { color: var(--ink-2); line-height: 1.7; }
.course .btn { margin-top: auto; }

@media (min-width: 900px) {
  .courses { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
  .course { padding: var(--s-6); }
}

/* 강조 안내 박스 (계약금 등) */
.callbox {
  border: 1px solid var(--ink);
  padding: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-5);
}
.callbox b { font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.callbox p { font-size: var(--t-sm); color: var(--ink-2); max-width: 52ch; }
@media (min-width: 900px) { .callbox { padding: var(--s-5) var(--s-6); } }

/* ==========================================================================
   추가 옵션 카드 (여행 플랜)
   코스와 나란한 별개 상품이 아니라 "고른 코스에 얹는 것"으로 읽혀야 한다.
   그래서 카드 머리에 + 기호를 두고, 아래 예시 줄에서 실제 합산 결과를 보여 준다.
   ========================================================================== */

.addon { border: 1px solid var(--ink); background: var(--card); }

.addon__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3) var(--s-4);
  align-items: start;
  padding: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.addon__plus {
  grid-row: 1 / 3;
  font-family: var(--font-display);
  font-size: clamp(2rem, 7vw, 2.75rem);
  font-weight: 400;
  line-height: 0.9;
  color: var(--accent);
  margin-top: -2px;
}
.addon__tag {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent);
}
.addon__title { display: grid; gap: 2px; }
.addon__title h3 { margin: 0; }
.addon__fee {
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.addon__body { padding: var(--s-5); display: grid; gap: var(--s-5); }
.addon__body .band { border: 0; }

.addon__example {
  border-top: 1px solid var(--line);
  background: var(--paper-deep);
  padding: var(--s-5);
  display: grid;
  gap: var(--s-2);
}
.addon__example .meta { color: var(--ink-2); }

/* 스위치가 켜져 있으면 이 블록은 '예시'가 아니라 '지금 적용된 값'이 된다 */
.addon__example .meta--on { display: none; color: var(--accent); font-weight: 700; }
:root[data-planon="true"] .addon__example .meta--on { display: block; }
:root[data-planon="true"] .addon__example .meta--off { display: none; }
:root[data-planon="true"] .addon { border-color: var(--accent); }
:root[data-planon="true"] .addon__example { border-top-color: var(--accent); background: var(--accent-tint); }

/* 더했을 때 1인 요금이 얼마가 되는지, 코스별로 바로 보여 준다 */
.addon__calc { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.addon__calc > div { display: grid; gap: 2px; }
.addon__calc dt {
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 700;
  font-stretch: 115%;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.addon__calc dd {
  font-size: clamp(1rem, 4.2vw, 1.375rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 900px) {
  .addon__head { padding: var(--s-6); grid-template-columns: auto 1fr auto; align-items: center; }
  .addon__plus { grid-row: 1; }
  .addon__fee { justify-self: end; font-size: var(--t-xl); }
  .addon__body { padding: var(--s-6); }
  .addon__example { padding: var(--s-5) var(--s-6); }
  .addon__calc { max-width: 560px; gap: var(--s-5); }
}

/* 공통 안내 · 추가 옵션 4칸 */
.addons { display: grid; gap: var(--s-4); }
.addons > div { border-top: 1px solid var(--ink); padding-top: var(--s-3); display: grid; gap: 2px; }
.addons dt { font-size: var(--t-sm); color: var(--ink-3); }
.addons dd {
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.addons dd small { display: block; font-size: var(--t-xs); font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
@media (min-width: 640px) { .addons { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); } }
@media (min-width: 1000px) { .addons { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   여행 플랜 도시 목록 / 밴드 사진
   ========================================================================== */

.band {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 46svh;
  overflow: hidden;
  background: var(--paper-deep);
}
.band img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .band { aspect-ratio: 21 / 7; max-height: 480px; } }

.cities {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--ink);
}
.cities > div { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.cities h4 { margin-bottom: 4px; }
.cities h4 em {
  font-style: normal;
  font-family: var(--font-display);
  font-size: 0.6em;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  margin-left: 10px;
  vertical-align: 0.16em;
}
.cities p { font-size: var(--t-sm); color: var(--ink-2); }

@media (min-width: 800px) {
  .cities { grid-template-columns: repeat(3, 1fr); gap: 0 var(--s-6); }
  .cities > div { border-bottom: 0; padding-block: var(--s-4) 0; }
}

/* 옵션에 포함되는 것 */
.included { display: grid; gap: 6px; font-size: var(--t-sm); color: var(--ink-2); }
.included li { padding-left: 14px; position: relative; }
.included li::before {
  content: ""; position: absolute; left: 0; top: 0.78em;
  width: 7px; height: 1px; background: var(--accent);
}
@media (min-width: 640px) {
  .included { grid-template-columns: repeat(2, 1fr); gap: 6px var(--s-5); max-width: 520px; }
}

/* ==========================================================================
   예약 안내 밴드 (ink) + 푸터 (ink)
   페이지 하단의 어두운 발. 중간에서 테마가 뒤집히지 않는다.
   ========================================================================== */

.foot-dark { background: var(--foot-bg); color: var(--foot-fg); }

.cta-band { padding-block: var(--sec-y); }
.cta-band h2 { max-width: 18ch; }
.cta-band .lead { color: var(--foot-fg-2); max-width: 42ch; margin-top: var(--s-4); }

.steps {
  display: grid;
  gap: 0;
  margin-top: var(--s-7);
  border-top: 1px solid var(--foot-line);
}
.steps > li { padding: var(--s-4) 0; border-bottom: 1px solid var(--foot-line); display: grid; gap: 4px; }
.steps b { font-size: var(--t-md); font-weight: 600; letter-spacing: -0.02em; }
.steps span { font-size: var(--t-sm); color: var(--foot-fg-2); }
@media (min-width: 800px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 0 var(--s-6); }
  .steps > li { border-bottom: 0; padding-block: var(--s-5) 0; }
}

.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-7); }
.cta-band__actions .btn { flex: 1 1 auto; min-width: 160px; }
@media (min-width: 800px) { .cta-band__actions .btn { flex: 0 0 auto; } }

.footer { border-top: 1px solid var(--foot-line); padding-block: var(--s-7) var(--s-6); }
.footer__grid { display: grid; gap: var(--s-6); }
.footer h5 {
  margin: 0 0 var(--s-3);
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--foot-fg-2);
}
.footer ul { display: grid; gap: var(--s-2); font-size: var(--t-sm); }
.footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.footer__legal {
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 1px solid var(--foot-line);
  font-size: var(--t-xs);
  color: var(--foot-fg-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
}
@media (min-width: 800px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-6); }
}

/* ==========================================================================
   페이지 헤더 (하위 페이지)
   ========================================================================== */

.pagehead { padding-block: clamp(40px, 6vw, 80px) clamp(32px, 4vw, 56px); }
.pagehead__back { font-size: var(--t-sm); color: var(--ink-3); font-weight: 600; }
.pagehead__back:hover { color: var(--ink); }
.pagehead h1 { margin-top: var(--s-4); max-width: 16ch; }
.pagehead .lead { margin-top: var(--s-4); max-width: 46ch; }
.pagehead__row { display: grid; gap: var(--s-5); }
@media (min-width: 900px) {
  .pagehead__row { grid-template-columns: 1.1fr 0.9fr; align-items: end; gap: clamp(40px, 5vw, 80px); }
  .pagehead .lead { margin-top: 0; padding-bottom: 6px; }
}

/* ==========================================================================
   갤러리
   자산의 대부분이 휴대폰 세로 사진이다. 고정 비율 격자에 넣으면 머리가 잘리거나
   행마다 빈칸이 생긴다. 그래서 다단(column) 흐름을 쓴다.
   사진은 원래 비율 그대로 흐르고, 자르지 않는다.
   ========================================================================== */

.gal { columns: 2; column-gap: var(--s-2); }
.gal figure {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 var(--s-2);
  overflow: hidden;
  background: var(--paper-deep);
}
.gal button {
  display: block; width: 100%; padding: 0; border: 0;
  background: none; cursor: zoom-in; overflow: hidden;
}
.gal img { width: 100%; height: auto; transition: transform .6s var(--ease); }
.gal button:hover img { transform: scale(1.035); }

@media (min-width: 760px) {
  .gal { columns: 3; column-gap: var(--s-3); }
  .gal figure { margin-bottom: var(--s-3); }
}
@media (min-width: 1200px) {
  .gal { column-gap: var(--s-4); }
  .gal figure { margin-bottom: var(--s-4); }
}

/* 라이트박스 */
.lightbox {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(10, 11, 12, .94);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lightbox[data-open="true"] { display: flex; }
.lightbox img {
  max-width: 100%;
  max-height: calc(100svh - 120px);
  width: auto;
  object-fit: contain;
}
.lightbox__close, .lightbox__nav {
  position: absolute;
  background: none;
  border: 1px solid rgba(244, 243, 240, .35);
  color: #f4f3f0;
  width: 48px; height: 48px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s var(--ease);
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(244, 243, 240, .14); }
.lightbox__close { top: 20px; right: 20px; }
.lightbox__nav--prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__count {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  font-size: var(--t-sm); color: #9aa0a5; font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   정보 목록 (시설 등) - 2열 그룹, 행마다 선 긋지 않음
   ========================================================================== */

.infogrid { display: grid; gap: var(--s-5); }
.infogrid > div { border-top: 1px solid var(--ink); padding-top: var(--s-4); }
.infogrid h4 { margin-bottom: var(--s-3); }
.infogrid ul { display: grid; gap: var(--s-2); font-size: var(--t-base); color: var(--ink-2); }
.infogrid li { padding-left: 16px; position: relative; }
.infogrid li::before {
  content: ""; position: absolute; left: 0; top: 0.82em;
  width: 8px; height: 1px; background: var(--accent);
}
@media (min-width: 760px) { .infogrid { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }

.callout {
  border-left: 3px solid var(--accent);
  padding: var(--s-4) 0 var(--s-4) var(--s-5);
  font-size: var(--t-sm);
  color: var(--ink-2);
  max-width: 60ch;
}

/* ==========================================================================
   예약 폼
   ========================================================================== */

.form { display: grid; gap: var(--s-5); }
.form__group { display: grid; gap: var(--s-2); }
.form__row { display: grid; gap: var(--s-5); }
@media (min-width: 720px) { .form__row { grid-template-columns: 1fr 1fr; } }

.form label {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.form label .req { color: var(--accent); margin-left: 3px; }
.form .hint { font-size: var(--t-xs); color: var(--ink-3); line-height: 1.6; }

.input, .select, .textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  font-size: var(--t-base);
  color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  appearance: none;
}
.textarea { min-height: 128px; resize: vertical; line-height: 1.75; }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); opacity: 1; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.error {
  font-size: var(--t-xs);
  color: var(--accent-deep);
  font-weight: 600;
  min-height: 0;
}
.error:empty { display: none; }

/* 코스 라디오 카드 */
.radioset { display: grid; gap: var(--s-3); border: 0; padding: 0; margin: 0; }
.radioset .input[type="number"] { max-width: 140px; }
.radioset legend { padding: 0; margin-bottom: var(--s-3); font-size: var(--t-sm); font-weight: 600; }
.radiocard {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--s-3);
  align-items: start;
  padding: var(--s-4);
  border: 1px solid var(--line);
  background: var(--card);
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.radiocard:hover { border-color: var(--ink-3); }
.radiocard input { margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--accent); }
.radiocard b { display: block; font-size: var(--t-base); font-weight: 700; letter-spacing: -0.02em; }
.radiocard span { display: block; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.65; }
.radiocard em {
  display: block; margin-top: 4px; font-style: normal;
  font-size: var(--t-sm); font-weight: 600; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.radiocard:has(input:checked) { border-color: var(--ink); background: var(--paper-deep); }
.radiocard:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

/* 동의 체크박스 */
.check {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--s-3);
  align-items: start;
  font-size: var(--t-sm);
  font-weight: 400;
  color: var(--ink-2);
  line-height: 1.7;
  cursor: pointer;
}
.check input { margin: 4px 0 0; width: 18px; height: 18px; accent-color: var(--accent); }
.check a { border-bottom: 1px solid var(--line); }

.consentbox {
  border: 1px solid var(--line);
  background: var(--card);
  padding: var(--s-4);
  display: grid;
  gap: var(--s-3);
}
.consentbox .detail {
  font-size: var(--t-xs);
  color: var(--ink-3);
  line-height: 1.75;
  border-top: 1px solid var(--line-soft);
  padding-top: var(--s-3);
}

/* 폼 제출 버튼 로딩 상태 */
.btn[data-loading="true"] { pointer-events: none; opacity: .8; }
.btn__spin {
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  display: none;
}
.btn[data-loading="true"] .btn__spin { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .btn[data-loading="true"] .btn__spin { animation: spin .7s linear infinite; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 예약 요약 사이드 카드 */
.summary {
  border: 1px solid var(--ink);
  padding: var(--s-5);
  display: grid;
  gap: var(--s-4);
  align-content: start;
}
.summary dl { display: grid; grid-template-columns: 72px 1fr; gap: var(--s-3); font-size: var(--t-sm); }
.summary dt { color: var(--ink-3); }
.summary dd { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.summary__total { border-top: 1px solid var(--line); padding-top: var(--s-4); }
.summary__total b { display: block; font-size: var(--t-xl); font-weight: 700; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.summary__total span { font-size: var(--t-xs); color: var(--ink-3); }

/* 요금 내역 줄 */
.summary__lines { display: grid; gap: var(--s-3); font-size: var(--t-sm); }
.summary__lines > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-3);
  align-items: baseline;
}
.summary__lines .k { color: var(--ink-2); }
.summary__lines .k small { display: block; font-size: var(--t-xs); color: var(--ink-3); }
.summary__lines .v { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.summary__empty { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.7; }
.summary__deposit {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-3);
  align-items: baseline;
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-sm);
}
.summary__deposit .v { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }

@media (min-width: 1000px) {
  .booking-grid { display: grid; grid-template-columns: 1fr 340px; gap: clamp(40px, 5vw, 72px); align-items: start; }
  .summary { position: sticky; top: calc(var(--nav-h) + 24px); }
}

/* 신청 완료 화면 */
.done { display: none; }
.done[data-state="on"] { display: block; }
.form-panel[data-state="off"] { display: none; }

.done__mark {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  padding: 7px 14px;
}
.done h1 { margin-top: var(--s-5); max-width: 18ch; }
.done .lead { margin-top: var(--s-4); }
.done__next {
  margin-top: var(--s-6);
  border-top: 1px solid var(--ink);
  display: grid;
}
.done__next li { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.done__next b { display: block; font-size: var(--t-md); font-weight: 600; letter-spacing: -0.02em; }
.done__next span { font-size: var(--t-sm); color: var(--ink-2); }
@media (min-width: 800px) {
  .done__next { grid-template-columns: repeat(3, 1fr); gap: 0 var(--s-6); }
  .done__next li { border-bottom: 0; padding-block: var(--s-4) 0; }
}
.done__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-7); }

/* ==========================================================================
   문의 카드
   ========================================================================== */

.contact { display: grid; gap: var(--s-4); }
.contact__card {
  border: 1px solid var(--line);
  background: var(--card);
  padding: var(--s-5);
  display: grid;
  gap: var(--s-2);
  align-content: start;
  transition: border-color .22s var(--ease), transform .22s var(--ease);
}
.contact__card:hover { border-color: var(--ink); transform: translateY(-2px); }
.contact__card b { font-size: var(--t-md); font-weight: 700; letter-spacing: -0.02em; }
.contact__card code {
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
}
.contact__card span { font-size: var(--t-sm); color: var(--ink-3); }
@media (min-width: 760px) { .contact { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); } }

/* ==========================================================================
   인스타그램
   ========================================================================== */
.instagram__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-4); }
.instagram__account { margin-bottom: var(--s-1); }
.instagram__controls { display: none; }
.instagram__strip { display: flex; gap: var(--s-4); margin-top: var(--s-6); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.instagram__strip::-webkit-scrollbar { display: none; }
.instagram__post { flex: 0 0 min(82vw, 360px); max-width: 100%; scroll-snap-align: start; border: 1px solid var(--line); background: var(--card); }
.instagram__post iframe { display: block; width: 100%; height: 480px; border: 0; }
.instagram__more { margin-top: var(--s-5); }
@media (min-width: 760px) {
	.instagram__controls { display: flex; justify-content: end; gap: var(--s-2); margin-top: calc(var(--s-6) * -1); }
	.instagram__arrow { display: inline-grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--paper); color: var(--ink); font: inherit; font-size: var(--t-lg); cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease); }
	.instagram__arrow:hover:not(:disabled) { background: var(--ink); color: var(--on-ink); }
	.instagram__arrow:disabled { opacity: .4; cursor: not-allowed; }
}

/* ==========================================================================
   스크롤 등장 (MOTION_INTENSITY 4)
   JS 가 죽으면 전부 그냥 보인다. reduced-motion 이면 애니메이션 없음.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
  }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .js .reveal--d1 { transition-delay: .08s; }
  .js .reveal--d2 { transition-delay: .16s; }
  .js .reveal--d3 { transition-delay: .24s; }
}

/* ==========================================================================
   다크 모드
   레이아웃과 구조는 그대로 두고 토큰만 뒤집는다.
   주홍은 어두운 바탕에서 대비가 3.2:1 로 떨어지므로 밝은 쪽으로 옮긴다(#e5623f, 5.2:1).
   페이지 하단의 어두운 발은 두 모드 모두에서 어둡게 유지한다.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #17191b;
    --paper-deep:   #1f2225;
    --card:         #212528;
    --ink:          #eceae5;   /* paper 위 13.8:1 */
    --ink-2:        #b4b8bc;   /* paper 위 8.4:1 */
    --ink-3:        #90959a;   /* paper 위 5.4:1 */
    --line:         #34383c;
    --line-soft:    #2a2e31;
    --accent:       #e5623f;   /* paper 위 5.2:1 */
    --accent-deep:  #f0805c;
    --accent-tint:  rgba(229, 98, 63, 0.13);
    --accent-tint-2:rgba(229, 98, 63, 0.19);
    --on-ink:       #17191b;   /* 밝아진 --ink 위에 얹는 글자 */
    --on-ink-2:     #4a4e52;
    --foot-bg:      #0f1113;
    --foot-fg:      #eceae5;
    --foot-fg-2:    #9aa0a5;
    --foot-line:    #2b2f33;
    --focus:        #eceae5;
  }

  /* 주홍 버튼은 어두운 모드에서 채워진 면이 아니라 윤곽으로 둔다.
     밝은 주홍 위 흰 글자는 대비가 부족하다. */
  .btn--primary { background: var(--accent); color: #17191b; }
  .btn--primary:hover { background: var(--accent-deep); }

  .done__mark { color: #17191b; }
  ::selection { background: var(--accent); color: #17191b; }

  /* 사진이 어두운 바탕에서 지나치게 튀지 않게 아주 살짝 누른다 */
  .band img, .gal img, .stack img, .snaprow img, .bento img, .hero__media img {
    filter: brightness(0.94);
  }
}

:root[data-theme="dark"] {
    --paper:        #17191b;
    --paper-deep:   #1f2225;
    --card:         #212528;
    --ink:          #eceae5;   /* paper 위 13.8:1 */
    --ink-2:        #b4b8bc;   /* paper 위 8.4:1 */
    --ink-3:        #90959a;   /* paper 위 5.4:1 */
    --line:         #34383c;
    --line-soft:    #2a2e31;
    --accent:       #e5623f;   /* paper 위 5.2:1 */
    --accent-deep:  #f0805c;
    --accent-tint:  rgba(229, 98, 63, 0.13);
    --accent-tint-2:rgba(229, 98, 63, 0.19);
    --on-ink:       #17191b;   /* 밝아진 --ink 위에 얹는 글자 */
    --on-ink-2:     #4a4e52;
    --foot-bg:      #0f1113;
    --foot-fg:      #eceae5;
    --foot-fg-2:    #9aa0a5;
    --foot-line:    #2b2f33;
    --focus:        #eceae5;
  }

  /* 주홍 버튼은 어두운 모드에서 채워진 면이 아니라 윤곽으로 둔다.
     밝은 주홍 위 흰 글자는 대비가 부족하다. */
  .btn--primary { background: var(--accent); color: #17191b; }
  .btn--primary:hover { background: var(--accent-deep); }

  .done__mark { color: #17191b; }
  ::selection { background: var(--accent); color: #17191b; }

  /* 사진이 어두운 바탕에서 지나치게 튀지 않게 아주 살짝 누른다 */
  .band img, .gal img, .stack img, .snaprow img, .bento img, .hero__media img {
    filter: brightness(0.94);
  }


@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}

:root[data-theme="dark"] { color-scheme: dark; }


/* 인쇄 */
@media print {
  .nav, .lightbox, .cta-band__actions, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}


/* ── 라이트/다크 토글 버튼 ───────────────────────────────────────── */
:root[data-theme="light"] { color-scheme: light; }

.theme-toggle{
  display:inline-grid; place-items:center;
  width:38px; height:38px; padding:0;
  background:transparent; border:1px solid var(--line);
  border-radius:0; color:var(--ink);
  cursor:pointer; flex:none;
  transition:border-color .15s, background .15s;
}
.theme-toggle:hover{ border-color:var(--ink); background:var(--card); }
.theme-toggle:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.theme-toggle svg{ width:17px; height:17px; display:block; }
/* 아이콘은 '지금 어느 모드인가'를 보여 준다: 밝으면 해, 어두우면 달 */
.theme-toggle .icon-sun  { display:block; }
.theme-toggle .icon-moon { display:none; }

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-sun  { display:none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display:block; }
}
:root[data-theme="dark"] .theme-toggle .icon-sun  { display:none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display:block; }
:root[data-theme="light"] .theme-toggle .icon-sun  { display:block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display:none; }

/* ==========================================================================
   WordPress: 관리자 바, 메뉴, 갤러리 블록, 예약 플러그인 폼
   디자인 토큰은 위에서 가져온 값을 그대로 쓴다.
   ========================================================================== */

.admin-bar .nav { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .nav { top: 46px; }
}

.nav__links .menu {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 34px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__links .menu a {
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  white-space: nowrap;
  transition: color .2s var(--ease);
}
.nav__links .menu a:hover,
.nav__links .current-menu-item > a,
.nav__links .current-menu-item > a:hover,
.nav__links a[aria-current="page"] { color: var(--ink); }

.nav__panel .menu {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__panel .menu a {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line-soft);
  display: block;
}

/* 블록 에디터 갤러리 → 시안의 다단(.gal) 흐름. 세로 사진을 자르지 않는다. */
.wp-block-gallery,
.wp-block-gallery.has-nested-images,
.entry-content .wp-block-gallery.has-nested-images {
  display: block;
  columns: 2;
  column-gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.wp-block-gallery .wp-block-image,
.wp-block-gallery.has-nested-images > .wp-block-image,
.wp-block-gallery.has-nested-images .wp-block-image {
  display: block;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 var(--s-2);
  width: 100% !important;
  max-width: 100%;
  flex-grow: 0;
  position: relative;
  overflow: hidden;
  background: var(--paper-deep);
}
.wp-block-gallery .wp-block-image img,
.wp-block-gallery.has-nested-images > .wp-block-image img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  cursor: zoom-in;
  transition: transform .6s var(--ease);
}
.wp-block-gallery .wp-block-image:hover img { transform: scale(1.035); }
.wp-block-gallery figcaption { display: none; }

@media (min-width: 760px) {
  .wp-block-gallery,
  .wp-block-gallery.has-nested-images,
  .entry-content .wp-block-gallery.has-nested-images {
    columns: 3;
    column-gap: var(--s-3);
  }
  .wp-block-gallery .wp-block-image,
  .wp-block-gallery.has-nested-images > .wp-block-image { margin-bottom: var(--s-3); }
}
@media (min-width: 1200px) {
  .wp-block-gallery,
  .wp-block-gallery.has-nested-images { column-gap: var(--s-4); }
  .wp-block-gallery .wp-block-image,
  .wp-block-gallery.has-nested-images > .wp-block-image { margin-bottom: var(--s-4); }
}

:root[data-theme="dark"] .wp-block-gallery img {
  filter: brightness(0.94);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wp-block-gallery img {
    filter: brightness(0.94);
  }
}

.entry-content > p,
.entry-content > h2,
.entry-content > h3 {
  max-width: 46ch;
}
.entry-content > p {
  color: var(--ink-2);
  margin-bottom: var(--s-4);
}
.entry-content > .wp-block-gallery { margin-top: clamp(28px, 3.5vw, 48px); }

/* 예약 플러그인 폼 — 마크업은 플러그인, 겉모습만 시안 .form 규칙을 입힌다. */
.haeon-booking-form-wrap { max-width: 720px; }
.haeon-booking-form {
  display: grid;
  gap: var(--s-5);
}
.haeon-booking-form p {
  display: grid;
  gap: var(--s-2);
  margin: 0;
}
.haeon-booking-form label {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.haeon-booking-form input[type="text"],
.haeon-booking-form input[type="email"],
.haeon-booking-form input[type="tel"],
.haeon-booking-form input[type="date"],
.haeon-booking-form input[type="number"],
.haeon-booking-form select,
.haeon-booking-form textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  font-size: var(--t-base);
  color: var(--ink);
  appearance: none;
}
.haeon-booking-form textarea { min-height: 128px; resize: vertical; line-height: 1.75; }
.haeon-booking-form input:focus,
.haeon-booking-form select:focus,
.haeon-booking-form textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.haeon-booking-form select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.haeon-booking-form input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 4px 8px 0 0;
  accent-color: var(--accent);
}
.haeon-booking-form p:has(input[type="checkbox"]) label {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-weight: 400;
  color: var(--ink-2);
  cursor: pointer;
}
.haeon-booking-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -0.015em;
  cursor: pointer;
}
.haeon-booking-form button[type="submit"]:hover { background: var(--accent-deep); }
:root[data-theme="dark"] .haeon-booking-form button[type="submit"] {
  color: #17191b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .haeon-booking-form button[type="submit"] {
    color: #17191b;
  }
}
.haeon-estimate {
  border: 1px solid var(--ink);
  padding: var(--s-5);
  display: grid;
  gap: var(--s-2);
}
.haeon-estimate strong {
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.haeon-notice {
  border: 1px solid var(--ink);
  padding: var(--s-5);
  margin-bottom: var(--s-6);
  background: var(--card);
}
.haeon-hp { position: absolute; left: -9999px; }

.alignnone, .aligncenter, .alignleft, .alignright { max-width: 100%; height: auto; }
.wp-block-image img { max-width: 100%; height: auto; }

/* ==========================================================================
   요금이 1인 기준임을 숫자 옆에서 바로 읽히게 한다.
   표 아래 설명만으로는 숫자를 스캔하는 사람이 총액으로 오해한다.
   ========================================================================== */
.matrix-unit-banner {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  margin: 0 0 var(--s-3);
  padding: 10px 14px;
  background: var(--paper-deep);
  border-left: 3px solid var(--accent);
}
.matrix-unit-banner strong { font-size: var(--t-sm); font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.matrix-unit-banner span   { font-size: var(--t-sm); color: var(--ink-3); }

.matrix__unit,
.course__unit {
  display: inline-block;
  margin-right: 5px;
  font-size: 0.68em;
  font-weight: 700;
  color: var(--ink-3);
  letter-spacing: 0;
  vertical-align: 0.12em;
}
.matrix__unit { display: block; margin: 0 0 1px; font-size: 0.72rem; line-height: 1; }

.matrix__thsub {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0;
  margin-top: 1px;
}

@media (max-width: 420px) {
  .matrix__unit { font-size: 0.66rem; }
  .matrix-unit-banner { padding: 9px 11px; }
}