/* 갈뻔항공 · 잘뻔호텔 — 껍데기 한 벌
   06-가짜여행 T1-1.

   base.css 위에 얹기만 한다. base.css 의 토큰(--c-*)을 덮어쓰지 않는다 —
   덮어쓰면 같은 저장소의 탭플스테이 네 화면이 같이 깨진다.
   여기서 새로 만드는 토큰은 전부 --t- 로 시작한다.
   office.css(--o-)와도 이름이 겹치지 않으므로 두 파일을 같이 불러도 안전하다.

   색을 고른 기준 — 가짜회사가 이미 회색 바탕 + 남색 상단 바를 쓴다.
   여행은 흰 바탕 + 청록 상단 바 + 주황 강조로 간다. 세 묶음이 눈으로 구분돼야 한다. */

/* ── 토큰 (라이트가 기본) ───────────────────────── */
.travel {
  --t-bg:        #f4f8fb;   /* 거의 흰색, 살짝 파랑기 */
  --t-panel:     #ffffff;
  --t-panel-2:   #eef4f9;
  --t-line:      #dbe4ee;   /* 카드 테두리. 장식이라 대비 기준을 안 건다 */
  --t-line-ctl:  #7d8da2;   /* 입력칸·좌석처럼 **누르는 것**의 테두리. 3:1 을 넘겨야 한다 */
  --t-line-soft: #eaf0f6;
  --t-ink:       #16202b;
  --t-ink-dim:   #5d6b81;
  --t-brand:     #0a7590;   /* 상단 바 청록 **배경**. 갈뻔항공 */
  --t-brand-ink: #f0fbff;
  --t-brand-dim: #e4f6fb;
  --t-brand-fg:  #0a7690;   /* 같은 청록의 **글자용**. 배경용과 밝기가 반대로 가야 한다 */
  --t-accent:    #c9491a;   /* 결제 버튼 **배경** 주황 */
  --t-accent-in: #ffffff;
  --t-accent-fg: #c44a19;   /* 가격·총액 **글자용** 주황 */
  --t-warn:      #cf3f31;   /* 2석 남음 · 마지막 1실 */
  --t-warn-in:   #ffffff;   /* 그 뱃지 위 글자 */
  --t-ok:        #14875f;
  --t-ok-in:     #ffffff;
  --t-stamp:     #1a6f8c;   /* 발권 도장 */
  --t-shadow:    0 1px 2px rgba(22, 32, 43, 0.10);
  --t-shadow-2:  0 12px 32px rgba(22, 32, 43, 0.20);

  --t-tab-h: 60px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .travel {
    --t-bg:        #0d1319;
    --t-panel:     #161f28;
    --t-panel-2:   #1e2932;
    --t-line:      #2a3742;
    --t-line-ctl:  #637a90;
    --t-line-soft: #212c36;
    --t-ink:       #e2ecf3;
    --t-ink-dim:   #92a3b3;
    --t-brand:     #0b6f8a;
    --t-brand-ink: #e6f7fd;
    --t-brand-dim: #d4edf5;
    --t-brand-fg:  #4cc0df;
    --t-accent:    #f07a4c;
    --t-accent-in: #14202a;
    --t-accent-fg: #f07a4c;
    --t-warn:      #e3695b;
    --t-warn-in:   #14202a;
    --t-ok:        #43ac83;
    --t-ok-in:     #14202a;
    --t-stamp:     #57b6d2;
    --t-shadow:    0 1px 2px rgba(0, 0, 0, 0.5);
    --t-shadow-2:  0 12px 32px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] .travel {
  --t-bg:        #0d1319;
  --t-panel:     #161f28;
  --t-panel-2:   #1e2932;
  --t-line:      #2a3742;
  --t-line-ctl:  #637a90;
  --t-line-soft: #212c36;
  --t-ink:       #e2ecf3;
  --t-ink-dim:   #92a3b3;
  --t-brand:     #0b6f8a;
  --t-brand-ink: #e6f7fd;
  --t-brand-dim: #d4edf5;
  --t-brand-fg:  #4cc0df;
  --t-accent:    #f07a4c;
  --t-accent-in: #14202a;
  --t-accent-fg: #f07a4c;
  --t-warn:      #e3695b;
  --t-warn-in:   #14202a;
  --t-ok:        #43ac83;
  --t-ok-in:     #14202a;
  --t-stamp:     #57b6d2;
  --t-shadow:    0 1px 2px rgba(0, 0, 0, 0.5);
  --t-shadow-2:  0 12px 32px rgba(0, 0, 0, 0.6);
}

/* ── 판 ────────────────────────────────────────── */
.travel {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--t-bg);
  color: var(--t-ink);
}

/* ── 상단 바 ───────────────────────────────────── */
.t-top {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  padding-top: max(var(--sp-3), env(safe-area-inset-top));
  background: var(--t-brand);
  color: var(--t-brand-ink);
}

/* 00-공통 T5-2 — 레이블 홈으로 나가는 길. 상단 바 맨 왼쪽 */
.t-home {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.16);
  color: var(--t-brand-ink);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.t-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 0 0 auto;
  text-decoration: none;
  color: inherit;
  letter-spacing: -0.02em;
}
.t-logo svg { width: 22px; height: 22px; flex: 0 0 22px; }
.t-logo-name { font-size: var(--fs-md); font-weight: 800; }

/* 안 쓴 돈. 세 화면 전부 같은 자리다 (T1-2) */
.t-saved {
  margin-left: auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  white-space: nowrap;
}
.t-saved-label {
  font-size: var(--fs-xs);
  color: var(--t-brand-dim);
}
.t-saved b {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--t-brand-ink);
  overflow: hidden;
  text-overflow: ellipsis;
}
.t-saved-unit {
  font-size: var(--fs-xs);
  color: var(--t-brand-dim);
}
/* 금액이 여덟 자리를 넘어가면 360px 에서 로고를 밀어낸다. 글자를 줄여 버틴다 */
@media (max-width: 380px) {
  .t-saved b { font-size: var(--fs-md); }
  .t-saved-label { display: none; }
}

/* ── 본문 ──────────────────────────────────────── */
.t-main {
  flex: 1;
  min-width: 0;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--sp-4);
  /* 하단 탭이 본문 끝을 가리지 않게 자리를 비운다 */
  padding-bottom: calc(var(--t-tab-h) + env(safe-area-inset-bottom) + var(--sp-5));
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* ── 하단 탭 (세로 화면 기본) ─────────────────────
   768px 이상에서는 상단 바 우측으로 올라간다 */
.t-tabs {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--t-panel);
  border-top: 1px solid var(--t-line);
  padding-bottom: env(safe-area-inset-bottom);
}

.t-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: var(--t-tab-h);
  color: var(--t-ink-dim);
  text-decoration: none;
  font-size: var(--fs-xs);
  line-height: 1;
}
.t-tab svg { width: 20px; height: 20px; }

/* 현재 화면 표시. 색만으로 알리지 않는다 —
   색을 못 가리는 사람도, 화면이 너무 밝거나 어두운 자리에서도 위 줄이 보인다 */
.t-tab { position: relative; }
.t-tab.is-here { color: var(--t-brand-fg); font-weight: 700; }
.t-tab.is-here::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22%;
  right: 22%;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--t-brand-fg);
}

/* 상단 바에 붙는 넓은 화면용 메뉴. 세로에서는 숨는다 */
.t-nav { display: none; }

@media (min-width: 768px) {
  .t-tabs { display: none; }
  .t-main { padding: var(--sp-5); padding-bottom: var(--sp-5); }
  .t-nav {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    margin-left: var(--sp-5);
  }
  .t-nav-item {
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-full);
    color: var(--t-brand-dim);
    text-decoration: none;
    font-size: var(--fs-sm);
    transition: background var(--dur-ui), color var(--dur-ui);
  }
  .t-nav-item:hover { background: rgba(255, 255, 255, 0.12); color: var(--t-brand-ink); }
  .t-nav-item.is-here {
    background: rgba(255, 255, 255, 0.18);
    color: var(--t-brand-ink);
    font-weight: 700;
  }
}

/* ── 본문 카드 ─────────────────────────────────── */
.t-card {
  background: var(--t-panel);
  border: 1px solid var(--t-line);
  border-radius: var(--r-md);
  box-shadow: var(--t-shadow);
  padding: var(--sp-4);
}

.t-card-title {
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.t-card-desc {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--t-ink-dim);
}

/* ── 버튼 ──────────────────────────────────────── */
.t-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 0 var(--sp-5);
  border-radius: var(--r-sm);
  background: var(--t-accent);
  color: var(--t-accent-in);
  font-size: var(--fs-md);
  font-weight: 700;
  border: 0;
  cursor: pointer;
  transition: transform var(--dur-tap), filter var(--dur-ui);
}
.t-btn:active { transform: scale(.985); }
.t-btn:disabled { filter: grayscale(.6) opacity(.6); cursor: default; }

.t-btn-full { width: 100%; }

.t-btn-ghost {
  background: transparent;
  color: var(--t-ink-dim);
  border: 1px solid var(--t-line-ctl);
}

.t-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: 36px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-full);
  border: 1px solid var(--t-line-ctl);
  background: var(--t-panel);
  color: var(--t-ink-dim);
  font-size: var(--fs-sm);
  cursor: pointer;
  /* 09-순위판 T4-1 — <a class="t-chip"> 가 생겼다. 버튼에는 원래 밑줄이 없어 회귀 없음 */
  text-decoration: none;
}
.t-chip.is-on { color: var(--t-brand-fg); border-color: var(--t-brand-fg); font-weight: 700; }

/* ── 뱃지 ──────────────────────────────────────── */
.t-badge {
  display: inline-block;
  padding: 2px var(--sp-2);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 700;
  background: var(--t-panel-2);
  color: var(--t-ink-dim);
}
.t-badge-warn { background: var(--t-warn); color: var(--t-warn-in); }
.t-badge-best { background: var(--t-ok); color: var(--t-ok-in); }

/* ── 푸터 ──────────────────────────────────────── */
.t-foot {
  margin-top: auto;
  padding-top: var(--sp-4);
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--t-ink-dim);
  line-height: 1.7;
}
.t-foot-row {
  display: flex;
  justify-content: center;
  /* 09-순위판 T4-1 — 여기 자식이 하나뿐이던 시절엔 없어도 됐다. 칩이 둘이 되면서 필요해졌다 */
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}
.t-foot a { color: inherit; }

/* ── 움직임을 싫어하는 사람 ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .travel * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══ 항공권 화면 (T2) ═══════════════════════════ */

/* 단계 전환. 한 번에 하나만 보인다 (인라인 style 금지) */
.t-step { display: none; }
.t-step.is-on { display: flex; flex-direction: column; gap: var(--sp-4); }

/* ── 검색 폼 (T2-1) ────────────────────────────── */
.t-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.t-field + .t-field { margin-top: var(--sp-4); }

.t-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--t-ink-dim);
  letter-spacing: 0.02em;
}

.t-route {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-2);
}
.t-port {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3);
  border: 1px solid var(--t-line-ctl);
  border-radius: var(--r-sm);
  background: var(--t-panel-2);
  text-align: left;
  cursor: pointer;
  min-width: 0;
}
.t-port-code { font-size: var(--fs-lg); font-weight: 800; color: var(--t-ink); }
.t-port-name {
  font-size: var(--fs-xs);
  color: var(--t-ink-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.t-port.is-fixed { cursor: default; }
.t-route-arrow { color: var(--t-brand-fg); }
.t-route-arrow svg { width: 20px; height: 20px; display: block; }

/* 인기 도시 8칸. 첫 동작이 탭 한 번이다 */
.t-cities {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
}
.t-city {
  min-height: 44px;
  padding: var(--sp-2) var(--sp-1);
  border: 1px solid var(--t-line-ctl);
  border-radius: var(--r-sm);
  background: var(--t-panel);
  color: var(--t-ink);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: border-color var(--dur-ui), color var(--dur-ui);
}
.t-city.is-on {
  border-color: var(--t-brand-fg);
  color: var(--t-brand-fg);
  font-weight: 700;
  background: var(--t-panel-2);
}

.t-input, .t-select {
  min-height: 46px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--t-line-ctl);
  border-radius: var(--r-sm);
  background: var(--t-panel);
  color: var(--t-ink);
  font-size: var(--fs-md);
  font-family: inherit;
  width: 100%;
}
.t-input:disabled, .t-input[readonly] {
  background: var(--t-panel-2);
  color: var(--t-ink-dim);
}

.t-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

/* 인원 스테퍼 */
.t-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--t-line);
  border-radius: var(--r-sm);
  background: var(--t-panel);
}
.t-stepper-name { font-size: var(--fs-sm); color: var(--t-ink-dim); }
.t-stepper-ctl { display: flex; align-items: center; gap: var(--sp-3); }
.t-step-btn {
  width: 34px; height: 34px;
  border-radius: var(--r-full);
  border: 1px solid var(--t-line-ctl);
  background: var(--t-panel);
  color: var(--t-ink);
  font-size: var(--fs-lg);
  line-height: 1;
  cursor: pointer;
}
.t-step-btn:disabled { color: var(--t-line); cursor: default; }

.t-grades { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }

/* 눌렀는데 안 되는 것을 알려주는 한 줄 */
.t-hint {
  font-size: var(--fs-sm);
  color: var(--t-accent-fg);
  min-height: 20px;
}

/* ── 검색 연출 ─────────────────────────────────── */
.t-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-7) var(--sp-4);
  color: var(--t-ink-dim);
  font-size: var(--fs-sm);
}
.t-spin {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 3px solid var(--t-line);
  border-top-color: var(--t-brand-fg);
  animation: t-spin 800ms linear infinite;
}
@keyframes t-spin { to { transform: rotate(360deg); } }

/* ── 항공편 목록 (T2-3) ────────────────────────── */
.t-summary {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--t-panel-2);
  border: 1px solid var(--t-line);
  font-size: var(--fs-sm);
}
.t-summary-main { min-width: 0; flex: 1; }
.t-summary-route { font-weight: 800; font-size: var(--fs-md); }
.t-summary-sub { color: var(--t-ink-dim); font-size: var(--fs-xs); margin-top: 2px; }

.t-sorts { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.t-flights { display: flex; flex-direction: column; gap: var(--sp-3); }

.t-flight {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-4);
  border: 1px solid var(--t-line);
  border-radius: var(--r-md);
  background: var(--t-panel);
  box-shadow: var(--t-shadow);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-ui), transform var(--dur-tap);
}
.t-flight:active { transform: scale(.995); }
.t-flight.is-best { border-color: var(--t-ok); }

.t-flight-head { display: flex; align-items: center; gap: var(--sp-2); }
.t-flight-no { font-size: var(--fs-xs); color: var(--t-ink-dim); font-weight: 700; }

.t-times {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-3);
}
.t-time { font-size: var(--fs-lg); font-weight: 800; }
.t-time-port { font-size: var(--fs-xs); color: var(--t-ink-dim); }
.t-leg { text-align: center; }
.t-leg-dur { font-size: var(--fs-xs); color: var(--t-ink-dim); }
.t-leg-line {
  height: 1px;
  background: var(--t-line);
  margin: var(--sp-1) 0;
}
.t-leg-stop { font-size: var(--fs-xs); color: var(--t-ink-dim); }
.t-leg-stop.is-stop { color: var(--t-warn); }

.t-flight-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}
.t-price { font-size: var(--fs-lg); font-weight: 800; color: var(--t-accent-fg); }
.t-price-unit { font-size: var(--fs-sm); font-weight: 700; }

/* ── 좌석도 (T2-4) ─────────────────────────────── */
.t-seatmap-wrap {
  /* 좌석도가 넘치면 이 안에서만 스크롤한다. 화면이 가로로 새면 버그다 */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: var(--sp-2);
}
.t-cabin {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  width: max-content;
  min-width: 100%;
  margin: 0 auto;
}
.t-seat-row {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  justify-content: center;
}
.t-row-no {
  width: 22px;
  flex: 0 0 22px;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--t-ink-dim);
}
.t-aisle { width: 16px; flex: 0 0 16px; }

.t-seat {
  width: 30px; height: 30px;
  flex: 0 0 30px;
  border-radius: 6px;
  border: 1px solid var(--t-line-ctl);
  background: var(--t-panel);
  color: var(--t-ink-dim);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.t-seat.is-sold {
  background: var(--t-line);
  color: var(--t-line);
  cursor: default;
}
.t-seat.is-extra { border-color: var(--t-accent-fg); color: var(--t-accent-fg); }
.t-seat.is-picked {
  background: var(--t-brand);
  border-color: var(--t-brand);
  color: var(--t-brand-ink);
  font-weight: 700;
}

.t-legend {
  display: flex;
  gap: var(--sp-4);
  justify-content: center;
  font-size: var(--fs-xs);
  color: var(--t-ink-dim);
  flex-wrap: wrap;
}
.t-legend span { display: inline-flex; align-items: center; gap: var(--sp-1); }
.t-dot {
  width: 12px; height: 12px;
  border-radius: 3px;
  border: 1px solid var(--t-line);
  background: var(--t-panel);
}
.t-dot.is-sold { background: var(--t-line); }
.t-dot.is-extra { border-color: var(--t-accent-fg); }

/* 총액 바. 좌석을 고르면 여기 숫자가 바로 오른다 */
.t-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--t-panel-2);
  border: 1px solid var(--t-line);
}
.t-total-label { font-size: var(--fs-sm); color: var(--t-ink-dim); }
.t-total-num { font-size: var(--fs-lg); font-weight: 800; color: var(--t-accent-fg); }

.t-btn-row { display: flex; gap: var(--sp-2); }
.t-btn-row .t-btn { flex: 1; }

/* ══ 호캉스 화면 (T3) ═══════════════════════════ */

/* 편의시설 아이콘 원본. 화면에 안 보이고 <use> 로만 불린다 */
.t-sprite { display: none; }

/* ── 호텔 목록 (T3-1) ──────────────────────────── */
.t-hotels {
  display: grid;
  gap: var(--sp-3);
}

@media (min-width: 768px) {
  .t-hotels { grid-template-columns: repeat(2, 1fr); }
}

.t-hotel {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  text-align: left;
  background: var(--t-panel);
  border: 1px solid var(--t-line);
  border-radius: var(--r-md);
  box-shadow: var(--t-shadow);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: transform var(--dur-tap) ease, border-color var(--dur-tap) ease;
}
.t-hotel:active { transform: scale(.995); }
.t-hotel:hover { border-color: var(--t-brand-dim); }

.t-hotel-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
}
.t-hotel-name { font-size: var(--fs-md); font-weight: 800; }
.t-hotel-where { font-size: var(--fs-xs); color: var(--t-ink-dim); }

.t-hotel-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.t-hotel-per { font-size: var(--fs-xs); color: var(--t-ink-dim); }

.t-star {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--t-ink);
}
/* fill 초기값이 black 이다. color 만 주면 다크모드에서 별이 안 보인다 */
.t-star svg { width: 14px; height: 14px; color: var(--t-accent-fg); fill: currentColor; }

/* ── 사진 (T3-2) ───────────────────────────────
   파일이 없어도 화면이 완성으로 보여야 한다. 자리표시는 CSS 그라데이션이고
   인라인 style 을 쓰지 않는다 — is-noimg 클래스만 붙인다 */
.t-photo {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--t-panel-2);
  overflow: hidden;
}
.t-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.t-photo.is-noimg img { visibility: hidden; }
.t-photo.is-noimg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, var(--t-brand) 0%, var(--t-panel-2) 58%, var(--t-brand-dim) 100%);
}
.t-photo.is-noimg.is-g2::before {
  background: linear-gradient(140deg, var(--t-accent) 0%, var(--t-panel-2) 62%, var(--t-brand-dim) 100%);
}
.t-photo.is-noimg.is-g3::before {
  background: linear-gradient(140deg, var(--t-ok) 0%, var(--t-panel-2) 60%, var(--t-brand) 100%);
}
/* 자리표시에 글자를 얹지 않는다. T3-2 완료기준이 "사진을 비운 채 열어도 화면이
   완성 상태로 보인다" 라서, "사진 준비 중" 같은 배지는 스스로 미완성이라고 알리는 셈이다.
   그라데이션만 남긴다 (2026-09-01) */

/* ── 사진 스와이프 (T3-3) ───────────────────────
   가로 스크롤은 이 상자 안에서만 일어난다. 밖으로 새면 C12 위반이다 */
.t-photos-wrap {
  position: relative;
  max-width: 100%;
  border: 1px solid var(--t-line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--t-panel);
  box-shadow: var(--t-shadow);
}

/* 사진 넘기는 좌우 단추 (T3-4).
   손가락은 scroll-snap 으로 넘기지만 마우스는 못 넘긴다 — 스크롤바를 숨겨놨고
   휠은 가로 컨테이너에서 세로로만 먹는다. 그래서 마우스가 있는 기기에만 띄운다. */
.t-photo-nav {
  display: none;
  position: absolute;
  top: calc(50% - 40px);
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--t-line-ctl);
  border-radius: var(--r-full);
  background: var(--t-panel);
  color: var(--t-ink);
  cursor: pointer;
  opacity: .82;
  box-shadow: var(--t-shadow);
  transition: opacity var(--dur-ui);
}
.t-photo-nav:hover { opacity: 1; }
.t-photo-nav:disabled { opacity: .28; cursor: default; }
.t-photo-nav svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.t-photo-nav.is-prev { left: var(--sp-3); }
.t-photo-nav.is-next { right: var(--sp-3); }

@media (hover: hover) and (pointer: fine) {
  .t-photo-nav { display: flex; }
}
.t-photos {
  display: flex;
  max-width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.t-photos::-webkit-scrollbar { display: none; }

.t-slide {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: center;
}

.t-dots {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
}
/* 보이는 점은 7px 이지만 눌리는 자리는 25px 이다 —
   투명 테두리로 넓히고 background-clip 으로 안쪽만 칠한다 (T3-4) */
.t-pip {
  width: 25px;
  height: 25px;
  padding: 0;
  border: 9px solid transparent;
  border-radius: var(--r-full);
  background: var(--t-line);
  background-clip: content-box;
  cursor: pointer;
}
.t-pip.is-on { background: var(--t-brand-fg); background-clip: content-box; }

/* ── 뱃지 줄 ───────────────────────────────────── */
.t-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

/* ── 편의시설 ──────────────────────────────────── */
.t-amens {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin: var(--sp-3) 0 0;
  padding: 0;
  list-style: none;
}
.t-amen {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--t-ink-dim);
}
.t-amen-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--t-brand-fg);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── 객실 3종 ──────────────────────────────────── */
.t-rooms {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.t-room {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  background: var(--t-panel);
  border: 1px solid var(--t-line);
  border-radius: var(--r-sm);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.t-room.is-on {
  border-color: var(--t-brand-fg);
  background: var(--t-panel-2);
}
.t-room-main { min-width: 0; }
.t-room-name { font-size: var(--fs-md); font-weight: 700; }
.t-room-desc { font-size: var(--fs-xs); color: var(--t-ink-dim); margin-top: 2px; }
.t-room-price {
  flex: 0 0 auto;
  font-size: var(--fs-md);
  font-weight: 800;
  color: var(--t-accent-fg);
  white-space: nowrap;
}

/* ── 탑승객·투숙객 정보 (T4-1 · T4-2) ───────────
   더미 고정 칸은 readonly 다. 값을 읽는 코드가 한 줄도 없다. */
.t-dummy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}
.t-dummy-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.t-dummy-row .t-label { flex: 0 0 88px; margin: 0; }
.t-dummy-row .t-input { flex: 1; min-width: 0; }
.t-note {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--t-ink-dim);
}

/* ── 결제 (T4-3) ───────────────────────────────── */
.t-paycard {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-2);
  background: var(--t-panel-2);
  border: 1px solid var(--t-line);
  border-radius: var(--r-sm);
}
.t-paycard svg {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: var(--t-brand-fg);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.t-paycard-main { min-width: 0; flex: 1; }
.t-paycard-no { display: block; font-size: var(--fs-sm); font-weight: 700; overflow-wrap: anywhere; }
.t-paycard-sub { display: block; font-size: var(--fs-xs); color: var(--t-ink-dim); margin-top: 2px; }

.t-insts {
  display: grid;
  /* 1fr 로 두면 칸이 글자보다 못 줄어들어 360px 에서 화면이 가로로 샌다 (C12) */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.t-insts .t-chip {
  justify-content: center;
  text-align: center;
  min-width: 0;
  padding: 0 var(--sp-1);
}
.t-inst-note {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--t-ok);
  min-height: 1.2em;
}

/* 진행 막대. 3초 3단계 */
.t-prog {
  height: 6px;
  margin-top: var(--sp-3);
  background: var(--t-line-soft);
  border-radius: 999px;
  overflow: hidden;
}
.t-prog-fill {
  width: 0;
  height: 100%;
  background: var(--t-accent);
  border-radius: 999px;
  transition: width .9s linear;
}
.t-prog-text {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--t-ink-dim);
  text-align: center;
  min-height: 1.3em;
}
@media (prefers-reduced-motion: reduce) {
  .t-prog-fill { transition: none; }
}

/* 완료 화면의 링크형 버튼 (T4-4) */
a.t-btn { text-decoration: none; }

/* ── 예약 내역 (T5) ─────────────────────────────── */
.t-books {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.t-book {
  position: relative;
  overflow: hidden;
  padding: var(--sp-4);
  background: var(--t-panel);
  border: 1px solid var(--t-line);
  border-radius: var(--r-md);
  box-shadow: var(--t-shadow);
}
.t-book.is-past { border-style: dashed; }
.t-book.is-past .t-book-route,
.t-book.is-past .t-book-sub { color: var(--t-ink-dim); }

.t-book-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--t-ink-dim);
}
.t-book-route {
  margin-top: var(--sp-2);
  font-size: var(--fs-md);
  font-weight: 800;
}
.t-book-sub {
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--t-ink-dim);
}

/* D-day 큰 숫자 */
.t-dday {
  margin-top: var(--sp-3);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--t-brand-fg);
  font-variant-numeric: tabular-nums;
}
.t-dday.is-today { color: var(--t-warn); font-size: var(--fs-lg); }
.t-dday-note {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--t-ink-dim);
}

.t-book-acts {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.t-book-acts .t-chip {
  flex: 1;
  min-width: 0;
  justify-content: center;
  text-align: center;
  padding: 0 var(--sp-2);
}

/* 노쇼 도장. 예약서 위에 비스듬히 찍힌다 (T5-3) */
.t-noshow {
  position: absolute;
  top: 38%;
  right: -6%;
  padding: var(--sp-2) var(--sp-4);
  border: 3px solid var(--t-warn);
  border-radius: var(--r-sm);
  color: var(--t-warn);
  font-size: var(--fs-md);
  font-weight: 800;
  letter-spacing: 0.04em;
  transform: rotate(-14deg);
  opacity: .85;
  pointer-events: none;
}

/* ── 예약 페이지 디테일 — 시설 안내·운임 규정 (T9) ─────
   문구만 늘 뿐 로직은 안 바뀐다. 결제는 여전히 항상 성공하고
   취소 수수료도 여전히 안 걷는다 (요구설계 §3-3). */
.t-rules { margin-top: var(--sp-3); }
.t-rules-row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 7px 0;
  font-size: var(--fs-sm);
  color: var(--t-ink-dim);
}
.t-rules-row + .t-rules-row { border-top: 1px dashed var(--t-line); }
.t-rules-row b { color: var(--t-ink); font-weight: 700; white-space: nowrap; }
.t-rules-label { min-width: 0; }