/* .com 과 같은 글꼴 셋 */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;900&family=Noto+Sans+KR:wght@300;400;500;600;700&family=Montserrat:wght@400;500;600;700&display=swap');

@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════
   TourFos.net — 디자인 시스템

   브랜드는 딥 오션 틸(신뢰·커뮤니티), CTA와 할인은 선셋 오렌지(구매 동기).
   두 색이 보색이라 사진 위에서도 서로 먹히지 않는다.
   색·간격은 전부 아래 토큰에서만 가져다 쓴다.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── TourFos 공통 색 (.com 과 같은 값) ─────────────────────── */
  --tf-navy:    #0d1f3c;
  --tf-deep:    #142647;
  --tf-ocean:   #1a6fad;
  --tf-sky:     #3b9fd4;
  --tf-aqua:    #00c2cb;
  --tf-coral:   #e85d3a;
  --tf-gold:    #e8a020;
  --tf-gold-lt: #f5c84a;
  --tf-text:    #1c2b3a;
  --tf-white:   #ffffff;
  --tf-offwhite:#f8fafd;
  --tf-gray-1:  #f2f5f9;
  --tf-gray-2:  #e0e7ef;
  --tf-gray-3:  #b0bcc8;
  --tf-gray-4:  #7a8fa6;
  --tf-gray-5:  #4a5e72;

  /* 글꼴도 .com 과 같은 셋을 쓴다.
     display = 제목·로고 / ui = 메뉴·버튼 / body = 본문 */
  --font-display: 'Playfair Display', 'Noto Serif KR', Georgia, serif;
  --font-ui:      'Montserrat', 'Noto Sans KR', sans-serif;
  --font-body:    'Noto Sans KR', 'Montserrat', sans-serif;

  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-full: 9999px;

  --shadow-sm: 0 2px 8px rgba(13,31,60,.08);
  --shadow-md: 0 4px 20px rgba(13,31,60,.12);
  --shadow-lg: 0 8px 40px rgba(13,31,60,.16);
  --shadow-xl: 0 16px 60px rgba(13,31,60,.22);

  --dur-fast: 180ms;
  --dur-base: 300ms;
  --ease: cubic-bezier(.4,0,.2,1);

  /* ── .net 안에서 쓰던 이름들을 위 값에 이어 붙인다 ─────────────
     화면 코드를 건드리지 않고 색만 갈아 끼우려고 이렇게 둔다. */
  --brand:     var(--tf-ocean);
  --brand-600: #15588a;
  --brand-700: #104468;
  --brand-50:  #eaf3fa;
  --brand-100: #d3e6f4;
  --brand-soft: rgba(26,111,173,.08);

  --accent:    var(--tf-coral);
  --accent-600:#d24a29;
  --accent-50: #fdeee9;

  --sale:  var(--tf-coral);
  --star:  var(--tf-gold);
  --green: #16a34a;
  --green-50: #ecfdf5;
  --green-700: #047857;
  --amber-50: #fffbeb;
  --amber-200: #fde68a;
  --amber-700: #b45309;
  --amber-800: #92400e;
  --violet-50: #f5f3ff;
  --violet-700: #6d28d9;
  --red-50: #fef2f2;

  --ink:     var(--tf-text);
  --ink-2:   var(--tf-gray-5);
  --muted:   var(--tf-gray-4);
  --line:    var(--tf-gray-2);
  --line-2:  var(--tf-gray-1);
  --surface: var(--tf-gray-1);
  --surface-2: var(--tf-gray-2);
  --bg:      var(--tf-white);
  --bg-2:    var(--tf-gray-1);

  --shadow-card: var(--shadow-sm);
  --shadow-pop:  var(--shadow-lg);

  --wrap: 1320px;          /* .com 과 같은 폭 */
  --radius: var(--radius-md);
}

/* ── 리셋 ───────────────────────────────────────────────────────── */

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

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

body {
  margin: 0;
  background: var(--tf-white);
  color: var(--tf-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: normal;
  word-break: keep-all;              /* 한국어는 어절 단위로 끊는다 */
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; letter-spacing: inherit; cursor: pointer; }
input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip:focus {
  position: fixed; left: 16px; top: 16px; z-index: 100; width: auto; height: auto;
  clip: auto; padding: 10px 16px; background: var(--brand); color: #fff;
  border-radius: 8px; font-weight: 700;
}

/* ── 레이아웃 ───────────────────────────────────────────────────── */

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 760px; margin: 0 auto; }
.page { padding: 28px 0 56px; }
.stack > * + * { margin-top: 28px; }
.row { display: flex; gap: 12px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.row-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; }

/* ── 헤더 ───────────────────────────────────────────────────────── */

.hdr {
  position: sticky; top: 0; z-index: 1000;
  background: var(--tf-white);
  border-bottom: 1px solid var(--tf-gray-2);
  transition: box-shadow var(--dur-base) var(--ease);
}
.hdr-top { display: flex; align-items: center; gap: 32px; height: 70px; }
.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo .mark {
  width: 38px; height: 38px; flex: none;
  background: linear-gradient(135deg, var(--tf-ocean), var(--tf-aqua));
  border-radius: 10px;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 20px; font-weight: 700; color: #fff; letter-spacing: -1px;
}
.logo .name {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700;
  color: var(--tf-navy); letter-spacing: -.5px;
}
.logo .fos { color: var(--tf-ocean); }
.logo .tld { color: var(--tf-gray-3); font-size: 15px; }
.logo .tag {
  display: block; margin-top: 1px;
  font-family: var(--font-ui);
  font-size: 9.5px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--tf-gray-4);
}
.hdr-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.hdr-nav .txt { padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.hdr-nav .txt:hover { background: var(--surface); color: var(--brand); }
.icon-btn {
  position: relative; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 8px; color: var(--ink-2);
}
.icon-btn:hover { background: var(--surface); color: var(--brand); }
.dot {
  position: absolute; right: 3px; top: 3px; min-width: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 800; line-height: 16px; text-align: center;
}
.avatar-btn {
  display: flex; align-items: center; gap: 8px; margin-left: 4px;
  padding: 4px 12px 4px 4px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 13px; font-weight: 700;
}
.avatar-btn:hover { background: var(--surface); }
.cat-bar { display: flex; border-top: 1px solid var(--line-2); overflow-x: auto; scrollbar-width: none; }
.cat-bar::-webkit-scrollbar { display: none; }
.cat-bar a {
  display: flex; align-items: center; gap: 4px; height: 46px; padding: 0 11px;
  white-space: nowrap; position: relative;
  font-family: var(--font-ui);
  font-size: 14px; font-weight: 600; color: var(--tf-gray-5);
  border-radius: var(--radius-sm);
  transition: all var(--dur-fast) var(--ease);
}
.cat-bar a:hover { color: var(--tf-ocean); background: var(--brand-soft); }
.cat-bar a[aria-current] { color: var(--tf-ocean); }
.cat-bar a[aria-current]::after {
  content: ''; position: absolute; left: 8px; right: 8px; bottom: 6px;
  height: 2px; border-radius: 2px; background: var(--tf-ocean);
}

/* ── 검색창 ─────────────────────────────────────────────────────── */

.search {
  display: flex; align-items: center; gap: 8px; height: 44px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0 6px 0 16px; background: #fff;
}
.search:focus-within { border-color: var(--brand); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; }
.search input::placeholder { color: var(--muted); }
.search .go {
  height: 32px; padding: 0 16px; border: 0; border-radius: 999px;
  background: var(--brand); color: #fff; font-size: 13px; font-weight: 700;
}
.search .go:hover { background: var(--brand-600); }
.search-lg { height: 56px; padding-left: 18px; box-shadow: var(--shadow-card); }
.search-lg input { font-size: 16px; }
.search-lg .go { height: 44px; padding: 0 22px; font-size: 15px; }
.hdr-search { flex: 1; max-width: 440px; }
.hdr-search-m { display: none; padding-bottom: 12px; }

/* ── 버튼 ───────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 24px; border: 0;
  border-radius: var(--radius-full);
  font-family: var(--font-ui);
  font-size: 14px; font-weight: 700; white-space: nowrap;
  background: linear-gradient(135deg, var(--tf-ocean), var(--tf-sky));
  color: #fff;
  box-shadow: 0 4px 20px rgba(26,111,173,.35);
  transition: all var(--dur-base) var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(26,111,173,.45); }
.btn:disabled { opacity: .4; pointer-events: none; }
.btn-cta {
  background: linear-gradient(135deg, var(--tf-coral), #f07a58);
  box-shadow: 0 4px 20px rgba(232,93,58,.35);
}
.btn-cta:hover { box-shadow: 0 8px 28px rgba(232,93,58,.45); }         /* 구매 동선의 최종 CTA. 화면당 하나. */
.btn-cta:hover { background: var(--accent-600); }
.btn-outline {
  background: transparent; color: var(--tf-ocean);
  /* 테두리가 gray-2 였을 때는 흰 바탕에서 거의 보이지 않았다 */
  border: 1.5px solid var(--tf-gray-3); box-shadow: none;
}
.btn-outline:hover {
  background: transparent; border-color: var(--tf-ocean);
  transform: translateY(-1px); box-shadow: none;
}
.btn-ghost { background: transparent; color: var(--tf-gray-5); box-shadow: none; }
.btn-ghost:hover { background: var(--tf-gray-1); transform: none; box-shadow: none; }
.btn-dark { background: var(--ink); }
.btn-dark:hover { background: #000; }
.btn-sm { height: 34px; padding: 0 18px; font-size: 13px; border-radius: var(--radius-full); }
.btn-lg { height: 54px; padding: 0 24px; font-size: 16px; }
.btn-block { display: flex; width: 100%; }

/* ── 칩 · 배지 ──────────────────────────────────────────────────── */

.bdg { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 11px; font-weight: 700;
       background: var(--surface-2); color: var(--ink-2); }
.bdg.confirm { background: var(--brand-50); color: var(--brand-700); }
.bdg.cancel  { background: var(--green-50); color: var(--green-700); }
.bdg.lowest  { background: var(--amber-50); color: var(--amber-700); }

.chip {
  display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap;
}
.chip:hover { border-color: rgb(78 89 104 / .4); }
.chip.on { border-color: var(--brand); background: var(--brand); color: #fff; }
.chip.clear { border-color: var(--accent); background: var(--accent-50); color: var(--accent-600); font-weight: 700; }

.tag {
  display: inline-block; padding: 5px 10px; border-radius: 999px;
  background: var(--surface); font-size: 12.5px; font-weight: 600; color: var(--ink-2);
}
.tag:hover { background: var(--surface-2); }
.tag.on { background: var(--brand); color: #fff; }

.chip-gray  { background: var(--surface-2); color: var(--ink-2); }
.chip-brand { background: var(--brand-50); color: var(--brand-700); }
.chip-green { background: var(--green-50); color: var(--green-700); }
.chip-amber { background: var(--amber-50); color: var(--amber-700); }
.status { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11.5px; font-weight: 800; }

.kind { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 11px; font-weight: 800; }
.kind.story    { background: var(--brand-50); color: var(--brand-700); }
.kind.tip      { background: var(--amber-50); color: var(--amber-700); }
.kind.question { background: var(--violet-50); color: var(--violet-700); }

/* ── 폼 ─────────────────────────────────────────────────────────── */

.field { display: block; }
.field + .field { margin-top: 16px; }
.label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; }
.label .req { color: var(--accent); }
.hint { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.input, .select, .textarea {
  width: 100%; height: 46px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; outline: 0;
}
.textarea { height: auto; padding: 12px 14px; line-height: 1.75; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--brand); }
.input::placeholder, .textarea::placeholder { color: var(--muted); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.check {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer;
}
.check input { accent-color: var(--brand); }
.check:has(input:checked) { border-color: var(--brand); background: var(--brand-50); color: var(--brand-700); }

/* ── 섹션 · 카드 ────────────────────────────────────────────────── */

.sec { margin-top: 40px; }
.sec:first-child { margin-top: 0; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.sec-head h2 {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 700; letter-spacing: -.5px;
  color: var(--tf-navy); line-height: 1.25;
}
.sec-head .sub { margin-top: 6px; font-size: 13.5px; color: var(--tf-gray-4); }
.sec-head .more {
  flex: none; font-family: var(--font-ui);
  font-size: 13px; font-weight: 600; color: var(--tf-ocean);
}
.sec-head .more:hover { color: var(--brand); }

.card-box {
  border: 1px solid var(--tf-gray-2); border-radius: var(--radius-lg);
  padding: 20px; background: var(--tf-white);
  box-shadow: var(--shadow-sm);
  transition: all var(--dur-base) var(--ease);
}
.card-box.pad-0 { padding: 0; overflow: hidden; }
.box-head { padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--surface);
            font-size: 14px; font-weight: 800; }

/* 가로 스크롤 레일 */
.rail { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: 0 0 auto; }

.thumb { position: relative; border-radius: var(--radius); overflow: hidden; background: #eef0f3; }
.thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.thumb-4x3 { aspect-ratio: 4 / 3; }
.thumb-5x4 { aspect-ratio: 5 / 4; }
/* 여행경험 카드만 좀 더 납작하게.
   이 카드는 사진이 아니라 '무엇이 기록되어 있는가' 를 먼저 보여 주는 것이 목적이다. */
.exp-card .thumb { aspect-ratio: 4 / 3; }
.thumb-1x1 { aspect-ratio: 1 / 1; }

/* ── 여행기 카드 ────────────────────────────────────────────────── */

.post-rail { width: 264px; }
.post-rail:hover .thumb img { transform: scale(1.04); }
.post-rail:hover .card-title { color: var(--brand); }
.post-dest { margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--brand); }
.who { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); min-width: 0; }
.who img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; background: #eef0f3; flex: none; }
.who b { font-weight: 600; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); }

.post-row { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line-2); }
.post-row:hover .post-title { color: var(--brand); }
.post-title {
  margin-top: 6px; font-size: 17px; font-weight: 800; line-height: 1.35; letter-spacing: -.02em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.post-excerpt {
  margin-top: 6px; font-size: 13.5px; line-height: 1.65; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.post-row .thumb { width: 132px; flex: none; }

/* 여행기에 태그된 상품 — 글에서 예약으로 넘어가는 통로 */
.tagged {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 6px 12px 6px 6px; border: 1px solid var(--line); border-radius: 10px; background: #fff;
}
.tagged:hover { border-color: var(--brand); }
.tagged img { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; flex: none; background: #eef0f3; }
.tagged .t { font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tagged .go { flex: none; font-size: 12.5px; font-weight: 800; color: var(--brand); }

/* ── 히어로 ─────────────────────────────────────────────────────── */

.hero {
  position: relative; overflow: hidden; padding: 64px 0;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(to bottom, var(--brand-50), #fff);
}
.hero::after {
  content: ""; position: absolute; right: -96px; top: -96px;
  width: 420px; height: 420px; border-radius: 50%;
  border: 32px solid rgb(15 138 128 / .05); pointer-events: none;
}
.hero .wrap { position: relative; }
.eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .04em; color: var(--brand); }
.hero h1 {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: clamp(30px, 4.5vw, 46px);
  font-weight: 700; line-height: 1.2; letter-spacing: -1px;
  color: var(--tf-navy);
}
.hero .lead { margin-top: 12px; font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.hero .search { margin-top: 24px; max-width: 620px; }
.hero .quick { margin-top: 16px; }
.hero .quick .lbl { margin-right: 4px; font-size: 12.5px; font-weight: 700; color: var(--muted); }

/* 지역 페이지 히어로 */
.dest-hero { position: relative; height: 300px; overflow: hidden; }
.dest-hero img { width: 100%; height: 100%; object-fit: cover; }
.dest-hero .shade { position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / .75), rgb(0 0 0 / .25) 55%, rgb(0 0 0 / .1)); }
.dest-hero .cap { position: absolute; inset: auto 0 0 0; padding-bottom: 28px; color: #fff; }
.dest-hero h1 { margin-top: 4px; font-size: 40px; font-weight: 800; letter-spacing: -.025em; }
.dest-hero .kicker { font-size: 13px; font-weight: 700; color: rgb(255 255 255 / .8); }
.dest-hero .tagline { margin-top: 4px; font-size: 15px; color: rgb(255 255 255 / .85); }

/* ── 카테고리 · 목적지 · 프로모 ─────────────────────────────────── */

.cat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.cat-grid a {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 0;
  border: 1px solid var(--line); border-radius: var(--radius); font-size: 13px; font-weight: 700;
}
.cat-grid a:hover { border-color: var(--brand); background: var(--brand-50); }
.cat-grid .emo { font-size: 24px; }

.dest-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.dest-grid a { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: #eef0f3; }
.dest-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.dest-grid a:hover img { transform: scale(1.06); }
.dest-grid .shade { position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / .72), rgb(0 0 0 / .1) 45%, transparent); }
.dest-grid .cap { position: absolute; inset: auto 0 0 0; padding: 12px; color: #fff; }
.dest-grid .cap b { display: block; font-size: 15px; font-weight: 800; }
.dest-grid .cap span { font-size: 11.5px; color: rgb(255 255 255 / .82); }

.promo { width: 184px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); }
.promo .n { font-size: 13px; font-weight: 800; }
.promo .d { margin-top: 2px; font-size: 12px; color: var(--muted); }
.promo .v { margin-top: 8px; font-size: 14px; font-weight: 800; color: var(--accent); }

.partner-banner { margin: 40px 0 0; padding: 40px; border-radius: 16px; background: var(--ink); color: #fff; }
.partner-banner .eyebrow { color: var(--brand-100); }
.partner-banner h2 { margin-top: 8px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.partner-banner p { margin-top: 12px; max-width: 36rem; font-size: 14px; line-height: 1.7; color: rgb(255 255 255 / .7); }
.partner-banner .btn { margin-top: 24px; background: #fff; color: var(--ink); }
.partner-banner .btn:hover { background: rgb(255 255 255 / .9); }

/* ── 목록 화면 ──────────────────────────────────────────────────── */

.listing { display: flex; gap: 32px; align-items: flex-start; }

/* ── 왼쪽 필터 ─────────────────────────────────────────────────
   예전에는 8개 축 60개 항목을 전부 펼쳐 1,933px 이었다.
   화면(800px)보다 길어 sticky 가 의미가 없었고,
   무엇이 켜져 있는지 알려면 끝까지 스크롤해야 했다.        */

.filters { width: 232px; flex: none; }
.filters .inner {
  position: sticky; top: 96px;
  /* 화면 안에 들어가야 고정이 뜻이 있다. 넘치면 안에서 스크롤한다. */
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}

.f-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding-bottom: 10px;
  border-bottom: 1px solid var(--tf-gray-2);
}
.f-head b { font-size: 14px; font-weight: 800; }
.f-reset { font-size: 12px; font-weight: 700; color: var(--tf-ocean); }

/* 지금 걸린 조건 — 맨 위에 모아 둔다 */
.f-active { display: flex; flex-wrap: wrap; gap: 5px; padding: 12px 0; }
.f-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 999px;
  background: linear-gradient(135deg, var(--tf-ocean), var(--tf-sky));
  color: #fff; font-family: var(--font-ui);
  font-size: 11.5px; font-weight: 700;
}
.f-tag span { opacity: .75; font-size: 10px; }
.f-tag:hover span { opacity: 1; }

/* 축은 접어 둔다. 켜져 있는 축은 저절로 펼쳐진다. */
.fgroup { border-bottom: 1px solid var(--tf-gray-1); }
.fgroup > summary {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 2px; cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 700; color: var(--tf-text);
}
.fgroup > summary::-webkit-details-marker { display: none; }
.fgroup > summary::after {
  content: '⌄'; margin-left: auto; color: var(--tf-gray-3);
  font-size: 14px; line-height: 1; transition: transform var(--dur-fast) var(--ease);
}
.fgroup[open] > summary::after { transform: rotate(180deg); }
.fgroup > summary:hover { color: var(--tf-ocean); }

/* 켜져 있는 축에 붙는 점 — 접어 놔도 티가 나야 한다 */
.f-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--tf-ocean); flex: none;
}

.f-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 0 12px; }
.f-chips .chip { padding: 5px 10px; font-size: 12px; }

.f-sub {
  margin: 8px 0 4px; font-size: 11px; font-weight: 700;
  letter-spacing: .3px; color: var(--tf-gray-4);
}

.frow {
  display: flex; align-items: center; gap: 7px; padding: 6px 8px;
  border-radius: 8px; font-size: 13px; color: var(--tf-gray-5);
}
.frow:hover { background: var(--tf-gray-1); }
.frow.on { background: var(--brand-soft); color: var(--tf-ocean); font-weight: 700; }
.frow .mark { width: 12px; flex: none; font-size: 11px; color: var(--tf-ocean); }
.frow .end { margin-left: auto; font-size: 11px; color: var(--tf-gray-4); }
.frow.on .end { color: var(--tf-ocean); }

.f-all {
  display: block; padding: 8px; margin-top: 4px;
  font-size: 12px; font-weight: 600; color: var(--tf-ocean);
}
.f-tip {
  padding: 14px 2px 0;
  font-size: 12px; line-height: 1.7; color: var(--tf-gray-4);
}
.f-tip a { color: var(--tf-ocean); font-weight: 600; }

.sortbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
           gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.sorts { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.sorts::-webkit-scrollbar { display: none; }
.sorts a { padding: 6px 10px; border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.sorts a:hover { background: var(--surface); color: var(--ink-2); }
.sorts a.on { background: var(--ink); color: #fff; }

.pager { display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: 40px; }
.pager a, .pager span {
  display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 8px;
  border-radius: 8px; font-size: 13.5px; font-weight: 700; color: var(--ink-2);
}
.pager a:hover { background: var(--surface); }
.pager .on { background: var(--brand); color: #fff; }
.pager .gap { color: var(--muted); }

.mfilters { display: none; }

/* ── 커뮤니티 ───────────────────────────────────────────────────── */

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.tabs a { padding: 10px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent;
          font-size: 14.5px; font-weight: 700; color: var(--muted); }
.tabs a:hover { color: var(--ink-2); }
.tabs a.on { border-bottom-color: var(--brand); color: var(--brand); }

.feed-layout { display: flex; gap: 40px; }
.feed-side { width: 268px; flex: none; }
.feed-side .inner { position: sticky; top: 132px; }
.feed-side .card-box + .card-box { margin-top: 20px; }

.article h1 { font-size: 34px; font-weight: 800; line-height: 1.3; letter-spacing: -.025em; }
.article .body { margin-top: 28px; font-size: 16px; line-height: 1.85; color: var(--ink-2); white-space: pre-line; }
.article .cover { margin-top: 24px; aspect-ratio: 16 / 10; }
.article .gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
.article .gallery-grid .thumb { aspect-ratio: 4 / 3; }
.reactions { display: flex; align-items: center; gap: 12px; margin-top: 32px;
             padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.react-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font-size: 14px; font-weight: 700; color: var(--ink-2);
}
.react-btn:hover { border-color: rgb(78 89 104 / .4); }
.react-btn.on { border-color: var(--sale); background: rgb(232 56 79 / .05); color: var(--sale); }

.cmt { padding: 16px 0; border-bottom: 1px solid var(--line-2); }
.cmt .head { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.cmt .head b { font-weight: 700; }
.cmt .text { margin-top: 6px; font-size: 14px; line-height: 1.7; color: var(--ink-2); white-space: pre-line; }
.cmt .replies { margin-top: 12px; padding-left: 14px; border-left: 2px solid var(--line-2); }
.cmt .replies > * + * { margin-top: 12px; }

/* ── 프로필 ─────────────────────────────────────────────────────── */

.profile-head { display: flex; align-items: center; gap: 20px; }
.profile-head .pic { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: #eef0f3; flex: none; }
.profile-stats { display: flex; gap: 20px; margin-top: 12px; }
.profile-stats div { display: flex; align-items: baseline; gap: 6px; }
.profile-stats dt { font-size: 12.5px; color: var(--muted); }
.profile-stats dd { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ── 파트너센터 ─────────────────────────────────────────────────── */

.pt-layout { display: flex; gap: 40px; }
.pt-nav { width: 196px; flex: none; }
.pt-nav a { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px;
            border-radius: 8px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.pt-nav a:hover { background: var(--surface); color: var(--brand); }
.pt-nav a.on { background: var(--brand-50); color: var(--brand-700); }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat-card { padding: 16px; border: 1px solid var(--line); border-radius: 16px; }
.stat-card dt { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.stat-card dd { margin-top: 6px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.stat-card .sub { margin-top: 2px; font-size: 12px; color: var(--muted); }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; }
table.data { min-width: 720px; text-align: left; }
table.data th { padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--line);
                font-size: 12.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
table.data td { padding: 12px 16px; border-bottom: 1px solid var(--line-2); font-size: 13.5px; }
table.data tr:last-child td { border-bottom: 0; }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }
table.data .ell { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 상태 표시 ──────────────────────────────────────────────────── */

.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 64px 24px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface); text-align: center;
}
.empty .emo { font-size: 36px; }
.empty .t { margin-top: 16px; font-size: 16px; font-weight: 700; }
.empty .d { margin-top: 6px; max-width: 26rem; font-size: 13px; line-height: 1.7; color: var(--muted); }
.empty .actions { display: flex; gap: 8px; margin-top: 20px; }

.notice { padding: 12px 16px; border-radius: var(--radius); font-size: 12.5px; line-height: 1.7; }
.notice.warn { background: var(--amber-50); color: var(--amber-800); }
.notice.err  { background: var(--red-50); color: var(--sale); font-weight: 600; }
.notice.ok   { background: var(--brand-50); color: var(--brand-700); font-weight: 600; }
.notice code { padding: 1px 5px; border-radius: 4px; background: rgb(0 0 0 / .05); font-size: 12px; }

.flash-wrap { position: sticky; top: 128px; z-index: 35; }
.flash { margin-bottom: 12px; box-shadow: var(--shadow-card); }

/* ── 푸터 · 탭바 ────────────────────────────────────────────────── */

.ftr {
  margin-top: 64px; padding: 56px 0 40px;
  background: var(--tf-navy); color: rgba(255,255,255,.7);
}
.ftr-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.ftr h4 {
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 700; color: #fff;
  letter-spacing: 1px; text-transform: uppercase;
}
.ftr ul { margin-top: 12px; }
.ftr li { margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.ftr li a:hover { color: var(--brand); }
.ftr .brand b { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.ftr .brand p { margin-top: 8px; font-size: 13px; line-height: 1.7; color: var(--muted); }
.ftr-legal { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line);
             font-size: 12px; line-height: 1.7; color: var(--muted); }
.ftr-legal .links { display: flex; flex-wrap: wrap; gap: 16px; font-weight: 600; color: var(--ink-2); }

.tabbar {
  position: fixed; inset: auto 0 0 0; z-index: 40; display: none;
  grid-template-columns: repeat(5, 1fr);
  background: rgb(255 255 255 / .96); backdrop-filter: blur(8px);
  border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: 2px; height: 56px; font-size: 10.5px; font-weight: 700; color: var(--muted); }
.tabbar a.on { color: var(--brand); }

/* ── 반응형 ─────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .filters, .feed-side { display: none; }
  .mfilters { display: block; }
  .detail { flex-direction: column; gap: 32px; }
  .detail .side-col { width: 100%; }
  .detail .side-col .sticky { position: static; }
  .booking { display: none; }         /* 모바일에서는 하단 바 → 예약 화면 */
  .book-bar { display: flex; }
  .pt-layout { flex-direction: column; gap: 24px; }
  .pt-nav { width: 100%; }
  .pt-nav ul { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .pt-nav ul::-webkit-scrollbar { display: none; }
  .pt-nav a { white-space: nowrap; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .pgrid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  body { font-size: 14.5px; }
  .hdr-search { display: none; }
  .hdr-search-m { display: block; }
  .hdr-nav .txt { display: none; }
  .tabbar { display: grid; }
  .hero { padding: 40px 0; }
  .hero h1 { font-size: 27px; }
  .dest-hero { height: 220px; }
  .dest-hero h1 { font-size: 30px; }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .dest-grid { grid-template-columns: repeat(2, 1fr); }
  .pgrid { grid-template-columns: repeat(2, 1fr); }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .gallery .side { display: none; }
  .gallery .main { aspect-ratio: 16 / 10; }
  .prow .thumb { width: 124px; }
  .prow .desc { display: none; }
  .post-row .thumb { width: 92px; }
  .cart-line .thumb { width: 84px; }
  .article h1 { font-size: 26px; }
  .article .gallery-grid { grid-template-columns: 1fr; }
  .rev-summary { flex-direction: column; align-items: stretch; gap: 20px; }
  .rev-summary .score { width: 100%; }
  .ftr-grid { grid-template-columns: repeat(2, 1fr); }
  .partner-banner { padding: 28px 24px; }
  .sec { margin-top: 32px; }
  .card-rail { width: 168px; }
  .post-rail { width: 220px; }
  .feed-layout, .listing { gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .hdr, .ftr, .tabbar, .book-bar, .filters { display: none !important; }
  body { padding-bottom: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   Travel Experience Network — 화면별 규칙
   ═══════════════════════════════════════════════════════════════════ */

/* ── 헤더 로고 ─────────────────────────────────────────────────── */

/* 로고 글자 모양은 위 .logo 블록에서 정한다 (.com 과 같은 값).
   여기서는 배치만 잡는다. */
.logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.write-cta { white-space: nowrap; }

/* ── 페이지 머리 ───────────────────────────────────────────────── */

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.page-head h1 { font-size: 28px; font-weight: 800; letter-spacing: -.025em; }
.page-title {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 700; letter-spacing: -.6px;
  color: var(--tf-navy); line-height: 1.25;
}
.lead-sm { margin-top: 8px; max-width: 46rem; font-size: 14px; line-height: 1.7; color: var(--ink-2); }

/* ── 홈 ────────────────────────────────────────────────────────── */

.stat-strip {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px;
  padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff;
}
.stat-strip li { flex: 1 1 96px; text-align: center; }
.stat-strip b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.stat-strip span { font-size: 12px; color: var(--muted); }
.stat-strip.plain { border: 0; background: transparent; padding: 0; }

.menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.menu-grid a {
  display: flex; flex-direction: column; gap: 2px; padding: 16px;
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
}
.menu-grid a:hover { border-color: var(--brand); background: var(--brand-50); }
.menu-grid .mg-ic { font-size: 22px; }
.menu-grid .mg-name { font-size: 15px; font-weight: 800; }
.menu-grid .mg-desc { font-size: 12px; color: var(--muted); }

.mini-course { width: 240px; display: block; }
.mini-course .thumb { display: block; }
.mini-course b { display: block; margin-top: 8px; font-size: 14px; font-weight: 700; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mini-course:hover b { color: var(--brand); }
.cc-days {
  position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: 999px;
  background: rgb(22 24 29 / .78); color: #fff; font-size: 11.5px; font-weight: 800;
}

.photo-strip { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.photo-strip .thumb { border-radius: 10px; }

.qlist li + li { border-top: 1px solid var(--line-2); }
.qlist a { display: block; padding: 12px 0; }
.qlist a:hover b { color: var(--brand); }
.qlist b { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.4; }
.qlist span { display: block; margin-top: 4px; }

.loop { margin-top: 56px; padding: 40px; border-radius: 20px; background: var(--ink); color: #fff; }
.loop .eyebrow { color: var(--brand-100); }
.loop h2 { margin-top: 8px; font-size: 26px; font-weight: 800; letter-spacing: -.025em; }
.loop-steps { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.loop-steps li {
  flex: 1 1 150px; padding: 14px; border-radius: 12px;
  background: rgb(255 255 255 / .07);
}
.loop-steps .ls-n {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--brand); font-size: 12px; font-weight: 800;
}
.loop-steps b { display: block; margin-top: 8px; font-size: 14.5px; }
.loop-steps span:last-child { display: block; margin-top: 2px; font-size: 12.5px; color: rgb(255 255 255 / .65); }
.loop-steps .back { background: rgb(15 138 128 / .25); }
.loop .btn { margin-top: 24px; }

/* ── 경험 카드 ─────────────────────────────────────────────────── */

/* 목록은 4단이다. 사진이 커지면 '무엇이 기록되어 있는가' 보다
   사진이 먼저 눈에 들어 이 사이트의 값이 뒤로 밀린다.
   .three 는 홈처럼 자리가 좁은 곳에서 3단으로 쓴다. */
.exp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 14px; }
.exp-grid.three { grid-template-columns: repeat(3, 1fr); }
.rail-card { width: 300px; }

.exp-card { display: flex; flex-direction: column; }
.exp-card:hover .thumb img { transform: scale(1.04); }
.exp-card:hover .exp-title a { color: var(--brand); }
.exp-cover { display: block; }
.exp-score {
  position: absolute; right: 8px; top: 8px; padding: 3px 8px; border-radius: 999px;
  background: rgb(22 24 29 / .78); color: #fff; font-size: 12px; font-weight: 800;
}
.exp-body { padding-top: 12px; }
.exp-dest { font-size: 12px; font-weight: 700; color: var(--brand); }
.exp-title { margin-top: 4px; font-size: 16px; font-weight: 800; line-height: 1.35; letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.exp-summary { margin-top: 6px; font-size: 13px; line-height: 1.6; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.exp-facts { margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }

/* 이 후기에 무엇이 담겼는지 — 이 사이트의 값을 그대로 보여 주는 줄 */
.exp-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.exp-chips li {
  padding: 3px 8px; border-radius: 6px; background: var(--surface-2);
  font-size: 11.5px; font-weight: 700; color: var(--ink-2);
}
.exp-chips .hi { background: var(--green-50); color: var(--green-700); }
.exp-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.exp-stats { display: flex; gap: 8px; }

.dest-chip { padding: 2px 8px; border-radius: 6px; background: var(--brand-50);
  font-size: 12px; font-weight: 700; color: var(--brand-700); }

/* ── 경험 상세 ─────────────────────────────────────────────────── */

.exp-head .kicker { font-size: 13px; font-weight: 700; color: var(--brand); }
.exp-head h1 { margin-top: 8px; font-size: 32px; font-weight: 800; line-height: 1.3; letter-spacing: -.025em; }
.exp-lead { margin-top: 10px; font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.exp-author { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.exp-author .who b { display: block; font-size: 14px; }
.exp-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.exp-badges li { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 13px; font-weight: 700; color: var(--ink-2); }
.exp-hero { margin-top: 24px; aspect-ratio: 16 / 10; }

.verdict { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 28px;
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--line); }
.verdict .v-item { padding: 16px; background: #fff; }
.verdict .wide { grid-column: 1 / -1; }
.v-label { display: block; font-size: 12px; font-weight: 700; color: var(--muted); }
.v-value { display: block; margin-top: 6px; font-size: 15px; font-weight: 700; }
.star-row { color: var(--star); letter-spacing: 2px; }
.star-row .dim { color: var(--line); }

.panel { margin-top: 36px; }
.panel-h { font-size: 19px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 16px; }
.panel-h .cnt { color: var(--brand); }

/* 비용 */
.cost-heads { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.cost-heads div { flex: 1 1 120px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.cost-heads span { display: block; font-size: 12px; color: var(--muted); font-weight: 700; }
.cost-heads b { display: block; margin-top: 4px; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.cost-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.cost-list .cl { width: 96px; flex: none; font-size: 13px; font-weight: 700; }
.cost-list .cbar { flex: 1; height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.cost-list .cfill { display: block; height: 100%; border-radius: 999px; background: var(--brand); }
.cost-list .cp { width: 36px; text-align: right; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cost-list .ca { width: 96px; text-align: right; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* 코스 타임라인 */
.day + .day { margin-top: 28px; }
.day-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.day-no { padding: 4px 12px; border-radius: 999px; background: var(--ink); color: #fff;
  font-size: 13px; font-weight: 800; }
.day-sum { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.timeline { position: relative; padding-left: 30px; }
.timeline::before { content: ""; position: absolute; left: 13px; top: 6px; bottom: 6px;
  width: 2px; background: var(--line); }
.tl-item { position: relative; padding-bottom: 20px; }
.tl-dot { position: absolute; left: -30px; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%; background: #fff;
  border: 2px solid var(--line); font-size: 13px; }
.tl-move { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.tl-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tl-title b { font-size: 15.5px; font-weight: 800; }
.pkind { padding: 2px 6px; border-radius: 5px; background: var(--surface-2);
  font-size: 11.5px; font-weight: 700; color: var(--ink-2); }
.pkind.warn { background: var(--red-50); color: var(--sale); }
.tl-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 5px;
  font-size: 12.5px; color: var(--muted); font-weight: 600; }
.star { color: var(--amber-700); font-weight: 800; }
.tl-memo { margin-top: 6px; font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }
.tl-photo { margin-top: 10px; width: 100%; max-width: 340px; border-radius: 10px; }

/* 숙소 · 음식 */
.stay { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line-2); }
.stay-thumb { width: 96px; flex: none; }
.stay-name { font-size: 15.5px; font-weight: 800; }
.stay-meta { margin-top: 5px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.stay-memo { margin-top: 6px; font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }
.out-link { display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--brand); }

.food { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.food .fic { font-size: 18px; flex: none; }
.food b { font-size: 14.5px; font-weight: 700; }
.fcost { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.food-memo { margin-top: 4px; font-size: 13px; line-height: 1.6; color: var(--ink-2); }

.photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.photo-grid figcaption { margin-top: 6px; font-size: 12.5px; color: var(--muted); }

/* 반응 */
.reactions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 32px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.react-btn { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 18px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font-size: 14px; font-weight: 700; color: var(--ink-2); }
.react-btn:hover { border-color: rgb(78 89 104 / .4); }
.react-btn.on { border-color: var(--sale); background: rgb(232 56 79 / .06); color: var(--sale); }
.react-btn.helpful.on { border-color: var(--brand); background: var(--brand-50); color: var(--brand-700); }

/* .com 으로 넘어가는 자리 */
.to-com { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 28px; padding: 24px; border-radius: 16px;
  background: linear-gradient(135deg, var(--brand-50), #fff); border: 1px solid var(--brand-100); }
.tc-title { font-size: 16px; font-weight: 800; }
.tc-desc { margin-top: 6px; max-width: 34rem; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }

/* 댓글 */
.cmt-form { margin-bottom: 20px; }
.cmt-empty { padding: 32px; border-radius: 12px; background: var(--surface);
  text-align: center; font-size: 13.5px; color: var(--muted); }
.cmt { padding: 16px 0; border-bottom: 1px solid var(--line-2); }
.cmt.best { padding: 16px; border: 1px solid var(--brand-100); border-radius: 12px;
  background: var(--brand-50); }
.best-tag { margin-bottom: 8px; font-size: 12.5px; font-weight: 800; color: var(--brand-700); }
.cmt-head { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.cmt-text { margin-top: 6px; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.cmt-actions { margin-top: 8px; gap: 12px; }
.cmt .reply summary { font-size: 12.5px; font-weight: 700; color: var(--muted); cursor: pointer; }
.cmt-replies { margin-top: 12px; padding-left: 14px; border-left: 2px solid var(--line-2); }
.cmt-replies li + li { margin-top: 12px; }

/* 연결된 기록 */
.linked-exp { display: flex; align-items: center; gap: 12px; margin-top: 28px; padding: 16px;
  border: 1px solid var(--line); border-radius: 12px; }
.linked-exp:hover { border-color: var(--brand); }
.linked-exp .le-ic { font-size: 20px; }
.linked-exp b { display: block; font-size: 14px; }
.linked-exp .le-go { margin-left: auto; font-weight: 800; color: var(--brand); }

/* ── 코스 목록 ─────────────────────────────────────────────────── */

.course-card { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line-2); }
.cc-cover { width: 200px; flex: none; }

/* ── 랭킹 ──────────────────────────────────────────────────────── */

.rank-list li + li { border-top: 1px solid var(--line-2); }
.rank-row { display: flex; align-items: center; gap: 14px; padding: 14px 20px; }
.rank-no { display: grid; place-items: center; width: 28px; flex: none;
  font-size: 14px; font-weight: 800; color: var(--muted); }
.rank-no.medal { font-size: 18px; }
.rank-name { font-size: 15px; font-weight: 800; }
.rank-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px;
  font-size: 12.5px; color: var(--muted); font-weight: 600; }

/* ── 여행자 ────────────────────────────────────────────────────── */

.tvl-list { display: grid; gap: 10px; }
.tvl-card { display: flex; align-items: center; gap: 12px; padding: 12px;
  border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.tvl-card:hover { border-color: var(--brand); }
.tvl-name { font-size: 15px; font-weight: 800; }
.tvl-handle { font-size: 12px; color: var(--muted); }
.tvl-style { margin-top: 2px; font-size: 12.5px; color: var(--brand); font-weight: 600; }
.tvl-stats { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.tvl-rank { display: grid; gap: 10px; margin-top: 24px; }
.tvl-rank li { display: flex; align-items: center; gap: 12px; }
.tvl-rank .tvl-card { flex: 1; }

.profile-head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.prof-name { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.prof-handle { font-size: 13.5px; color: var(--muted); }
.prof-style { margin-top: 4px; font-size: 13.5px; font-weight: 700; color: var(--brand); }
.prof-bio { margin-top: 8px; font-size: 14px; line-height: 1.7; color: var(--ink-2); }

/* ── 모임 ──────────────────────────────────────────────────────── */

.meet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.meet-card { border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: #fff; }
.meet-card:hover { border-color: var(--brand); }
.meet-title { margin-top: 10px; font-size: 16px; font-weight: 800; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.meet-meta { margin-top: 8px; font-size: 13px; color: var(--ink-2); font-weight: 600; }
.meet-people { margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--brand); }

/* ── 갤러리 ────────────────────────────────────────────────────── */

.gal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.gal-item figcaption { margin-top: 8px; }
.gal-item figcaption b { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

/* ── 지도 ──────────────────────────────────────────────────────── */

.map-note { font-size: 12.5px; line-height: 1.7; color: var(--muted); }
.bubble { display: grid; place-items: center; gap: 2px; padding: 12px;
  border-radius: 50%; background: var(--brand); color: #fff; text-align: center;
  width: calc(var(--w) * 1px); height: calc(var(--w) * 1px); min-width: 64px; min-height: 64px; }
.bubble b { font-size: 13px; font-weight: 800; }
.bubble span { font-size: 11px; opacity: .85; }
.point { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--line-2); }
.point .pt-ic { font-size: 17px; }
.point b { font-size: 14.5px; font-weight: 700; }
.pt-geo { flex: none; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── 여행지 요약 ───────────────────────────────────────────────── */

.digest { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--line); }
.digest .dg { padding: 16px; background: #fff; }
.digest .wide { grid-column: span 2; }
.dg-l { display: block; font-size: 12px; font-weight: 700; color: var(--muted); }
.dg-v { display: block; margin-top: 6px; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.digest .wide .dg-v { font-size: 14px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

/* ── 기록 폼 ───────────────────────────────────────────────────── */

.write-head h1 { font-size: 30px; font-weight: 800; letter-spacing: -.025em; }
.write-form { margin-top: 28px; }
.wsec { padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.wsec + .wsec { margin-top: 16px; }
.wsec-head { display: flex; gap: 12px; margin-bottom: 20px; }
.wstep { display: grid; place-items: center; width: 28px; height: 28px; flex: none;
  border-radius: 50%; background: var(--brand); color: #fff; font-size: 13px; font-weight: 800; }
.wsec-head h2 { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.wsec-head p { margin-top: 4px; font-size: 13px; line-height: 1.7; color: var(--muted); }

.pick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pick-grid.three { grid-template-columns: repeat(3, 1fr); }
.pick-grid.five { grid-template-columns: repeat(5, 1fr); }
.pick { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px;
  border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--ink-2); text-align: center; }
.pick .ic { font-size: 18px; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick:has(input:checked) { border-color: var(--brand); background: var(--brand-50); color: var(--brand-700); }

.rows { display: grid; gap: 10px; }
.rowcard { border: 1px solid var(--line-2); border-radius: 12px; padding: 12px; background: var(--surface); }
.rowcard:focus-within { border-color: var(--brand); background: #fff; }
.rowcard-main { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.rowcard-more { margin-top: 8px; }
.rowcard-more summary { font-size: 12.5px; font-weight: 700; color: var(--muted); cursor: pointer; }
.rowcard-detail { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: flex-end; }

.mini { display: flex; flex-direction: column; gap: 4px; width: 110px; }
.mini.grow { flex: 1; min-width: 180px; width: auto; }
.mini > span { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.mini .input, .mini .select { height: 40px; padding: 0 10px; font-size: 13.5px; }

.cost-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cost-grid .mini { width: auto; }
.cost-total { display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.cost-total span { font-size: 14px; font-weight: 700; }
.cost-total b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--brand); }

.write-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }

/* ── 계정 · 안내 ───────────────────────────────────────────────── */

.auth-box { max-width: 400px; margin: 40px auto; }
.auth-box h1 { font-size: 26px; font-weight: 800; letter-spacing: -.025em; }
.about-list li { display: flex; flex-direction: column; gap: 2px; padding: 12px 0;
  border-bottom: 1px solid var(--line-2); }
.about-list b { font-size: 14.5px; font-weight: 800; }
.about-list span { font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.brand-box { background: var(--brand-50); border-color: var(--brand-100); }
.thumb-none { position: absolute; inset: 0; display: grid; place-items: center; font-size: 28px; opacity: .35; }

.tabbar a.cta { color: var(--accent); }
.tabbar a.cta svg { border: 2px solid var(--accent); border-radius: 50%; padding: 2px; }

/* ── 반응형 ────────────────────────────────────────────────────── */

/* 좁아질수록 한 단계씩 줄인다. 카드가 200px 밑으로 내려가면
   제목이 서너 줄로 넘어가 오히려 답답해진다. */
@media (max-width: 1240px) {
  .exp-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1180px) {
  .listing .exp-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  .exp-grid, .exp-grid.three { grid-template-columns: repeat(2, 1fr); }
  .meet-grid { grid-template-columns: repeat(2, 1fr); }
  .gal-grid { grid-template-columns: repeat(3, 1fr); }
  .photo-strip { grid-template-columns: repeat(4, 1fr); }
  .cost-grid { grid-template-columns: repeat(2, 1fr); }
  .digest { grid-template-columns: repeat(2, 1fr); }
  .digest .wide { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .logo-text .tag { display: none; }
  .write-cta { padding: 0 10px; font-size: 12.5px; }
  .menu-grid { grid-template-columns: repeat(2, 1fr); }
  .exp-grid, .exp-grid.three { grid-template-columns: 1fr; }
  .meet-grid { grid-template-columns: 1fr; }
  .gal-grid { grid-template-columns: repeat(2, 1fr); }
  .photo-strip { grid-template-columns: repeat(3, 1fr); }
  .verdict { grid-template-columns: 1fr; }
  .exp-head h1 { font-size: 25px; }
  .pick-grid, .pick-grid.three, .pick-grid.five { grid-template-columns: repeat(3, 1fr); }
  .cost-grid { grid-template-columns: 1fr 1fr; }
  .course-card { flex-direction: column; }
  .cc-cover { width: 100%; }
  .rowcard-main .mini { width: calc(50% - 4px); }
  .rowcard-main .mini.grow { width: 100%; flex: 1 1 100%; }
  .photo-grid { grid-template-columns: 1fr; }
  .loop { padding: 28px 20px; }
  .loop-steps li { flex: 1 1 100%; }
  .timeline { padding-left: 26px; }
  .tl-dot { left: -26px; width: 24px; height: 24px; }
  .cost-list .cl { width: 72px; font-size: 12px; }
  .cost-list .ca { width: 78px; font-size: 12px; }
  .stat-strip li { flex: 1 1 30%; }
  .rail-card { width: 260px; }
}

/* ── 사진 업로드 필드 ──────────────────────────────────────────── */

.uploader .up-row { display: flex; gap: 8px; align-items: center; }
.uploader .up-pick {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 46px; padding: 0 14px; cursor: pointer;
  border: 1px dashed var(--line); border-radius: var(--radius);
  background: var(--surface); font-size: 13.5px; font-weight: 700; color: var(--ink-2);
}
.uploader .up-pick:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-50); }
.uploader .up-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.uploader .up-pick:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.uploader .up-url { flex: 1; min-width: 0; }

.uploader .up-preview { position: relative; display: inline-block; margin-top: 10px; }
.uploader .up-preview img {
  max-width: 220px; max-height: 160px; border-radius: 10px;
  border: 1px solid var(--line); object-fit: cover; background: #eef0f3;
}
.uploader .up-clear {
  position: absolute; right: 6px; top: 6px; padding: 3px 8px; border: 0;
  border-radius: 999px; background: rgb(22 24 29 / .72); color: #fff;
  font-size: 11.5px; font-weight: 700;
}
.uploader .up-msg { margin-top: 6px; font-size: 12px; color: var(--brand); font-weight: 600; }
.uploader .up-msg.err { color: var(--sale); }

.uploader.busy { opacity: .6; pointer-events: none; }
.uploader.busy .up-pick::after { content: '…'; }

/* 반복 행 안의 작은 형태 */
.uploader.compact .up-pick { height: 40px; padding: 0 10px; font-size: 15px; }
.uploader.compact .up-url { height: 40px; padding: 0 10px; font-size: 13.5px; }
.uploader.compact .up-preview img { max-width: 120px; max-height: 90px; }

@media (max-width: 768px) {
  .uploader .up-row { flex-wrap: wrap; }
  .uploader .up-pick { width: 100%; justify-content: center; }
  .uploader .up-url { width: 100%; flex: 1 1 100%; }
}

/* ── 서버 상태 ─────────────────────────────────────────────────── */

.health div { display: flex; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.health dt { width: 180px; flex: none; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.health dd { font-size: 13.5px; }
.hstate { display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 11.5px; font-weight: 800; margin-right: 6px; }
.hstate.ok { background: var(--green-50); color: var(--green-700); }
.hstate.no { background: var(--red-50); color: var(--sale); }
.hval { color: var(--ink-2); }

@media (max-width: 768px) {
  .health div { flex-direction: column; gap: 2px; }
  .health dt { width: auto; }
}

/* ── 되돌릴 수 없는 동작 ───────────────────────────────────────── */

.danger { margin-top: 40px; padding: 24px; border: 1px solid #f3c6cd; border-radius: 16px;
  background: var(--red-50); }
.danger h2 { font-size: 17px; font-weight: 800; color: var(--sale); letter-spacing: -.02em; }
.danger p { margin-top: 8px; font-size: 13.5px; line-height: 1.75; color: var(--ink-2); }
.danger-form { margin-top: 16px; max-width: 340px; }
.btn-danger { background: var(--sale); }
.btn-danger:hover { background: #cf2b41; }

/* ── 여행지도 ──────────────────────────────────────────────────── */

.tfmap {
  height: 520px; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line); background: var(--surface);
}
.map-note { margin-top: 10px; font-size: 12.5px; color: var(--muted); }

/* 이모지 핀 — 마커 이미지를 따로 받지 않아도 종류가 구분된다 */
.tf-pin {
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50% 50% 50% 4px; transform: rotate(-45deg);
  background: #fff; border: 2px solid var(--brand);
  box-shadow: 0 2px 6px rgb(22 24 29 / .25); font-size: 15px;
}
.tf-pin > * { transform: rotate(45deg); font-style: normal; line-height: 1; }
.tf-pin.k-food, .tf-pin.k-cafe { border-color: var(--accent); }
.tf-pin.k-nature { border-color: var(--green); }
.tf-pin.k-transport { border-color: var(--muted); }

.leaflet-container { font: inherit; }
.leaflet-popup-content { margin: 12px 14px; }
.tf-pop { display: block; min-width: 160px; max-width: 240px; }
.tf-pop b { display: block; font-size: 14.5px; font-weight: 800; line-height: 1.4; }
.tf-pop-meta { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.tf-pop-memo { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.tf-pop-link { display: block; margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--brand); }

@media (max-width: 768px) {
  .tfmap { height: 380px; }
}

/* 여러 사람이 다녀온 곳 */
.tf-pin.many { border-width: 3px; box-shadow: 0 0 0 3px rgb(15 138 128 / .2), 0 2px 6px rgb(22 24 29 / .25); }
.pill-n {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand);
  font-size: 11.5px; font-weight: 700;
}

/* ── 장소 정리 (관리자) ────────────────────────────────────────── */

.mlist { display: grid; gap: 10px; }
.mrow {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface);
}
.mrow.sug { border-color: var(--brand); background: var(--brand-soft); }
.mrow .grow { min-width: 0; }
.mrow p { margin: 4px 0 0; }

.name-in {
  min-width: 220px; padding: 6px 10px; font: inherit; font-weight: 700;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
}
.merge-in { display: grid; gap: 6px; justify-items: end; flex: none; }
.merge-in input { width: 130px; padding: 6px 10px; font: inherit;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }

.rail-search { display: flex; gap: 6px; margin-left: auto; }
.rail-search input {
  padding: 6px 12px; font: inherit; border: 1px solid var(--line);
  border-radius: 999px; background: var(--surface);
}

.ok-note {
  padding: 14px 16px; border-radius: 12px;
  background: var(--brand-soft); color: var(--ink-2); font-size: 14px;
}
.warn-t { color: var(--accent); font-weight: 700; }

@media (max-width: 768px) {
  .mrow { flex-wrap: wrap; }
  .merge-in { justify-items: start; }
  .name-in { min-width: 0; width: 100%; }
}

.notice-bar {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  padding: 16px 18px; margin-bottom: 20px;
  border: 1px solid var(--accent); border-radius: 12px;
  background: var(--surface);
}
.notice-bar p { margin: 4px 0 0; }

/* 구글지도 말풍선 — 사이트 글꼴과 여백을 맞춘다 */
.gm-style .gm-style-iw-c { padding: 12px 14px; border-radius: 12px; }
.gm-style .gm-style-iw-d { overflow: hidden !important; }
.gm-style, .gm-style .tf-pop { font: inherit; }
.gm-style .tf-pop b { font-size: 14.5px; font-weight: 800; }

/* 카카오맵 말풍선 — 사이트 글꼴과 여백을 맞춘다 */
.tfmap .info, .tfmap .info * { font: inherit; }
.tfmap .info .tf-pop { padding: 4px 2px; }

/* ── 2단 메뉴 ──────────────────────────────────────────────────── */

.sub-bar {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  border-top: 1px solid var(--line); padding: 6px 0 0;
}
.sub-bar::-webkit-scrollbar { display: none; }
.sub-bar a {
  flex: none; padding: 7px 13px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap;
}
.sub-bar a:hover { background: var(--bg-2); color: var(--ink); }
.sub-bar a[aria-current] { background: var(--brand-soft); color: var(--brand); font-weight: 700; }

/* ── 탐색 ──────────────────────────────────────────────────────── */

.crumb { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.crumb a { color: var(--muted); font-weight: 600; }
.crumb a:hover { color: var(--brand); }
.crumb b { color: var(--ink); }

.axis-grid {
  display: grid; gap: 14px; margin-top: 20px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* 홈은 다섯 칸으로 고정한다.
   auto-fill 은 250px 를 못 맞추면 네 칸으로 접히는데,
   여기 카드는 이름과 값 몇 개뿐이라 더 좁아도 읽힌다. */
.axis-grid.five { grid-template-columns: repeat(5, 1fr); gap: 12px; }
.axis-grid.five .axis-card { padding: 18px 16px; }
.axis-grid.five .axis-card p { display: none; }   /* 좁아지니 설명은 뺀다 */

@media (max-width: 1180px) { .axis-grid.five { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .axis-grid.five { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .axis-grid.five { grid-template-columns: 1fr; } }
.axis-card {
  display: grid; gap: 6px; align-content: start;
  padding: 20px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface); transition: border-color .15s, transform .15s;
}
.axis-card:hover { border-color: var(--brand); transform: translateY(-2px); }
.axis-card.thin { opacity: .55; }
.axis-card b { font-size: 16px; font-weight: 800; }
.axis-card p { margin: 0; }
.axis-emo { font-size: 26px; line-height: 1; }
.axis-vals { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.tinytag {
  padding: 2px 8px; border-radius: 999px; background: var(--bg-2);
  font-size: 11.5px; font-weight: 600; color: var(--ink-2);
}
.axis-n { margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--brand); }

.val-grid {
  display: grid; gap: 12px; margin-top: 20px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.val-card {
  display: grid; gap: 4px; justify-items: center; text-align: center;
  padding: 22px 14px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); transition: border-color .15s, transform .15s;
}
.val-card:hover { border-color: var(--brand); transform: translateY(-2px); }
.val-card.thin { opacity: .5; }
.val-card b { font-size: 14.5px; font-weight: 700; }
.val-emo { font-size: 24px; line-height: 1; }

/* ── 여행지 허브 ───────────────────────────────────────────────── */

.dest-strip { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.dest-strip::-webkit-scrollbar { display: none; }
.dest-big {
  flex: none; width: 210px; display: grid; gap: 3px; align-content: start;
  padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
}
.dest-big:hover { border-color: var(--brand); }
.dest-big b { font-size: 16px; font-weight: 800; }
.dest-n { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--brand); }

/* 여행지 허브의 글자 목록. 홈의 .dest-grid(사진 카드)와 이름이 겹치지 않게 따로 둔다. */
.dest-cells {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.dest-cell {
  display: grid; gap: 2px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
}
.dest-cell:hover { border-color: var(--brand); }
.dest-cell b { font-size: 14.5px; font-weight: 700; }
.dest-cell.thin { opacity: .5; }
.axis-n .muted { font-weight: 600; }

/* ── 도시 허브 ─────────────────────────────────────────────────── */

/* 화면이 길어 목차가 필요하다. 스크롤해도 위에 붙어 따라온다. */
.hub-nav {
  position: sticky; top: 0; z-index: 5;
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  margin: 20px 0; padding: 10px 0;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.hub-nav::-webkit-scrollbar { display: none; }
.hub-nav a {
  flex: none; padding: 7px 14px; border-radius: 999px;
  background: var(--bg-2); font-size: 13px; font-weight: 600; color: var(--ink-2);
  white-space: nowrap;
}
.hub-nav a:hover { background: var(--brand-soft); color: var(--brand); }

/* 앵커로 뛰었을 때 목차에 가려지지 않게 */
[id="cost"], [id="places"], [id="course"], [id="photo"],
[id="question"], [id="meetup"], [id="traveler"], [id="review"] { scroll-margin-top: 72px; }

.hub-photos {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.hub-photos a { aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--bg-2); }
.hub-photos img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.hub-photos a:hover img { transform: scale(1.06); }

/* ── 테마 ──────────────────────────────────────────────────────── */

.theme-search { display: flex; gap: 6px; align-items: center; margin: 20px 0; flex-wrap: wrap; }
.theme-search input {
  min-width: 220px; padding: 8px 14px; font: inherit;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
}

/* 사용 수로 크기를 갈라 준다. 다 같은 크기면 어디부터 볼지 알 수 없다. */
.theme-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.theme-tag {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-weight: 700; color: var(--ink-2);
}
.theme-tag:hover { border-color: var(--brand); color: var(--brand); }
.theme-tag .tt-n { font-size: 11px; font-weight: 600; color: var(--muted); }
.theme-tag.lv1 { font-size: 13px; }
.theme-tag.lv2 { font-size: 14.5px; }
.theme-tag.lv3 { font-size: 16px; }
.theme-tag.lv4 {
  font-size: 18px; border-color: var(--brand);
  background: var(--brand-soft); color: var(--brand);
}

/* ── 알림 ──────────────────────────────────────────────────────── */

.bell { position: relative; display: grid; place-items: center; width: 34px; height: 34px;
        border-radius: 10px; font-size: 17px; }
.bell:hover { background: var(--bg-2); }
.bell-n {
  position: absolute; top: 1px; right: 0;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 800; line-height: 1;
}

.notif-list { display: grid; gap: 8px; }
.notif {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface);
}
/* 읽지 않은 것만 눈에 띄게. 전부 강조하면 아무것도 강조되지 않는다. */
.notif.new { border-color: var(--brand); background: var(--brand-soft); }
.notif .grow { min-width: 0; }
.notif a { font-weight: 600; }
.notif p { margin: 3px 0 0; }
.nf-ic { flex: none; font-size: 18px; line-height: 1.4; }
.nf-new { color: var(--brand); font-weight: 700; }
.nf-actor { flex: none; }


/* ── 마이페이지 ────────────────────────────────────────────────── */

.me-top {
  display: flex; gap: 14px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; padding: 18px 0 14px;
}
.me-who { display: flex; gap: 12px; align-items: center; }
.me-who b { font-size: 17px; font-weight: 800; }
.me-who p { margin: 2px 0 0; }

.me-tabs {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--line); margin-bottom: 22px;
}
.me-tabs::-webkit-scrollbar { display: none; }
.me-tabs a {
  flex: none; display: flex; gap: 5px; align-items: center;
  padding: 10px 14px; border-bottom: 2px solid transparent;
  font-size: 13.5px; font-weight: 600; color: var(--muted); white-space: nowrap;
}
.me-tabs a:hover { color: var(--ink); }
.me-tabs a[aria-current] { color: var(--brand); border-bottom-color: var(--brand); font-weight: 700; }

.me-stats {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.ms {
  display: grid; gap: 2px; padding: 16px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
}
a.ms:hover { border-color: var(--brand); }
.ms b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.ms span { font-size: 12px; color: var(--muted); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════
   TourFos.com 과 같은 결 맞추기
   메뉴 구성과 내용은 그대로 두고 겉모양만 맞춘다.
   ══════════════════════════════════════════════════════════════════ */

/* ── 상단 띠 ───────────────────────────────────────────────────── */

.topbar {
  background: var(--tf-navy);
  color: rgba(255,255,255,.75);
  font-family: var(--font-ui);
  font-size: 12px;
  height: 36px;
  display: flex; align-items: center;
}
.topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.topbar a { color: rgba(255,255,255,.75); transition: color var(--dur-fast) var(--ease); }
.topbar a:hover { color: var(--tf-gold); }
.tb-right { display: flex; gap: 14px; align-items: center; }
.tb-div { width: 1px; height: 11px; background: rgba(255,255,255,.2); }

@media (max-width: 768px) {
  .topbar { height: auto; padding: 7px 0; font-size: 11px; }
  .topbar-inner { flex-wrap: wrap; gap: 6px; }
  .tb-left { display: none; }
  .tb-right { margin-left: auto; }
}

/* ── 제목 글꼴 ─────────────────────────────────────────────────── */

.page-head h1,
.wrap.page > h1,
.narrow > h1 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 34px);
  font-weight: 700; letter-spacing: -.6px;
  color: var(--tf-navy); line-height: 1.25;
}
.panel-h,
.sh-t {
  font-family: var(--font-display);
  font-weight: 700; color: var(--tf-navy); letter-spacing: -.4px;
}

/* ── 메뉴·버튼 글꼴 (.com 은 UI 에 Montserrat 을 쓴다) ──────────── */

.sub-bar a, .me-tabs a, .chip, .hub-nav a, .btn, .tag, .pill-n,
.axis-n, .theme-tag, .kicker, .card-cat {
  font-family: var(--font-ui);
}

/* ── 칩 ───────────────────────────────────────────────────────── */

.chip {
  border-radius: var(--radius-full);
  border: 1.5px solid var(--tf-gray-2);
  font-weight: 600;
  transition: all var(--dur-fast) var(--ease);
}
.chip:hover { border-color: var(--tf-ocean); color: var(--tf-ocean); }
.chip.on {
  background: linear-gradient(135deg, var(--tf-ocean), var(--tf-sky));
  border-color: transparent; color: #fff;
}
.chip.on .muted { color: rgba(255,255,255,.75); }

/* ── 카드 들어올림 ─────────────────────────────────────────────── */

.exp-card, .tvl-card, .post-card, .axis-card, .val-card,
.dest-cell, .dest-big, .mrow, .notif {
  border-radius: var(--radius-lg);
  transition: all var(--dur-base) var(--ease);
}
.exp-card:hover, .tvl-card:hover, .post-card:hover,
.axis-card:hover, .val-card:hover, .dest-big:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

/* ── 푸터 (남색 위에서 읽히게) ─────────────────────────────────── */

.ftr a { color: rgba(255,255,255,.72); }
.ftr a:hover { color: var(--tf-gold); }
.ftr .muted, .ftr .small { color: rgba(255,255,255,.55); }
.ftr .logo .name { color: #fff; }
.ftr .logo .fos { color: var(--tf-aqua); }
.ftr .logo .tld { color: rgba(255,255,255,.45); }
.ftr .logo .tag { color: rgba(255,255,255,.5); }
" .ftr .ftr-bottom { border-top-color: rgba(255,255,255,.12); }

/* 남색 위에서는 브랜드색(#1a6fad)이 읽히지 않는다 — 대비 3.07.
   .com 도 어두운 바탕에서는 aqua 를 쓴다. */
.ftr-com { font-weight: 700; color: var(--tf-aqua); }
.ftr-com:hover { color: var(--tf-gold); }

/* ── 모바일 ────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .logo .mark { width: 32px; height: 32px; font-size: 17px; border-radius: 8px; }
  .logo .name { font-size: 19px; }
  .logo .tag { display: none; }
  .hdr-top { height: 60px; gap: 12px; }
}

/* 푸터 워드마크 — .com 의 .footer-brand .logo-text 와 같은 결.
   남색 위에서 브랜드색은 대비가 3 대 1 밖에 안 나와 aqua 를 쓴다. */
.ftr-word {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 700; color: #fff; letter-spacing: -.5px;
}
.ftr-word span { color: var(--tf-aqua); }
.ftr-word i { font-style: normal; color: rgba(255,255,255,.5); font-size: 17px; }

/* ── 포인트 ────────────────────────────────────────────────────── */

.pt-hero {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding: 28px 30px; margin-bottom: 8px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--tf-navy), var(--tf-ocean));
  color: #fff;
}
.pt-label { font-family: var(--font-ui); font-size: 12px; font-weight: 600;
            letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.7); }
.pt-big {
  display: block; margin-top: 4px;
  font-family: var(--font-display); font-size: 44px; font-weight: 700; line-height: 1.1;
}
.pt-big span { font-size: 22px; margin-left: 3px; color: var(--tf-aqua); }
.pt-hero p { margin-top: 6px; color: rgba(255,255,255,.75); }
.pt-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-ghost-w {
  background: transparent; color: #fff; box-shadow: none;
  border: 1.5px solid rgba(255,255,255,.35);
}
.btn-ghost-w:hover { background: rgba(255,255,255,.12); box-shadow: none; }
.btn-white { background: #fff; color: var(--tf-navy); box-shadow: var(--shadow-md); }
.btn-white:hover { background: #fff; box-shadow: var(--shadow-lg); }

.pt-bar { height: 10px; border-radius: 999px; background: var(--tf-gray-2); overflow: hidden; }
.pt-bar span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--tf-ocean), var(--tf-aqua));
}

.pt-list { display: grid; gap: 2px; }
.pt-list li {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-bottom: 1px solid var(--tf-gray-1);
}
.pt-list li:hover { background: var(--tf-gray-1); }
.pt-list p { margin: 2px 0 0; }
.pt-delta { flex: none; font-family: var(--font-ui); font-size: 15px; font-weight: 700; }
.pt-delta.up { color: var(--tf-ocean); }
.pt-delta.down { color: var(--tf-coral); }
.pt-after { flex: none; width: 84px; text-align: right; font-size: 12px; color: var(--tf-gray-4); }

.pt-code { margin-top: 6px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pt-code code {
  padding: 5px 12px; border-radius: 8px;
  background: var(--tf-gray-1); border: 1px dashed var(--tf-gray-3);
  font-family: Menlo, Consolas, monospace; font-size: 13.5px; font-weight: 700;
  letter-spacing: .5px;
}

.rule-list { display: grid; gap: 2px; }
.rule-list li {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px; border-bottom: 1px solid var(--tf-gray-1);
}
.rule-list p { margin: 2px 0 0; }
.rule-p { flex: none; font-family: var(--font-ui); font-weight: 700; color: var(--tf-ocean); }

.loop-strip {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 18px; margin: 20px 0;
  border-radius: var(--radius-lg); background: var(--tf-gray-1);
  font-size: 13.5px; font-weight: 600;
}
.loop-strip i { font-style: normal; color: var(--tf-gray-3); }

.note-box {
  padding: 18px 20px; margin: 20px 0;
  border-left: 3px solid var(--tf-ocean); border-radius: 0 12px 12px 0;
  background: var(--brand-soft);
}
.note-box b { display: block; margin-bottom: 6px; }
.note-box p { font-size: 13.5px; line-height: 1.85; color: var(--tf-gray-5); }

.ex-form { display: grid; gap: 14px; margin-top: 16px; }
.ex-form label { display: grid; gap: 5px; }
.ex-form .lb { font-size: 13px; font-weight: 700; }
.ex-form input {
  padding: 10px 14px; font: inherit;
  border: 1px solid var(--tf-gray-2); border-radius: 10px; background: var(--tf-white);
}
.ex-form button { justify-self: start; }
.panel.thin { opacity: .62; }
.hl { color: var(--tf-coral); }

.st-ok   { background: #e6f6ee; color: #047857; }
.st-wait { background: #fff7e6; color: #b45309; }
.st-no   { background: #fdeee9; color: #b42318; }

.pt-hint {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  padding: 16px 18px; margin-bottom: 22px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(26,111,173,.07), rgba(0,194,203,.07));
  border: 1px solid var(--tf-gray-2);
}
.pt-hint-ic { font-size: 22px; flex: none; }
.pt-hint p { margin: 4px 0 0; line-height: 1.7; }

/* 마이페이지 상세 */
.me-cols { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .me-cols { grid-template-columns: 1fr; } }

.mo-list { display: grid; gap: 1px; }
.mo-list li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 11px 4px; font-size: 13.5px;
}
.mo-list li + li { border-top: 1px solid var(--tf-gray-1); }
.mo-list b { font-family: var(--font-ui); font-size: 15px; font-weight: 700; }
.mo-list b.up { color: var(--tf-ocean); }
.mo-list b.down { color: var(--tf-coral); }

/* ── 표 ────────────────────────────────────────────────────────
   관리자와 마이페이지가 같이 쓴다. 두 벌 만들면 언젠가 어긋난다. */

.atable-wrap {
  overflow-x: auto;
  background: var(--tf-white);
  border: 1px solid var(--tf-gray-2); border-radius: 14px;
}
.atable { width: 100%; border-collapse: collapse; font-size: 13px; }
.atable th {
  padding: 12px 14px; text-align: left; white-space: nowrap;
  background: var(--tf-gray-1);
  font-family: var(--font-ui);
  font-size: 11.5px; font-weight: 700; letter-spacing: .3px; color: var(--tf-gray-5);
  border-bottom: 1px solid var(--tf-gray-2);
}
.atable td {
  padding: 12px 14px; vertical-align: middle;
  border-bottom: 1px solid var(--tf-gray-1);
}
.atable tr:last-child td { border-bottom: 0; }
.atable tbody tr:hover { background: var(--tf-gray-1); }
.atable tr.thin td { opacity: .55; }
.atable .num { text-align: right; font-family: var(--font-ui); white-space: nowrap; }
.atable .strong { font-weight: 700; }
.atable .strong .small { display: block; font-weight: 500; }
.atable .pt { color: var(--tf-ocean); font-weight: 700; }
.atable .up { color: #047857; font-weight: 700; }
.atable .down { color: var(--tf-coral); font-weight: 700; }
.atable .empty-row { text-align: center; padding: 34px; color: var(--tf-gray-4); }

.tagx {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  background: var(--tf-gray-1); color: var(--tf-gray-5);
  font-family: var(--font-ui); font-size: 11px; font-weight: 700; white-space: nowrap;
}
.tagx.s-published { background: #e6f6ee; color: #047857; }
.tagx.s-draft     { background: #fff7e6; color: #b45309; }
.tagx.s-hidden    { background: #fdeee9; color: #b42318; }

/* ── 회원가입 ──────────────────────────────────────────────────
   길이가 곧 이탈이다. 예전 화면은 3,500px 이었고, 대부분 건너뛰는
   선택 칸이 440px, 가입할 이유를 적은 안내가 460px 를 먹은 데다
   그 안내가 제출 버튼 뒤에 있어 아무도 보지 못했다.               */

/* 가입할 이유부터. 좁은 화면에서도 맨 위에 온다. */
.su-perks {
  display: grid; gap: 10px; margin-bottom: 22px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.su-perks span {
  display: grid; gap: 1px;
  padding: 12px 14px; border-radius: 12px;
  background: var(--tf-gray-1);
  font-size: 12px; color: var(--tf-gray-4);
}
.su-perks b { font-size: 13.5px; font-weight: 700; color: var(--tf-navy); }

.signup {
  display: grid; gap: 28px; align-items: start;
  grid-template-columns: minmax(0, 1fr) 290px;
}
@media (max-width: 900px) { .signup { grid-template-columns: 1fr; } }

.su-head { margin-bottom: 18px; }
.su-head h1 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 30px); font-weight: 700;
  color: var(--tf-navy); letter-spacing: -.6px;
}
.su-head p { margin-top: 6px; }

.su-form { display: grid; gap: 16px; }

.su-sec {
  padding: 20px 22px;
  background: var(--tf-white);
  border: 1px solid var(--tf-gray-2); border-radius: var(--radius-lg);
}
.su-sec > h2 {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700; color: var(--tf-navy);
  margin-bottom: 14px;
}
.su-n {
  display: grid; place-items: center; width: 22px; height: 22px; flex: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tf-ocean), var(--tf-sky));
  color: #fff; font-family: var(--font-ui); font-size: 11px; font-weight: 700;
}
.su-two { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .su-two { grid-template-columns: 1fr; } }

.su-form .field { display: grid; gap: 5px; margin-bottom: 14px; }
.su-form .field:last-child { margin-bottom: 0; }
.su-form .su-two .field { margin-bottom: 0; }
.su-form .label { font-size: 12.5px; font-weight: 700; }
.su-form .req { color: var(--tf-coral); margin-left: 2px; }
.su-form .input {
  padding: 10px 13px; font: inherit;
  border: 1px solid var(--tf-gray-2); border-radius: 10px; background: var(--tf-white);
}
.su-form .input:focus { border-color: var(--tf-ocean); outline: none; }
.su-form .hint { font-size: 12px; color: var(--tf-gray-4); line-height: 1.6; margin-top: 2px; }
.su-sec > .hint { margin-top: 10px; }

.pick { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; cursor: pointer; }
.pick input { margin: 0; }

/* 선택 칸은 접어 둔다 */
.su-more {
  border: 1px solid var(--tf-gray-2); border-radius: var(--radius-lg);
  background: var(--tf-white);
}
.su-more > summary {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 16px 22px; cursor: pointer; list-style: none;
  font-size: 14px; font-weight: 700; color: var(--tf-navy);
}
.su-more > summary::-webkit-details-marker { display: none; }
.su-more > summary::before {
  content: '＋'; flex: none; color: var(--tf-ocean); font-weight: 700;
}
.su-more[open] > summary::before { content: '－'; }
.su-more > summary em {
  font-style: normal; font-size: 11px; font-weight: 700;
  color: var(--tf-gray-4); margin-left: 4px;
}
.su-more-why { font-size: 12px; font-weight: 500; color: var(--tf-gray-4); }
.su-more-in { padding: 0 22px 20px; }

/* ── 동의 ──────────────────────────────────────────────────────── */

.agree-all {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 14px; margin-bottom: 8px;
  border: 1.5px solid var(--tf-ocean); border-radius: 10px;
  background: var(--brand-soft); font-size: 13.5px; cursor: pointer;
}
.agree-all em { font-style: normal; font-size: 11.5px; color: var(--tf-gray-4); }
.agree-list { display: grid; }
.agree-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 4px;
}
.agree-list li + li { border-top: 1px solid var(--tf-gray-1); }
.agree { display: flex; align-items: center; gap: 9px; flex: 1; cursor: pointer; min-width: 0; }
.agree input { flex: none; }
.ag-txt { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 13.5px; }
.ag-txt b { font-weight: 600; }
.agree em.req { color: var(--tf-coral); font-size: 11px; }
.agree em.opt { color: var(--tf-gray-4); font-size: 11px; }
.ag-desc { display: block; width: 100%; margin-top: 2px;
           font-size: 12px; color: var(--tf-gray-4); line-height: 1.6; }
.ag-more { flex: none; font-size: 12px; font-weight: 600; color: var(--tf-ocean); }

.su-go { width: 100%; height: 50px; font-size: 15px; margin-top: 4px; }
.su-foot { text-align: center; font-size: 13px; color: var(--tf-gray-4); }
.su-foot a { color: var(--tf-ocean); font-weight: 700; }

/* ── 옆 안내 ───────────────────────────────────────────────────── */

.su-side {
  position: sticky; top: 90px;
  padding: 20px 22px;
  background: var(--tf-gray-1); border-radius: var(--radius-lg);
}
.su-side h3 {
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--tf-gray-4); margin-bottom: 10px;
}
.su-side p { font-size: 12.5px; line-height: 1.75; color: var(--tf-gray-5); margin-bottom: 10px; }
.su-side-more a { display: inline-block; color: var(--tf-ocean); font-weight: 600; }
@media (max-width: 900px) {
  .su-side { position: static; }
}

/* ── 취향 고르기 ───────────────────────────────────────────────── */

.ob-form { display: grid; gap: 20px; }
.pick-grid {
  display: grid; gap: 9px;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
}
.pick-grid.two { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.pick-card {
  display: grid; gap: 3px; justify-items: center; text-align: center;
  padding: 15px 10px; cursor: pointer;
  border: 1.5px solid var(--tf-gray-2); border-radius: 13px;
  background: var(--tf-white);
  transition: all var(--dur-fast) var(--ease);
}
.pick-card:hover { border-color: var(--tf-sky); }
.pick-card input { position: absolute; opacity: 0; pointer-events: none; }
.pick-card:has(input:checked) {
  border-color: var(--tf-ocean); background: var(--brand-soft);
}
.pick-card:has(input:focus-visible) { outline: 2px solid var(--tf-ocean); outline-offset: 2px; }
.pc-ic { font-size: 22px; line-height: 1; }
.pc-nm { font-size: 13px; font-weight: 700; }
.pc-d { font-size: 11px; color: var(--tf-gray-4); }

.consent-out {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap; margin-top: 18px; text-align: center;
}

/* 동의 안내 띠 — 미뤄 둔 동안 계속 붙는다 */
.consent-bar {
  background: linear-gradient(135deg, var(--tf-navy), var(--tf-ocean));
  color: #fff;
}
.consent-bar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; padding-top: 11px; padding-bottom: 11px;
  font-size: 13.5px; font-weight: 600;
}

/* 빠뜨린 동의 항목을 그 자리에 표시한다 */
.agree-list li.miss {
  background: #fff7e6; border-radius: 10px;
  box-shadow: inset 0 0 0 1.5px var(--tf-gold);
  padding-left: 12px; padding-right: 12px;
}
.ag-miss {
  display: inline-block; margin-top: 4px;
  font-size: 12px; font-weight: 700; color: #b45309;
}

/* ── 머리말의 로그인 · 회원가입 ────────────────────────────────
   전에는 로그인만 흐린 테두리 단추로 있었다.
   처음 온 사람은 들어올 문을 찾지 못했다. */

.acct-in {
  padding: 9px 14px; border-radius: var(--radius-full);
  font-family: var(--font-ui);
  font-size: 13.5px; font-weight: 700; color: var(--tf-gray-5);
  white-space: nowrap;
  transition: all var(--dur-fast) var(--ease);
}
.acct-in:hover { background: var(--tf-gray-1); color: var(--tf-ocean); }

.acct-up {
  height: 36px; padding: 0 18px;
  background: linear-gradient(135deg, var(--tf-ocean), var(--tf-sky));
  box-shadow: 0 2px 10px rgba(26,111,173,.3);
}

@media (max-width: 480px) {
  .acct-in { padding: 8px 8px; font-size: 13px; }
  .acct-up { padding: 0 13px; font-size: 12.5px; }
}

/* 머리말 로그아웃 — 폼이지만 다른 항목과 같은 줄에 서야 한다 */
.logout-f { display: flex; }
button.acct-in { border: 0; background: transparent; cursor: pointer; }

@media (max-width: 640px) {
  /* 좁은 화면에서는 이름을 빼고 아이콘만 남긴다. 로그아웃은 남긴다. */
  .avatar-btn span { display: none; }
}

.pt-hero .grow { min-width: 0; }
.pt-bar.mini {
  display: block; max-width: 260px; height: 6px; margin-top: 8px;
  background: rgba(255,255,255,.25);
}
.pt-bar.mini span { background: var(--tf-aqua); }

/* 스토리 본문 사진 — 여러 칸을 나란히 */
.post-imgs {
  display: grid; gap: 8px; margin-top: 6px;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}

/* ── 지금 할 수 있는 일 ────────────────────────────────────────── */

.do-card {
  display: grid; gap: 4px; align-content: start;
  padding: 18px; border-radius: var(--radius-lg);
  border: 1px solid var(--tf-gray-2); background: var(--tf-white);
  transition: all var(--dur-base) var(--ease);
}
.do-card:hover {
  border-color: var(--tf-ocean); transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.do-ic { font-size: 22px; line-height: 1; }
.do-card b { font-size: 14.5px; font-weight: 700; color: var(--tf-navy); }
.do-why { font-size: 12.5px; line-height: 1.65; color: var(--tf-gray-4); }
.do-tag {
  justify-self: start; margin-top: 6px;
  padding: 3px 10px; border-radius: 999px;
  background: var(--brand-soft); color: var(--tf-ocean);
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 700;
}

/* 탈퇴 화면 — 지우는 것 목록 */
.leave-list { margin-top: 12px; display: grid; gap: 8px; }
.leave-list li {
  position: relative; padding-left: 20px;
  font-size: 13.5px; line-height: 1.7; color: var(--ink-2);
}
.leave-list li::before {
  content: '✕'; position: absolute; left: 0; top: 0;
  color: var(--sale); font-weight: 800; font-size: 11px;
}

/* 약관·개인정보 본문 — 줄바꿈을 글로 살린다.
   여태 .prose 규칙이 아예 없어 조항이 한 덩어리로 붙어 나왔다. */
.prose {
  margin-top: 10px;
  font-size: 14px; line-height: 1.95; color: var(--ink-2);
  white-space: pre-line;
}
.prose b { color: var(--ink); font-weight: 800; }