/* ================================================================
   내 항공편 — 좌석 브리핑 (features/ticket-brief/ticket-seat.js의 모양)
   ----------------------------------------------------------------
   운영자 지시 2026-09-24: 「좌석 브리핑도 추가해서 … 어느 좌석에서는 후지산이 보일 수 있고
   어떤 곳은 가려진다」.

   ⭐ 이 카드의 일은 **왼쪽과 오른쪽을 나란히 놓고 고르게 하는 것**이다.
     그래서 두 칸을 같은 너비로 두고, 좁은 화면에서만 위아래로 쌓는다.
   ⛔ 색만으로 알리지 않는다 — 「예상」·「밤」은 **글자 꼬리표**로도 함께 간다(경로 지도와 같은 규율).

   ⚠ 표면 색은 **토큰 두 줄로만** 정한다(`.ts-card`의 --ts-* 과 랜딩용 재정의).
     자식마다 background를 박으면 첫 화면(어두운 유리 카드)에서 그 자식만 밝게 남는다 —
     2026-09-23 v12에서 실제로 난 사고다(`.tb-phase>div`가 밝은 폴백으로 남아 글자와 같은 색이 됐다).
   ⚠ CSS는 이 파일이 정본이다. JS 문자열에 스타일을 넣지 않는다(CLAUDE.md 7항).
   ================================================================ */

/* 바깥 자리 — 두 칸/한 칸을 «이 칸의 너비»로 정한다(화면 너비가 아니다: 같은 모듈이
   폰 시트·랜딩 카드·넓은 화면에 모두 들어간다). */
.ts-wrap {
  container-type: inline-size;
  display: block;
}

.ts-card {
  --ts-surface: var(--bg-surface, #fff);
  --ts-ink: var(--ink, #0f172a);
  --ts-muted: var(--muted, #64748b);
  --ts-soft: var(--bg-soft, #f1f5f9);
  --ts-line: var(--border, #e2e8f0);
  --ts-accent: var(--blue, #0284c7);
  --ts-dim: #94a3b8;

  border: 1px solid var(--ts-line);
  border-radius: 12px;
  padding: 11px 12px;
  display: grid;
  gap: 9px;
  background: var(--ts-surface);
  color: var(--ts-ink);
}

/* 첫 화면(landing.html)의 어두운 유리 카드 위 — 토큰만 갈아 끼운다. */
.ld-search .tb-wrap .ts-card {
  --ts-surface: rgba(9, 23, 43, .92);
  --ts-ink: #f1f5f9;
  --ts-muted: #9fb0c6;
  --ts-soft: rgba(30, 49, 75, .72);
  --ts-line: rgba(148, 163, 184, .22);
  --ts-accent: #4deeea;
  --ts-dim: #7d8ea6;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
}

.ts-card h3 {
  margin: 0;
  font-size: 13.5px;
  display: flex;
  gap: 7px;
  align-items: baseline;
  flex-wrap: wrap;
  color: var(--ts-ink);
}

.ts-card h3 small {
  font-weight: 400;
  font-size: 11.5px;
  color: var(--ts-muted);
}

.ts-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ts-line);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
  color: var(--ts-muted);
}

/* 한 줄 권유 — 카드에서 가장 먼저 읽히는 자리 */
.ts-pick {
  background: var(--ts-soft);
  border-radius: 10px;
  padding: 8px 10px;
  display: grid;
  gap: 3px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ts-ink);
}

.ts-pick b {
  color: var(--ts-accent);
}

/* 두 칸 — 넓으면 나란히, 좁으면 위아래 */
.ts-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

@container (min-width: 520px) {
  .ts-cols {
    grid-template-columns: 1fr 1fr;
  }
}

/* ⛔ `@media (min-width:…)`로 대비를 걸지 않는다 — 화면이 넓으면 **좁은 칸 안에서도** 두 칸이
   되어 컨테이너 쿼리를 무력화한다(실측 2026-09-24: 360px 카드 안이 163px+163px로 쪼개졌다).
   컨테이너 쿼리는 크롬 105·사파리 16부터 된다(같은 저장소의 panel-resize가 이미 그 기준이다). */

.ts-col {
  border: 1px solid var(--ts-line);
  border-radius: 10px;
  padding: 8px 9px;
  display: grid;
  gap: 6px;
  align-content: start;
  min-width: 0;
}

.ts-col > h4 {
  margin: 0;
  font-size: 12.5px;
  display: flex;
  gap: 6px;
  align-items: baseline;
  color: var(--ts-ink);
}

.ts-col > h4 small {
  font-weight: 400;
  font-size: 11px;
  color: var(--ts-muted);
}

.ts-col.is-best > h4::after {
  content: '볼거리 많음';
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ts-accent);
}

.ts-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  padding: 6px 0;
  border-top: 1px solid var(--ts-line);
  min-width: 0;
}

.ts-item:first-of-type {
  border-top: 0;
  padding-top: 2px;
}

.ts-when {
  grid-row: span 2;
  font-size: 11px;
  color: var(--ts-muted);
  white-space: nowrap;
  display: grid;
  gap: 1px;
  align-content: start;
}

.ts-when b {
  font-size: 12px;
  color: var(--ts-ink);
  font-weight: 600;
}

.ts-ko {
  font-size: 13px;
  font-weight: 700;
  color: var(--ts-ink);
  display: flex;
  gap: 5px;
  align-items: baseline;
  flex-wrap: wrap;
  min-width: 0;
}

.ts-ko .ts-tag {
  font-size: 10.5px;
  font-weight: 500;
  border-radius: 999px;
  padding: 0 6px;
  border: 1px solid var(--ts-line);
  color: var(--ts-muted);
}

.ts-ko .ts-tag.near {
  color: var(--ts-accent);
  border-color: currentColor;
}

.ts-ko .ts-tag.est {
  border-style: dashed;
}

.ts-desc {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ts-muted);
  margin: 0;
  overflow-wrap: anywhere;
}

.ts-desc i {
  font-style: normal;
  color: var(--ts-dim);
}

.ts-item.is-dark .ts-ko {
  color: var(--ts-muted);
}

.ts-none {
  font-size: 11.5px;
  color: var(--ts-muted);
  padding: 4px 0 2px;
}

.ts-why {
  font-size: 11px;
  line-height: 1.55;
  color: var(--ts-muted);
  border-top: 1px dashed var(--ts-line);
  padding-top: 7px;
}

.ts-why b {
  color: var(--ts-ink);
  font-weight: 600;
}

/* ── 객실 평면도 (v2 2026-09-25) — 게이트 위치 지도처럼 «여기»를 찍는다 ──────────
   ⚠ 색은 위 토큰(--ts-*)만 쓴다 — 첫 화면에서 저절로 어두운 판이 된다. */
.tsp {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(150px, 230px) 1fr;
  gap: 10px;
  align-items: center;
  background: var(--ts-soft);
  border-radius: 10px;
  padding: 8px 10px;
}

@container (max-width: 420px) {
  .tsp {
    grid-template-columns: 1fr;
  }
  .tsp-svg {
    max-width: 240px;
    margin: 0 auto;
  }
}

.tsp-svg {
  width: 100%;
  height: auto;
  display: block;
}

.tsp-body { fill: var(--ts-surface); stroke: var(--ts-line); stroke-width: 1.5; }
.tsp-wing { fill: var(--ts-line); }
.tsp-eng { fill: var(--ts-dim); opacity: .55; }
.tsp-prop { stroke: var(--ts-dim); stroke-width: 2; stroke-dasharray: 3 3; }
.tsp-win { fill: var(--ts-line); }
.tsp-win.is-wing { fill: var(--ts-dim); opacity: .5; }
.tsp-win.is-on { fill: var(--ts-accent); }
.tsp-lead { stroke: var(--ts-accent); stroke-width: 1.5; }
.tsp-pin { fill: var(--ts-accent); }
.tsp-pin-t { fill: var(--ts-surface); font-size: 9.5px; font-weight: 700; }
.tsp-lab { fill: var(--ts-accent); font-size: 11px; font-weight: 700; }
.tsp-side { fill: var(--ts-muted); font-size: 10.5px; }
.tsp-nose { fill: var(--ts-muted); font-size: 9.5px; }
.tsp-sun { fill: #f59e0b; }

.tsp figcaption {
  font-size: 12px;
  line-height: 1.55;
  color: var(--ts-ink);
}

.tsp figcaption b { color: var(--ts-accent); }

.tsp-note {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--ts-muted);
}

.tsp-note b { color: var(--ts-ink); font-weight: 600; }

/* 접힌 나머지 — 한쪽 4곳 넘는 볼거리 */
.ts-more > summary {
  cursor: pointer;
  font-size: 11.5px;
  color: var(--ts-accent);
  padding: 6px 0 2px;
  list-style: none;
}

.ts-more > summary::before { content: '＋ '; }
.ts-more[open] > summary::before { content: '－ '; }

/* 좌석배치도·VR 링크 (v3 · 국내 항공사 기체) */
/* ⭐ 2026-09-26 — 한 줄에 두 단추(사용자 지시 「모바일일때 너무 많은 줄 … 한줄에 두개 링크」). 기체 카드(.tb-wrap)도 같은 모양.
   손가락 누름 자리 44px(09-26 18:22판의 기준)는 지킨다 — 줄 수만 줄인다. 하나뿐이면 반 칸이 아니라 한 칸을 다 쓴다. */
.tsp-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin-top: 8px; font-size: 12.5px; }
.tsp-links a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 8px;
  border: 1px solid var(--border, #dce4ec); border-radius: 10px; background: var(--bg-soft, #eef6f8);
  color: var(--ts-accent, #036b86); font-weight: 600; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-search .tsp-links a { color: #9fe5ef; border-color: #305369; background: #132b3d; }
.tsp-links a:hover { text-decoration: underline; }
.tsp-links a:focus-visible { outline: 2px solid #329f9c; outline-offset: 3px; }