/* ===========================================================
   BaliPick — Design System v3.0
   Warm Sunset · Peach Gradient · Plum Dark · Gold Glow · Pretendard
   =========================================================== */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

/* ===== Tokens ===== */
:root {
  /* Brand Primary — Sunset Peach */
  --peach-50:  #FFEDE0;
  --peach-100: #FFD9BC;
  --peach-200: #FFC499;
  --peach-300: #FFA875;
  --peach-400: #FF8C5C;
  --peach-500: #E96A3A; /* primary */
  --peach-600: #C5512A;
  --peach-700: #9D3D1F;
  --peach-800: #762E18;
  --peach-900: #4E1E10;

  /* Plum — 어두운 보조 (1위 카드, 헤딩, 다크 배경) */
  --plum-500: #5C3D5C;
  --plum-600: #4A314A;
  --plum-700: #3D2840;

  /* Ocean / Green Compat Aliases — 시안 R 전환 후 모든 컴포넌트가 sunset 톤으로 자동 갱신 */
  --ocean-50:  var(--peach-50);
  --ocean-100: var(--peach-100);
  --ocean-200: var(--peach-200);
  --ocean-300: var(--peach-300);
  --ocean-400: var(--peach-400);
  --ocean-500: var(--peach-500);
  --ocean-600: var(--peach-600);
  --ocean-700: var(--peach-700);
  --ocean-800: var(--peach-800);
  --ocean-900: var(--peach-900);
  --green-50:  var(--peach-50);
  --green-100: var(--peach-100);
  --green-200: var(--peach-200);
  --green-300: var(--peach-300);
  --green-400: var(--peach-400);
  --green-500: var(--peach-500);
  --green-600: var(--peach-600);
  --green-700: var(--peach-700);
  --green-800: var(--peach-800);
  --green-900: var(--peach-900);

  /* Accent — Gold (sunset glow) */
  --coral-50:  #FFF7E1;
  --coral-100: #FFEAB8;
  --coral-300: #FFD56B;
  --coral-500: #FFB845;
  --coral-700: #D9A21F;

  /* Accent — Pink (액센트, badge 등) */
  --pink-500:  #FF6B8E;
  --pink-700:  #D44570;

  /* Shell Sand — 따뜻한 오프 화이트 */
  --sand-50:  #FFF8F3;
  --sand-100: #FFF1E5;
  --sand-300: #F0E6DC;
  --sand-500: #E5D7C7;

  /* Neutral Ink (warm brown gray) */
  --ink-0:   #ffffff;
  --ink-50:  #FAF6F2;
  --ink-100: #F0E6DC;
  --ink-200: #E5D7C7;
  --ink-300: #C7B5A4;
  --ink-400: #A0928E;
  --ink-500: #7E6E68;
  --ink-600: #5F4E55;
  --ink-700: #4A3D40;
  --ink-800: #2E2426;
  --ink-900: #1A1416;

  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 248, 243, 0.5);
  --glass-blur: blur(12px);

  /* Semantic */
  --success: #10B981;
  --warn:    #F59E0B;
  --error:   #EF4444;
  --info:    #3B82F6;

  /* Spacing (4-base) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* Radius (시안 R: 더 둥글게) */
  --r-sm: 10px; --r-md: 14px; --r-lg: 22px;
  --r-xl: 28px; --r-2xl: 36px; --r-pill: 9999px;

  /* Elevation (warm sunset shadow) */
  --shadow-1: 0 1px 3px rgba(229, 107, 71, 0.04);
  --shadow-2: 0 4px 16px rgba(229, 107, 71, 0.08);
  --shadow-3: 0 8px 24px rgba(229, 107, 71, 0.14);
  --shadow-4: 0 16px 48px rgba(229, 107, 71, 0.20);
  --shadow-glow: 0 0 0 4px rgba(255, 140, 92, 0.18), 0 8px 20px rgba(229, 107, 71, 0.25);

  /* Typography */
  --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Noto Sans KR', sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* scrollbar-gutter: stable — 페이지 콘텐츠 길이에 따라 세로 스크롤바 유무가 바뀌면서
   .container { margin: 0 auto } 가운데정렬이 스크롤바 너비(~15px) 만큼 흔들리는 현상 방지.
   페이지 이동 시 헤더 로고/네비 위치 안정. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--ink-800);
  background: var(--sand-50);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--peach-600); text-decoration: none; transition: all .2s; }
a:hover { color: var(--peach-700); }

/* Typography scale */
h1 { font-size: 32px; font-weight: 800; line-height: 1.2; color: var(--ink-900); letter-spacing: -0.02em; }
h2 { font-size: 24px; font-weight: 800; line-height: 1.2; color: var(--ink-900); letter-spacing: -0.01em; }
h3 { font-size: 20px; font-weight: 700; line-height: 1.4; color: var(--ink-900); }
small, .text-small { font-size: 14px; line-height: 1.5; }
.text-caption { font-size: 12px; line-height: 1.5; font-weight: 700; letter-spacing: 0.05em; color: var(--ink-500); text-transform: uppercase; }
code, .text-mono { font-family: var(--font-mono); font-size: 13px; }

/* ===== Layout ===== */
.container { max-width: 1000px; margin: 0 auto; padding: 0 var(--sp-4); }

/* ===== Header ===== */
.site-header {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  padding: var(--sp-4) 0;
  position: sticky; top: 0; z-index: 100;
}
.site-header .container {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  /* flex-wrap 제거 — "나의 픽" 버튼이 다음 줄로 떨어지지 않도록 */
  flex-wrap: nowrap;
  min-height: 40px;
}
.site-header .btn {
  padding: 6px 12px;
  font-size: 13px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* 모바일(≤480px) — nav 라벨 숨기고 아이콘만, 균등 touch target.
   이전 정책 (icon 숨김/text 유지) 은 4개 한국어 메뉴 + logo + basket + lang 합쳐서
   가로 폭 부족으로 cut off 회귀 → icon-only 로 reverse (한 손 모바일 동선 우선). */
@media (max-width: 480px) {
  .site-header { padding: var(--sp-3) 0; }
  .site-header .container { gap: 4px; padding-left: 12px; padding-right: 12px; }
  .header-nav { gap: 2px; }
  .header-nav__link {
    padding: 7px;
    min-width: 34px;
    min-height: 34px;
    justify-content: center;
    gap: 0;
    border-radius: 8px;
  }
  .header-nav__link svg { display: inline-flex !important; flex-shrink: 0; }
  .header-nav__link .header-nav__label { display: none; }
  .site-header .btn { padding: 5px 10px; font-size: 12px; }
  .logo { font-size: 1.05rem; }

  /* "나의 픽" CTA 도 icon-only — 360px 같은 더 좁은 폭에서 cut off 회피.
     impeccable polish (2026-05-22): basket/lang 와 동일 36×36 통일. */
  .btn--mypick,
  .btn--back {
    min-width: 36px;
    min-height: 36px;
    padding: 8px !important;
    justify-content: center;
    gap: 0;
    border-radius: 8px;
  }
  .btn--mypick .btn--mypick__icon,
  .btn--back .btn--back__icon { display: inline-flex; flex-shrink: 0; }
  .btn--mypick .btn--mypick__label { display: none; }
}

/* Header action stack — mypick ↔ back 토글 cross-fade.
 * 두 버튼이 같은 grid cell 에 overlay → hidden 인 element 는 opacity 0
 * + transform translateY(-3px) 로 페이드. display:none 은 transition 못 받으니
 * !important 로 inline-flex 강제 유지하고 opacity/pointer-events 로 비활성. */
.header-action-stack {
  display: inline-grid;
  grid-template-areas: 'action';
  align-items: stretch;
  justify-items: stretch;
  position: relative;
}
.header-action-stack > a {
  grid-area: action;
  transition: opacity .22s cubic-bezier(0.16, 1, 0.3, 1),
              transform .22s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-header .btn--mypick[hidden],
.site-header .btn--back[hidden] {
  display: inline-flex !important;
  opacity: 0;
  transform: translateY(-3px);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .header-action-stack > a { transition: none !important; }
  .site-header .btn--mypick[hidden],
  .site-header .btn--back[hidden] { transform: none !important; }
}

/* "나의 픽" CTA — restrained solid (gradient + shadow 제거 → sunset accent ≤10% 준수).
 * PRODUCT.md "restrained editorial" / DESIGN.md anti-AI-slop. */
.site-header .btn--mypick {
  background: var(--peach-500);
  color: var(--ink-0);
  border: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  /* impeccable polish (2026-05-22): basket/lang 36px height 와 데스크탑 vertical center
     일관. 그동안 padding 6px 12px 로 ~28px 였음 → 8px 12px = 36px 높이. */
  min-height: 36px;
  padding: 8px 12px;
  /* hover transition 누락 회귀 → 150ms ease-out-quart 일관 적용. */
  transition: background-color 150ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 120ms cubic-bezier(0.16, 1, 0.3, 1);
}
.site-header .btn--mypick:hover {
  background: var(--peach-600);
  text-decoration: none;
}
.site-header .btn--mypick:active { transform: scale(0.96); }
@media (prefers-reduced-motion: reduce) {
  .site-header .btn--mypick { transition: none !important; }
  .site-header .btn--mypick:active { transform: none !important; }
}
.btn--mypick__icon { display: none; }   /* desktop: text-only */

/* 백버튼 — mypick btn 과 동일 위치/크기, ghost 톤 (navigation utility,
 * promotion CTA 아님). 한 손 도달성 + 시각 weight 차별. */
.site-header .btn--back {
  background: transparent;
  color: var(--ink-700);
  border: 1.5px solid var(--ink-200);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
  min-width: 34px;
  min-height: 34px;
  border-radius: 8px;
  text-decoration: none;
  /* impeccable polish (2026-05-22): timing 150ms + ease-out-quart 일관 (header 4-link 동일). */
  transition: background 150ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 150ms cubic-bezier(0.16, 1, 0.3, 1),
              color 150ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 120ms cubic-bezier(0.16, 1, 0.3, 1);
}
.site-header .btn--back:hover {
  background: var(--ink-100);
  border-color: var(--ink-300);
  color: var(--ink-900);
  text-decoration: none;
}
.site-header .btn--back:active { transform: scale(0.96); }
.site-header .btn--back:focus-visible {
  outline: 2px solid var(--coral-500);
  outline-offset: 2px;
}
.btn--back__icon { display: inline-flex; flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) {
  .site-header .btn--back { transition: none !important; }
  .site-header .btn--back:active { transform: none !important; }
}
.logo {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--green-600);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}
.logo svg { flex-shrink: 0; }
.logo span { white-space: nowrap; }
.header-sub { font-size: 13px; color: var(--ink-500); }

/* ── Header Nav ─────────────────────────────────────────── */
.header-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.header-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;            /* impeccable polish: btn--mypick 와 일관 (5→6) */
  padding: 5px 10px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-600);
  text-decoration: none;
  /* 150ms + ease-out-quart 일관 (btn--mypick / btn--back 동일 timing). */
  transition: background 150ms cubic-bezier(0.16, 1, 0.3, 1),
              color      150ms cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}
.header-nav__link:hover {
  background: var(--ink-100);
  color: var(--ink-800);
}
.header-nav__link.active {
  background: var(--green-50);
  color: var(--green-700);
  font-weight: 600;
}

/* ── Header Search Button ─────────────────────────────────── */
.header-search {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--r-pill);
  background: var(--ink-0);
  border: 1px solid var(--ink-100);
  color: var(--ink-700);
  transition: background .12s, border-color .12s, color .12s, transform .08s;
  flex-shrink: 0;
}
.header-search:hover {
  background: var(--green-50);
  border-color: var(--green-200);
  color: var(--green-700);
  text-decoration: none;
}
.header-search:active { transform: scale(0.95); }

/* ===== Footer ===== */
.site-footer {
  margin-top: var(--sp-12);
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--ink-100);
  font-size: 13px;
  color: var(--ink-500);
  text-align: center;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 10px 16px;
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform .08s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.2;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; }

.btn--primary {
  background: var(--green-500);
  color: var(--ink-0);
  box-shadow: var(--shadow-1);
}
.btn--primary:hover { background: var(--green-600); box-shadow: var(--shadow-2); }

.btn--secondary {
  background: var(--green-50);
  color: var(--green-700);
  border-color: var(--green-100);
}
.btn--secondary:hover { background: var(--green-100); border-color: var(--green-200); }

.btn--ghost {
  background: transparent;
  color: var(--ink-700);
}
.btn--ghost:hover { background: var(--ink-50); }

.btn--whatsapp {
  background: var(--green-500);
  color: var(--ink-0);
  font-size: 15px;
  padding: 12px 20px;
  box-shadow: var(--shadow-glow);
}
.btn--whatsapp:hover { background: var(--green-600); }

.btn--danger {
  background: var(--coral-50);
  color: var(--coral-700);
  border-color: var(--coral-100);
}
.btn--danger:hover { background: var(--coral-100); border-color: var(--coral-300); }

.btn--accent {
  background: var(--coral-500);
  color: var(--ink-0);
}
.btn--accent:hover { background: var(--coral-700); }

/* ===== Search / Filter ===== */
.search-section { padding: var(--sp-8) 0 var(--sp-5); }
.search-title {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: var(--sp-5);
  color: var(--ink-900);
  letter-spacing: -0.02em;
}
.search-form { width: 100%; }
.filter-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.filter-select, .filter-input {
  padding: 10px 12px;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  font-size: 14px;
  font-family: var(--font-sans);
  background: var(--ink-0);
  min-width: 120px;
  color: var(--ink-800);
  transition: border-color .15s, box-shadow .15s;
}
.filter-input { flex: 1; min-width: 160px; }
.filter-select:focus, .filter-input:focus {
  outline: none;
  border-color: var(--green-400);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--green-500) 18%, transparent);
}

/* ===== 필터 탭 ===== */
.filter-group { margin-bottom: var(--sp-3); }
.filter-group__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--sp-2);
}
.filter-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.filter-tabs::-webkit-scrollbar { display: none; }
.filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--ink-200);
  background: var(--ink-0);
  color: var(--ink-600);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  transition: background .12s, color .12s, border-color .12s;
  -webkit-tap-highlight-color: transparent;
}
.filter-tab:hover:not(.active) {
  background: var(--ink-50);
  border-color: var(--green-300);
  color: var(--ink-900);
}
/* 전체 / 지역 active */
.filter-tab--all.active,
.filter-tab--region.active {
  background: var(--green-500);
  border-color: var(--green-500);
  color: #fff;
  font-weight: 700;
}
/* 카테고리별 active */
.filter-tab--vehicle.active  { background: oklch(0.93 0.04 220); border-color: oklch(0.62 0.12 220); color: oklch(0.30 0.14 220); font-weight: 700; }
.filter-tab--food.active     { background: var(--coral-50);      border-color: var(--coral-300);    color: var(--coral-700);       font-weight: 700; }
.filter-tab--activity.active { background: var(--green-50);      border-color: var(--green-300);    color: var(--green-700);        font-weight: 700; }
.filter-tab--wellness.active { background: oklch(0.93 0.04 320); border-color: oklch(0.63 0.09 320); color: oklch(0.33 0.11 320);   font-weight: 700; }
.filter-tab--stay.active     { background: oklch(0.94 0.04 75);  border-color: oklch(0.66 0.12 75);  color: oklch(0.35 0.09 75);    font-weight: 700; }
.filter-tab--life.active     { background: oklch(0.93 0.04 185); border-color: oklch(0.62 0.09 185); color: oklch(0.33 0.11 185);   font-weight: 700; }

/* ===== Results ===== */
.results-section { padding: var(--sp-2) 0 var(--sp-8); }
.results-count {
  font-size: 13px;
  color: var(--ink-500);
  margin-bottom: var(--sp-3);
  letter-spacing: 0.02em;
}

/* ===== Cards ===== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-3);
}
.card {
  background: var(--ink-0);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  display: block;
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
  color: inherit;
}
.card:hover {
  text-decoration: none;
  border-color: var(--green-200);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
.card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.card-name { font-weight: 700; font-size: 16px; color: var(--ink-900); letter-spacing: -0.01em; }
.card-meta { font-size: 13px; color: var(--ink-500); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.card-category { color: var(--green-700); font-weight: 500; }
.card-region { color: var(--ink-600); }

/* ===== 카테고리 칩 ===== */
.chip-cat {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px 2px 4px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  flex-shrink: 0;
  line-height: 1.5;
}
.chip-cat--vehicle  { background: oklch(0.94 0.03 220); color: oklch(0.32 0.14 220); }
.chip-cat--food     { background: var(--coral-50);      color: var(--coral-700); }
.chip-cat--activity { background: var(--green-50);      color: var(--green-700); }
.chip-cat--wellness { background: oklch(0.94 0.03 320); color: oklch(0.35 0.11 320); }
.chip-cat--stay     { background: oklch(0.95 0.03 75);  color: oklch(0.37 0.09 75); }
.chip-cat--life     { background: oklch(0.94 0.03 185); color: oklch(0.35 0.11 185); }

/* ===== 카드 플레이스홀더 (사진 없는 카드) ===== */
.card-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-placeholder svg { opacity: .5; }
.card-placeholder--vehicle  { background: oklch(0.96 0.04 220); color: oklch(0.38 0.14 220); }
.card-placeholder--food     { background: oklch(0.94 0.05 28);  color: var(--coral-500); }
.card-placeholder--activity { background: var(--green-100);     color: var(--green-500); }
.card-placeholder--wellness { background: oklch(0.95 0.04 320); color: oklch(0.42 0.11 320); }
.card-placeholder--stay     { background: oklch(0.96 0.04 75);  color: oklch(0.43 0.10 75); }
.card-placeholder--life     { background: oklch(0.95 0.04 185); color: oklch(0.40 0.11 185); }

/* ===== Badge / Tag / Chip ===== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.badge--gold {
  background: color-mix(in oklch, var(--coral-300) 18%, var(--ink-0));
  color: var(--coral-700);
}
.badge--green {
  background: var(--green-50);
  color: var(--green-700);
}
.badge--gray {
  background: var(--ink-100);
  color: var(--ink-700);
}
.badge--coral {
  background: var(--coral-50);
  color: var(--coral-700);
}
.badge--info {
  background: color-mix(in oklch, var(--info) 14%, var(--ink-0));
  color: oklch(0.42 0.13 220);
}

/* ===== Trust badges (Design Ref: §05 Badges + §09 Icons) ===== */
.badge--trust-base {
  padding: 4px 10px 4px 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.badge--trust-base svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* 신뢰업체 — Tropical Green dark + leaf icon */
.badge--trust {
  background: var(--green-700);
  color: var(--ink-0);
  box-shadow: var(--shadow-1);
}
.badge--trust svg { stroke: var(--green-100); }

/* 확인됨 — Success green soft + check icon */
.badge--verified {
  background: color-mix(in oklch, var(--success) 14%, var(--ink-0));
  color: var(--green-700);
  border: 1px solid color-mix(in oklch, var(--success) 25%, transparent);
}
.badge--verified svg { stroke: var(--success); }

/* 미검증 — Sand neutral + info icon */
.badge--unverified {
  background: var(--sand-100);
  color: var(--ink-700);
  border: 1px solid var(--sand-300);
}
.badge--unverified svg { stroke: var(--ink-500); }

/* ===== Provider Detail ===== */
.provider-detail { padding: var(--sp-6) 0 var(--sp-8); }
.view-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--ink-400);
  margin: -10px 0 14px;
}
.provider-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}
.provider-name { font-size: 28px; font-weight: 800; line-height: 1.2; color: var(--ink-900); letter-spacing: -0.02em; }
.provider-info {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--sp-3) var(--sp-4);
  background: var(--ink-0);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--ink-100);
  margin-bottom: var(--sp-4);
  font-size: 14px;
}
.provider-info dt { color: var(--ink-500); font-weight: 500; font-size: 13px; }
.provider-info dd { color: var(--ink-800); }
.provider-phone { font-family: var(--font-mono); font-size: 15px; color: var(--green-700); font-weight: 600; }
.provider-note, .provider-description {
  background: var(--sand-50);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  margin: var(--sp-3) 0;
  white-space: pre-wrap;
  line-height: 1.6;
  border-left: 3px solid var(--sand-300);
  color: var(--ink-700);
}
.provider-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-5) 0; }
/* ===== Pagination ===== */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin: var(--sp-6) 0;
  font-size: 14px;
}

/* ===== Empty State ===== */
.empty-state {
  text-align: center;
  padding: var(--sp-12) var(--sp-5);
  color: var(--ink-500);
  background: var(--ink-0);
  border-radius: var(--r-lg);
  border: 1px dashed var(--ink-200);
}
.empty-state h2 { color: var(--ink-800); margin-bottom: var(--sp-3); }

/* ===== Forms ===== */
.form-group { margin-bottom: var(--sp-4); }
.form-group label {
  display: block;
  margin-bottom: var(--sp-2);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-800);
}
.form-group input[type="text"],
.form-group input[type="tel"],
.form-group input[type="url"],
.form-group input[type="password"],
.form-group input[type="file"],
.form-group input[type="email"],
.form-group input[type="number"],
.form-group input[type="search"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  font-size: 15px;
  font-family: var(--font-sans);
  background: var(--ink-0);
  color: var(--ink-900);
  transition: border-color .15s, box-shadow .15s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--green-400);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--green-500) 18%, transparent);
}
.form-group input:disabled { background: var(--ink-50); color: var(--ink-500); }
/* 입력 필드 하단 도움말 텍스트 — <small> 은 기본 inline 이라 input 옆에 붙음. block 으로 강제. */
.form-group small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-500);
  line-height: 1.4;
}
.form-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-5); flex-wrap: wrap; }

/* ===== Alert ===== */
.alert {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  margin: var(--sp-3) 0;
  font-size: 14px;
  border: 1px solid transparent;
}
.alert--error {
  background: var(--coral-50);
  color: var(--coral-700);
  border-color: var(--coral-100);
}
.alert--success {
  background: var(--green-50);
  color: var(--green-700);
  border-color: var(--green-100);
}
.alert--info {
  background: color-mix(in oklch, var(--info) 12%, var(--ink-0));
  color: oklch(0.40 0.13 220);
  border-color: color-mix(in oklch, var(--info) 25%, transparent);
}

/* ===== Admin ===== */
.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--ink-100);
  flex-wrap: wrap;
}
.admin-title { font-size: 20px; font-weight: 700; color: var(--ink-900); letter-spacing: -0.01em; }
.admin-nav { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--ink-0);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  overflow: hidden;
  font-size: 14px;
}
.data-table th, .data-table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--ink-100);
}
.data-table th {
  background: var(--sand-50);
  font-weight: 600;
  color: var(--ink-700);
  font-size: 13px;
  letter-spacing: 0.02em;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--green-50); }

/* ===== Login ===== */
.login-box {
  max-width: 400px;
  margin: var(--sp-12) auto;
  padding: var(--sp-8);
  background: var(--ink-0);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-3);
  border: 1px solid var(--ink-100);
}
.login-box h1 {
  font-size: 24px;
  margin-bottom: var(--sp-5);
  text-align: center;
  color: var(--ink-900);
}

/* ===== Phase 2: 사용자 제출 라벨 ===== */
.user-submitted-label {
  background: color-mix(in oklch, var(--coral-300) 18%, var(--ink-0));
  border-left: 4px solid var(--coral-500);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  margin: var(--sp-3) 0;
  font-weight: 600;
  color: var(--coral-700);
  font-size: 14px;
}
.user-submitted-label small {
  display: block;
  font-weight: normal;
  font-size: 12px;
  margin-top: var(--sp-1);
  color: var(--ink-600);
}

/* ===== Phase 2: 벌크 폼 행 ===== */
.batch-row {
  border: 1px solid var(--ink-100);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
  border-radius: var(--r-lg);
  background: var(--ink-0);
}
.batch-row legend {
  font-weight: 700;
  padding: 0 var(--sp-2);
  color: var(--ink-800);
}

/* Batch row remove button — Design Ref: §09 Icons (24px line · 1.8 stroke) */
.btn-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1.5px solid var(--ink-200);
  border-radius: var(--r-pill);
  color: var(--ink-500);
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, transform .08s;
}
.btn-remove svg {
  width: 14px;
  height: 14px;
}
.btn-remove:hover {
  background: var(--coral-50);
  border-color: var(--coral-300);
  color: var(--coral-700);
}
.btn-remove:active {
  transform: scale(0.92);
}
.btn-remove:focus-visible {
  outline: 2px solid var(--coral-500);
  outline-offset: 2px;
}

/* ===== Phase 3: Trip 카드 / Hero ===== */
.trip-header {
  background: linear-gradient(135deg, var(--green-50), var(--sand-50));
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--r-2xl);
  margin-bottom: var(--sp-6) !important;
  position: relative;
  overflow: hidden;
}
.trip-header::after {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, var(--green-200) 0%, transparent 65%);
  opacity: 0.6;
  pointer-events: none;
}
.trip-header h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }

/* Match candidates 후보 카드 */
.match-candidates {
  background: var(--sand-50);
  border: 1px solid var(--sand-300);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  margin: var(--sp-2) 0;
}

/* ===== Feedback Widget (Design Ref: §05 + §09 Icons) ===== */
.feedback-widget {
  background: var(--sand-50);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  margin: var(--sp-5) 0;
}
.feedback-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-700);
  margin-bottom: var(--sp-3);
}
.feedback-buttons {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.feedback-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px 14px;
  background: var(--ink-0);
  border: 1.5px solid var(--ink-200);
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-700);
  cursor: pointer;
  transition: all .15s ease;
  line-height: 1;
}
.feedback-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.feedback-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
}
.feedback-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.feedback-btn--positive {
  border-color: var(--green-200);
  color: var(--green-700);
}
.feedback-btn--positive svg { stroke: var(--green-500); }
.feedback-btn--positive:hover:not(:disabled) {
  background: var(--green-50);
  border-color: var(--green-400);
}

.feedback-btn--negative {
  border-color: var(--ink-200);
  color: var(--ink-700);
}
.feedback-btn--negative svg { stroke: var(--ink-500); }
.feedback-btn--negative:hover:not(:disabled) {
  background: var(--ink-50);
  border-color: var(--ink-400);
}

.feedback-btn--report {
  border-color: var(--coral-100);
  color: var(--coral-700);
}
.feedback-btn--report svg { stroke: var(--coral-500); }
.feedback-btn--report:hover:not(:disabled) {
  background: var(--coral-50);
  border-color: var(--coral-300);
}

.feedback-note-wrap {
  margin-top: var(--sp-3);
}
.feedback-note-wrap textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: 14px;
  background: var(--ink-0);
  resize: vertical;
}
.feedback-note-wrap textarea:focus {
  outline: none;
  border-color: var(--coral-300);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--coral-500) 14%, transparent);
}

.feedback-msg {
  margin-top: var(--sp-3);
  font-size: 13px;
  font-weight: 500;
}
.feedback-msg--ok  { color: var(--green-700); }
.feedback-msg--err { color: var(--coral-700); }

/* ===== 모바일 반응형 ===== */
@media (max-width: 767px) {
  body { font-size: 14px; }
  .container { padding: 0 var(--sp-3); }
  .search-title, .provider-name { font-size: 22px; }
  h1 { font-size: 22px; }
  h2 { font-size: 18px; }

  /* 모바일 헤더 — logo + 버튼만, header-sub 숨김 */
  .site-header .container { gap: var(--sp-2); }
  .header-sub { display: none; }
  .site-header .btn { padding: 6px 10px; font-size: 12px; }
  .logo { font-size: 1.1rem; }
  .logo svg { width: 26px; height: 26px; }
  .header-nav__link span, .header-nav__link svg { /* 텍스트만 유지 */ }
  .header-nav { gap: 2px; }
  .header-nav__link { padding: 4px 8px; font-size: 12px; }

  .filter-row { flex-direction: column; align-items: stretch; }
  .filter-select, .filter-input { width: 100%; min-width: 0; }

  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .provider-actions { flex-direction: column; }
  .provider-actions .btn { width: 100%; }

  .data-table { font-size: 12px; }
  .data-table th, .data-table td { padding: var(--sp-2) var(--sp-3); }

  .provider-info { grid-template-columns: 80px 1fr; gap: var(--sp-2) var(--sp-3); padding: var(--sp-4); }
  .login-box { margin: var(--sp-5) var(--sp-3); padding: var(--sp-5); }
  .admin-header { flex-direction: column; align-items: stretch; }
  .admin-nav { justify-content: flex-start; }

  .batch-row > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* iOS Safari: 16px 미만 input은 포커스 시 자동 줌 — 16px로 강제 */
  .form-group input[type="text"],
  .form-group input[type="url"],
  .form-group input[type="password"],
  .form-group input[type="email"],
  .form-group input[type="tel"],
  .form-group input[type="number"],
  .form-group input[type="search"],
  .form-group select,
  .form-group textarea,
  .filter-input,
  .filter-select,
  input[type="text"],
  input[type="url"],
  input[type="password"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px;
  }
}

/* ===== Animations ===== */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card, .alert, .empty-state { animation: fade-in .25s ease; }

/* ===== View Transitions API — 트립 카드 박스 → 상세 헤더 (옵션 C) ===== */
@view-transition {
  navigation: auto;
}

/* 루트(전체 페이지) 전환 — 카드 외 영역 cross-fade */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.36s;
  animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
}

/* 모핑 대상(카드 ↔ 헤더): 두 요소 위치/크기 자동 보간 + 부드러운 fade */
::view-transition-group(*[id^="trip-card-"]),
::view-transition-old(*[id^="trip-card-"]),
::view-transition-new(*[id^="trip-card-"]),
::view-transition-group(*[id^="provider-card-"]),
::view-transition-old(*[id^="provider-card-"]),
::view-transition-new(*[id^="provider-card-"]) {
  animation-duration: 0.42s;
  animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
}

/* 사진 thumb 별도 morph 그룹 — 카드 박스보다 살짝 늦게 시작·길게 종료 */
::view-transition-group(*[id^="provider-thumb-"]),
::view-transition-old(*[id^="provider-thumb-"]),
::view-transition-new(*[id^="provider-thumb-"]) {
  animation-duration: 0.46s;
  animation-timing-function: cubic-bezier(0.2, 0, 0.15, 1);
}

/* 카드/헤더 paint containment */
.card,
.trip-header,
.pick-thumb,
.provider-detail {
  contain: layout;
}

/* 카드 thumb / 상세 첫 슬라이드 — object-fit 통일로 비율 차이 흡수 */
.card-thumb,
.photo-slider__slide {
  overflow: hidden;
}
.card-thumb img,
.photo-slider__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 사용자 모션 줄이기 요청 시 즉시 전환 */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ===== View Transitions API (POC: 트립 카드 → 트립 상세) =====
   Chrome 126+, Safari 18+ 지원. 미지원 브라우저는 일반 전환.
*/
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.32s;
  animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
}

/* 카드/헤더가 부드럽게 모핑되도록 */
.pick-thumb,
.trip-header {
  contain: layout;
}

/* 사용자가 모션 줄이기 요청한 경우 즉시 전환 */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}

/* ============================================================
   트립 작성 / 수정 페이지 (trip/new.phtml, trip/edit.phtml)
   ============================================================ */
.create__body {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-4) var(--sp-12);
}
.create__title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: var(--sp-2);
  color: var(--ink-900);
}
.create__sub {
  font-size: 14.5px;
  color: var(--ink-600);
  line-height: 1.6;
  margin-bottom: var(--sp-6);
}
.create__sub strong { color: var(--green-700); font-weight: 700; }
.create__h {
  font-size: 18px;
  font-weight: 700;
  margin: var(--sp-8) 0 var(--sp-3);
  letter-spacing: -0.01em;
  color: var(--ink-900);
}
.create__cta {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  flex-wrap: wrap;
}

/* form field 단위 ─────────────────────────────────────── */
.field {
  display: block;
  margin-bottom: var(--sp-4);
}
.field__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-800);
  margin-bottom: var(--sp-2);
  letter-spacing: -0.005em;
}
.field__opt {
  color: var(--ink-400);
  font-weight: 500;
  font-size: 12px;
  margin-left: 4px;
}
.field input[type="text"],
.field input[type="url"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  font-size: 15px;
  font-family: var(--font-sans);
  background: var(--ink-0);
  color: var(--ink-900);
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--green-400);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--green-500) 18%, transparent);
}
.field textarea { resize: vertical; min-height: 72px; }

/* 픽 (트립 항목) 슬롯 카드 ───────────────────────────── */
.slot {
  background: var(--ink-0);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
  box-shadow: var(--shadow-1);
  transition: border-color .15s, box-shadow .15s;
}
.slot:hover { border-color: var(--ink-200); }
.slot__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--ink-100);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-700);
}

/* + 항목 추가 버튼 ────────────────────────────────────── */
.add-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  padding: 14px var(--sp-4);
  background: var(--ink-0);
  border: 1.5px dashed var(--green-300);
  border-radius: var(--r-lg);
  color: var(--green-700);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .08s;
}
.add-slot:hover {
  background: var(--green-50);
  border-color: var(--green-500);
  border-style: solid;
}
.add-slot:active { transform: scale(0.99); }
.add-slot span span { color: var(--ink-500); font-weight: 500; font-size: 12px; }

/* 아이콘 버튼 (작은 원형) ─────────────────────────────── */
.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  color: var(--ink-600);
  cursor: pointer;
  transition: background .15s, color .15s;
  font-size: 14px;
}
.iconbtn:hover { background: var(--ink-100); color: var(--ink-800); }
.iconbtn--sm { width: 26px; height: 26px; font-size: 12px; }

/* btn--coral / btn--sm — 트립 페이지 전용 누락 변형 ───── */
.btn--coral {
  background: var(--coral-500);
  color: var(--ink-0);
  box-shadow: 0 2px 0 var(--coral-700), 0 8px 20px rgba(226, 107, 67, .25);
}
.btn--coral:hover { background: var(--coral-700); }
.btn--sm { padding: 6px 12px; font-size: 12.5px; }

/* btn-unmap (스팟 매핑 해제) ─────────────────────────── */
.btn-unmap {
  background: transparent;
  border: 1px solid var(--ink-200);
  color: var(--ink-600);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 12px;
  cursor: pointer;
  transition: all .12s;
}
.btn-unmap:hover {
  background: var(--coral-50);
  border-color: var(--coral-300);
  color: var(--coral-700);
}

/* 텍스트 링크 ─────────────────────────────────────────── */
.link {
  color: var(--green-700);
  text-decoration: underline;
  text-decoration-color: var(--green-200);
  text-underline-offset: 3px;
  font-weight: 600;
  cursor: pointer;
}
.link:hover { text-decoration-color: var(--green-500); }

/* 후보 / 매핑 상태 ────────────────────────────────────── */
.candidates-list {
  background: var(--sand-50);
  border: 1px solid var(--sand-300);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  margin-top: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}
.mapped-info {
  background: var(--green-50);
  border: 1px solid var(--green-200);
  border-radius: var(--r-md);
  padding: 10px var(--sp-3);
  font-size: 13px;
  color: var(--green-800);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin: var(--sp-2) 0;
}
.row-mode-input,
.row-mode-mapped {
  margin-top: var(--sp-2);
}

/* 사진 input + 미리보기 ───────────────────────────────── */
.photo-file-input {
  display: block;
  width: 100%;
  padding: 8px;
  border: 1.5px dashed var(--ink-200);
  border-radius: var(--r-md);
  background: var(--ink-50);
  font-size: 13px;
  color: var(--ink-600);
  cursor: pointer;
}
.photo-file-input:hover { background: var(--ink-100); border-color: var(--green-300); }
.photo-preview-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.photo-preview-list img {
  width: 64px; height: 64px;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--ink-200);
}

/* 모바일 ───────────────────────────────────────────────── */
@media (max-width: 767px) {
  .create__body { padding: var(--sp-4) var(--sp-3) var(--sp-12); }
  .create__title { font-size: 22px; }
  .create__cta { flex-direction: column; }
  .create__cta .btn { width: 100%; }
}

/* ============================================================
   BaliPick 별점 위젯 (provider_show.phtml + trip/show.phtml 공통)
   v3.0 R Bold Plum tone — dark plum bg + sunset gold leaves
   ============================================================ */
.balirating-section {
  position: relative;
  margin: 24px 0 16px;
  padding: 24px 22px;
  background: linear-gradient(135deg, var(--plum-500) 0%, var(--plum-700) 100%);
  border: none;
  border-radius: 22px;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(61,40,64,.28);
}
.balirating-section::before {
  content: '';
  position: absolute;
  right: -40px; bottom: -40px;
  width: 180px; height: 180px;
  background: radial-gradient(circle at center, rgba(255,184,69,.22) 0%, transparent 65%);
  pointer-events: none;
}
.balirating-title {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 10px;
  position: relative; z-index: 1;
}
.balirating-avg {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: .85rem;
  color: rgba(255,255,255,.75);
  margin-bottom: 12px;
  padding: 6px 14px 6px 12px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,184,69,.30);
  border-radius: 99px;
  position: relative; z-index: 1;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.balirating-avg__score {
  font-size: 1.3rem;
  font-weight: 800;
  color: #FFD09A;
  letter-spacing: -.01em;
}
.balirating-avg__max   { color: rgba(255,255,255,.7); font-size: .85rem; font-weight: 600; }
.balirating-avg__count { color: rgba(255,255,255,.8); font-size: .8rem; margin-left: 6px; }

.balirating-chars {
  display: flex;
  gap: 6px;
  user-select: none;
  touch-action: none;
  cursor: pointer;
  width: fit-content;
  position: relative; z-index: 1;
}
.balirating-char {
  position: relative;
  width: 44px;
  height: 84px; /* viewBox 44×84 비율 */
  flex-shrink: 0;
}
.balichar {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform .15s ease;
  overflow: hidden; /* SVG path stroke/그림자가 viewBox 밖으로 새는 것 차단 */
}
.balichar--fill {
  position: absolute;
  top: 0; left: 0;
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
  /* drop-shadow 는 인접 잎의 어두운 영역에 골드 글로우를 흘려 흰빛으로 비치는 경우가 있어 제거 */
}
.balirating-char.hovered .balichar {
  transform: translateY(-4px);
}
.balirating-label {
  margin-top: 10px;
  font-size: 13px;
  color: rgba(255,255,255,.75);
  font-weight: 500;
  min-height: 22px;
  transition: color .15s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  position: relative; z-index: 1;
}
.balirating-label.rated  { color: #FFD09A; font-weight: 700; }
.balirating-label.thanks { color: #FFE9A8; }
.balirating-score { font-variant-numeric: tabular-nums; }

@media (max-width: 480px) {
  /* 모바일에서 5잎 + gap 6px = 44*5 + 6*4 = 244px → 화면 폭 부족할 수 있어 살짝 축소 */
  .balirating-char { width: 38px; height: 72px; }
  .balirating-chars { gap: 4px; }
}

/* ============================================================
   Provider Detail · v3.0 R Bold Plum
   Hero + Info Card + Description + Floating CTA
   ============================================================ */
.provider-detail--r3 {
  padding: 8px 0 140px; /* floating CTA 가림 보상 */
  contain: none; /* fixed 자손이 viewport 기준으로 위치하도록 */
}
.provider-detail--r3 .provider-header,
.provider-detail--r3 .view-count { display: none; } /* 기존 헤더 비활성 */

/* HERO */
.provider-hero {
  margin: 0 0 16px;
  padding: 28px 24px 24px;
  background: linear-gradient(135deg, #FFD3A0 0%, #FF8C5C 50%, #E96A3A 100%);
  border-radius: 28px;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(229,107,71,.22);
}
.provider-hero::after {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(255,255,255,.4) 0%, transparent 60%);
  border-radius: 50%;
  pointer-events: none;
}
.provider-hero__tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 14px;
  position: relative; z-index: 1;
}
.provider-hero__tag {
  background: rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 99px;
  letter-spacing: .02em;
  white-space: nowrap;
}
.provider-hero__tag--unverified { background: rgba(255,184,69,.92); color: #4A2A00; }
.provider-hero__tag--is-trust   { background: #FFFFFF; color: #9D3D1F; }
.provider-hero__tag--is-verified{ background: rgba(255,255,255,.92); color: #5C3D5C; }
.provider-detail--r3 .provider-name {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.18;
  margin-bottom: 8px;
  color: #fff;
  position: relative; z-index: 1;
  word-break: keep-all;
}
.provider-hero__views {
  font-size: 13px;
  color: rgba(255,255,255,.88);
  display: inline-flex; align-items: center; gap: 4px;
  position: relative; z-index: 1;
  margin: 0;
}

/* USER SUBMITTED NOTICE (둥근 골드 아이콘 + title/sub 본문) */
.provider-detail--r3 .user-submitted-label {
  margin: 0 0 14px;
  padding: 14px 16px;
  background: #FFF7E1;
  border: 1px solid #FCE5A1;
  border-radius: 16px;
  border-left: none;
  box-shadow: none;
  color: #8A6A1A;
  font-size: 13.5px;
  line-height: 1.55;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.provider-detail--r3 .user-submitted-label__icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: #FFB845;
  border-radius: 50%;
  color: #fff;
}
.provider-detail--r3 .user-submitted-label__body { flex: 1; min-width: 0; }
.provider-detail--r3 .user-submitted-label__title {
  font-weight: 700;
  color: #6B4500;
  font-size: 14px;
  margin-bottom: 2px;
}
.provider-detail--r3 .user-submitted-label small {
  display: block;
  color: #8A6A1A;
  font-size: 12.5px;
  margin: 0;
}

/* INFO LIST — 큰 라운드 카드 + row 구분선 */
.provider-detail--r3 .provider-info {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 0;
  background: #FFFFFF;
  border: none;
  border-radius: 20px;
  padding: 0;
  margin: 0 0 14px;
  font-size: 14.5px;
  box-shadow: 0 2px 12px rgba(229,107,71,.06);
  overflow: hidden;
}
.provider-detail--r3 .provider-info dt,
.provider-detail--r3 .provider-info dd {
  padding: 14px 22px;
  border-bottom: 1px solid #F0E6DC;
  margin: 0;
  display: flex;
  align-items: center;
}
.provider-detail--r3 .provider-info dt {
  color: #A0928E;
  font-size: 13px;
  font-weight: 600;
}
.provider-detail--r3 .provider-info dd {
  color: #2E2426;
  font-weight: 600;
  justify-content: flex-end;
  text-align: right;
}
.provider-detail--r3 .provider-info > :nth-last-child(-n+2) { border-bottom: none; }
.provider-detail--r3 .provider-info dd.provider-phone {
  font-family: var(--font-mono);
  color: var(--peach-500);
  font-weight: 700;
  font-size: 14px;
}
.provider-detail--r3 .provider-info dd a {
  color: var(--peach-500) !important;
  font-weight: 700;
}
.provider-detail--r3 .provider-info dd code {
  background: var(--peach-50);
  color: var(--peach-700);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 700;
}
.provider-detail--r3 .provider-info dd small { color: #A0928E; font-size: 12px; }

/* DESCRIPTION / NOTE — 액센트 라인 제거, 큰 라운드 흰 카드 */
.provider-detail--r3 .provider-description,
.provider-detail--r3 .provider-note {
  margin: 0 0 14px;
  padding: 20px 22px;
  background: #FFFFFF;
  border: none;
  border-left: none;
  border-radius: 20px;
  color: #2E2426;
  font-size: 15px;
  line-height: 1.7;
  box-shadow: 0 2px 12px rgba(229,107,71,.06);
}

/* FLOATING CTA — 화면 하단 고정, 배경 완전 투명 (버튼만 노출) */
.provider-actions--floating {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 720px;
  z-index: 80;
  margin: 0;
  padding: 12px 20px 20px;
  background: transparent;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none; /* 배경 영역은 클릭 통과 */
}
.provider-actions--floating .btn { pointer-events: auto; }
.provider-actions--floating .btn { width: 100%; }
.btn--pill {
  border-radius: 99px;
  padding: 16px 20px;
  font-size: 15.5px;
  font-weight: 800;
  justify-content: center;
}
.provider-detail--r3 .btn--whatsapp.btn--pill {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  box-shadow: 0 8px 24px rgba(18,140,126,.30);
}
.provider-detail--r3 .btn--primary.btn--pill {
  background: linear-gradient(135deg, var(--peach-400) 0%, var(--peach-600) 100%);
  box-shadow: 0 8px 22px rgba(229,107,71,.30);
}
.provider-detail--r3 .btn--secondary.btn--pill {
  background: #FFFFFF;
  color: #5F4E55;
  border: 1px solid #E5D7C7;
  font-weight: 700;
  font-size: 14.5px;
  box-shadow: 0 4px 12px rgba(0,0,0,.04);
}

@media (max-width: 480px) {
  .provider-detail--r3 .provider-name { font-size: 24px; }
  .provider-detail--r3 .provider-info { grid-template-columns: 86px 1fr; }
  .provider-detail--r3 .provider-info dt,
  .provider-detail--r3 .provider-info dd { padding: 13px 18px; }
  .provider-hero { padding: 24px 20px 20px; }
}

/* ============================================================
   트립 상세 페이지 댓글 영역 (trip/show.phtml)
   ============================================================ */
.comment-form-wrap {
  background: var(--sand-50);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  margin: var(--sp-5) 0 var(--sp-4);
}
.comment-form {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  flex-wrap: wrap;
}
.comment-form .filter-input { flex: 0 0 auto; }
.comment-textarea {
  flex: 1 1 240px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  font-size: 14px;
  font-family: var(--font-sans);
  background: var(--ink-0);
  color: var(--ink-900);
  resize: vertical;
  min-height: 56px;
  transition: border-color .15s, box-shadow .15s;
}
.comment-textarea:focus {
  outline: none;
  border-color: var(--green-400);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--green-500) 18%, transparent);
}
@media (max-width: 600px) {
  .comment-form { flex-direction: column; }
  .comment-form .filter-input,
  .comment-textarea,
  .comment-form .btn { width: 100%; }
}
/* placeholder 만 작게 — input 본문은 iOS 자동 줌 방지 위해 16px 유지 */
input::placeholder,
textarea::placeholder,
.filter-input::placeholder,
.comment-textarea::placeholder {
  font-size: 13px;
  opacity: .55;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  font-size: 13px;
}

/* 댓글 카드 ───────────────────────────────────────────── */
.comment-item {
  background: var(--ink-0);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-2);
  transition: border-color .15s;
}
.comment-item:hover { border-color: var(--green-200); }
.comment-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: 6px;
}
.comment-item__nick {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-700);
}
.comment-item__nick svg { color: var(--ink-500); flex-shrink: 0; }
.comment-item__date {
  font-size: 11.5px;
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.comment-item__content {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-800);
  margin: 0;
  word-break: break-word;
}

/* 트립 사진 그리드 보조 (마크업의 인라인 grid 위에 hover/focus 추가) */
.trip-photos a {
  transition: transform .14s, box-shadow .15s;
}
.trip-photos a:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.trip-photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   v3.0 Warm Sunset — 컴포넌트 sunset 무드 덧씌움
   ============================================================ */

/* btn--primary 를 sunset 그라디언트로 */
.btn--primary {
  background: linear-gradient(135deg, var(--peach-400) 0%, var(--peach-500) 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(229, 107, 71, 0.25);
  border-color: transparent;
}
.btn--primary:hover {
  background: linear-gradient(135deg, var(--peach-500) 0%, var(--peach-600) 100%);
  box-shadow: 0 8px 20px rgba(229, 107, 71, 0.35);
}

/* btn--coral (트립 CTA) — gold 그라디언트로 */
.btn--coral {
  background: linear-gradient(135deg, var(--coral-500) 0%, var(--coral-700) 100%);
  color: var(--ink-900);
  box-shadow: 0 4px 12px rgba(217, 162, 31, 0.30);
}
.btn--coral:hover {
  background: linear-gradient(135deg, var(--coral-700) 0%, #B7841A 100%);
  box-shadow: 0 8px 20px rgba(217, 162, 31, 0.45);
}

/* btn--whatsapp — 따뜻한 그린 유지하되 그라디언트 */
.btn--whatsapp {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.30);
}

/* 헤더 sticky 배경 — 따뜻한 글래스 */
.site-header {
  background: rgba(255, 248, 243, 0.85);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--sand-300);
}

/* 로고 — sunset 그라디언트 텍스트 + sun-dot (시안 R) */
.logo {
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-900); /* fallback */
}
.r-logo span:not(.r-logo__sun) {
  background: linear-gradient(135deg, var(--peach-500), var(--peach-700));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.r-logo__sun {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--coral-500), var(--peach-400));
  box-shadow: 0 0 12px rgba(255,140,92,.40);
  flex-shrink: 0;
}

/* 카드 — 더 큰 라운드 + 따뜻한 그림자 */
.card {
  border-radius: var(--r-lg);
  border-color: var(--sand-300);
  background: var(--ink-0);
  box-shadow: var(--shadow-1);
}
.card:hover {
  border-color: var(--peach-300);
  box-shadow: var(--shadow-3);
  transform: translateY(-2px);
}

/* 카드 placeholder 색을 sunset 톤으로 */
.card-placeholder--vehicle  { background: linear-gradient(160deg, #B5D3FF, #4D86E8); color: #fff; }
.card-placeholder--food     { background: linear-gradient(160deg, #FFB57E, #FF6B47); color: #fff; }
.card-placeholder--activity { background: linear-gradient(160deg, #FFCB7B, #E89A2E); color: #fff; }
.card-placeholder--wellness { background: linear-gradient(160deg, #FFAFC9, #E03978); color: #fff; }
.card-placeholder--stay     { background: linear-gradient(160deg, #C9B9FF, #7E6BE8); color: #fff; }
.card-placeholder--life     { background: linear-gradient(160deg, #FFE69E, #D9A21F); color: #fff; }
.card-placeholder--guide    { background: linear-gradient(160deg, #6EE7B7, #059669); color: #fff; }

/* Hero 트립 헤더 — sunset 그라디언트 */
.trip-header {
  background: linear-gradient(135deg, #FFD3A0 0%, #FF8C5C 50%, #E96A3A 100%);
  color: #fff;
  border-radius: var(--r-xl);
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  position: relative;
  overflow: hidden;
  margin: 24px 0;
  border: none;
}
.trip-header::after {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(255,255,255,.35) 0%, transparent 60%);
  border-radius: 50%;
  pointer-events: none;
}
.trip-header h1 { color: #fff !important; text-shadow: 0 1px 0 rgba(0,0,0,.05); position: relative; z-index: 1; }
.trip-header p { color: rgba(255,255,255,.92) !important; position: relative; z-index: 1; }

/* Hero section / search section — 일반 페이지 hero */
.hero-section {
  margin: 24px 0 !important;
  text-align: center;
}

/* Hero CTA 버튼 강조 — sunset 그림자 */
.hero-section .btn--primary,
.hero-section .btn-cta {
  box-shadow: 0 10px 28px rgba(229, 107, 71, 0.40) !important;
}

/* Curated 섹션 아이콘 — sunset 톤 */
.curated-icon--new  { background: linear-gradient(135deg, #FFD56B, #FFB845); color: #6B4500; }
.curated-icon--hot  { background: linear-gradient(135deg, #FFB57E, #FF6B47); color: #fff; }
.curated-icon--star { background: linear-gradient(135deg, #FFAFC9, #E03978); color: #fff; }

/* 필터 탭 active — sunset */
.filter-tab--all.active,
.filter-tab--region.active {
  background: var(--peach-500);
  border-color: var(--peach-500);
  color: #fff;
}
.filter-tab.active {
  background: var(--peach-50);
  border-color: var(--peach-400);
  color: var(--peach-700);
}

/* 검색 모달 트리거 / 헤더 검색 — sunset hover */
.search-section__open:hover,
.header-search:hover {
  background: var(--peach-50);
  border-color: var(--peach-300);
  color: var(--peach-700);
}
.search-section__count {
  background: var(--peach-500);
  color: #fff;
}

/* Hero 큰 헤딩 가독성 (한글 폰트 16px+) */
.hero-section h1 {
  font-size: 32px !important;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.18;
  color: var(--ink-900);
}
.hero-section p {
  font-size: 16px !important;
  line-height: 1.6;
  color: var(--ink-600) !important;
  max-width: 360px;
  margin: 0 auto 18px !important;
}

/* 모바일 미세 조정 */
@media (max-width: 480px) {
  body { line-height: 1.6; }
}

/* ============================================================
   v3.0 시안 R — 홈 페이지 전용 컴포넌트
   ============================================================ */

/* R Hero — 그라디언트 박스 카드 */
.r-hero {
  display: block;
  margin: 14px 0 22px;
  background: linear-gradient(135deg, #FFD3A0 0%, #FF8C5C 45%, #E96A3A 100%);
  color: #fff;
  border-radius: 32px;
  padding: 32px 24px 28px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: none;
  text-align: left;
}
.r-hero::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(255,255,255,.4) 0%, transparent 60%);
  border-radius: 50%;
}
.r-hero::after {
  content: '';
  position: absolute;
  bottom: -50px; left: 20%;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(255,184,69,.5) 0%, transparent 70%);
  border-radius: 50%;
}
.r-hero__badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 7px 14px;
  border-radius: 99px;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 18px;
  position: relative; z-index: 1;
  color: #fff;
}
.r-hero__title {
  font-size: 32px; font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
  color: #fff;
  position: relative; z-index: 1;
}
.r-hero__btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff;
  color: var(--peach-600);
  padding: 12px 22px;
  border-radius: 99px;
  font-size: 14.5px; font-weight: 700;
  position: relative; z-index: 1;
  box-shadow: 0 8px 20px rgba(229,107,71,.25);
  text-decoration: none;
}
@media (max-width: 480px) {
  .r-hero__title { font-size: 28px; }
}

/* R 카테고리 chip — 시안 R 정확 매핑 */
.r-cats {
  display: flex; gap: 8px;
  padding: 0 0 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  margin-bottom: 12px;
  touch-action: pan-x;
}
.r-cats::-webkit-scrollbar { display: none; }
.r-chip { -webkit-tap-highlight-color: transparent; cursor: pointer; }
.r-chip {
  flex-shrink: 0;
  padding: 10px 16px;
  background: var(--ink-0);
  border-radius: 99px;
  font-size: 14px; font-weight: 700;
  color: var(--ink-600);
  border: 1px solid var(--sand-300);
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.r-chip.on {
  background: var(--ink-800);
  border-color: var(--ink-800);
  color: #fff;
}

/* R 섹션 헤더 (🆕 🔥 ⭐ + "전체" pill) */
.r-sec-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 24px 0 16px;
}
.r-sec-title {
  font-size: 21px; font-weight: 800;
  letter-spacing: -0.02em;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink-900);
}
.r-sec-title__ico {
  font-size: 18px;
}
.r-sec-more {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13.5px; font-weight: 700;
  color: var(--peach-700) !important;
  background: var(--peach-50);
  padding: 6px 12px;
  border-radius: 99px;
  text-decoration: none;
}

/* 인기 섹션 시간대 chip — 오늘/이주/이달 sub-label.
 * impeccable polish (2026-05-22): 11/700 uppercase + tracking, ink-500.
 * restrained editorial — 색 추가 X, typography 만 micro caption 톤. */
.r-sec-period-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 8px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-500);
  background: var(--sand-100);
  border-radius: 99px;
  vertical-align: 4px;
  white-space: nowrap;
}

/* R 인기 — 다크 plum 1위 카드 */
.r-hot-feature {
  display: block;
  background: linear-gradient(135deg, var(--plum-500) 0%, var(--plum-700) 100%);
  color: #fff;
  border-radius: 28px;
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  margin-bottom: 14px;
}
.r-hot-feature::after {
  content: '🔥';
  position: absolute;
  bottom: -20px; right: -10px;
  font-size: 130px;
  opacity: .12;
}
.r-hot-feature__rank {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, var(--coral-500), var(--peach-400));
  padding: 5px 12px;
  border-radius: 99px;
  font-size: 11.5px; font-weight: 800;
  letter-spacing: .06em;
  color: var(--ink-900);
  margin-bottom: 18px;
  position: relative; z-index: 1;
}
.r-hot-feature__title {
  font-size: 26px; font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  color: #fff;
  position: relative; z-index: 1;
}
.r-hot-feature__cat {
  font-size: 13px;
  color: rgba(255,255,255,.65);
  margin-bottom: 18px;
  position: relative; z-index: 1;
}
.r-hot-feature__metric {
  display: flex; align-items: baseline; gap: 8px;
  position: relative; z-index: 1;
}
.r-hot-feature__num {
  font-size: 30px; font-weight: 800;
  color: var(--coral-500);
  letter-spacing: -0.025em;
}
.r-hot-feature__lbl {
  font-size: 12px;
  color: rgba(255,255,255,.65);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
}

/* R 인기 리스트 — 그림자 카드 */
.r-hot-list {
  display: flex; flex-direction: column; gap: 10px;
}
.r-hcard {
  background: var(--ink-0);
  border-radius: 18px;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: var(--shadow-2);
  text-decoration: none;
  color: inherit;
}
.r-hcard__rank {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--peach-50);
  color: var(--peach-700);
  display: flex; align-items: center; justify-content: center;
  font-size: 13.5px; font-weight: 800;
  flex-shrink: 0;
}
.r-hcard__thumb {
  width: 48px; height: 48px;
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.r-hcard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.r-hcard__thumb .cat-squircle { width: 100%; height: 100%; border-radius: 14px; }
.r-hcard__body { flex: 1; min-width: 0; }
.r-hcard__name {
  font-size: 15.5px; font-weight: 800;
  line-height: 1.3;
  margin-bottom: 2px;
  color: var(--ink-900);
}
.r-hcard__meta {
  font-size: 12.5px;
  color: var(--ink-500);
}
.r-hcard__views {
  text-align: right;
  flex-shrink: 0;
}
.r-hcard__views-num {
  font-size: 16px; font-weight: 800;
  color: var(--peach-600);
}
.r-hcard__views-lbl {
  font-size: 10px;
  color: var(--ink-400);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
}

/* R 별점 카드 — top(thumb + score) + name + meta */
.r-star-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.r-scard {
  background: var(--ink-0);
  border-radius: 22px;
  padding: 18px 16px;
  text-align: left;
  box-shadow: var(--shadow-2);
  text-decoration: none;
  color: inherit;
}
.r-scard__top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.r-scard__thumb {
  width: 48px; height: 48px;
  border-radius: 14px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.r-scard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.r-scard__thumb .cat-squircle { width: 100%; height: 100%; border-radius: 14px; }
.r-scard__score {
  font-size: 28px; font-weight: 800;
  color: var(--coral-500);
  letter-spacing: -0.025em;
  line-height: 1;
}
.r-scard__name {
  font-size: 14.5px; font-weight: 800;
  line-height: 1.3;
  margin-bottom: 3px;
  color: var(--ink-900);
}
.r-scard__meta {
  font-size: 12px;
  color: var(--ink-500);
}

/* R 일반 카드 placeholder (.cat-squircle) — 카테고리-색 reflex 해소
 * (각 카테고리마다 다른 drenched gradient = AI slop). 단일 sand tint 통일. */
.cat-squircle--vehicle,
.cat-squircle--food,
.cat-squircle--activity,
.cat-squircle--wellness,
.cat-squircle--stay,
.cat-squircle--life,
.cat-squircle--guide,
.cat-squircle--shopping {
  background: var(--sand-100) !important;
  color: var(--ink-600) !important;
  box-shadow: none !important;
  border: 1px solid var(--ink-200);
}

/* ============================================================
   Provider Card · v3.0 R Photo variant (홈 카드 — 이미지 + NEW + 메타)
   ============================================================ */
.card--photo {
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--ink-100);
  background: var(--ink-0);
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  display: flex;
  flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
}
.card--photo:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(229,107,71,.12);
}
.card--photo .card-thumb,
.card--photo .card-placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0;
  border-radius: 0;
  background: var(--sand-50);
}
.card--photo .card-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.card--photo .card-placeholder {
  display: flex; align-items: center; justify-content: center;
}
.card-badge {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 2;
  padding: 5px 11px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.card-badge--new {
  left: 10px; right: auto;
  background: linear-gradient(135deg, var(--peach-400) 0%, var(--peach-600) 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(229,107,71,.40);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.card-badge--is-trust {
  background: rgba(255,255,255,.92);
  color: var(--peach-700);
  box-shadow: 0 4px 12px rgba(0,0,0,.10);
}
.card-badge--is-verified {
  background: rgba(255,255,255,.85);
  color: var(--plum-700, #3D2840);
  box-shadow: 0 4px 12px rgba(0,0,0,.10);
}
.card--photo .card-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.card--photo .card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
}
.card--photo .card-name {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink-900);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 100%;
}
.card--photo .card-header {
  min-width: 0;
}
.card--photo .card-meta {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  line-height: 1;
  color: var(--ink-500);
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  min-width: 0;
}
.card--photo .card-meta > * {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.card--photo .card-meta svg {
  display: block;
  flex-shrink: 0;
}
.card--photo .card-region {
  color: var(--ink-500);
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.card--photo .card-rating {
  color: var(--peach-600);
  font-weight: 800;
  flex-shrink: 0;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0;
}
.card--photo .card-view-count {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--ink-400);
  flex-shrink: 0;
  margin-left: auto;
}
/* polish cycle 9: meta stat (view/comment 공통) + date — inline style 통일 source. */
.card--photo .card-meta__stat {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--ink-400);
  font-size: 11.5px;
  line-height: 1;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.card--photo .card-meta__date {
  color: var(--ink-300);
  font-size: 11.5px;
  line-height: 1;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  margin-left: auto;  /* 우측 정렬 → 카드 너비에 따라 ★/리뷰 와 자연 분리 */
}
/* 좁은 카드 (non-featured) — 메트릭 wrap 회피: view/comment hide, ★ + date 만 */
@media (max-width: 720px) {
  .card-grid .card--photo:not(.card--featured) .card-meta__stat {
    display: none;
  }
}
.card--photo .chip-cat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 20px;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
}
.card--photo .chip-cat svg {
  width: 12px;
  height: 12px;
  display: block;
  flex-shrink: 0;
  position: relative;
  top: -1.5px; /* 한글 폰트의 시각적 무게중심에 맞춰 미세 보정 */
}

@media (max-width: 480px) {
  .card--photo .card-body { padding: 10px 12px 12px; }
  .card--photo .card-name { font-size: 14px; }
  /* polish cycle 8: 좁은 모바일에서 4 요소 (rating + review + views + date) 가
     한 줄 cut off → wrap 활성 + row-gap. visual hierarchy 유지하면서 폭 안전. */
  .card--photo .card-meta {
    gap: 4px;
    row-gap: 4px;
    font-size: 11px;
    flex-wrap: wrap;
    overflow: visible;
    white-space: normal;
  }
  /* wrap 시 view-count 가 자기 자연 위치로 (margin-left:auto 무효화). */
  .card--photo .card-view-count { margin-left: 0; }
  .card--photo .chip-cat { padding: 2px 6px; font-size: 10.5px; }
}

/* ── 픽(pick) 목록 카드 — home.phtml 인라인 스타일과 동일 ── */
.popular-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.ppick-card {
  display: block;
  background: #fff;
  border: 1px solid var(--ink-100, #F0E8E2);
  border-radius: 12px;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  transition: transform .12s, box-shadow .12s;
}
.ppick-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(255,107,74,.12); }
.ppick-card__title {
  font-weight: 700; font-size: .98rem; color: var(--ink-900, #3D1810);
  margin: 0 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ppick-card__meta { font-size: .8rem; color: var(--ink-500, #777); display: flex; gap: 8px; flex-wrap: wrap; }
.ppick-card__rank {
  display: inline-block; background: linear-gradient(135deg, #FFB370, #FF6B4A);
  color: #fff; font-weight: 800; width: 22px; height: 22px; border-radius: 50%;
  text-align: center; line-height: 22px; font-size: .75rem; margin-right: 6px;
}

/* ── v5.4 : pick-thumb (픽목록 카드 hero) ───────────────────────────── */
.pick-thumb {
  width: 100%; aspect-ratio: 16 / 10;
  position: relative; overflow: hidden;
  background-size: cover; background-position: center;
}
.pick-thumb--photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.45) 100%);
  pointer-events: none;
}
.pick-thumb__icons {
  position: absolute; left: 10px; bottom: 10px;
  display: flex; align-items: center; z-index: 2;
}
.pick-thumb__icon-circle {
  width: 32px; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.28);
  border: 1px solid rgba(255,255,255,.35);
  flex-shrink: 0;
}
.pick-thumb__icon-circle svg { width: 18px; height: 18px; display: block; }
.pick-thumb__icon-circle + .pick-thumb__icon-circle { margin-left: -8px; }
.pick-thumb__icon-circle--vehicle  { background: linear-gradient(135deg,#60A5FA,#2563EB); }
.pick-thumb__icon-circle--food     { background: linear-gradient(135deg,#FB923C,#EA580C); }
.pick-thumb__icon-circle--activity { background: linear-gradient(135deg,#4ADE80,#16A34A); }
.pick-thumb__icon-circle--wellness { background: linear-gradient(135deg,#F472B6,#DB2777); }
.pick-thumb__icon-circle--stay     { background: linear-gradient(135deg,#C084FC,#9333EA); }
.pick-thumb__icon-circle--life     { background: linear-gradient(135deg,#FBBF24,#D97706); }
.pick-thumb__icon-circle--guide    { background: linear-gradient(135deg,#6EE7B7,#059669); }
.pick-thumb__icon-circle--default  { background: linear-gradient(135deg,#94A3B8,#475569); }
.pick-thumb__count {
  position: absolute; top: 10px; right: 10px;
  display: inline-flex; align-items: baseline; gap: 4px;
  background: rgba(255,255,255,.95); backdrop-filter: blur(6px);
  color: var(--ink-900); padding: 4px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 800; letter-spacing: -0.01em;
  box-shadow: 0 2px 6px rgba(0,0,0,.12); z-index: 2;
}
.pick-thumb__count small { font-size: 10px; font-weight: 700; opacity: .55; letter-spacing: 0.04em; }
.pick-thumb--teal   { background: linear-gradient(135deg, oklch(0.93 0.05 185), oklch(0.85 0.07 185)); }
.pick-thumb--green  { background: linear-gradient(135deg, var(--green-100, #D1FAE5), oklch(0.85 0.10 145)); }
.pick-thumb--coral  { background: linear-gradient(135deg, var(--coral-50, #FFF1EE), oklch(0.85 0.10 30)); }
.pick-thumb--amber  { background: linear-gradient(135deg, oklch(0.95 0.06 75), oklch(0.86 0.12 75)); }
.pick-thumb--blue   { background: linear-gradient(135deg, oklch(0.94 0.04 220), oklch(0.85 0.08 220)); }
.pick-thumb--purple { background: linear-gradient(135deg, oklch(0.94 0.04 300), oklch(0.85 0.08 300)); }
.card-pick-desc {
  font-size: 12px; color: var(--ink-500); line-height: 1.45;
  margin: 0 12px 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-rating { color: var(--green-600, #16A34A); font-weight: 700; font-size: .75rem; }
.results-count { font-size: .85rem; color: var(--ink-400); margin: 0 0 12px; }

/* ============================================================
   og_bg picker — 픽 등록/수정 메인 배경 8장 선택 그리드
   Design Ref: pick-hero-image §5.2
   ============================================================ */
.og-bg-picker { margin: var(--sp-5, 20px) 0; padding: 0; border: 0; }
.og-bg-picker > legend {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-700, #3D1810);
  margin-bottom: var(--sp-2, 8px);
}
.og-bg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2, 8px);
}
@media (min-width: 600px) {
  .og-bg-grid { grid-template-columns: repeat(5, 1fr); }
}
.og-bg-item {
  position: relative;
  display: block;
  aspect-ratio: 1.91 / 1;
  border-radius: var(--r-md, 10px);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .15s ease, transform .15s ease;
  background: var(--sand-50, #FFF8F3);
}
.og-bg-item:hover { transform: scale(1.03); }
.og-bg-item.is-selected {
  border-color: var(--peach-500, #FF8C5C);
  box-shadow: 0 0 0 3px rgba(255, 140, 92, .18);
}
.og-bg-item input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}
.og-bg-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.og-bg-item--none {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-50, #F9F4EE);
  border: 2px dashed var(--ink-200, #E5D7C7);
}
.og-bg-item--none.is-selected {
  background: var(--sand-50, #FFF8F3);
  border-style: solid;
}
.og-bg-item__none-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-500, #876A5D);
}

/* ppick-card 가 og_bg 배경 사진을 가진 경우.
   배경이 밝은(잎사귀/모래) 이미지일 때도 텍스트 가독성 보장:
   - 상하 그라데이션을 위/아래 모두 어둡게 강화 (상단 .35 → 하단 .55)
   - 카드 상단에 위치한 title 도 명시적으로 흰색 + text-shadow */
.ppick-card--photo {
  background-size: cover;
  background-position: center;
  position: relative;
  color: #fff;
}
.ppick-card--photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.15) 40%, rgba(0,0,0,.55) 100%);
  border-radius: inherit;
  pointer-events: none;
}
.ppick-card--photo > * { position: relative; z-index: 1; }
.ppick-card--photo .ppick-card__title {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
}
.ppick-card--photo .ppick-card__meta {
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
}
.ppick-card--photo .ppick-card__rank {
  background: rgba(255,255,255,.92);
  color: var(--ink-900, #1A0F0A);
  text-shadow: none;
}

/* ── 발리 밋업 — 홈 가로 스크롤 섹션 (meetups.design §7) ─────────── */
/* sub chip — ink 톤 (peach 제거) → sunset accent ≤10% 준수,
   우측 r-sec-more peach chip 과 시각 차별 (인접 chip 노이즈 해소). */
.r-sec-title__sub {
  margin-left: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-600);
  padding: 2px 8px;
  background: var(--ink-100);
  border-radius: 99px;
  letter-spacing: -0.005em;
}
.meetup-section { margin-top: 24px; }
.meetup-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 0 12px;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
}
.meetup-strip::-webkit-scrollbar { display: none; }
.mu-strip-card {
  flex: 0 0 220px;
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  padding: 14px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--sand-200, #F0E8E2);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  text-decoration: none;
  color: inherit;
  transition: transform .12s, box-shadow .12s;
}
.mu-strip-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(255,107,74,.14); }
.mu-strip-card__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.mu-strip-card__urgent {
  font-size: 11px; font-weight: 700;
  padding: 3px 8px;
  background: #FEF3C7; color: #92400E;
  border-radius: 99px;
}
.mu-strip-card__title {
  font-size: 14px; font-weight: 700;
  color: var(--ink-900, #1A0F0A);
  line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
  min-height: 38px;
  margin-bottom: 8px;
}
.mu-strip-card__meta {
  font-size: 12px;
  color: var(--ink-500, #876A5D);
  margin-top: auto;
}
.mu-strip-card--new {
  align-items: center; justify-content: center;
  background: linear-gradient(135deg, #FFF7F0, #FFE6D7);
  border: 1.5px dashed #FF8C5C;
}
.mu-strip-card__new-icon {
  font-size: 32px; font-weight: 300;
  color: #FF6B4A;
  line-height: 1;
  margin-bottom: 8px;
}
.mu-strip-card__new-text {
  font-size: 13px; font-weight: 700;
  color: #FF6B4A;
}

/* 카테고리 squircle — home.phtml 인라인 사용을 위해 본 위치에도 정의 */
.mu-cat {
  border-radius: 9px; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.28);
  border: 1px solid rgba(255,255,255,.35);
}
/* 카테고리 squircle — drenched gradient 제거 (카테고리-색 reflex 안티패턴).
 * 단일 sand tint + ink-700 icon 으로 통일 (restrained editorial). */
.mu-cat--food,
.mu-cat--drink,
.mu-cat--activity,
.mu-cat--beach,
.mu-cat--buddy {
  background: var(--sand-100);
  color: var(--ink-700);
  box-shadow: none;
  border: 1px solid var(--ink-200);
}

/* ── 나눠요/구해요 홈 — editorial feed (Design Ref: share.design §7) ──
 * 인접 meetup-strip 이 가로 갤러리 패턴이라 share 는 의도적으로 lead+list 패턴.
 * PRODUCT.md restrained editorial: sunset accent ≤10%, ink + sand 기반.
 */

.share-feed-section { /* curated-section 베이스 활용 */ }

/* Lead — asymmetric photo + body card */
.share-feed__lead {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 0;
  margin-bottom: var(--sp-3);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--ink-0);
  border: 1px solid var(--ink-200);
  text-decoration: none; color: inherit;
  transition: transform .15s cubic-bezier(0.16, 1, 0.3, 1),
              border-color .15s, box-shadow .15s;
}
.share-feed__lead:hover {
  transform: translateY(-1px);
  border-color: var(--peach-300);
  box-shadow: var(--shadow-2);
}
.share-feed__lead-thumb {
  min-height: 120px;
  background: var(--ink-100) center/cover no-repeat;
}
.share-feed__lead-thumb--empty {
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at top left, var(--sand-100) 0%, var(--sand-50) 70%);
}
.share-feed__lead-thumb--empty span {
  font-family: var(--font-sans);
  font-size: 16px; font-weight: 800;
  color: var(--ink-300);
  letter-spacing: 0.10em;
}
.share-feed__lead-body {
  display: flex; flex-direction: column;
  gap: 6px;
  padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-3);
  min-width: 0; /* allow ellipsis */
}
.share-feed__lead-title {
  font-size: 15px; font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.020em; line-height: 1.35;
  margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: keep-all;
}
.share-feed__lead-meta {
  font-size: 11.5px;
  color: var(--ink-500);
  letter-spacing: -0.008em;
  font-family: var(--font-mono);
  margin-top: auto; /* push to bottom of body */
}

/* Kind chip — leading-dot, restrained tint variants */
.share-feed__kind {
  display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  align-self: flex-start;
  white-space: nowrap;
}
.share-feed__kind--give { background: var(--peach-50); color: var(--peach-700); }
.share-feed__kind--want { background: var(--sand-100); color: var(--ink-700); }

/* List rows — hairline divider, no card boxes (editorial table) */
.share-feed__list {
  list-style: none;
  margin: 0; padding: 0;
  border-top: 1px solid var(--ink-200);
}
.share-feed__row { border-bottom: 1px solid var(--ink-200); }
.share-feed__row > a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: 11px 4px;
  text-decoration: none;
  color: inherit;
  transition: background .15s;
}
.share-feed__row > a:hover { background: var(--sand-50); }
.share-feed__row-title {
  font-size: 13.5px; font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -0.014em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.share-feed__row-meta {
  font-size: 10.5px;
  color: var(--ink-500);
  letter-spacing: -0.008em;
  font-family: var(--font-mono);
  white-space: nowrap;
}

/* CTA dashed (.share-feed__cta-row / .share-feed__cta) 제거 — 2026-05-22
   impeccable polish. 진입점 중복 (헤더 r-sec-more + 하단 nav 나눠요) + dashed
   border 의 어색함. empty state CTA (.share-feed__empty-cta) 는 유지. */

/* ── Empty state — 데이터 없을 때 lead pattern 모방 + invitation ──── */
/* polish.md: empty states that teach the interface, not "nothing here" */
.share-feed__empty {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 0;
  border-radius: var(--r-md);
  border: 1.5px dashed var(--ink-300);
  background:
    repeating-linear-gradient(
      135deg,
      var(--sand-50)  0px, var(--sand-50)  18px,
      var(--sand-100) 18px, var(--sand-100) 19px
    );
  overflow: hidden;
}
.share-feed__empty-mark {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  padding: var(--sp-4) var(--sp-3);
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: 0.10em;
}
.share-feed__empty-mark--give {
  font-size: 17px;
  color: var(--peach-300);
}
.share-feed__empty-mark--want {
  font-size: 17px;
  color: var(--ink-300);
}
.share-feed__empty-body {
  display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-3);
}
.share-feed__empty-title {
  font-size: 14px; font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.018em;
  margin: 0;
  word-break: keep-all;
}
.share-feed__empty-sub {
  font-size: 11.5px; line-height: 1.55;
  color: var(--ink-500);
  letter-spacing: -0.008em;
  margin: 0;
  word-break: keep-all;
}
.share-feed__empty-cta {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: var(--sp-2);
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--ink-900);
  color: var(--ink-0);
  font-size: 12px; font-weight: 700;
  letter-spacing: -0.010em;
  text-decoration: none;
  transition: background .15s, transform .12s cubic-bezier(0.16, 1, 0.3, 1);
}
.share-feed__empty-cta:hover { background: var(--ink-800); }
.share-feed__empty-cta:active { transform: scale(0.97); }
.share-feed__empty-cta:focus-visible {
  outline: 2px solid var(--coral-500);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .share-feed__lead, .share-feed__row > a,
  .share-feed__empty-cta { transition: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   bp-empty__art SVG 색 정렬 (polish cycle 6) — emoji 제거 후 SVG line art
   에 sunset 톤. 기존 emoji 는 color inherit 안 받으므로 영향 0. */
.bp-empty__art svg {
  display: block;
  margin: 0 auto;
  color: oklch(0.560 0.165 35);     /* bp-sunset-deep */
  opacity: 0.85;
}

/* ════════════════════════════════════════════════════════════════════
   PHOTO UPLOADER (polish cycle 5b — share UI/UX 기준 통일)
   ────────────────────────────────────────────────────────────────────
   share-frontend `.sh-photo-*` 패턴 카피 → site vanilla 폼 namespace.
   사용처: single_photo_uploader.phtml, pick/new.phtml, submit/batch.phtml
   ════════════════════════════════════════════════════════════════════ */

.bp-photo-uploader {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
}
.bp-photo-slot {
  position: relative;
  width: 72px; height: 72px;
  border-radius: 10px;
  overflow: hidden;
  background: oklch(0.94 0.014 55);            /* bp-ink-100 등가 */
  flex-shrink: 0;
}
.bp-photo-slot.is-uploading .bp-photo-thumb { opacity: 0.7; }
.bp-photo-slot.is-error     .bp-photo-thumb { opacity: 0.5; }
.bp-photo-thumb {
  display: block;
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 10px;
  border: 1px solid oklch(0.910 0.012 50);     /* bp-line */
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.bp-photo-progress {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(26, 20, 22, 0.18);
  pointer-events: none;
}
.bp-photo-progress__bar {
  position: absolute; left: 0; bottom: 0;
  height: 3px;
  background: oklch(0.695 0.176 38);           /* bp-sunset */
  transition: width 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.bp-photo-progress__pct {
  font-size: 11px; font-weight: 700;
  color: #fff;
  font-family: ui-monospace, "SF Mono", monospace;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.bp-photo-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(157, 61, 31, 0.55);         /* peach-deep */
  color: #fff;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.02em;
  pointer-events: none;
}
.bp-photo-remove {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 0;
  background: rgba(26, 20, 22, 0.7);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  transition: background 0.15s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.12s cubic-bezier(0.16, 1, 0.3, 1);
}
.bp-photo-remove:hover  { background: rgba(26, 20, 22, 0.9); }
.bp-photo-remove:active { transform: scale(0.9); }
.bp-photo-remove:focus-visible {
  outline: 2px solid oklch(0.560 0.165 35);
  outline-offset: 2px;
}
.bp-photo-remove svg { width: 12px; height: 12px; display: block; }
.bp-photo-add {
  width: 72px; height: 72px;
  border-radius: 10px;
  border: 1.5px dashed oklch(0.660 0.020 40);  /* bp-ink-300 */
  background: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: oklch(0.470 0.025 35);                /* bp-ink-500 */
  padding: 0;
  transition: border-color 0.15s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.15s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: inherit;
}
.bp-photo-add:hover {
  border-color: oklch(0.695 0.176 38);
  color: oklch(0.560 0.165 35);
  background: oklch(0.695 0.176 38 / 0.08);
}
.bp-photo-add:focus-visible {
  outline: 2px solid oklch(0.560 0.165 35);
  outline-offset: 2px;
}
.bp-photo-add svg { width: 22px; height: 22px; }

@media (prefers-reduced-motion: reduce) {
  .bp-photo-thumb,
  .bp-photo-progress__bar,
  .bp-photo-remove,
  .bp-photo-add { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════
   SITE BOTTOM NAVIGATION (polish cycle 4)
   ────────────────────────────────────────────────────────────────────
   모바일(≤768) bottom navigation. desktop hide.
   header cut off 회피 — nav 4개를 header → bottom 으로 이전.
   sticky CTA 페이지 (spot/pick/basket) 는 CTA 가 nav 위 stacking.
   ════════════════════════════════════════════════════════════════════ */

.site-bottom-nav {
  display: none;            /* desktop hide */
}

@media (max-width: 768px) {
  /* Floating dock — iOS 홈 인디케이터(swipe-up bar) 와 시각·물리적 분리.
   * 화면 가장자리에서 양옆 8px / 하단 max(safe-area, 8px) 떨어진 떠있는 패널.
   * 카카오 인앱·Whale 등 viewport-fit 미지원 환경에서도 max() 폴백으로 보호. */
  .site-bottom-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: fixed;
    left: 8px; right: 8px;
    bottom: max(env(safe-area-inset-bottom, 0px), 8px);
    z-index: 50;
    /* DESIGN.md absolute ban: 'Glassmorphism as default'.
       backdrop-filter blur 제거 → opaque sand bg + 강화된 shadow 로 floating 표현. */
    background: oklch(0.985 0.012 60);
    border: 1px solid oklch(0.910 0.012 50);
    border-radius: 20px;
    box-shadow:
      0 8px 28px rgba(229, 107, 71, 0.10),
      0 2px 10px rgba(26, 20, 22, 0.06);
    overflow: hidden;
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
  }
  .site-bottom-nav__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 9px 6px 9px;
    min-height: 56px;
    color: oklch(0.470 0.025 35);                  /* bp-ink-500 — restrained inactive */
    text-decoration: none;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: -0.014em;
    line-height: 1.2;
    word-break: keep-all;                          /* 한국어 단어 분리 회피 */
    -webkit-tap-highlight-color: transparent;
    transition: color 200ms cubic-bezier(0.165, 0.84, 0.44, 1),
                transform 200ms cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  /* Floating dock 의 경우 indicator 가 dock 상단 모서리에 붙음 (radius 안쪽).
   * 충분한 여유 — top: 1px (border 두께 보정) */
  .site-bottom-nav__item.is-active::before {
    /* dock 내부 강조 — indicator dot 대신 subtle bg tint */
    content: '';
    position: absolute;
    inset: 6px 8px;
    border-radius: 14px;
    background: oklch(0.985 0.060 50 / 0.55);  /* peach-50 wash */
    z-index: -1;
    pointer-events: none;
  }
  .site-bottom-nav__indicator {
    position: absolute;
    top: 1px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    width: 24px;
    height: 2px;
    background: oklch(0.560 0.165 35);             /* bp-sunset-deep — editorial accent */
    border-radius: 0 0 2px 2px;
    transition: transform 220ms cubic-bezier(0.165, 0.84, 0.44, 1);
    pointer-events: none;
  }
  .site-bottom-nav__icon {
    stroke-width: 1.4;
    transition: stroke-width 180ms cubic-bezier(0.165, 0.84, 0.44, 1),
                transform 220ms cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  .site-bottom-nav__label {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
  }

  /* hover (desktop hover-pen) — restrained ink shift */
  @media (hover: hover) {
    .site-bottom-nav__item:hover:not(.is-active) {
      color: oklch(0.290 0.020 30);                /* bp-ink-700 */
    }
  }

  /* active tap feedback */
  .site-bottom-nav__item:active:not(.is-active) {
    transform: scale(0.96);
  }

  /* keyboard focus */
  .site-bottom-nav__item:focus-visible {
    outline: 2px solid oklch(0.560 0.165 35);
    outline-offset: -4px;
    border-radius: 6px;
  }

  /* active state — color + icon stroke + indicator bar reveal */
  .site-bottom-nav__item.is-active {
    color: oklch(0.560 0.165 35);                  /* bp-sunset-deep */
    font-weight: 700;
  }
  .site-bottom-nav__item.is-active .site-bottom-nav__icon {
    stroke-width: 1.7;
  }
  .site-bottom-nav__item.is-active .site-bottom-nav__indicator {
    transform: translateX(-50%) scaleX(1);
  }

  @media (prefers-reduced-motion: reduce) {
    .site-bottom-nav__item,
    .site-bottom-nav__icon,
    .site-bottom-nav__indicator { transition: none; }
    .site-bottom-nav__item:active:not(.is-active) { transform: none; }
  }
}

/* body padding-bottom 보상 — floating dock 이 본문 가림 회피 (모바일).
 * dock 높이 56 + 하단 떠있는 여유 8 + 시각적 breathing 8 + safe-area. */
@media (max-width: 768px) {
  body {
    padding-bottom: calc(56px + 16px + max(env(safe-area-inset-bottom, 0px), 8px));
  }
  /* sticky CTA 페이지는 body:has() 로 추가 reserve */
  body:has(.provider-actions--floating),
  body:has(.bp-page-sticky) {
    padding-bottom: calc(56px + 16px + 72px + max(env(safe-area-inset-bottom, 0px), 8px));
  }
  /* sticky CTA bottom offset 을 floating dock 위로 push (모바일 한정).
   * dock top = max(safe-area, 8px) + 56(dock height) + 8(gap) */
  .provider-actions--floating { bottom: calc(56px + 16px + max(env(safe-area-inset-bottom, 0px), 8px)) !important; }
  .bp-page-sticky              { bottom: calc(56px + 16px + max(env(safe-area-inset-bottom, 0px), 8px)) !important; }
}

/* desktop ≥ 769: bottom nav 자체 hide, 헤더 nav 사용 */

/* 모바일(≤768) header nav hide — bottom 으로 이전 (중복 회피) */
@media (max-width: 768px) {
  .site-header .header-nav { display: none; }
}