/* 소노캄 경주 객실 이용안내 웹가이드 - 스타일시트 */
/* 디자인_1.md 명세 준수: 컬러 토큰 옵션 C, Pretendard, 브라스 모티프 */

:root {
  --color-bg: #FAF6EF;
  --color-bg-alt: #F3EDE1;
  --color-text: #2B2118;
  --color-text-muted: #6E5F52;
  --color-text-light: #9B8B7D;
  --color-primary: #E2793D;
  --color-primary-light: #F3B27C;
  --color-primary-soft: rgba(226, 121, 61, 0.12);
  --color-accent-dark: #3E2A1E;
  --color-brass: #B8935A;
  --color-brass-light: #D9BE8E;
  --color-brass-soft: rgba(184, 147, 90, 0.15);
  --color-border: #E6DCC8;
  --color-border-dark: #D4C6AB;
  --color-white: #FFFFFF;
  --color-danger: #D9483B;
  --color-success: #3A8E5C;

  --shadow-sm: 0 2px 8px rgba(43, 33, 24, 0.05);
  --shadow-md: 0 6px 18px rgba(43, 33, 24, 0.08);
  --shadow-lg: 0 12px 32px rgba(43, 33, 24, 0.14);
  --shadow-brass: 0 4px 14px rgba(184, 147, 90, 0.25);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  --font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  background-color: #241911;
}

body {
  font-family: var(--font-family);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 한국어는 어절 단위로 줄을 넘겨야 읽기 편하다.
     기본값(break-word)은 "카드키를" 같은 낱말을 중간에서 잘라 버린다.
     긴 영문·URL이 컨테이너를 밀어내는 것은 overflow-wrap 으로 따로 막는다. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 전체 컨테이너 (모바일 우선 뷰포트) */
#app-container {
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  background-color: var(--color-bg);
  position: relative;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.35);
  padding-bottom: 90px; /* 플로팅 하단바 공간 */
}

/* 키보드로 조작할 때 지금 어디에 있는지 보이게 한다.
   :focus-visible 이라 마우스·터치로 눌렀을 때는 테두리가 뜨지 않는다. */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* 화면에는 안 보이지만 스크린리더는 읽는 텍스트 */
.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;
}

/* 유틸리티 */
.en-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brass);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.brass-dot {
  width: 5px;
  height: 5px;
  background: var(--color-brass);
  border-radius: 50%;
  display: inline-block;
}

/* 상단 글로벌 헤더 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 246, 239, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border);
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: var(--transition);
}

/* 상단 줄(브랜드+햄버거)과 하단 줄(언어+객실배지)을 각각 가로로 배치.
   햄버거 버튼은 항상 상단 줄 오른쪽 끝에 고정되어 좁은 화면에서도 밀려나지 않는다 */
.header-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-row-top {
  justify-content: space-between;
}

.header-row-bottom {
  justify-content: flex-end;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  /* 브랜드 글자는 줄이지 않는다 (말줄임 금지) */
  flex-shrink: 0;
  min-width: 0;
}

.brand-title,
.brand-sub {
  white-space: nowrap;
}

.brand-text-wrap {
  display: flex;
  flex-direction: column;
}

.brand-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--color-accent-dark);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.brand-sub {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-brass);
}

.header-actions {
  display: flex;
  align-items: stretch;
  gap: 6px;
  flex-shrink: 0;
  min-width: 0;
  height: 36px;
}

.room-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--color-accent-dark);
  color: var(--color-bg);
  padding: 0 8px 0 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--color-brass);
  transition: var(--transition);
  /* 호실·객실타입이 잘리지 않도록 폭 제한을 두지 않는다 */
  white-space: nowrap;
}

#badge-room-text {
  white-space: nowrap;
}

.room-badge:active {
  transform: scale(0.96);
  background: #271a12;
}

.room-badge .change-text {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  color: var(--color-accent-dark);
  background: var(--color-brass-light);
  font-weight: 800;
  padding: 4px 8px;
  border-radius: var(--radius-full);
  margin-left: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}

.lang-btn {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 12px;
  font-weight: 700;
  width: 36px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lang-btn:active {
  background: var(--color-border);
}

/* 전체 메뉴 버튼 (햄버거) */
.menu-btn {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: var(--color-accent-dark);
  border: 1px solid var(--color-brass);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: var(--transition);
}

.menu-btn:active {
  background: #271a12;
}

.menu-btn span {
  display: block;
  width: 15px;
  height: 2px;
  border-radius: 1px;
  background: var(--color-bg);
}

/* ===================================================
   전체 메뉴 드로어
   =================================================== */
.menu-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(36, 25, 17, 0.55);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.menu-drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

body.menu-drawer-locked {
  overflow: hidden;
}

.menu-drawer {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(85vw, 360px);
  background: var(--color-bg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-drawer-backdrop.open .menu-drawer {
  transform: translateX(0);
}

.menu-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 18px 16px;
  border-bottom: 1px solid var(--color-border);
}

.menu-close-btn {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: 15px;
  color: var(--color-text);
}

.menu-drawer-room {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px;
  padding: 14px;
  background: var(--color-accent-dark);
  border: 1px solid var(--color-brass);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
}

.menu-drawer-room:active {
  background: #271a12;
}

.menu-drawer-room-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--color-brass-light);
}

.menu-drawer-room-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-bg);
}

.menu-drawer-room-sub {
  font-size: 11px;
  color: var(--color-brass-light);
  margin-top: 2px;
}

.menu-drawer-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-text-light);
  margin: 4px 16px 6px;
}

.menu-drawer-list {
  display: flex;
  flex-direction: column;
  padding: 0 10px;
  margin-bottom: 8px;
}

.menu-drawer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: 12px 10px;
  font-family: var(--font-family);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: var(--transition);
}

.menu-drawer-item:active {
  background: var(--color-bg-alt);
}

.menu-drawer-item-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-brass);
}

.menu-drawer-footer {
  margin-top: auto;
  padding: 16px;
  border-top: 1px solid var(--color-border);
}

.menu-drawer-tel {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-accent-dark);
  text-decoration: none;
}

.menu-drawer-tel svg {
  width: 16px;
  height: 16px;
  color: var(--color-brass);
}

.menu-drawer-addr {
  font-size: 11.5px;
  color: var(--color-text-light);
  margin-top: 6px;
}

/* ===================================================
   1. 호실 입력 모달 / 온보딩 화면
   =================================================== */
.room-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(36, 25, 17, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.3s ease;
}

.room-modal {
  width: 100%;
  max-width: 400px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-brass-light);
  box-shadow: var(--shadow-lg);
  padding: 30px 24px;
  text-align: center;
  position: relative;
  animation: slideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-welcome-block {
  text-align: left;
  margin-bottom: 18px;
}

.modal-welcome-title {
  font-size: 21px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--color-accent-dark);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.modal-welcome-sub {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-brass);
  line-height: 1.5;
  margin-bottom: 6px;
}

/* 여러 줄로 흐르는 문장은 가운데 정렬하면 줄 시작점이 들쭉날쭉해 읽기 나쁘다 */
.modal-welcome-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-muted);
  text-align: left;
}

.room-modal .modal-desc,
.room-modal .modal-welcome-sub {
  text-align: left;
}

.modal-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0 0 18px;
}

.room-modal h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-accent-dark);
  margin-bottom: 8px;
}

.room-modal p.modal-desc {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: 24px;
}

/* 관리자 카드 편집 모달 — 다른 room-modal류보다 넓고, 좌측 정렬 목록형 */
.admin-editor-modal {
  max-width: 480px;
  text-align: left;
}

.admin-editor-modal h2 {
  text-align: left;
}

.admin-edit-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 50vh;
  overflow-y: auto;
  padding-right: 2px;
  margin-bottom: 4px;
}

.admin-edit-card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.admin-edit-card-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--color-accent-dark);
  margin-bottom: 6px;
}

.admin-edit-original {
  font-weight: 400;
  font-size: 11px;
  color: var(--color-text-muted);
}

.admin-hide-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--color-text);
  margin-top: 10px;
  cursor: pointer;
}

.room-input-container {
  margin-bottom: 20px;
}

.room-number-input {
  width: 100%;
  font-family: var(--font-family);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-align: center;
  color: var(--color-accent-dark);
  background: var(--color-bg-alt);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 10px;
  outline: none;
  transition: var(--transition);
}

.room-number-input:focus {
  border-color: var(--color-primary);
  background: #FFFDF9;
  box-shadow: 0 0 0 4px var(--color-primary-soft);
}

.room-input-msg {
  min-height: 22px;
  font-size: 13px;
  font-weight: 600;
  margin-top: 8px;
  color: var(--color-danger);
  transition: var(--transition);
}

.room-modal-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 버튼 안에 넣는 아이콘은 언제나 글자 크기에 맞춘다.
   SVG는 크기를 안 주면 원본 viewBox 비율대로 부풀어 버튼을 통째로 망가뜨린다
   (실제로 병원 전화 버튼에서 아이콘이 카드만큼 커지는 사고가 있었다).
   개별 버튼마다 챙기는 대신 여기서 한 번에 막는다. */
.btn-primary svg,
.btn-secondary svg,
.btn-call svg,
.btn-reserve svg,
.emergency-call-btn svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.btn-primary {
  width: 100%;
  background: var(--color-accent-dark);
  color: var(--color-bg);
  border: 1px solid var(--color-brass);
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 700;
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.btn-primary:hover {
  background: #2C1D13;
  box-shadow: var(--shadow-md);
}

.btn-primary:active {
  transform: scale(0.98);
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}

.btn-secondary:hover {
  background: var(--color-bg-alt);
  color: var(--color-text);
}

.manual-select-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: underline;
  margin-top: 14px;
  cursor: pointer;
}

/* 수동 객실 타입 선택 모달 */
.manual-room-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
  margin: 16px 0;
  padding-right: 4px;
  text-align: left;
}

.manual-room-item {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: var(--transition);
}

.manual-room-item:hover, .manual-room-item:active {
  background: #FAF2E3;
  border-color: var(--color-brass);
  transform: translateX(4px);
}

.manual-room-title {
  font-weight: 700;
  color: var(--color-accent-dark);
}

.manual-room-sub {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* ===================================================
   2. 홈 화면 레이아웃 & 컴포넌트
   =================================================== */
.view-section {
  display: none;
  animation: fadeIn 0.28s ease;
}

.view-section.active {
  display: block;
}

/* 웰컴 히어로 배너 */
.welcome-hero {
  padding: 24px 20px 18px;
  position: relative;
  background: linear-gradient(180deg, rgba(243, 237, 225, 0.8) 0%, rgba(250, 246, 239, 0) 100%);
  border-bottom: 1px solid var(--color-border);
}

.welcome-brass-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-brass-soft);
  border: 1px solid var(--color-brass-light);
  padding: 5px 12px;
  border-radius: var(--radius-full);
  margin-bottom: 12px;
}

.welcome-hero h1 {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--color-accent-dark);
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.welcome-hero p.hero-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-muted);
  white-space: pre-line;
}

/* 현재 객실 상태 요약 카드 */
.current-room-card {
  margin: 18px 20px 6px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
}

.room-info-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.room-type-icon-box {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: var(--color-accent-dark);
  color: var(--color-brass-light);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
}

.room-type-icon-box svg {
  width: 22px;
  height: 22px;
}

.room-desc-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-accent-dark);
}

.room-desc-sub {
  font-size: 12px;
  color: var(--color-text-muted);
}

.room-desc-note {
  font-size: 11px;
  color: var(--color-brass);
  margin-top: 2px;
}

.room-change-btn {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary);
  background: transparent;
  border: 1px solid var(--color-primary-light);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}

.room-change-btn:active {
  background: var(--color-primary-soft);
}

/* 퀵 액션 카드 (WiFi, 긴급, 조식예약 등) */
.quick-action-strip {
  padding: 12px 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.quick-action-item {
  background: #FFFDF9;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 8px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  box-shadow: var(--shadow-sm);
}

.quick-action-item:active {
  transform: scale(0.96);
  background: var(--color-bg-alt);
  border-color: var(--color-brass);
}

.quick-icon {
  width: 22px;
  height: 22px;
  color: var(--color-primary);
}

.quick-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-accent-dark);
}

/* 카테고리 메뉴 카드 그리드 (2열) */
.section-title-wrap {
  padding: 18px 20px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-title {
  font-size: 19px;
  font-weight: 800;
  color: var(--color-accent-dark);
  letter-spacing: -0.01em;
}

.category-grid {
  padding: 0 20px 24px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.category-card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px 16px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 140px;
}

.category-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-brass), transparent);
  opacity: 0;
  transition: var(--transition);
}

.category-card:hover, .category-card:active {
  background: #F0E8D9;
  border-color: var(--color-brass);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.category-card:active::before {
  opacity: 1;
}

.cat-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #FFFDF9;
  border: 1px solid var(--color-brass-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brass);
  margin-bottom: 14px;
}

.cat-icon-wrap svg {
  width: 24px;
  height: 24px;
}

.cat-num {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 12px;
  font-weight: 800;
  color: var(--color-brass);
  opacity: 0.6;
}

.cat-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-accent-dark);
  margin-bottom: 4px;
}

.cat-sub {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.35;
}

/* ===================================================
   3. 카테고리 상세 뷰 (아코디언 및 카드)
   =================================================== */
.category-header-banner {
  background: var(--color-accent-dark);
  color: var(--color-bg);
  padding: 22px 20px 20px;
  position: relative;
}

.back-btn-row {
  margin-bottom: 12px;
}

.nav-back-btn {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-bg);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: var(--transition);
}

.nav-back-btn:active {
  background: rgba(255, 255, 255, 0.25);
  transform: translateX(-3px);
}

.cat-header-title {
  font-size: 24px;
  font-weight: 800;
  color: #FAF6EF;
  margin-bottom: 4px;
}

.cat-header-sub {
  font-size: 13px;
  color: var(--color-primary-light);
}

/* 아이템 리스트 (아코디언 스타일) */
.item-list-container {
  padding: 16px 20px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 다이닝·부대시설 상단 영업장 바로가기 바 — 글로벌 헤더 바로 아래에 상시 고정 */
.venue-quick-nav {
  position: sticky;
  /* top은 헤더 실측 높이로 JS(positionVenueQuickNav)가 매번 채워준다 */
  top: 0;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -16px -20px 4px;
  padding: 12px 20px;
  background: rgba(250, 246, 239, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  scrollbar-width: none;
}

.venue-quick-nav::-webkit-scrollbar {
  display: none;
}

.venue-quick-btn {
  flex-shrink: 0;
  white-space: nowrap;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition);
}

.venue-quick-btn:active {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: var(--color-bg);
}

.content-card {
  background: #FFFDF9;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.content-card.open {
  border-color: var(--color-brass);
  box-shadow: var(--shadow-md);
}

.card-header {
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  background: #FFFDF9;
  user-select: none;
}

.card-header:hover {
  background: var(--color-bg-alt);
}

/* 목록을 훑을 때 제목이 먼저 읽히도록 제목 위 · 태그 아래로 쌓는다 */
.card-header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}

.card-item-tag {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-text-light);
  line-height: 1.3;
}

.item-badge-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  background: var(--color-bg-alt);
  color: var(--color-brass);
  border: 1px solid var(--color-border);
}

.card-item-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-accent-dark);
}

.card-chevron {
  width: 20px;
  height: 20px;
  color: var(--color-text-light);
  transition: transform 0.25s ease;
}

.content-card.open .card-chevron {
  transform: rotate(180deg);
  color: var(--color-primary);
}

.card-body {
  padding: 0 18px 18px;
  display: none;
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text);
  border-top: 1px solid var(--color-border);
  padding-top: 16px;
}

.content-card.open .card-body {
  display: block;
  animation: fadeIn 0.2s ease;
}

/* 정보 강조 박스 (디자인_1.md 명세: primary-light 10% opacity, 4px primary border) */
.info-highlight-box {
  background: var(--color-primary-soft);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 12px 14px;
  margin: 12px 0;
  font-size: 14px;
  color: var(--color-accent-dark);
}

/* 경고/중요 박스 (디자인_1.md 명세: accent-dark 배경, 텍스트 흰색) */
.dark-alert-box {
  background: var(--color-accent-dark);
  color: #FFFDF9;
  border-radius: var(--radius-md);
  padding: 16px;
  margin: 12px 0;
  font-size: 14px;
  line-height: 1.6;
  border-left: 4px solid var(--color-brass);
}

.dark-alert-box strong {
  color: var(--color-primary-light);
}

.dark-alert-title {
  display: block;
  margin-bottom: 8px;
}

/* ===================================================
   안내 본문 목록 — renderBodyText()가 만드는 마크업
   문장 하나 = 항목 하나. 줄이 접혀도 둘째 줄이 점 아래로 파고들지 않도록
   행잉 인덴트를 준다(점 자리를 비워두고 글자만 들여쓴다).
   =================================================== */
.guide-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.guide-list:last-child {
  margin-bottom: 0;
}

/* 줄이 넘어가도 점 바로 아래에는 글자가 오지 않는다 (행잉 인덴트).
   둘째 줄부터도 첫 줄 글자와 같은 위치에서 시작해 한 문장으로 읽힌다. */
.guide-list > li {
  position: relative;
  padding-left: 17px;
  line-height: 1.62;
  /* 조사 하나가 홀로 다음 줄로 넘어가는 것을 줄인다 */
  word-break: keep-all;
  overflow-wrap: break-word;
}

.guide-list > li::before {
  content: '';
  position: absolute;
  left: 4px;
  /* 첫 줄 글자 중앙에 맞춘다 (line-height 1.62 · 글꼴 크기 기준) */
  top: 0.62em;
  width: 4.5px;
  height: 4.5px;
  border-radius: 50%;
  background: var(--color-brass);
}

.guide-para {
  margin: 0 0 10px;
  line-height: 1.62;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.guide-para:last-child {
  margin-bottom: 0;
}

/* 콘텐츠의 **굵게** 표시 — 놓치면 곤란한 문구를 눈에 띄게 */
.guide-strong {
  font-weight: 800;
  color: var(--color-primary);
}

/* 체크아웃 확인 목록 — 번호는 브라우저가 매기게 두고(항목이 조건부로 늘고 줄어든다)
   줄이 넘어가도 번호 아래로 글자가 파고들지 않게 한다 */
.checkout-list {
  list-style: none;
  counter-reset: checkout;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 14px;
  line-height: 1.6;
}

.checkout-list > li {
  counter-increment: checkout;
  position: relative;
  padding-left: 24px;
}

.checkout-list > li::before {
  content: counter(checkout) ".";
  position: absolute;
  left: 0;
  font-weight: 800;
  color: var(--color-primary-light);
}

.dark-alert-box .guide-strong {
  color: var(--color-primary-light);
}

/* 어두운 배경(필독 안내) 위에서는 점도 밝게 */
.dark-alert-box .guide-list > li::before {
  background: var(--color-primary-light);
}

.guide-list-sub {
  font-size: 0.86em;
  font-weight: 400;
  color: var(--color-text-muted);
}

/* "라벨 — 값" 형태의 제원/조건 나열.
   점 목록보다 열이 맞아 훑어보기 쉽다. */
.spec-list-title {
  font-weight: 800;
  color: var(--color-accent-dark);
  margin-bottom: 8px;
}

.spec-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}

.spec-list dt {
  font-weight: 700;
  color: var(--color-accent-dark);
  white-space: nowrap;
}

.spec-list dd {
  margin: 0;
  color: var(--color-text);
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 테이블 스타일 (디자인_1.md: 헤더 accent-dark, 스트라이프) */
.guide-table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  font-size: 13px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.guide-table th {
  background: var(--color-accent-dark);
  color: #FFFDF9;
  font-weight: 700;
  padding: 10px 12px;
  text-align: left;
  font-size: 13px;
}

.guide-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  line-height: 1.5;
}

.guide-table tr:nth-child(even) td {
  background: var(--color-bg-alt);
}

/* TV 채널 가이드 — 그룹 제목 · 채널 번호 열 · 검색 결과 없음 */
.channel-group {
  margin-top: 16px;
}

.channel-group:first-child {
  margin-top: 0;
}

.channel-group-title {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--color-brass);
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}

.channel-table {
  margin: 0;
}

.channel-table .channel-no {
  font-weight: 800;
  color: var(--color-primary);
  width: 30%;
  white-space: nowrap;
}

/* 채널 검색창 — 목록을 스크롤해도 팝업 시트 상단에 고정된다 (.reservation-sheet가 스크롤 컨테이너) */
.channel-search-sticky {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--color-bg);
  margin: 0 -20px 6px;
  padding: 8px 20px 10px;
}

.channel-search-empty {
  text-align: center;
  font-size: 13px;
  color: var(--color-text-muted);
  padding: 18px 12px;
  background: var(--color-bg-alt);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
}

/* ===================================================
   4. 특수 컴포넌트: 스위치 인터랙티브 패널 & 다이어그램
   =================================================== */
.switch-panel-diagram {
  background: #2F2117;
  color: #FAF6EF;
  border-radius: var(--radius-md);
  padding: 16px;
  margin: 14px 0;
  border: 1px solid var(--color-brass);
}

.panel-header-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
}

.panel-pin-no {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-brass-light);
  line-height: 1.35;
}

/* 패널은 '어디에 있는지'가 가장 중요하므로 위치 줄을 크게 강조한다 */
.panel-loc-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  background: rgba(226, 121, 61, 0.16);
  border: 1px solid rgba(226, 121, 61, 0.45);
}

.panel-loc-label {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  color: var(--color-primary-light);
  background: rgba(0, 0, 0, 0.25);
  border-radius: var(--radius-full);
  padding: 2px 8px;
  margin-top: 1px;
}

.panel-loc {
  font-size: 14px;
  font-weight: 700;
  color: #FFE9D8;
  line-height: 1.45;
}

.switch-buttons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 8px;
}

.switch-btn-mock {
  background: #3E2D21;
  border: 1px solid var(--color-brass);
  border-radius: var(--radius-sm);
  padding: 10px 8px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
}

.switch-btn-mock:active, .switch-btn-mock.active {
  background: var(--color-primary);
  border-color: #FFA56B;
  box-shadow: 0 0 10px rgba(226, 121, 61, 0.4);
}

.switch-key {
  font-size: 14px;
  font-weight: 900;
  color: var(--color-brass-light);
  margin-bottom: 2px;
}

.switch-label {
  font-size: 12px;
  font-weight: 600;
  color: #FAF6EF;
}

/* 스위치 직접 조작 경고 박스 */
.switch-direct-alert {
  background: #FFF5F2;
  border: 1.5px solid var(--color-danger);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}

.switch-direct-alert .alert-icon {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1.2;
}

/* 평면도 및 스위치 위치 래퍼 */
.floor-plan-wrapper {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px 14px;
  margin: 12px 0 16px;
  box-shadow: var(--shadow-sm);
}

.floor-plan-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
  text-align: center;
}

.floor-plan-sub {
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 600;
}

.floor-plan-svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  background: #FFFFFF;
  border: 1px solid var(--color-border);
}

/* 평면도 + 위치 핀 오버레이 */
.floor-plan-lead {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text);
  margin-bottom: 10px;
}

.floor-plan-lead strong {
  color: var(--color-primary);
}

/* 흰 배경 · 여백은 바깥 프레임이 담당하고,
   .floor-plan-stage 는 이미지와 정확히 같은 크기여야 핀 좌표(%)가 도면과 일치한다 */
.floor-plan-frame {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  padding: 10px;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.floor-plan-stage {
  position: relative;
  display: block;
  width: 100%;
  line-height: 0;
}

.floor-plan-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  padding: 0;
  border: 2px solid var(--color-white);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(43, 33, 24, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.2s ease;
  animation: pinPulse 2.2s ease-out infinite;
}

.floor-plan-pin:active {
  animation: none;
  transform: translate(-50%, -50%) scale(1.15);
}

@keyframes pinPulse {
  0%   { box-shadow: 0 2px 8px rgba(43, 33, 24, 0.35), 0 0 0 0 rgba(226, 121, 61, 0.55); }
  70%  { box-shadow: 0 2px 8px rgba(43, 33, 24, 0.35), 0 0 0 12px rgba(226, 121, 61, 0); }
  100% { box-shadow: 0 2px 8px rgba(43, 33, 24, 0.35), 0 0 0 0 rgba(226, 121, 61, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .floor-plan-pin { animation: none; }
}

/* 번호 ↔ 패널 대응 범례 */
.floor-plan-legend {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.floor-plan-legend-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  cursor: pointer;
}

.floor-plan-legend-item:active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.legend-no {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.legend-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  font-size: 13px;
  line-height: 1.45;
}

.legend-text strong {
  color: var(--color-accent-dark);
  font-weight: 800;
}

.legend-loc {
  font-size: 12px;
  color: var(--color-text-muted);
}

.pulse-beacon {
  animation: beaconPulse 1.8s infinite ease-out;
  transform-origin: center;
}

@keyframes beaconPulse {
  0% {
    r: 6px;
    opacity: 0.8;
  }
  70% {
    r: 16px;
    opacity: 0;
  }
  100% {
    r: 16px;
    opacity: 0;
  }
}

.highlight-flash {
  animation: flashHighlight 1.5s ease-out;
}

@keyframes flashHighlight {
  0%, 100% {
    border-color: var(--color-brass);
    box-shadow: none;
  }
  30%, 60% {
    border-color: var(--color-primary);
    box-shadow: 0 0 16px rgba(226, 121, 61, 0.5);
  }
}

/* 욕실 및 수전 그림 다이어그램 카드 */
.diagram-guide-card {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}

.diagram-guide-card.point-highlight {
  animation: pointHighlightGlow 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pointHighlightGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(226, 121, 61, 0.75), var(--shadow-sm);
    border-color: var(--color-primary);
  }
  40% {
    box-shadow: 0 0 0 6px rgba(226, 121, 61, 0.12), var(--shadow-sm);
    border-color: var(--color-primary);
  }
  100% {
    box-shadow: var(--shadow-sm);
    border-color: var(--color-border);
  }
}

.diagram-card-badge {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

/* 'STEP 3' 라벨이 두 글자로 쪼개지지 않게 */
.diagram-card-badge .en-label {
  white-space: nowrap;
  flex-shrink: 0;
}

/* 단계 머리 — 번호 · 제목 · 배지를 한 덩어리로 읽히게 묶는다.
   번호와 제목이 좌우 끝으로 갈라져 있으면 시선이 지그재그로 움직인다. */
.diagram-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.diagram-step-no {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.diagram-head-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.diagram-head .diagram-title {
  margin-bottom: 0;
}

.badge-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  text-align: right;
  line-height: 1.4;
}

.diagram-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-accent-dark);
  margin-bottom: 4px;
}

.diagram-desc {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: 10px;
}

.svg-diagram-wrapper {
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: 8px;
  border: 1px solid var(--color-border-dark);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.guide-diagram-svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ===================================================
   5. F&B 및 예약 폼 컴포넌트
   =================================================== */
.fnb-card {
  background: #FFFDF9;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
  position: relative;
}

.fnb-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.fnb-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--color-accent-dark);
}

.fnb-floor-badge {
  background: var(--color-bg-alt);
  color: var(--color-brass);
  border: 1px solid var(--color-border);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-full);
}

/* 예약이 없는 업장은 전화 버튼을 헤더 우측(층수 배지 아래)으로 끌어올려 하단 액션 줄을 없앤다 */
.fnb-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.btn-call.btn-call-inline {
  padding: 5px 10px;
  font-size: 11.5px;
}

.btn-call.btn-call-inline svg {
  width: 12px;
  height: 12px;
}

.fnb-row {
  display: flex;
  font-size: 13px;
  margin-bottom: 4px;
  color: var(--color-text-muted);
}

.fnb-label {
  width: 65px;
  font-weight: 700;
  color: var(--color-accent-dark);
  flex-shrink: 0;
}

.fnb-val {
  color: var(--color-text);
}

.fnb-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.btn-reserve {
  flex: 1;
  background: var(--color-primary);
  color: #FFFFFF;
  border: none;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: var(--transition);
}

.btn-reserve svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.btn-reserve:active {
  transform: scale(0.97);
  background: #C96329;
}

.btn-call {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  color: var(--color-accent-dark);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 12.5px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: var(--transition);
  /* '내선 8409' 가 두 줄로 쪼개지지 않도록 */
  white-space: nowrap;
}

.btn-call svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.btn-call:active {
  background: var(--color-border);
}

/* 예약 모달 폼 */
.reservation-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(36, 25, 17, 0.85);
  backdrop-filter: blur(8px);
  z-index: 999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn 0.25s ease;
}

.reservation-sheet {
  width: 100%;
  max-width: 480px;
  background: var(--color-bg);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-top: 1px solid var(--color-brass-light);
  box-shadow: var(--shadow-lg);
  padding: 24px 20px 30px;
  max-height: 88vh;
  overflow-y: auto;
  animation: slideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

.sheet-title {
  font-size: 19px;
  font-weight: 800;
  color: var(--color-accent-dark);
}

.close-sheet-btn {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-group {
  margin-bottom: 14px;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent-dark);
  margin-bottom: 6px;
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  font-family: var(--font-family);
  /* 16px 미만이면 iOS Safari가 포커스 시 화면을 자동으로 확대해 버려서,
     탭한 입력창(특히 날짜 선택창)이 화면 밖으로 넘치는 것처럼 보인다. */
  font-size: 16px;
  /* body의 line-height:1.6을 그대로 물려받으면 iOS Safari가 type="date" 입력창의
     세로 높이를 실제 글자 크기보다 훨씬 크게 잡아버려 다른 입력창들과 높이가 안 맞는다. */
  line-height: 1.4;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #FFFDF9;
  color: var(--color-text);
  outline: none;
  transition: var(--transition);
}

/* iOS Safari는 type="date" 입력창을 네이티브 위젯 자체 크기로 그려서
   width:100%를 온전히 따르지 않고 바로 아래 다른 입력창(select 등)보다 좌우로 커지거나
   틀어진다. appearance를 꺼서 다른 입력창과 똑같이 CSS 박스 모델을 그대로 따르게 한다. */
.form-input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  min-width: 0;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.form-input[readonly] {
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
}

.cutoff-warning-box {
  background: #FFF2F0;
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--color-danger);
  line-height: 1.5;
}

/* ===================================================
   6. 하단 플로팅 네비게이션 & 빠른 액션바
   =================================================== */
.bottom-nav-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  height: 68px;
  background: rgba(250, 246, 239, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 90;
  padding: 0 8px;
  box-shadow: 0 -4px 16px rgba(43, 33, 24, 0.06);
}

.nav-item-btn {
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--color-text-muted);
  cursor: pointer;
  /* 5칸을 균등하게 나눠 어디를 눌러도 반응하게 한다 */
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 4px 2px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.nav-item-btn svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.nav-item-btn span {
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: -0.02em;
}

.nav-item-btn.active {
  color: var(--color-primary);
}

.nav-item-btn:active {
  transform: scale(0.92);
}

/* 토스트 알림 */
.toast-notice {
  position: fixed;
  bottom: 84px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--color-accent-dark);
  color: #FAF6EF;
  border: 1px solid var(--color-brass);
  padding: 10px 18px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 90%;
  text-align: center;
}

.toast-notice.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 애니메이션 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* 검색 결과 및 특정 카드 포커스 시 부드러운 하이라이트 발광 효과 */
.highlight-flash {
  animation: cardHighlightGlow 2.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes cardHighlightGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(226, 121, 61, 0.8), 0 8px 24px rgba(226, 121, 61, 0.3);
    border-color: var(--color-primary) !important;
    transform: scale(1.02);
  }
  30% {
    box-shadow: 0 0 24px 6px rgba(226, 121, 61, 0.6), 0 12px 32px rgba(226, 121, 61, 0.4);
    border-color: var(--color-primary) !important;
    transform: scale(1.02);
  }
  70% {
    box-shadow: 0 0 12px 2px rgba(226, 121, 61, 0.3);
    transform: scale(1.0);
  }
  100% {
    box-shadow: var(--shadow-sm);
    transform: scale(1.0);
  }
}

/* 반응형 태블릿/데스크톱 대응 */
@media (min-width: 481px) {
  body {
    background-color: #1E150F;
    padding: 24px 0;
  }

  #app-container {
    /* overflow:hidden으로 모서리를 둥글게 자르면 하위 sticky 요소(헤더 등)의
       고정이 전부 깨지므로, 클리핑 대신 모서리가 맞물리는 자식들에 각자
       border-radius를 줘서 시각적으로만 둥근 카드처럼 보이게 한다. */
    border-radius: var(--radius-lg);
  }

  .site-header {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .bottom-nav-bar {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }
}

/* ===================================================
   신규 컴포넌트 — 실사 이미지 · 메뉴판 · 예약 폼
   =================================================== */

/* 웰컴 히어로 도입 문장 */
.hero-sub {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-brass);
  line-height: 1.5;
  margin-bottom: 8px;
}

/* 원본 인쇄물 실사 일러스트 */
.guide-photo {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius-sm);
}

/* 실제 건축 평면도 */
.floor-plan-img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  background: transparent;
}

.floor-plan-note {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 8px;
  line-height: 1.5;
}

/* 업장 메뉴판 (접이식) */
.menu-details {
  margin: 10px 0 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  overflow: hidden;
}

.menu-summary {
  cursor: pointer;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent-dark);
  list-style: none;
  user-select: none;
}

.menu-summary::-webkit-details-marker { display: none; }

.menu-summary::after {
  content: '▾';
  float: right;
  color: var(--color-brass);
  transition: transform var(--transition);
}

.menu-details[open] .menu-summary::after { transform: rotate(180deg); }

.menu-body {
  padding: 4px 12px 12px;
  background: #FFFFFF;
  border-top: 1px solid var(--color-border);
}

.menu-section { margin-top: 12px; }

.menu-section-title {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--color-brass);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-border);
}

.menu-section-note {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.menu-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.menu-table td {
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  line-height: 1.45;
}

.menu-table tr:last-child td { border-bottom: none; }

.menu-price {
  text-align: right;
  white-space: nowrap;
  font-weight: 800;
  color: var(--color-accent-dark);
  padding-left: 10px;
}

.menu-footnote,
.menu-allergy {
  font-size: 11.5px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-top: 6px;
}

.menu-allergy {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--color-border);
  color: var(--color-danger);
}

/* 예약 폼 — 메뉴 선택 카드 */
.inroom-menu-select-card {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.inroom-qty-num {
  min-width: 20px;
  text-align: center;
  font-weight: 800;
  font-size: 14px;
  color: var(--color-accent-dark);
}

/* 수량을 담은 메뉴 카드 + (있다면) 음료 선택을 함께 묶는 래퍼 */
.inroom-menu-item-wrap {
  display: flex;
  flex-direction: column;
}

/* 커피/차 선택 — 수량이 1개 이상일 때만 나타난다 */
.menu-beverage-select {
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 8px 12px;
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary-light);
  border-radius: var(--radius-sm);
}

.menu-beverage-select label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-accent-dark);
  flex-shrink: 0;
}

.menu-beverage-select select {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  font-size: 13px;
}

.menu-min-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-radius: var(--radius-full);
  padding: 1px 7px;
  margin-left: 4px;
  vertical-align: middle;
}

/* 수량 증감 버튼 — 터치 타깃 최소 32px */
.qty-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  color: var(--color-accent-dark);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--transition);
}

.qty-btn:active { transform: scale(0.9); }

.qty-btn-plus {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #FFFFFF;
}

/* 인원수 입력칸 — 좌우 +/- 버튼 사이에 숫자를 직접 칠 수 있는 입력창을 둔다 */
.qty-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
}

.qty-stepper-input {
  flex: 1;
  min-width: 0;
  width: auto;
  text-align: center;
  padding-left: 4px;
  padding-right: 4px;
  /* 네이티브 스피너 화살표는 옆의 +/- 버튼과 기능이 겹치므로 숨긴다 */
  -moz-appearance: textfield;
}

.qty-stepper-input::-webkit-outer-spin-button,
.qty-stepper-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 합계 표시 줄 */
/* 결제 전 마지막으로 확인하는 줄 — 금액이 가장 먼저 읽혀야 한다 */
.reservation-total {
  background: var(--color-bg-alt);
  border: 1.5px solid var(--color-brass);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent-dark);
}

.rt-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.rt-breakdown {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.reservation-total strong,
.rt-amount {
  font-size: 19px;
  font-weight: 900;
  color: var(--color-primary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* 정가와 사전결제 할인가를 위아래로 나란히 — 어느 쪽이 얼마인지 헷갈리지 않게 */
.rt-amounts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}

/* 정가는 보조 정보로 작게 · 취소선 — 프런트 방문 사전결제가로 시선이 먼저 가야 한다 */
.rt-amount-sub {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.rt-discount {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 21px;
  font-weight: 900;
  color: var(--color-success);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.rt-discount-tag {
  font-size: 10.5px;
  font-weight: 800;
  color: #FFFFFF;
  background: var(--color-success);
  padding: 2px 7px;
  border-radius: var(--radius-full);
  letter-spacing: 0;
}

/* 검색 결과 항목 */
.search-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.search-result-item:hover,
.search-result-item:active {
  background: var(--color-bg-alt);
  border-color: var(--color-brass);
}

.search-result-text {
  flex: 1;
  min-width: 0;
  padding-right: 10px;
}

.search-result-cat {
  font-size: 11px;
  color: var(--color-brass);
  font-weight: 700;
}

.search-result-go {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-primary);
  transform: rotate(-90deg);
}

.search-result-go svg {
  width: 100%;
  height: 100%;
}

.search-count {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-text-muted);
  padding: 2px 2px 4px;
}

.search-count strong {
  color: var(--color-primary);
}

/* 검색 입력 — 아이콘과 글자가 겹치지 않게 자리를 확실히 나눈다 */
.search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input-icon {
  position: absolute;
  left: 15px;
  width: 19px;
  height: 19px;
  color: var(--color-brass);
  pointer-events: none;
  display: inline-flex;
}

.search-input-icon svg {
  width: 100%;
  height: 100%;
}

.form-input.search-input {
  padding-left: 44px;
  border-radius: var(--radius-full);
}

/* 검색 전 · 결과 없음 화면 */
.search-empty {
  text-align: center;
  padding: 28px 16px 40px;
  color: var(--color-text-muted);
}

.search-empty-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-accent-dark);
  margin: 0 0 6px;
}

.search-empty-lead {
  font-size: 13.5px;
  line-height: 1.6;
  margin: 0;
}

.search-empty-call {
  margin-top: 16px;
  text-decoration: none;
}

.search-suggest-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 18px;
}

.quick-search-tag {
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent-dark);
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 9px 15px;
  cursor: pointer;
  transition: var(--transition);
}

.quick-search-tag:active {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-light);
}

/* 긴급 연락처 — 통째로 누르면 전화가 걸리는 카드.
   급할 때 눌러야 하므로 번호를 크게 두고 터치 영역을 넉넉히 잡는다. */
.emergency-call-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.emergency-call-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 12px 16px;
  background: var(--color-accent-dark);
  color: var(--color-bg);
  border: 1px solid var(--color-brass);
  border-radius: var(--radius-sm);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.emergency-call-btn:active {
  transform: scale(0.98);
  background: #2C1D13;
}

.ec-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ec-name {
  font-weight: 700;
  font-size: 14.5px;
  word-break: keep-all;
}

.ec-note {
  font-size: 11.5px;
  font-weight: 400;
  opacity: 0.72;
}

.ec-tel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--color-primary-light);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* 내선은 객실 전화기로 눌러야 해서 링크가 아니다 — 누를 수 있는 것처럼 보이지 않게 한다 */
.emergency-call-btn.is-ext {
  cursor: default;
}

.emergency-call-btn.is-ext:active {
  transform: none;
  background: var(--color-accent-dark);
}

.ec-ext-label {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.7;
}

.ec-ext {
  gap: 5px;
  font-size: 17px;
}

/* 인근 응급의료기관 */
.hospital-note {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-danger);
  word-break: keep-all;
}

.hospital-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hospital-card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 14px;
}

.hospital-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}

.hospital-name {
  font-size: 15px;
  color: var(--color-accent-dark);
  word-break: keep-all;
}

.hospital-type {
  color: var(--color-danger);
  border-color: var(--color-danger);
  flex-shrink: 0;
}

.hospital-addr {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 10px;
  word-break: keep-all;
}

.hospital-hours {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-primary);
  margin: -4px 0 10px;
}

.hospital-hours svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.hospital-group-title {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--color-brass);
  letter-spacing: 0.03em;
  margin: 18px 0 10px;
}

.hospital-actions {
  display: flex;
  gap: 8px;
}

.hospital-call {
  flex: 1;
  padding: 9px 12px;
  font-size: 13.5px;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.hospital-map {
  padding: 9px 12px;
  font-size: 13px;
  text-decoration: none;
  flex-shrink: 0;
}

/* 카테고리 간 이동 버튼 */
.cross-link-btn {
  font-size: 13px;
}

/* 모달 열렸을 때 배경 스크롤 잠금 */
body.modal-open {
  overflow: hidden;
}

/* 제출 중인 버튼 */
.btn-primary:disabled {
  cursor: not-allowed;
}

/* ===================================================
   샤워부스 수전 — 벡터 일러스트 & A→B 동작 애니메이션
   =================================================== */

.shower-svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.svg-diagram-wrapper.vector-diagram {
  background: #FFFFFF;
  padding: 10px 6px;
}

/* 샤워부스 수전 — 싱크대 다이어그램과 같은 선화 톤의 벡터 일러스트.
   전체 구성도 + 수전 확대도 두 장으로 나누고, 12초 1주기로 함께 움직인다.
   0~25% ①물 트기(레버 좌우) · 25~46% ②온도(레버 위아래) ·
   50~100% ③수전 모드(해바라기 → 샤워기 → 욕조) */
.shower-vec-wrap {
  flex-direction: column;
  gap: 6px;
  padding: 10px 6px 4px;
}

.shower-vec-svg {
  width: 100%;
  max-width: 340px;
  height: auto;
}

.shower-valve-svg {
  border-top: 1px dashed var(--color-border-dark);
  padding-top: 6px;
}

/* 도면 위 작은 글씨 — 싱크대 다이어그램과 같은 크기·색 */
.shower-vec-svg text {
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 700;
  fill: var(--color-accent-dark);
}

.shower-vec-svg .sv-title {
  font-size: 11.5px;
  fill: var(--color-brass);
  letter-spacing: 0.04em;
}

.shower-vec-svg .sv-sub {
  font-size: 9.5px;
  font-weight: 600;
  fill: var(--color-text-muted);
}

/* 벽면(뒷배경) — 기구가 벽에 붙어 있다는 것만 알려주는 정도로 아주 옅게 */
.sv-wall rect {
  fill: #FBF8F2;
  stroke: #EFE7D9;
  stroke-width: 1.5;
}

.sv-wall line {
  stroke: #EFE7D9;
  stroke-width: 1.5;
}

/* 출수구 이름표 — 지금 물이 나오는 곳만 진하게 */
.sv-outlet line {
  stroke: #C7BAA6;
  stroke-width: 1.4;
  stroke-dasharray: 3 4;
}

.sv-outlet circle {
  fill: #C7BAA6;
}

.sv-outlet text {
  fill: var(--color-text-muted);
}

.sv-outlet-rain { animation: svOutletRain 12s ease-in-out infinite; }
.sv-outlet-hand { animation: svOutletHand 12s ease-in-out infinite; }
.sv-outlet-tub  { animation: svOutletTub  12s ease-in-out infinite; }

@keyframes svOutletRain {
  0%, 10%   { opacity: 0.45; }
  14%, 24%  { opacity: 1; }
  28%, 100% { opacity: 0.45; }
}
@keyframes svOutletHand {
  0%, 28%   { opacity: 0.45; }
  32%, 36%  { opacity: 1; }
  40%, 100% { opacity: 0.45; }
}
@keyframes svOutletTub {
  0%, 40%   { opacity: 0.45; }
  44%, 100% { opacity: 1; }
}

/* 물줄기 — 냉수 파랑에서 온수 주황으로 바뀐다 (③온도 구간에 맞춰 후반부에 전환) */
.shower-vec-water line {
  stroke-width: 3;
  stroke: #4C9BD6;
  animation: svWaterColor 12s ease-in-out infinite;
}

@keyframes svWaterColor {
  0%, 52%   { stroke: #4C9BD6; }
  66%, 100% { stroke: #E2593D; }
}

.shower-vec-water { opacity: 0; }

.sv-water-rain { animation: svWaterRain 12s ease-in-out infinite; }
.sv-water-hand { animation: svWaterHand 12s ease-in-out infinite; }
.sv-water-tub  { animation: svWaterTub  12s ease-in-out infinite; }

/* ①에서 물을 튼 뒤 ②수전 모드에서 해바라기 → 샤워기 → 욕조 순으로 옮겨가고,
   ③온도까지는 마지막으로 옮긴 하단 토수구에서 계속 나온다 */
@keyframes svWaterRain {
  0%, 8%    { opacity: 0; }
  14%, 24%  { opacity: 1; }
  28%, 100% { opacity: 0; }
}
@keyframes svWaterHand {
  0%, 28%   { opacity: 0; }
  32%, 36%  { opacity: 1; }
  40%, 100% { opacity: 0; }
}
@keyframes svWaterTub {
  0%, 40%   { opacity: 0; }
  44%, 100% { opacity: 1; }
}

/* ── 확대도 ── */

/* ① 레버(오른쪽 캡 아래): 잠김(왼쪽으로 기울임) ↔ 열림(오른쪽으로 젖힘).
   확대도와 전체 구성도에 각각 그려져 있어 회전 중심만 다르고 동작은 같다. */
.sv-lever,
.sv-lever-ov {
  transform-box: view-box;
  animation: svLever 12s cubic-bezier(0.34, 1.3, 0.4, 1) infinite;
}

.sv-lever    { transform-origin: 292px 86px; }
.sv-lever-ov { transform-origin: 303.5px 278px; }

/* 레버는 매달린 지점 기준 6시(똑바로 아래)가 잠김, 4시로 젖히면 열림.
   SVG 회전은 +가 시계방향이라 6시 → 4시는 음수(반시계) 60도다. */
@keyframes svLever {
  0%, 3%    { transform: rotate(0deg); }
  20%, 97%  { transform: rotate(-60deg); }
  100%      { transform: rotate(0deg); }
}

/* ③ 옆에서 본 레버: 냉수(아래) ↔ 온수(위) */
.sv-lever-side {
  transform-box: view-box;
  transform-origin: 244px 250px;
  animation: svLeverSide 12s ease-in-out infinite;
}

.sv-lever-side line {
  stroke: #6B5B4B;
  stroke-width: 7;
  stroke-linecap: round;
}

.sv-lever-side circle {
  fill: #FFFFFF;
  stroke: #6B5B4B;
  stroke-width: 2;
}

@keyframes svLeverSide {
  0%, 52%   { transform: rotate(34deg); }
  66%, 100% { transform: rotate(-34deg); }
}

.sv-temp-arc path {
  fill: none;
  stroke-width: 3.5;
  stroke-linecap: round;
}

.sv-temp-arc .sv-arc-hot  { stroke: #E68C84; }
.sv-temp-arc .sv-arc-cold { stroke: #8CBEE6; }
.shower-vec-svg .sv-hot   { fill: var(--color-danger); font-size: 10px; }
.shower-vec-svg .sv-cold  { fill: #3B82C4; font-size: 10px; }
.shower-vec-svg .sv-on    { fill: var(--color-primary); font-size: 10px; }
.shower-vec-svg .sv-off   { fill: var(--color-text-light); font-size: 10px; }

/* ② 전환 다이얼: 해바라기(위) → 샤워기(오른쪽) → 욕조(아래), 90도씩 */
.sv-dial-needle {
  transform-box: view-box;
  transform-origin: 95px 258px;
  animation: svDial 12s cubic-bezier(0.6, 0, 0.3, 1.3) infinite;
}

.sv-dial-needle line {
  stroke: #E2793D;
  stroke-width: 6;
  stroke-linecap: round;
}

.sv-dial-needle path {
  fill: #E2793D;
  stroke: #FFFFFF;
  stroke-width: 1.5;
}

/* 위(해바라기) → 수평(샤워기) → 아래(욕조·몸통 아래 토수구) 순으로 90도씩 */
@keyframes svDial {
  0%, 26%   { transform: rotate(0deg); }
  31%, 38%  { transform: rotate(90deg); }
  43%, 100% { transform: rotate(180deg); }
}

.sv-dial-ticks line {
  stroke: #C7BAA6;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.sv-dial-ticks text {
  font-size: 10px;
  fill: var(--color-text-muted);
}

/* 화살표 · 번호 콜아웃 — 싱크대 다이어그램과 같은 주황 표기 */
.sv-arrow line,
.sv-arrow path {
  stroke: var(--color-primary);
  stroke-width: 2.5;
  fill: none;
}

.sv-callout line {
  stroke: var(--color-primary);
  stroke-width: 2;
  stroke-dasharray: 3 4;
}

.sv-callout circle {
  fill: #B9AFA0;
  transition: fill 0.3s ease;
}

.shower-vec-svg .sv-callout text {
  fill: #FFFFFF;
  font-size: 13px;
  font-weight: 800;
}

.sv-callout-1 circle { animation: svCallout1 12s ease-in-out infinite; }
.sv-callout-2 circle { animation: svCallout2 12s ease-in-out infinite; }
.sv-callout-3 circle { animation: svCallout3 12s ease-in-out infinite; }

@keyframes svCallout1 {
  0%, 2%    { fill: #B9AFA0; }
  4%, 23%   { fill: #E2793D; }
  26%, 100% { fill: #B9AFA0; }
}
@keyframes svCallout2 {
  0%, 26%   { fill: #B9AFA0; }
  29%, 45%  { fill: #E2793D; }
  48%, 100% { fill: #B9AFA0; }
}
@keyframes svCallout3 {
  0%, 50%   { fill: #B9AFA0; }
  54%, 97%  { fill: #E2793D; }
  100%      { fill: #B9AFA0; }
}

/* 인셋 상자 */
.sv-inset rect {
  fill: #FCFAF6;
  stroke: var(--color-border-dark);
  stroke-width: 1.5;
}

.shower-vec-svg .sv-inset-title {
  font-size: 10.5px;
  font-weight: 800;
  fill: var(--color-brass);
}

/* --- A→B 동작 카드 --- */
.motion-guide {
  margin-top: 12px;
}

.motion-guide-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.motion-guide-note {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  padding: 3px 8px;
  border-radius: var(--radius-full);
}

.motion-card {
  background: var(--color-white);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 10px;
}

.motion-card:last-child {
  margin-bottom: 0;
}

.motion-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--color-accent-dark);
  margin-bottom: 8px;
}

.motion-step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 12px;
  font-weight: 800;
}

.motion-stage {
  display: flex;
  justify-content: center;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: 6px;
}

.motion-svg {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
}

/* A 기준 잔상 · 경로 화살표 · 물줄기 공통 */
.motion-svg .motion-ghost {
  fill: none;
  stroke: var(--color-brass);
  stroke-width: 2;
  stroke-dasharray: 4 4;
  opacity: 0.6;
}

.motion-svg .motion-arc {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 5 6;
}

.motion-svg .motion-water {
  fill: none;
  stroke: #4C9BD6;
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0;
}

.motion-svg .motion-mark text {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 800;
  fill: var(--color-white);
}

.motion-svg .mark-a { fill: var(--color-brass); }
.motion-svg .mark-b { fill: var(--color-primary); }

.motion-svg .motion-axis-label text {
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 800;
  fill: var(--color-text-muted);
}

.motion-svg .motion-axis-label .is-cold { fill: #3B82C4; }
.motion-svg .motion-axis-label .is-hot { fill: var(--color-danger); }

.motion-svg .temp-arc-cold,
.motion-svg .temp-arc-hot {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
}

.motion-svg .temp-arc-cold { stroke: #8CBEE6; }
.motion-svg .temp-arc-hot { stroke: #E68C84; }

.motion-water {
  animation: waterFlow 4s ease-in-out infinite;
}

@keyframes waterFlow {
  0%, 38%   { opacity: 0; }
  50%, 80%  { opacity: 0.9; }
  92%, 100% { opacity: 0; }
}

.motion-legend {
  margin-top: 10px;
}

.motion-legend-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.45;
}

.motion-legend-arrow {
  margin: 2px 0 2px 9px;
  font-size: 12px;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
}

.motion-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  color: var(--color-white);
  font-size: 11px;
  font-weight: 800;
}

.motion-chip-a { background: var(--color-brass); }
.motion-chip-b { background: var(--color-primary); }

.motion-hint {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--color-border);
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* 힌트 안의 목록은 본문보다 촘촘하게 */
.motion-hint .guide-list {
  gap: 4px;
  margin-bottom: 0;
}

/* 모션 최소화 설정 시 — 최종 상태(B)를 정지 화면으로 표시 */
@media (prefers-reduced-motion: reduce) {
  .motion-water {
    animation: none;
    opacity: 0.9;
  }
}

/* ===================================================
   싱크대 조명 · 수전 — 벡터 일러스트 & A→B 애니메이션
   =================================================== */

.sink-svg {
  width: 100%;
  max-width: 340px;
  height: auto;
}

/* 동작 1 — 조명 스위치 누르기 */
.sink-press {
  animation: sinkPress 4s ease-in-out infinite;
}

@keyframes sinkPress {
  0%, 12%   { transform: translateX(-8px); opacity: 0; }
  22%       { transform: translateX(-8px); opacity: 1; }
  32%, 84%  { transform: translateX(4px); opacity: 1; }
  94%, 100% { transform: translateX(-8px); opacity: 0; }
}

.sink-glow,
.sink-lamp-on,
.sink-ring-on {
  opacity: 0;
  animation: sinkLightOn 4s ease-in-out infinite;
}

@keyframes sinkLightOn {
  0%, 30%   { opacity: 0; }
  40%, 84%  { opacity: 1; }
  94%, 100% { opacity: 0; }
}

/* 동작 2 — 수전 손잡이 뒤로 밀기 */
.sink-push {
  transform-origin: 230px 158px; /* 손잡이 밑동(상판 접점) */
  animation: sinkPushBack 4s cubic-bezier(0.34, 1.15, 0.64, 1) infinite;
}

@keyframes sinkPushBack {
  0%, 14%   { transform: rotate(0deg); }
  42%, 84%  { transform: rotate(26deg); }
  98%, 100% { transform: rotate(0deg); }
}

/* 동작 3 — 손잡이 좌우 회전(온도) */
.motion-knob-sink {
  transform-origin: 160px 122px;
  animation: knobSink 4s cubic-bezier(0.5, 0, 0.3, 1) infinite;
}

/* A(냉수·오른쪽) → B(온수·왼쪽). 실제 수전이 왼쪽 온수라 왼쪽으로 돌아간다 */
@keyframes knobSink {
  0%, 14%   { transform: rotate(62deg); }
  46%, 84%  { transform: rotate(-62deg); }
  98%, 100% { transform: rotate(62deg); }
}

@media (prefers-reduced-motion: reduce) {
  .sink-press,
  .sink-glow,
  .sink-lamp-on,
  .sink-ring-on,
  .sink-push,
  .motion-knob-sink {
    animation: none;
  }

  .sink-press { transform: translateX(4px); }
  .sink-glow,
  .sink-lamp-on,
  .sink-ring-on { opacity: 1; }
  .sink-push { transform: rotate(26deg); }
  /* 정지 상태에서는 B(온수·왼쪽)를 보여준다 */
  .motion-knob-sink { transform: rotate(-62deg); }
}

/* ===================================================
   부대시설 — 시즌별 요금 배지 & 실시간 할인 링크
   =================================================== */

.season-badge-row {
  margin-top: 6px;
}

.season-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
}

.season-badge.high {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border-color: var(--color-primary-light);
}

.season-badge.low {
  background: rgba(59, 130, 196, 0.12);
  color: #2E6FA3;
  border-color: rgba(59, 130, 196, 0.35);
}

.fac-age-note {
  font-size: 11.5px;
  color: var(--color-text-light);
  margin-top: 6px;
  line-height: 1.5;
}

.fac-discount-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-brass);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-top: 12px;
  text-decoration: none;
  transition: var(--transition);
}

.fac-discount-link:active {
  background: var(--color-brass-soft);
  transform: scale(0.99);
}

.fac-discount-link-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.fac-discount-link-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--color-accent-dark);
}

.fac-discount-link-sub {
  font-size: 11.5px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.fac-discount-link-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--color-brass);
}

.fac-discount-link-icon svg {
  width: 100%;
  height: 100%;
}

/* ===================================================
   샤워부스 수전 하단 범례 (12초 1주기 — 위 .shower-vec-* 애니메이션과 같은 타이밍)
   =================================================== */

/* 시퀀스 하단 범례 — 1·2·3이 실제 핀 애니메이션 타이밍에 맞춰 순서대로 강조된다 */
.seq-legend {
  margin-top: 12px;
}

.seq-legend-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.seq-legend-note {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  padding: 3px 8px;
  border-radius: var(--radius-full);
}

.seq-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 8px;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.seq-badge:last-child {
  margin-bottom: 0;
}

.seq-badge-no {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--color-brass);
  color: var(--color-white);
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, transform 0.3s ease;
}

.seq-badge-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 13px;
  line-height: 1.4;
}

.seq-badge-text strong {
  color: var(--color-accent-dark);
  font-weight: 800;
}

/* 이 단계에서 만져야 할 조작부가 사진 속 몇 번인지 못박아 준다
   (①번 레버는 물 켜기와 온도, 두 단계에 연달아 쓰인다) */
.seq-badge-text .seq-badge-ctrl {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 800;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary-light);
  border-radius: var(--radius-full);
  padding: 1px 8px;
  margin: 2px 0 3px;
}

.seq-badge-text span {
  color: var(--color-text-muted);
  font-size: 12.5px;
}

/* 배지 1·2·3이 각자의 애니메이션 구간에서만 강조색으로 바뀐다 (같은 16초 주기 기준).
   배지 3(전환)은 두 번의 전환이 모두 일어나는 52%~98% 구간 내내 켜져 있는다. */
.seq-badge-1 { animation: seqBadge1 12s ease-in-out infinite; }
.seq-badge-2 { animation: seqBadge2 12s ease-in-out infinite; }
.seq-badge-3 { animation: seqBadge3 12s ease-in-out infinite; }

.seq-badge-1 .seq-badge-no { animation: seqBadgeNo1 12s ease-in-out infinite; }
.seq-badge-2 .seq-badge-no { animation: seqBadgeNo2 12s ease-in-out infinite; }
.seq-badge-3 .seq-badge-no { animation: seqBadgeNo3 12s ease-in-out infinite; }

@keyframes seqBadge1 {
  0%, 3%    { background: var(--color-bg-alt); border-color: var(--color-border-dark); }
  6%, 24%   { background: var(--color-primary-soft); border-color: var(--color-primary-light); }
  27%, 100% { background: var(--color-bg-alt); border-color: var(--color-border-dark); }
}
@keyframes seqBadge2 {
  0%, 26%   { background: var(--color-bg-alt); border-color: var(--color-border-dark); }
  29%, 45%  { background: var(--color-primary-soft); border-color: var(--color-primary-light); }
  48%, 100% { background: var(--color-bg-alt); border-color: var(--color-border-dark); }
}
@keyframes seqBadge3 {
  0%, 52%   { background: var(--color-bg-alt); border-color: var(--color-border-dark); }
  56%, 95%  { background: var(--color-primary-soft); border-color: var(--color-primary-light); }
  100%      { background: var(--color-bg-alt); border-color: var(--color-border-dark); }
}

@keyframes seqBadgeNo1 {
  0%, 3%    { background: var(--color-brass); transform: scale(1); }
  6%, 24%   { background: var(--color-primary); transform: scale(1.1); }
  27%, 100% { background: var(--color-brass); transform: scale(1); }
}
@keyframes seqBadgeNo2 {
  0%, 26%   { background: var(--color-brass); transform: scale(1); }
  29%, 45%  { background: var(--color-primary); transform: scale(1.1); }
  48%, 100% { background: var(--color-brass); transform: scale(1); }
}
@keyframes seqBadgeNo3 {
  0%, 52%   { background: var(--color-brass); transform: scale(1); }
  56%, 95%  { background: var(--color-primary); transform: scale(1.1); }
  100%      { background: var(--color-brass); transform: scale(1); }
}

/* 모션 최소화 설정 시 — 움직임을 모두 멈추고 ①번(물 트기) 상태로 고정한다.
   레버는 열림 쪽, 다이얼은 해바라기, 물줄기는 해바라기에서 냉수로 나오는 그림. */
@media (prefers-reduced-motion: reduce) {
  .sv-lever,
  .sv-lever-ov,
  .sv-lever-side,
  .sv-dial-needle,
  .shower-vec-water,
  .shower-vec-water line,
  .sv-outlet,
  .sv-callout circle,
  .seq-badge,
  .seq-badge-no {
    animation: none;
  }

  .sv-lever, .sv-lever-ov { transform: rotate(-60deg); }
  /* 다이얼 바늘의 기본값(회전 0도 = 위)이 곧 해바라기라 물줄기 고정 상태와 맞는다 */
  .sv-water-rain { opacity: 1; }
  .sv-outlet-rain { opacity: 1; }
  .sv-callout-1 circle { fill: #E2793D; }
  .seq-badge-1 { background: var(--color-primary-soft); border-color: var(--color-primary-light); }
  .seq-badge-1 .seq-badge-no { background: var(--color-primary); }
}

/* ===================================================
   난방 온도조절기 · TV 리모컨 — 싱크대/샤워 다이어그램과 같은 선화 톤
   =================================================== */
.device-svg {
  width: 100%;
  max-width: 300px;
  height: auto;
}

.device-svg text {
  font-family: var(--font-family);
  font-weight: 700;
  fill: var(--color-accent-dark);
}

.device-svg .dv-cap {
  font-size: 10.5px;
  font-weight: 700;
  fill: var(--color-text-muted);
}

.device-svg .dv-hint {
  font-size: 10.5px;
  font-weight: 700;
  fill: var(--color-primary);
}

.dv-wall {
  fill: #FBF8F2;
  stroke: #EFE7D9;
  stroke-width: 1.5;
}

/* ── 온도조절기 (실물: ON / OFF / UP / DOWN 4버튼, 청색 LCD) ── */
.thermo-svg .tm-settemp text,
.thermo-svg .tm-onbadge text {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  fill: #101A30;
}

.tm-settemp rect,
.tm-onbadge rect {
  fill: #7FD4F5;
}

/* SET TEMP 표시등은 UP/DOWN을 누른 동안에만 켜진다 */
.tm-settemp { opacity: 0.18; animation: tmSetTemp 10s steps(1, end) infinite; }

@keyframes tmSetTemp {
  0%, 22%   { opacity: 0.18; }
  24%, 78%  { opacity: 1; }
  80%, 100% { opacity: 0.18; }
}

.thermo-svg .tm-temp text {
  font-family: "Consolas", "Menlo", monospace;
  font-size: 30px;
  font-weight: 700;
  fill: #7FD4F5;
  font-variant-numeric: tabular-nums;
}

.tm-t1, .tm-t2, .tm-t3 { opacity: 0; }
.tm-t1 { animation: tmT1 10s steps(1, end) infinite; }
.tm-t2 { animation: tmT2 10s steps(1, end) infinite; }
.tm-t3 { animation: tmT3 10s steps(1, end) infinite; }

@keyframes tmT1 { 0%, 23% { opacity: 1; } 24%, 79% { opacity: 0; } 80%, 100% { opacity: 1; } }
@keyframes tmT2 { 0%, 23% { opacity: 0; } 24%, 43% { opacity: 1; } 44%, 100% { opacity: 0; } }
@keyframes tmT3 { 0%, 43% { opacity: 0; } 44%, 79% { opacity: 1; } 80%, 100% { opacity: 0; } }

.tm-ondol rect {
  fill: none;
  stroke: #7FD4F5;
  stroke-width: 2;
}

.tm-ondol path {
  fill: none;
  stroke: #7FD4F5;
  stroke-width: 2;
  stroke-linecap: round;
}

.thermo-svg .tm-ondol text {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
  fill: #BFE8F8;
}

.tm-bars rect { fill: #7FD4F5; }

/* 버튼 — ON은 무광 검정, 나머지 셋(OFF/UP/DOWN)은 은색 링이 둘려 있다.
   링은 흰색이라 크림색 패널 위에서 묻히므로 옅은 테두리를 함께 둘러 형태를 살린다 */
.tm-btn .tm-core { fill: #14161A; }

.tm-btn .tm-ring-out {
  fill: #FDFCFA;
  stroke: #A99C8A;
  stroke-width: 1.5;
}

.tm-btn-up { animation: tmBtnUp 10s ease-in-out infinite; }

@keyframes tmBtnUp {
  0%, 22%   { transform: translateY(0); }
  26%, 60%  { transform: translateY(1.5px); }
  64%, 100% { transform: translateY(0); }
}

/* 지금 누르는 UP 버튼을 강조 */
.thermo-svg .tm-cap-up { animation: tmCapUp 10s steps(1, end) infinite; }

@keyframes tmCapUp {
  0%, 22%   { fill: var(--color-text-muted); }
  24%, 62%  { fill: var(--color-primary); }
  64%, 100% { fill: var(--color-text-muted); }
}

.dv-press {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2.5;
  opacity: 0;
  animation: dvPress 10s ease-out infinite;
}

@keyframes dvPress {
  0%, 22%   { opacity: 0; r: 19px; }
  26%       { opacity: 0.85; r: 19px; }
  40%       { opacity: 0; r: 30px; }
  44%       { opacity: 0.85; r: 19px; }
  58%       { opacity: 0; r: 30px; }
  100%      { opacity: 0; r: 19px; }
}

/* ── TV 리모컨 ── */
.dv-rocker {
  transform-box: view-box;
}



.dv-rocker-vol { animation: dvRockVol 8s ease-in-out infinite; }
.dv-rocker-ch  { animation: dvRockCh  8s ease-in-out infinite; }

/* 막대는 수평을 유지한 채 통째로 위/아래로 밀린다 (기울지 않는다) */
@keyframes dvRockVol {
  0%, 4%    { transform: translateY(0); }
  14%, 22%  { transform: translateY(-8px); }
  32%, 40%  { transform: translateY(8px); }
  50%, 100% { transform: translateY(0); }
}
@keyframes dvRockCh {
  0%, 52%   { transform: translateY(0); }
  62%, 70%  { transform: translateY(-8px); }
  80%, 88%  { transform: translateY(8px); }
  96%, 100% { transform: translateY(0); }
}

.dv-sign path {
  fill: none;
  stroke: #9C8F7E;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.dv-sign-volup   { animation: dvSign 8s ease-in-out infinite; }
.dv-sign-voldown { animation: dvSign 8s ease-in-out infinite -2s; }
.dv-sign-chup    { animation: dvSign 8s ease-in-out infinite -4s; }
.dv-sign-chdown  { animation: dvSign 8s ease-in-out infinite -6s; }

/* 지금 밀고 있는 방향의 기호만 주황으로 밝아진다 */
@keyframes dvSign {
  0%, 8%    { stroke: #9C8F7E; }
  14%, 22%  { stroke: var(--color-primary); }
  28%, 100% { stroke: #9C8F7E; }
}

.dv-push path {
  stroke: var(--color-primary);
  stroke-width: 3;
  stroke-linecap: round;
  fill: none;
}

.dv-push path:last-child {
  fill: var(--color-primary);
  stroke: none;
}

.dv-push { opacity: 0; }
.dv-push-up   { animation: dvPushUp 8s ease-in-out infinite; }
.dv-push-down { animation: dvPushDown 8s ease-in-out infinite; }

@keyframes dvPushUp {
  0%, 8%    { opacity: 0; }
  14%, 22%  { opacity: 1; }
  28%, 56%  { opacity: 0; }
  62%, 70%  { opacity: 1; }
  76%, 100% { opacity: 0; }
}
@keyframes dvPushDown {
  0%, 26%   { opacity: 0; }
  32%, 40%  { opacity: 1; }
  46%, 74%  { opacity: 0; }
  80%, 88%  { opacity: 1; }
  94%, 100% { opacity: 0; }
}

.device-svg .dv-now {
  font-size: 13px;
  font-weight: 800;
  fill: var(--color-primary);
  opacity: 0;
}

.dv-now-vol { animation: dvNowVol 8s steps(1, end) infinite; }
.dv-now-ch  { animation: dvNowCh  8s steps(1, end) infinite; }

@keyframes dvNowVol { 0%, 47% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes dvNowCh  { 0%, 47% { opacity: 0; } 48%, 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .tm-settemp, .tm-t1, .tm-t2, .tm-t3,
  .tm-btn-up, .tm-cap-up, .dv-press,
  .dv-rocker-vol, .dv-rocker-ch, .dv-sign path,
  .dv-push-up, .dv-push-down, .dv-now-vol, .dv-now-ch {
    animation: none;
  }

  /* 정지 상태에서는 현재 온도 화면과 '음량' 기본 화면을 보여준다 */
  .tm-t1, .dv-now-vol, .dv-push-up { opacity: 1; }
  .tm-settemp { opacity: 0.18; }
}

/* ── 전동커튼 리모컨 (실물 AUTOLINE 기준: 채널 1·2 + 속커튼/전체/겉커튼 + 열림/정지/닫힘) ──
   8초 1주기: 0~4% 채널 1 표시 → 6~14% "전체" 선택 눌림 → 16~44% 열림 버튼 눌림(유지)
             → 46~50% 정지 눌림 → 54~62% 닫힘 버튼 눌림(유지) */
.cr-sel .tm-ring-out,
.cr-btn .tm-ring-out { fill: #FDFCFA; stroke: #A99C8A; stroke-width: 1.5; }

.cr-ch {
  fill: #C9BFAF;
}
.cr-ch-1 { animation: crCh1 8s steps(1, end) infinite; }
.cr-ch-2 { animation: crCh2 8s steps(1, end) infinite; }

@keyframes crCh1 {
  0%, 2%    { fill: #C9BFAF; }
  3%, 97%   { fill: var(--color-primary); }
  98%, 100% { fill: #C9BFAF; }
}
@keyframes crCh2 { 0%, 100% { fill: #C9BFAF; } }

/* 커튼 선택(속커튼·전체·겉커튼) 3버튼 중 "전체"가 강조되는 구간 */
.cr-press-sel {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2.5;
  opacity: 0;
  cx: 130px;
  cy: 98px;
  animation: crPressSel 8s ease-out infinite;
}

@keyframes crPressSel {
  0%, 5%    { opacity: 0; r: 24px; }
  7%        { opacity: 0.85; r: 24px; }
  15%       { opacity: 0; r: 32px; }
  100%      { opacity: 0; r: 24px; }
}

.cr-sel-all text {
  animation: crSelAllColor 8s steps(1, end) infinite;
}
@keyframes crSelAllColor {
  0%, 5%    { fill: #6B5B4B; }
  6%, 15%   { fill: var(--color-primary); }
  16%, 100% { fill: #6B5B4B; }
}

/* 열림 · 정지 · 닫힘 세로 3버튼 중 지금 누르는 버튼 표시 */
.cr-press {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2.5;
  opacity: 0;
  animation: crPressBtn 8s ease-out infinite;
}

@keyframes crPressBtn {
  0%, 15%   { opacity: 0; cy: 204px; r: 26px; }
  17%       { opacity: 0.85; cy: 204px; r: 26px; }
  25%       { opacity: 0; cy: 204px; r: 34px; }
  46%, 48%  { opacity: 0; cy: 268px; r: 26px; }
  49%       { opacity: 0.85; cy: 268px; r: 26px; }
  53%       { opacity: 0; cy: 268px; r: 34px; }
  54%, 55%  { opacity: 0; cy: 332px; r: 26px; }
  56%       { opacity: 0.85; cy: 332px; r: 26px; }
  64%       { opacity: 0; cy: 332px; r: 34px; }
  100%      { opacity: 0; cy: 204px; r: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .cr-ch-1, .cr-ch-2, .cr-press-sel, .cr-sel-all text, .cr-press {
    animation: none;
  }
  .cr-ch-1 { fill: var(--color-primary); }
  .cr-sel-all text { fill: var(--color-primary); }
}

/* 원래 위치 잔상 — 싱크대 다이어그램의 .motion-ghost 와 같은 표기
   (움직이기 전 자리를 점선으로 남겨 얼마나 움직였는지 견주게 한다) */
.sv-ghost,
.dv-ghost {
  fill: none;
  stroke: var(--color-brass);
  stroke-width: 2;
  stroke-dasharray: 4 4;
  opacity: 0.6;
}

/* 온도 인셋의 잔상은 레버 굵기와 맞춘다 */
.sv-ghost line {
  stroke-width: 7;
  stroke-linecap: round;
  opacity: 0.45;
}

/* ===================================================
   객실 시설 — 목록은 한 줄 버튼, 본문은 팝업 시트로 띄운다
   =================================================== */
.facility-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: #FFFDF9;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-family);
  text-align: left;
  cursor: pointer;
  transition: var(--transition);
}

.facility-row:active {
  background: var(--color-bg-alt);
  border-color: var(--color-primary-light);
  transform: scale(0.995);
}

.facility-row-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}

.facility-row-title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--color-accent-dark);
  line-height: 1.35;
}

.facility-row-tag {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-text-light);
  line-height: 1.3;
}

/* 목록에서는 오른쪽을 가리키게 돌려 "열린다"는 뜻을 준다 */
.facility-row-arrow {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-text-light);
  transform: rotate(-90deg);
}

.facility-row-arrow svg {
  width: 100%;
  height: 100%;
}

/* 팝업 시트 — 예약 시트와 같은 형태를 쓰되 본문 여백만 맞춘다 */
.facility-sheet .facility-sheet-body > *:first-child {
  margin-top: 0;
}

.facility-sheet .facility-sheet-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text);
}