/* 생성물 — tools/build_pages.py 가 만듭니다. 원본은 css/ 의 개별 파일을 고치세요. */

/* ===== tokens.css ===== */
/* ------------------------------------------------------------
   chiango · design tokens, reset, type, primitives
   팔레트: 오프화이트 지면 + 잉크 + 탠저린 단일 액센트 (라이트 기본, 다크 자동)
   모서리 규칙: 인터랙티브 = pill / 컨테이너·이미지 = 20px / 입력 = 14px
   ------------------------------------------------------------ */
:root {
  --bg: #f4f4f1;
  --bg-2: #eaebe6;
  --surface: #ffffff;
  --surface-2: #f8f8f6;
  --ink: #15181a;
  --ink-2: #3c4144;
  --muted: #6b7175;
  --line: rgba(21, 24, 26, 0.1);
  --line-strong: rgba(21, 24, 26, 0.22);
  --accent: #e4572e;
  --accent-hover: #cf4a24;
  --accent-ink: #ffffff;
  --accent-soft: #fbe7df;
  --dark-bg: #131517;
  --dark-surface: #1c1f22;
  --dark-ink: #f1f0eb;
  --dark-muted: #9aa0a5;
  --dark-line: rgba(241, 240, 235, 0.12);
  --shadow-card: 0 1px 2px rgba(21, 24, 26, 0.04), 0 14px 40px -18px rgba(21, 24, 26, 0.28);
  --shadow-float: 0 24px 60px -24px rgba(21, 24, 26, 0.45);

  --font-ko: "Wanted Sans Variable", "Pretendard Variable", "IBM Plex Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-display: "Bricolage Grotesque", "Wanted Sans Variable", "IBM Plex Sans KR", sans-serif;

  --radius-card: 20px;
  --radius-input: 14px;
  --radius-pill: 999px;

  --container: 1280px;
  --gutter: clamp(20px, 3vw, 40px);
  --nav-h: 72px;
  --section-gap: clamp(72px, 9vw, 128px);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.22s;
  --dur: 0.5s;
  --dur-slow: 0.9s;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131517;
    --bg-2: #1a1d20;
    --surface: #1c1f22;
    --surface-2: #22262a;
    --ink: #f1f0eb;
    --ink-2: #cfd1cc;
    --muted: #9aa0a5;
    --line: rgba(241, 240, 235, 0.11);
    --line-strong: rgba(241, 240, 235, 0.26);
    --accent: #ff7a52;
    --accent-hover: #ff8f6e;
    --accent-ink: #1a0d08;
    --accent-soft: #3a2118;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 40px -18px rgba(0, 0, 0, 0.7);
    --shadow-float: 0 24px 60px -24px rgba(0, 0, 0, 0.8);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #131517;
  --bg-2: #1a1d20;
  --surface: #1c1f22;
  --surface-2: #22262a;
  --ink: #f1f0eb;
  --ink-2: #cfd1cc;
  --muted: #9aa0a5;
  --line: rgba(241, 240, 235, 0.11);
  --line-strong: rgba(241, 240, 235, 0.26);
  --accent: #ff7a52;
  --accent-hover: #ff8f6e;
  --accent-ink: #1a0d08;
  --accent-soft: #3a2118;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 40px -18px rgba(0, 0, 0, 0.7);
  --shadow-float: 0 24px 60px -24px rgba(0, 0, 0, 0.8);
  color-scheme: dark;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ko);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: -0.005em;
  font-feature-settings: "ss01", "tnum";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, address { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--accent); color: var(--accent-ink); }

/* ---------- type ---------- */
.h-display {
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.06;
  font-size: clamp(2.35rem, 4.4vw, 3.9rem);
  word-break: keep-all;
  text-wrap: balance;
}
.h-section {
  font-weight: 760;
  letter-spacing: -0.03em;
  line-height: 1.14;
  font-size: clamp(1.7rem, 2.9vw, 2.5rem);
  word-break: keep-all;
  text-wrap: balance;
}
.h-card {
  font-weight: 640;
  letter-spacing: -0.02em;
  line-height: 1.32;
  font-size: 1.06rem;
  word-break: keep-all;
}
.lead {
  color: var(--ink-2);
  font-size: clamp(1.02rem, 1.25vw, 1.15rem);
  line-height: 1.72;
  max-width: 34em;
  word-break: keep-all;
}
.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.small { font-size: 0.875rem; color: var(--muted); }
.num { font-family: var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
/* 워드마크 = seal-o 락업 SVG 한 장. font-size 는 SVG 높이의 기준으로만 쓴다.
   글자는 currentColor(=--ink), 원판은 --accent, 코끼리는 뚫린 구멍이라 배경이 비친다.
   .on-dark 안에서는 --ink·--accent 가 자동으로 바뀌어 그대로 반전된다. */
.wordmark {
  --wm-ar: 3.0358;  /* 락업 가로세로비 = viewBox 1836.64 / 605 */
  display: inline-flex;
  align-items: center;
  font-size: 1.55rem;
  line-height: 1;
  color: var(--ink);
}
/* 🔴 width 를 반드시 명시한다. width:auto 로 두면 Safari/WebKit 이 viewBox 에서
   가로폭을 못 뽑아 0 이 되어 로고가 통째로 사라진다(2026-09-14 실측, Chrome 은 정상). */
.wordmark svg {
  display: block;
  height: 1.2em;
  width: calc(1.2em * var(--wm-ar));
  flex: none;
}

/* ---------- layout ---------- */
.container { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; }
.section { padding-block: var(--section-gap); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head .stack { display: grid; gap: 12px; }
.section-head .lead { margin-top: 4px; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; white-space: nowrap; color: var(--ink);
  transition: gap var(--dur-fast) var(--ease-out), color var(--dur-fast);
}
.link-arrow .ico { width: 18px; height: 18px; }
.link-arrow:hover { gap: 10px; color: var(--accent); }

/* ---------- icons ---------- */
.ico { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico.fill { fill: currentColor; stroke: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding-inline: 22px;
  border-radius: var(--radius-pill);
  font-weight: 650; font-size: 0.98rem; letter-spacing: -0.01em; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast), border-color var(--dur-fast);
  will-change: transform;
}
.btn:active { transform: translateY(1px) scale(0.985); }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--accent) 60%, transparent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ink { background: var(--ink); color: var(--bg); }
.btn-ink:hover { background: var(--ink-2); }
.btn-ghost { border: 1.5px solid var(--line-strong); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); }
.btn-light { background: var(--surface); color: var(--ink); border: 1.5px solid var(--line); }
.btn-light:hover { border-color: var(--line-strong); }
.btn-sm { height: 40px; padding-inline: 16px; font-size: 0.9rem; }
.btn-icon { width: 44px; height: 44px; padding: 0; border-radius: 50%; }
.btn .ico { width: 18px; height: 18px; }

/* 다크 블록 위에서는 액센트 대비를 보장 */
.on-dark { --ink: var(--dark-ink); --ink-2: #d8d9d4; --muted: var(--dark-muted); --line: var(--dark-line); --line-strong: rgba(241, 240, 235, 0.3); --surface: var(--dark-surface); --surface-2: #24282c; --bg: var(--dark-bg); --bg-2: #1a1d20; --accent: #ff7a52; --accent-hover: #ff8f6e; --accent-ink: #1a0d08; --accent-soft: #3a2118; color: var(--ink); background: var(--bg); }

/* ---------- reveal on scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }
.js .reveal-scale { opacity: 0; transform: scale(0.96) translateY(14px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: var(--d, 0s); }
.reveal-scale.in { opacity: 1; transform: none; }

/* ---------- media ---------- */
.frame { position: relative; overflow: hidden; border-radius: var(--radius-card); background: var(--bg-2); isolation: isolate; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(21, 24, 26, 0.08); pointer-events: none; }

/* ---------- utilities ---------- */
.br-m { display: none; }
@media (max-width: 600px) { .br-m { display: inline; } .h-display { font-size: clamp(2.05rem, 9.6vw, 2.6rem); } }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.chip { display: inline-flex; align-items: center; height: 30px; padding-inline: 12px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--line); font-size: 0.82rem; font-weight: 560; color: var(--ink-2); white-space: nowrap; }
.chip.accent { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px var(--surface); }
.avatar.sm { width: 28px; height: 28px; }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-scale { opacity: 1; transform: none; transition: none; }
  .btn, .link-arrow { transition: none; }
}

/* ===== layout.css ===== */
/* ------------------------------------------------------------
   chiango · nav, hero, trust strip, footer
   ------------------------------------------------------------ */

/* ---------- nav ---------- */
.nav-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }
.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.nav.scrolled { border-bottom-color: var(--line); background: color-mix(in srgb, var(--bg) 86%, transparent); }
.nav-inner { height: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; }
.nav-links { display: flex; justify-content: center; align-items: center; gap: 4px; height: 100%; }
.nav-links > a, .nav-item > a {
  position: relative; display: inline-block; padding: 8px 14px; border-radius: var(--radius-pill);
  font-weight: 560; font-size: 0.95rem; color: var(--ink-2);
  transition: color var(--dur-fast), background var(--dur-fast);
}
.nav-links > a:hover, .nav-item > a:hover, .nav-item.open > a { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }

/* ---------- 메뉴 패널 (마우스 올림 · 포커스 · 터치 첫 탭) ----------
   .has-mega 는 헤더 전체 폭 카드(.nav 기준 절대 위치), .has-drop 은 링크 아래 작은 카드.
   .nav-item 이 헤더 높이를 꽉 채우므로 링크→패널 사이에 빈틈이 없고, 패널 위 ::before 가 여백까지 덮는다. */
.nav-item { display: flex; align-items: center; height: 100%; }
.nav-item.has-drop { position: relative; }
.nav-panel {
  position: absolute; top: 100%; z-index: 5;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s var(--dur-fast);
}
.nav-panel::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 12px; }
.nav-item.open .nav-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav-mega { left: 0; right: 0; padding: 4px var(--gutter) 0; }
.nav-drop { left: 0; padding-top: 4px; min-width: 232px; }
.nav-panel-card {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: var(--shadow-float);
}
.nav-mega .nav-panel-card { max-width: var(--container); margin: 0 auto; padding: clamp(22px, 2.6vw, 32px) clamp(24px, 3vw, 40px) clamp(26px, 3vw, 36px); }
.nav-drop .nav-panel-card { padding: 12px 8px; }
.nav-panel-head { display: grid; gap: 4px; margin-bottom: clamp(18px, 2.4vw, 26px); }
.nav-panel-title { font-family: var(--font-display); font-size: clamp(1.3rem, 1.8vw, 1.55rem); font-weight: 760; letter-spacing: -0.02em; line-height: 1.15; }
.nav-panel-head .small { color: var(--muted); }
.nav-cols { display: flex; flex-wrap: wrap; gap: 24px clamp(40px, 6vw, 96px); }
.nav-col { flex: 0 1 auto; min-width: 168px; display: grid; align-content: start; gap: 2px; }
.nav-col-h { font-weight: 720; font-size: 1rem; letter-spacing: -0.01em; margin-bottom: 8px; }
.nav-panel ul { display: grid; gap: 0; }
.nav-panel li a {
  display: block; padding: 7px 10px; margin-inline: -10px; border-radius: 10px;
  font-size: 0.95rem; color: var(--ink-2); line-height: 1.35;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.nav-panel li a:hover, .nav-panel li a:focus-visible { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.nav-sub { display: block; margin-top: 1px; font-size: 0.76rem; color: var(--muted); }
.nav-all {
  display: inline-flex; align-items: center; gap: 4px; justify-self: start;
  margin-top: 10px; padding: 6px 10px; margin-inline: -10px; border-radius: 10px;
  font-size: 0.92rem; font-weight: 640; color: var(--accent);
  transition: gap var(--dur-fast), background var(--dur-fast);
}
.nav-all .ico { width: 16px; height: 16px; }
.nav-all:hover { gap: 8px; background: var(--accent-soft); }
.nav-drop ul { padding-inline: 0; }
.nav-drop li a { margin-inline: 0; padding: 9px 12px; white-space: nowrap; }
.nav-drop .nav-all { margin: 6px 0 0; padding: 8px 12px; }
/* 열림 순서: 컬럼이 조금씩 따라 올라온다 */
.nav-col { opacity: 0; transform: translateY(6px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.nav-item.open .nav-col { opacity: 1; transform: none; }
.nav-item.open .nav-col:nth-child(2) { transition-delay: 0.05s; }
.nav-item.open .nav-col:nth-child(3) { transition-delay: 0.1s; }
.nav-item.open .nav-col:nth-child(4) { transition-delay: 0.15s; }
@media (prefers-reduced-motion: reduce) {
  .nav-panel, .nav-col, .nav-all { transition: none; }
  .nav-item.open .nav-col { transition-delay: 0s; }
}
.nav-actions { display: flex; align-items: center; gap: 6px; }
.nav-actions .btn-text { padding: 8px 14px; font-weight: 560; font-size: 0.95rem; color: var(--ink-2); border-radius: var(--radius-pill); }
.nav-actions .btn-text:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.nav-actions .btn-primary { height: 42px; padding-inline: 18px; font-size: 0.93rem; margin-left: 6px; }
.nav-burger { display: none; }

/* 전체 메뉴(앳홈트립식): 계정 줄 → 안내 띠 → 바로가기 → 왼쪽 분류 탭 + 오른쪽 목록 */
.menu {
  position: fixed; inset: 0; z-index: 60; background: var(--bg);
  display: grid; grid-template-rows: 56px 1fr auto;
  transform: translateX(100%); visibility: hidden;
  transition: transform var(--dur) var(--ease-out), visibility 0s var(--dur);
}
.menu.open { transform: none; visibility: visible; transition-delay: 0s; }
.menu [hidden] { display: none !important; }
.menu-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 6px 0 16px; }
.menu-top .wordmark { font-size: 1.7rem; }   /* svg 크기는 font-size 로(가로폭 명시 규칙 · tokens.css) */
.menu-scroll { overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; min-height: 0; }
.menu-me { display: flex; align-items: center; gap: 12px; padding: 8px 16px 14px; }
.menu-av { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-2); color: var(--muted); }
.menu-me b { display: flex; align-items: center; gap: 2px; font-size: 1.06rem; font-weight: 700; }
.menu-me b .ico { width: 18px; height: 18px; color: var(--muted); }
.menu-me small { display: block; color: var(--muted); font-size: .8rem; margin-top: 2px; }
.menu-promo { display: flex; align-items: center; gap: 10px; margin: 0 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: .9rem; font-weight: 600; }
.menu-promo > span { flex: 1; }
.menu-promo b { color: var(--accent); }
.menu-promo .ico { width: 20px; height: 20px; }
.menu-promo > .ico:last-child { width: 16px; color: var(--muted); }
.menu-quick { display: flex; gap: 6px; padding: 18px 12px 16px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.menu-quick a { flex: 1 0 64px; display: grid; justify-items: center; gap: 6px; font-size: .78rem; font-weight: 500; white-space: nowrap; }
.menu-quick img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); }
.menu-body { flex: 1; display: grid; grid-template-columns: 118px 1fr; min-height: 0; }
.menu-tabs { display: flex; flex-direction: column; gap: 4px; padding: 12px 10px; background: var(--bg); }
.menu-tabs button { text-align: left; padding: 12px 10px; border-radius: 6px; font-size: .9rem; font-weight: 600; white-space: nowrap; letter-spacing: -0.02em; color: var(--ink-2); background: none; border: 0; cursor: pointer; }
.menu-tabs button[aria-selected="true"] { background: var(--ink); color: var(--bg); }
.menu-panel { background: var(--surface-2, var(--bg-2)); padding: 4px 16px 24px; }
.menu-panel ul { list-style: none; margin: 0; padding: 0; }
.menu-panel li + li { border-top: 1px solid var(--line); }
.menu-panel a { display: flex; align-items: center; gap: 14px; padding: 13px 2px; font-size: .95rem; font-weight: 500; }
.menu-panel a .ico { flex: none; width: 20px; height: 20px; color: var(--ink-2); }
.menu-panel a small { display: block; color: var(--muted); font-size: .76rem; font-weight: 400; margin-top: 1px; }
.menu-dot { flex: none; width: 20px; display: grid; place-items: center; }
.menu-dot::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--line-strong, var(--muted)); }
.menu-foot { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg); font-size: .88rem; }
.menu-foot a { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.menu-foot a .ico { width: 16px; height: 16px; }
.menu-foot button { background: none; border: 0; color: var(--muted); font-size: .88rem; cursor: pointer; }

/* ---------- hero ---------- */
.hero { position: relative; padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(40px, 6vw, 80px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-copy { display: grid; gap: clamp(20px, 2.6vw, 30px); }
.hero-copy .lead { max-width: 30em; }
.h-display .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.js .h-display .line > span { display: inline-block; transform: translateY(110%); transition: transform 1s var(--ease-out); }
.hero.ready .h-display .line > span { transform: none; }
.hero.ready .h-display .line:nth-child(2) > span { transition-delay: 0.1s; }
.js .hero .lead, .js .hero .search, .js .hero-visual { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.hero.ready .lead { opacity: 1; transform: none; transition-delay: 0.28s; }
.hero.ready .search { opacity: 1; transform: none; transition-delay: 0.4s; }
.hero.ready .hero-visual { opacity: 1; transform: none; transition-delay: 0.2s; }

/* 회전 단어 */
.rotator { display: inline-grid; grid-template-areas: "stack"; justify-items: start; vertical-align: baseline; color: var(--accent); white-space: nowrap; overflow: hidden; transition: width 0.55s var(--ease-out); }
.rotator > span { grid-area: stack; display: inline-block; justify-self: start; transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out); }
.rotator > span[aria-hidden="true"] { opacity: 0; transform: translateY(0.5em); pointer-events: none; }
.rotator > span.leaving { opacity: 0; transform: translateY(-0.5em); }

/* 검색 바 */
.search {
  display: grid; grid-template-columns: 1.3fr 1fr 0.9fr auto; align-items: stretch;
  background: var(--surface); border: 1px solid var(--line); border-radius: 28px;
  box-shadow: var(--shadow-card); padding: 8px;
  gap: 4px;
}
.search-field { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; padding: 8px 14px; border-radius: var(--radius-card); position: relative; transition: background var(--dur-fast); }
.search-field:hover, .search-field:focus-within { background: var(--surface-2); }
.search-field + .search-field::before { content: ""; position: absolute; left: -2px; top: 14px; bottom: 14px; width: 1px; background: var(--line); }
.search-field .ico { color: var(--muted); }
.search-field label { display: block; font-size: 0.72rem; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; }
.search-field select {
  width: 100%; border: 0; background: transparent; padding: 0; font-weight: 600; font-size: 0.98rem; color: var(--ink);
  appearance: none; -webkit-appearance: none; cursor: pointer;
}
.search-field select:focus { outline: none; }
.search .btn-primary { height: auto; min-height: 56px; padding-inline: 26px; border-radius: 22px; font-size: 1rem; }

/* 히어로 비주얼 */
.hero-visual { position: relative; }
.hero-visual .frame { aspect-ratio: 7 / 8; border-radius: 28px; }
.hero-visual .frame img { transform: scale(1.02); }
@media (prefers-reduced-motion: no-preference) {
  .hero.ready .hero-visual .frame img { animation: kenburns 22s var(--ease-inout) forwards; }
}
@keyframes kenburns { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.1) translate(-1.5%, 1.5%); } }

.float-card {
  position: absolute; left: clamp(-28px, -3vw, -12px); bottom: clamp(20px, 4vw, 44px);
  width: min(320px, 82%);
  background: var(--surface); border-radius: var(--radius-card); padding: 14px 16px 14px 14px;
  box-shadow: var(--shadow-float); border: 1px solid var(--line);
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
}
.float-card .who { font-size: 0.82rem; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.float-card .who strong { color: var(--ink); font-weight: 640; }
.float-card p { font-size: 0.92rem; line-height: 1.5; margin-top: 3px; word-break: keep-all; }
.float-pill {
  position: absolute; right: clamp(-16px, -1.5vw, -8px); top: clamp(22px, 3vw, 36px);
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px;
  background: var(--ink); color: var(--bg); border-radius: var(--radius-pill); font-size: 0.84rem; font-weight: 600;
  box-shadow: var(--shadow-float);
}
.float-pill .live { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .float-card { animation: drift 7s ease-in-out infinite; }
  .float-pill { animation: drift 8.5s ease-in-out infinite reverse; }
  .float-pill .live { animation: pulse 2.2s ease-out infinite; }
}
@keyframes drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }

/* ---------- trust strip ---------- */
.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-item { padding: clamp(22px, 3vw, 34px) clamp(16px, 2.4vw, 32px); display: grid; gap: 4px; position: relative; }
.trust-item + .trust-item::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--line); }
.trust-item .num { font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-weight: 700; line-height: 1.05; color: var(--ink); }
.trust-item .num small { font-family: var(--font-ko); font-size: 0.55em; font-weight: 600; margin-left: 2px; letter-spacing: 0; }
.trust-item .small { color: var(--muted); }

/* ---------- footer block (dark) ---------- */
.foot { padding-top: clamp(64px, 8vw, 112px); }
.cta-band { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding-bottom: clamp(56px, 7vw, 96px); border-bottom: 1px solid var(--line); }
.cta-band .h-section { color: var(--ink); }
.cta-band .lead { color: var(--ink-2); }
.subscribe { display: grid; gap: 10px; }
/* 🔴 minmax(0,1fr) 이어야 한다. 그냥 1fr 은 minmax(auto,1fr) 이라 WebKit 이 input 의
   min-content(≈362px) 아래로 안 줄여 모바일에서 가로 넘침이 난다(2026-09-15 실측). */
.subscribe .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.subscribe label { font-size: 0.85rem; font-weight: 600; color: var(--ink-2); }
.subscribe input {
  min-width: 0;
  height: 52px; padding: 0 18px; border-radius: var(--radius-pill); border: 1.5px solid var(--line-strong);
  background: var(--surface); color: var(--ink); font-size: 0.98rem;
}
.subscribe input::placeholder { color: var(--muted); }
.subscribe input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.subscribe .help { font-size: 0.82rem; color: var(--muted); }
.subscribe .msg { font-size: 0.86rem; color: var(--accent); min-height: 1.3em; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; padding-block: clamp(40px, 5vw, 64px); }
.foot-brand { display: grid; gap: 16px; align-content: start; }
.foot-brand p { color: var(--muted); font-size: 0.92rem; max-width: 26em; word-break: keep-all; }
.foot-col h4 { font-size: 0.85rem; font-weight: 700; margin-bottom: 14px; color: var(--ink); }
.foot-col li { margin-bottom: 9px; }
.foot-col a { font-size: 0.92rem; color: var(--muted); transition: color var(--dur-fast); word-break: keep-all; }
.foot-col a:hover { color: var(--ink); }
.foot-social { display: flex; gap: 8px; }
.foot-social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-2); transition: border-color var(--dur-fast), color var(--dur-fast); }
.foot-social a:hover { border-color: var(--ink); color: var(--ink); }
.foot-legal { border-top: 1px solid var(--line); padding-block: 26px 40px; display: grid; gap: 12px; font-size: 0.8rem; color: var(--muted); line-height: 1.7; }
.foot-legal .links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot-legal .links a { color: var(--ink-2); }
.foot-legal .links a:hover { color: var(--ink); }
.foot-legal address { font-style: normal; word-break: keep-all; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .nav-links > a, .nav-item > a { padding-inline: 10px; font-size: 0.9rem; }
  .foot-grid { grid-template-columns: 1fr 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .nav-inner { grid-template-columns: auto 1fr auto; }
  .nav-links, .nav-actions .btn-text, .nav-actions .btn-icon { display: none; }
  /* 메뉴 링크가 숨으면 가운데 칸이 비어 버튼이 가운데로 떠 있던 문제 → 오른쪽 끝에 붙인다 */
  .nav-actions { grid-column: 3; justify-self: end; }
  .nav-burger { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
  .hero-visual .frame { aspect-ratio: 4 / 3; }
  .float-card { left: 12px; bottom: 12px; }
  .float-pill { right: 12px; top: 12px; }
  .search { grid-template-columns: 1fr 1fr; }
  .search-field + .search-field::before { display: none; }
  .search .btn-primary { grid-column: 1 / -1; min-height: 52px; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .trust-item:nth-child(3)::before { display: none; }
  .trust-item:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .cta-band { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .search { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-legal .links { gap: 6px 14px; }
}

/* 언어 버튼(한국어 ↔ English) */
.nav-lang { display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: .85rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.nav-lang:hover { border-color: var(--ink-2); color: var(--ink); }
.nav-lang .ico { width: 16px; height: 16px; }
.menu-foot .nav-lang { text-decoration: none; }
.nav-cur { border: 1px solid var(--line); background: none; cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--ink-2); }
/* 모바일 헤더 = 로고 + 메뉴 버튼만. 언어·통화·로그인은 전체 메뉴 안(맨 위 로그인 줄 · 아래 언어/통화)으로.
   10/29: 언어·통화 버튼이 늘며 가입하기가 메뉴 버튼을 덮어 메뉴가 안 열리던 문제 */
@media (max-width: 900px) {
  .nav-actions .nav-lang, .nav-actions .nav-auth, .nav-actions .btn-primary { display: none; }
  .nav .wordmark { font-size: 2rem; }
}
/* 헤더 언어·통화 버튼 하나 + 작은 목록 (10/30) · 메뉴 글씨는 한 줄 고정 */
.nav-links > a, .nav-item > a { white-space: nowrap; }
.nav-actions > *, .nav-actions .btn-text, .nav-actions .btn { white-space: nowrap; flex: none; }
@media (max-width: 1280px) {
  .nav-inner { gap: 16px; }
  .nav-links { gap: 0; }
  .nav-links > a, .nav-item > a { padding-inline: 10px; font-size: 0.92rem; }
  .nav-actions .btn-text { padding-inline: 10px; }
}
@media (max-width: 1080px) {
  .nav-links > a, .nav-item > a { padding-inline: 7px; font-size: 0.88rem; }
  .nav-actions .btn-icon { display: none; }
  .nav-actions .btn-primary { padding-inline: 14px; margin-left: 2px; }
}
.nav-actions [data-user-name] { display: inline-block; max-width: 7em; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
@media (max-width: 1440px) { html[lang="en"] .nav-links > a, html[lang="en"] .nav-item > a { padding-inline: 8px; font-size: 0.9rem; } }
@media (max-width: 1180px) {
  html[lang="en"] .nav-links > a, html[lang="en"] .nav-item > a { padding-inline: 6px; font-size: 0.84rem; }
  html[lang="en"] .nav-actions .btn-icon { display: none; }
}
@media (max-width: 1024px) { .nav-actions .btn-primary { display: none; } }
/* 영문 메뉴 글씨가 길어 1000px 아래는 한국어 모바일과 같이 로고 + 메뉴 버튼만 */
@media (max-width: 1000px) {
  html[lang="en"] .nav-links, html[lang="en"] .nav-actions > :not(.nav-burger) { display: none; }
  html[lang="en"] .nav-actions { grid-column: 3; justify-self: end; }
  html[lang="en"] .nav-burger { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
}
.nav-locale { position: relative; }
.nav-locale .nav-lang { background: none; cursor: pointer; font: inherit; font-size: .85rem; font-weight: 600; }
.nav-locale-sep { color: var(--ink-3, var(--ink-2)); }
.nav-locale-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 168px; padding: 8px; display: grid; gap: 2px; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgb(0 0 0 / .12); }
.nav-locale-pop[hidden] { display: none; }
.nav-locale-h { margin: 6px 10px 2px; font-size: .75rem; font-weight: 600; color: var(--ink-2); }
.nav-locale-h:first-child { margin-top: 2px; }
.nav-locale-pop a, .nav-locale-pop button { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: .9rem; color: var(--ink); cursor: pointer; text-decoration: none; }
.nav-locale-pop a:hover, .nav-locale-pop button:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.nav-locale-pop [aria-current="true"] { font-weight: 700; color: var(--accent, var(--ink)); }
.nav-locale-pop [aria-current="true"]::after { content: " ✓"; }
@media (max-width: 900px) { .nav-locale { display: none; } }
.menu-foot { gap: 8px; flex-wrap: wrap; }
.menu-foot .nav-lang { height: 34px; }
.menu-foot .nav-cur { border: 1px solid var(--line); padding: 0 12px; color: var(--ink-2); }
.menu-panel .menu-av-img { flex: none; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; margin: -4px; }

/* ===== sections.css ===== */
/* ------------------------------------------------------------
   chiango · page sections
   ------------------------------------------------------------ */

/* ---------- 홈 카테고리 진입 (종류별 타일) ---------- */
.home-cats { padding-top: clamp(4px, 1vw, 16px); padding-bottom: clamp(40px, 5.5vw, 72px); }
.home-cats-head { display: grid; gap: 10px; margin-bottom: clamp(20px, 2.6vw, 30px); }
.home-cats-head .lead { max-width: 46em; }
.home-cats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); }

.home-cat {
  position: relative; display: flex; flex-direction: column; gap: 5px;
  padding: clamp(18px, 2vw, 24px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); color: var(--ink);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.home-cat:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: var(--shadow-float); }
.home-cat .tile-ico {
  width: 46px; height: 46px; flex: none; align-self: start; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); margin-bottom: 12px;
  transition: transform var(--dur-fast) var(--ease-out);
}
.home-cat:hover .tile-ico { transform: scale(1.06); }
.home-cat .tile-ico .ico { width: 24px; height: 24px; }
.home-cat .name { font-size: 1.12rem; font-weight: 720; letter-spacing: -0.025em; }
.home-cat .desc { font-size: 0.86rem; line-height: 1.5; color: var(--muted); word-break: keep-all; }
.home-cat .count { margin-top: auto; padding-top: 10px; min-height: calc(1.3em + 10px); font-size: 0.82rem; font-weight: 660; color: var(--accent); }
.home-cat .count.is-soon { color: var(--muted); font-weight: 500; opacity: 0.78; }
.home-cat .go {
  position: absolute; top: clamp(16px, 1.8vw, 22px); right: clamp(16px, 1.8vw, 22px);
  width: 18px; height: 18px; color: var(--muted); opacity: 0.55;
  transition: opacity var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.home-cat:hover .go { opacity: 1; color: var(--accent); transform: translate(2px, -2px); }

/* ---------- 추천 상품 테마 탭 줄 ---------- */
#deals .section-head { margin-bottom: clamp(16px, 2vw, 24px); }
.deal-tabs-row { margin-bottom: clamp(22px, 2.8vw, 34px); }

/* ---------- 추천 상품 (deals) ---------- */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; position: relative; }
.tab {
  height: 38px; padding-inline: 14px; border-radius: var(--radius-pill);
  font-size: 0.9rem; font-weight: 600; color: var(--muted);
  transition: color var(--dur-fast), background var(--dur-fast);
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--accent-ink); background: var(--ink); }
.on-dark .tab[aria-selected="true"], :root[data-theme="dark"] .tab[aria-selected="true"] { color: var(--bg); }
.deal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px) clamp(14px, 1.6vw, 22px); }
.deal { display: grid; gap: 12px; opacity: 1; transform: none; transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.deal.hide { display: none; }
.deal.enter { opacity: 0; transform: translateY(12px); }
.deal .frame { aspect-ratio: 4 / 3; }
.deal .frame img { transition: transform 0.9s var(--ease-out); }
.deal:hover .frame img { transform: scale(1.045); }
.deal .wish {
  position: absolute; top: 12px; right: 12px; z-index: 2; width: 38px; height: 38px; border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: grid; place-items: center; color: var(--ink); transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast);
}
.deal .wish:hover { transform: scale(1.08); }
.deal .wish.on { color: var(--accent); }
.deal .wish.on .ico { fill: currentColor; }
.deal-body { display: grid; gap: 5px; }
.deal-body .place { font-size: 0.8rem; font-weight: 600; color: var(--accent); }
.deal-body .meta { font-size: 0.85rem; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.deal-body .meta .ico { width: 14px; height: 14px; color: var(--accent); }
.deal-body .price { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.deal-body .price .num { font-size: 1.15rem; font-weight: 700; }
.deal-body .price .num small { font-family: var(--font-ko); font-size: 0.78em; font-weight: 600; }
.deal-body .price s { color: var(--muted); font-size: 0.85rem; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.deal-body .price .off { font-size: 0.8rem; font-weight: 700; color: var(--accent); }
.deal-empty { grid-column: 1 / -1; padding: 56px 24px; text-align: center; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: var(--radius-card); display: none; }
.deal-empty.show { display: block; }

/* ---------- 여행자의 순간 (masonry + 스크롤 패럴랙스) ---------- */
.moments { position: relative; }
.moments-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); align-items: start; }
.moments-col { display: grid; gap: clamp(14px, 1.8vw, 24px); }
.moments-col:nth-child(2) { padding-top: clamp(40px, 6vw, 96px); }
.moments-col:nth-child(3) { padding-top: clamp(16px, 3vw, 48px); }
.moment { display: grid; gap: 8px; }
.moment .frame img { transition: transform 0.9s var(--ease-out); }
.moment:hover .frame img { transform: scale(1.03); }
.moment .cap { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--muted); }
.moment .cap strong { color: var(--ink); font-weight: 640; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 901px) {
    .moments-col:nth-child(1) { animation: drift-up linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; --drift: -40px; }
    .moments-col:nth-child(2) { animation: drift-up linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; --drift: -110px; }
    .moments-col:nth-child(3) { animation: drift-up linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; --drift: -70px; }
  }
}
@keyframes drift-up { from { transform: translateY(calc(var(--drift) * -1)); } to { transform: translateY(var(--drift)); } }

/* ---------- 커뮤니티 ---------- */
.marquee { overflow: hidden; border-block: 1px solid var(--line); background: var(--surface); }
.marquee-track { display: flex; width: max-content; gap: 0; }
.marquee-track > span { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; font-size: 0.9rem; font-weight: 560; color: var(--ink-2); white-space: nowrap; border-right: 1px solid var(--line); }
.marquee-track > span .live { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.marquee-track > span b { color: var(--ink); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: marquee 48s linear infinite; }
  .marquee:hover .marquee-track { animation-play-state: paused; }
}
@keyframes marquee { to { transform: translateX(-50%); } }

.community-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.community-copy { position: sticky; top: calc(var(--nav-h) + 32px); display: grid; gap: 22px; }
.community-copy .facts { display: grid; gap: 10px; margin-top: 8px; }
.community-copy .facts li { display: flex; gap: 12px; align-items: start; color: var(--ink-2); word-break: keep-all; }
.community-copy .facts .ico { color: var(--accent); margin-top: 3px; }
.board { display: grid; gap: 18px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: clamp(18px, 2.2vw, 26px); box-shadow: var(--shadow-card); }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.panel-head h3 { font-size: 1.02rem; font-weight: 700; }
.panel-head a { font-size: 0.86rem; color: var(--muted); }
.panel-head a:hover { color: var(--ink); }
.post { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding-block: 14px; border-top: 1px solid var(--line); }
.post:first-of-type { border-top: 0; padding-top: 0; }
.post:last-of-type { padding-bottom: 0; }
.post-body { display: grid; gap: 4px; min-width: 0; }
.post-body .title { font-weight: 640; letter-spacing: -0.015em; word-break: keep-all; line-height: 1.4; }
.post-body .meta { font-size: 0.83rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 8px; }
.post-body .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.post-body .tags .chip { height: 24px; padding-inline: 9px; font-size: 0.74rem; }
.post .btn-sm { height: 36px; padding-inline: 14px; font-size: 0.85rem; }
.qa { display: grid; gap: 0; }
.qa li { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding-block: 12px; border-top: 1px solid var(--line); }
.qa li:first-child { border-top: 0; padding-top: 0; }
.qa li:last-child { padding-bottom: 0; }
.qa .q { font-weight: 580; word-break: keep-all; line-height: 1.45; }
.qa .q::before { content: "Q"; font-family: var(--font-display); font-weight: 800; color: var(--accent); margin-right: 8px; }
.qa .a { font-size: 0.83rem; color: var(--muted); white-space: nowrap; }
.meetup { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.meetup .date { font-family: var(--font-display); text-align: center; background: var(--accent-soft); color: var(--accent); border-radius: 16px; padding: 10px 14px; line-height: 1; }
.meetup .date b { display: block; font-size: 1.6rem; font-weight: 800; }
.meetup .date span { display: block; font-size: 0.72rem; font-weight: 700; margin-top: 4px; letter-spacing: 0.08em; }
.meetup .title { font-weight: 640; word-break: keep-all; }
.meetup .meta { font-size: 0.85rem; color: var(--muted); }
.meetup .faces { display: flex; align-items: center; margin-top: 8px; }
.meetup .faces .avatar.sm { margin-left: -8px; }
.meetup .faces .avatar.sm:first-child { margin-left: 0; }
.meetup .faces span { margin-left: 10px; font-size: 0.82rem; color: var(--muted); }

/* ---------- 신뢰 벤토 ---------- */
.bento { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: clamp(14px, 1.8vw, 22px); }
.cell { position: relative; border-radius: var(--radius-card); overflow: hidden; min-height: 260px; display: grid; align-content: end; padding: clamp(22px, 2.6vw, 34px); isolation: isolate; }
.cell.big { grid-row: 1 / 3; min-height: 520px; }
.cell .bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.cell:hover .bg { transform: scale(1.04); }
.cell.photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(12, 14, 16, 0.86) 0%, rgba(12, 14, 16, 0.35) 45%, rgba(12, 14, 16, 0.05) 75%); }
.cell.photo { color: #f1f0eb; }
.cell.photo .lead { color: rgba(241, 240, 235, 0.82); }
.cell.tint { background: var(--accent); color: var(--accent-ink); }
.cell.tint .lead { color: color-mix(in srgb, var(--accent-ink) 88%, transparent); }
.cell.plain { background: var(--surface); border: 1px solid var(--line); }
.cell h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); font-weight: 740; letter-spacing: -0.03em; line-height: 1.22; word-break: keep-all; margin-bottom: 8px; }
.cell .lead { font-size: 0.98rem; max-width: 28em; }
.cell .kicker { font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: auto; padding-bottom: 60px; opacity: 0.9; }
.cell.tint .ico-big { width: 44px; height: 44px; margin-bottom: auto; padding-bottom: 0; stroke-width: 1.5; }

/* ---------- 인기 여행지 (가로 스크롤) ---------- */
.scroller-wrap { position: relative; }
.scroller { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(200px, 19vw, 250px); gap: clamp(14px, 1.6vw, 20px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2)); padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2)); padding-bottom: 8px; scrollbar-width: none; }
.scroller::-webkit-scrollbar { display: none; }
.scroller > * { scroll-snap-align: start; }
.dest { display: grid; gap: 10px; }
.dest .frame { aspect-ratio: 3 / 4; }
.dest .frame img { transition: transform 0.9s var(--ease-out); }
.dest:hover .frame img { transform: scale(1.05); }
.dest .name { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; display: flex; justify-content: space-between; align-items: baseline; }
.dest .name span { font-size: 0.8rem; color: var(--muted); font-weight: 500; }
.scroller-nav { display: flex; gap: 8px; }
.scroller-nav .btn-icon { border: 1px solid var(--line-strong); }
.scroller-nav .btn-icon:disabled { opacity: 0.35; cursor: default; }

/* ---------- 여행자 유형 쇼케이스 ---------- */
.types { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.type-list { display: grid; }
.type-btn { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; text-align: left; padding: 18px 4px; border-top: 1px solid var(--line); font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight: 700; letter-spacing: -0.03em; color: var(--muted); transition: color var(--dur-fast), padding-left var(--dur) var(--ease-out); }
.type-btn:last-child { border-bottom: 1px solid var(--line); }
.type-btn:hover { color: var(--ink); }
.type-btn[aria-selected="true"] { color: var(--ink); padding-left: 12px; }
.type-btn .ico { width: 22px; height: 22px; opacity: 0; transform: translateX(-6px); transition: opacity var(--dur-fast), transform var(--dur) var(--ease-out); color: var(--accent); }
.type-btn[aria-selected="true"] .ico { opacity: 1; transform: none; }
.type-stage { display: grid; gap: 18px; }
.type-stage .frame { aspect-ratio: 16 / 10; display: grid; }
.type-stage .frame img { grid-area: 1 / 1; opacity: 0; transition: opacity 0.7s var(--ease-out), transform 1.2s var(--ease-out); transform: scale(1.04); }
.type-stage .frame img.on { opacity: 1; transform: none; }
.type-desc { display: grid; gap: 8px; }
.type-desc p { color: var(--ink-2); word-break: keep-all; max-width: 40em; }
.type-desc .link-arrow { justify-self: start; }

/* ---------- 여행 스타일 (대형 타이포 리스트 + 호버 프리뷰) ---------- */
.styles { position: relative; }
.style-list { display: grid; position: relative; }
.style-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(16px, 2.4vw, 36px); padding: clamp(14px, 1.8vw, 22px) 0; border-top: 1px solid var(--line); color: var(--ink); transition: color var(--dur-fast); }
.style-row:last-child { border-bottom: 1px solid var(--line); }
.style-row .idx { font-family: var(--font-display); font-size: 0.8rem; font-weight: 600; color: var(--muted); width: 2ch; }
.style-row .name { font-size: clamp(1.6rem, 3.6vw, 3rem); font-weight: 760; letter-spacing: -0.035em; line-height: 1.1; transition: transform var(--dur) var(--ease-out); }
.style-row .desc { font-size: 0.92rem; color: var(--muted); max-width: 22em; text-align: right; word-break: keep-all; }
.style-row .thumb { display: none; }
.style-row:hover { color: var(--accent); }
.style-row:hover .name { transform: translateX(10px); }
.style-preview {
  position: absolute; z-index: 5; width: clamp(180px, 16vw, 240px); aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden;
  pointer-events: none; opacity: 0; transform: scale(0.85) rotate(-4deg); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  box-shadow: var(--shadow-float); top: 0; left: 0; will-change: transform;
}
.style-preview.on { opacity: 1; transform: scale(1) rotate(-3deg); }
.style-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.35s var(--ease-out); }
.style-preview img.on { opacity: 1; }

/* ---------- 현지 매니저 밴드 (풀블리드) ---------- */
.band { position: relative; min-height: clamp(420px, 56vw, 620px); display: grid; align-items: center; isolation: isolate; color: #f1f0eb; overflow: hidden; }
.band img.bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .band img.bg { animation: band-parallax linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; height: 120%; top: -10%; }
  }
}
@keyframes band-parallax { from { transform: translateY(-6%); } to { transform: translateY(6%); } }
.band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(10, 12, 14, 0.82) 0%, rgba(10, 12, 14, 0.55) 45%, rgba(10, 12, 14, 0.18) 100%); }
.band-inner { padding-block: clamp(56px, 8vw, 96px); display: grid; gap: 22px; max-width: 620px; }
.band .eyebrow { color: #ffb197; }
.band .h-section { color: #fff; }
.band .lead { color: rgba(241, 240, 235, 0.86); }
.band .btn-primary { --accent: #e4572e; --accent-hover: #cf4a24; --accent-ink: #fff; justify-self: start; }
.band .note { display: flex; gap: 18px; flex-wrap: wrap; font-size: 0.88rem; color: rgba(241, 240, 235, 0.72); }
.band .note span { display: inline-flex; gap: 6px; align-items: center; }
.band .note .ico { width: 16px; height: 16px; }

/* ---------- 매거진 ---------- */
.mag { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); }
.mag-feature { display: grid; gap: 14px; }
.mag-feature .frame { aspect-ratio: 3 / 2; }
.mag-feature .frame img { transition: transform 1s var(--ease-out); }
.mag-feature:hover .frame img { transform: scale(1.03); }
.mag-feature h3 { font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 740; letter-spacing: -0.03em; line-height: 1.25; word-break: keep-all; }
.mag-feature p { color: var(--ink-2); word-break: keep-all; max-width: 36em; }
.mag-feature .small, .mag-item .small { color: var(--muted); }
.mag-list { display: grid; align-content: start; }
.mag-item { display: grid; grid-template-columns: 132px 1fr; gap: 18px; align-items: center; padding-block: 18px; border-top: 1px solid var(--line); }
.mag-item:first-child { border-top: 0; padding-top: 0; }
.mag-item .frame { aspect-ratio: 4 / 3; border-radius: 14px; }
.mag-item h3 { font-size: 1.08rem; font-weight: 660; letter-spacing: -0.02em; line-height: 1.35; word-break: keep-all; margin-bottom: 4px; }
.mag-item:hover h3 { color: var(--accent); }

/* ---------- 토스트 ---------- */
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 80; transform: translate(-50%, 20px); opacity: 0; background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: var(--radius-pill); font-size: 0.9rem; font-weight: 560; box-shadow: var(--shadow-float); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); pointer-events: none; max-width: calc(100% - 40px); text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .deal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-cat .desc { font-size: 0.83rem; }
  .foot-grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 900px) {
  .section-head { flex-direction: column; align-items: start; }
  .home-cats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .moments-grid { display: block; columns: 2; column-gap: 12px; }
  .moments-col { display: contents; }
  .moment { break-inside: avoid; margin-bottom: 14px; }
  .moment .cap { font-size: 0.78rem; gap: 6px; }
  .moment .cap strong { white-space: nowrap; }
  .moment .cap span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .community-grid { grid-template-columns: 1fr; }
  .community-copy { position: static; }
  .bento { grid-template-columns: 1fr; }
  .cell.big { grid-row: auto; min-height: 380px; }
  .types { grid-template-columns: 1fr; }
  .type-stage { order: -1; }
  .style-row { grid-template-columns: 64px 1fr; gap: 14px; }
  .style-row .idx { display: none; }
  .style-row .desc { grid-column: 2; text-align: left; max-width: none; }
  .style-row .thumb { display: block; grid-row: 1 / 3; width: 64px; height: 80px; border-radius: 12px; object-fit: cover; }
  .style-row:hover .name { transform: none; }
  .style-preview { display: none; }
  .mag { grid-template-columns: 1fr; }
  .mag-item { grid-template-columns: 110px 1fr; }
}
@media (max-width: 600px) {
  .deal-grid { grid-template-columns: 1fr 1fr; gap: 18px 12px; }
  .home-cats-grid { gap: 10px; }
  .home-cat { padding: 16px 14px; gap: 4px; }
  .home-cat .tile-ico { width: 40px; height: 40px; margin-bottom: 10px; }
  .home-cat .tile-ico .ico { width: 21px; height: 21px; }
  .home-cat .name { font-size: 1.02rem; }
  .home-cat .desc { font-size: 0.8rem; line-height: 1.45; }
  .home-cat .count { padding-top: 8px; min-height: calc(1.3em + 8px); font-size: 0.78rem; }
  .home-cat .go { top: 14px; right: 14px; width: 16px; height: 16px; }
  .deal-body .price .num { font-size: 1.05rem; }
  .post { grid-template-columns: auto 1fr; }
  .post .btn-sm { grid-column: 2; justify-self: start; }
  .qa li { grid-template-columns: 1fr; gap: 4px; }
  .scroller { grid-auto-columns: 62vw; }
  .type-btn { font-size: 1.2rem; padding: 14px 4px; }
}

/* ===== pages.css ===== */
/* ------------------------------------------------------------
   chiango · 서브 페이지 공통 (내비 활성, 페이지 헤더, 폼, 문서, 카드 리스트)
   ------------------------------------------------------------ */

/* ---------- 내비 활성 표시 ---------- */
body[data-page="destinations"] .nav-links a[data-nav="destinations"],
body[data-page="destination"] .nav-links a[data-nav="destinations"],
body[data-page="community"] .nav-links a[data-nav="community"],
body[data-page="styles"] .nav-links a[data-nav="styles"],
body[data-page="magazine"] .nav-links a[data-nav="magazine"] { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); }

/* ---------- 페이지 헤더 ---------- */
.page-head { padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(24px, 3vw, 40px); display: grid; gap: 14px; }
.page-head .lead { max-width: 40em; }
.page-head .meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.page-hero { position: relative; min-height: clamp(320px, 42vw, 520px); display: grid; align-items: end; isolation: isolate; color: #f1f0eb; overflow: hidden; border-radius: 0 0 28px 28px; }
.page-hero img.bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(10, 12, 14, 0.82) 0%, rgba(10, 12, 14, 0.3) 55%, rgba(10, 12, 14, 0.05) 100%); }
.page-hero .inner { padding-block: clamp(28px, 4vw, 48px); display: grid; gap: 12px; }
.page-hero .h-display { color: #fff; font-size: clamp(2rem, 4.2vw, 3.4rem); }
.page-hero .lead { color: rgba(241, 240, 235, 0.86); }
.page-hero .crumb { display: flex; gap: 8px; font-size: 0.85rem; color: rgba(241, 240, 235, 0.75); }
.page-hero .crumb a:hover { color: #fff; }

/* ---------- 폼 프리미티브 ---------- */
.field { display: grid; gap: 6px; }
.field label { font-size: 0.86rem; font-weight: 640; color: var(--ink); }
.field .help { font-size: 0.8rem; color: var(--muted); }
.field .err { font-size: 0.8rem; color: var(--accent); min-height: 1.2em; }
.input, .select, .textarea {
  width: 100%; height: 50px; padding: 0 16px; border-radius: var(--radius-input); border: 1.5px solid var(--line-strong);
  background: var(--surface); color: var(--ink); font-size: 0.98rem; transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.textarea { height: auto; min-height: 132px; padding: 14px 16px; resize: vertical; line-height: 1.6; }
.select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
.input::placeholder, .textarea::placeholder { color: var(--muted); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.field.invalid .input, .field.invalid .textarea { border-color: var(--accent); }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 76px; }
.pw-wrap .pw-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); height: 34px; padding-inline: 10px; border-radius: var(--radius-pill); font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.pw-wrap .pw-toggle:hover { color: var(--ink); background: var(--surface-2); }
.check { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: 0.9rem; color: var(--ink-2); cursor: pointer; line-height: 1.5; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); }
.check a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
.form-grid { display: grid; gap: 18px; }
.form-grid .two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-msg { font-size: 0.88rem; color: var(--accent); min-height: 1.3em; }

/* ---------- 인증 (가입·로그인) ---------- */
.auth { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); min-height: calc(100dvh - var(--nav-h)); }
.auth-visual { position: relative; overflow: hidden; isolation: isolate; display: grid; align-content: end; padding: clamp(28px, 4vw, 56px); color: #f1f0eb; }
.auth-visual img.bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.auth-visual::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(10, 12, 14, 0.85) 0%, rgba(10, 12, 14, 0.2) 55%, rgba(10, 12, 14, 0.1) 100%); }
.auth-visual blockquote { margin: 0; display: grid; gap: 14px; max-width: 30em; }
.auth-visual blockquote p { font-size: clamp(1.25rem, 1.9vw, 1.7rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.35; word-break: keep-all; color: #fff; }
.auth-visual blockquote footer { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: rgba(241, 240, 235, 0.8); }
.auth-panel { display: grid; align-content: center; padding: clamp(32px, 5vw, 72px) clamp(20px, 5vw, 80px); }
.auth-card { width: min(100%, 440px); margin-inline: auto; display: grid; gap: 22px; }
.auth-card h1 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); font-weight: 780; letter-spacing: -0.03em; line-height: 1.15; }
.auth-card .sub { color: var(--ink-2); word-break: keep-all; }
.social { display: grid; gap: 10px; }
.btn-kakao { background: #fee500; color: #191919; }
.btn-kakao:hover { background: #f7dd00; }
.btn-google { background: var(--surface); color: var(--ink); border: 1.5px solid var(--line-strong); }
.btn-google:hover { border-color: var(--ink); }
.social .btn { width: 100%; height: 52px; font-size: 0.98rem; }
.social .btn .ico { width: 20px; height: 20px; }
.or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; font-size: 0.82rem; color: var(--muted); }
.or::before, .or::after { content: ""; height: 1px; background: var(--line); }
.auth-card .btn-primary { width: 100%; height: 52px; }
.auth-foot { text-align: center; font-size: 0.92rem; color: var(--muted); }
.auth-foot a { color: var(--ink); font-weight: 640; text-decoration: underline; text-underline-offset: 3px; }
.auth-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 0.88rem; }
.auth-row a { color: var(--muted); }
.auth-row a:hover { color: var(--ink); }

/* ---------- 탭 패널 공통 ---------- */
[data-panel] { display: none; }
[data-panel].on { display: block; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-block: 10px 24px; }
.filters .select { width: auto; height: 42px; min-width: 150px; }
.filters .spacer { flex: 1; }

/* ---------- 커뮤니티 ---------- */
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(24px, 3vw, 40px); align-items: start; }
.side { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 16px; }
.side .panel { padding: 20px; }
.side .panel h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 10px; }
.side .panel p { font-size: 0.9rem; color: var(--ink-2); word-break: keep-all; }
.side .btn { width: 100%; }
.tagcloud { display: flex; flex-wrap: wrap; gap: 6px; }
.rules { display: grid; gap: 8px; font-size: 0.88rem; color: var(--ink-2); }
.rules li { display: flex; gap: 8px; }
.rules li::before { content: counter(rule); counter-increment: rule; font-family: var(--font-display); font-weight: 700; color: var(--accent); }
.rules { counter-reset: rule; }
.feed { display: grid; gap: 12px; }
.post-card { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); transition: border-color var(--dur-fast), transform var(--dur) var(--ease-out), box-shadow var(--dur); }
.post-card:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.post-card .body { display: grid; gap: 6px; min-width: 0; }
.post-card .title { font-weight: 680; font-size: 1.05rem; letter-spacing: -0.02em; line-height: 1.35; word-break: keep-all; }
.post-card .excerpt { color: var(--ink-2); font-size: 0.93rem; line-height: 1.6; word-break: keep-all; }
.post-card .meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.83rem; color: var(--muted); }
.post-card .foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.post-card .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.post-card .tags .chip { height: 24px; padding-inline: 9px; font-size: 0.74rem; }
.post-card .state { font-size: 0.82rem; font-weight: 640; color: var(--accent); }
.post-card .state.closed { color: var(--muted); }
.post-card .answer { border-left: 2px solid var(--accent); padding-left: 12px; font-size: 0.9rem; color: var(--ink-2); word-break: keep-all; }
.post-card .answer b { color: var(--ink); }
.meetup-card { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.moments-simple { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.moments-simple .moment .frame { aspect-ratio: 1; }

/* ---------- 여행 스타일 ---------- */
.style-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.style-card { position: relative; display: grid; grid-template-columns: 200px 1fr; gap: 22px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur), border-color var(--dur-fast); }
.style-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--line-strong); }
.style-card .frame { aspect-ratio: 4 / 5; border-radius: 14px; }
.style-card .frame img { transition: transform 0.9s var(--ease-out); }
.style-card:hover .frame img { transform: scale(1.04); }
.style-card .body { display: grid; align-content: center; gap: 10px; }
.style-card h3 { font-size: 1.5rem; font-weight: 760; letter-spacing: -0.03em; }
.style-card p { color: var(--ink-2); font-size: 0.95rem; word-break: keep-all; }
.style-card .where { display: flex; flex-wrap: wrap; gap: 6px; }
.style-card .link-arrow { justify-self: start; margin-top: 4px; }

/* ---------- 매거진 ---------- */
.article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px) clamp(14px, 1.8vw, 24px); }
.article { display: grid; gap: 12px; }
.article .frame { aspect-ratio: 3 / 2; }
.article .frame img { transition: transform 0.9s var(--ease-out); }
.article:hover .frame img { transform: scale(1.035); }
.article .cat { font-size: 0.8rem; font-weight: 640; color: var(--accent); }
.article h3 { font-size: 1.12rem; font-weight: 680; letter-spacing: -0.02em; line-height: 1.35; word-break: keep-all; }
.article:hover h3 { color: var(--accent); }
.article p { font-size: 0.92rem; color: var(--ink-2); word-break: keep-all; line-height: 1.6; }
.article .small { color: var(--muted); }
.article.hide { display: none; }

/* ---------- 여행지 ---------- */
.dest-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px) clamp(14px, 1.6vw, 22px); }
.dest-card { display: grid; gap: 12px; }
.dest-card.hide { display: none; }
.dest-card .frame { aspect-ratio: 4 / 5; }
.dest-card .frame img { transition: transform 0.9s var(--ease-out); }
.dest-card:hover .frame img { transform: scale(1.05); }
.dest-card .name { display: flex; justify-content: space-between; align-items: baseline; font-weight: 740; font-size: 1.15rem; letter-spacing: -0.025em; }
.dest-card .name span { font-size: 0.8rem; font-weight: 500; color: var(--muted); }
.dest-card .facts { display: grid; gap: 4px; font-size: 0.84rem; color: var(--ink-2); }
.dest-card .facts div { display: flex; justify-content: space-between; gap: 8px; }
.dest-card .facts dt { color: var(--muted); }
.dest-card .facts dd { margin: 0; font-weight: 600; }
.fact-strip { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; }
.fact-strip > div { padding: 18px 20px; display: grid; gap: 2px; border-left: 1px solid var(--line); }
.fact-strip > div:first-child { border-left: 0; }
.fact-strip .k { font-size: 0.78rem; color: var(--muted); }
.fact-strip .v { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; }
.fact-strip .v small { font-weight: 500; color: var(--muted); font-size: 0.8rem; margin-left: 4px; }
.months { display: flex; gap: 4px; }
.months span { flex: 1; height: 8px; border-radius: 4px; background: var(--bg-2); }
.months span.hi { background: var(--accent); }
.months-label { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--muted); margin-top: 4px; }

/* ---------- 문서형 페이지 (약관·규정·소개) ---------- */
.doc-page { padding-bottom: var(--section-gap); }
.doc { max-width: 820px; }
.doc-head { padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(20px, 3vw, 36px); border-bottom: 1px solid var(--line); margin-bottom: clamp(24px, 3vw, 40px); display: grid; gap: 12px; }
.doc-head .small { color: var(--muted); }
.doc h2 { font-size: 1.25rem; font-weight: 740; letter-spacing: -0.025em; margin-top: clamp(28px, 3vw, 40px); margin-bottom: 10px; }
.doc h2:first-of-type { margin-top: 0; }
.doc p, .doc li { color: var(--ink-2); word-break: keep-all; }
.doc p { margin-bottom: 12px; }
.doc ol, .doc ul { padding-left: 20px; margin-bottom: 12px; display: grid; gap: 6px; }
.doc ol { list-style: decimal; }
.doc ul { list-style: disc; }
.doc .note { background: var(--accent-soft); color: var(--ink); border-radius: 14px; padding: 14px 16px; font-size: 0.9rem; display: flex; gap: 10px; align-items: start; }
.doc .note .ico { color: var(--accent); flex: none; margin-top: 2px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.table th, .table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-weight: 700; background: var(--surface-2); white-space: nowrap; }
.table tr:last-child td { border-bottom: 0; }
.table td code { font-family: var(--font-display); font-size: 0.82rem; }
.table .num { font-variant-numeric: tabular-nums; }

/* ---------- 아코디언 (FAQ·채용) ---------- */
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 18px 4px; font-weight: 640; font-size: 1.02rem; letter-spacing: -0.015em; word-break: keep-all; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary .ico { width: 20px; height: 20px; color: var(--muted); transition: transform var(--dur) var(--ease-out); }
.acc details[open] summary .ico { transform: rotate(45deg); color: var(--accent); }
.acc .acc-body { padding: 0 4px 20px; color: var(--ink-2); word-break: keep-all; display: grid; gap: 10px; }
.acc .acc-body .meta { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- 회사 소개 ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.pillar { padding: clamp(22px, 2.6vw, 32px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); display: grid; gap: 10px; align-content: start; }
.pillar .ico { width: 30px; height: 30px; color: var(--accent); stroke-width: 1.5; }
.pillar h3 { font-size: 1.15rem; font-weight: 720; letter-spacing: -0.02em; }
.pillar p { color: var(--ink-2); font-size: 0.94rem; word-break: keep-all; }
.info-list { display: grid; grid-template-columns: 160px 1fr; gap: 10px 20px; font-size: 0.95rem; }
.info-list dt { color: var(--muted); }
.info-list dd { margin: 0; color: var(--ink); font-weight: 560; word-break: keep-all; }
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.story .frame { aspect-ratio: 4 / 3; }
.story .copy { display: grid; gap: 14px; }
.story .copy p { color: var(--ink-2); word-break: keep-all; }

/* ---------- 공지 ---------- */
.notice-list { border-top: 1px solid var(--line); }
.notice-list a { display: grid; grid-template-columns: 84px 1fr auto; gap: 16px; align-items: center; padding: 16px 4px; border-bottom: 1px solid var(--line); transition: background var(--dur-fast); }
.notice-list a:hover { background: var(--surface); }
.notice-list .cat { font-size: 0.78rem; font-weight: 700; color: var(--accent); }
.notice-list .cat.plain { color: var(--muted); }
.notice-list .t { font-weight: 620; word-break: keep-all; }
.notice-list .d { font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.notice-detail { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: clamp(22px, 3vw, 36px); display: grid; gap: 14px; margin-bottom: clamp(28px, 3vw, 44px); }
.notice-detail h2 { font-size: 1.3rem; font-weight: 740; letter-spacing: -0.025em; margin: 0; }
.notice-detail .small { color: var(--muted); }
.notice-detail p { color: var(--ink-2); word-break: keep-all; }

/* ---------- 채용 ---------- */
.jobs { display: grid; gap: 12px; }
.job { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.job h3 { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; }
.job .meta { display: flex; flex-wrap: wrap; gap: 6px; }
.job.closed { opacity: 0.6; }

/* ---------- 파트너 ---------- */
.split-form { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.split-form .panel { padding: clamp(22px, 3vw, 34px); }
.benefits { display: grid; gap: 14px; }
.benefits li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.benefits .ico { color: var(--accent); margin-top: 3px; }
.benefits b { display: block; font-weight: 700; margin-bottom: 2px; }
.benefits span { color: var(--ink-2); font-size: 0.94rem; word-break: keep-all; }

/* ---------- 예약 확인 ---------- */
.narrow { max-width: 560px; margin-inline: auto; }
.narrow .panel { padding: clamp(24px, 3vw, 36px); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .dest-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fact-strip { grid-template-columns: repeat(3, 1fr); }
  .fact-strip > div:nth-child(4) { border-left: 0; }
  .fact-strip > div:nth-child(n + 4) { border-top: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; min-height: 0; }
  .auth-visual { min-height: 240px; padding: 24px; }
  .auth-visual blockquote p { font-size: 1.15rem; }
  .two-col { grid-template-columns: 1fr; }
  .side { position: static; }
  .style-grid { grid-template-columns: 1fr; }
  .style-card { grid-template-columns: 140px 1fr; }
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .moments-simple { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pillars { grid-template-columns: 1fr; }
  .story { grid-template-columns: 1fr; }
  .split-form { grid-template-columns: 1fr; }
  .page-hero { border-radius: 0 0 20px 20px; }
}
@media (max-width: 600px) {
  .form-grid .two { grid-template-columns: 1fr; }
  .style-card { grid-template-columns: 1fr; }
  .style-card .frame { aspect-ratio: 16 / 10; }
  .article-grid { grid-template-columns: 1fr; }
  .moments-simple { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact-strip { grid-template-columns: 1fr 1fr; }
  .fact-strip > div { border-left: 0; }
  .fact-strip > div:nth-child(even) { border-left: 1px solid var(--line); }
  .fact-strip > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .info-list { grid-template-columns: 1fr; gap: 2px 0; }
  .info-list dd { margin-bottom: 10px; }
  .notice-list a { grid-template-columns: 1fr auto; }
  .notice-list .cat { grid-column: 1 / -1; }
  .job { grid-template-columns: 1fr; }
  .meetup-card { grid-template-columns: auto 1fr; }
  .meetup-card .btn { grid-column: 2; justify-self: start; }
  .post-card { grid-template-columns: 1fr; }
  .post-card .avatar { display: none; }
}

/* ---------- 필터 항목 공통 전환 ---------- */
[data-item] { transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
[data-item].hide { display: none; }
[data-item].enter { opacity: 0; transform: translateY(12px); }
[data-empty] { display: none; padding: 48px 24px; text-align: center; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: var(--radius-card); }
[data-empty].show { display: block; }

/* ---------- 상품 상세 ---------- */
.skel { background: var(--bg-2); border-radius: 10px; position: relative; overflow: hidden; }
.skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent); transform: translateX(-100%); animation: skel 1.3s infinite; }
@keyframes skel { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } }
.crumb a:hover { color: var(--ink); }
.gallery { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 12px; }
.gallery.single { grid-template-columns: 1fr; }
.gallery .frame.main { aspect-ratio: 16 / 9; border-radius: 24px; }
.gallery .thumbs { display: grid; grid-template-rows: repeat(3, 1fr); gap: 12px; }
.gallery .thumb { position: relative; border-radius: 16px; overflow: hidden; background: var(--bg-2); aspect-ratio: 4 / 3; border: 2px solid transparent; transition: border-color var(--dur-fast); }
.gallery .thumb.on { border-color: var(--accent); }
.gallery .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery .thumbs .thumb:nth-child(n + 4) { display: none; }
.product-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.product-content { display: grid; gap: clamp(28px, 3.5vw, 44px); min-width: 0; }
.product-content .prose p { color: var(--ink-2); margin-bottom: 12px; word-break: keep-all; line-height: 1.75; }
.p-section { display: grid; gap: 14px; }
.itin-list { display: grid; gap: 10px; counter-reset: none; }
.itin-list li { display: grid; grid-template-columns: 52px 1fr; gap: 14px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.itin-list .day { font-family: var(--font-display); font-weight: 800; color: var(--accent); font-size: 0.95rem; padding-top: 2px; }
.itin-list b { font-weight: 680; }
.itin-list p { color: var(--ink-2); font-size: 0.93rem; margin-top: 4px; word-break: keep-all; line-height: 1.6; }
.inc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.inc-grid h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 8px; }
.inc, .exc { display: grid; gap: 6px; }
.inc li, .exc li { display: flex; gap: 8px; font-size: 0.93rem; color: var(--ink-2); word-break: keep-all; }
.inc li::before { content: "✓"; color: var(--accent); font-weight: 800; }
.exc li::before { content: "–"; color: var(--muted); font-weight: 800; }
.inc .muted, .exc .muted { color: var(--muted); }
.product-side { position: sticky; top: calc(var(--nav-h) + 24px); }
.price-card { padding: clamp(20px, 2.4vw, 28px); }
.price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price-row .big { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; }
.price-row .big small { font-family: var(--font-ko); font-size: 0.55em; font-weight: 600; }
.price-row s { color: var(--muted); }
@media (max-width: 1080px) { .product-grid { grid-template-columns: minmax(0, 1fr); } .product-side { position: static; } }
@media (max-width: 700px) { .gallery { grid-template-columns: 1fr; } .gallery .thumbs { grid-template-rows: none; grid-template-columns: repeat(4, 1fr); } .gallery .thumbs .thumb:nth-child(n + 4) { display: block; } .gallery .thumbs .thumb:nth-child(n + 5) { display: none; } .gallery .frame.main { aspect-ratio: 4 / 3; border-radius: 20px; } .inc-grid { grid-template-columns: 1fr; } }

/* ---------- 여행자의 순간 · 인스타그램식 피드 ---------- */
.ig-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 560px; }
.ig-tools { display: flex; align-items: center; gap: 8px; }
.ig-tools .spacer { flex: 1; }
.ig-composer { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 16px; display: grid; gap: 12px; }
.ig-drop { position: relative; display: grid; place-items: center; min-height: 140px; border: 1.5px dashed var(--line-strong); border-radius: 16px; background: var(--surface-2); color: var(--muted); font-size: 0.9rem; cursor: pointer; overflow: hidden; }
.ig-drop.has { min-height: 56px; }
.ig-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ig-drop img { width: 100%; max-height: 420px; object-fit: cover; display: block; }
.ig-drop.has span { display: inline; font-weight: 600; color: var(--ink-2); }
.ig-composer .row2 { display: grid; grid-template-columns: 1fr 160px; gap: 8px; }
.ig-composer .btn { justify-self: end; }
.ig-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; margin-bottom: 20px; }
.ig-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.ig-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.ig-avatar-text { display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 0.85rem; }
.ig-who { display: grid; line-height: 1.2; min-width: 0; }
.ig-who b { font-weight: 700; font-size: 0.92rem; }
.ig-who span { font-size: 0.78rem; color: var(--muted); }
.ig-time { margin-left: auto; font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.ig-more { font-size: 0.78rem; color: var(--muted); padding: 4px 8px; border-radius: var(--radius-pill); }
.ig-more:hover { color: var(--accent); background: var(--accent-soft); }
.ig-media { background: var(--bg-2); }
.ig-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; user-select: none; }
.ig-actions { display: flex; gap: 6px; padding: 8px 8px 0; }
.ig-actions button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border-radius: var(--radius-pill); font-size: 0.9rem; font-weight: 600; color: var(--ink-2); transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast); }
.ig-actions button:hover { background: var(--surface-2); }
.ig-actions button:active { transform: scale(0.94); }
.ig-like.on { color: var(--accent); }
.ig-like.on .ico { fill: currentColor; }
.ig-caption { padding: 6px 14px 4px; font-size: 0.93rem; line-height: 1.55; word-break: keep-all; }
.ig-caption b { font-weight: 700; margin-right: 4px; }
.ig-comments { padding: 2px 14px 6px; display: grid; gap: 4px; }
.ig-c { font-size: 0.88rem; line-height: 1.5; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.ig-c b { font-weight: 700; }
.ig-c time { font-size: 0.72rem; color: var(--muted); }
.ig-c button { font-size: 0.8rem; color: var(--muted); padding: 0 4px; }
.ig-c button:hover { color: var(--accent); }
.ig-morec { padding: 0 14px 8px; font-size: 0.85rem; color: var(--muted); }
.ig-morec:hover { color: var(--ink); }
.ig-cform { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 8px 14px 14px; border-top: 1px solid var(--line); margin-top: 6px; }
.ig-cform input { height: 38px; border: 0; background: transparent; font-size: 0.9rem; color: var(--ink); }
.ig-cform input:focus { outline: none; }
.ig-cform button { font-size: 0.88rem; font-weight: 700; color: var(--accent); padding: 0 6px; }
.ig-login { display: block; padding: 10px 14px 14px; font-size: 0.85rem; color: var(--muted); border-top: 1px solid var(--line); margin-top: 6px; }
.ig-login:hover { color: var(--accent); }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.ig-tile { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--bg-2); border-radius: 6px; }
.ig-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease-out); }
.ig-tile:hover img { transform: scale(1.04); }
.ig-tile-meta { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; color: #fff; font-weight: 700; font-size: 0.85rem; background: rgba(0, 0, 0, 0.35); opacity: 0; transition: opacity var(--dur-fast); }
.ig-tile-meta .ico { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.ig-tile:hover .ig-tile-meta { opacity: 1; }
.ig-empty { padding: 28px; text-align: center; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: var(--radius-card); font-size: 0.92rem; }
@media (max-width: 600px) { .ig-composer .row2 { grid-template-columns: 1fr; } .ig-card { border-radius: 14px; } }

/* ---------- 치앙마이 소개: 카테고리 탭 + 축제 타임라인 + 날씨 표 ---------- */
.cm-tabs { position: sticky; top: var(--nav-h); z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.cm-tabs .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-block: 10px; gap: 6px; }
.cm-tabs .tabs::-webkit-scrollbar { display: none; }
.cm-tabs .tab { flex: none; }
.cm-panel { padding-block: clamp(32px, 4vw, 56px); }
.cm-panel h2.h-section { margin-bottom: 8px; }
.cm-panel .lead { margin-bottom: 24px; }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.kv .item { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; display: grid; gap: 4px; }
.kv .k { font-size: 0.8rem; color: var(--muted); }
.kv .v { font-weight: 700; letter-spacing: -0.02em; word-break: keep-all; }
.kv .v small { display: block; font-weight: 500; color: var(--muted); font-size: 0.8rem; margin-top: 2px; }
.tips { display: grid; gap: 10px; }
.tips li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; color: var(--ink-2); word-break: keep-all; line-height: 1.6; }
.tips li b { color: var(--ink); }
.tips .n { font-family: var(--font-display); font-weight: 800; color: var(--accent); }
.season-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px; }
.season { padding: 18px 20px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); display: grid; gap: 6px; }
.season.best { background: var(--accent-soft); border-color: transparent; }
.season h3 { font-size: 1.05rem; font-weight: 740; letter-spacing: -0.02em; }
.season .when { font-family: var(--font-display); font-size: 0.8rem; color: var(--accent); font-weight: 700; letter-spacing: 0.04em; }
.season p { font-size: 0.92rem; color: var(--ink-2); word-break: keep-all; }
.wx .table td, .wx .table th { text-align: right; padding: 9px 10px; font-variant-numeric: tabular-nums; }
.wx .table td:first-child, .wx .table th:first-child { text-align: left; }
.wx .rain { display: inline-block; height: 8px; border-radius: 4px; background: var(--accent); opacity: 0.55; vertical-align: middle; margin-right: 6px; }
.src { font-size: 0.78rem; color: var(--muted); margin-top: 10px; }
.src a { text-decoration: underline; text-underline-offset: 3px; }
.fest-list { display: grid; gap: 14px; }
.fest { display: grid; grid-template-columns: 120px 1fr; gap: 18px; padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.fest.hi { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--accent) 50%, transparent); }
.fest .when { display: grid; gap: 4px; align-content: start; }
.fest .when b { font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.fest .when span { font-size: 0.78rem; color: var(--muted); }
.fest .when .tag { display: inline-flex; height: 22px; padding: 0 8px; align-items: center; border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: 700; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); justify-self: start; }
.fest .when .tag.ok { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.fest .body { display: grid; gap: 8px; min-width: 0; }
.fest h3 { font-size: 1.12rem; font-weight: 740; letter-spacing: -0.02em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.fest h3 .th { font-family: var(--font-thai); font-size: 0.85rem; font-weight: 500; color: var(--gold); }
.fest p { color: var(--ink-2); font-size: 0.95rem; line-height: 1.65; word-break: keep-all; }
.fest .where { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 0.88rem; color: var(--ink-2); }
.fest .where .btn { height: 34px; padding-inline: 12px; font-size: 0.82rem; gap: 6px; }
.fest .where .btn .ico { width: 15px; height: 15px; }
.fest .tip { font-size: 0.86rem; color: var(--muted); border-left: 2px solid var(--gold-soft); padding-left: 10px; }
.fest-month { font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 18px 0 4px; display: flex; align-items: center; gap: 12px; }
.fest-month::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.area-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.area-card { padding: 18px 20px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); display: grid; gap: 6px; }
.area-card h3 { font-size: 1.05rem; font-weight: 740; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.area-card h3 .th { font-family: var(--font-thai); font-size: 0.78rem; color: var(--gold); font-weight: 500; }
.area-card p { font-size: 0.9rem; color: var(--ink-2); word-break: keep-all; }
.area-card .for { font-size: 0.8rem; color: var(--muted); }
@media (max-width: 900px) { .season-grid { grid-template-columns: 1fr; } .area-grid { grid-template-columns: 1fr 1fr; } .fest { grid-template-columns: 1fr; gap: 10px; } .fest .when { grid-template-columns: auto auto; align-items: center; gap: 10px; } }
@media (max-width: 600px) { .area-grid { grid-template-columns: 1fr; } }
a.area-card { transition: border-color var(--dur-fast), transform var(--dur-fast); }
a.area-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); transform: translateY(-2px); }
.area-card .more { font-size: 0.82rem; font-weight: 700; color: var(--accent); display: inline-flex; align-items: center; gap: 4px; }
.area-card .more .ico { width: 14px; height: 14px; }

/* ---------- 지역 소개 (area-*.html, tools/build_areas.py 생성) ---------- */
.page-hero .crumb span { opacity: 0.6; }
.fact-strip.area-facts { grid-template-columns: repeat(4, 1fr); }
.fact-strip.area-facts .v small { display: block; margin: 2px 0 0; word-break: keep-all; }
.spot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.spot { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.spot-head { display: flex; justify-content: space-between; align-items: center; }
.spot-head .n { font-family: var(--font-display); font-weight: 800; color: var(--accent); letter-spacing: 0.02em; }
.spot-head .tag { font-size: 0.74rem; font-weight: 700; color: var(--muted); padding: 3px 10px; border: 1px solid var(--line); border-radius: var(--radius-pill); }
.spot h3 { font-size: 1.12rem; font-weight: 740; letter-spacing: -0.02em; display: grid; gap: 2px; word-break: keep-all; }
.spot h3 .en { font-family: var(--font-display); font-size: 0.8rem; font-weight: 600; color: var(--gold); letter-spacing: 0; }
.spot p { color: var(--ink-2); font-size: 0.93rem; line-height: 1.65; word-break: keep-all; }
.spot-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.spot-foot .hours { font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; word-break: keep-all; }
.spot-foot .btn { height: 34px; padding-inline: 12px; font-size: 0.82rem; gap: 6px; }
.spot-foot .btn .ico { width: 15px; height: 15px; }
.area-plan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.day-line { display: grid; border-left: 1px solid var(--gold); margin-left: 6px; }
.day-line li { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 0 0 20px 20px; position: relative; }
.day-line li::before { content: ""; position: absolute; left: -5px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.day-line .t { font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; }
.day-line b { display: block; font-weight: 720; letter-spacing: -0.01em; }
.day-line p { color: var(--ink-2); font-size: 0.92rem; word-break: keep-all; margin-top: 2px; }
.area-next-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.area-next { display: grid; grid-template-columns: 96px 1fr 18px; gap: 16px; align-items: center; padding: 12px; padding-right: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); transition: border-color var(--dur-fast); }
.area-next:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.area-next img { width: 96px; height: 72px; object-fit: cover; border-radius: 12px; }
.area-next b { display: block; font-size: 1.05rem; font-weight: 740; }
.area-next small { display: block; color: var(--muted); font-size: 0.84rem; word-break: keep-all; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.area-next:hover b { color: var(--accent); }
@media (max-width: 1080px) { .spot-grid { grid-template-columns: 1fr 1fr; } .fact-strip.area-facts > div:nth-child(4) { border-left: 1px solid var(--line); border-top: 0; } }
@media (max-width: 900px) { .area-plan { grid-template-columns: 1fr; } .area-next-grid { grid-template-columns: 1fr; } .fact-strip.area-facts { grid-template-columns: 1fr 1fr; } .fact-strip.area-facts > div { border-left: 0; } .fact-strip.area-facts > div:nth-child(even) { border-left: 1px solid var(--line); } .fact-strip.area-facts > div:nth-child(n + 3) { border-top: 1px solid var(--line); } }
@media (max-width: 600px) { .spot-grid { grid-template-columns: 1fr; } .area-next { grid-template-columns: 72px 1fr 16px; gap: 12px; } .area-next img { width: 72px; height: 56px; } }

/* ---------- 커뮤니티 글 작성·상세 ---------- */
.compose { padding: 18px; display: grid; gap: 12px; margin-bottom: 14px; }
.post-card .title .post-open { text-align: left; font: inherit; font-weight: 680; letter-spacing: -0.02em; line-height: 1.35; word-break: keep-all; color: inherit; }
.post-card .title .post-open:hover { color: var(--accent); }
.avatar-text { display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 0.85rem; }
.post-detail { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 12px; }
.post-full { color: var(--ink-2); line-height: 1.7; word-break: keep-all; white-space: normal; }
.chat-link { background: var(--accent-soft); border-radius: 12px; padding: 10px 12px; font-size: 0.9rem; display: grid; gap: 2px; }
.chat-link a { text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }
.join-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.join-state { font-size: 0.9rem; color: var(--ink-2); }
.linkish { font-size: 0.85rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; margin-left: 6px; }
.joins { display: grid; gap: 8px; font-size: 0.9rem; }
.join-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 8px 10px; background: var(--surface-2); border-radius: 12px; }
.join-row .small { display: block; color: var(--muted); }
.pill-s { font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--bg-2); color: var(--muted); }
.pill-s.accepted { background: var(--accent-soft); color: var(--accent); }
.row-btns { display: flex; gap: 6px; }
.row-btns .btn-sm { height: 32px; padding-inline: 12px; font-size: 0.8rem; }
.comments { display: grid; gap: 8px; }
.comments > b { font-size: 0.9rem; }
.clist { display: grid; gap: 8px; }
.crow { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.crow .avatar { width: 30px; height: 30px; }
.crow .cwho { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; }
.crow .cwho time { color: var(--muted); font-size: 0.75rem; }
.crow .cwho button { color: var(--muted); font-size: 0.85rem; }
.crow .cwho button:hover { color: var(--accent); }
.crow p { font-size: 0.92rem; color: var(--ink-2); line-height: 1.55; word-break: keep-all; }
.cform { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.owner-ops { display: flex; gap: 8px; flex-wrap: wrap; }
.owner-ops .danger { color: var(--accent); }
@media (max-width: 600px) { .join-row { grid-template-columns: auto 1fr; } .join-row .row-btns, .join-row .pill-s { grid-column: 2; justify-self: start; } .compose .form-grid { grid-template-columns: 1fr !important; } }

/* ============================================================
   활동 등급 · 프로필 카드 · 장소 검색 · 순간 v2 · 매거진 작성 · 글 페이지
   ============================================================ */
/* ---------- 등급 배지 ---------- */
.lvl { display: inline-flex; align-items: center; height: 22px; padding-inline: 9px; border-radius: var(--radius-pill); font-size: 0.74rem; font-weight: 720; letter-spacing: 0.01em; white-space: nowrap; border: 1px solid var(--line-strong); color: var(--ink-2); background: var(--surface); }
.lvl-2 { border-color: transparent; background: var(--accent-soft); color: var(--accent); }
.lvl-3 { border-color: transparent; background: var(--accent); color: #fff; }
.lvl-4 { border-color: var(--gold); background: var(--ink); color: var(--bg); }
.lvl.big { height: 30px; padding-inline: 14px; font-size: 0.9rem; }
.lvl-ladder { display: grid; gap: 6px; margin-top: 10px; font-size: 0.82rem; color: var(--muted); }
.lvl-ladder li { display: flex; align-items: center; gap: 8px; }

/* ---------- 커뮤니티 사이드 프로필 카드 ---------- */
.me-panel { display: grid; gap: 10px; }
.me-head { display: flex; align-items: center; gap: 12px; }
.me-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.me-avatar-text { display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 1.1rem; }
.me-who { display: grid; gap: 4px; min-width: 0; }
.me-who b { font-weight: 720; font-size: 1rem; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-points { font-size: 0.86rem; color: var(--ink-2); }
.me-points b { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; color: var(--ink); margin-right: 1px; }
.me-points span { color: var(--muted); }
.me-bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.me-bar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width 0.8s var(--ease-out); }
.me-counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; }
.me-counts li { display: grid; gap: 2px; padding: 8px 4px; border-radius: 12px; background: var(--surface-2); }
.me-counts b { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.me-counts span { font-size: 0.72rem; color: var(--muted); }
.me-counts.wide { grid-template-columns: repeat(6, 1fr); }
.me-perk { color: var(--muted); }

/* ---------- 계정 페이지 등급 ---------- */
.acct-level { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); }
.acct-lvl-head { display: flex; align-items: center; gap: 14px; }
.acct-lvl-head b { display: block; font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; line-height: 1.1; }
.lvl-how summary { cursor: pointer; font-size: 0.86rem; font-weight: 640; }
.lvl-how p { margin-top: 8px; }

/* ---------- 상품 회원가 ---------- */
.member-price { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 0.9rem; }
.member-price .mp-line b { font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; }

/* ---------- 장소 검색 (구글 지도) ---------- */
.places-wrap { position: relative; display: grid; gap: 6px; }
.places-list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; display: grid; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-card); overflow: hidden; }
.places-item { display: grid; gap: 2px; text-align: left; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 0.9rem; }
.places-item:first-child { border-top: 0; }
.places-item b { font-weight: 640; }
.places-item span { font-size: 0.78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.places-item:hover, .places-item.on { background: var(--surface-2); }
.places-status { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--muted); }
.places-status .ico { width: 14px; height: 14px; color: var(--accent); }
.places-status a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 순간 v2: 업로드 미리보기 ---------- */
.ig-previews { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.ig-pv { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--bg-2); }
.ig-pv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-pv button { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.9rem; line-height: 1; display: grid; place-items: center; }
.ig-pv-add { display: grid; place-items: center; border: 1.5px dashed var(--line-strong); background: var(--surface-2); color: var(--muted); font-size: 1.6rem; cursor: pointer; }
.ig-pv-add:hover { color: var(--accent); border-color: var(--accent); }
.ig-pv-first { position: absolute; left: 4px; bottom: 4px; padding: 2px 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.68rem; font-weight: 700; }
.ig-composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ig-composer .row2 { grid-template-columns: 1fr 1fr; }
.ig-composer .btn { justify-self: auto; }

/* ---------- 순간 v2: 여러 장 슬라이드 ---------- */
.ig-media { position: relative; }
.ig-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ig-track::-webkit-scrollbar { display: none; }
.ig-track img { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.ig-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); color: var(--ink); display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); opacity: 0; transition: opacity var(--dur-fast); }
.ig-nav.prev { left: 10px; } .ig-nav.next { right: 10px; }
.ig-multi:hover .ig-nav, .ig-nav:focus-visible { opacity: 1; }
.ig-nav .ico { width: 16px; height: 16px; }
.ig-count { position: absolute; top: 10px; right: 10px; padding: 3px 8px; border-radius: var(--radius-pill); background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.72rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ig-dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.ig-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); transition: transform var(--dur-fast), background var(--dur-fast); }
.ig-dots i.on { background: #fff; transform: scale(1.25); }
.ig-burst { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; color: #fff; opacity: 0; }
.ig-burst .ico { width: 84px; height: 84px; fill: currentColor; filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.35)); }
.ig-burst.go { animation: ig-burst 0.9s var(--ease-out) forwards; }
@keyframes ig-burst { 0% { opacity: 0; transform: scale(0.4); } 25% { opacity: 1; transform: scale(1.08); } 60% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.1); } }
@media (max-width: 700px) { .ig-nav { opacity: 1; width: 28px; height: 28px; } }

/* ---------- 순간 v2: 좋아요 줄 · 장소 · 댓글 입력 · 수정 ---------- */
.ig-counts { margin-left: auto; font-size: 0.82rem; color: var(--muted); align-self: center; padding-right: 6px; font-variant-numeric: tabular-nums; }
.ig-counts b { color: var(--ink); font-weight: 700; }
.ig-likes { padding: 4px 14px 0; font-size: 0.88rem; font-weight: 640; }
.ig-place { display: inline-flex; align-items: center; gap: 3px; font-size: 0.78rem; color: var(--muted); }
.ig-place .ico { width: 12px; height: 12px; }
a.ig-place:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.ig-foot { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 8px 14px 12px; border-top: 1px solid var(--line); margin-top: 6px; }
.ig-foot .ig-cform { display: block; padding: 0; border: 0; margin: 0; }
.ig-foot .ig-cform input { width: 100%; }
.ig-edit { font-size: 0.85rem; font-weight: 700; color: var(--accent); padding: 6px 8px; border-radius: var(--radius-pill); }
.ig-edit:hover { background: var(--accent-soft); }
.ig-editform { display: grid; gap: 8px; padding: 8px 14px 6px; }
.ig-editform .input { height: 40px; }
.ig-editops { display: flex; justify-content: flex-end; gap: 8px; }
.ig-tile-multi { position: absolute; top: 8px; right: 8px; color: #fff; font-size: 0.95rem; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
.moment-likes { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; color: var(--muted); }
.moment-likes .ico { width: 12px; height: 12px; }

/* ---------- 모임: 이벤트·초대 등급 ---------- */
.meetup-card.event { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.meetup .date.ev { background: var(--accent); color: #fff; }
.chip.invite { height: 22px; padding-inline: 8px; font-size: 0.7rem; background: var(--accent-soft); color: var(--accent); border-color: transparent; vertical-align: 2px; }

/* ---------- 동행·Q&A 카드 우측 ---------- */
.post-card .foot-r { display: inline-flex; align-items: center; gap: 10px; }

/* ---------- 매거진: 관리자 작성 ---------- */
.mag-admin { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 20px; border: 1px dashed var(--line-strong); border-radius: 14px; }
.mag-composer { display: grid; gap: 14px; padding: 20px; margin-bottom: 32px; }
.mag-composer-head { display: grid; gap: 6px; }
.mag-composer-head h3 { font-size: 1.1rem; font-weight: 720; }
.mag-composer-head code { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.8em; padding: 1px 5px; border-radius: 5px; background: var(--surface-2); }
.mag-cover-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mag-cover-preview { width: 160px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; }
.mag-file { position: relative; overflow: hidden; cursor: pointer; }
.mag-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mag-composer-ops { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mag-composer-ops .spacer { flex: 1; }
.article-wrap { position: relative; display: grid; }
.article-wrap.hide { display: none; }
.article-wrap.draft .frame { opacity: 0.75; }
.mag-edit { justify-self: start; margin-top: 6px; font-size: 0.8rem; font-weight: 700; color: var(--accent); padding: 4px 10px; border-radius: var(--radius-pill); background: var(--accent-soft); }

/* ---------- 매거진: 글 페이지 ---------- */
.art { max-width: 760px; padding-block: clamp(28px, 4vw, 56px) var(--section-gap); display: grid; gap: clamp(20px, 3vw, 32px); }
.art-head { display: grid; gap: 12px; }
.art-head .cat { font-size: 0.84rem; font-weight: 700; color: var(--accent); }
.art-head .lead { color: var(--ink-2); max-width: 40em; }
.art-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.85rem; color: var(--muted); }
.art-meta a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.art-cover { aspect-ratio: 3 / 2; }
.art-body { font-size: 1.05rem; line-height: 1.8; word-break: keep-all; display: grid; gap: 18px; }
.art-body h2 { font-size: 1.45rem; font-weight: 740; letter-spacing: -0.02em; margin-top: 18px; line-height: 1.3; }
.art-body h3 { font-size: 1.15rem; font-weight: 700; margin-top: 6px; }
.art-body ul { padding-left: 20px; display: grid; gap: 6px; list-style: disc; }
.art-body blockquote { border-left: 3px solid var(--accent); padding-left: 16px; color: var(--ink-2); }
.art-body figure { display: grid; gap: 8px; margin: 6px 0; }
.art-body figure img { width: 100%; border-radius: 16px; }
.art-body figcaption { font-size: 0.82rem; color: var(--muted); text-align: center; }
.art-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.art-foot { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--line); }
.art-more { padding-bottom: var(--section-gap); display: grid; gap: 24px; }
@media (max-width: 700px) {
  .ig-previews { grid-template-columns: repeat(4, 1fr); }
  .ig-composer .row2 { grid-template-columns: 1fr; }
  .me-counts.wide { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 매거진 본문: 스마트에디터 블록 표시 (글 페이지 + 편집기 공용) ---------- */
.art-body p { margin: 0; }
.art-body h4 { font-size: 1.05rem; font-weight: 700; }
.art-body .ql-align-center { text-align: center; } .art-body .ql-align-right { text-align: right; } .art-body .ql-align-justify { text-align: justify; }
.art-body .ql-indent-1 { padding-left: 2em; } .art-body .ql-indent-2 { padding-left: 4em; } .art-body .ql-indent-3 { padding-left: 6em; }
.art-body ol { padding-left: 20px; display: grid; gap: 6px; list-style: decimal; }
.art-body u { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.art-body blockquote { margin: 8px 0; }
.se-photo, .art-body .se-photo { display: grid; gap: 8px; margin: 10px auto; width: 100%; }
.se-photo img { display: block; width: 100%; border-radius: 16px; }
.se-photo figcaption { font-size: 0.82rem; color: var(--muted); text-align: center; word-break: keep-all; }
.se-photo[data-align="left"] { width: 62%; margin-left: 0; margin-right: auto; }
.se-photo[data-align="right"] { width: 62%; margin-right: 0; margin-left: auto; }
.se-photo[data-align="center"] { width: 100%; }
.se-photo[data-align="wide"] { width: min(100vw - 40px, 1100px); margin-left: 50%; transform: translateX(-50%); }
.se-hr { border: 0; margin: 26px auto; height: 1px; width: 100%; background: var(--line-strong); }
.se-hr[data-style="short"] { width: 64px; height: 2px; background: var(--ink); }
.se-hr[data-style="dots"] { height: auto; width: auto; background: none; text-align: center; }
.se-hr[data-style="dots"]::before { content: "· · ·"; letter-spacing: 0.6em; color: var(--muted); font-size: 1.1rem; }
.se-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--bg-2); margin: 10px 0; }
.se-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.se-place { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 16px; margin: 10px 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); font-size: 0.95rem; }
.se-place-pin { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.se-place-pin .ico { width: 18px; height: 18px; }
.se-place-body { display: grid; gap: 2px; min-width: 0; }
.se-place-body b { font-weight: 700; }
.se-place-body span { font-size: 0.82rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.se-place-link { font-size: 0.84rem; font-weight: 700; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
blockquote.se-quote-line, .art-body blockquote:not([class]) { border-left: 3px solid var(--accent); padding-left: 16px; color: var(--ink-2); }
blockquote.se-quote-mark { border: 0; padding: 8px 0 8px 40px; position: relative; font-size: 1.15em; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
blockquote.se-quote-mark::before { content: "\201C"; position: absolute; left: 0; top: -6px; font-family: var(--font-display); font-size: 3rem; line-height: 1; color: var(--accent); }
blockquote.se-quote-box { border: 1px solid var(--line); background: var(--surface-2); border-radius: 14px; padding: 16px 18px; color: var(--ink-2); }
@media (max-width: 700px) {
  .se-photo[data-align="left"], .se-photo[data-align="right"] { width: 100%; margin-inline: 0; }
  .se-place { grid-template-columns: auto 1fr; } .se-place-link { grid-column: 2; justify-self: start; }
}

/* ============================================================
   큐레이터 픽 (전용관) · 상품 상세 일정표 (패키지 상품 페이지 식)
   ============================================================ */
/* ---------- 상품: 큐레이터 띠 ---------- */
.curator-strip { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; margin-top: 18px; padding: 16px 20px; border: 1px solid var(--gold-soft); border-radius: 18px; background: linear-gradient(90deg, var(--gold-faint), transparent 60%); color: inherit; transition: border-color var(--dur-fast); }
.curator-strip:hover { border-color: var(--gold); }
.curator-strip .avatar { width: 48px; height: 48px; }
.curator-strip .avatar-text { display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 800; }
.curator-strip .cs-body { display: grid; gap: 3px; min-width: 0; }
.curator-strip .cs-eyebrow { font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.04em; color: var(--gold); }
.curator-strip .cs-note { font-weight: 640; word-break: keep-all; line-height: 1.45; }
.curator-strip .small { color: var(--muted); }
.curator-strip .cs-more { display: inline-flex; align-items: center; gap: 4px; font-size: 0.86rem; font-weight: 700; white-space: nowrap; }
.curator-strip .cs-more .ico { width: 16px; height: 16px; }

/* ---------- 상품: 포인트 ---------- */
.hl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hl-grid li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); font-size: 0.93rem; word-break: keep-all; line-height: 1.5; }
.hl-grid .ico { width: 18px; height: 18px; color: var(--accent); flex: none; margin-top: 2px; }

/* ---------- 상품: 일정표 ---------- */
.itin-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.day-nav { position: sticky; top: calc(var(--nav-h) + 8px); z-index: 5; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 6px; margin: 0 -6px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-radius: var(--radius-pill); }
.day-nav::-webkit-scrollbar { display: none; }
.day-nav a { flex: none; height: 34px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.04em; color: var(--ink-2); background: var(--surface); }
.day-nav a:hover { color: var(--accent); border-color: var(--accent); }
.itin-days { display: grid; gap: 18px; }
.day-card { display: grid; gap: 14px; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; scroll-margin-top: calc(var(--nav-h) + 70px); }
.day-head { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; }
.day-no { font-family: var(--font-display); font-weight: 800; font-size: 0.9rem; letter-spacing: 0.06em; color: var(--accent); }
.day-tag { font-family: var(--font-display); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.12em; color: var(--gold); text-transform: uppercase; }
.day-head h3 { grid-column: 1 / -1; font-size: 1.25rem; font-weight: 720; letter-spacing: -0.02em; word-break: keep-all; line-height: 1.3; }
.day-photos { display: grid; gap: 8px; }
.day-photos.n1 { grid-template-columns: 1fr; } .day-photos.n2 { grid-template-columns: 1fr 1fr; } .day-photos.n3 { grid-template-columns: 1.4fr 1fr 1fr; } .day-photos.n4 { grid-template-columns: repeat(4, 1fr); }
.day-photos figure { display: grid; gap: 6px; min-width: 0; }
.day-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; display: block; background: var(--bg-2); }
.day-photos.n1 img { aspect-ratio: 16 / 8; }
.day-photos figcaption { font-size: 0.78rem; color: var(--ink-2); display: grid; line-height: 1.35; word-break: keep-all; }
.day-photos figcaption small { font-size: 0.68rem; color: var(--muted); }
.day-body { color: var(--ink-2); line-height: 1.7; word-break: keep-all; font-size: 0.97rem; }
.day-route { display: flex; flex-wrap: wrap; gap: 6px 0; align-items: center; font-size: 0.88rem; font-weight: 600; }
.day-route li { display: inline-flex; align-items: center; }
.day-route li + li::before { content: ""; width: 14px; height: 1px; background: var(--line-strong); margin: 0 8px; }
.day-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 12px; border-top: 1px dashed var(--line-strong); font-size: 0.86rem; }
.meals { display: inline-flex; gap: 4px; }
.meals i { font-style: normal; height: 26px; padding: 0 9px; display: inline-flex; align-items: center; border-radius: var(--radius-pill); border: 1px solid var(--line); color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.meals i.on { color: var(--accent); background: var(--accent-soft); border-color: transparent; text-decoration: none; font-weight: 700; }
.stay { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.stay .ico { width: 15px; height: 15px; color: var(--accent); }
.stay b { color: var(--ink); font-weight: 680; }
.stay.muted { color: var(--muted); }

/* ---------- 큐레이터 카드 · 전용관 ---------- */
.curator-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.curator-card { display: grid; gap: 12px; color: inherit; }
.curator-card .frame { aspect-ratio: 4 / 3; }
.curator-card .frame img { transition: transform 0.9s var(--ease-out); }
.curator-card:hover .frame img { transform: scale(1.03); }
.cc-body { display: flex; align-items: center; gap: 12px; }
.cc-body > div { display: grid; gap: 2px; min-width: 0; }
.cc-body b { font-size: 1.08rem; font-weight: 720; letter-spacing: -0.02em; }
.cc-body span { font-size: 0.86rem; color: var(--muted); word-break: keep-all; }
.cc-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 800; box-shadow: 0 0 0 2px var(--surface); }
.hall-hero { padding-block: clamp(24px, 4vw, 48px) clamp(28px, 4vw, 56px); border-bottom: 1px solid var(--line); }
.hall-hero-inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: center; }
.hall-cover { aspect-ratio: 4 / 3; border-radius: 28px; }
.hall-cover::after { box-shadow: inset 0 0 0 1px var(--gold-soft); }
.hall-id { display: grid; gap: 18px; }
.hall-who { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.hall-who > div { display: grid; gap: 10px; }
.hall-avatar { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; flex: none; background: var(--accent-soft); display: grid; place-items: center; box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--gold-soft); }
.hall-avatar-img { width: 100%; height: 100%; object-fit: cover; display: grid; place-items: center; font-size: 1.6rem; font-weight: 800; color: var(--accent); }
.hall-id .h-display { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
.hall-links { display: flex; gap: 8px; flex-wrap: wrap; }
.hall-disclosure { color: var(--muted); margin-top: 4px; }   /* 제목·소개와 같은 왼쪽 선에 맞춘다(10/29 요청) */
#pk-tagline { white-space: pre-line; }   /* 소개 문구의 줄바꿈을 그대로 */
.hall-bio { font-size: 1.05rem; line-height: 1.8; color: var(--ink-2); display: grid; gap: 14px; word-break: keep-all; text-align: center; }
.container.narrow-2 { max-width: 720px; display: grid; gap: 24px; justify-items: center; }
.deal .cnote { font-size: 0.88rem; color: var(--ink-2); line-height: 1.5; word-break: keep-all; margin-top: 4px; }
.deal .cnote span { color: var(--muted); }
.hall-ask { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; padding: clamp(20px, 3vw, 32px); border-color: var(--gold-soft); }
.hall-ask-btns { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 900px) {
  .hall-hero-inner { grid-template-columns: 1fr; }
  .curator-grid { grid-template-columns: 1fr 1fr; }
  .day-photos.n3, .day-photos.n4 { grid-template-columns: 1fr 1fr; }
  .hl-grid { grid-template-columns: 1fr; }
  .hall-ask { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .curator-grid { grid-template-columns: 1fr; }
  .curator-strip { grid-template-columns: auto 1fr; } .curator-strip .cs-more { grid-column: 2; justify-self: start; }
  .day-card { padding: 16px; }
}

/* ---------- 커뮤니티 검색 · 페이지 ---------- */
.search-box { position: relative; display: inline-flex; align-items: center; min-width: 220px; flex: 1 1 220px; max-width: 360px; }
.search-box .ico { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.search-box input { width: 100%; height: 44px; padding: 0 14px 0 36px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font-family: inherit; font-size: 0.92rem; }
.search-box input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.search-box input::placeholder { color: var(--muted); }
.pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 18px; flex-wrap: wrap; }
.pager button { min-width: 38px; height: 38px; padding: 0 12px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface); font-weight: 640; font-size: 0.88rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pager button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.pager button[aria-current="page"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pager button:disabled { opacity: 0.4; cursor: default; }
.pager .pager-info { font-size: 0.82rem; color: var(--muted); margin-inline: 8px; }
@media (max-width: 700px) { .search-box { max-width: none; } }
.post-card .meta .chip.cat { height: 22px; padding-inline: 8px; font-size: 0.72rem; background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 700; }

/* ---------- 당일 투어 코스 (product.html, category=tour) ---------- */
.course-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.course-step { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 18px; position: relative; padding-bottom: 26px; }
.course-step::before { content: ""; position: absolute; left: 103px; top: 30px; bottom: 0; width: 1px; background: var(--line); }
.course-step:last-child { padding-bottom: 0; }
.course-step:last-child::before { display: none; }
.cs-time {
  font-family: var(--font-display); font-weight: 700; font-size: 0.98rem; color: var(--accent);
  text-align: right; padding-top: 14px; position: relative;
  /* 오른쪽 끝의 타임라인 점(11px)이 글자를 덮지 않도록 자리를 비운다 */
  padding-right: 16px; white-space: nowrap;
}
.cs-time::after {
  content: ""; position: absolute; right: -6px; top: 20px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg);
}
.cs-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 18px 20px; }
.cs-card h3 { font-size: 1.06rem; font-weight: 700; margin: 0 0 6px; word-break: keep-all; }
.cs-card p { color: var(--ink-2); font-size: 0.95rem; line-height: 1.65; margin: 0; word-break: keep-all; }
.cs-spots { margin: 10px 0 0; padding-left: 18px; color: var(--muted); font-size: 0.9rem; }
.cs-spots li { margin-top: 3px; }
.cs-photos { display: grid; gap: 8px; margin-top: 14px; }
.cs-photos.n1 { grid-template-columns: 1fr; }
.cs-photos.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-photos.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-photos figure { margin: 0; }
.cs-photos img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; display: block; }
.cs-photos figure { min-width: 0; align-self: start; }
.cs-photos figcaption { font-size: 0.78rem; color: var(--muted); margin-top: 6px; }
@media (max-width: 620px) {
  .course-step { grid-template-columns: 70px minmax(0, 1fr); gap: 12px; }
  .course-step::before { left: 69px; }
  .cs-time { padding-right: 13px; }
  .cs-time { font-size: 0.86rem; padding-top: 12px; }
  .cs-time::after { top: 17px; }
  .cs-card { padding: 14px 15px; }
  .cs-photos.n3 { grid-template-columns: 1fr 1fr; }
  .cs-photos.n3 figure:first-child { grid-column: 1 / -1; }
}

/* ---------- 상품 사진첩 (가로 스와이프) ---------- */
.product-content { min-width: 0; }
.album-wrap { position: relative; min-width: 0; max-width: 100%; }
.album { display: flex; gap: 12px; overflow-x: auto; width: 100%; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 4px 4px 14px; margin: 0 -4px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.album::-webkit-scrollbar { height: 6px; }
.album::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
.album-item { flex: 0 0 auto; width: min(340px, 78vw); scroll-snap-align: start; border: 0; padding: 0; background: none;
  cursor: zoom-in; border-radius: 16px; overflow: hidden; position: relative; }
.album-item img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--dur) var(--ease-out); }
.album-item:hover img { transform: scale(1.03); }
.album-item:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.album-item .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; font-size: 0.82rem; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.55)); text-align: left; }
.album-nav { position: absolute; top: calc(50% - 26px); width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-card); z-index: 2; }
.album-nav.prev { left: -6px; } .album-nav.next { right: -6px; }
.album-nav .ico { width: 18px; height: 18px; }
.album-count { font-size: 0.86rem; color: var(--muted); }
@media (max-width: 720px) { .album-nav { display: none; } }
/* 상단 갤러리: 썸네일 5장 넘으면 마지막 칸을 "+N" 으로 */
.thumb.more { position: relative; }
.thumb.more::after { content: attr(data-more); position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(21,24,26,.55); color: #fff; font-weight: 700; font-family: var(--font-display); font-size: 1.05rem; border-radius: inherit; }

/* ---------- 라이트박스 ---------- */
.plbx { position: fixed; inset: 0; z-index: 200; background: rgba(15,16,17,.92); display: grid; place-items: center; padding: 20px; }
.plbx[hidden] { display: none; }
.plbx img { max-width: min(96vw, 1400px); max-height: 86vh; object-fit: contain; border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.plbx .plbx-cap { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; color: #e8e8e4; font-size: 0.92rem; }
.plbx .plbx-cap b { color: #fff; margin-right: 8px; font-family: var(--font-display); }
.plbx button { position: absolute; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff;
  display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(6px); }
.plbx button:hover { background: rgba(255,255,255,.26); }
.plbx button .ico { width: 22px; height: 22px; }
.plbx .plbx-x { top: 16px; right: 16px; }
.plbx .plbx-prev { left: 14px; top: calc(50% - 23px); } .plbx .plbx-next { right: 14px; top: calc(50% - 23px); }
@media (max-width: 720px) { .plbx .plbx-prev, .plbx .plbx-next { top: auto; bottom: 54px; } }

/* 계좌이체 결제 안내 (js/bank.js) — 상품 접수 화면·예약 확인·내 예약 공용 */
.pay-box { display: grid; gap: 10px; margin-top: 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--surface); }
.pay-box.paid { border-color: transparent; background: var(--surface-2); }
.pay-head { display: flex; align-items: center; gap: 8px; font-weight: 800; } .pay-head .ico { color: var(--accent); }
.pay-rows { display: grid; gap: 6px; }
.pay-box, .pay-box > * { min-width: 0; }   /* 그리드 항목이 내용 최소폭 때문에 카드 밖으로 밀리지 않게(9/17 모바일 깨짐) */
.pay-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 0.92rem; } .pay-row span { color: var(--muted); } .pay-row b { font-weight: 700; word-break: keep-all; min-width: 0; }
.pay-row .mono { font-family: var(--font-display); letter-spacing: 0; font-size: 0.98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay-copy { grid-column: 3; height: 26px; padding-inline: 8px; font-size: 0.76rem; }
@media (max-width: 480px) { .pay-row { grid-template-columns: 52px minmax(0, 1fr) auto; } .pay-row .mono { font-size: 0.9rem; } }

/* 상품 상세 · 모바일 하단 고정 바 + 옵션 시트 (js/product-sheet.js) */
.p-bar, .p-sheet-close { display: none; }
@media (max-width: 1080px) {
  .p-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: var(--surface); border-top: 1px solid var(--line); padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); box-shadow: 0 -6px 20px -12px rgba(0, 0, 0, .25); }
  .p-bar-price { display: grid; line-height: 1.25; min-width: 0; }
  .p-bar-price .small { font-size: 11px; }
  .p-bar-unit { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .p-bar-row { display: flex; align-items: baseline; gap: 6px; }
  .p-bar-num { font-size: 1.25rem; font-weight: 700; white-space: nowrap; }
  .p-bar-orig { font-size: 12px; color: var(--muted); }
  .p-bar-btn { flex: none; min-width: 40%; height: 48px; border: 0; border-radius: 6px; background: var(--ink); color: var(--bg); font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; }
  [data-page="product"] main { padding-bottom: 84px; }
  .product-side { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); transform: translateY(105%); transition: transform .35s var(--ease-out); visibility: hidden; }
  .product-side.open { transform: none; visibility: visible; }
  .product-side .price-card { border: 0; box-shadow: none; padding-top: 8px; }
  .p-sheet-close { display: grid; place-items: center; position: sticky; top: 0; margin: 0 0 0 auto; width: 44px; height: 44px; border: 0; background: var(--surface); color: var(--ink); cursor: pointer; z-index: 1; }
  .p-sheet-backdrop { position: fixed; inset: 0; z-index: 75; background: rgba(0, 0, 0, .45); }
  .p-sheet-backdrop[hidden] { display: none; }
  html.p-sheet-lock, html.p-sheet-lock body { overflow: hidden; }
}
@media (max-width: 1080px) and (prefers-reduced-motion: reduce) { .product-side { transition: none; } }

/* ---------- 내 예약 줄 (account.html · booking.html, js/my-bookings.js) ---------- */
.mb-row { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); color: inherit; text-decoration: none; }
.mb-row:hover { border-color: var(--line-strong); }
.mb-row.on { border-color: var(--accent); }
.mb-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

/* ===== catalog.css ===== */
/* ------------------------------------------------------------
   chiango · 카테고리 목록(투어·티켓) + 클룩형 상품 카드
   카드 뼈대는 sections.css 의 .deal / .deal-body 를 그대로 쓰고,
   여기서 .pcard 로 사진 비율·배지·별점·가격 표기만 덧입힌다.
   (이 파일은 sections.css 뒤에 로드되므로 같은 명시도면 여기가 이긴다)
   ------------------------------------------------------------ */

/* ---------- 목록 페이지 머리 ---------- */
.cat-hero {
  min-height: 0;
  display: block;
  color: var(--ink);
  background: var(--bg);
  border-radius: 0;
  overflow: visible;
  padding-block: clamp(26px, 4vw, 52px) clamp(16px, 2.4vw, 26px);
}
.cat-hero::before { content: none; }
.cat-hero .h-display { color: var(--ink); font-size: clamp(1.9rem, 3.8vw, 3rem); }
.cat-hero .lead { color: var(--ink-2); margin-top: 10px; }
.cat-hero .eyebrow { display: inline-block; margin-bottom: 12px; }

/* ---------- 상품 종류 탭 ---------- */
.cat-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line);
}
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tab {
  display: inline-flex; align-items: center; gap: 7px;
  height: 46px; padding-inline: 16px;
  border-radius: var(--radius-pill) var(--radius-pill) 0 0;
  font-size: 0.97rem; font-weight: 640; color: var(--muted);
  white-space: nowrap; flex: none;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.cat-tab:hover { color: var(--ink); }
.cat-tab[aria-selected="true"] { color: var(--ink); background: none; border-bottom-color: var(--accent); }
.cat-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding-inline: 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-2); border: 1px solid var(--line);
  font-family: var(--font-display); font-size: 0.74rem; font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1; color: var(--muted);
}
.cat-tab[aria-selected="true"] .cat-count { background: var(--accent-soft); border-color: transparent; color: var(--accent); }

/* ---------- 검색 + 정렬 ---------- */
.cat-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: clamp(18px, 2.4vw, 26px) 0 clamp(20px, 2.6vw, 30px);
}
.cat-toolbar .search-box { flex: 1 1 260px; max-width: 420px; }
.cat-toolbar .select { width: auto; min-width: 158px; height: 44px; border-radius: var(--radius-pill); margin-left: auto; }

/* ---------- 결과 그리드 ---------- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(22px, 2.6vw, 34px) clamp(14px, 1.6vw, 22px);
  padding-bottom: clamp(56px, 8vw, 110px);
}
.cat-grid:empty { padding-bottom: 0; }
.cat-empty {
  margin: 8px 0 clamp(56px, 8vw, 110px);
  padding: 56px 24px; text-align: center; color: var(--muted);
  border: 1px dashed var(--line-strong); border-radius: var(--radius-card);
}

/* ---------- 클룩형 상품 카드 ---------- */
/* 안쪽 열을 minmax(0,1fr) 로 못박는다. auto 로 두면 '한 줄 자르기(nowrap)' 한 메타 줄의
   min-content 가 그대로 열 너비가 되어 좁은 화면에서 카드가 그리드 밖으로 삐져나간다. */
.pcard { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; min-width: 0; }
.pcard .frame { aspect-ratio: 16 / 10; }
/* 배지 줄이 있는 카드와 없는 카드가 섞여도 가격 줄은 한 줄로 맞춰 놓는다 */
.pcard .deal-body { display: flex; flex-direction: column; gap: 6px; }
.pcard .h-card { font-size: 1rem; line-height: 1.38; overflow-wrap: anywhere; }
.pcard .h-card a:hover { color: var(--accent); }
.pcard .place { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.01em; }

/* 사진 위 배지 (좌상단) */
.ptags {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 66px);
}
.ptag {
  display: inline-flex; align-items: center; gap: 4px;
  height: 26px; padding-inline: 10px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 0.75rem; font-weight: 700; color: var(--ink);
  line-height: 1; white-space: nowrap;
}
.ptag-now { background: var(--accent); color: var(--accent-ink); }
.ptag .ico { width: 13px; height: 13px; stroke-width: 2.2; }

/* 별점 줄 */
.pcard .rate {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.85rem; color: var(--ink-2);
}
.pcard .rate .ico { width: 14px; height: 14px; color: var(--gold, #c9a24d); }
.pcard .rate b { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.pcard .rate span { color: var(--muted); }
.pcard .rate-none { color: var(--muted); opacity: 0.72; font-size: 0.82rem; }

/* 메타 줄 — 한 줄로 자르되, 긴 글이 카드 폭을 밀어내지 않게 block + min-width:0 으로 둔다
   (sections.css 의 .deal-body .meta 는 flex 라 nowrap 자식이 최소폭을 만들어 카드가 넘쳤다) */
.pcard .meta { display: block; min-width: 0; font-size: 0.85rem; color: var(--muted); }
.pcard .meta span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 가격 */
.pcard .price { flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.pcard .price .unit {
  font-size: 0.78rem; font-weight: 640; color: var(--muted);
  align-self: center;
}
.pcard .price .num { font-size: 1.12rem; }
.pcard .price .ask { font-size: 0.95rem; font-weight: 650; color: var(--ink-2); }

/* ---------- 불러오는 중 스켈레톤 ---------- */
.pcard-sk { display: grid; gap: 10px; }
.pcard-sk .sk-frame { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius-card); }
.pcard-sk .sk-line { display: block; height: 12px; border-radius: 6px; }
.pcard-sk .sk-line.w70 { width: 70%; }
.pcard-sk .sk-line.w55 { width: 55%; }
.pcard-sk .sk-line.w35 { width: 35%; }
.pcard-sk .sk-frame, .pcard-sk .sk-line {
  background: linear-gradient(90deg, var(--bg-2) 25%, color-mix(in srgb, var(--bg-2) 55%, var(--surface)) 37%, var(--bg-2) 50%);
  background-size: 400% 100%;
  animation: pcard-sk 1.4s var(--ease-inout) infinite;
}
@keyframes pcard-sk { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .pcard-sk .sk-frame, .pcard-sk .sk-line { animation: none; } }

/* ---------- 반응형 ---------- */
@media (max-width: 1100px) { .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-toolbar .select { margin-left: 0; }
}
@media (max-width: 560px) {
  .cat-grid { gap: 20px 12px; }
  .cat-toolbar { gap: 8px; }
  .cat-toolbar .search-box { flex: 1 1 100%; max-width: none; }
  .cat-toolbar .select { width: 100%; min-width: 0; }
  .cat-tab { height: 42px; padding-inline: 12px; font-size: 0.92rem; }
  .ptag { height: 24px; padding-inline: 8px; font-size: 0.7rem; }
  .pcard .h-card { font-size: 0.95rem; }
  .pcard .price .num { font-size: 1.02rem; }
}

/* 골프 카드 구글 평점 (js/catalog-google.js) */
.google-rate-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; color: var(--muted); }
.google-rate-note img { display: block; height: 16px; width: auto; }

/* ===== reviews.css ===== */
/* ------------------------------------------------------------
   chiango · 상품 후기 (product.html #p-reviews 안)
   1) 요약(평균 별점 + 항목별 평균 막대 / 분포 막대)  2) 필터·정렬  3) 후기 쓰기(별점·항목별 별점·사진)
   4) 후기 목록(본문 접기 · 항목별 별점 · 치앙고 답글)  5) 사진 라이트박스
   ⚠️ 인라인 SVG 는 WebKit 에서 width 를 안 주면 폭이 0 이 되어 사라진다.
      아래 .ico 재정의는 전부 px 로 적는다.
   ------------------------------------------------------------ */

.p-reviews-wrap { scroll-margin-top: calc(var(--nav-h) + 16px); }
.rv { padding-block: clamp(40px, 6vw, 72px) clamp(56px, 8vw, 96px); border-top: 1px solid var(--line); }
.rv-top { display: grid; gap: 4px; margin-bottom: clamp(20px, 3vw, 30px); }

/* ============================================================
   1. 요약 — 평균 별점 + 별점 분포
   ============================================================ */
.rv-summary {
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 4vw, 52px);
  padding: clamp(20px, 2.6vw, 28px) clamp(20px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.rv-score { display: grid; justify-items: center; gap: 8px; text-align: center; }
.rv-score-num { font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 3.4rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.rv-score .small { color: var(--muted); }

/* 별 5개: 윤곽선 줄 위에 채운 줄을 --p 만큼만 잘라 덮는다 */
.rv-stars { position: relative; display: inline-flex; flex: none; line-height: 0; }
.rv-star-row { display: inline-flex; gap: 2px; line-height: 0; }
.rv-star-row .ico { width: 19px; height: 19px; flex: none; color: var(--line-strong); }
.rv-star-fill { position: absolute; top: 0; bottom: 0; left: 0; width: var(--p, 0%); overflow: hidden; }
.rv-star-fill .ico { color: var(--gold, #c9a24d); }
.rv-stars.lg .ico { width: 26px; height: 26px; }
.rv-stars.sm .ico { width: 15px; height: 15px; }

.rv-dist { display: grid; gap: 6px; min-width: 0; }
.rv-distrow { display: grid; grid-template-columns: 34px minmax(0, 1fr) 30px; align-items: center; gap: 10px; }
.rv-distn { font-size: 0.8rem; font-weight: 640; color: var(--ink-2); }
.rv-distc { font-size: 0.8rem; color: var(--muted); text-align: right; }
.rv-bar { display: block; height: 7px; border-radius: var(--radius-pill); background: var(--bg-2); overflow: hidden; }
.rv-bar i { display: block; height: 100%; min-width: 0; border-radius: inherit; background: var(--gold, #c9a24d); transition: width var(--dur) var(--ease-out); }

/* 항목별 평균 — 아이콘 · 항목 · 막대 · 점수, 넓으면 두 열 */
.rv-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px clamp(24px, 3vw, 44px); min-width: 0; }
.rv-catrow { display: grid; grid-template-columns: 18px minmax(86px, auto) minmax(0, 1fr) 34px; align-items: center; gap: 10px; }
.rv-catrow .ico { width: 18px; height: 18px; color: var(--muted); }
.rv-catn { font-size: 0.86rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.rv-catv { font-size: 0.86rem; font-weight: 700; text-align: right; }
.rv-catrow.none .rv-catv { color: var(--muted); font-weight: 500; }

/* ============================================================
   2. 필터 칩 + 정렬
   ============================================================ */
.rv-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: clamp(18px, 2.4vw, 24px); }
.rv-chips { display: flex; gap: 6px; flex: 1 1 260px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.rv-chips::-webkit-scrollbar { display: none; }
.rv-chip {
  display: inline-flex; align-items: center; height: 38px; padding-inline: 14px; flex: none;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--ink-2);
  font-size: 0.87rem; font-weight: 600; white-space: nowrap;
  transition: border-color var(--dur-fast), background-color var(--dur-fast), color var(--dur-fast);
}
.rv-chip:hover { border-color: var(--ink); color: var(--ink); }
.rv-chip.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.rv-sortwrap { margin-left: auto; }
.rv-sortwrap .select { width: auto; min-width: 150px; height: 38px; border-radius: var(--radius-pill); font-size: 0.87rem; }

/* ============================================================
   3. 후기 쓰기
   ============================================================ */
.rv-write { margin-top: clamp(18px, 2.4vw, 24px); }

/* 로그인 안 했을 때 */
.rv-cta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 18px clamp(16px, 2.4vw, 24px);
  border: 1px dashed var(--line-strong); border-radius: var(--radius-card);
  background: var(--surface-2);
}
.rv-cta > .ico { width: 22px; height: 22px; color: var(--gold, #c9a24d); }
.rv-cta > div { flex: 1 1 220px; }
.rv-cta b { font-weight: 700; }
.rv-cta p { margin-top: 2px; }

.rv-form {
  display: grid; gap: 16px;
  padding: clamp(18px, 2.6vw, 26px);
  border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--surface); box-shadow: var(--shadow-card);
}
.rv-form-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rv-form-help { margin-top: -10px; }
.rv-legend { font-size: 0.86rem; font-weight: 640; color: var(--ink); }
.rv-del {
  display: inline-flex; align-items: center; gap: 5px;
  height: 32px; padding-inline: 12px; flex: none;
  border-radius: var(--radius-pill); border: 1px solid var(--line-strong);
  font-size: 0.82rem; font-weight: 640; color: var(--muted);
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.rv-del:hover { border-color: var(--accent); color: var(--accent); }
.rv-del .ico { width: 15px; height: 15px; }

/* 별점 고르기 — 라디오라 키보드 방향키가 그대로 먹는다 */
.rv-rate { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.rv-rate label { display: inline-flex; padding: 3px; cursor: pointer; border-radius: 8px; line-height: 0; }
.rv-rate label .ico { width: 30px; height: 30px; color: var(--line-strong); transition: color var(--dur-fast), transform var(--dur-fast) var(--ease-out); }
.rv-rate label:active .ico { transform: scale(0.9); }
.rv-rate[data-val="1"] label:nth-of-type(-n + 1) .ico,
.rv-rate[data-val="2"] label:nth-of-type(-n + 2) .ico,
.rv-rate[data-val="3"] label:nth-of-type(-n + 3) .ico,
.rv-rate[data-val="4"] label:nth-of-type(-n + 4) .ico,
.rv-rate[data-val="5"] label:nth-of-type(-n + 5) .ico { color: var(--gold, #c9a24d); }
/* 마우스를 올리면 그 자리까지만 미리 칠한다 — 먼저 전부 지우고(같은 명시도, 뒤에 선언) 다시 칠한다 */
.rv-rate[data-hover] label:nth-of-type(n) .ico { color: var(--line-strong); }
.rv-rate[data-hover="1"] label:nth-of-type(-n + 1) .ico,
.rv-rate[data-hover="2"] label:nth-of-type(-n + 2) .ico,
.rv-rate[data-hover="3"] label:nth-of-type(-n + 3) .ico,
.rv-rate[data-hover="4"] label:nth-of-type(-n + 4) .ico,
.rv-rate[data-hover="5"] label:nth-of-type(-n + 5) .ico { color: color-mix(in srgb, var(--gold, #c9a24d) 64%, var(--surface)); }
.rv-rate-in:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.rv-rate-text { margin-left: 10px; font-size: 0.88rem; font-weight: 640; color: var(--muted); }
.rv-rate:not([data-val="0"]) .rv-rate-text { color: var(--ink-2); }

.rv-opt { margin-left: 6px; font-size: 0.74rem; font-weight: 600; color: var(--muted); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 1px 7px; vertical-align: 1px; }
.rv-subrate > .small { margin-top: -4px; color: var(--muted); }
.rv-subgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px clamp(16px, 3vw, 40px); margin-top: 6px; }
.rv-subrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; }
.rv-sublabel { display: inline-flex; align-items: center; gap: 7px; font-size: 0.88rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.rv-sublabel .ico { width: 16px; height: 16px; color: var(--muted); }
.rv-rate-sm { flex: none; }
.rv-rate-sm label { padding: 2px; }
.rv-rate-sm label .ico { width: 22px; height: 22px; }
.rv-subclear { display: grid; place-items: center; width: 24px; height: 24px; margin-left: 4px; border-radius: 50%; color: var(--muted); transition: background-color var(--dur-fast), color var(--dur-fast); }
.rv-subclear:hover { background: var(--bg-2); color: var(--ink); }
.rv-subclear[hidden] { display: none; }
.rv-subclear .ico { width: 13px; height: 13px; }

.rv-form .textarea { min-height: 116px; }
.rv-count { display: block; text-align: right; }
.rv-visit .input { max-width: 220px; }

/* 사진 고르기 */
.rv-drop {
  border: 1.5px dashed var(--line-strong); border-radius: 16px;
  background: var(--surface-2);
  transition: border-color var(--dur-fast), background-color var(--dur-fast);
}
.rv-drop:hover, .rv-drop:focus-within { border-color: var(--accent); }
.rv-drop.over { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.rv-drop-in {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 74px; padding: 14px 18px; text-align: center; cursor: pointer;
  font-size: 0.88rem; color: var(--ink-2); word-break: keep-all;
}
.rv-drop-in .ico { width: 22px; height: 22px; color: var(--accent); }

.rv-previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; margin-top: 10px; }
.rv-pv { position: relative; aspect-ratio: 1; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); }
.rv-pv img { width: 100%; height: 100%; object-fit: cover; }
.rv-pv.bad { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.rv-pv-x {
  position: absolute; top: 5px; right: 5px;
  display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; background: rgba(12, 14, 16, 0.6); color: #fff;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.rv-pv-x:hover { background: var(--accent); }
.rv-pv-x .ico { width: 14px; height: 14px; stroke-width: 2.4; }
.rv-pv-tag { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 0; background: var(--accent); color: var(--accent-ink); font-size: 0.68rem; font-weight: 800; text-align: center; }
.rv-upmsg:empty { display: none; }
.rv-upmsg { margin-top: 8px; line-height: 1.55; word-break: keep-all; }
.rv-upmsg.bad { color: var(--accent); font-weight: 600; }

.rv-form-foot { display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex-wrap: wrap; }
.rv-msg { flex: 1 1 200px; color: var(--accent); font-weight: 600; word-break: keep-all; }

/* ============================================================
   4. 후기 목록
   ============================================================ */
.rv-list { display: grid; gap: 4px; margin-top: clamp(22px, 3vw, 32px); }
.rv-item { padding: clamp(18px, 2.4vw, 24px) 0; border-top: 1px solid var(--line); }
.rv-item:first-child { border-top: 0; }
.rv-item-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rv-avatar-text { display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 0.95rem; }
.rv-who { display: grid; margin-right: auto; min-width: 0; }
.rv-who b { font-weight: 680; letter-spacing: -0.01em; }
.rv-who .small { line-height: 1.3; }
.rv-mine { height: 26px; font-size: 0.75rem; }
.rv-item-score { display: inline-flex; align-items: center; gap: 6px; }
.rv-item-score b { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; }
.rv-bodywrap { margin-top: 12px; }
.rv-body { color: var(--ink-2); line-height: 1.75; word-break: keep-all; }
.rv-body.clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
.rv-more { margin-top: 4px; padding: 2px 0; font-size: 0.88rem; font-weight: 640; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: transparent; transition: text-decoration-color var(--dur-fast); }
.rv-more:hover { text-decoration-color: currentColor; }
.rv-more[hidden] { display: none; }

/* 항목별 별점 — 한 줄 칩 */
.rv-subs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.rv-subs li { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px 0 8px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-2); font-size: 0.8rem; color: var(--ink-2); }
.rv-subs .ico { width: 14px; height: 14px; color: var(--muted); }
.rv-subs b { font-family: var(--font-display); font-weight: 700; color: var(--ink); }

/* 치앙고 답글 — 후기 아래 들여쓴 상자 */
.rv-reply { margin-top: 14px; padding: 14px 16px 15px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.rv-reply-head { display: flex; align-items: center; gap: 8px; }
.rv-reply-logo { width: 28px; height: 28px; border-radius: 8px; flex: none; }
.rv-reply-head b { font-weight: 700; font-size: 0.9rem; }
.rv-reply-head .small { color: var(--muted); }
.rv-reply-body { margin-top: 8px; color: var(--ink-2); line-height: 1.7; word-break: keep-all; font-size: 0.93rem; }

.rv-shots { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.rv-shot { width: 108px; height: 108px; padding: 0; overflow: hidden; border-radius: 14px; background: var(--bg-2); cursor: zoom-in; flex: none; }
.rv-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur) var(--ease-out); }
.rv-shot:hover img { transform: scale(1.05); }
.rv-shot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.rv-item-foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.rv-help {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding-inline: 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  font-size: 0.85rem; font-weight: 600; color: var(--muted);
  transition: border-color var(--dur-fast), color var(--dur-fast), background-color var(--dur-fast);
}
.rv-help .ico { width: 17px; height: 17px; }
.rv-help b { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }
button.rv-help:hover { border-color: var(--ink); color: var(--ink); }
.rv-help.on { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.rv-help.is-self { border-style: dashed; cursor: default; }

.rv-note { margin-top: 20px; padding: 32px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: var(--radius-card); word-break: keep-all; }
.rv-note.bad { color: var(--accent); border-color: var(--accent); }
.rv-morewrap { display: flex; justify-content: center; margin-top: 22px; }
.rv-morewrap .btn[hidden] { display: none; }

/* ============================================================
   5. 사진 라이트박스
   ============================================================ */
.rv-lb {
  position: fixed; inset: 0; z-index: 80;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: 10px; padding: 62px 14px 64px;
  background: rgba(10, 11, 12, 0.94);
}
.rv-lb[hidden] { display: none; }
.rv-lb-fig { grid-column: 2; display: grid; place-items: center; min-width: 0; min-height: 0; height: 100%; margin: 0; }
.rv-lb-fig img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; background: rgba(255, 255, 255, 0.06); }
.rv-lb button { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; transition: background-color var(--dur-fast); }
.rv-lb button:hover { background: rgba(255, 255, 255, 0.3); }
.rv-lb button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.rv-lb button[hidden] { display: none; }
.rv-lb button .ico { width: 22px; height: 22px; }
.rv-lb-x { position: absolute; top: 12px; right: 14px; }
.rv-lb-cap { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; color: rgba(255, 255, 255, 0.82); font-size: 0.86rem; letter-spacing: 0.04em; }
html.rv-lb-open { overflow: hidden; }

/* ============================================================
   6. 반응형
   ============================================================ */
@media (max-width: 760px) {
  .rv-summary { grid-template-columns: 1fr; gap: 18px; }
  .rv-cats { grid-template-columns: 1fr; gap: 10px; }
  .rv-subgrid { grid-template-columns: 1fr; }
  .rv-score { justify-items: start; text-align: left; }
  .rv-sortwrap { margin-left: 0; width: 100%; }
  .rv-sortwrap .select { width: 100%; }
  .rv-shot { width: 88px; height: 88px; }
  .rv-form-foot .btn { width: 100%; }
  .rv-lb { grid-template-columns: 1fr; padding: 58px 10px 78px; }
  .rv-lb-fig { grid-column: 1; }
  .rv-lb-nav { position: absolute; bottom: 16px; }
  .rv-lb-nav.prev { left: 22%; }
  .rv-lb-nav.next { right: 22%; }
  .rv-lb-cap { bottom: 32px; }
}
@media (max-width: 420px) {
  .rv-rate label .ico { width: 26px; height: 26px; }
  .rv-rate-text { width: 100%; margin-left: 0; }
  .rv-shot { width: calc(50% - 4px); height: auto; aspect-ratio: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .rv-bar i, .rv-shot img, .rv-rate label .ico { transition: none; }
}

/* ============================================================
   6. 구글 리뷰 (골프장 · Google Places 원문 · 로고 첨부는 구글 정책)
   ============================================================ */
.rvg { margin-bottom: clamp(26px, 4vw, 40px); padding: clamp(18px, 2.6vw, 26px); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface-2); }
.rvg-head { display: grid; gap: 10px; }
.rvg-score { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rvg-logo { display: block; height: 18px; width: auto; flex: none; }
.rvg-num { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.rvg-count { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.rvg-count:hover { color: var(--accent); }
.rvg-note { color: var(--muted); line-height: 1.55; word-break: keep-all; }
.rvg-list { margin-top: clamp(10px, 1.6vw, 16px); }
.rvg-item:first-child { border-top: 1px solid var(--line); }
.rvg-item .rv-who b a { color: inherit; text-decoration: none; }
.rvg-item .rv-who b a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rvg-foot { justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; }
.rvg-translated { color: var(--muted); }
.rvg-translated a { color: inherit; }
.rvg-link { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--muted); text-decoration: none; }
.rvg-link:hover { color: var(--accent); }
.rvg-link .ico { width: 14px; height: 14px; }

/* ===== community.css ===== */
/* chiango · 커뮤니티 사진
   1) 글쓰기 사진 고르개 (.ph-*)  2) 피드 사진 격자 (.pgrid)  3) 라이트박스 (.lbx)
   4) 댓글 사진 (.cph-*)  5) "사진 있는 글만" 토글 (.ph-only)
   ⚠️ 인라인 SVG 는 WebKit 에서 width 를 안 주면 사라진다. 아래 .ico 재정의는 전부 px 로 적는다. */

/* ============================================================
   1. 글쓰기 — 사진 고르개
   ============================================================ */
.ph-field { display: grid; gap: 0; }
.ph-field > label:first-child { display: flex; align-items: center; gap: 8px; }
.ph-cap { font-weight: 500; font-size: 0.78rem; color: var(--muted); }
.ph-cap.warn { color: var(--accent); font-weight: 700; }

.ph-drop {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 3px;
  min-height: 158px; padding: 22px 18px; text-align: center; cursor: pointer;
  border: 1.5px dashed var(--line-strong); border-radius: 18px;
  background: radial-gradient(120% 92% at 50% 0%, var(--accent-soft) 0%, rgba(0, 0, 0, 0) 64%), var(--surface-2);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast), box-shadow var(--dur-fast);
}
.ph-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ph-drop:hover, .ph-drop:focus-within { border-color: var(--accent); box-shadow: 0 10px 30px -18px rgba(228, 87, 46, 0.7); }
.ph-drop.over { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.ph-head { font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); word-break: keep-all; }
.ph-sub { font-size: 0.8rem; color: var(--muted); word-break: keep-all; line-height: 1.5; }

/* 사진 세 장이 겹친 그림 — 비어 있을 때 누르고 싶게 */
.ph-art { position: relative; display: block; width: 92px; height: 66px; margin-bottom: 6px; }
.ph-art i { position: absolute; display: block; border: 1.5px solid var(--line-strong); border-radius: 9px; background: var(--bg-2); transition: transform var(--dur) var(--ease-out); }
.ph-art .a { left: 0; top: 12px; width: 48px; height: 36px; transform: rotate(-12deg); }
.ph-art .b { right: 0; top: 10px; width: 48px; height: 36px; transform: rotate(11deg); }
.ph-art .c { left: 19px; top: 18px; display: grid; place-items: center; width: 54px; height: 42px; border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.ph-drop:hover .ph-art .a, .ph-drop.over .ph-art .a { transform: rotate(-19deg) translate(-4px, -3px); }
.ph-drop:hover .ph-art .b, .ph-drop.over .ph-art .b { transform: rotate(18deg) translate(4px, -3px); }
.ph-drop:hover .ph-art .c, .ph-drop.over .ph-art .c { transform: translateY(-3px); }
.ph-art .ico { width: 24px; height: 24px; }

/* 사진을 고른 뒤에는 자리를 접는다 */
.ph-field.has .ph-drop { min-height: 0; padding: 12px 16px; grid-auto-flow: column; justify-items: start; align-items: center; gap: 10px; text-align: left; background: var(--surface-2); }
.ph-field.has .ph-art { display: none; }
.ph-field.has .ph-head { font-size: 0.9rem; }
.ph-field.has .ph-sub { font-size: 0.78rem; }
.ph-field.full .ph-drop { display: none; }

/* 고른 사진 미리보기 */
.ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; margin-top: 10px; }
.ph-item { position: relative; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); }
.ph-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph-item.dragging { opacity: 0.35; }
.ph-item.dropzone { outline: 2px solid var(--accent); outline-offset: -2px; }
.ph-item.err { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.ph-item.done img { filter: brightness(0.92); }
.ph-item button { position: absolute; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(12, 14, 16, 0.6); color: #fff; backdrop-filter: blur(2px); }
.ph-item button:hover { background: var(--accent); }
.ph-item button[disabled] { opacity: 0.3; cursor: default; }
.ph-item button[disabled]:hover { background: rgba(12, 14, 16, 0.6); }
.ph-item button .ico { width: 14px; height: 14px; stroke-width: 2.2; }
.ph-rm { top: 5px; right: 5px; }
.ph-mv-l { left: 5px; bottom: 5px; }
.ph-mv-r { left: 33px; bottom: 5px; }
.ph-first { position: absolute; top: 6px; left: 6px; padding: 2px 7px; border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-ink); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.02em; }
.ph-stat { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255, 255, 255, 0.72); color: var(--ink); font-size: 0.72rem; font-weight: 700; }
.ph-stat.bad { background: rgba(228, 87, 46, 0.86); color: #fff; }
.ph-stat .ico { width: 18px; height: 18px; }
.ph-add { display: grid; place-items: center; aspect-ratio: 1; border: 1.5px dashed var(--line-strong); border-radius: 12px; background: var(--surface-2); color: var(--muted); cursor: pointer; }
.ph-add:hover { border-color: var(--accent); color: var(--accent); }
.ph-add .ico { width: 22px; height: 22px; }

.ph-note { margin-top: 8px; font-size: 0.83rem; line-height: 1.55; color: var(--ink-2); word-break: keep-all; }
.ph-note.bad { color: var(--accent); font-weight: 600; }
.ph-bar { height: 4px; margin-top: 8px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.ph-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent); transition: width var(--dur-fast) linear; }

/* ============================================================
   2. 필터 — 사진 있는 글만
   ============================================================ */
.ph-only { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 42px; padding-inline: 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); font-size: 0.88rem; color: var(--ink-2); cursor: pointer; user-select: none; transition: border-color var(--dur-fast), background-color var(--dur-fast), color var(--dur-fast); }
.ph-only:hover { border-color: var(--accent); color: var(--accent); }
.ph-only input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ph-only .ico { width: 17px; height: 17px; }
/* 켜진 상태는 '고른 필터'로 읽혀야 한다 — 옆의 주 버튼(동행 글 쓰기)과 헷갈리지 않게 연한 톤 */
.ph-only.on, .ph-only:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 700; box-shadow: inset 0 0 0 1px var(--accent); }
.ph-only:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ============================================================
   3. 피드 — 사진 격자 (1 / 2 / 3 / 4+ 배치가 다르다)
   ============================================================ */
/* 🔴 css/layout.css 의 사이트 푸터 `.foot { padding-top: clamp(64px,8vw,112px) }` 가
   `.post-card .foot`(태그·상태 줄) 에도 걸려서 카드마다 112px 빈 칸이 생긴다.
   layout.css 는 소유 밖이라 여기서 그 카드에 한해서만 되돌린다. */
.post-card .foot { padding-top: 0; }

.pgrid { position: relative; display: grid; gap: 3px; margin-top: 10px; overflow: hidden; border-radius: 14px; }
.pgrid > button { position: relative; display: block; padding: 0; overflow: hidden; background: var(--bg-2); cursor: zoom-in; }
.pgrid > button > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur) var(--ease-out); }
.pgrid > button:hover > img { transform: scale(1.03); }
.pgrid > button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pgrid > img[hidden] { display: none; }

.pgrid.n1 { grid-template-columns: 1fr; }
.pgrid.n1 > button { aspect-ratio: 16 / 10; max-height: 420px; }
.pgrid.n2 { grid-template-columns: 1fr 1fr; }
.pgrid.n2 > button { aspect-ratio: 1; }
.pgrid.n3 { grid-template-columns: 1.9fr 1fr; }
.pgrid.n3 > button { aspect-ratio: 1; }
.pgrid.n3 > button:first-child { grid-row: span 2; aspect-ratio: auto; }
.pgrid.n4 { grid-template-columns: 1fr 1fr; }
.pgrid.n4 > button { aspect-ratio: 1; }

.pgrid-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(12, 14, 16, 0.52); color: #fff; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.pgrid-badge { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--radius-pill); background: rgba(12, 14, 16, 0.55); color: #fff; font-size: 0.7rem; font-weight: 700; backdrop-filter: blur(3px); }
.pgrid-badge .ico { width: 13px; height: 13px; stroke-width: 2; }

/* ============================================================
   4. 라이트박스
   ============================================================ */
.lbx { position: fixed; inset: 0; z-index: 70; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 60px 14px 62px; background: rgba(10, 11, 12, 0.93); }
.lbx[hidden] { display: none; }
.lbx-fig { grid-column: 2; display: grid; place-items: center; min-width: 0; min-height: 0; height: 100%; margin: 0; }
.lbx-fig img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; background: rgba(255, 255, 255, 0.06); }
.lbx button { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, 0.13); color: #fff; transition: background-color var(--dur-fast); }
.lbx button:hover { background: rgba(255, 255, 255, 0.28); }
.lbx button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lbx button[hidden] { display: none; }
.lbx button .ico { width: 22px; height: 22px; }
.lbx-close { position: absolute; top: 12px; right: 14px; }
/* pointer-events:none — 안 주면 모바일에서 좌우 버튼 위를 덮어 클릭을 가로챈다 */
.lbx-count { position: absolute; left: 0; right: 0; bottom: 20px; pointer-events: none; text-align: center; color: rgba(255, 255, 255, 0.82); font-family: var(--font-display); font-size: 0.86rem; letter-spacing: 0.04em; }
body.lbx-open { overflow: hidden; }

/* ============================================================
   5. 댓글 사진 한 장
   ============================================================ */
.cform.has-ph { grid-template-columns: 1fr auto auto; }
.cph-btn { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--muted); cursor: pointer; transition: color var(--dur-fast), border-color var(--dur-fast); }
.cph-btn:hover, .cph-btn.on { color: var(--accent); border-color: var(--accent); }
.cph-btn input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.cph-btn .ico { width: 18px; height: 18px; }
.cph-pv { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 0.8rem; color: var(--muted); }
.cph-pv img { width: 56px; height: 56px; object-fit: cover; border: 1px solid var(--line); border-radius: 10px; }
.cph-pv button { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-2); color: var(--ink-2); }
.cph-pv button:hover { background: var(--accent); color: var(--accent-ink); }
.cph-pv button .ico { width: 14px; height: 14px; }
.crow-ph { display: block; margin-top: 6px; max-width: 160px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; cursor: zoom-in; }
.crow-ph img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.crow-ph:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ============================================================
   모바일
   ============================================================ */
@media (max-width: 600px) {
  .ph-drop { min-height: 136px; padding: 18px 14px; border-radius: 16px; }
  .ph-head { font-size: 0.94rem; }
  .ph-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .ph-field.has .ph-drop { grid-auto-flow: row; justify-items: center; text-align: center; }
  .ph-only { width: 100%; justify-content: center; }
  .pgrid { border-radius: 12px; }
  .lbx { grid-template-columns: 1fr; padding: 56px 10px 112px; }
  .lbx-fig { grid-column: 1; }
  .lbx-prev, .lbx-next { position: absolute; bottom: 20px; }
  .lbx-prev { left: 24%; }
  .lbx-next { right: 24%; }
  .lbx-count { bottom: 78px; }
}


/* 회원 전용 벽 (community.html #c-wall) */
.c-wall-wrap { padding-top: clamp(28px, 4vw, 48px); }
.c-wall { display: grid; justify-items: center; gap: 12px; max-width: 640px; margin-inline: auto; padding: clamp(28px, 5vw, 48px) clamp(20px, 4vw, 40px); text-align: center; }
.c-wall > .ico { width: 40px; height: 40px; color: var(--accent); }
.c-wall .lead { word-break: keep-all; }
.c-wall-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

/* ============================================================
   커뮤니티 정돈 (2026-10-29 · 홈과 같은 athometrip 식) — body[data-page="community"] 에만
   규칙: 화면 폭 안의 넓은 사진, 큰 문장 + 메뉴 줄, 카드 테두리 1px·모서리 8px·그림자 없음, 사이드 상자 머리는 크림색
   ============================================================ */
[data-page="community"] {
  --c-r: 8px;
  --c-tint: #ece7d3;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [data-page="community"] { --c-tint: #2c2a22; } }
:root[data-theme="dark"] [data-page="community"] { --c-tint: #2c2a22; }

/* 머리: 사진 + 문장 + 메뉴 줄 */
[data-page="community"] .c-hero { padding-top: 8px; }
[data-page="community"] .c-hero-photo { border-radius: var(--c-r); overflow: hidden; aspect-ratio: 1200 / 420; background: var(--bg-2); }
[data-page="community"] .c-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
[data-page="community"] .c-hero-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 40px; align-items: center; padding-top: 40px; }
[data-page="community"] .c-eyebrow { display: inline-block; font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 10px; }
[data-page="community"] .c-hero-intro h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.18; font-weight: 700; letter-spacing: -0.035em; word-break: keep-all; }
[data-page="community"] .c-hero-intro p { margin-top: 14px; color: var(--muted); word-break: keep-all; }
[data-page="community"] .c-link { display: grid; grid-template-columns: 36px auto 1fr 16px; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ink); }
[data-page="community"] .c-link img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
[data-page="community"] .c-link b { font-size: 19px; font-weight: 700; }
[data-page="community"] .c-link span { color: var(--muted); font-size: 13px; }
[data-page="community"] .c-link .ico { width: 16px; height: 16px; }
[data-page="community"] .c-link:hover b { color: var(--accent); }

/* 탭: 검은 알약 */
[data-page="community"] #c-body .tabs { gap: 8px; }
[data-page="community"] #c-body .tab { border: 1px solid var(--line-strong); border-radius: 999px; }
[data-page="community"] #c-body .tab[aria-selected="true"] { border-color: var(--ink); }

/* 카드·상자: 테두리 1px, 모서리 8px, 그림자 없음 */
[data-page="community"] .panel,
[data-page="community"] .post-card,
[data-page="community"] .ig-card { border-radius: var(--c-r); box-shadow: none; }
[data-page="community"] .post-card:hover { transform: none; box-shadow: none; border-color: var(--ink); }
[data-page="community"] .c-wall { border-radius: var(--c-r); box-shadow: none; }
[data-page="community"] .side .panel:not(.me-panel) { padding: 0 0 18px; overflow: hidden; }
[data-page="community"] .side .panel:not(.me-panel) > h3 { margin: 0 0 14px; padding: 14px 20px; background: var(--c-tint); font-size: 0.95rem; }
[data-page="community"] .side .panel:not(.me-panel) > :not(h3) { margin-inline: 20px; }

@media (max-width: 900px) {
  [data-page="community"] .c-hero-intro { grid-template-columns: 1fr; padding-top: 28px; }
  [data-page="community"] .c-hero-photo { aspect-ratio: 16 / 9; }
}
@media (max-width: 600px) {
  /* 모바일은 바로 아래 탭과 같은 내용이라 메뉴 줄을 접는다 */
  [data-page="community"] .c-hero-links { display: none; }
}

/* ===== lanna.css ===== */
/* ------------------------------------------------------------
   chiango · 란나(치앙마이) 장식 레이어
   원칙: 금색은 1px 선과 격자 문양에만. 사진과 액센트(탠저린)는 그대로.
   ------------------------------------------------------------ */
:root {
  --gold: #c9a24d;
  --gold-soft: rgba(201, 162, 77, 0.32);
  --gold-faint: rgba(201, 162, 77, 0.14);
  --font-thai: "Noto Sans Thai", "Wanted Sans Variable", sans-serif;
  /* 란나 직물의 마름모 격자를 단순화한 문양 */
  --lanna-lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M28 1L55 28L28 55L1 28Z' fill='none' stroke='%23c9a24d' stroke-opacity='.42' stroke-width='1'/%3E%3Ccircle cx='28' cy='28' r='1.7' fill='%23c9a24d' fill-opacity='.5'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] { --gold: #d9b56a; --gold-soft: rgba(217, 181, 106, 0.3); --gold-faint: rgba(217, 181, 106, 0.12); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --gold: #d9b56a; --gold-soft: rgba(217, 181, 106, 0.3); --gold-faint: rgba(217, 181, 106, 0.12); } }

/* ---------- 태국어 아이브로 ---------- */
.eyebrow.thai { font-family: var(--font-thai); text-transform: none; letter-spacing: 0.04em; font-size: 0.92rem; font-weight: 500; display: inline-flex; align-items: center; gap: 10px; }
.eyebrow.thai .lat { font-family: var(--font-display); font-weight: 600; font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; }
.eyebrow.thai .lat::before { content: ""; display: inline-block; width: 18px; height: 1px; background: var(--gold); margin-right: 10px; vertical-align: middle; }

/* ---------- 장식 괘선 (마름모 하나) ---------- */
.orn-rule { display: flex; align-items: center; gap: 14px; color: var(--gold); }
.orn-rule::before, .orn-rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-soft)); }
.orn-rule::after { background: linear-gradient(90deg, var(--gold-soft), transparent); }
.orn-rule .gem { width: 9px; height: 9px; border: 1.5px solid var(--gold); transform: rotate(45deg); flex: none; }
.orn-rule.short { max-width: 260px; }

/* ---------- 격자 배경 ---------- */
.lattice { position: relative; isolation: isolate; }
.lattice::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--lanna-lattice); background-size: 56px 56px; opacity: 0.55; mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 100%); -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 100%); }

/* 히어로 사진 뒤에 살짝 비껴 깔리는 직조 매트 */
.hero-visual .mat { position: absolute; inset: 18px -18px -18px 18px; z-index: -1; border-radius: 28px; background-image: var(--lanna-lattice); background-size: 40px 40px; opacity: 0.7; pointer-events: none; }
.hero-visual .mat::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid var(--gold-soft); }
.hero-visual { isolation: isolate; }

/* ---------- 란나 공예 섹션 ---------- */
.craft { background: var(--bg-2); border-block: 1px solid var(--line); }
.craft .inner { padding-block: var(--section-gap); display: grid; gap: clamp(28px, 4vw, 44px); }
.craft .head { display: grid; gap: 14px; max-width: 46em; }
.craft-row { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr; gap: clamp(14px, 1.8vw, 24px); align-items: end; }
.craft-row figure { display: grid; gap: 10px; }
.craft-row .frame { border-radius: 20px; }
.craft-row .frame::after { box-shadow: inset 0 0 0 1px var(--gold-faint); }
.craft-row figure:nth-child(1) .frame { aspect-ratio: 3 / 2; }
.craft-row figure:nth-child(2) .frame { aspect-ratio: 4 / 5; }
.craft-row figure:nth-child(3) .frame { aspect-ratio: 3 / 2; }
.craft-row figcaption { font-size: 0.86rem; color: var(--muted); display: flex; align-items: baseline; gap: 8px; }
.craft-row figcaption b { color: var(--ink); font-weight: 640; }
.craft-row figcaption .th { font-family: var(--font-thai); color: var(--gold); font-size: 0.82rem; }

/* ---------- 지역 카드 (어디에 묵을까요) ---------- */
.area .name { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.area .name .th { font-family: var(--font-thai); font-size: 0.78rem; color: var(--gold); font-weight: 500; }
.area .desc { font-size: 0.86rem; color: var(--muted); word-break: keep-all; }

/* ---------- 푸터 상단 격자 (은은하게) ---------- */
.foot.lattice::before { opacity: 0.22; mask-image: linear-gradient(to bottom, #000, transparent 55%); -webkit-mask-image: linear-gradient(to bottom, #000, transparent 55%); }

/* ---------- 내비 로그인 상태 ---------- */
.nav-auth { display: inline-flex; align-items: center; gap: 6px; }
.nav-auth[hidden] { display: none; }
.nav-auth .btn-sm { height: 38px; padding-inline: 14px; font-size: 0.88rem; }
.nav-auth [data-user-name] { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 계정 페이지 ---------- */
.account { display: grid; gap: 16px; }
.account .row { display: grid; grid-template-columns: 140px 1fr; gap: 8px 16px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 0.95rem; }
.account .row:first-child { border-top: 0; }
.account .row dt { color: var(--muted); }
.account .row dd { margin: 0; font-weight: 560; word-break: break-all; }

@media (max-width: 900px) {
  .craft-row { grid-template-columns: 1fr 1fr; }
  .craft-row figure:nth-child(1) { grid-column: 1 / -1; }
  .hero-visual .mat { inset: 12px -10px -10px 12px; }
  .nav-auth[data-auth-in] .btn-text { display: inline-block; }
}
@media (max-width: 600px) {
  .craft-row { grid-template-columns: 1fr; }
  .account .row { grid-template-columns: 1fr; }
}

/* ---------- 계정: 아바타 변경 ---------- */
.acct-avatar { position: relative; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; cursor: pointer; flex: none; background: var(--accent-soft); display: grid; place-items: center; }
.acct-avatar img { width: 100%; height: 100%; object-fit: cover; }
.acct-avatar .avatar-text { width: 100%; height: 100%; display: grid; place-items: center; font-size: 1.5rem; font-weight: 800; color: var(--accent); }
.acct-avatar input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.acct-avatar .acct-cam { position: absolute; right: 2px; bottom: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--bg); display: grid; place-items: center; pointer-events: none; }
.acct-avatar .acct-cam .ico { width: 13px; height: 13px; }

/* ===== home.css ===== */
/* 홈 (2026-10 개편 · athometrip 식 정돈) — body[data-page="home"] 에만 걸린다.
   규칙: 섹션 머리 하나(제목 32/부제), 모서리 8px, 카드 테두리 1px, 포인트 색은 탠저린 하나 */
[data-page="home"] {
  --h-r: 8px;
  --h-sec: clamp(64px, 8vw, 100px);
  --h-tint: #ece7d3;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [data-page="home"] { --h-tint: #2c2a22; } }
:root[data-theme="dark"] [data-page="home"] { --h-tint: #2c2a22; }

[data-page="home"] .hx { padding-top: var(--h-sec); }
[data-page="home"] .hx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
[data-page="home"] .hx-head h2 { font-size: clamp(1.35rem, 2.6vw, 2rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.25; }
[data-page="home"] .hx-head h2 em { font-style: normal; color: var(--accent); }
[data-page="home"] .hx-head p { color: var(--muted); margin-top: 8px; }
[data-page="home"] .hx-more { font-size: 14px; color: var(--muted); white-space: nowrap; }
[data-page="home"] .hx-more:hover { color: var(--ink); }

/* 히어로: 넓은 사진 + 검색 */
[data-page="home"] .hx-hero { position: relative; margin-top: 8px; border-radius: var(--h-r); overflow: hidden; aspect-ratio: 1200 / 500; background: var(--bg-2); }
[data-page="home"] .hx-hero > img, [data-page="home"] .hx-video { width: 100%; height: 100%; object-fit: cover; filter: brightness(.86); display: block; }
[data-page="home"] .hx-hero::after { content: ""; position: absolute; inset: 0 0 auto; height: 45%; background: linear-gradient(rgba(0, 0, 0, .32), transparent); pointer-events: none; }
[data-page="home"] .hx-brand { position: absolute; top: clamp(18px, 3vw, 32px); left: clamp(18px, 3vw, 36px); z-index: 1; display: grid; gap: 6px; color: #fff; }
[data-page="home"] .hx-brand svg { width: clamp(120px, 15vw, 200px); height: auto; aspect-ratio: 1836.64 / 605; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .35)); }
[data-page="home"] .hx-brand span { padding-left: .5em; font-size: clamp(13px, 1.3vw, 16px); font-weight: 600; letter-spacing: .02em; text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
[data-page="home"] .hx-search { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); width: min(760px, calc(100% - 32px)); display: grid; grid-template-columns: 1.3fr 1fr .7fr auto; align-items: center; background: var(--surface); border-radius: 999px; padding: 8px 8px 8px 26px; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .35); }
[data-page="home"] .hx-search .f { padding: 2px 14px; border-left: 1px solid var(--line); min-width: 0; }
[data-page="home"] .hx-search .f:first-child { border-left: 0; padding-left: 0; }
[data-page="home"] .hx-search label { display: block; font-size: 11px; color: var(--muted); }
[data-page="home"] .hx-search select { width: 100%; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); background: transparent; border: 0; padding: 0; appearance: none; cursor: pointer; }
[data-page="home"] .hx-search button { font: inherit; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; background: var(--ink); color: var(--surface); border: 0; border-radius: 999px; padding: 13px 24px; cursor: pointer; }

/* 인트로: 큰 문장 + 지역 목록 */
[data-page="home"] .hx-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: center; padding-top: 40px; }
[data-page="home"] .hx-intro h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1.15; font-weight: 700; letter-spacing: -0.035em; }
[data-page="home"] .hx-pill { display: inline-block; vertical-align: -0.12em; width: 2.2em; height: 1.05em; border-radius: 999px; overflow: hidden; position: relative; margin-right: .08em; }
[data-page="home"] .hx-pill img { width: 100%; height: 100%; object-fit: cover; }
[data-page="home"] .hx-pill em { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-style: normal; font-size: .42em; font-weight: 600; background: rgba(0, 0, 0, .22); }
[data-page="home"] .hx-intro p { margin-top: 14px; color: var(--muted); }
[data-page="home"] .hx-area { display: grid; grid-template-columns: 36px auto 1fr 16px; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ink); }
[data-page="home"] .hx-area img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
[data-page="home"] .hx-area b { font-size: 19px; font-weight: 700; }
[data-page="home"] .hx-area span { color: var(--muted); font-size: 13px; }
[data-page="home"] .hx-area:hover b { color: var(--accent); }

/* 종류 바로가기 */
[data-page="home"] .hx-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 40px; }
[data-page="home"] .hx-cat { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--h-r); }
[data-page="home"] .hx-cat .ico { width: 22px; height: 22px; color: var(--accent); flex: none; }
[data-page="home"] .hx-cat b { font-size: 15px; }
[data-page="home"] .hx-cat .count { margin-left: auto; font-size: 12px; color: var(--muted); }
[data-page="home"] .hx-cat:hover { border-color: var(--ink); }

/* 띠 배너 (같은 높이) */
[data-page="home"] .hx-band { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 120px; padding: 24px 40px; border-radius: var(--h-r); overflow: hidden; color: #fff; }
[data-page="home"] .hx-band.photo { background: #333; }
[data-page="home"] .hx-band.photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
[data-page="home"] .hx-band.color { background: var(--accent); }
[data-page="home"] .hx-band > div { position: relative; }
[data-page="home"] .hx-band .tag { display: inline-block; border: 1px solid currentColor; border-radius: 999px; font-size: 11px; padding: 1px 8px; margin-bottom: 8px; }
[data-page="home"] .hx-band b { display: block; font-size: clamp(1.05rem, 2vw, 1.4rem); font-weight: 700; letter-spacing: -0.02em; }
[data-page="home"] .hx-band small { font-size: 13px; opacity: .92; }
[data-page="home"] .hx-band .btn-w { position: relative; background: #fff; color: #15181a; font-size: 13px; font-weight: 600; padding: 10px 16px; border-radius: 6px; white-space: nowrap; }

/* 추천 상품 → 순위 카드 */
[data-page="home"] #deals .tabs { margin-bottom: 20px; }
[data-page="home"] .deal-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; counter-reset: rank; }
[data-page="home"] .deal-grid .deal:not(.hide) { counter-increment: rank; }
[data-page="home"] .deal-grid .deal { background: none; border: 0; box-shadow: none; border-radius: 0; }
[data-page="home"] .deal-grid .deal .frame { position: relative; display: block; aspect-ratio: 1; border-radius: 4px; overflow: hidden; margin-bottom: 10px; }
[data-page="home"] .deal-grid .deal .frame img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
[data-page="home"] .deal-grid .deal .frame::after { content: counter(rank); position: absolute; left: 12px; bottom: 0; font-family: var(--font-display); font-size: 44px; font-weight: 700; font-style: italic; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .3); pointer-events: none; }
[data-page="home"] .deal-grid .deal-body { padding: 0; }
[data-page="home"] .deal-grid .h-card { font-size: 15px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
[data-page="home"] .deal-grid .place { font-size: 11px; color: var(--accent); background: var(--accent-soft); border-radius: 3px; padding: 0 5px; }
[data-page="home"] .deal-grid .meta { font-size: 12px; color: var(--muted); }
[data-page="home"] .deal-grid .price { margin-top: 4px; }
[data-page="home"] .deal-grid .price .num { font-size: 17px; }
[data-page="home"] .hx-cta { display: block; width: min(380px, 100%); margin: 32px auto 0; background: var(--ink); color: var(--surface); text-align: center; border-radius: 4px; padding: 14px; font-weight: 600; font-size: 14px; }

/* 매거진: 큰 글 + 목록 */
[data-page="home"] #magazine .mag { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; }
[data-page="home"] #magazine .mag-feature, [data-page="home"] #magazine .mag-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--h-r); overflow: hidden; }
[data-page="home"] #magazine .mag-feature { padding: 0 0 20px; }
[data-page="home"] #magazine .mag-feature .frame { border-radius: 0; margin-bottom: 14px; aspect-ratio: 16 / 9; }
[data-page="home"] #magazine .mag-feature > :not(.frame) { padding: 0 22px; }
[data-page="home"] #magazine .mag-list { display: flex; flex-direction: column; padding: 10px 0; }
[data-page="home"] #magazine .mag-list::before { content: "최근 글"; display: block; background: var(--h-tint); margin: -10px 0 8px; padding: 14px 22px; font-weight: 600; }
[data-page="home"] #magazine .mag-item { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; padding: 10px 22px; }
[data-page="home"] #magazine .mag-item .frame { width: 64px; height: 64px; border-radius: 2px; }
[data-page="home"] #magazine .mag-item h3 { font-size: 15px; font-weight: 600; line-height: 1.4; }

/* 누구와 */
[data-page="home"] .hx-who { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
[data-page="home"] .hx-who a { position: relative; aspect-ratio: 3 / 4; border-radius: var(--h-r); overflow: hidden; color: #fff; }
[data-page="home"] .hx-who img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur) var(--ease-out); }
[data-page="home"] .hx-who a:hover img { transform: scale(1.04); }
[data-page="home"] .hx-who a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .62)); }
[data-page="home"] .hx-who div { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; }
[data-page="home"] .hx-who b { display: block; font-size: 20px; }
[data-page="home"] .hx-who span { font-size: 13px; opacity: .92; }

/* 커뮤니티: 왼쪽 안내 + 오른쪽 게시판 */
[data-page="home"] #community .hx-local { display: grid; grid-template-columns: 320px 1fr; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--h-r); padding: 28px; }
[data-page="home"] #community .hx-local small { color: var(--muted); font-size: 13px; }
[data-page="home"] #community .hx-local h3 { font-size: 22px; font-weight: 700; margin: 2px 0 12px; }
[data-page="home"] #community .hx-local p { color: var(--muted); font-size: 14px; line-height: 1.65; }
[data-page="home"] #community .hx-local .facts { list-style: none; padding: 0; margin: 14px 0 20px; display: grid; gap: 8px; font-size: 13px; color: var(--ink-2); }
[data-page="home"] #community .hx-local .facts li { display: flex; gap: 8px; align-items: center; }
[data-page="home"] #community .hx-local .facts .ico { width: 16px; height: 16px; color: var(--accent); }
[data-page="home"] #community .hx-btn { display: block; background: var(--ink); color: var(--surface); text-align: center; border-radius: 4px; padding: 13px; font-weight: 600; font-size: 14px; }
[data-page="home"] #community .board { background: var(--surface-2); border-radius: var(--h-r); padding: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; }
[data-page="home"] #community .panel { background: var(--surface); border: 0; border-radius: 6px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); padding: 16px; min-width: 0; }
[data-page="home"] #community .panel .post { grid-template-columns: 32px 1fr; }
[data-page="home"] #community .panel .post .btn { display: none; }
[data-page="home"] #community .panel .post .avatar { width: 32px; height: 32px; }

/* Why */
[data-page="home"] .hx-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
[data-page="home"] .hx-why > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--h-r); padding: 64px 24px 24px; }
[data-page="home"] .hx-why small { display: block; color: var(--muted); font-size: 12px; }
[data-page="home"] .hx-why b { display: block; font-size: 21px; font-weight: 700; margin-top: 2px; }
[data-page="home"] .hx-why p { color: var(--muted); font-size: 14px; line-height: 1.6; margin-top: 10px; }

/* 모바일: athometrip 모바일과 같은 규칙 — 사진 낮게, 제목 작게, 목록은 3칸 격자·옆으로 넘기기 */
@media (max-width: 900px) {
  [data-page="home"] .hx-head { margin-bottom: 16px; }
  [data-page="home"] .hx-head p { font-size: 14px; margin-top: 4px; }
  [data-page="home"] .hx-more { display: none; }
  /* 모바일 대문 영상은 좌우 여백 없이 화면 끝까지(앳홈트립처럼, 10/29 대표 요청) */
  [data-page="home"] .hx-hero { aspect-ratio: 390 / 300; margin-inline: calc(-1 * var(--gutter)); border-radius: 0; }
  [data-page="home"] .hx-search { grid-template-columns: 1fr auto; border-radius: 12px; padding: 10px 10px 10px 16px; bottom: 12px; }
  [data-page="home"] .hx-search .f:nth-child(2), [data-page="home"] .hx-search .f:nth-child(3) { display: none; }
  [data-page="home"] .hx-search button { padding: 12px 18px; }
  [data-page="home"] .hx-intro { gap: 12px; padding-top: 24px; }
  [data-page="home"] .hx-intro p { display: none; }
  [data-page="home"] .hx-area { grid-template-columns: 28px 1fr 14px; gap: 8px; padding: 10px 0; }
  [data-page="home"] .hx-area img { width: 28px; height: 28px; }
  [data-page="home"] .hx-area b { font-size: 15px; }
  [data-page="home"] .hx-area span { display: none; }
  [data-page="home"] .hx-cats { grid-template-columns: 1fr 1fr; margin-top: 28px; }
  [data-page="home"] .hx-band { padding: 20px; min-height: 0; }
  [data-page="home"] .hx-band .btn-w { display: none; }
  [data-page="home"] .deal-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; row-gap: 22px; }
  [data-page="home"] .deal-grid .deal .frame::after { font-size: 30px; left: 8px; }
  [data-page="home"] .deal-grid .h-card { font-size: 13px; }
  [data-page="home"] .deal-grid .price .num { font-size: 15px; }
  [data-page="home"] .deal-grid .meta { display: none; }
  [data-page="home"] #magazine .mag { grid-template-columns: 1fr; }
  [data-page="home"] .hx-who { display: flex; overflow-x: auto; scrollbar-width: none; gap: 10px; }
  [data-page="home"] .hx-who > a { flex: 0 0 44%; }
  [data-page="home"] #community .hx-local { grid-template-columns: 1fr; padding: 20px; }
  [data-page="home"] #community .board { grid-template-columns: 1fr; }
  [data-page="home"] .hx-why { grid-template-columns: 1fr; gap: 10px; }
  [data-page="home"] .hx-why > div { padding: 24px 20px; }
}
@media (max-width: 420px) { [data-page="home"] .deal-grid .wish { display: none; } }

/* 회원 사진이 6장 미만이면 moments.js 가 채우지 않는다 → 빈 섹션은 숨김 */
[data-page="home"] #moments:has(.moments-grid:empty) { display: none; }

/* 순위 숫자를 사진·배지 위로 */
[data-page="home"] .deal-grid .deal .frame::after { z-index: 2; }
/* 모바일 종류 칸: 이름 위, 개수 아래 */
@media (max-width: 900px) {
  [data-page="home"] .hx-cat { flex-wrap: wrap; gap: 4px 10px; padding: 14px; }
  [data-page="home"] .hx-cat .count { margin-left: 32px; flex-basis: 100%; }
}
/* tokens.css 의 .frame::after(사진 위 덮개, inset:0) 를 순위 숫자 자리로 되돌린다 */
[data-page="home"] .deal-grid .deal .frame::after { top: auto; right: auto; height: auto; width: auto; background: none; line-height: 1; padding-bottom: 6px; }

/* 히어로 지역 알약 회전 */
[data-page="home"] .hx-pill { width: 2.7em; }
[data-page="home"] .hx-pill-track { display: flex; flex-direction: column; height: 100%; transition: transform .7s var(--ease-out); }
[data-page="home"] .hx-pill .it { position: relative; flex: none; height: 100%; }
[data-page="home"] .hx-pill .it img { width: 100%; height: 100%; object-fit: cover; }
[data-page="home"] .hx-pill .it em { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-style: normal; font-size: .4em; font-weight: 600; letter-spacing: -0.02em; background: rgba(0, 0, 0, .25); }

/* 검색·앵커로 이동할 때 섹션 제목이 상단 바 밑에 가려지지 않게 */
[data-page="home"] .hx { scroll-margin-top: calc(var(--nav-h) + 12px); }
/* 대문 영상: iOS 저전력 모드 등에서 뜨는 재생 버튼 숨김(재생은 sections.js 가 첫 터치 때 다시 시도) */
[data-page="home"] .hx-video::-webkit-media-controls, [data-page="home"] .hx-video::-webkit-media-controls-start-playback-button, [data-page="home"] .hx-video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }
[data-page="home"] .hx-video { pointer-events: none; }

/* ===== product.css ===== */
/* 상품 상세 (2026-10 개편 · athometrip 식) — body[data-page="product"] 에만.
   사진 → 제목·평점·특징 → 따라오는 탭 → 포인트 카드 → 본문 → 후기(3개 + 더 보기). 본문 폭은 글 읽기 좋은 640 안팎 */
[data-page="product"] .p-gal-wrap { padding-top: 16px; }
[data-page="product"] .gallery { grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr); gap: 8px; }
[data-page="product"] .gallery .frame.main { border-radius: 8px; aspect-ratio: 16 / 9; }
[data-page="product"] .gallery .thumbs { gap: 8px; }
[data-page="product"] .gallery .thumb { border-radius: 8px; aspect-ratio: auto; }

[data-page="product"] .p-head { padding-top: 20px; padding-bottom: 8px; gap: 10px; }
[data-page="product"] .p-head #p-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem) !important; letter-spacing: -0.03em; }
[data-page="product"] .p-head .p-rating-row { background: var(--surface-2); border-radius: 8px; padding: 12px 16px; width: fit-content; max-width: 100%; }
[data-page="product"] .p-head .meta-row { gap: 6px; }

/* 본문 + 오른쪽 카드 폭: 1040 안에 640 + 360 */
[data-page="product"] .product-grid { max-width: 1080px; margin-inline: auto; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; padding-top: 24px !important; }
[data-page="product"] .product-content { display: grid; gap: 40px; align-content: start; }
[data-page="product"] .p-section > h2.h-section, [data-page="product"] .itin-head h2 { font-size: 1.2rem !important; font-weight: 700; letter-spacing: -0.02em; }
[data-page="product"] .p-section { scroll-margin-top: calc(var(--nav-h) + 56px); }
[data-page="product"] #p-reviews { scroll-margin-top: calc(var(--nav-h) + 16px); }

/* 따라오는 탭 */
[data-page="product"] .p-tabs { position: sticky; top: var(--nav-h); z-index: 20; display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; background: var(--bg); border-bottom: 1px solid var(--line); margin-bottom: -16px; }
[data-page="product"] .p-tabs::-webkit-scrollbar { display: none; }
[data-page="product"] .p-tabs a { flex: none; padding: 14px 0 12px; font-size: 15px; color: var(--muted); border-bottom: 2px solid transparent; }
[data-page="product"] .p-tabs a.on { color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); }

/* 포인트 → Point 1·2·3 회색 카드 */
[data-page="product"] .hl-grid { grid-template-columns: 1fr; gap: 10px; counter-reset: pt; }
[data-page="product"] .hl-grid li { counter-increment: pt; display: grid; gap: 6px; padding: 16px 18px; border: 0; border-radius: 6px; background: var(--surface-2); font-size: 15px; font-weight: 600; }
[data-page="product"] .hl-grid li::before { content: "Point " counter(pt); justify-self: start; font-size: 11px; font-weight: 700; color: var(--surface); background: var(--muted); border-radius: 2px; padding: 1px 6px; }
[data-page="product"] .hl-grid li .ico { display: none; }

/* 오른쪽 카드 머리 */
[data-page="product"] .price-card { border-radius: 8px; }

/* 후기 더 보기 */
[data-page="product"] .p-rv-more { width: 100%; margin-top: 12px; }

@media (max-width: 1080px) {
  [data-page="product"] .product-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  [data-page="product"] .p-gal-wrap { padding-top: 0; width: 100%; }
  [data-page="product"] .gallery { grid-template-columns: 1fr; }
  [data-page="product"] .gallery .frame.main { border-radius: 0; aspect-ratio: 4 / 3; }
  [data-page="product"] .gallery .thumbs { display: none; }
  [data-page="product"] .product-content { gap: 32px; }
  [data-page="product"] .p-tabs { gap: 18px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  [data-page="product"] .p-tabs a { font-size: 14px; }
}

/* PC 사진: 큰 사진과 오른쪽 작은 사진 3장의 높이를 맞춘다 (전엔 큰 사진 아래가 비었다) */
@media (min-width: 701px) {
  [data-page="product"] .gallery:not(.single) { height: clamp(300px, 32vw, 440px); }
  [data-page="product"] .gallery:not(.single) .frame.main { aspect-ratio: auto; height: 100%; }
  [data-page="product"] .gallery:not(.single) .thumbs { grid-template-rows: repeat(3, minmax(0, 1fr)); height: 100%; }
  [data-page="product"] .gallery:not(.single) .thumb { height: 100%; }
}
@media (min-width: 701px) {
  [data-page="product"] .gallery:not(.single) { grid-template-rows: 100%; overflow: hidden; }
  [data-page="product"] .gallery:not(.single) > *, [data-page="product"] .gallery:not(.single) .thumb { min-height: 0; }
  [data-page="product"] .gallery:not(.single) .thumb img, [data-page="product"] .gallery:not(.single) .frame.main img { height: 100%; }
}
/* 제목·큐레이터 띠를 아래 본문 칸과 같은 선에 맞춘다 (사진만 넓게) */
[data-page="product"] .p-head, [data-page="product"] #p-curator-wrap { max-width: 1080px; margin-inline: auto; }

/* 이용안내 (#p-guide, js/product.js renderGuide) */
[data-page="product"] .p-guide { display: grid; gap: 10px; }
[data-page="product"] .p-guide > li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
[data-page="product"] .p-guide .n { font-family: var(--font-display); font-weight: 800; color: var(--accent); }
[data-page="product"] .p-guide b { display: block; font-weight: 720; margin-bottom: 6px; }
[data-page="product"] .p-guide ul { display: grid; gap: 4px; }
[data-page="product"] .p-guide ul li { position: relative; padding-left: 12px; color: var(--ink-2); line-height: 1.65; word-break: keep-all; }
[data-page="product"] .p-guide ul li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 4px; height: 4px; border-radius: 50%; background: var(--muted); }
[data-page="product"] .p-guide a { text-decoration: underline; text-underline-offset: 3px; }

/* 숙박 호텔 카드(js/product-hotel.js) */
.stay-btn, .hotel-chip { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }
.stay-btn .ico, .hotel-chip .ico { width: 14px; height: 14px; color: var(--muted); flex: none; }
.hotel-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hotel-chip { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); text-decoration: none; font-size: .92rem; }
.hotel-chip small { color: var(--accent); font-weight: 700; }
.hotel-chip:hover { border-color: var(--ink-2); }
.hcard-wrap { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .55); display: grid; place-items: center; padding: 16px; }
.hcard-wrap[hidden] { display: none; }
.hcard { position: relative; width: min(760px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; background: var(--bg); border-radius: 12px; }
.hcard-x { position: absolute; top: 10px; right: 10px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .92); border: 0; cursor: pointer; }
.hcard-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.hcard-photos figure { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-2); }
.hcard-photos figure.main { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.hcard-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hcard-photos figcaption { position: absolute; right: 4px; bottom: 4px; max-width: 90%; padding: 1px 6px; border-radius: 4px; background: rgba(0, 0, 0, .5); color: #fff; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hcard-photos figcaption a { color: #fff; }
.hcard-info { display: grid; gap: 8px; padding: 18px 20px 22px; }
.hcard-info h3 { font-size: 1.25rem; margin: 0; padding-right: 40px; }
.hcard-info .ico { width: 14px; height: 14px; vertical-align: -2px; }
.hcard-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.hcard-src { margin-top: 4px; }
@media (max-width: 600px) { .hcard-wrap { padding: 0; align-items: end; } .hcard { border-radius: 14px 14px 0 0; max-height: 92dvh; } }