/* 바르셀로나 생존 키트 — 거리 세라믹 표지판(street plaque)의 시각 언어.
 *
 * 주제: QR 로 열리는 생존 키트. 잡지가 아니라 길찾기 도구다.
 * 대상: 폰 하나 든 피곤한 여행자, 3일 체류, 대낮 햇빛 아래.
 * 하는 일: 오늘 쓸 정보를 3초 안에 훑게 한다.
 *
 * 2026-08-25 개정: 갈래가 여섯이 되면서 "코발트 하나로 조용하게"가 안 맞게 됐다.
 * 진한 코발트 헤더가 첫 화면 3분의 1을 먹어 무겁고, 갈래를 색으로 구별할 수단도 없었다.
 * 헤더를 밝게 내리고 **갈래마다 색을 하나씩** 준다. 색은 장식이 아니라 길찾기 표지다 —
 * 지금 어느 갈래에 있는지를 글자를 읽기 전에 알려주는 것이 색의 일이다.
 *
 * 시그니처는 여전히 '날짜 명패'다(.plaque). 명패가 갈래색을 입는다.
 *
 * 모바일 우선. 고정 px 폭을 쓰지 않는다(375px 가로 오버플로 0 — NFR2).
 */

*, *::before, *::after { box-sizing: border-box; }

:root {
  color-scheme: light;

  /* 밝은 브랜드 색은 배경과 강조에, 진한 아쿠아는 링크와 작은 글자에 쓴다. */
  --aqua:   #20c4b6;
  --coral:  #ff8274;
  --lemon:  #f5de70;
  --accent-ink: #142d2a;
  --aqua-soft: #e5f8f4;
  --ink:    #172126;   /* 본문 */
  --paper:  #ffffff;   /* 배경 — 목업대로 흰 종이. 구분은 색이 아니라 경계선이 한다 */
  --card:   #f4f7f6;
  --plaque: #086b63;
  --gold:   #f5de70;
  /* 헤더 배경. --plaque 와 값은 같지만 쓰임이 반대라 토큰을 나눈다.
     --plaque 는 '바탕 위에 얹는 글씨'라 다크 모드에서 밝게 뒤집혀야 하고,
     --header 는 '글씨를 얹는 바탕'이라 두 테마 모두 어두워야 한다.
     하나로 묶여 있어서 다크 모드 헤더가 밝은 파랑 위 흰 글씨(2.08:1)가 됐다. */
  --header: #ffffff;
  /* 헤더 글씨. --header 위에 얹히므로 둘의 대비가 AA 를 넘어야 한다(테스트가 그 짝을 본다).
     예전에는 헤더가 어둡고 글씨가 흰색이었는데, 그 조합을 코드에 못박아 두었더니
     헤더 밝기를 못 바꾸게 되어 있었다. 지켜야 할 것은 '어둡다'가 아니라 '대비'다. */
  --header-ink: #086b63;
  --glaze:  #dbe5e2;
  --safety: #b3401b;   /* 안전(소매치기) 전용. 장식으로 쓰지 않는다 */
  --muted:  #52645f;

  /* 갈래색. 여섯 갈래를 글자 없이 구별하는 표지다.
     라이트·다크 양쪽에서 본문 바탕 대비 4.5 를 넘고, 색 위에 흰 글씨도 4.5 를 넘는다.
     --safety(테라코타)와 겹치는 주황 계열은 일부러 뺐다 — 위험 신호가 장식으로 읽히면 안 된다. */
  --c-home:     #086b63;
  --c-comp:     #0b6470;
  --c-realest:  #4a3aa5;
  --c-workhol:  #14663f;
  --c-market:   #9c2a63;
  --c-tips:     #2d5583;

  --space: 1rem;
  --radius: 3px;       /* 타일의 각. 둥근 카드는 이 주제가 아니다 */
}

@font-face {
  font-family: "Pretendard Variable";
  src: url('/landing/PretendardVariable-1.3.9.woff2') format('woff2');
  font-style: normal;
  font-weight: 45 920;
  font-display: swap;
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0 auto;
  max-width: 40rem;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Pretendard Variable", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  letter-spacing: 0;
  font-size: 1rem;
  line-height: 1.62;
  overflow-wrap: break-word;
  word-break: keep-all;   /* 한국어는 어절 단위로 끊어야 읽힌다 */
}

img, table, pre { max-width: 100%; }
table, pre { display: block; overflow-x: auto; }

a { color: var(--plaque); text-underline-offset: 0.18em; }

/* 키보드 초점은 항상 보이게 (품질 바닥선) */
:focus-visible { outline: 2px solid var(--tone); outline-offset: 2px; }

.skip { position: absolute; left: -9999px; }
/* 건너뛰기 링크. 헤더가 밝아지면서 흰 바탕 위 흰 글씨가 됐었다 —
   이제 갈래색을 바탕으로 깐다(글씨 뒤집기는 아래 다크 모드 묶음이 함께 맡는다). */
.skip:focus { position: static; display: block; padding: var(--space); background: var(--tone); color: #fff; }

/* ── 표지판 머리 ── 파란 타일 띠. 이 앱이 무엇인지 한 번에 말한다 */
.site-header {
  background: var(--header);
  color: var(--header-ink);
  padding: 0.8rem var(--space) 0.55rem;
  border-bottom: 1px solid var(--glaze);
  /* EU 골드 획. 글씨가 아니라 장식이므로 대비 규칙이 걸리지 않는다 —
     골드는 흰 바탕에서 1.51:1 이라 글씨로는 절대 못 쓴다. */
  border-top: 3px solid var(--gold);
}
.brand {
  color: inherit;
  text-decoration: none;
}
/* 메뉴는 목록 글씨와 같은 크기로 둔다. 여기가 작으면 '누를 곳'으로 안 읽힌다.
   흰색을 반투명으로 낮추지 않는다 — 밝은 데서 읽으라고 만든 화면이다. */
.site-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1.05rem;
  margin-top: 0.55rem;
  font-size: 1rem;
}
/* ⚠️ 여기서 color 를 주면 안 된다. `.site-header nav a`(0,2,2)가 `.tab-on`(0,1,0)을
   이겨서 **켜진 탭 글씨가 갈래색 위에서 회색으로 깔린다**(두 테마 모두 대비 붕괴).
   2026-09-10 에 발견했다 — 색은 `.tab`(꺼진 탭)과 `.me a`(계정 줄)가 각자 정한다. */
.site-header nav a { text-decoration: none; }
.site-header nav a:hover { text-decoration: underline; }

/* ── 갈래 탭 ── 여섯 개라 접지 않고 옆으로 흐르게 둔다(분류 칩과 같은 규칙).
   접으면 두 줄을 먹고 첫 글이 화면 밖으로 밀린다 — 실제로 390px 에서 그랬다. */
.site-header .tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 0.15rem;
}
.site-header .tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 0.28rem 0.8rem;
  border: 1px solid var(--glaze);
  border-radius: 999px;
  font-size: 0.9rem;
  color: var(--muted);
}
.tab:hover { text-decoration: none; background: var(--card); }
/* 켜진 탭만 색을 채운다. 여섯 개가 전부 색이면 어느 것이 지금인지 안 보인다. */
.tab-on { background: var(--tone); border-color: var(--tone); color: #fff; font-weight: 700; }

/* 계정·로그아웃은 갈래가 아니다. 탭 줄 아래에 조용히 둔다. */
.me { margin-top: 0.45rem; font-size: 0.85rem; }
.me a { color: var(--muted); }

/* ── 갈래색 스코프 ──
   --tone 하나만 갈아끼우면 그 갈래의 명패·점·탭·버튼이 함께 따라온다.
   색을 쓰는 자리마다 갈래를 if 로 따지면 한 곳을 빠뜨리고, 그 한 곳이 늘 눈에 띈다. */
:root { --tone: var(--c-home); }
[data-tab="home"]        { --tone: var(--c-home); }
[data-tab="companions"]  { --tone: var(--c-comp); }
[data-tab="realestate"]  { --tone: var(--c-realest); }
[data-tab="workingholiday"] { --tone: var(--c-workhol); }
[data-tab="market"]      { --tone: var(--c-market); }
[data-tab="tips"]        { --tone: var(--c-tips); }
[data-tab="all"]         { --tone: var(--c-home); }

main { padding: var(--space); }

.tagline {
  margin: 0.2rem 0 1.6rem;
  color: var(--muted);
  font-size: 0.94rem;
}

/* ── 타이포 스케일 ── 표제는 좁고 단단하게, 본문은 편하게 */
/* 화면 제목은 대체로 위 메뉴 항목을 그대로 반복한다("게시판" 위에 "게시판").
   크게 둘 이유가 없다 — 그 자리는 첫 글에 준다. */
h1 { font-size: 1.24rem; line-height: 1.3; letter-spacing: -0.02em; text-wrap: balance; margin: 0 0 0.35rem; }
/* 목업대로 진한 볼드. 대문자 letterspacing 회색은 훑을 때 갈래 이름이 먼저 안 읽혔다.
   앞에 갈래색 점을 세워 글자를 읽기 전에 어느 칸인지 알게 한다. */
h2 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-weight: 700;
  margin: 1.9rem 0 0.5rem;
}
h2::before {
  content: "";
  flex: 0 0 auto;
  width: 0.3rem; height: 1.05em;
  border-radius: 999px;
  background: var(--tone);
}
h2:first-of-type { margin-top: 0.6rem; }

/* ── 목록 ──
   상자 스무 개가 아니라 줄 스무 개로 그린다. 카드 테두리는 하나를 들여다볼 때 쓰는 형태고,
   여기서 하는 일은 훑기다. 배경과 테두리를 걷으면 한 화면에 3건이 7건이 된다.
   표지판은 카드로 나오지 않는다는 점에서도 이쪽이 주제에 맞다. */
.cards {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 0;
  border-top: 1px solid var(--glaze);
}
.card {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.6rem;
  align-items: baseline;
  padding: 0.5rem 0.15rem;
  border-bottom: 1px solid var(--glaze);
}
/* 목업처럼 제목을 잉크색으로 둔다. 스무 줄이 전부 파랗면 무엇이 중요한지 사라지고,
   정작 색으로 말해야 할 갈래 구분이 묻힌다. 링크임은 굵기와 hover 밑줄이 말한다. */
.card a { color: var(--ink); font-weight: 600; text-decoration: none; }
.card a:hover { text-decoration: underline; }
.card > a { flex: 1 1 12rem; }

/* 날짜가 있는 카드는 명패를 고정 열에 세운다.
   플렉스로 두면 제목 길이에 따라 명패가 좌우로 떠다녀 '기둥처럼 훑기'가 성립하지 않는다. */
.card--dated {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 0.7rem;
  align-items: start;
}
.card-body { display: flex; flex-wrap: wrap; gap: 0.15rem 0.5rem; align-items: baseline; }
.card-body > a { flex-basis: 100%; }

/* ── 시그니처: 날짜 명패 ──
   거리 표지판의 형태를 그대로 빌려왔다. 숫자는 tabular 로 자릿수를 맞춰
   목록을 세로로 훑을 때 날짜가 기둥처럼 정렬되게 한다(동행 목록의 정렬 키가 날짜다). */
.plaque {
  flex: 0 0 auto;
  background: var(--tone);
  color: #fff;
  padding: 0.12rem 0.42rem;
  border-radius: 2px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.meta, .empty { color: var(--muted); font-size: 0.8rem; }
.meta { font-variant-numeric: tabular-nums; }

.badge {
  font-size: 0.72rem;
  color: var(--muted);
  border: 1px solid var(--glaze);
  border-radius: 2px;
  padding: 0.05rem 0.4rem;
  white-space: nowrap;
}
.more { display: inline-block; margin-top: 0.7rem; font-size: 0.9rem; }

/* ── 글쓰기 진입 ──
   명패와 같은 코발트를 쓰되 역할이 다르다: 명패는 작고 반복되는 '표지', 이건 화면당 하나인 '행동'.
   목록 위·아래 두 곳에 둔다 — 모바일에서 길게 훑고 난 뒤가 정작 쓰고 싶어지는 순간인데,
   그때 위로 되돌아가게 만들면 대부분 그냥 나간다. */
.cta {
  display: block;
  margin: 0.55rem 0 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--tone);
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: var(--radius);
}
.cta:hover { filter: brightness(1.08); }
/* 목록 아래 것은 길게 훑고 난 뒤 눌리는 자리다. 위쪽 것과 달리 크기를 유지한다. */
.cta-tail { margin-top: 1.4rem; padding: 0.62rem 1rem; }
.cta-sm {
  display: inline-block;
  margin: 0;
  padding: 0.3rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
}

/* 비로그인에게 벽이 아니라 안내를 준다 — 초안이 보존되므로 먼저 써도 된다는 사실을 알린다 */
.cta-hint { margin: -0.35rem 0 0.6rem; color: var(--muted); font-size: 0.8rem; }

.row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0.7rem 0 0; }
.row .more { margin-top: 0; }

/* ── 분류 칩 ── 지하철 노선표처럼 납작하게.
   아홉 개가 두 줄을 차지해 첫 글을 화면 밖으로 밀어냈다. 한 줄로 눕히고 옆으로 흐르게 둔다. */
.chips {
  display: flex; flex-wrap: nowrap; gap: 0.35rem;
  margin-block: 0.55rem; padding-bottom: 0.15rem;
  overflow-x: auto; scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  white-space: nowrap;
  padding: 0.22rem 0.6rem;
  border: 1px solid var(--glaze);
  border-radius: 2px;
  background: var(--card);
  color: var(--muted);
  text-decoration: none;
  font-size: 0.86rem;
}
.chip-on { background: var(--tone); border-color: var(--tone); color: #fff; }

/* ── 본문·상세 ── */
.bodytext { white-space: pre-wrap; margin: 0.9rem 0; }

.contact {
  padding: 0.75rem 0.85rem;
  background: var(--card);
  border: 1px solid var(--glaze);
  border-left: 3px solid var(--tone);
  border-radius: var(--radius);
}

/* 면책·안전 고지는 색이 아니라 위치와 여백으로 무게를 준다.
   빨간 배너로 겁주면 매번 보는 사람은 곧 무시한다. */
.disclaimer {
  margin-top: 1.2rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--glaze);
  color: var(--muted);
  font-size: 0.82rem;
}

/* ── 폼 ── */
.stack { display: grid; gap: 0.9rem; margin-top: 1.2rem; }
.stack label { display: grid; gap: 0.3rem; font-weight: 600; font-size: 0.92rem; }
.stack small { font-weight: 400; color: var(--muted); font-size: 0.82rem; }

input, textarea, button, select {
  font: inherit;
  width: 100%;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--glaze);
  border-radius: var(--radius);
  background: var(--card);
  color: inherit;
}
input:focus, textarea:focus, select:focus { border-color: var(--tone); }
textarea { resize: vertical; }

button {
  width: auto;
  padding-inline: 1.1rem;
  background: var(--tone);
  border-color: var(--tone);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
button:hover { filter: brightness(1.08); }

.search { display: flex; flex-wrap: nowrap; gap: 0.4rem; align-items: center; margin-block: 0.55rem; }
.search input { flex: 1 1 6rem; min-width: 0; }
/* 범위 선택은 검색창에 딸린 작은 부속이다 — 한 줄 안에서 자리를 적게 차지하게 둔다. */
.search select { flex: 0 0 auto; width: auto; max-width: 6.4rem; padding-inline: 0.4rem; font-size: 0.85rem; }
.search button { flex: 0 0 auto; }

/* 필터는 검색줄과 줄을 나눈다. 한 줄에 몰면 정작 검색 입력칸이 짜부라진다 —
   390px 에서 실제로 그랬다. 여기는 nowrap 이 아니라 wrap 이어야 좁은 화면에서 접힌다. */
.filters { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-block: 0.55rem; }
.filters select { flex: 0 0 auto; width: auto; padding-inline: 0.4rem; font-size: 0.85rem; }
/* 시작일·끝일은 한 쌍이다. 한 덩어리로 접히게 두고, 그 안에서 폭을 반씩 나눈다. */
.filters-range { display: flex; flex: 1 1 17rem; gap: 0.4rem; min-width: 0; }
.filters input[type="date"] { flex: 1 1 0; min-width: 0; font-size: 0.85rem; }

.inline { display: inline; }
/* 어두운 헤더와 밝은 카드 양쪽에서 쓰인다. 색을 못박으면 한쪽에서 반드시 안 보인다
   — 실제로 댓글 삭제와 관리자 로그아웃 버튼이 흰 배경에 흰 글씨로 사라져 있었다. */
.inline button {
  padding: 0 0.4rem; background: none; border: none;
  color: inherit; opacity: 0.88; font-weight: 400;
}

.formerror { color: var(--safety); font-weight: 600; }
.notice {
  color: var(--muted); font-size: 0.9rem;
  padding: 0.6rem 0.75rem; background: var(--card);
  border: 1px solid var(--glaze); border-radius: var(--radius);
}

.owner-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: var(--space); }
.pager { display: flex; gap: var(--space); margin-top: var(--space); }

/* ── 댓글 ── */
.comments { margin-top: 2rem; border-top: 1px solid var(--glaze); padding-top: var(--space); }
.comment-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.comment { padding: 0.7rem 0.8rem; background: var(--card); border: 1px solid var(--glaze); border-radius: var(--radius); }
.comment-author { font-size: 0.8rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.comment .bodytext { margin: 0.2rem 0 0; }

/* 신고는 있어야 하지만 눈에 띌 필요는 없다 — 필요할 때 찾을 수 있으면 된다 */
/* 신고. 있어야 하지만 눈에 띌 필요는 없다 — 읽는 사람의 시선을 가져가면 안 된다. */
.reportbar { margin-top: 0.9rem; }
.reportlink {
  padding: 0; background: none; border: none;
  color: var(--muted); font-size: 0.8rem; font-weight: 400;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.reportpop {
  width: min(22rem, calc(100vw - 2rem));
  padding: 1rem; border: 1px solid var(--glaze); border-radius: var(--radius);
  background: var(--card); color: var(--ink);
}
.reportpop::backdrop { background: rgb(15 20 25 / 0.35); }
.reportpop-title { margin: 0; font-weight: 700; }
.reportpop-actions { display: flex; align-items: center; gap: 0.8rem; }
.comment-actions { display: flex; align-items: center; gap: 0.9rem; margin-top: 0.4rem; }
.comment-actions .reportbar { margin-top: 0; }
.comment-actions .inline button { font-size: 0.8rem; color: var(--muted); text-decoration: underline; }

/* popover 를 모르는 브라우저에서는 폼이 늘 펼쳐진다. 그때는 여는 버튼이 군더더기다. */
@supports not selector(:popover-open) {
  .reportlink { display: none; }
}

.site-footer {
  margin-top: 2.5rem;
  padding: var(--space);
  border-top: 1px solid var(--glaze);
  color: var(--muted);
  font-size: 0.8rem;
}
.site-footer p { margin: 0.4rem 0; }

/* 이 앱에는 애니메이션이 없다 — 피곤한 여행자에게 움직임은 방해다.
   상태 변화만 즉각적으로 보이면 된다. 그래도 선호는 존중한다. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* 사진 — 본문 폭을 넘지 않게만 두고, 비율은 원본 그대로 둔다. */
.photo, .preview {
  display: block; width: 100%; height: auto;
  margin-block: 0.7rem; border: 1px solid var(--glaze); border-radius: var(--radius);
  background: var(--glaze);
}
.imagefield { display: grid; gap: 0.35rem; }
.imagefield input[type=file] { font-size: 0.9rem; }
.imagefield .hint { min-height: 1.2em; margin: 0; font-size: 0.85rem; color: var(--muted); }
.imagefield .preview { max-height: 40vh; object-fit: contain; }
.linkish {
  justify-self: start; padding: 0.2rem 0; background: none; border: none;
  color: var(--muted); font-size: 0.85rem; text-decoration: underline; cursor: pointer;
}

/* 새 댓글 표시. 숫자가 붙는 작은 알약. */
.pip {
  display: inline-block; padding: 0.05rem 0.4rem; border-radius: 999px;
  background: var(--plaque); color: #fff;
  font-size: 0.72rem; font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap; vertical-align: middle;
}
.site-header .pip { background: #fff; color: var(--header); }

/* 좋아요. 누르기 전에는 조용하고, 누르면 명패색으로 채워진다. */
.likebar { display: flex; align-items: center; gap: 0.5rem; margin-block: var(--space); }
.like {
  background: none; color: var(--plaque);
  border: 1px solid var(--plaque); border-radius: var(--radius);
  padding: 0.35rem 0.9rem; font-weight: 600; cursor: pointer;
}
.like-on { background: var(--plaque); color: #fff; }
/* --plaque 는 어두운 테마에서 밝게 뒤집힌다. 바탕으로 쓴 자리는 글씨도 같이 뒤집어야 한다 */
.likecount { color: var(--muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; }

/* 올린 시각. 읽는 데 방해가 되지 않게 낮추되, 숫자는 자리를 지키게 한다. */
.ago { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.comment .meta { margin-left: 0.4rem; font-size: 0.82rem; }

/* 목록의 반응 수. 제목을 밀어내지 않게 작고 붙어 있는다. */
.cnt { margin-left: 0.3rem; font-size: 0.78rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cnt-c { color: var(--plaque); font-weight: 700; }
.cnt-l { color: var(--muted); }
.badge-hot { background: var(--plaque); color: #fff; border-color: var(--plaque); }

/* 목록 한 줄: [좋아요 또는 날짜] [작은 그림] [제목·정보].
   레퍼런스(에펨/디시 계열)의 구조다 — 훑을 때 눈이 왼쪽 숫자로 먼저 간다. */
.card--row {
  display: grid;
  grid-template-columns: 2.3rem 3.5rem minmax(0, 1fr);
  gap: 0 0.6rem;
  align-items: center;
}
.card--row .card-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
/* 세로로 쌓으므로 '제목은 한 줄 통째로' 규칙(flex-basis:100%)은 여기서 필요 없다. */
.card--row .card-body > a { flex-basis: auto; }
/* 제목과 댓글 수는 한 줄이다. 숫자가 아래로 떨어지면 어느 글의 것인지 흐려진다. */
.card-head { display: block; }
/* 동행 목록은 첫 칸이 숫자가 아니라 날짜 명패라 폭이 다르다. */
.card--row.card--dated { grid-template-columns: auto 3.5rem minmax(0, 1fr); }

/* 당근 목록에는 왼쪽 숫자칸이 없다 — 훑는 축이 순위나 날짜가 아니라 사진과 값이다.
   .card--row 를 그대로 쓰면 세 칸짜리 격자에 두 칸만 들어가 제목이 2.6rem 안에서
   한 글자씩 끊긴다(실제로 그렇게 나왔다). */
.card--goods {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0 0.6rem;
  align-items: center;
}
.card--goods .card-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.card--goods .card-body > a { flex-basis: auto; }
.cards:not(:has(img.thumb)) .card--goods { grid-template-columns: minmax(0, 1fr); }

/* 목록에 사진이 한 장도 없으면 그 칸은 빈 회색 타일만 스무 번 반복한다 — 정보량이 0 이다.
   그럴 때만 칸을 접는다. 사진이 한 장이라도 올라오면 저절로 되돌아온다(손댈 필요 없다).
   :has() 를 모르는 옛 브라우저에서는 지금까지의 모습 그대로다. */
.cards:not(:has(img.thumb)) .thumb-none { display: none; }
.cards:not(:has(img.thumb)) .card--row { grid-template-columns: 2.3rem minmax(0, 1fr); }
.cards:not(:has(img.thumb)) .card--row.card--dated { grid-template-columns: auto minmax(0, 1fr); }

.score {
  display: flex; flex-direction: column; align-items: center; line-height: 1.1;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.score-mark { font-size: 0.7rem; }
.score-n { font-size: 0.95rem; font-weight: 700; color: var(--ink); }

.thumb {
  width: 3.5rem; height: 3.5rem; border-radius: 2px;
  object-fit: cover; background: var(--paper); border: 1px solid var(--glaze);
}
/* 사진이 섞여 있을 때, 사진 없는 글도 줄 높이가 흔들리지 않게 같은 자리를 차지한다.
   자리만 지키면 되므로 무늬는 그리지 않는다 — 반복되면 그 자체가 소음이다. */
.thumb-none { display: block; background: none; border-color: transparent; }

/* 헤더의 브랜드와 설명. 로마자 이름이 먼저 서고 한글 설명이 뒤를 받친다.
   좁은 화면에서는 아래로 내려가되 이름이 잘리지 않는다. */
/* 배너 로고: [인사하는 U] [작은 설명 / 큰 이름].
   설명이 위, 이름이 아래다 — 눈이 큰 글씨에서 멈추게 하려면 그게 마지막에 와야 한다. */
.brand { display: flex; align-items: center; gap: 0.6rem; }
.brand-mark { flex: none; width: 2.5rem; height: 2.5rem; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-name { font-size: 1.5rem; font-weight: 800; letter-spacing: 0; color: var(--ink); }
.wordmark { white-space: nowrap; }
.wordmark-accent { display: inline-block; color: var(--aqua); transform: translateY(var(--wordmark-lift, -0.1em)); }
.brand-sub {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0;
  opacity: 0.75; white-space: nowrap;
}

/* ── 당근 타일 ── 물건은 사진이 먼저 읽힌다. 목록의 '줄' 규칙에서 여기만 예외를 둔다.
   가로 두 칸 고정이 아니라 최소폭 기준으로 접는다 — 좁은 화면에서 한 칸이 되어야 한다. */
.tiles {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.7rem;
}
.tile a { display: block; text-decoration: none; }
.tile .thumb { width: 100%; height: 5.5rem; object-fit: cover; border-radius: var(--radius); }
/* 사진이 없는 물건도 빈 회색 칸이 아니라 색 타일로 선다(목업). 물건마다 색이 달라야
   목록이 눈에 남는데, 서버가 색을 고르면 그 자체가 상태가 된다 — id 로 정한다. */
.tile .thumb-none { display: block; border: 0; }
.tile-c0 .thumb-none { background: #f2dcb3; }
.tile-c1 .thumb-none { background: #cfe4d0; }
.tile-c2 .thumb-none { background: #d6dcf0; }
.tile-c3 .thumb-none { background: #f0d7dd; }
.tile-c4 .thumb-none { background: #d9e7ee; }
.tile a { color: var(--ink); }
.tile-title { display: block; margin-top: 0.3rem; font-weight: 600; font-size: 0.9rem; }
.price { color: var(--ink); font-weight: 700; font-size: 0.9rem; }
.tile .price { display: block; font-size: 0.85rem; }
/* 거래완료는 지우지 않고 흐리게 남긴다 — '여기서 거래가 된다'는 증거다. */
.card--done { opacity: 0.55; }

/* ── 카드뉴스 스트립 ── 첫 화면 맨 위. 정방형이 가로로 늘어서고 손가락으로 민다.
   캐러셀 라이브러리를 쓰지 않는다 — overflow-x + scroll-snap 이면 폰에서 그대로 스와이프가
   되고, 스크립트가 안 뜨는 상황에서도 목록이 그냥 보인다. */
/* ── 오늘의 소식 ── 카드뉴스보다 위. 그림 없이 글만이라 시선을 덜 끌어야 한다.
   요약이 먼저 읽히고 원문 제목(스페인어)은 출처 표시로 작게 둔다 —
   우리가 쓴 것과 언론사 것이 섞여 보이면 안 된다. */
.newsstrip { margin: -0.35rem 0 1.2rem; }
.newsstrip h2 { margin-bottom: 0.4rem; }
.newsstrip ul { list-style: none; margin: 0; padding: 0; }
.newsstrip li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--glaze);
}
.newsstrip li:last-child { border-bottom: 0; }
.news-summary { margin: 0 0 0.15rem; line-height: 1.45; }
/* 날짜는 요약 앞에 붙는 명패다. 요약보다 약하게 — 읽는 순서가 날짜가 아니라 내용이어야 한다. */
.news-date { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 0.35rem; }
.news-src {
  font-size: 0.78rem;
  color: var(--muted);
  text-decoration: none;
  display: inline-block;
}
.news-src:hover, .news-src:focus { text-decoration: underline; }

.cardstrip { margin: -0.35rem 0 1.4rem; }
.cardstrip h2 { margin-bottom: 0.5rem; }
.cardstrip-rail {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0 0 0.3rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cardstrip-rail::-webkit-scrollbar { display: none; }
/* 한 칸이 화면의 절반을 조금 안 되게 잡는다. 다음 장이 살짝 보여야 '옆으로 더 있다'가 읽힌다. */
.cardstrip-item {
  flex: 0 0 min(44%, 11rem);
  scroll-snap-align: start;
}
.cardstrip-item a {
  position: relative;
  display: block;
  text-decoration: none;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--glaze);
}
/* 정방형. 카드뉴스 원본은 세로로 길어서 위쪽(제목 부분)이 남게 자른다. */
.cardstrip-item img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: top;
}
.cardstrip-date {
  position: absolute; left: 0; bottom: 0;
  padding: 0.1rem 0.4rem;
  background: var(--tone);
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.75rem; font-weight: 600;
  border-top-right-radius: var(--radius);
}

/* ── 팝업 ── :target 으로 연다. 페이지를 옮기지 않고, 뒤로가기로 닫힌다. */
.lightbox {
  display: none;
  position: fixed; inset: 0; z-index: 50;
  align-items: center; justify-content: center;
  padding: var(--space);
}
.lightbox:target { display: flex; }
/* 오늘 회차는 홈에 들어오면 저절로 열린다(2026-09-03 요청).
   스크립트 없이 :target 만으로 한다 — 닫기가 #card-off 를 가리키고, 그게 target 이면 숨는다.
   ~ 는 뒤쪽 형제만 잡는다. 그래서 #card-off 와 지난 회차들이 오늘 것보다 **앞에** 있어야 하고,
   home.njk 가 팝업을 오래된 것부터 그리는 이유가 그것이다. */
.lightbox--auto { display: flex; }
/* 닫기를 눌렀을 때. */
#card-off:target ~ .lightbox--auto { display: none; }
/* 지난 회차를 눌러서 열었을 때. 이게 없으면 오늘 것이 뒤에 겹쳐 남는다. */
.lightbox:target ~ .lightbox--auto { display: none; }
/* 바깥 어디를 눌러도 닫힌다. 그림 뒤를 덮는 판이다. */
.lightbox-back {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.82);
}
.lightbox-body {
  position: relative;
  margin: 0;
  max-width: 34rem; max-height: 100%;
  display: flex; flex-direction: column;
  background: var(--card);
  border-radius: var(--radius);
  overflow: auto;
}
.lightbox-body img { display: block; width: 100%; height: auto; }
.lightbox-body figcaption {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  font-size: 0.85rem;
}
.lightbox-close {
  flex: 0 0 auto;
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--glaze); border-radius: 999px;
  color: var(--muted); text-decoration: none; font-size: 0.85rem;
}

/* 여러 장짜리 회차 표시. 눌러보기 전에 몇 장인지 알 수 있어야 한다. */
.cardstrip-count {
  position: absolute; right: 0.3rem; top: 0.3rem;
  padding: 0.05rem 0.4rem;
  /* 검은 반투명 위 흰 글씨. 바탕을 여기서 같이 못박으므로 테마와 무관하게 읽힌다. */
  background: rgba(0, 0, 0, 0.62); color: #fff;
  border-radius: 999px; font-size: 0.72rem; font-weight: 600;
}
/* 팝업 안 여러 장은 세로로 쌓인다. 사이에 실선을 둬 장이 바뀌는 지점을 알린다. */
.lightbox-body img + img { border-top: 1px solid var(--glaze); }

/* ── 본문 링크의 미리보기 ──
   테두리를 두는 이유: 목록의 '줄' 과 달리 이건 하나를 들여다보는 자리이고,
   본문 글자 사이에서 눌러도 되는 것으로 읽혀야 한다.
   그림 크기를 rem 으로 두는 이유는 375px 에서도 글자 자리가 남아야 하기 때문이다. */
.linkcard {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  margin: 0.9rem 0;
  padding: 0.6rem;
  border: 1px solid var(--glaze);
  border-radius: 0.5rem;
  color: var(--ink);
  text-decoration: none;
}
.linkcard img {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
  border-radius: 0.35rem;
  flex: none;
}
/* min-width: 0 이 없으면 긴 제목이 flex 칸을 밀어내 카드가 화면 밖으로 나간다. */
.linkcard-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.linkcard-title { font-weight: 600; }
.linkcard-site { color: var(--muted); font-size: 0.85rem; }

/* ── 투어 ──────────────────────────────────────────────────────────────── */

/* 가이드 카드. 이 서비스의 차별화가 "코스가 아니라 사람을 보고 고른다" 라
   상세 페이지 맨 위에 사람이 먼저 온다. */
.guidecard {
  display: flex; align-items: center; gap: 0.8rem;
  margin: 0.9rem 0; padding: 0.7rem;
  border: 1px solid var(--glaze); border-radius: 0.5rem;
}
.guidecard-photo {
  flex: none; width: 3.5rem; height: 3.5rem;
  object-fit: cover; border-radius: 50%;
}
.guidecard-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.guidecard-name { font-weight: 700; }

.tourprice { font-weight: 600; margin: 0.6rem 0; }
.toursec { margin: 1.4rem 0; }
.toursec h2 { font-size: 1.05rem; margin-bottom: 0.3rem; }

/* 날짜 고르기. 자바스크립트를 안 쓰므로 라디오를 칸처럼 보이게 한다 —
   달력 위젯을 쓰면 스크립트가 필요하고, 스크립트가 없으면 날짜를 못 고른다. */
.datepick { border: 0; padding: 0; margin: 0 0 1rem; }
.datepick-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(4.2rem, 1fr));
  gap: 0.35rem;
}
.datecell {
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
  padding: 0.35rem 0.2rem;
  border: 1px solid var(--glaze); border-radius: var(--radius);
  font-size: 0.8rem; cursor: pointer;
}
/* 고른 날짜가 눈에 띄어야 한다. :has() 를 모르는 브라우저에서는 라디오 점으로만 구분된다. */
.datecell:has(input:checked) { border-color: var(--plaque); box-shadow: inset 0 0 0 1px var(--plaque); }
.datecell input { margin: 0; }
.datecell-price { font-variant-numeric: tabular-nums; }
.datecell-off { opacity: 0.45; cursor: not-allowed; }

/* 예약 확인 화면의 항목표. */
.bookinfo { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.8rem; margin: 1rem 0; }
.bookinfo dt { color: var(--muted); font-size: 0.9rem; }
.bookinfo dd { margin: 0; }

/* 관리자 '오늘 할 일' 숫자 줄. */
.statrow { display: flex; gap: 1.2rem; list-style: none; margin: 0 0 1rem; padding: 0; }
.statrow li { display: flex; flex-direction: column; color: var(--muted); font-size: 0.85rem; }
.statrow-n { font-size: 1.4rem; font-weight: 700; color: var(--ink); }

/* 투어 카드 (첫 화면·목록). 목록의 '줄' 규칙에서 여기만 예외를 둔다 —
   투어는 훑는 물건이 아니라 고르는 물건이고, 무엇보다 **가이드 얼굴이 보여야** 한다.
   "코스가 아니라 사람을 보고 고른다"가 화면에서 사라지면 그 차별화는 없는 것이다.

   2026-09-08 개편(supahero 레퍼런스: Klook·Travel Next Level·Badrutt's Palace).
   가져온 것 — 사진이 주인공, 여백으로 만드는 위계.
   안 가져온 것 — 풀블리드 대형 히어로. 스페인 현지 회선에서 초 단위 비용이고
   우리 사진은 스톡이 아니라 200KB 상한의 폰 사진이다. */
.tourcards {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
}
/* 목록(/tours)이 본진이다. 첫 화면의 맛보기보다 카드를 크게 둔다 —
   목록이 첫 화면보다 초라하면 눌러 들어온 사람이 뒤로 나간다. */
.tourcards--lg { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.2rem; }

.tourcard {
  border: 1px solid var(--glaze); border-radius: 0.75rem; overflow: hidden;
  background: var(--paper);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.tourcard:hover { border-color: var(--plaque); transform: translateY(-2px); }
.tourcard > a { display: block; color: var(--ink); text-decoration: none; }
.tourcard-shot { display: block; overflow: hidden; }
.tourcard-photo { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.tourcard-body { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.85rem; }

/* 서명 — 가이드 얼굴이 사진 경계에 걸친다.
   **얼굴만 걸치고 이름은 카드 바탕에 둔다**: 이름까지 사진 위로 올리면 사진이
   밝을 때 글씨가 사라진다(대비를 사진이 정하게 되는 구조는 못 고친다). */
.tourcard-guide { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--muted); }
.tourcard-guide img { width: 1.8rem; height: 1.8rem; border-radius: 50%; object-fit: cover; }
.tourcard-guide--over { margin-top: -1.6rem; align-items: flex-end; }
.tourcard-guide--over img {
  width: 3rem; height: 3rem;
  border: 2px solid var(--paper);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.25);
}
.tourcard-title { font-weight: 700; font-size: 1.05rem; line-height: 1.35; }
.tourcard-foot {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem;
  margin-top: 0.2rem;
}
.tourcard-price { font-weight: 700; color: var(--plaque); font-variant-numeric: tabular-nums; }

/* 첫 화면의 투어 칸은 다른 칸보다 위에 서므로 여백을 조금 더 준다. */
.tourhome { margin-bottom: 1.8rem; }

/* 투어 목록 머리. 레퍼런스의 '큰 한 줄 + 받쳐주는 한 줄'만 가져왔다. */
.tourhero { margin: 0.5rem 0 1.2rem; }
.tourhero-title {
  font-size: 1.7rem; line-height: 1.25; letter-spacing: -0.01em;
  margin: 0 0 0.4rem;
}
.tourhero-lead { color: var(--muted); margin: 0; max-width: 34rem; }

/* 아직 아무것도 없을 때. 한 줄만 덩그러니 두면 고장으로 보인다. */
.empty--lg {
  padding: 2.5rem 1rem; text-align: center;
  border: 1px dashed var(--glaze); border-radius: 0.75rem;
}

/* 투어 상세의 사진 머리. 제목을 사진 위에 얹는다.
   ⚠️ 흰 글씨는 **같은 규칙 안에서** 어두운 바탕과 함께 선언해야 한다(views.test.js).
      rgba(0,0,0,…) 은 테마와 무관하게 늘 어둡다 — 사진 밝기에 대비를 맡기지 않는다. */
.tourshot { position: relative; border-radius: 0.75rem; overflow: hidden; margin: 0 0 0.5rem; }
.tourshot img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.tourshot-cap {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 2.5rem 1rem 0.9rem;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0));
}
/* 자식에는 #fff 를 다시 쓰지 않는다 — 스크림 없이 흰 글씨를 선언하는 규칙이 되고,
   그건 이 저장소에서 실제로 사고가 났던 형태다(views.test.js). 부모에서 물려받는다. */
.tourshot-cap h1 { margin: 0 0 0.2rem; font-size: 1.5rem; line-height: 1.25; color: inherit; }
.tourshot-cap p { margin: 0; font-size: 0.9rem; color: inherit; opacity: 0.88; }

/* 판매·계약 주체. 파는 사람이 우리가 아니라는 사실을 계약 지점 옆에 둔다.
   눈에 띄되 경고로 읽히면 안 된다 — 안전색(--safety)은 쓰지 않는다. */
.sellernote {
  margin: 1.5rem 0; padding: 1.25rem 0;
  border-block: 1px solid var(--glaze);
  font-size: 0.92rem;
}
.sellernote h2 { margin: 0 0 0.85rem; font-size: 1rem; line-height: 1.5; }
.seller-details { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.5rem 0.75rem; margin: 0; }
.seller-details dt { color: var(--muted); }
.seller-details dd { margin: 0; overflow-wrap: anywhere; }
.sellernote .meta { margin: 0.85rem 0 0; overflow-wrap: anywhere; }
.footer-seller { color: var(--muted); font-size: 0.88rem; }
.sellerinfo { margin: 1rem 0; }
.sellerinfo dt { color: var(--muted); font-size: 0.9rem; margin-top: 0.6rem; }
.sellerinfo dd { margin: 0.15rem 0 0; }

/* 후기. 별은 글자로 그린다 — 그림이면 느린 회선에서 별만 늦게 뜬다. */
.stars { white-space: nowrap; letter-spacing: 0.02em; }
.star { color: var(--glaze); }
.star-on { color: var(--plaque); }
.reviewsum { font-size: 0.9rem; color: var(--muted); }
.reviews { list-style: none; padding: 0; margin: 0.6rem 0; }
.review { padding: 0.7rem 0; border-top: 1px solid var(--glaze); }
.review:first-child { border-top: 0; }
.review-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem;
  margin: 0 0 0.3rem; font-size: 0.9rem; color: var(--muted);
}
.review-who { font-weight: 600; color: var(--ink); }
.review-body { margin: 0; }
.review-content, .review-copy { min-width: 0; }
.review-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.75; }
.review-copy { display: flex; flex-direction: column; }
.review-full-text { order: 2; margin-top: 0.5rem; }
.review-full-text summary { color: var(--plaque); cursor: pointer; font-size: 0.875rem; }
.review-full-text[open] + .review-excerpt { display: none; }
.review-photos { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.review-photos a { display: block; flex: 0 0 4.5rem; aspect-ratio: 1; border-radius: 6px; overflow: hidden; }
.review-photos img { display: block; width: 100%; height: 100%; object-fit: cover; }
.review-section-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem 1.25rem; margin-bottom: 1.25rem; }
.review-section-head h2 { margin: 0; }
.review-section-head > .more { margin-left: auto; }
.review-total { color: var(--plaque); }
.review-preview .reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.review-preview .review { min-width: 0; padding: 1.25rem; border: 1px solid var(--glaze); border-radius: 8px; background: var(--card); }
.review-preview .review-head { gap: 0.5rem; margin-bottom: 1rem; }
.review-preview .stars { flex-basis: 100%; font-size: 1.25rem; letter-spacing: 0; }
.tour-reviews .star-on { color: #b77700; }
.review-preview .review-body { font-size: 0.9375rem; }
.review-all { margin-top: 1rem; }
.review-all > summary { padding: 0.875rem 1rem; background: var(--plaque); color: var(--paper); text-align: center; border-radius: 6px; cursor: pointer; font-weight: 600; }
.review-all[open] > .reviews { margin-top: 1rem; }
.review-pagination { display: flex; justify-content: center; align-items: center; gap: 1.5rem; margin-top: 1.5rem; }
.rating-choices { display: flex; gap: 0.375rem; padding: 0.5rem 0; }
.stack .rating-choice { position: relative; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; cursor: pointer; }
.rating-choice input { position: absolute; opacity: 0; width: 0.0625rem; height: 0.0625rem; }
.rating-choice span { color: var(--muted); font-size: 2rem; line-height: 1; }
.rating-choice:has(input:checked) span, .rating-choice:has(~ .rating-choice input:checked) span { color: #b77700; }
.rating-choice:has(input:focus-visible) { outline: 2px solid var(--plaque); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 800px) { .review-preview .reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .review-preview .reviews { grid-template-columns: minmax(0, 1fr); } }
/* 묶어서 보여줄 입력칸 무리. .stack 안의 fieldset 은 grid 흐름에서 빠지므로
   자식 라벨의 간격을 여기서 다시 준다(별점 고르기에서 같은 함정을 겪었다). */
.fieldgroup {
  border: 1px solid var(--glaze); border-radius: 6px; padding: 0.7rem;
  display: grid; gap: 0.7rem;
}
.fieldgroup legend { font-weight: 600; font-size: 0.92rem; }
.fieldgroup > small { color: var(--muted); font-size: 0.82rem; }
.ratingset { border: 1px solid var(--glaze); border-radius: 6px; padding: 0.6rem; }
/* .stack label 이 grid 라 그대로 두면 라디오와 별이 양끝으로 벌어진다. 여기서 되돌린다. */
.ratingset legend { font-weight: 600; font-size: 0.92rem; }
.stack .ratingpick { display: flex; align-items: center; justify-content: flex-start; gap: 0.5rem; padding: 0.25rem 0; }
/* 362행의 input{width:100%} 이 라디오까지 늘려 별을 화면 밖으로 밀어낸다(390px 실측).
   flex:none 만으로는 안 된다 — width 를 되돌려야 한다. */
.ratingpick input { flex: none; width: auto; }
.toolrow { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.guidepage h2 { margin-top: 1.4rem; }
.tourlist { list-style: none; padding: 0; }
.tourlist li { padding: 0.5rem 0; border-top: 1px solid var(--glaze); }
.review-off { opacity: 0.55; }

/* 사업자 신원·중개자 고지. 법이 요구하는 표시라 늘 붙지만, 읽는 사람의 눈을
   가리면 안 된다 — 작게, 그러나 읽을 수 있게. */
.footer-biz, .footer-broker { color: var(--muted); font-size: 0.82rem; line-height: 1.5; }

/* 확인 안 된 채 팔리고 있는 것. 안전색을 쓴다 — 이건 장식이 아니라 위험 신호다. */
.warnbox {
  border: 1px solid var(--safety); border-radius: 0.5rem;
  padding: 0.8rem 0.9rem; margin: 1rem 0;
}
.warnbox h2 { margin: 0 0 0.3rem; font-size: 1rem; color: var(--safety); }
.warnbox ul { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.warnbox li { margin: 0.25rem 0; }

/* 투어 상세 이미지. 세로로 긴 안내 그림이라 **자르지 않는다** —
   글자가 박혀 있어서 잘리면 문장이 끊긴다. 폭에 맞추고 높이는 흐르게 둔다. */
.tourdetail-imgs { display: flex; flex-direction: column; gap: 0.4rem; }
.tourdetail-imgs img { display: block; width: 100%; height: auto; border-radius: 0.4rem; }

/* 저장은 됐지만 손님에게 안 보이는 상태.
   ⚠️ 안전색(--safety)을 쓰지 않는다. 준비중은 위험이 아니라 정상 상태이고,
      정보에 위험색을 쓰면 정작 위험할 때(무등록 판매) 아무도 안 본다. */
.warnline {
  margin: 0.6rem 0; padding: 0.55rem 0.75rem;
  background: var(--card); border-left: 3px solid var(--plaque); border-radius: 4px;
  font-size: 0.92rem;
}

/* 약관·방침. 긴 글이라 읽는 폭을 제한하고 줄간격을 넓힌다. */
.legal { max-width: 42rem; line-height: 1.75; }
.footer-legal { font-size: 0.82rem; }

/* 가입 방식 고르기. 읽는 폭을 좁혀 선택지에 집중시킨다. */
.pick { max-width: 30rem; margin: 0 auto; text-align: center; }
.auth-panel { max-width: 36rem; margin-inline: auto; }
.auth-links { display: grid; justify-items: start; gap: 0.75rem; margin-top: 1.2rem; }
.auth-links .more { margin-top: 0; }
.pick-lead { color: var(--muted); margin-bottom: 1.4rem; }
.picklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.pickbtn {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.85rem 1rem; border: 1px solid var(--glaze); border-radius: 0.6rem;
  color: var(--ink); text-decoration: none; font-weight: 600;
}
.pickbtn:hover { border-color: var(--plaque); }
.pickbtn-mark { flex: none; width: 2.1rem; height: 2.1rem; border-radius: 0.4rem; }
/* 각 사의 브랜드 색. 로고 이미지를 쓰지 않는다 — 상표 사용 규정이 제각각이고
   이미지를 더 받아오면 느린 회선에서 그만큼 늦어진다. */
.pickbtn--kakao .pickbtn-mark { background: #fee500; }
.pickbtn--naver .pickbtn-mark { background: #03c75a; }
.pickbtn--google .pickbtn-mark { background: #ffffff; border: 1px solid var(--glaze); }
.pick-or { display: flex; align-items: center; gap: 0.8rem; color: var(--muted); font-size: 0.85rem; }
.pick-or::before, .pick-or::after { content: ""; flex: 1; height: 1px; background: var(--glaze); }
.cta-wide { display: block; }
.public-page .pick .cta-partner { background: var(--coral); border-color: var(--coral); color: var(--accent-ink); }
.pick-sup { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 1.4rem; }
.pick-agree { margin-top: 1.2rem; font-size: 0.85rem; }

/* 동의 줄.
   ⚠️ 선택자가 `.stack .agreeline` 여야 한다. `.agreeline`(0,1,0) 만으로는
      `.stack label`(0,1,1) 의 display:grid 에 져서 체크박스가 글자 **위로** 올라간다.
      별점 고르기에서 같은 함정을 겪었는데 또 밟았다 — 이 저장소의 .stack 안에
      들어가는 label 은 전부 이 형태로 되돌려야 한다.
   그리고 input{width:100%}(362행)이 체크박스까지 늘리므로 width 도 되돌린다. */
.stack .agreeline {
  display: flex; align-items: center; gap: 0.5rem;
  font-weight: 400; font-size: 0.95rem;
}
.stack .agreeline input { flex: none; width: auto; margin: 0; }
.stack .agreeline span { flex: 1; min-width: 0; }

/* ── 첫 화면 히어로 ─────────────────────────────────────────────────────── */
.hero { text-align: center; padding: 1.6rem 0 1.2rem; }
.hero-badge {
  display: inline-block; margin: 0 0 0.9rem; padding: 0.35rem 0.85rem;
  background: var(--aqua-soft); border: 1px solid var(--glaze); border-radius: 999px;
  font-size: 0.85rem; color: var(--plaque);
}
.hero-title {
  font-size: 1.9rem; line-height: 1.3; letter-spacing: 0;
  margin: 0 0 0.6rem; text-wrap: balance;
}
.hero-lead { color: var(--muted); margin: 0 0 1.2rem; white-space: pre-line; }
.cta-hero { display: inline-block; padding: 0.75rem 2rem; }

/* 가이드 카드. 가로로 밀어 넘긴다 — 스냅은 CSS 가 하고 스크립트를 쓰지 않는다.
   사진 위에 이름을 얹으므로 **같은 규칙 안에서** 스크림과 함께 흰 글씨를 선언한다. */
.guiderail {
  list-style: none; margin: 0.6rem 0 0; padding: 0 0 0.5rem;
  display: flex; gap: 0.7rem; overflow-x: auto; scroll-snap-type: x mandatory;
}
.guiderail > li { flex: 0 0 9.5rem; scroll-snap-align: start; }
.guidegrid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.8rem;
}
.guidecardbig { position: relative; border-radius: 0.7rem; overflow: hidden; background: var(--card); }
.guidecardbig > a { display: block; text-decoration: none; }
.guidecardbig img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.guidecardbig-cap {
  position: absolute; inset-inline: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 0.1rem;
  padding: 2rem 0.7rem 0.6rem;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.35) 60%, rgba(0, 0, 0, 0));
}
.guidecardbig-name { font-weight: 700; font-size: 0.95rem; color: inherit; }
.guidecardbig-sub { font-size: 0.8rem; color: inherit; opacity: 0.9; }

/* 홈은 사람과 상품을 비교하는 넓은 화면. 예약·작성 폼의 읽기 폭은 그대로 둔다. */
body[data-tab="home"] { max-width: 80rem; }
body[data-tab="home"] main { padding: 0 1.5rem 2rem; }
body[data-tab="home"] .hero { padding: 2rem 0 1rem; }
body[data-tab="home"] .hero-title { max-width: 48rem; margin: 0 auto 0.9rem; font-size: 2.75rem; }
body[data-tab="home"] .hero-lead { max-width: 46rem; margin: 0 auto 1rem; font-size: 0.95rem; }
body[data-tab="home"] .cta-hero { background: var(--aqua); color: var(--accent-ink); border: 1px solid transparent; border-radius: 6px; font-weight: 750; }
body[data-tab="home"] .cta-hero:hover { border-color: var(--plaque); }
.guiderail-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.guiderail-heading h2 { margin: 0; font-size: 1.15rem; border: 0; padding: 0; }
.guiderail-actions { display: flex; align-items: center; gap: 1rem; }
.guiderail-actions .more { font-size: 0.85rem; white-space: nowrap; }
.guiderail-controls { display: flex; gap: 0.4rem; }
.guiderail-controls[hidden] { display: none; }
.guiderail-controls button {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none;
  padding: 0; border-radius: 50%; border: 1px solid var(--glaze);
  background: var(--paper); color: var(--ink); font-size: 1.35rem; cursor: pointer;
}
.guiderail-controls button:disabled { opacity: 0.35; cursor: default; }
.guiderail-controls button:not(:disabled):hover { background: var(--aqua-soft); border-color: var(--plaque); }
.guiderail-wrap .guiderail { gap: 1rem; padding: 0.2rem 0 0.8rem; margin: 0; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--plaque) var(--card); }
.guiderail-basis { margin-top: 0.3rem; color: var(--muted); font-size: 0.75rem; }
.guiderail-basis summary { cursor: pointer; }
.guiderail-basis p { margin: 0.5rem 0; }
.guiderail > .guideportrait { flex: 0 0 16rem; min-width: 0; }
.guiderail > .guideportrait:first-child { margin-left: auto; }
.guiderail > .guideportrait:last-child { margin-right: auto; }
.guideportrait { border: 1px solid var(--glaze); border-radius: 8px; overflow: hidden; background: var(--paper); }
.guideportrait-link { display: block; height: 100%; color: var(--ink); text-decoration: none; }
.guideportrait-link:hover .guideportrait-tour { text-decoration: underline; text-underline-offset: 0.2em; }
.guideportrait-link:focus-visible { outline-offset: -3px; }
.guideportrait-photo { position: relative; display: block; aspect-ratio: 6 / 7; background: var(--aqua-soft); overflow: hidden; }
.guideportrait-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.guideportrait-caption {
  position: absolute; inset: auto 0 0; display: flex; flex-direction: column; gap: 0.3rem; padding: 2.75rem 1rem 1rem;
  color: #fff; background: linear-gradient(to top, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.7) 65%, rgba(0, 0, 0, 0));
}
.guideportrait-caption strong { font-size: 1.2rem; line-height: 1.4; }
.guideportrait-category { align-self: flex-start; padding: 0.1rem 0.45rem; border-radius: 3px; font-size: 0.7rem; background: var(--lemon); color: var(--accent-ink); }
.guideportrait-headline { font-size: 0.8rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.guideportrait-empty { display: grid; place-items: start center; padding: 3.5rem 1rem 0; height: 100%; font-size: 0.85rem; color: var(--plaque); }
.guideportrait-tour { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: 0 1rem; margin: 0.8rem 0; height: 2.7rem; font-size: 0.85rem; line-height: 1.35rem; }
.guideportrait-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 1rem; padding: 0.7rem 0 0.85rem; border-top: 1px solid var(--glaze); text-align: center; }
.guideportrait-stats div + div { border-left: 1px solid var(--glaze); }
.guideportrait-stats dt { font-size: 0.7rem; color: var(--muted); }
.guideportrait-stats dd { margin: 0.2rem 0 0; font-weight: 700; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.guideportrait-star { color: var(--plaque); }
.guideportrait-pending { font-size: 0.8rem; font-weight: 500; color: var(--muted); }
.guide-photo-application { margin: 0; padding: 1rem; border: 1px solid var(--glaze); }
.guide-photo-application[hidden] { display: none; }
.guide-photo-current, .guide-photo-field .preview { width: 9.375rem; height: auto; aspect-ratio: 6 / 7; object-fit: cover; object-position: center 30%; border-radius: 6px; }
.tour-promises { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; border-block: 1px solid var(--glaze); padding: 1.4rem 0; margin: 1.5rem 0 2rem; }
.tour-promises a { display: flex; flex: 1 1 15rem; flex-direction: column; gap: 0.2rem; text-decoration: none; color: var(--ink); padding-left: 0.85rem; border-left: 3px solid var(--aqua); }
.tour-promises a:nth-child(2) { border-color: var(--coral); }
.tour-promises a:nth-child(3) { border-color: var(--lemon); }
.tour-promises strong { font-size: 0.95rem; }
.tour-promises span { color: var(--muted); font-size: 0.85rem; }
.tour-promises a:hover span { text-decoration: underline; }
@media (min-width: 52rem) {
  body[data-tab="home"] .site-header { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 2rem; padding-inline: 1.5rem; }
  body[data-tab="home"] .site-header nav { margin-top: 0; }
  body[data-tab="home"] .site-header .me { margin-left: auto; }
  body[data-tab="home"] .tourcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  body[data-tab="home"] main { padding-inline: 1rem; }
  body[data-tab="home"] .hero { padding-top: 1.5rem; }
  body[data-tab="home"] .hero-title { font-size: 1.9rem; }
  body[data-tab="home"] .hero-lead { font-size: 0.85rem; }
  .guiderail-heading { align-items: flex-start; gap: 0.5rem; }
  .guiderail-actions { gap: 0.5rem; }
  .guiderail-actions .more { max-width: 5rem; white-space: normal; font-size: 0.75rem; }
  .guiderail > .guideportrait { flex-basis: 15rem; }
  .tour-promises { gap: 1.2rem; }
}
.communityline { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 2rem; }
/* 오른쪽 로그인 단추. 목업처럼 눈에 띄게 두되 색은 우리 팔레트를 쓴다. */
.loginbtn { font-weight: 700; }

/* 투어 코스 타임연표. 번호는 CSS 가 붙인다(마크업에 숫자를 박으면 순서를 바꿀 때 어긋난다). */
.coursestops { list-style: none; margin: 0.6rem 0 0; padding: 0; counter-reset: stop; }
.coursestops li {
  position: relative; counter-increment: stop;
  display: flex; flex-direction: column; gap: 0.1rem;
  padding: 0.5rem 0 0.5rem 2.1rem;
}
.coursestops li::before {
  content: counter(stop);
  position: absolute; left: 0; top: 0.55rem;
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--card); border: 1px solid var(--glaze);
  font-size: 0.75rem; color: var(--muted);
}
/* 첫 칸과 마지막 칸 사이를 선으로 잇는다. 마지막 칸 아래로는 선을 끊는다. */
.coursestops li:not(:last-child)::after {
  content: ""; position: absolute; left: 0.65rem; top: 2.1rem; bottom: -0.1rem;
  border-left: 1px solid var(--glaze);
}
.coursestops-place { font-weight: 600; }

/* 하단 고정 예약 바. sticky 라 스크립트가 없다.
   본문 끝에 여백을 줘서 마지막 줄을 가리지 않게 한다. */
.bookbar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: 1.2rem calc(-1 * var(--space)) 0;
  padding: 0.7rem var(--space);
  background: var(--paper); border-top: 1px solid var(--glaze);
}
.bookbar-price { display: flex; flex-direction: column; line-height: 1.25; }
.bookbar-price strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.bookbar .cta { margin: 0; white-space: nowrap; }

/* 월 달력. table 을 쓴다 — 요일과 날짜의 관계가 마크업에 있어야 읽어주는 기기에서도 통한다. */
.monthnav {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0 0 0.5rem; font-size: 0.9rem;
}
.monthnav strong { text-align: center; }
.monthnav-off { color: var(--muted); opacity: 0.5; }
.datepick-current {
  display: flex; gap: 0.35rem; align-items: baseline; justify-content: center;
  margin: 0.55rem 0 0; min-height: 1.2rem; font-size: 0.9rem;
  text-align: center;
}
.datepick-current output { font-weight: 600; font-variant-numeric: tabular-nums; }
.cal {
  display: table; overflow: visible;
  width: 100%; border-collapse: collapse; table-layout: fixed;
}
.cal th {
  padding: 0.2rem 0; font-size: 0.78rem; font-weight: 600; color: var(--muted);
}
.cal td { padding: 1px; vertical-align: top; }
.cal .datecell {
  justify-content: center; text-align: center;
  width: 100%; min-height: 3rem; gap: 0.08rem; padding: 0.3rem 0.05rem;
  font-size: 0.72rem; line-height: 1.2;
}
.cal .datecell-day { font-size: 0.9rem; font-weight: 600; }
.cal .datecell-price {
  font-size: 0.66rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal .datecell-day,
.cal .datecell-price { pointer-events: none; }
/* 달력 안에서는 라디오 점을 숨기고 칸 자체가 눌린 것으로 보이게 한다 —
   칸이 작아서 점과 숫자를 같이 넣으면 둘 다 못 읽는다.
   :has() 를 모르는 브라우저에서는 점이 보이므로 고를 수는 있다. */
.cal:has(input) .datecell input { position: absolute; opacity: 0; pointer-events: none; }
.cal .datecell { position: relative; cursor: pointer; }
/* 고른 날은 갈래색으로 채운다. **글씨와 바탕을 같은 규칙에서** 정한다 —
   떼어놓으면 한쪽만 고치게 되고, 그게 예전 사고였다. 자식은 물려받는다. */
.cal .datecell:has(input:checked) {
  background: var(--tone); border-color: var(--tone); color: #fff;
}
.cal .datecell:has(input:checked) .datecell-day,
.cal .datecell:has(input:checked) .datecell-price { color: inherit; }
.cal .datecell:has(input:focus-visible) {
  outline: 2px solid var(--plaque);
  outline-offset: 2px;
}

@media (max-width: 420px) {
  .cal th { font-size: 0.68rem; }
  .cal .datecell { min-height: 2.7rem; font-size: 0.625rem; }
  .cal .datecell-day { font-size: 0.82rem; }
  .cal .datecell-price { font-size: 0.625rem; }
}

/* Dark counterparts live in theme-dark.css, loaded after this stylesheet. */
.footer-contact { font-size: 0.875rem; }
.footer-contact a { overflow-wrap: anywhere; }
.site-footer .footer-brand { margin: 0 0 0.65rem; color: var(--ink); font-size: 1rem; font-weight: 600; }
.site-footer .footer-biz { margin: 0; font-size: 0.875rem; line-height: 1.8; }
.footer-biz > div { display: flex; align-items: baseline; gap: 0.35rem; margin: 0.15rem 0; }
.footer-biz dt { flex: 0 0 auto; }
.footer-biz dt::after { content: " :"; }
.footer-biz dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.footer-company dd { color: var(--ink); }
.site-footer .footer-contact { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.35rem; line-height: 1.8; }
.footer-legal { display: flex; flex-wrap: wrap; margin: 0.4rem 0 1rem; font-size: 0.875rem; }
.footer-legal a + a { border-left: 1px solid var(--muted); margin-left: 0.65rem; padding-left: 0.65rem; }
.footer-legal a, .footer-contact a { color: inherit; text-decoration: none; }
.footer-legal a:hover, .footer-contact a:hover { color: var(--plaque); text-decoration: underline; }
.site-footer .footer-broker, .site-footer .footer-community { max-width: 76ch; margin: 0.75rem 0; line-height: 1.7; }
.footer-bottom { display: flex; flex-direction: column; align-items: center; gap: 2.5rem; padding: 2.5rem 0 1.5rem; }
.footer-social { display: inline-flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; color: inherit; border-radius: 4px; }
a.footer-social:hover { color: var(--plaque); background: var(--aqua-soft); }
.footer-social-pending { opacity: 0.55; }
.site-footer .footer-copyright { margin: 0; text-align: center; font-size: 0.875rem; line-height: 1.6; }
.theme-setting { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; cursor: pointer; }
.theme-setting[hidden] { display: none; }
.theme-setting input { width: auto; accent-color: var(--plaque); }
.cta {
  background: var(--aqua); color: var(--accent-ink); border-color: var(--aqua);
}

/* mrt-booking */
.booking-flow { margin: 0; padding-left: 1.25rem; font-size: 0.88rem; line-height: 1.45; }
.booking-flow li + li { margin-top: 0.2rem; }
.booking-day { margin: 1rem 0; padding: 0.9rem; border: 1px solid var(--glaze); border-left: 4px solid var(--aqua); border-radius: var(--radius); background: var(--card); }
.booking-day h2 { margin: 0; font-size: 1.1rem; }
.booking-day .bookinfo { margin: 0.6rem 0; }
.booking-day dd { overflow-wrap: anywhere; }
.booking-day p { margin: 0.4rem 0 0; }
.status-hint { display: block; color: var(--muted); font-size: 0.88rem; }

/* mrt-detail */
/* 투어 상세 길찾기: 제목 위 도시·카테고리 링크, 제목 아래 조건 줄·후기 요약, 섹션 바로가기, 공유 버튼. */
.tour-crumbs { margin: 0 0 0.3rem; font-size: 0.9rem; color: var(--muted); }
.tour-crumbs a { color: inherit; }
.tour-facts { margin: 0.2rem 0 0; }
.tour-rating { margin: 0.4rem 0 0; }
.tour-rating a { text-decoration: none; }
.sharebar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.6rem 0; }
.sharebar[hidden] { display: none; }
/* 바로가기 목적지가 화면 맨 위에 딱 붙지 않게 여백을 둔다. */
.tour-detail [id] { scroll-margin-top: 1rem; }
.tour-faq details { border-bottom: 1px solid var(--glaze); padding: 0.55rem 0; }
.tour-faq summary { cursor: pointer; font-weight: 600; }
.tour-faq .bodytext { margin: 0.5rem 0 0; }

/* mrt-seo */
.site-footer .footer-partner { font-size: 0.875rem; line-height: 1.8; }
.footer-partner a { color: inherit; }
.footer-partner a:hover { color: var(--plaque); }

/* mrt-browse */
.category-art-nav .chip-soon { font-size: 0.75rem; color: var(--muted); }
.tourcard-extra { font-size: 0.8rem; color: var(--muted); }
.tour-category-empty { margin: 0 0 1rem; }
.tour-prep { margin: 2rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--glaze); }
.tour-prep h2 { margin: 0 0 0.25rem; font-size: 1.05rem; }