/* ============================================================
   자리 안내 (seat.html)
   가시성 우선: 흰 바탕 위 진한 글씨, 칸마다 또렷한 테두리
     글자  : 진한 색(--seat-ink) · 보조 색(--seat-sub, 흰 바탕 대비 4.5:1 이상)
     배경  : 흰색(--seat-bg) · 옅은 세이지(--seat-tint)
     강조  : 세이지 그린(--seat-accent) — 고른 테이블, 명단의 ‘나’, 자리 찾기 버튼에만
     선    : --seat-line (칸 테두리·점선)
   ============================================================ */
.seat {
  --seat-ink: #26301F;
  --seat-sub: #5E6A55;
  --seat-bg: #FFFFFF;
  --seat-tint: #F4F8EF;
  --seat-accent: #7E9E6C;
  --seat-line: #B7C1AC;

  padding: 64px 20px 48px;
  text-align: center;
}
.seat .section-title { color: var(--seat-ink); }   /* 청첩장 공통 제목색 대신 진한 글자색 */
.seat__sub {
  margin-top: 16px;
  font-size: 17px;
  color: var(--seat-sub);
}
/* 검색창 위 안내 (우천시 배치일 때만 seat.js가 넣음) */
.seat__notice {
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--seat-tint);
  font-size: 15px;
  line-height: 1.7;
  color: var(--seat-ink);
  word-break: keep-all;
}

/* ---------- 검색 ---------- */
.seat__search {
  margin-top: 28px;
  display: flex;
  gap: 8px;
}
.seat__search input {
  flex: 1;
  min-width: 0;
  height: 54px;
  padding: 0 14px;
  border: 1.5px solid var(--seat-line);
  border-radius: 12px;
  background: var(--seat-bg);
  font: inherit;
  font-size: 17px;
  font-weight: 400;
  color: var(--seat-ink);
  -webkit-appearance: none;
  appearance: none;
}
.seat__search input::placeholder { color: var(--seat-sub); font-weight: 300; font-size: 16px; }
.seat__search input:focus { outline: none; border-color: var(--seat-accent); }
.seat__search input::-webkit-search-cancel-button { display: none; }
.seat__search button {
  flex: none;
  height: 54px;
  padding: 0 18px;
  border: none;
  border-radius: 12px;
  background: var(--seat-accent);
  color: var(--seat-bg);
  font-family: inherit;
  font-size: 17px;
  letter-spacing: 0.02em;
  cursor: pointer;
}

/* ---------- 자동완성 ---------- */
.seat__searchwrap { position: relative; }
.seat__suggest {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--seat-line);
  border-radius: 14px;
  background: var(--seat-bg);
  box-shadow: 0 12px 30px rgba(66, 82, 58, 0.14);
  text-align: left;
}
.seat__suggest li[data-sug] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 11px 10px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 400;
  color: var(--seat-ink);
  cursor: pointer;
}
.seat__suggest li[data-sug]:hover,
.seat__suggest li[aria-selected="true"] { background: var(--seat-tint); }
.seat__suggest em { font-style: normal; font-size: 13px; font-weight: 300; color: var(--seat-sub); margin-left: 4px; }
.seat__suggest-more { padding: 8px 10px 4px; font-size: 13px; color: var(--seat-sub); }

/* ---------- 결과 (여러 명 · 못 찾음) ---------- */
.seat__result {
  margin-top: 24px;
  display: grid;
  gap: 12px;
  text-align: left;
}
.seat__result:empty { display: none; }
.seat__panel {
  background: var(--seat-tint);
  border-radius: 20px;
  padding: 24px 18px;
}
.seat__hello {
  font-size: 17px;
  color: var(--seat-sub);
  text-align: center;
}
.seat__hello strong { font-weight: 500; color: var(--seat-ink); }
.seat__chip {
  font-size: 14px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--seat-bg);
  color: var(--seat-sub);
}
.seat__away {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--seat-line);
  border-radius: 10px;
  background: var(--seat-bg);
  font-size: 15px;
  line-height: 1.7;
  color: var(--seat-sub);
  text-align: left;
}
.seat__away b { font-weight: 500; color: var(--seat-ink); }
.seat__link {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: 500;
  color: var(--seat-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.seat__pick { display: grid; gap: 7px; margin-top: 14px; }
.seat__pick button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--seat-line);
  border-radius: 10px;
  background: var(--seat-bg);
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  color: var(--seat-ink);
  text-align: left;
  cursor: pointer;
}
.seat__pick em { font-style: normal; font-size: 13px; font-weight: 300; color: var(--seat-sub); margin-left: 4px; }
.seat__pname { min-width: 0; }
.seat__pwhere { flex: none; max-width: 52%; font-size: 13px; font-weight: 300; color: var(--seat-sub); text-align: right; }
.seat__miss { text-align: center; }
.seat__miss p:first-child { font-size: 17px; font-weight: 400; color: var(--seat-ink); }
.seat__miss p + p { margin-top: 8px; font-size: 15px; line-height: 1.9; color: var(--seat-sub); }
.seat__tip { margin-top: 12px; font-size: 14px; color: var(--seat-sub); text-align: center; }

/* ---------- 배치도 ---------- */
.seat__area { margin-top: 16px; }
/* 구역 탭: 글자만, 고른 구역은 진한 글씨 + 밑줄 */
.seat__tabs {
  display: flex;
  border-bottom: 1px solid var(--seat-line);
}
.seat__tabs button {
  flex: 1;
  min-width: 0;
  margin-bottom: -1px;
  padding: 10px 0 9px;
  border: none;
  border-bottom: 3px solid transparent;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  color: var(--seat-sub);
  cursor: pointer;
}
.seat__tabs button[aria-selected="true"] {
  border-bottom-color: var(--seat-accent);
  color: var(--seat-ink);
  font-weight: 500;
}
.seat__mapbox {
  margin-top: 14px;
  padding: 14px 8px;
  border-radius: 20px;
  background: var(--seat-tint);
}
/* 예식 무대 · 통창 · 메인 가든 · 복도 · 버진로드: 모두 같은 모양 (점선 사이 옅은 글씨) */
.seat__front {
  margin-bottom: 12px;
  height: 26px;
  border-top: 1px dashed var(--seat-line);
  border-bottom: 1px dashed var(--seat-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: var(--seat-sub);
}
.seat__map {
  display: grid;
  column-gap: 8px;
  row-gap: 8px;
}
.seat__map--narrow { column-gap: 4px; row-gap: 5px; }   /* 메인 가든: 테이블이 많아 촘촘하게 */
.seat__caption {
  font-size: 12px;
  line-height: 1.3;
  color: var(--seat-sub);
  align-self: end;
  padding-bottom: 2px;
}
.seat__aisle {
  border-left: 1px dashed var(--seat-line);
  border-right: 1px dashed var(--seat-line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.seat__aisle span {
  writing-mode: vertical-rl;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--seat-sub);
}
.seat__edge {
  border-left: 1px dashed var(--seat-line);
  border-right: 1px dashed var(--seat-line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.seat__edge--left { margin-right: 8px; }
.seat__edge--right { margin-left: 8px; }
.seat__edge span {
  writing-mode: vertical-rl;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--seat-sub);
}
.seat__hall {
  border-top: 1px dashed var(--seat-line);
  border-bottom: 1px dashed var(--seat-line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.seat__hall span {
  font-size: 13px;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: var(--seat-sub);
}
.seat__tb {
  position: relative;
  min-width: 0;
  padding: 2px 3px;
  border: 1px solid var(--seat-line);
  border-radius: 8px;
  background: var(--seat-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-family: inherit;
  font-size: clamp(12px, 3.6vw, 14px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--seat-ink);
  word-break: keep-all;
  overflow-wrap: anywhere;   /* 예상 못 한 긴 이름이 칸을 넘지 않도록 마지막 안전장치 */
  cursor: pointer;
}
/* 메인 가든: 테이블이 많아 화면 폭에 맞춰 글자 크기 조절, 어느 폭에서도 2줄 이내 */
.seat__map--narrow .seat__tb { font-size: clamp(10.5px, 3.2vw, 13px); padding: 2px 1px; }
.seat__tb small { font-size: 9px; font-weight: 400; color: var(--seat-sub); }
.seat__tb--sel { background: var(--seat-accent); border-color: var(--seat-accent); color: var(--seat-bg); font-weight: 500; }
.seat__tb--sel small { color: var(--seat-bg); opacity: 0.85; }
/* 고른 테이블 주위로 퍼지는 강조 테두리 */
.seat__tb--sel::after {
  content: '';
  position: absolute;
  inset: -5px;
  border: 2px solid var(--seat-accent);
  border-radius: 11px;
  opacity: 0.5;
  pointer-events: none;
  animation: seatPing 1.8s ease-out infinite;
}
@keyframes seatPing {
  0%   { transform: scale(0.92); opacity: 0.6; }
  100% { transform: scale(1.18); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .seat__tb--sel::after { animation: none; opacity: 0.3; }
}

/* ---------- 테이블 명단 ---------- */
.seat__detail {
  margin-top: 12px;
  padding: 22px 16px;
  border-radius: 20px;
  background: var(--seat-tint);
  text-align: left;
  scroll-margin-bottom: 24px;
}
.seat__dtitle {
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--seat-ink);
}
.seat__mates { margin-top: 12px; display: grid; gap: 7px; }
.seat__mate {
  position: relative;
  min-width: 0;
  min-height: 56px;
  padding: 8px 12px;
  border: 1px solid var(--seat-line);
  border-radius: 10px;
  background: var(--seat-bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}
.seat__mname {
  font-size: 17px;
  font-weight: 400;
  color: var(--seat-ink);
  overflow-wrap: anywhere;
}
.seat__mname--empty { font-size: 15px; font-weight: 300; color: var(--seat-sub); }
.seat__mname em { font-style: normal; font-size: 13px; font-weight: 300; color: var(--seat-sub); }
.seat__mgroup { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--seat-sub); }
.seat__mgroup::before { content: ''; flex: none; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.seat__pill {
  display: inline-block;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.6;
  vertical-align: 0.22em;   /* 이름 글자의 가운데에 맞춤 */
}
.seat__mate--self { background: var(--seat-accent); border-color: var(--seat-accent); }
.seat__mate--self .seat__mname,
.seat__mate--self .seat__mname em,
.seat__mate--self .seat__mgroup { color: var(--seat-bg); }
.seat__mate--self .seat__pill { background: var(--seat-bg); color: var(--seat-accent); }
.seat__back {
  margin-top: 12px;
  width: 100%;
  padding: 12px 0;
  border: none;
  border-radius: 12px;
  background: var(--seat-bg);
  font-family: inherit;
  font-size: 15px;
  color: var(--seat-ink);
  cursor: pointer;
}

.seat__note { margin-top: 24px; font-size: 15px; line-height: 1.8; color: var(--seat-ink); }
.seat__home {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--seat-tint);
  font-size: 15px;
  color: var(--seat-ink);
}

/* 좁은 폰(≤360px) */
@media (max-width: 360px) {
  .seat { padding-left: 14px; padding-right: 14px; }
  .seat__mapbox { padding-left: 4px; padding-right: 4px; }
  .seat__map { column-gap: 6px; }
  .seat__map--narrow { column-gap: 3px; }
  .seat__search button { padding: 0 14px; }
}
/* 가장 좁은 폰(≤340px, 예: 320px 기기) */
@media (max-width: 340px) {
  .seat { padding-left: 12px; padding-right: 12px; }
  .seat__mapbox { padding-left: 2px; padding-right: 2px; }
  .seat__map--narrow { column-gap: 2px; }
  .seat__search button { padding: 0 12px; }
}