/* =========================================================
   TERRACEA — 새 디자인(노을 테마, 2026-11-05 운영자 승인 시안 ENGINE-V2\design\mockups\site-dark)
   손님 페이지만 읽는다(관리자 화면 admin·analytics·inventory는 읽지 않음). theme.css 뒤, <head> 맨 끝.
   1) 색 변수: 기존 페이지(예약·객실 찾기·문의·확인서 등)가 통째로 어두운 바탕 + 주황 하나가 된다.
   2) 공통 메뉴·꼬리말: 기존 마크업(.site-nav·.mobile-menu·.site-footer, js/common.js) 그대로, 모양만.
   3) .sd 페이지 부품: 시안에서 옮긴 6페이지(body class="sd")만 쓰는 부품. 다른 페이지에 새지 않게 .sd 아래에만.
   ========================================================= */
:root {
  --color-bg: #171b1b;
  --color-bg-alt: #1e2423;
  --color-surface: #1e2423;
  --color-ink: #fffdf8;
  --color-ink-soft: #d9d6cd;
  --color-ink-faint: #a8a59c;
  --color-line: #ffffff1f;
  --color-accent: #f39a3b;
  --color-accent-dark: #ffc37f;
  --color-accent-soft: #1e2423;
  --color-white: #fffdf8;
  --color-danger: #ff8a7a;
  --color-success: #7fd6a4;
  --radius: 14px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 22px;
  --nav-height: 68px;
  --sd-bg: #171b1b; --sd-bg2: #1e2423; --sd-line: #ffffff1f; --sd-paper: #f5f1e8; --sd-paper-line: #ded4c6;
  --sd-ink: #252b2b; --sd-orange: #f39a3b; --sd-amber: #ffc37f; --sd-white: #fffdf8; --sd-soft: #d9d6cd; --sd-muted: #a8a59c;
  color-scheme: dark;
}
html { background: var(--sd-bg); }
body { background: var(--sd-bg); color: var(--sd-white); word-break: keep-all; overflow-wrap: anywhere; }

/* ---------- 1) 기존 페이지의 흰 바탕을 어두운 면으로 ---------- */
.card, .bk-demo-result-card, .find-card, .find-option, .find-notice, .bk-guest-panel, .bk-demo-summary,
.bk-done-row, .bk-done-rows, .bk-done-row.is-big, .bk-suspended-note, .dp-day.is-co, .bk-cal-day-cell.is-checkout {
  background: var(--sd-bg2);
}
.find-option:hover, .find-option:focus-visible, .find-option.is-selected { background: var(--sd-bg2); }
.hero-slides, .hero { background: var(--sd-bg); }
.photo-count-badge { background: #171b1bcc; color: var(--sd-white); }
.btn-primary, .btn-accent, .btn-primary:hover, .btn-accent:hover { background: var(--sd-orange); border-color: var(--sd-orange); color: var(--sd-ink); }
.btn-outline, .btn-ghost { background: transparent; border: 1px solid #ffffff55; color: var(--sd-white); }
.btn-outline:hover, .btn-ghost:hover { background: #ffffff12; border-color: var(--sd-orange); color: var(--sd-white); }
.dp-day.is-ci, .bk-cal-day-cell.is-checkin { color: var(--sd-ink); }
.dp-day.is-ci .p, .bk-cal-day-cell.is-checkin .d-price, .bk-cal-day-cell.is-checkin .d-num, .bk-cal-day-cell.is-checkin .d-left { color: var(--sd-ink); }
.dp-day.is-in, .bk-cal-day-cell.is-in-range { background: #f39a3b2e; }
.dp-day.is-ci, .bk-cal-day-cell.is-checkin, .dp-day.is-ci.is-in, .bk-cal-day-cell.is-checkin.is-in-range { background: var(--sd-orange); border-color: var(--sd-orange); opacity: 1; }
.section-ink { background: var(--sd-bg2); color: var(--sd-white); }
/* 옛 페이지가 --color-ink를 '어두운 띠 바탕'으로 쓰던 곳(이제 ink는 밝은 글자색) */
.group-hero, .bk-badge-soldout { background: var(--sd-bg2); }
.btn-primary:not(.btn-accent):hover { background: var(--sd-amber); }
.group-hero .eyebrow { color: var(--sd-amber); }
/* 문의(inquiry.html): 흰 카드·버튼을 직접 적은 곳 */
.iq-card, .iq-segment button, .iq-room-remove, .iq-success .actions a { background: var(--sd-bg2); }
.iq-input, .iq-select, .iq-textarea { background: #121615; color: var(--sd-white); }
.iq-segment button[aria-pressed="true"], .iq-submit { color: var(--sd-ink); }
.iq-room { background: #ffffff0a; }
input, select, textarea { background: #121615; color: var(--sd-white); border-color: #ffffff33; }
input::placeholder, textarea::placeholder { color: #a8a59c99; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--sd-orange); outline-offset: 1px; }
input[type=checkbox], input[type=radio] { accent-color: var(--sd-orange); }
a { color: inherit; }
.eyebrow { color: var(--sd-amber); }
.hero-core { background: var(--sd-bg2); }
.hero-actions .btn-primary, .hero-actions .btn-primary:hover { background: var(--sd-orange); border-color: var(--sd-orange); color: var(--sd-ink); }
.hero-dots span { background: #ffffff66; border-color: transparent; }
.hero-dots span.is-active { background: var(--sd-orange); }

/* ---------- 2) 메뉴·꼬리말 ---------- */
.site-nav, .site-nav.is-scrolled, .site-nav.is-solid { background: #171b1bdd; border-bottom: 1px solid var(--sd-line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.site-nav .brand, .site-footer .brand { font: 800 15px Georgia, serif; letter-spacing: .18em; color: var(--sd-white); }
.site-nav .brand small, .site-footer .brand small { font: 600 9px Arial, sans-serif; letter-spacing: .14em; color: var(--sd-muted); margin-top: 4px; }
.nav-links { gap: 2px; }
.nav-links a { min-height: 44px; display: flex; align-items: center; padding: 0 14px; border-radius: 999px; font-size: 14px; color: var(--sd-soft); }
.nav-links a:hover { color: var(--sd-white); }
.nav-links a.active { color: var(--sd-white); background: #ffffff14; }
.nav-links a.active::after { display: none; }
.nav-cta { min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 800; }
.nav-toggle { border-radius: 12px; background: #ffffff12; }
/* 한 줄 머리글(시안): 로고 왼쪽 / 메뉴 + 예약 단추 오른쪽. theme.css의 1024px 이상 두 줄 격자를 덮는다 */
.site-nav .container { display: flex; align-items: center; gap: 10px; }
.site-nav .brand { grid-column: auto; justify-self: auto; font-size: 15px; }
.site-nav .brand small { display: block; font-size: 9px; }
.nav-links { margin-left: auto; justify-content: flex-end; gap: 2px; font-size: 14px; font-weight: 600; }
.nav-links a, .nav-links a:hover { color: var(--sd-soft); }
.nav-links a.active { color: var(--sd-white); }
.site-nav a.nav-cta, .site-nav a.nav-cta:hover { display: inline-flex; gap: 6px; justify-content: center; margin-left: auto; height: auto; min-height: 40px; padding: 0 14px; font-size: 13px; background: var(--sd-orange); border: 0; color: var(--sd-ink); }
@media (min-width: 860px) { .site-nav a.nav-cta, .site-nav a.nav-cta:hover { min-height: 44px; padding: 0 18px; font-size: 14px; } }
@media (min-width: 860px) and (max-width: 1023px) { .nav-links { display: none; } .nav-toggle { display: flex; } .site-nav a.nav-cta { margin-left: auto; } }
@media (min-width: 1024px) { .site-nav .container { display: flex; } .site-nav a.nav-cta, .site-nav a.nav-cta:hover { margin-left: 8px; } }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { background: var(--sd-white); }
.mobile-menu { background: #171b1bf7; justify-content: flex-start; gap: 0; padding: calc(var(--nav-height) + 6px) 20px 24px; }
.mobile-menu a { min-height: 56px; display: flex; align-items: center; font: 800 18px var(--font-body); border-bottom: 1px solid var(--sd-line); color: var(--sd-white); }
.mobile-menu a.active { color: var(--sd-orange); }
.mobile-menu .btn { border-bottom: 0; margin-top: 20px; align-self: stretch; justify-content: center; }
.site-footer, .site-footer[class] { background: var(--sd-bg); color: var(--sd-muted); border-top: 1px solid var(--sd-line); margin-top: 0; padding: 48px 0 64px; }
.site-footer a, .site-footer h4, .site-footer span, .site-footer p, .site-footer li,
.site-footer .ft a, .site-footer .ft p, .site-footer .ft span,
.site-footer .ft .ft-intro, .site-footer .ft .ft-info, .site-footer .ft .ft-copy, .site-footer .ft .ft-copy span { color: var(--sd-muted); }
.site-footer .ft .ft-tel { color: var(--sd-white); font-size: 24px; font-weight: 850; letter-spacing: -.02em; }
.site-footer .ft .ft-bank { color: var(--sd-soft); }
.site-footer .ft-icons a { color: var(--sd-soft); }
.site-footer .ft-links a { color: var(--sd-soft); }

/* ---------- 3) 새 디자인 페이지 부품(.sd) ---------- */
.sd { line-height: 1.5; font-family: Pretendard, "Noto Sans KR", "Malgun Gothic", sans-serif; }
.sd main { padding-top: var(--nav-height); }
.sd #bbq { background: transparent; } /* theme.css #bbq 밝은 바탕(옛 홈 구역)이 .sd 페이지에 번지지 않게 */
.sd img { display: block; }
.sd .wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.sd .eyebrow { display: block; margin: 0; font: 800 10px Arial, sans-serif; letter-spacing: .2em; color: var(--sd-amber); text-transform: uppercase; }
.sd .paper .eyebrow { color: #a2733f; }
.sd h1, .sd h2, .sd h3 { letter-spacing: -.06em; font-weight: 850; margin: 0; font-family: Pretendard, "Noto Sans KR", "Malgun Gothic", sans-serif; color: inherit; }
.sd p { margin: 0 0 1em; }
.sd .big { font-size: clamp(40px, 5.4vw, 72px); line-height: 1.08; }
.sd .mid { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.12; }
.sd em.o, .sd .o { color: var(--sd-orange); font-style: normal; }
.sd .lead { color: var(--sd-soft); font-size: 16px; line-height: 1.8; max-width: 520px; margin: 18px 0 0; }
.sd .paper .lead { color: #5f5b54; }
.sd .btn { min-height: 52px; display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 22px; border-radius: 14px; font: inherit; font-size: 15px; font-weight: 800; text-decoration: none; cursor: pointer; border: 0; white-space: normal; }
.sd .btn.main { background: var(--sd-orange); color: var(--sd-ink); }
.sd .btn.ghost { color: var(--sd-white); border: 1px solid #ffffff55; background: transparent; }
.sd .paper .btn.ghost { color: var(--sd-ink); border-color: #bdb2a3; }
.sd .btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }

.sd .cover { position: relative; min-height: 62vh; display: grid; align-items: end; overflow: hidden; }
.sd .cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sd .cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0913128c 0%, transparent 30%, #10181766 58%, #171b1b 100%); }
.sd .cover .wrap { position: relative; z-index: 1; width: 100%; padding-bottom: 48px; }
.sd .big, .sd .mid { font-weight: 850; letter-spacing: -.06em; }
.sd .cover .big, .sd .cover p.big { margin-top: 14px; max-width: none; font-size: clamp(40px, 5.4vw, 72px); line-height: 1.08; color: var(--sd-white); }
.sd h1.eyebrow { font-size: 10px; line-height: 1.5; }
.sd .cover p { color: #fffdf0e0; font-size: 16px; line-height: 1.75; max-width: 520px; margin: 16px 0 0; }

.sd .tabs { display: flex; gap: 8px; margin-top: 26px; }
.sd .tabs a { min-height: 46px; display: inline-flex; align-items: center; padding: 0 20px; border-radius: 999px; border: 1px solid #ffffff55; font-size: 14px; font-weight: 750; text-decoration: none; background: #171b1b66; backdrop-filter: blur(6px); }
.sd .tabs a[aria-current] { background: var(--sd-orange); border-color: var(--sd-orange); color: var(--sd-ink); }

.sd .chapter { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 64px; align-items: center; padding: 96px 0; border-top: 1px solid var(--sd-line); }
.sd .chapter.flip .reel { order: 2; }
.sd .reel { position: relative; aspect-ratio: 4/5; max-height: 660px; width: 100%; border-radius: 22px; overflow: hidden; background: #121817; box-shadow: 0 25px 70px #0007 !important; }
.sd .reel.wide { aspect-ratio: 5/4; }
.sd .reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.sd .reel.is-ready img { transition: opacity .55s; } /* 첫 장은 바로 보이고, 넘길 때만 서서히 */
.sd .reel img.on { opacity: 1; }
.sd .reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0913127a 0%, transparent 22%, transparent 72%, #10181799 100%); pointer-events: none; }
.sd .bars { position: absolute; z-index: 2; top: 16px; left: 16px; right: 16px; display: flex; gap: 4px; }
.sd .bars span { flex: 1; height: 2px; background: #ffffff66; border-radius: 4px; overflow: hidden; }
.sd .bars i { display: block; height: 100%; width: 0; background: #fff; }
.sd .bars .done i { width: 100%; }
.sd .bars .cur i { animation: sd-fill var(--d, 2600ms) linear forwards; }
@keyframes sd-fill { to { width: 100%; } }
.sd .reel .tap { position: absolute; z-index: 3; top: 0; bottom: 0; width: 40%; border: 0; background: none; cursor: pointer; padding: 0; }
.sd .reel .tap.prev { left: 0; } .sd .reel .tap.nextp { right: 0; }
.sd .reel .num { position: absolute; z-index: 2; left: 18px; bottom: 16px; font: italic 13px Georgia, serif; color: #fffdf0d0; }
.sd .reel .cnt { position: absolute; z-index: 2; right: 18px; bottom: 16px; font: 700 10px Arial; letter-spacing: .12em; color: #fffdf0b0; }

.sd .facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--sd-line); border-bottom: 1px solid var(--sd-line); margin: 24px 0 0; }
.sd .facts div { padding: 16px 0; }
.sd .facts div + div { padding-left: 16px; border-left: 1px solid var(--sd-line); }
.sd .facts dt { font: 700 9px Arial, sans-serif; letter-spacing: .14em; color: var(--sd-muted); }
.sd .facts dd { margin: 6px 0 0; font-size: 16px; font-weight: 800; }
.sd .paper .facts, .sd .paper .facts div + div { border-color: var(--sd-paper-line); }
.sd .paper .facts dt { color: #8a8378; }

.sd .pill { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: 12px; font-weight: 750; background: #ffffff12; color: var(--sd-soft); }
.sd .pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sd-orange); }
.sd .pill.solid { background: var(--sd-orange); color: var(--sd-ink); }
.sd .pill.solid::before { background: var(--sd-ink); }

.sd .paper { background: var(--sd-paper); color: var(--sd-ink); padding: 88px 0; }
.sd .paper table { width: 100%; border-collapse: collapse; font-size: 15px; }
.sd .paper th { font: 700 10px Arial, sans-serif; letter-spacing: .12em; color: #7a7368; text-align: left; padding: 12px 10px; border-bottom: 1px solid #cfc4b5; }
.sd .paper td { padding: 16px 10px; border-bottom: 1px solid var(--sd-paper-line); }

.sd .ask { border-bottom: 1px solid var(--sd-line); }
.sd .ask summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 18px; min-height: 76px; padding: 8px 0; font-size: 19px; font-weight: 800; letter-spacing: -.03em; }
.sd .ask summary::-webkit-details-marker { display: none; }
.sd .ask summary .n { font: italic 13px Georgia, serif; color: var(--sd-orange); width: 28px; flex: none; }
.sd .ask summary::after { content: "＋"; margin-left: auto; color: var(--sd-orange); font-size: 20px; font-weight: 400; }
.sd .ask[open] summary::after { content: "−"; }
.sd .ask .body { padding: 0 0 26px 46px; color: var(--sd-soft); font-size: 15px; line-height: 1.85; max-width: 820px; }
.sd .ask .body p { margin: 0 0 10px; }
.sd .ask .body b, .sd .ask .body strong { color: var(--sd-white); }
.sd .ask .body ol, .sd .ask .body ul { margin: 0; padding-left: 20px; }
.sd .ask .body li { margin-bottom: 8px; }
.sd .note-box { border-left: 3px solid var(--sd-orange); padding: 4px 0 4px 16px; margin: 0 0 14px; color: var(--sd-white); }

.sd .ending { position: relative; overflow: hidden; min-height: 520px; display: grid; align-items: center; }
.sd .ending > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sd .ending::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #171b1bf2 0%, #171b1bb0 45%, #171b1b40 100%); }
.sd .ending .wrap { position: relative; z-index: 1; width: 100%; }

@media (prefers-reduced-motion: reduce) { .sd .reel img { transition: none; } .sd .bars i { animation: none !important; } }

@media (max-width: 860px) {
  :root { --nav-height: 60px; }
  .sd .wrap { padding: 0 20px; }
  .sd .big { font-size: 38px; line-height: 1.12; } .sd .mid { font-size: 28px; }
  .sd .lead { font-size: 15px; line-height: 1.75; }
  .sd .cover .wrap { padding-bottom: 30px; } .sd .cover p { font-size: 15px; }
  .sd .cover .big, .sd .cover p.big { font-size: 38px; line-height: 1.12; }
  .sd .tabs, .sd .filter { overflow-x: auto; scrollbar-width: none; margin-right: -20px; padding-right: 20px; }
  .sd .tabs a, .sd .filter button { flex: none; }
  .sd .chapter { grid-template-columns: 1fr; gap: 26px; padding: 56px 0; }
  .sd .chapter.flip .reel { order: 0; }
  .sd .chapter .reel, .sd .reel.bleed { margin: 0 -20px; width: calc(100% + 40px); border-radius: 0; max-height: 76svh; box-shadow: none !important; }
  /* 휴대폰: 작은 제목·큰 제목을 사진 위로(사진과 설명이 한 묶음으로 읽히게, 운영자 11-05) */
  .sd .chapter { row-gap: 0; border-top: 6px solid var(--sd-bg2); }
  .sd .chapter > div:not(.reel) { display: contents; }
  .sd .chapter > div:not(.reel) > * { order: 1; }
  .sd .chapter > div:not(.reel) > .eyebrow, .sd .chapter > div:not(.reel) > h2 { order: -1; }
  .sd .chapter > div:not(.reel) > .eyebrow { justify-self: start; }
  .sd .chapter > div:not(.reel) > h2 { margin-bottom: 22px; }
  .sd .chapter .reel + div > .lead:first-of-type, .sd .chapter > div:not(.reel) > h2 + .lead { margin-top: 22px; }
  .sd .chapter > div:not(.reel) > .photo-more, .sd .chapter > div:not(.reel) > .btns { margin-top: 16px; }
  .sd .facts dd { font-size: 14px; } .sd .facts div + div { padding-left: 10px; }
  .sd .btns .btn { flex: 1 1 auto; }
  .sd .paper { padding: 56px 0; }
  .sd .ask summary { font-size: 16px; min-height: 64px; gap: 12px; } .sd .ask summary .n { width: 22px; }
  .sd .ask .body { padding: 0 0 22px; }
  .sd .ending { min-height: 480px; align-items: end; padding-bottom: 40px; }
  .sd .ending::after { background: linear-gradient(180deg, #171b1b30 0%, #171b1bcc 55%, #171b1bf5 100%); }
}

/* ---------- 4) 검토(§14) 반영 2026-11-05 ---------- */
/* 날짜 선택(js/date-picker.js가 실행 중 head 끝에 style을 붙여 이 파일보다 뒤에 옴) → 선택자를 올려 덮는다 */
.dp .dp-day { background: transparent; color: var(--sd-white); }
.dp .dp-day .p { color: var(--sd-soft); }
.dp .dp-day.is-dim, .dp .dp-day.is-dim .p { color: #a8a59c99; }
.dp .dp-day.is-in { background: #f39a3b2e; }
.dp .dp-day.is-ci, .dp .dp-day.is-ci .p { background: var(--sd-orange); border-color: var(--sd-orange); color: var(--sd-ink); }
.dp .dp-day.is-ci .p { background: transparent; }
.dp .dp-day.is-co { background: var(--sd-bg2); border-color: var(--sd-orange); color: var(--sd-white); }
.dp .dp-day.is-co .p { color: var(--sd-amber); }
/* 휴대폰 메뉴 [예약 신청하기] */
.mobile-menu .btn, .mobile-menu .btn:hover { background: var(--sd-orange); border-color: var(--sd-orange); color: var(--sd-ink); }
/* 입력칸 대비 */
input::placeholder, textarea::placeholder { color: #a8a59c; }
input, select, textarea, .iq-input, .iq-select, .iq-textarea { border-color: #ffffff59; }
/* 터치 영역 44px */
.site-nav a.nav-cta, .site-nav a.nav-cta:hover { min-height: 44px; }
.site-nav .brand { min-height: 44px; display: inline-flex; flex-direction: column; justify-content: center; }
/* 포커스 표시 */
.sd a:focus-visible, .sd button:focus-visible, .sd summary:focus-visible, .site-nav a:focus-visible, .site-nav button:focus-visible { outline: 2px solid var(--sd-orange); outline-offset: 2px; }
.sd .reel .tap:focus-visible { outline-offset: -3px; }
/* 밝은 종이 면 위 갈색 글자: 진한 갈색 하나로(약 6:1) */
.sd .paper .eyebrow, .sd .paper .facts dt, .sd .paper th { color: #6f4a22; }
.sd table td a { display: inline-block; padding-block: 12px; }