/* ════════════════════════════════════════════════════════════════
   BaliPick Design System v1 — Impeccable
   기존 style.css 와 공존. .bp-* prefix 만 사용.
   페이지별 점진 마이그레이션. mockup 토큰 그대로.
   ════════════════════════════════════════════════════════════════ */
:root {
  --bp-bg:        oklch(0.965 0.010 70);
  --bp-surface:   oklch(0.985 0.006 60);
  --bp-ink-0:     oklch(0.973 0.008 60);
  --bp-ink-100:   oklch(0.910 0.012 50);
  --bp-ink-300:   oklch(0.660 0.020 40);
  --bp-ink-500:   oklch(0.470 0.025 35);
  --bp-ink-700:   oklch(0.290 0.020 30);
  --bp-ink-900:   oklch(0.130 0.012 30);
  --bp-ink-950:   oklch(0.090 0.010 28);
  --bp-line:      oklch(0.910 0.012 50);
  --bp-sunset:        oklch(0.695 0.176 38);
  --bp-sunset-deep:   oklch(0.560 0.165 35);
  --bp-sunset-soft:   oklch(0.695 0.176 38 / 0.10);
  --bp-c-food:     oklch(0.65 0.16 50);
  --bp-c-drink:    oklch(0.58 0.16 290);
  --bp-c-activity: oklch(0.60 0.16 145);
  --bp-c-beach:    oklch(0.62 0.14 215);
  --bp-c-company:  oklch(0.62 0.16 350);
  --bp-c-shopping: oklch(0.62 0.15 320);   /* 쇼핑 — purple-magenta tone (retail / boutique) */
  --bp-c-guide:    oklch(0.60 0.14 165);   /* 가이드 — mint-green (compass / wayfinder) */
  --bp-ok:    oklch(0.70 0.14 145);
  --bp-warn:  oklch(0.72 0.13 75);
  --bp-err:   oklch(0.62 0.18 25);
  --bp-s-1: 4px; --bp-s-2: 8px; --bp-s-3: 12px; --bp-s-4: 16px;
  --bp-s-5: 24px; --bp-s-6: 32px; --bp-s-7: 48px; --bp-s-8: 64px;
  --bp-ease-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --bp-ease-expo:  cubic-bezier(0.190, 1.000, 0.220, 1);
}

/* ─── Typography utility (필요 페이지만 적용) ─── */
.bp-pretendard {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss03", "cv01";
}

/* ─── Page head ─── */
.bp-page-head {
  position: sticky; top: 0; z-index: 10;
  padding: 16px 0 12px;
  background: linear-gradient(180deg, var(--bp-bg) 78%, transparent 100%);
}
.bp-page-head__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 4px;
}
.bp-page-head__h1 {
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.026em;
  color: var(--bp-ink-900);
  margin: 0;
}
.bp-page-head__action {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 14px; border-radius: 99px;
  background: var(--bp-ink-900); color: var(--bp-bg);
  font-size: 12.5px; font-weight: 700;
  text-decoration: none; letter-spacing: -0.005em;
  transition: transform 120ms var(--bp-ease-quart);
}
.bp-page-head__action:hover { color: var(--bp-bg); }
.bp-page-head__action:active { transform: scale(0.97); }
.bp-page-head__sub {
  font-size: 11.5px; font-weight: 600;
  color: var(--bp-ink-500);
  letter-spacing: 0.04em;
}
.bp-page-head__sub b { color: var(--bp-ink-700); font-weight: 700; }

/* ─── Filter chip ─── */
.bp-filter {
  display: flex; gap: 6px; padding: 0 0 12px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.bp-filter::-webkit-scrollbar { display: none; }
.bp-chip {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px; border-radius: 99px;
  font-size: 12px; font-weight: 600;
  letter-spacing: -0.005em;
  background: transparent; color: var(--bp-ink-500);
  border: 1px solid var(--bp-line);
  cursor: pointer; text-decoration: none;
  transition: background 180ms var(--bp-ease-quart), color 180ms, border-color 180ms;
}
.bp-chip:hover { color: var(--bp-ink-700); }
.bp-chip.is-active {
  background: var(--bp-ink-900); color: var(--bp-bg); border-color: var(--bp-ink-900);
}
.bp-chip--filter { margin-left: auto; }

/* ─── Featured 카드 ─── */
.bp-featured {
  display: block; text-decoration: none; color: inherit;
  border-radius: 18px; overflow: hidden;
  background: var(--bp-surface); border: 1px solid var(--bp-line);
  margin: 0 0 24px;
  transition: transform 140ms var(--bp-ease-quart), box-shadow 220ms;
}
.bp-featured:hover  { box-shadow: 0 14px 30px -16px oklch(0.13 0.012 30 / 0.20); color: inherit; }
.bp-featured:active { transform: scale(0.994); }
.bp-featured__hero {
  aspect-ratio: 16/10;
  background-color: var(--bp-ink-950);
  background-size: cover; background-position: center;
  display: flex; align-items: flex-end; padding: 14px;
  position: relative;
}
/* fallback bg (no photo) — 단순 sand tint (drenched colored gradient 회피).
   카테고리-색 reflex 안티패턴 해소. 사진 있으면 inline style 이 override. */
.bp-featured__hero--food,
.bp-featured__hero--drink,
.bp-featured__hero--activity,
.bp-featured__hero--beach,
.bp-featured__hero--company,
.bp-featured__hero--wellness,
.bp-featured__hero--stay,
.bp-featured__hero--life,
.bp-featured__hero--vehicle,
.bp-featured__hero--guide,
.bp-featured__hero--shopping {
  background-image:
    linear-gradient(180deg, oklch(0.965 0.014 60) 0%, oklch(0.94 0.020 55) 100%);
}
/* rating badge — glassmorphism backdrop-filter 제거 (DESIGN.md absolute ban).
   solid sand tint + 1px border 로 editorial 톤. */
.bp-featured__rating {
  background: var(--bp-bg);
  border: 1px solid var(--bp-line-strong);
  padding: 4px 10px; border-radius: 99px;
  font-size: 11px; font-weight: 700;
  color: var(--bp-ink-900);
  letter-spacing: -0.005em;
}
.bp-featured__body { padding: 14px 16px 16px; }
.bp-featured__title { font-size: 18px; font-weight: 700; line-height: 1.25; letter-spacing: -0.020em; margin: 6px 0 4px; color: var(--bp-ink-900); }
.bp-featured__meta  { font-size: 12.5px; color: var(--bp-ink-500); letter-spacing: -0.008em; }
.bp-featured__meta b { color: var(--bp-ink-900); font-weight: 600; }

/* ─── Category leading dot ─── */
.bp-cat {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bp-ink-700);
}
.bp-cat::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--bp-ink-300);
}
.bp-cat--food::before     { background: var(--bp-c-food); }
.bp-cat--drink::before    { background: var(--bp-c-drink); }
.bp-cat--activity::before { background: var(--bp-c-activity); }
.bp-cat--beach::before    { background: var(--bp-c-beach); }
.bp-cat--company::before  { background: var(--bp-c-company); }

/* ─── Section divider ─── */
.bp-section-h {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 12px 0 6px;
}
.bp-section-h__title {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bp-ink-500);
}
.bp-section-h__count {
  font-size: 12px;
  color: var(--bp-ink-300);
  font-variant-numeric: tabular-nums;
}

/* ─── Row (list item) ─── */
.bp-rows { display: flex; flex-direction: column; }
.bp-row {
  display: grid; grid-template-columns: 48px 1fr auto;
  gap: 12px; padding: 12px 0;
  border-top: 1px solid var(--bp-line);
  text-decoration: none; color: inherit; align-items: center;
  transition: background-color 160ms var(--bp-ease-quart);
}
.bp-row:first-child { border-top: none; }
.bp-row:hover { background: oklch(0.97 0.012 60); color: inherit; }
.bp-row__thumb {
  width: 48px; height: 48px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
  background-size: cover; background-position: center;
  color: var(--bp-bg);
}
.bp-row__thumb--food     { background-image: linear-gradient(135deg, oklch(0.85 0.13 60),  oklch(0.72 0.16 40)); }
.bp-row__thumb--drink    { background-image: linear-gradient(135deg, oklch(0.82 0.13 295), oklch(0.65 0.16 290)); }
.bp-row__thumb--activity { background-image: linear-gradient(135deg, oklch(0.85 0.13 145), oklch(0.70 0.16 150)); }
.bp-row__thumb--beach    { background-image: linear-gradient(135deg, oklch(0.85 0.11 215), oklch(0.68 0.14 220)); }
.bp-row__thumb--company  { background-image: linear-gradient(135deg, oklch(0.85 0.13 350), oklch(0.70 0.16 345)); }
.bp-row__body { min-width: 0; }
.bp-row__title {
  font-size: 15px; font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--bp-ink-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-bottom: 2px;
}
.bp-row__meta {
  font-size: 12px; color: var(--bp-ink-500);
  letter-spacing: -0.005em;
}
.bp-row__meta .sep { color: var(--bp-ink-300); margin: 0 4px; }
.bp-row__right {
  text-align: right; flex-shrink: 0;
  font-size: 11px; font-weight: 700;
  color: var(--bp-ink-500);
  font-variant-numeric: tabular-nums;
}
.bp-row__right--urgent { color: var(--bp-sunset); }

/* ─── Empty state v3.1 — typography-driven + ink-900 CTA ─── */
.bp-empty {
  text-align: center;
  padding: 64px 24px;
  color: var(--bp-ink-500);
  max-width: 380px;
  margin: 0 auto;
}
.bp-empty__art {
  font-size: 64px;
  opacity: 0.92;
  margin-bottom: 8px;
  line-height: 1;
  display: inline-block;
  position: relative;
}
/* art 아래 작은 sunset accent line (단순 brand mark) */
.bp-empty__art::after {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background: var(--bp-sunset-deep);
  border-radius: 2px;
  margin: 14px auto 0;
  opacity: 0.55;
}
.bp-empty__h {
  font-size: 22px;
  font-weight: 800;
  color: var(--bp-ink-900);
  letter-spacing: -0.026em;
  line-height: 1.30;
  margin: 18px 0 10px;
  word-break: keep-all;
}
.bp-empty__sub {
  font-size: 13.5px;
  line-height: 1.6;
  letter-spacing: -0.008em;
  color: var(--bp-ink-500);
  margin: 0 auto 22px;
  max-width: 30ch;
  word-break: keep-all;
}
.bp-empty__cta {
  display: inline-flex;
  align-items: center;
  padding: 13px 22px;
  border-radius: 12px;
  background: var(--bp-ink-900);
  color: var(--bp-ink-0);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: -0.010em;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.bp-empty__cta:hover { color: var(--bp-ink-0); }
.bp-empty__cta:active { transform: scale(0.97); }
.bp-empty__hint {
  margin-top: 22px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--bp-ink-300);
  letter-spacing: -0.005em;
  word-break: keep-all;
  max-width: 28ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
}

@media (max-width: 380px) {
  .bp-empty { padding: 48px 18px; }
  .bp-empty__art { font-size: 56px; }
  .bp-empty__h { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .bp-empty__cta { transition: none !important; }
  .bp-empty__cta:active { transform: none !important; }
}

/* ─── Sticky CTA bar (detail 페이지) ─── */
.bp-sticky-cta {
  position: sticky; bottom: 0; z-index: 20;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: oklch(0.97 0.01 60 / 0.92); backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--bp-line);
  display: grid; grid-template-columns: 2.4fr 1fr; gap: 8px;
}
.bp-sticky-cta__primary {
  background: var(--bp-sunset); color: var(--bp-ink-950);
  padding: 13px; border-radius: 12px; border: none;
  font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
  font-family: inherit; cursor: pointer;
  text-decoration: none;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.bp-sticky-cta__ghost {
  background: transparent; color: var(--bp-ink-900);
  border: 1px solid var(--bp-line);
  padding: 13px; border-radius: 12px;
  font-size: 14px; font-weight: 700;
  font-family: inherit; cursor: pointer;
  text-decoration: none;
  display: flex; align-items: center; justify-content: center;
}

/* ─── KV (key-value 정렬) ─── */
.bp-kv-list { display: flex; flex-direction: column; gap: 8px; }
.bp-kv {
  display: flex; gap: 12px; align-items: baseline; font-size: 13px;
}
.bp-kv__k { color: var(--bp-ink-500); width: 60px; flex-shrink: 0; font-weight: 500; letter-spacing: -0.005em; }
.bp-kv__v { color: var(--bp-ink-900); font-weight: 600; letter-spacing: -0.005em; }

/* ─── Quotation (reviews 등) ─── */
.bp-quote {
  padding: 14px 0; border-top: 1px solid var(--bp-line);
  font-size: 13.5px; line-height: 1.6; color: var(--bp-ink-700);
  letter-spacing: -0.008em;
}
.bp-quote:first-of-type { border-top: none; }
.bp-quote::before {
  content: '"'; font-size: 22px; color: var(--bp-sunset);
  line-height: 0; vertical-align: -4px; margin-right: 2px; font-weight: 700;
}
.bp-quote__attr {
  display: block; margin-top: 8px;
  font-size: 11.5px; color: var(--bp-ink-500); font-weight: 600;
  letter-spacing: -0.005em;
}

/* ─── Stagger entrance (page 진입 시) ─── */
@keyframes bpIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bp-in { animation: bpIn 380ms var(--bp-ease-expo) both; }

@media (prefers-reduced-motion: reduce) {
  .bp-in, .bp-page-head, .bp-featured, .bp-row, .bp-chip, .bp-empty__cta {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ────────────────────────────────────────────────
   home.phtml 적극 적용 — R Hero 강화 + 섹션 폴리시
   ──────────────────────────────────────────────── */
.r-hero {
  position: relative;
  margin: 16px 16px 24px;
  padding: 36px 24px 32px;
  background:
    radial-gradient(120% 100% at 80% 20%, oklch(0.695 0.176 38 / 0.16) 0%, transparent 55%),
    var(--bp-surface);
  border: 1px solid var(--bp-line);
  border-radius: 20px;
  overflow: hidden;
  font-family: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
}
.r-hero__title {
  font-size: 30px !important; font-weight: 800 !important;
  line-height: 1.15 !important; letter-spacing: -0.030em !important;
  color: var(--bp-ink-900) !important;
  margin-bottom: 10px !important;
  word-break: keep-all;
}
.r-hero__ctas {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.r-hero__btn {
  display: inline-flex !important; align-items: center; gap: 5px;
  padding: 11px 18px !important; border-radius: 12px !important;
  background: var(--bp-ink-900) !important; color: var(--bp-bg) !important;
  font-size: 13px !important; font-weight: 700 !important;
  letter-spacing: -0.008em !important;
  box-shadow: none !important;
  text-decoration: none;
  transition: transform 120ms var(--bp-ease-quart);
}
.r-hero__btn--ghost {
  background: transparent !important;
  color: var(--bp-ink-700) !important;
  border: 1px solid var(--bp-line) !important;
}
.r-hero__btn:active { transform: scale(0.97); }

/* 섹션 헤더 — 좀더 절제 */
.r-sec-head {
  padding: 0 16px;
  margin: 24px 0 8px !important;
}
.r-sec-title {
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: 0.12em !important; text-transform: uppercase !important;
  color: var(--bp-ink-500) !important;
  display: inline-flex !important; align-items: center; gap: 0 !important;
}
.r-sec-title__ico { display: none !important; }   /* 아이콘 제거 */
.r-sec-more {
  font-size: 11.5px !important; font-weight: 600 !important;
  color: var(--bp-ink-700) !important;
  text-decoration: none;
  letter-spacing: -0.005em !important;
}

/* 밋업 strip section head 도 동일 패턴 */
.meetup-section .r-sec-title__sub {
  margin-left: 6px;
  font-size: 10px !important;
  padding: 2px 6px !important;
  background: var(--bp-sunset-soft) !important;
  color: var(--bp-sunset-deep) !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
}

/* ────────────────────────────────────────────────
   home 큐레이션 카드 polish (ncard + r-hot-feature)
   ──────────────────────────────────────────────── */
.ncard {
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  background: var(--bp-surface) !important;
  border: 1px solid var(--bp-line) !important;
  box-shadow: none !important;
  border-radius: 14px !important;
  transition: transform 140ms var(--bp-ease-quart), box-shadow 220ms !important;
}
.ncard:hover {
  box-shadow: 0 10px 24px -14px oklch(0.13 0.012 30 / 0.18) !important;
  transform: translateY(-1px);
}
.ncard__name {
  font-family: "Pretendard Variable", Pretendard, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.018em !important;
  color: var(--bp-ink-900) !important;
}
.ncard__meta {
  font-size: 11.5px !important;
  color: var(--bp-ink-500) !important;
  letter-spacing: -0.005em !important;
  font-family: "Pretendard Variable", Pretendard, sans-serif !important;
}
.ncard__newtag {
  background: var(--bp-sunset) !important;
  color: var(--bp-ink-950) !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  font-size: 9.5px !important;
  padding: 3px 7px !important;
  border-radius: 99px !important;
}

/* HOT featured 카드 */
.r-hot-feature {
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  background: var(--bp-surface) !important;
  border: 1px solid var(--bp-line) !important;
  box-shadow: none !important;
  border-radius: 18px !important;
  padding: 16px !important;
}
.r-hot-feature:hover {
  box-shadow: 0 14px 30px -16px oklch(0.13 0.012 30 / 0.20) !important;
}
.r-hot-feature__rank {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--bp-sunset-deep) !important;
  background: var(--bp-sunset-soft) !important;
  padding: 4px 10px !important;
  border-radius: 99px !important;
  display: inline-block !important;
}
.r-hot-feature__title {
  font-size: 19px !important;
  font-weight: 700 !important;
  letter-spacing: -0.022em !important;
  color: var(--bp-ink-900) !important;
  line-height: 1.25 !important;
  margin: 10px 0 6px !important;
  word-break: keep-all;
}
.r-hot-feature__cat {
  font-size: 12px !important;
  color: var(--bp-ink-500) !important;
  letter-spacing: -0.005em !important;
}

/* curated section gap 정리 */
.curated-section {
  margin: 32px 0 !important;
}
.curated-hscroll {
  padding-bottom: 8px !important;
  gap: 10px !important;
}

/* 홈 큐레이션 3섹션 → 2섹션 압축 — 별점 섹션 숨김 (정보 밀도 ↓) */
.r-star-sec { display: none !important; }

/* 홈 큐레이션 섹션 호흡 — DESIGN.md §4 "호흡 vary 28/36/24" 명시 의도 반영.
 * 인접 섹션 의미 차이에 따라 spacing 차등 → 시각 monotony 회피. */
.curated-section + .curated-section { margin-top: 28px !important; }
section.curated-section:first-of-type { margin-top: 24px !important; }   /* hero → HOT 조밀 */
.bp-discover + .curated-section       { margin-top: 40px !important; }   /* HOT → 픽 큰 톤 전환 */
.home-latest + .curated-section,
.home-latest + .meetup-section        { margin-top: 40px !important; }   /* 신규 spot → 커뮤니티 큰 톤 전환 */
.meetup-section + .share-feed-section { margin-top: 24px !important; }   /* 커뮤니티 내부 연속 가까이 */

/* HOT 섹션 r-hot-feature 와 함께 노출되는 hot-rest 카드 polish */
.r-hot-sec .ncard,
.r-hot-rest .ncard {
  background: var(--bp-surface) !important;
}

/* 큐레이션 footer (전체 보기) 제거 — section more 가 이미 있음 */
.curated-footer-actions { display: none !important; }

/* ────────────────────────────────────────────────
   r-hero--bp: Impeccable v2 적극 재구성 (SVG illust + brand + 2 CTA)
   ──────────────────────────────────────────────── */

/* ────────────────────────────────────────────────
   bp-discover (오늘의 발견 통합 섹션)
   ──────────────────────────────────────────────── */
.bp-discover {
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  margin: 28px 0 32px !important;
}
.bp-discover__head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0 16px;
  margin-bottom: 14px;
}
.bp-discover__title {
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: 0.12em !important; text-transform: uppercase !important;
  color: var(--bp-ink-500) !important;
  margin: 0 !important;
}
.bp-discover__more {
  font-size: 11.5px; font-weight: 600;
  color: var(--bp-ink-700);
  text-decoration: none;
  letter-spacing: -0.005em;
}

/* ────────────────────────────────────────────────
   bp-cat 색 매핑 (spots 카테고리 7종)
   ──────────────────────────────────────────────── */
.bp-cat--vehicle::before  { background: var(--bp-c-activity); }
.bp-cat--wellness::before { background: var(--bp-c-beach); }
.bp-cat--stay::before     { background: var(--bp-c-company); }
.bp-cat--life::before     { background: var(--bp-c-drink); }

/* bp-row__thumb svg / emoji center */
.bp-row__thumb { color: #fff; }

/* ────────────────────────────────────────────────
   spots / picks 카테고리 squircle → leading dot (mockup 핵심 변경)
   Notion/Linear 모방 squircle 제거, BaliPick 정체성 leading dot.
   ──────────────────────────────────────────────── */
.chip-cat {
  background: transparent !important;
  border: 1px solid var(--bp-line) !important;
  color: var(--bp-ink-700) !important;
  padding: 6px 11px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  border-radius: 99px !important;
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
}
.chip-cat svg { display: none !important; }   /* squircle ico 제거 */
.chip-cat::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--bp-ink-300);
  flex-shrink: 0;
}
.chip-cat--food::before     { background: var(--bp-c-food) !important; }
.chip-cat--drink::before    { background: var(--bp-c-food) !important; }
.chip-cat--activity::before { background: var(--bp-c-activity) !important; }
.chip-cat--wellness::before { background: var(--bp-c-beach) !important; }
.chip-cat--stay::before     { background: var(--bp-c-company) !important; }
.chip-cat--life::before     { background: var(--bp-c-drink) !important; }
.chip-cat--vehicle::before  { background: var(--bp-c-activity) !important; }
.chip-cat.is-active, .chip-cat--active {
  background: var(--bp-ink-900) !important;
  color: var(--bp-bg) !important;
  border-color: var(--bp-ink-900) !important;
}
.chip-cat.is-active::before { background: var(--bp-bg) !important; }

/* spots 카드 안 큰 squircle (pick-thumb__icon-circle) 도 정리 */
.pick-thumb__icon-circle {
  border-radius: 50% !important;   /* squircle → 원형 */
  border: 1px solid oklch(0.97 0.01 60 / 0.4) !important;
  background: oklch(0.13 0.012 30 / 0.35) !important;
  backdrop-filter: blur(4px);
}

/* ────────────────────────────────────────────────
   spots / picks 카드 polish (CSS only, 마크업 변경 X)
   generic shadow 절제, border 단순화, tracking
   ──────────────────────────────────────────────── */
.card-grid {
  gap: 12px !important;
}
.card.card--photo, .card {
  background: var(--bp-surface) !important;
  border: 1px solid var(--bp-line) !important;
  box-shadow: none !important;          /* generic shadow 제거 */
  border-radius: 16px !important;
  transition: transform 140ms var(--bp-ease-quart), box-shadow 220ms var(--bp-ease-quart) !important;
}
.card:hover, .card.card--photo:hover {
  box-shadow: 0 14px 30px -16px oklch(0.13 0.012 30 / 0.18) !important;
  transform: translateY(-1px);
}
.card-header .card-name {
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-weight: 700 !important;
  letter-spacing: -0.018em !important;
}
.card-pick-desc {
  letter-spacing: -0.008em !important;
  color: var(--bp-ink-500) !important;
  line-height: 1.55 !important;
}
.card-meta {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em !important;
}
.card-rating {
  color: var(--bp-sunset-deep) !important;
  font-weight: 700 !important;
}

/* spots 페이지 하단 ppick-card (인기 픽) — 사용 X 이지만 대비 */
.ppick-card {
  background: var(--bp-surface) !important;
  border: 1px solid var(--bp-line) !important;
  box-shadow: none !important;
  border-radius: 12px !important;
}

/* results-count */
.results-count {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--bp-ink-500) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
}

/* ────────────────────────────────────────────────
   spot_show.phtml polish (CSS only)
   - provider-info dl: KV table 정렬
   - reviews: 회색 카드 → quotation 패턴
   ──────────────────────────────────────────────── */

/* provider-info KV */
.provider-info {
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  display: grid;
  grid-template-columns: 60px 1fr;
  row-gap: 10px; column-gap: 16px;
  margin: 16px 0 !important;
  padding: 0 !important;
}
.provider-info dt {
  font-size: 12px; font-weight: 500;
  color: var(--bp-ink-500);
  letter-spacing: -0.005em;
}
.provider-info dd {
  font-size: 13px; font-weight: 600;
  color: var(--bp-ink-900);
  letter-spacing: -0.008em;
  margin: 0 !important;
}

/* reviews — generic 회색 카드 → quotation 패턴 */
#reviews-section h2 {
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--bp-ink-500) !important;
  margin-bottom: 4px !important;
}
#reviews-list > div {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--bp-line) !important;
  border-radius: 0 !important;
  padding: 14px 0 !important;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  position: relative;
}
#reviews-list > div:first-child { border-top: none !important; }
#reviews-list > div::before {
  content: '"';
  position: absolute;
  top: 12px; left: -2px;
  font-size: 22px;
  color: var(--bp-sunset);
  line-height: 0; font-weight: 700;
  vertical-align: -4px;
}
#reviews-list > div > p {
  padding-left: 14px !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: var(--bp-ink-700) !important;
  letter-spacing: -0.008em !important;
}
#reviews-list > div > div {
  padding-left: 14px !important;
  font-size: 11.5px !important;
  color: var(--bp-ink-500) !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
}
#reviews-list > div > div a {
  color: var(--bp-ink-500) !important;
}

/* ────────────────────────────────────────────────
   pick/show.phtml trip-header polish (CSS only)
   ──────────────────────────────────────────────── */
.trip-header {
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--bp-line);
}
.trip-header h1 {
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -0.028em !important;
  line-height: 1.20 !important;
  color: var(--bp-ink-900) !important;
  word-break: keep-all;
  margin: 0 0 10px !important;
}
.trip-header > p:nth-of-type(1) {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  color: var(--bp-ink-500) !important;
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 12px !important;
}
.trip-header > p:nth-of-type(2) {
  /* description */
  margin: 14px 0 0 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: var(--bp-ink-700) !important;
  letter-spacing: -0.008em !important;
}
.trip-header svg { opacity: 0.7; }

/* ────────────────────────────────────────────────
   site-header polish — Pretendard + tight tracking
   ──────────────────────────────────────────────── */
.site-header {
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  background: var(--bp-bg) !important;
  border-bottom: 1px solid var(--bp-line) !important;
  box-shadow: none !important;
}
.site-header .logo, .site-header .r-logo {
  font-weight: 800 !important;
  letter-spacing: -0.020em !important;
  color: var(--bp-ink-900) !important;
}
.header-nav__link {
  font-weight: 600 !important;
  letter-spacing: -0.010em !important;
  color: var(--bp-ink-500) !important;
  transition: color 160ms var(--bp-ease-quart);
}
.header-nav__link:hover { color: var(--bp-ink-700) !important; }
.header-nav__link.active {
  color: var(--bp-ink-900) !important;
  font-weight: 700 !important;
}
.btn--mypick {
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-weight: 700 !important;
  letter-spacing: -0.010em !important;
}

/* ────────────────────────────────────────────────
   form 공통 polish — pick/new, submit/single 등
   ──────────────────────────────────────────────── */
input[type="text"], input[type="tel"], input[type="email"],
input[type="datetime-local"], input[type="url"], input[type="number"],
select, textarea {
  font-family: "Pretendard Variable", Pretendard, sans-serif !important;
  letter-spacing: -0.005em !important;
}
label, .form-label {
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  letter-spacing: -0.005em;
}
.btn, button.btn {
  font-family: "Pretendard Variable", Pretendard, sans-serif !important;
  letter-spacing: -0.010em !important;
}

/* ────────────────────────────────────────────────
   site footer polish — 작은 절제
   ──────────────────────────────────────────────── */
.site-footer, footer.site-footer {
  font-family: "Pretendard Variable", Pretendard, sans-serif !important;
  color: var(--bp-ink-500) !important;
  border-top: 1px solid var(--bp-line) !important;
  background: transparent !important;
}
.site-footer a {
  color: var(--bp-ink-700) !important;
  letter-spacing: -0.005em !important;
}

/* ────────────────────────────────────────────────
   form-group / form-actions polish (submit + pick/new)
   ──────────────────────────────────────────────── */
.form-group {
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  margin-bottom: 18px !important;
}
.form-group label,
.form-group > strong:first-child {
  display: block;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--bp-ink-700) !important;
  letter-spacing: -0.005em !important;
  margin-bottom: 6px !important;
}
.form-group input[type="text"],
.form-group input[type="tel"],
.form-group input[type="email"],
.form-group input[type="datetime-local"],
.form-group input[type="url"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 14px !important;
  border-radius: 10px !important;
  border: 1px solid var(--bp-line) !important;
  background: var(--bp-surface) !important;
  color: var(--bp-ink-900) !important;
  font-family: "Pretendard Variable", Pretendard, sans-serif !important;
  font-size: 14px !important;
  letter-spacing: -0.005em !important;
  transition: border-color 160ms var(--bp-ease-quart), background-color 160ms var(--bp-ease-quart);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none !important;
  border-color: var(--bp-ink-700) !important;
  background: var(--bp-bg) !important;
}
.form-group small,
.form-group .form-hint,
.form-group .help {
  display: block;
  font-size: 11.5px !important;
  color: var(--bp-ink-500) !important;
  letter-spacing: -0.005em !important;
  margin-top: 6px !important;
  font-weight: 400 !important;
}
.form-group .error,
.form-group .form-error {
  display: block;
  font-size: 11.5px !important;
  color: var(--bp-err) !important;
  margin-top: 6px;
  font-weight: 600;
}
.form-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 24px !important;
  padding-top: 16px;
  border-top: 1px solid var(--bp-line);
}
.form-actions .btn,
.form-actions button.btn {
  padding: 12px 18px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.008em !important;
}

/* form 페이지 page-head (h1) */
.page-head, .form-head {
  font-family: "Pretendard Variable", Pretendard, sans-serif;
}
.page-head h1, .form-head h1 {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.026em !important;
  color: var(--bp-ink-900) !important;
  margin: 0 0 4px !important;
}
.page-head p, .form-head p {
  font-size: 12.5px !important;
  color: var(--bp-ink-500) !important;
  letter-spacing: -0.005em !important;
  margin: 0 0 20px !important;
}

/* ════════════════════════════════════════════════════════════════
   HOME v3 — Impeccable critique 반영 (3 가지 적극 정정)
   ----------------------------------------------------------------
   P1: Hero illust 의 reflex 회피 — sunset SVG 제거, typography-driven
   P2: 3 섹션 시각 어휘 다양화 — editorial quote pull 도입 (한국인이 모은 픽)
   P3: Hero CTA dominance + accent restraint — primary 대비 ghost link
   ════════════════════════════════════════════════════════════════ */

/* r-hero--bp: 통합 canonical block (polish 2차 P0 — 중복 정의 통합).
 * position/overflow/border-radius (frame) + background/border/margin (layout). */
.r-hero--bp {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  min-height: 0 !important;
  background:
    linear-gradient(180deg,
      oklch(0.985 0.006 60) 0%,
      oklch(0.965 0.012 50) 100%) !important;
  border: 1px solid var(--bp-line) !important;
  margin: 12px 16px 24px !important;
}
.r-hero--bp .r-hero__inner {
  padding: 28px 22px 24px !important;
  max-width: 100% !important;
}
.r-hero--bp .r-hero__title {
  font-size: 30px !important; font-weight: 800 !important;
  line-height: 1.18 !important; letter-spacing: -0.030em !important;
  color: var(--bp-ink-900) !important;
  margin-bottom: 14px !important;
  word-break: keep-all;
}
.r-hero--bp .r-hero__title::after {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bp-sunset);
  margin-left: 2px;
  vertical-align: 0.18em;
}

/* Slot B — restrained editorial positioning (lead supporting line, sub 단일화).
 * polish: title-positioning ratio 26/13.5 = 1.93x (DESIGN.md §3 1.25+ 통과).
 * ink-700 lead supporting, max-width 300 일관, keep-all 한국어. */
.r-hero--bp .r-hero__positioning {
  font-size: 13.5px !important;
  color: var(--bp-ink-700) !important;
  line-height: 1.55 !important;
  letter-spacing: -0.008em !important;
  margin: 0 0 26px 0 !important;
  max-width: 300px;
  word-break: keep-all;
}

/* P3 — Hero CTA 비대칭 (primary dominant + ghost link 패턴) */
.r-hero--bp .r-hero__ctas {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}
.r-hero--bp .r-hero__btn {
  background: var(--bp-ink-900) !important;
  color: var(--bp-ink-0) !important;
  padding: 14px 22px !important;
  border-radius: 11px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.012em !important;
  text-decoration: none !important;
  box-shadow: none !important;
  border: none !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.r-hero--bp .r-hero__btn:active { transform: scale(0.97); }
.r-hero--bp .r-hero__btn--ghost {
  /* polish 3차 — text span + SVG chevron 분리 구조.
   * underline 은 .r-hero__btn-text 에만 적용, arrow 단독 hover translate. */
  background: transparent !important;
  color: var(--bp-ink-700) !important;
  padding: 11px 6px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  transition: color 0.18s ease !important;
}
.r-hero--bp .r-hero__btn--ghost .r-hero__btn-text {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--bp-ink-300);
  transition: text-decoration-color 0.18s ease;
}
.r-hero--bp .r-hero__btn--ghost .r-hero__btn-arrow {
  display: inline-block;
  flex-shrink: 0;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  /* optical center: chevron 끝점이 텍스트 baseline 보다 살짝 위 — 0.5px 보정 */
  transform: translateY(-0.5px);
}
@media (hover: hover) {
  .r-hero--bp .r-hero__btn--ghost:hover {
    color: var(--bp-ink-900) !important;
  }
  .r-hero--bp .r-hero__btn--ghost:hover .r-hero__btn-text {
    text-decoration-color: var(--bp-ink-700);
  }
  .r-hero--bp .r-hero__btn--ghost:hover .r-hero__btn-arrow {
    transform: translate(2px, -0.5px);
  }
}

/* Section eyebrow hierarchy — bp-discover title 격상 (uppercase 11px → 18 heading) */
.bp-discover__title {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.022em !important;
  text-transform: none !important;
  color: var(--bp-ink-900) !important;
}
.bp-discover__more {
  font-size: 12.5px !important;
  color: var(--bp-ink-500) !important;
  font-weight: 500 !important;
}

/* r-sec-head 도 같은 hierarchy 통일 (한국인이 모은 픽 / 발리 밋업) */
.r-sec-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.022em !important;
  color: var(--bp-ink-900) !important;
}
.r-sec-title__ico { display: none !important; }      /* 🌅 이모지 hide */
.r-sec-title__sub {
  font-size: 12.5px !important;
  color: var(--bp-ink-500) !important;
  font-weight: 500 !important;
  margin-left: 6px !important;
}
.r-sec-more {
  font-size: 12.5px !important;
  color: var(--bp-ink-500) !important;
}

/* P2 — Editorial quote pull (한국인이 모은 픽 섹션 재구성) */
.bp-picks { padding: 0 16px; }
.bp-picks__pull {
  position: relative;
  padding: 26px 22px 22px;
  border-top: 1px solid var(--bp-line);
  border-bottom: 1px solid var(--bp-line);
  background: var(--bp-bg);
  text-decoration: none;
  color: inherit;
  display: block;
  margin-bottom: 0;
  transition: background 0.2s ease;
}
.bp-picks__pull:hover { background: oklch(0.985 0.008 60); color: inherit; }
.bp-picks__pull::before {
  content: '\201C';
  position: absolute;
  top: 6px; left: 14px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 56px;
  line-height: 1;
  color: var(--bp-sunset);
  opacity: 0.35;
}
.bp-picks__pull-quote {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: -0.020em;
  color: var(--bp-ink-900);
  margin: 0 0 14px;
  padding-left: 4px;
  word-break: keep-all;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bp-picks__pull-attr {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--bp-ink-500);
  letter-spacing: -0.005em;
}
.bp-picks__pull-attr b {
  color: var(--bp-ink-900);
  font-weight: 600;
}
.bp-picks__pull-attr-dot { color: var(--bp-ink-300); }

.bp-picks__list {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--bp-line);
}
.bp-picks__list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px;
  border-top: 1px solid var(--bp-line);
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease;
}
.bp-picks__list-item:first-child { border-top: none; }
.bp-picks__list-item:hover { background: oklch(0.985 0.008 60); color: inherit; }
.bp-picks__list-body { min-width: 0; flex: 1; }
.bp-picks__list-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--bp-ink-900);
  letter-spacing: -0.012em;
  margin: 0 0 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bp-picks__list-meta {
  font-size: 11.5px;
  color: var(--bp-ink-500);
  letter-spacing: -0.005em;
}
.bp-picks__list-arrow {
  color: var(--bp-ink-300);
  font-size: 14px;
  margin-left: 12px;
  flex-shrink: 0;
}

/* Accent restraint — sunset 사용처 제한.
   유지: featured rating, meetup urgent, hero dot, quote 따옴표
   약화: row__right--urgent (NEW tag) → ink solid */
.bp-row__right { font-size: 10.5px !important; color: var(--bp-ink-500) !important; }
.bp-row__right--urgent {
  color: var(--bp-ink-0) !important;
  background: var(--bp-ink-900);
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 9.5px;
  letter-spacing: 0.05em;
}

/* bp-cat 한국어/영문 mix 정정 보조 — 영문 부분 표시는 마크업에서 조정 */
.bp-cat {
  text-transform: none !important;    /* uppercase 강제 해제 (한국어 그대로) */
  letter-spacing: 0.02em !important;
}

/* ncard__newtag (curated hscroll 신규 카드) accent 약화 */
.ncard__newtag {
  background: var(--bp-ink-900) !important;
  color: var(--bp-ink-0) !important;
  letter-spacing: 0.04em !important;
}

/* meetup-strip 카드 시각 어휘 통일 — bp-row/bp-featured 톤과 일관 */
.mu-strip-card {
  border: 1px solid var(--bp-line) !important;
  box-shadow: none !important;
  border-radius: 14px !important;
}
.mu-strip-card:hover {
  border-color: var(--bp-line-strong) !important;
}
.mu-strip-card__title {
  letter-spacing: -0.018em !important;
}

/* ════════════════════════════════════════════════════════════════
   HOME v3.1 — Polish (viewport / motion / a11y / typography)
   ════════════════════════════════════════════════════════════════ */

/* 1. Viewport <380 Hero responsive (iPhone SE 등 작은 화면) */
@media (max-width: 380px) {
  .r-hero--bp { margin: 10px 12px 20px !important; }
  .r-hero--bp .r-hero__inner { padding: 36px 22px 30px !important; }
  .r-hero--bp .r-hero__title {
    font-size: 28px !important;
    letter-spacing: -0.030em !important;
    margin-bottom: 14px !important;
  }
  .r-hero--bp .r-hero__positioning {
    font-size: 13px !important;
    margin-bottom: 22px !important;
    max-width: 100%;
  }
  .r-hero--bp .r-hero__btn {
    padding: 12px 18px !important;
    font-size: 14px !important;
  }

  .bp-discover { margin: 24px 0 28px !important; }
  .bp-discover__head { padding: 0 14px !important; }
  .bp-picks { padding: 0 14px !important; }
  .bp-picks__pull { padding: 22px 18px 18px !important; }
  .bp-picks__pull-quote { font-size: 17px !important; }
}

/* 2. Section margin rhythm vary v7.13 (4 섹션 호흡 차별 — monotony 해소)
   bp-discover (HOT) → bp-picks (큐레이션) → home-latest (신규) → meetup-strip (모집)
   각 섹션 분리감 차별: 강 / 약 / 강 / 중 */
.bp-discover                                { margin: 28px 0 36px !important; }   /* 강한 분리 */
.curated-section + .curated-section         { margin-top: 24px !important; }      /* 기본 (picks 와 사이) */
.curated-section.home-latest                { margin-top: 40px !important; }      /* 신규 강조 (강한 분리) */
.curated-section.meetup-section             { margin-top: 28px !important; }      /* 중간 */

/* 3. Micro-motion — ease-out-quart (정의된 motion 곡선)
   featured / picks pull / list / row 모두 일관된 hover translate */
@keyframes bp-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.r-hero--bp .r-hero__inner > * {
  animation: bp-fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.r-hero--bp .r-hero__title       { animation-delay: 0.05s; }
.r-hero--bp .r-hero__positioning { animation-delay: 0.13s; }
.r-hero--bp .r-hero__ctas        { animation-delay: 0.21s; }

.bp-featured, .bp-picks__pull, .bp-picks__list-item, .bp-row {
  transition:
    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.2s ease !important;
}
@media (hover: hover) {
  .bp-featured:hover { transform: translateY(-2px); }
  .bp-picks__pull:hover { transform: translateY(-1px); }
}

/* 4. a11y polish — focus ring (keyboard nav 명확) */
.r-hero--bp .r-hero__btn:focus-visible,
.bp-featured:focus-visible,
.bp-picks__pull:focus-visible,
.bp-picks__list-item:focus-visible,
.bp-row:focus-visible,
.mu-strip-card:focus-visible {
  outline: 2px solid var(--bp-sunset);
  outline-offset: 3px;
  border-radius: 8px;
}
.r-hero--bp .r-hero__btn--ghost:focus-visible {
  outline-offset: 4px;
}

/* prefers-reduced-motion 존중 — 모든 motion 즉시 정지 */
@media (prefers-reduced-motion: reduce) {
  .r-hero--bp .r-hero__inner > * {
    animation: none !important;
  }
  .bp-featured, .bp-picks__pull, .bp-picks__list-item, .bp-row,
  .mu-strip-card, .r-hero--bp .r-hero__btn,
  .r-hero--bp .r-hero__btn-arrow, .r-hero--bp .r-hero__btn-text {
    transition: none !important;
  }
  .r-hero--bp .r-hero__btn--ghost:hover .r-hero__btn-arrow {
    transform: translateY(-0.5px) !important;  /* baseline 보정만 유지, translateX 정지 */
  }
  .bp-featured:hover, .bp-picks__pull:hover {
    transform: none !important;
  }
}

/* 5. Typography refinement
   - 한국어 line-height 1.42 → 1.46 (한글 자형 호흡)
   - bp-cat letter-spacing 정정 (한국어 위주이므로 negative 적용)
   - quote 따옴표 한국어 fit ('"' 보다 '"' 가 더 자연스러우나 Georgia 유지 — 닫는 따옴표 제거된 디자인) */
.bp-picks__pull-quote {
  line-height: 1.46 !important;
  word-break: keep-all;
}
.bp-cat {
  letter-spacing: -0.005em !important;     /* 한국어용 negative tracking */
  font-size: 11px !important;
}
.bp-featured__title {
  line-height: 1.30 !important;            /* 한국어 자형 호흡 */
}
.bp-row__title {
  line-height: 1.35 !important;
}

/* mu-strip-card title 2-line clamp — 긴 제목 깨짐 방지 */
.mu-strip-card__title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  line-height: 1.32 !important;
}

/* ════════════════════════════════════════════════════════════════
   SPOTS v3 — Impeccable critique 3대 정정 적극 반영
   ----------------------------------------------------------------
   P1: 시각 어휘 통일 (홈 v3 톤과 일관) — CTA / chip / page-head
   P2: Identical card grid 해소 — 첫 카드 featured variant
   P3: Placeholder squircle 제거 + card-meta hierarchy 정정
   ════════════════════════════════════════════════════════════════ */

/* P1-a — spots 헤더 액션 그룹 (검색 + 등록 비대칭) */
.bp-page-head--spots { position: static !important; padding: 20px 0 14px !important; }
.bp-page-head__actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.bp-page-head__icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: transparent;
  color: var(--bp-ink-700);
  border: 1px solid var(--bp-line);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.bp-page-head__icon-btn:hover {
  background: var(--bp-bg);
  border-color: var(--bp-line-strong);
}
.bp-page-head__icon-btn:active { transform: scale(0.94); }
.bp-page-head__icon-btn:focus-visible {
  outline: 2px solid var(--bp-sunset);
  outline-offset: 3px;
}
.bp-page-head--spots .bp-page-head__action {
  background: var(--bp-ink-900) !important;
  color: var(--bp-ink-0) !important;
  box-shadow: none !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  letter-spacing: -0.010em !important;
}
.bp-page-head--spots .bp-page-head__sub {
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: -0.005em !important;
  color: var(--bp-ink-500) !important;
  margin-top: 4px;
  text-transform: none !important;
}

/* P1-b — r-chip (spots 카테고리 nav) → leading dot 통일 */
.r-cats {
  padding: 0 0 14px !important;
  gap: 6px !important;
}
.r-chip {
  background: transparent !important;
  border: 1px solid var(--bp-line) !important;
  color: var(--bp-ink-700) !important;
  padding: 7px 13px 7px 11px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  border-radius: 99px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  text-indent: 0 !important;
  font-style: normal !important;
}
/* B-2 (2026-05-21): leading dot 폐기 → SVG icon vocab 으로 통일.
   .r-chip::before / .r-chip[data-val=""]::before / .r-chip.on::before 제거.
   카테고리 chip 은 .r-chip--icon 으로 leading SVG 자체 노출. "전체" chip
   (.r-chip[data-val=""]) 은 icon 없이 텍스트만 — 검색 모달 filter-tab--all
   패턴과 일관. */
.r-chip__icon {
  flex-shrink: 0;
  width: 13px; height: 13px;
  color: var(--bp-ink-700);
}
.r-chip.on .r-chip__icon { color: var(--bp-ink-0); }
.r-chip--icon { padding-left: 9px !important; }

.r-chip.on {
  background: var(--bp-ink-900) !important;
  color: var(--bp-ink-0) !important;
  border-color: var(--bp-ink-900) !important;
}
.r-chip:focus-visible {
  outline: 2px solid var(--bp-sunset);
  outline-offset: 3px;
}

/* P2 — card grid identical pattern 해소: 첫 카드 featured variant.
 * minmax 140px — 모든 모바일 viewport 에서 2-col 보장 (안드로이드 360px
 * + system font scale 1.2x 환경에서도 wrap 깨짐 회피).
 * 모바일 viewport (≤640) 에서는 명시적 2-col 강제 (auto-fill calc 의존 회피). */
.card-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  gap: 14px !important;
}
@media (max-width: 640px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
.card.card--featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  background: var(--bp-bg) !important;
  border: 1px solid var(--bp-line) !important;
  border-radius: 16px !important;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s ease;
  margin-bottom: 4px;
}
.card.card--featured:hover {
  border-color: var(--bp-line-strong) !important;
  transform: translateY(-1px);
}
.card.card--featured .card-thumb,
.card.card--featured .card-placeholder {
  width: 100%; height: 100%;
  min-height: 180px;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
}
.card.card--featured .card-body {
  padding: 20px 22px 22px !important;
  display: flex; flex-direction: column;
  justify-content: center;
}
.card.card--featured .card-name {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.022em !important;
  line-height: 1.30 !important;
  margin-bottom: 8px;
}
.card.card--featured .card-meta {
  font-size: 12px !important;
  gap: 6px !important;
}
@media (max-width: 480px) {
  .card.card--featured { grid-template-columns: 1fr; }
  .card.card--featured .card-thumb,
  .card.card--featured .card-placeholder {
    aspect-ratio: 16 / 9 !important;
    min-height: 0;
  }
}

/* P3-a v3.4 — Placeholder editorial improv
   ─────────────────────────────────────────────────────────────
   typography stack (한국어 dominant + 영문 micro caption) +
   dot pattern bg (카테고리 색 12px grid) +
   SVG ornament 카테고리별 transform vary (단조 회피).
   CSS var 활용 9 카테고리 tint 한곳 매핑.
   ────────────────────────────────────────────────────────────── */

.card-placeholder {
  position: relative !important;
  overflow: hidden;
  isolation: isolate;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-bottom: 1px solid var(--bp-line);
  background-color: var(--ph-bg, oklch(0.96 0.012 60));
  background-image:
    radial-gradient(var(--ph-dot, transparent) 0.7px, transparent 1.2px);
  background-size: 12px 12px;
  background-position: 0 0;
  color: var(--ph-color, var(--bp-ink-700));
}

/* 9 카테고리 tint + strong currentColor + dot color (CSS var 매핑) */
.card-placeholder--vehicle  { --ph-bg: oklch(0.95 0.045 220); --ph-color: oklch(0.42 0.18 220); --ph-dot: oklch(0.42 0.18 220 / 0.09); }
.card-placeholder--food     { --ph-bg: oklch(0.95 0.055 40);  --ph-color: oklch(0.50 0.18 40);  --ph-dot: oklch(0.50 0.18 40  / 0.10); }
.card-placeholder--drink    { --ph-bg: oklch(0.95 0.045 290); --ph-color: oklch(0.45 0.18 290); --ph-dot: oklch(0.45 0.18 290 / 0.09); }
.card-placeholder--activity { --ph-bg: oklch(0.95 0.055 150); --ph-color: oklch(0.42 0.17 150); --ph-dot: oklch(0.42 0.17 150 / 0.09); }
.card-placeholder--wellness { --ph-bg: oklch(0.95 0.045 330); --ph-color: oklch(0.48 0.17 330); --ph-dot: oklch(0.48 0.17 330 / 0.09); }
.card-placeholder--stay     { --ph-bg: oklch(0.96 0.045 75);  --ph-color: oklch(0.48 0.15 75);  --ph-dot: oklch(0.48 0.15 75  / 0.09); }
.card-placeholder--life     { --ph-bg: oklch(0.95 0.045 185); --ph-color: oklch(0.45 0.14 185); --ph-dot: oklch(0.45 0.14 185 / 0.09); }
.card-placeholder--beach    { --ph-bg: oklch(0.95 0.045 215); --ph-color: oklch(0.45 0.15 215); --ph-dot: oklch(0.45 0.15 215 / 0.09); }
.card-placeholder--company  { --ph-bg: oklch(0.95 0.045 350); --ph-color: oklch(0.48 0.17 350); --ph-dot: oklch(0.48 0.17 350 / 0.09); }

/* 좌하단 accent line — .card-placeholder::before */
.card-placeholder::before {
  content: '' !important;
  position: absolute !important;
  display: block !important;
  inset: auto auto 12px 14px !important;
  width: 18px !important; height: 2px !important;
  background: currentColor !important;
  background-image: none !important;
  opacity: 0.32 !important;
  border-radius: 2px !important;
  z-index: 2;
}

/* cat-squircle 컨테이너 — flex column stack (영문 caption + 한국어 라벨) */
.card-placeholder .cat-squircle {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  color: inherit !important;
  position: relative;
  z-index: 1;
}

/* SVG 카테고리 모티프 — 카테고리별 transform vary (단조 회피) */
.card-placeholder .cat-squircle svg {
  display: block !important;
  position: absolute !important;
  width: 62% !important;
  height: 62% !important;
  opacity: 0.10 !important;
  color: currentColor !important;
  pointer-events: none;
  z-index: 0;
}
.card-placeholder--vehicle  .cat-squircle svg { top: -8% !important; right: -6% !important; transform: rotate(8deg) !important; }
.card-placeholder--food     .cat-squircle svg { top: -8% !important; right: -6% !important; transform: rotate(-12deg) !important; }
.card-placeholder--drink    .cat-squircle svg { top: -10% !important; right: -4% !important; transform: rotate(14deg) !important; }
.card-placeholder--activity .cat-squircle svg { top: -12% !important; right: -8% !important; transform: rotate(-18deg) !important; }
.card-placeholder--wellness .cat-squircle svg { top: -6% !important; right: -8% !important; transform: rotate(-6deg) scale(1.05) !important; }
.card-placeholder--stay     .cat-squircle svg { top: -10% !important; right: -6% !important; transform: rotate(4deg) !important; }
.card-placeholder--life     .cat-squircle svg { top: -8% !important; right: -8% !important; transform: rotate(-10deg) !important; }
.card-placeholder--beach    .cat-squircle svg { top: -6% !important; right: -10% !important; transform: rotate(16deg) !important; }
.card-placeholder--company  .cat-squircle svg { top: -10% !important; right: -8% !important; transform: rotate(-8deg) !important; }

/* 영문 caption (micro) — .cat-squircle::before, 카테고리별 content */
.card-placeholder .cat-squircle::before {
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.48;
  line-height: 1;
  position: relative;
  z-index: 2;
  content: '';
}
.card-placeholder--vehicle  .cat-squircle::before { content: 'TRANSPORT'; }
.card-placeholder--food     .cat-squircle::before { content: 'DINING'; }
.card-placeholder--drink    .cat-squircle::before { content: 'DRINKS'; }
.card-placeholder--activity .cat-squircle::before { content: 'ACTIVITY'; }
.card-placeholder--wellness .cat-squircle::before { content: 'WELLNESS'; }
.card-placeholder--stay     .cat-squircle::before { content: 'STAY'; }
.card-placeholder--life     .cat-squircle::before { content: 'LIFESTYLE'; }
.card-placeholder--beach    .cat-squircle::before { content: 'BEACH'; }
.card-placeholder--company  .cat-squircle::before { content: 'COMPANY'; }

/* 한국어 카테고리 라벨 — Pretendard typography-as-image (dominant) */
.card-placeholder .cat-squircle::after {
  content: attr(data-cat-label);
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.034em;
  color: currentColor;
  text-transform: none;
  position: relative;
  z-index: 2;
  white-space: nowrap;
  text-shadow: 0 1px 0 oklch(1 0 0 / 0.45);
  line-height: 1;
}

/* featured 카드 placeholder — 라벨 자형 격상 (큰 hero card) */
.card.card--featured .card-placeholder .cat-squircle::after {
  font-size: 44px;
  letter-spacing: -0.040em;
}
.card.card--featured .card-placeholder .cat-squircle::before {
  font-size: 11px;
  letter-spacing: 0.24em;
}
.card.card--featured .card-placeholder .cat-squircle svg {
  width: 52% !important;
  height: 52% !important;
  opacity: 0.12 !important;
}
.card.card--featured .card-placeholder::before {
  width: 28px !important; height: 3px !important;
  inset: auto auto 22px 22px !important;
}
.card.card--featured .card-placeholder {
  background-size: 16px 16px;
}

/* viewport <380 — 라벨 자형 축소 */
@media (max-width: 380px) {
  .card-placeholder .cat-squircle::after { font-size: 22px; }
  .card-placeholder .cat-squircle::before { font-size: 8.5px; letter-spacing: 0.18em; }
  .card.card--featured .card-placeholder .cat-squircle::after { font-size: 34px; }
}

/* ════════════════════════════════════════════════════════════════
   SPOT 상세 v3 — Impeccable critique 3대 정정 적극 반영
   ----------------------------------------------------------------
   P1: hero re-design — sunset drenched + glassmorphism 제거
       → restrained editorial 톤 (홈 v3 일관)
   P2: floating CTA 비대칭 — primary single + secondary outline + ghost link
   P3: reviews/info dl/google maps/카카오 코드 inline style 토큰화
   ════════════════════════════════════════════════════════════════ */

/* P1 — provider-hero re-design (drenched → restrained) */
.provider-detail--r3 .provider-hero {
  background: var(--bp-bg) !important;
  border: 1px solid var(--bp-line) !important;
  border-radius: 16px !important;
  padding: 24px 22px 20px !important;
  margin: 8px 0 16px !important;
  box-shadow: none !important;
  color: var(--bp-ink-900) !important;
  overflow: hidden;
}
.provider-detail--r3 .provider-hero::after {
  display: none !important;     /* radial decorative overlay 제거 */
}

/* hero 태그 — glassmorphism 제거, bp-chip leading dot 어휘 통일 */
.provider-detail--r3 .provider-hero__tags {
  margin-bottom: 14px !important;
  gap: 6px !important;
}
.provider-detail--r3 .provider-hero__tag {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--bp-ink-700) !important;
  border: 1px solid var(--bp-line) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  padding: 5px 11px 5px 9px !important;
  border-radius: 99px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap;
}
.provider-detail--r3 .provider-hero__tag::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--bp-ink-300);
  flex-shrink: 0;
}
/* trust badge 강조 — solid ink-900 */
.provider-detail--r3 .provider-hero__tag--is-trust {
  background: var(--bp-sunset-deep) !important;
  border-color: var(--bp-sunset-deep) !important;
  color: var(--bp-ink-0) !important;
}
.provider-detail--r3 .provider-hero__tag--is-trust::before {
  background: var(--bp-ink-0) !important;
}
.provider-detail--r3 .provider-hero__tag--is-verified {
  background: var(--bp-ink-900) !important;
  border-color: var(--bp-ink-900) !important;
  color: var(--bp-ink-0) !important;
}
.provider-detail--r3 .provider-hero__tag--is-verified::before {
  background: var(--bp-sunset) !important;
}
.provider-detail--r3 .provider-hero__tag--unverified {
  background: oklch(0.96 0.045 75) !important;
  border-color: oklch(0.86 0.08 75) !important;
  color: oklch(0.40 0.12 75) !important;
}
.provider-detail--r3 .provider-hero__tag--unverified::before {
  background: oklch(0.65 0.15 75) !important;
}

/* hero typography — editorial restrained */
.provider-detail--r3 .provider-name {
  color: var(--bp-ink-900) !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -0.030em !important;
  line-height: 1.22 !important;
  margin: 0 0 10px !important;
  word-break: keep-all;
}
.provider-detail--r3 .provider-hero__views {
  color: var(--bp-ink-500) !important;
  font-size: 12px !important;
  letter-spacing: -0.005em !important;
  font-weight: 500 !important;
}

/* viewport <380 */
@media (max-width: 380px) {
  .provider-detail--r3 .provider-hero {
    padding: 20px 18px 18px !important;
    border-radius: 14px !important;
  }
  .provider-detail--r3 .provider-name { font-size: 22px !important; }
}

/* P3-a — provider-info dl 정리 (editorial table 어휘) */
.provider-detail--r3 .provider-info {
  background: var(--bp-bg) !important;
  border: 1px solid var(--bp-line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  font-size: 13.5px !important;
  grid-template-columns: 88px 1fr !important;
  margin: 0 0 14px !important;
}
.provider-detail--r3 .provider-info dt {
  color: var(--bp-ink-500) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  padding: 13px 14px !important;
}
.provider-detail--r3 .provider-info dd {
  color: var(--bp-ink-900) !important;
  font-weight: 500 !important;
  letter-spacing: -0.012em !important;
  padding: 13px 14px !important;
}
.provider-detail--r3 .provider-info dt + dd {
  border-top: 1px solid var(--bp-line);
}
.provider-detail--r3 .provider-info dt {
  border-top: 1px solid var(--bp-line);
}
.provider-detail--r3 .provider-info > dt:first-of-type,
.provider-detail--r3 .provider-info > dt:first-of-type + dd {
  border-top: none;
}

/* 카카오 ID code 박스 — inline style 톤 통일 */
.provider-detail--r3 .provider-info dd code {
  background: var(--bp-bg) !important;
  border: 1px solid var(--bp-line) !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  font-family: ui-monospace, "SF Mono", monospace !important;
  font-size: 12.5px !important;
  color: var(--bp-ink-900) !important;
}
.provider-detail--r3 .provider-info dd code + small {
  color: var(--bp-ink-500) !important;
  font-size: 11px !important;
  letter-spacing: -0.005em;
}

/* P3-b — google maps section 톤 정리 (외부 링크 ghost button) */
.provider-detail--r3 section[style*="border-radius:12px"] {
  border-radius: 14px !important;
  border-color: var(--bp-line) !important;
  margin: 16px 0 !important;
}
.provider-detail--r3 section[style*="border-radius:12px"] > a {
  background: var(--bp-bg) !important;
  color: var(--bp-ink-700) !important;
  font-size: 12.5px !important;
  letter-spacing: -0.005em !important;
  padding: 12px 14px !important;
  border-top-color: var(--bp-line) !important;
  font-weight: 600 !important;
}

/* description / note — reading typography */
.provider-detail--r3 .provider-description,
.provider-detail--r3 .provider-note {
  font-size: 14px !important;
  line-height: 1.65 !important;
  letter-spacing: -0.008em !important;
  color: var(--bp-ink-700) !important;
  margin: 14px 0 !important;
  word-break: keep-all;
}

/* P2 v3.8 — floating CTA sticky bar 배경 + 가로 비대칭
   style.css 의 background: transparent → bp-bg solid + 1px top line + shadow.
   투명 floating 어색함 해소. */
.provider-detail--r3 .provider-actions--floating {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  margin: 0 !important;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  background: var(--bp-bg) !important;
  border-top: 1px solid var(--bp-line) !important;
  box-shadow: 0 -4px 16px oklch(0.45 0.18 40 / 0.06) !important;
  pointer-events: auto !important;
}
.provider-detail--r3 .provider-actions--floating .btn { width: auto !important; }
.provider-detail--r3 .provider-actions--floating .btn {
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: -0.012em !important;
  padding: 13px 18px !important;
  box-shadow: none !important;
  border: none !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  flex: 1 1 0;
  min-width: 0;
}
.provider-detail--r3 .provider-actions--floating .btn:active {
  transform: scale(0.97);
}
.provider-detail--r3 .provider-actions--floating .btn--primary {
  background: var(--bp-ink-900) !important;
  color: var(--bp-ink-0) !important;
}
.provider-detail--r3 .provider-actions--floating .btn--whatsapp {
  background: transparent !important;
  color: var(--bp-ink-900) !important;
  border: 1px solid var(--bp-ink-900) !important;
}
.provider-detail--r3 .provider-actions--floating .btn--whatsapp:hover {
  background: var(--bp-ink-900) !important;
  color: var(--bp-ink-0) !important;
}
.provider-detail--r3 .provider-actions--floating .btn--secondary {
  background: transparent !important;
  color: var(--bp-ink-500) !important;
  border: none !important;
  flex: 0 0 auto;
  padding: 13px 8px !important;
  font-size: 13px !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  text-decoration-color: var(--bp-ink-300) !important;
  text-decoration-thickness: 1px !important;
  font-weight: 600 !important;
}
.provider-detail--r3 .provider-actions--floating .btn--secondary:hover {
  color: var(--bp-ink-900) !important;
  text-decoration-color: var(--bp-ink-700) !important;
}

/* P3-c — reviews-section inline style 토큰화 + editorial quote pull */
#reviews-section { padding: 0 !important; margin-top: 32px !important; }
#reviews-section h2 {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.022em !important;
  color: var(--bp-ink-900) !important;
  margin: 0 0 14px !important;
}
#reviews-list { gap: 12px !important; }
#reviews-list > div {
  background: var(--bp-bg) !important;
  border: 1px solid var(--bp-line) !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  position: relative;
}
#reviews-list > div::before {
  content: '\201C';
  position: absolute;
  top: 4px; right: 14px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 36px;
  line-height: 1;
  color: var(--bp-sunset);
  opacity: 0.22;
}
#reviews-list > div p {
  font-size: 14px !important;
  line-height: 1.6 !important;
  letter-spacing: -0.010em !important;
  color: var(--bp-ink-900) !important;
  margin: 0 0 10px !important;
  word-break: keep-all;
}
#reviews-list > div > div {
  font-size: 11.5px !important;
  color: var(--bp-ink-500) !important;
  letter-spacing: -0.005em !important;
}
#reviews-list > div a {
  color: var(--bp-ink-700) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--bp-ink-300) !important;
  text-underline-offset: 3px;
}

/* user-submitted-label — 사이트 톤 통일 (committed gold → restrained) */
.provider-detail--r3 .user-submitted-label {
  background: oklch(0.97 0.025 75) !important;
  border: 1px solid oklch(0.88 0.06 75) !important;
  color: oklch(0.40 0.13 75) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  font-size: 12.5px !important;
}
.provider-detail--r3 .user-submitted-label__icon {
  background: oklch(0.62 0.16 60) !important;
  width: 24px !important; height: 24px !important;
}
.provider-detail--r3 .user-submitted-label__title {
  font-size: 13px !important;
  color: oklch(0.35 0.13 75) !important;
}

/* photo-slider btn/counter 톤 정리 */
.photo-slider__counter {
  background: oklch(0.13 0.012 30 / 0.65) !important;
  color: oklch(1 0 0) !important;
  font-size: 11px !important;
  letter-spacing: 0.02em !important;
  font-weight: 600 !important;
  border-radius: 99px !important;
  padding: 4px 10px !important;
}
.photo-slider__dot {
  background: oklch(1 0 0 / 0.45) !important;
}
.photo-slider__dot.active {
  background: oklch(1 0 0) !important;
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .provider-detail--r3 .provider-actions--floating .btn {
    transition: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   BALIRATING v4 — Bali Sun Slider (컨셉 재설계)
   ----------------------------------------------------------------
   사용자: "나뭇잎 별점 컨셉 바꾸고 새롭게 만들어도됨, impeccable 적극"
   ----------------------------------------------------------------
   변경: 5 leaf SVG → horizontal track + sunset gradient fill + sun token
   - clip-path/mask fade 의 자연스럽지 못한 문제 자체 해결
   - 발리 일몰 정체성 (sun + sunset gradient) 유지
   - impeccable single-carry pattern (큰 carry score + 단일 slider)
   - 사이트 v3 톤 일관 (white bg + sunset-deep top accent)
   - 드래그/탭 자유 + 0.5 단위 snap
   ════════════════════════════════════════════════════════════════ */

/* v7.11 — box 자체 제거: page flow plain section (AI SaaS depth 패턴 해소).
   - bg/border/radius/shadow/dot pattern 모두 제거
   - 상단 1px ink-line divider 만 (다른 section 과 일관)
   - hero-metric template (큰 숫자 + 작은 라벨 + accent) 회피 */
.balirating-section {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-top: 1px solid var(--bp-line) !important;
  border-radius: 0 !important;
  color: var(--bp-ink-900) !important;
  padding: 24px 0 12px !important;
  margin: 28px 0 16px !important;
  box-shadow: none !important;
  position: relative;
  overflow: visible;
}
.balirating-section::before {
  display: none !important;
}

/* AVG — v7.11 hero-metric template 회피 (44 → 26, 절제) */
.balirating-section .balirating-avg {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  flex-wrap: wrap;
}
.balirating-section .balirating-avg__score {
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: -0.022em !important;
  line-height: 1 !important;
  color: var(--bp-ink-900) !important;
  font-variant-numeric: tabular-nums;
}
.balirating-section .balirating-avg__max {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--bp-ink-500) !important;
  letter-spacing: -0.005em !important;
}
.balirating-section .balirating-avg__count {
  font-size: 12px !important;
  color: var(--bp-ink-500) !important;
  margin-left: 6px !important;
  letter-spacing: -0.005em !important;
  font-weight: 500 !important;
}

/* TITLE — v7.11 accent bar 제거 (side-stripe ban 인접 회피) */
.balirating-section .balirating-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.018em !important;
  color: var(--bp-ink-900) !important;
  margin: 12px 0 14px !important;
  position: relative;
  z-index: 1;
  display: block;
}
/* v7.11: title accent bar 제거 (side-stripe ban 인접) */
.balirating-section .balirating-title::before { content: none; }

/* ─── Bali Sun Slider v4.3 — anti-slop polish ────────────────────
   사용자: "polish 너무 AI스러운 디자인 아닙니까?"
   ----------------------------------------------------------------
   제거된 decorative element (AI slop reflex):
   - Sun token always-on rotation (decorative motion)
   - 단계별 halo radial-gradient expand (over-engineered)
   - Drag 중 halo expand + multi-shadow stack
   - 5점 burst ring wave (gamification reflex)
   - Horizon ★ ornament (decorative-only)
   - Multi-shadow stack (saturate + contrast + 3 drop-shadow)
   ----------------------------------------------------------------
   유지: track + fill + token + carry score + 단순 drag hint.
   essence 만. typography 가 carry.
   ───────────────────────────────────────────────────────────── */


/* ════════════════════════════════════════════════════════════════
   BALIRATING v6 — 일반 ★ 별 5개 (drag + tap, 0.5 단위)
   ----------------------------------------------------------------
   사용자: "네모 박스보단 차라리 일반적인 별모양, 드래그 안되는건 이해 안돼"
   universal star pattern + drag/swipe 부활.
   ════════════════════════════════════════════════════════════════ */

.balirating-section .balirating-stars {
  display: flex !important;
  gap: 6px !important;
  margin: 14px 0 4px !important;
  padding: 6px 0 !important;
  user-select: none;
  touch-action: pan-y;
  cursor: pointer;
  width: fit-content;
}
.balirating-section .balirating-stars.is-dragging { cursor: grabbing; }

.balirating-section .bali-star {
  position: relative;
  width: 42px;
  height: 42px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.balirating-section .bali-star:hover,
.balirating-section .bali-star[data-fill="full"],
.balirating-section .bali-star[data-fill="half"] {
  transform: translateY(-1px);
}
.balirating-section .bali-star__base,
.balirating-section .bali-star__fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.balirating-section .bali-star__base {
  fill: oklch(0.93 0.018 60);          /* ink-line tinted */
  stroke: oklch(0.85 0.025 55);
  stroke-width: 1;
}
.balirating-section .bali-star__fill {
  fill: var(--bp-sunset-deep);
  stroke: oklch(0.42 0.18 35);
  stroke-width: 1;
  clip-path: inset(0 100% 0 0);
  filter: drop-shadow(0 1px 2px oklch(0.50 0.18 40 / 0.20));
  will-change: clip-path;
  transition: clip-path 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

/* drag 중 transition 짧게 (즉각 반응) */
.balirating-section .balirating-stars.is-dragging .bali-star__fill {
  transition: clip-path 0.06s linear;
}

/* viewport <380 — 별 사이즈 축소 */
@media (max-width: 380px) {
  .balirating-section .bali-star { width: 36px; height: 36px; }
  .balirating-section .balirating-stars { gap: 5px !important; }
}

/* focus ring */
.balirating-section .balirating-stars:focus-visible {
  outline: 2px solid var(--bp-sunset);
  outline-offset: 4px;
  border-radius: 8px;
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .balirating-section .bali-star,
  .balirating-section .bali-star__fill { transition: none !important; }
  .balirating-section .bali-star:hover,
  .balirating-section .bali-star[data-fill="full"],
  .balirating-section .bali-star[data-fill="half"] { transform: none !important; }
}

/* P3-b — card-meta hierarchy (primary name → secondary chip+region → tertiary rating+view) */
.card.card--photo, .card {
  background: var(--bp-bg) !important;
  border: 1px solid var(--bp-line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s ease !important;
}
.card:hover, .card.card--photo:hover {
  border-color: var(--bp-line-strong) !important;
  transform: translateY(-2px);
  box-shadow: none !important;
}
.card .card-body { padding: 12px 14px 14px !important; }
.card .card-name {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.018em !important;
  line-height: 1.32 !important;
  color: var(--bp-ink-900) !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card .card-meta {
  margin-top: 8px !important;
  font-size: 11.5px !important;
  color: var(--bp-ink-500) !important;
  gap: 6px !important;
  letter-spacing: -0.005em !important;
}
.card .chip-cat {
  padding: 3px 8px 3px 7px !important;
  font-size: 10.5px !important;
  border: 1px solid var(--bp-line) !important;
}
.card .chip-cat::before { width: 5px; height: 5px; }
.card .card-region { color: var(--bp-ink-500); }
.card .card-rating {
  color: var(--bp-sunset-deep) !important;
  font-weight: 700 !important;
  margin-left: auto;
}
.card .card-view-count {
  color: var(--bp-ink-300) !important;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.card .card-view-count svg { stroke-width: 1.7 !important; }

/* card-badge (PICK / 커뮤니티 추천) 톤 정리 */
.card-badge {
  background: var(--bp-ink-900) !important;
  color: var(--bp-ink-0) !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
  box-shadow: none !important;
  border: none !important;
}
.card-badge--is-trust {
  background: var(--bp-sunset-deep) !important;
}

/* results-count 통일 */
.results-section { padding: 0 16px; }
.results-count {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--bp-ink-500) !important;
  letter-spacing: -0.005em !important;
  margin: 8px 0 16px !important;
}

/* prefers-reduced-motion 존중 */
@media (prefers-reduced-motion: reduce) {
  .card, .card.card--featured, .r-chip, .bp-page-head__icon-btn {
    transition: none !important;
  }
  .card:hover, .card.card--featured:hover {
    transform: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   PICK 상세 v3 — Impeccable 정정 (header / cards / 댓글 / privacy)
   ----------------------------------------------------------------
   사용자: "픽 상세 페이지 개선, impeccable 검토 및 개선"
   balirating 위젯은 별도 사이클로 보류 (사용자 결정).
   ════════════════════════════════════════════════════════════════ */

/* P1 v4.1 — Pick header editorial: style.css .trip-header drenched 제거 */
.trip-header.pick-header--editorial,
.pick-header--editorial {
  background: transparent !important;
  color: var(--bp-ink-900) !important;
  border-radius: 0 !important;
  border: none !important;
  padding: 4px 0 0 !important;
  margin: 8px 0 28px !important;
  overflow: visible !important;
  max-width: 720px;
}
.pick-header--editorial::after,
.trip-header.pick-header--editorial::after {
  display: none !important;
}
.pick-header--editorial h1,
.trip-header.pick-header--editorial h1 {
  color: var(--bp-ink-900) !important;
  text-shadow: none !important;
}
.pick-header--editorial p,
.trip-header.pick-header--editorial p {
  color: inherit !important;
}
.pick-header__eyebrow {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: none !important;
  color: var(--bp-sunset-deep) !important;
  margin: 0 0 12px !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
}
.pick-header__eyebrow::before {
  content: '';
  flex: 0 0 24px;
  height: 1px;
  background: var(--bp-sunset-deep);
  opacity: 0.45;
}
.pick-header--editorial .pick-header__title {
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: -0.034em !important;
  line-height: 1.18 !important;
  color: var(--bp-ink-900) !important;
  margin: 0 0 16px !important;
  word-break: keep-all;
}
.pick-header__lead {
  margin: 0 0 18px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.62 !important;
  letter-spacing: -0.012em !important;
  color: var(--bp-ink-700) !important;
  word-break: keep-all;
  max-width: 65ch;
}
.pick-header__byline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  color: var(--bp-ink-500) !important;
  padding: 10px 0 0 !important;
  border-top: 1px solid var(--bp-line);
}
.pick-header__byline-main {
  font-weight: 700 !important;
  color: var(--bp-ink-900) !important;
}
.pick-header__byline-sep { color: var(--bp-ink-300); margin: 0 2px; }
.pick-header__views {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.pick-header__views svg { color: var(--bp-ink-300); }

@media (max-width: 380px) {
  .pick-header--editorial .pick-header__title { font-size: 26px !important; }
  .pick-header__lead { font-size: 15px !important; }
}

/* Actions 비대칭 — primary 단일 + secondary outline + ghost link */
.pick-header__actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-top: 18px !important;
}
.pick-header__actions .btn,
.pick-header__actions .pick-action--share,
.pick-header__actions .pick-action--secondary,
.pick-header__actions .pick-action--danger,
.pick-header__actions .pick-action--ghost {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.010em !important;
  padding: 10px 18px !important;
  border: none;
  box-shadow: none !important;
  text-decoration: none;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.pick-header__actions .btn:active { transform: scale(0.97); }

.pick-action--share {
  background: var(--bp-ink-900) !important;
  color: var(--bp-ink-0) !important;
}
.pick-action--secondary {
  background: transparent !important;
  color: var(--bp-ink-700) !important;
  border: 1px solid var(--bp-line) !important;
}
.pick-action--secondary:hover {
  border-color: var(--bp-line-strong) !important;
  background: var(--bp-bg) !important;
}
.pick-action--danger {
  background: transparent !important;
  color: oklch(0.50 0.18 25) !important;
  border: 1px solid oklch(0.86 0.08 25) !important;
}
.pick-action--danger:hover {
  background: oklch(0.50 0.18 25) !important;
  color: var(--bp-ink-0) !important;
}
.pick-action--ghost {
  background: transparent !important;
  color: var(--bp-ink-700) !important;
  padding: 10px 4px !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  text-decoration-thickness: 1px !important;
  text-decoration-color: var(--bp-ink-300) !important;
}
.pick-action--ghost:hover {
  color: var(--bp-ink-900) !important;
  text-decoration-color: var(--bp-ink-700) !important;
}
.pick-action--inline-form { display: inline-flex; }

/* P2 v4 — Numbered editorial itinerary list (card-grid 대체)
   editorial article 의 numbered enumeration 패턴.
   각 item: large numeral + visual + content stack. */
.pick-itinerary {
  list-style: none !important;
  margin: 24px 0 28px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  counter-reset: pick-item;
  max-width: 720px;
}
.pick-itinerary__item {
  border-top: 1px solid var(--bp-line);
  padding: 22px 0;
}
.pick-itinerary__item:last-child {
  border-bottom: 1px solid var(--bp-line);
}
.pick-itinerary__link {
  display: grid !important;
  grid-template-columns: 56px 140px 1fr;
  gap: 18px;
  text-decoration: none !important;
  color: inherit !important;
  align-items: start;
  transition: background 0.22s ease;
  padding: 4px 6px;
  border-radius: 8px;
}
.pick-itinerary__link:hover {
  background: oklch(0.985 0.008 60) !important;
  color: inherit !important;
}
.pick-itinerary__num {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.020em;
  line-height: 1;
  color: var(--bp-sunset-deep);
  padding-top: 6px;
  font-variant-numeric: tabular-nums;
}
.pick-itinerary__visual {
  width: 140px;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bp-bg);
  border: 1px solid var(--bp-line);
  position: relative;
}
.pick-itinerary__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pick-itinerary__badge {
  position: absolute;
  top: 8px; left: 8px;
  background: var(--bp-ink-900);
  color: var(--bp-ink-0);
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.pick-itinerary__badge--is-trust {
  background: var(--bp-sunset-deep);
}
.pick-itinerary__body {
  min-width: 0;
  padding-top: 4px;
}
.pick-itinerary__name {
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -0.022em !important;
  line-height: 1.30 !important;
  color: var(--bp-ink-900) !important;
  margin: 0 0 6px !important;
  word-break: keep-all;
}
.pick-itinerary__meta {
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  color: var(--bp-ink-500) !important;
}
.pick-itinerary__meta-sep { color: var(--bp-ink-300); margin: 0 5px; }
.pick-itinerary__user-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: oklch(0.40 0.13 75);
  padding: 1px 6px;
  background: oklch(0.96 0.04 75);
  border-radius: 3px;
}
.pick-itinerary__note {
  margin: 12px 0 0 !important;
  padding: 0 0 0 22px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  letter-spacing: -0.010em !important;
  color: var(--bp-ink-700) !important;
  font-style: normal !important;
  word-break: keep-all;
  position: relative;
  border: none !important;
}
.pick-itinerary__note::before {
  content: '\201C';
  position: absolute;
  top: -8px; left: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 32px;
  line-height: 1;
  color: var(--bp-sunset);
  opacity: 0.55;
}

/* viewport <480 — visual 단일 row + 비율 축소 */
@media (max-width: 480px) {
  .pick-itinerary__item { padding: 18px 0 !important; }
  .pick-itinerary__link {
    grid-template-columns: 36px 1fr !important;
    gap: 12px !important;
    padding: 0 !important;
  }
  .pick-itinerary__num {
    font-size: 18px !important;
    padding-top: 2px !important;
    letter-spacing: -0.014em !important;
  }
  .pick-itinerary__visual {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    margin-top: 10px !important;
    border-radius: 8px !important;
  }
  .pick-itinerary__body {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  .pick-itinerary__name { font-size: 16px !important; }
  .pick-itinerary__meta { font-size: 11.5px !important; }
  .pick-itinerary__note {
    margin-top: 10px !important;
    padding-left: 20px !important;
    font-size: 13px !important;
  }
  .pick-itinerary__note::before { font-size: 26px !important; top: -6px !important; }
}

/* P2-a — pick item user tag (chip 어휘 통일, 구버전 카드 호환) */
.pick-item__user-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 2px 7px 2px 6px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: oklch(0.40 0.13 75);
  background: oklch(0.96 0.04 75);
  border: 1px solid oklch(0.88 0.06 75);
  border-radius: 4px;
}
.pick-item__user-tag::before {
  content: '';
  width: 4px; height: 4px; border-radius: 50%;
  background: oklch(0.55 0.16 70);
}

/* P2-b — pick item note (side-stripe absolute ban 해소 → editorial quote) */
.pick-item__note {
  margin: 10px 0 0 !important;
  padding: 12px 14px 10px 16px !important;
  background: var(--bp-bg) !important;
  border: 1px solid var(--bp-line) !important;
  border-left: 1px solid var(--bp-line) !important;     /* side-stripe 명시적 제거 */
  border-radius: 8px !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  letter-spacing: -0.008em !important;
  color: var(--bp-ink-700) !important;
  font-style: normal !important;
  position: relative;
  word-break: keep-all;
}
.pick-item__note::before {
  content: '\201C';
  position: absolute;
  top: -2px; left: 4px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  line-height: 1;
  color: var(--bp-sunset);
  opacity: 0.40;
}
.pick-item__note { padding-left: 24px !important; }

/* P3-a — 댓글 섹션 토큰화 */
.pick-comments {
  margin-top: 32px !important;
}
.pick-comments__title {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.022em !important;
  color: var(--bp-ink-900) !important;
  margin: 0 0 14px !important;
}
.pick-comments__count {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--bp-ink-500) !important;
  margin-left: 6px !important;
}

/* comment-item 톤 통일 (이미 있는 클래스 사용) */
.pick-comments .comment-item {
  background: var(--bp-bg) !important;
  border: 1px solid var(--bp-line) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
}
.pick-comments .comment-item__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.pick-comments .comment-item__nick {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--bp-ink-700) !important;
  letter-spacing: -0.008em !important;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.pick-comments .comment-item__date {
  font-size: 11px !important;
  color: var(--bp-ink-300) !important;
  letter-spacing: -0.005em !important;
  font-weight: 500 !important;
}
.pick-comments .comment-item__content {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  letter-spacing: -0.010em !important;
  color: var(--bp-ink-900) !important;
  margin: 0 !important;
  word-break: keep-all;
}
.pick-comments #comments-empty {
  color: var(--bp-ink-500) !important;
  font-size: 13px !important;
  letter-spacing: -0.005em !important;
  padding: 16px 0 !important;
}

/* comment-form 톤 통일 */
.pick-comments .comment-form-wrap { margin-bottom: 8px; }
.pick-comments .comment-form input.filter-input,
.pick-comments .comment-form .comment-textarea {
  font-size: 13.5px !important;
  letter-spacing: -0.008em !important;
  border: 1px solid var(--bp-line) !important;
  border-radius: 8px !important;
  background: var(--bp-bg) !important;
  color: var(--bp-ink-900) !important;
}
.pick-comments .comment-form input.filter-input:focus,
.pick-comments .comment-form .comment-textarea:focus {
  border-color: var(--bp-ink-700) !important;
  outline: none !important;
}
.pick-comments #comment-submit {
  background: var(--bp-ink-900) !important;
  color: var(--bp-ink-0) !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 10px 18px !important;
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .pick-header__actions .btn { transition: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   HOME ANIMATE v6.1 — 의도 있는 motion 3개
   ----------------------------------------------------------------
   1. Scroll-driven reveal: bp-discover / bp-picks / meetup-strip
      카드가 viewport 진입 시 fade-up (transform/opacity only).
   2. Hero dot pulse: title 끝 sunset dot 6s ease-in-out 호흡감.
   3. Featured/row hover: thumb image transform scale (layout 안 건드림).
   - ease-out-quart only, prefers-reduced-motion 존중
   ════════════════════════════════════════════════════════════════ */

/* 1. Scroll-driven reveal — v6.7 transition → @keyframes animation 전환
   cascade 영향 0, fill-mode both 로 정확 종료 state 적용. */
@keyframes bp-reveal-up {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.bp-featured,
.bp-row,
.bp-picks__pull,
.bp-picks__list-item,
.curated-section .mu-strip-card,
.curated-section .r-sec-head {
  opacity: 0;     /* 진입 전 hidden */
}
.bp-featured.is-revealed,
.bp-row.is-revealed,
.bp-picks__pull.is-revealed,
.bp-picks__list-item.is-revealed,
.curated-section .mu-strip-card.is-revealed,
.curated-section .r-sec-head.is-revealed {
  animation: bp-reveal-up 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.bp-featured.is-revealed.is-settled,
.bp-row.is-revealed.is-settled,
.bp-picks__pull.is-revealed.is-settled,
.bp-picks__list-item.is-revealed.is-settled,
.curated-section .mu-strip-card.is-revealed.is-settled,
.curated-section .r-sec-head.is-revealed.is-settled {
  will-change: auto;
}
/* stagger — animation-delay (v6.7) */
.bp-rows .bp-row.is-revealed:nth-child(1)  { animation-delay: 0.05s; }
.bp-rows .bp-row.is-revealed:nth-child(2)  { animation-delay: 0.10s; }
.bp-rows .bp-row.is-revealed:nth-child(3)  { animation-delay: 0.15s; }
.bp-rows .bp-row.is-revealed:nth-child(4)  { animation-delay: 0.20s; }
.bp-rows .bp-row.is-revealed:nth-child(5)  { animation-delay: 0.25s; }
.bp-picks__list .bp-picks__list-item.is-revealed:nth-child(1) { animation-delay: 0.05s; }
.bp-picks__list .bp-picks__list-item.is-revealed:nth-child(2) { animation-delay: 0.10s; }
.bp-picks__list .bp-picks__list-item.is-revealed:nth-child(3) { animation-delay: 0.15s; }
.bp-picks__list .bp-picks__list-item.is-revealed:nth-child(4) { animation-delay: 0.20s; }

/* 2. Hero title dot pulse — subtle 호흡감 */
@keyframes bp-hero-dot-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.90; }
  50%      { transform: scale(1.15); opacity: 1.00; }
}
.r-hero--bp .r-hero__title::after {
  animation: bp-hero-dot-pulse 6s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: center;
}

/* 3. Featured / bp-row thumb hover scale — transform only */
.bp-featured__hero {
  transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transform-origin: center;
  will-change: transform;
}
@media (hover: hover) {
  .bp-featured:hover .bp-featured__hero {
    transform: scale(1.035);
  }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .bp-featured,
  .bp-row,
  .bp-picks__pull,
  .bp-picks__list-item,
  .curated-section .mu-strip-card,
  .curated-section .r-sec-head {
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
  }
  .r-hero--bp .r-hero__title::after { animation: none !important; }
  .bp-featured__hero { transition: none !important; }
  .bp-featured:hover .bp-featured__hero { transform: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   SPOTS ANIMATE v6.2 — scroll reveal + card thumb hover
   ----------------------------------------------------------------
   /spots 카드 grid 진입 motion. 무한 스크롤 새 카드도 동일 reveal.
   ════════════════════════════════════════════════════════════════ */

/* card-grid + header + chip — v6.7 animation 전환 (cascade 영향 0) */
@keyframes bp-reveal-up-sm {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
/* v7.5: chip reveal 도 제거 — viewport top + 8개 stagger 동시 종료 시
   GPU 충돌로 튕김. card-grid 카드만 scroll-driven reveal 유지. */
.card-grid .card {
  opacity: 0;
}
.card-grid .card.is-revealed {
  animation: bp-reveal-up-sm 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.card-grid .card.is-revealed.is-settled {
  will-change: auto;
}

/* v7.5: chip stagger 제거 (chip reveal 자체 제거됨) */

/* v7.4: header sub delay 제거 (header reveal 자체 제거됨) */

/* card thumb hover scale — transform only (layout 안 건드림) */
.card .card-thumb {
  overflow: hidden;
}
.card .card-thumb img {
  transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  transform-origin: center;
}
@media (hover: hover) {
  .card:hover .card-thumb img {
    transform: scale(1.04);
  }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .card-grid .card,
  .bp-page-head--spots .bp-page-head__row,
  .bp-page-head--spots .bp-page-head__sub,
  .r-cats .r-chip {
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
  }
  .card .card-thumb img { transition: none !important; }
  .card:hover .card-thumb img { transform: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   PICKS ANIMATE v6.4 — hero stagger (card grid 는 spots v6.3 자동 적용)
   ════════════════════════════════════════════════════════════════ */

/* v7.4: picks-hero reveal 제거 (viewport top 튕김 회피). 즉시 visible. */

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .picks-hero__title,
  .picks-hero__sub,
  .picks-hero__cta {
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   MY v3 — /pick/my (mypick) — header 토큰화 + actions 비대칭 + paging
   ════════════════════════════════════════════════════════════════ */

.bp-page-head--my {
  position: static !important;
  padding: 20px 0 14px !important;
}
.bp-page-head--my .bp-page-head__action {
  background: var(--bp-ink-900) !important;
  color: var(--bp-ink-0) !important;
  box-shadow: none !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  letter-spacing: -0.010em !important;
}
.bp-page-head--my .bp-page-head__sub {
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: -0.005em !important;
  color: var(--bp-ink-500) !important;
  text-transform: none !important;
  margin-top: 6px;
  word-break: keep-all;
}

/* mypick card wrap — card + actions stacked */
.mypick-card-wrap {
  display: flex;
  flex-direction: column;
}
.mypick-card-wrap .card {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom: none !important;
}

/* mypick actions v6.9 — 균등 4-col + 수정 underline accent + 톤 통합 (시각 절제) */
.mypick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--bp-bg);
  border: 1px solid var(--bp-line);
  border-top: none;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  overflow: hidden;
}
.mypick-actions > *,
.mypick-actions form > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 4px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.008em;
  background: transparent;
  color: var(--bp-ink-700);
  border: none;
  border-right: 1px solid var(--bp-line);
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}
.mypick-actions > *:last-child,
.mypick-actions form:last-child > button {
  border-right: none;
}
.mypick-actions form {
  margin: 0;
  padding: 0;
  display: contents;
}
.mypick-actions > *:hover,
.mypick-actions form > button:hover {
  background: oklch(0.985 0.008 60);
  color: var(--bp-ink-900);
}
/* 수정 = primary — solid 대신 underline accent (시각 절제) */
.mypick-actions__primary {
  color: var(--bp-ink-900) !important;
  font-weight: 700 !important;
  position: relative;
}
.mypick-actions__primary::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  width: 16px;
  height: 1.5px;
  background: var(--bp-sunset-deep);
  border-radius: 2px;
}
.mypick-actions__sec {
  color: var(--bp-ink-700) !important;
}
/* 삭제 — 빨강 톤 약화 (carry 시 너무 강한 attention) */
.mypick-actions__danger {
  color: var(--bp-ink-500) !important;
}
.mypick-actions__danger:hover {
  background: oklch(0.97 0.045 25) !important;
  color: oklch(0.45 0.18 25) !important;
}

/* private badge — bp-chip 어휘 */
.mypick-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 2px 7px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 4px;
  vertical-align: 2px;
}
.mypick-badge--private {
  background: oklch(0.96 0.04 75);
  color: oklch(0.40 0.13 75);
  border: 1px solid oklch(0.88 0.06 75);
}
.mypick-badge--private::before {
  content: '';
  width: 4px; height: 4px; border-radius: 50%;
  background: oklch(0.55 0.16 70);
}

/* bp-paging — 사이트 paging 패턴 (my/picks 공유) */
.bp-paging {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin: 28px 0 8px;
  padding: 0;
  font-size: 12.5px;
  letter-spacing: -0.005em;
}
.bp-paging__nav {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--bp-line);
  color: var(--bp-ink-700);
  font-weight: 600;
  text-decoration: none;
  background: var(--bp-bg);
  transition: border-color 0.18s ease, background 0.18s ease;
}
.bp-paging__nav:hover {
  border-color: var(--bp-line-strong);
  background: oklch(0.985 0.008 60);
  color: var(--bp-ink-900);
}
.bp-paging__nav--disabled {
  color: var(--bp-ink-300);
  background: transparent;
  border-color: transparent;
  cursor: default;
}
.bp-paging__counter {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--bp-ink-500);
}

/* viewport <380 */
@media (max-width: 380px) {
  .mypick-actions > *,
  .mypick-actions form > button {
    font-size: 12px;
    padding: 11px 3px;
  }
  .mypick-actions__primary::after { width: 14px; bottom: 5px; }
  .bp-paging { gap: 12px; }
  .bp-paging__nav { padding: 7px 11px; font-size: 12px; }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .mypick-actions > *,
  .mypick-actions form > button,
  .bp-paging__nav {
    transition: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   SUBMIT v3 — /submit (스팟 등록) 사이트 톤 통일
   ----------------------------------------------------------------
   inline style 폭주 + blue/orange dashed 알림 (사이트 톤 분리) 해소.
   bp-form / bp-alert / bp-form-notice / bp-form-candidates / bp-form-hint /
   bp-form-agree / bp-form-actions / bp-form-candidate 토큰화.
   ════════════════════════════════════════════════════════════════ */

/* page-head submit */
.bp-page-head--submit { position: static !important; padding: 20px 0 12px !important; }
.bp-page-head--submit .bp-page-head__sub {
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: -0.005em !important;
  color: var(--bp-ink-500) !important;
  text-transform: none !important;
  margin-top: 4px;
  line-height: 1.55;
  word-break: keep-all;
}
.bp-page-head--submit .bp-page-head__sub strong {
  color: var(--bp-ink-900);
  font-weight: 700;
}
.bp-page-head__link {
  color: var(--bp-ink-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--bp-ink-300);
  font-weight: 500;
}
.bp-page-head__link:hover {
  color: var(--bp-ink-900);
  text-decoration-color: var(--bp-ink-700);
}

/* form 컨테이너 */
.bp-form {
  max-width: 680px;
  margin: 0 auto;
}

/* alert (error) */
.bp-alert {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--bp-line);
  background: var(--bp-bg);
  font-size: 13px;
  letter-spacing: -0.008em;
  line-height: 1.55;
}
.bp-alert--error {
  border-color: oklch(0.86 0.08 25);
  background: oklch(0.97 0.04 25);
  color: oklch(0.40 0.18 25);
}

/* form-notice — mapped (기존 등록 사용 중) */
.bp-form-notice {
  margin: 0 0 16px;
  padding: 14px 16px;
  background: var(--bp-bg);
  border: 1px solid var(--bp-line);
  border-radius: 12px;
  position: relative;
}
.bp-form-notice--mapped {
  background: oklch(0.985 0.012 60);
  border-color: var(--bp-line);
  border-left: 3px solid var(--bp-sunset-deep);   /* 의도된 carry accent (1px 외 side-stripe 예외) */
}
.bp-form-notice__title {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bp-sunset-deep);
  margin-bottom: 4px;
}
.bp-form-notice__name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--bp-ink-900);
  margin-bottom: 12px;
  word-break: keep-all;
}
.bp-form-notice__memo { margin-bottom: 10px; }
.bp-form-notice__memo label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--bp-ink-700);
}
.bp-form-notice__memo label small {
  font-weight: 400;
  color: var(--bp-ink-500);
}
.bp-form-notice__memo textarea {
  resize: vertical;
}
.bp-form-notice__unmap {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--bp-line);
  border-radius: 8px;
  color: var(--bp-ink-700);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.bp-form-notice__unmap:hover {
  border-color: var(--bp-line-strong);
  background: var(--bp-bg);
}
.bp-form-notice__hint {
  margin: 8px 0 0;
  font-size: 11.5px;
  color: var(--bp-ink-500);
  letter-spacing: -0.005em;
}

/* form-candidates — 매핑 후보 (이전: dashed orange) */
.bp-form-candidates {
  margin: -6px 0 14px;
  padding: 12px 14px;
  background: oklch(0.985 0.012 60);
  border: 1px solid var(--bp-line);
  border-radius: 10px;
}
.bp-form-candidates__title {
  margin-bottom: 10px;
  font-size: 12.5px;
  letter-spacing: -0.005em;
  color: var(--bp-ink-700);
  word-break: keep-all;
}
.bp-form-candidates__title strong {
  color: var(--bp-ink-900);
  font-weight: 700;
  margin-right: 4px;
}
.bp-form-candidates__title span {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--bp-ink-500);
  font-weight: 400;
}
.bp-form-candidates__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bp-form-candidates__hint {
  margin: 10px 0 0;
  font-size: 11px;
  color: var(--bp-ink-500);
  letter-spacing: -0.005em;
}

/* form-candidate (개별 버튼) */
.bp-form-candidate {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: var(--bp-bg);
  border: 1px solid var(--bp-line);
  border-radius: 8px;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.bp-form-candidate:hover {
  border-color: var(--bp-line-strong);
  background: oklch(0.985 0.012 60);
}
.bp-form-candidate__body {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.bp-form-candidate__name {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--bp-ink-900);
}
.bp-form-candidate__meta {
  font-size: 11.5px;
  color: var(--bp-ink-500);
  letter-spacing: -0.005em;
}
.bp-form-candidate__cta {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--bp-sunset-deep);
  letter-spacing: -0.005em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* form-hint (small) */
.bp-form-hint {
  font-size: 11.5px;
  color: var(--bp-ink-500);
  letter-spacing: -0.005em;
}
.bp-form-hint--block {
  display: block;
  margin-top: 4px;
}
.bp-form-hint strong {
  color: var(--bp-ink-900);
  font-weight: 700;
}

/* form-agree (checkbox) */
.bp-form-agree__label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400 !important;
  font-size: 12.5px;
  letter-spacing: -0.008em;
  color: var(--bp-ink-700);
  line-height: 1.55;
  cursor: pointer;
  word-break: keep-all;
}
.bp-form-agree__label input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 2px;
  width: 16px; height: 16px;
  cursor: pointer;
  accent-color: var(--bp-sunset-deep);
}

/* form-actions 비대칭 (제보 등록 primary + 취소 ghost) */
.bp-form-actions {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-top: 20px !important;
  padding-top: 16px;
  border-top: 1px solid var(--bp-line);
}
.bp-form-actions__submit {
  background: var(--bp-ink-900) !important;
  color: var(--bp-ink-0) !important;
  border: none !important;
  border-radius: 11px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.012em !important;
  padding: 13px 24px !important;
  box-shadow: none !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.bp-form-actions__submit:active { transform: scale(0.97); }
.bp-form-actions__cancel {
  color: var(--bp-ink-500) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  text-decoration-thickness: 1px !important;
  text-decoration-color: var(--bp-ink-300) !important;
  background: transparent !important;
  border: none !important;
  padding: 8px 0 !important;
}
.bp-form-actions__cancel:hover {
  color: var(--bp-ink-900) !important;
  text-decoration-color: var(--bp-ink-700) !important;
}

/* viewport <380 */
@media (max-width: 380px) {
  .bp-form-actions { gap: 12px !important; }
  .bp-form-actions__submit { padding: 12px 20px !important; font-size: 14px !important; }
  .bp-form-notice { padding: 12px 14px; }
  .bp-form-candidates { padding: 10px 12px; }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .bp-form-actions__submit,
  .bp-form-candidate { transition: none !important; }
  .bp-form-actions__submit:active { transform: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   FORMS v7.6 — pick/new + submit/batch row template 토큰화
   ----------------------------------------------------------------
   inline grid/checkbox/small/preview cssText → bp-form-* 클래스
   ════════════════════════════════════════════════════════════════ */

/* 2-col grid (카테고리 + 지역) */
.bp-form-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 380px) {
  .bp-form-row-2col { grid-template-columns: 1fr; gap: 8px; }
}

/* checkbox list (가능 언어) */
.bp-form-checkbox-list {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.bp-form-checkbox-list__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: -0.008em;
  color: var(--bp-ink-700);
  cursor: pointer;
}
.bp-form-checkbox-list__item input[type="checkbox"] {
  accent-color: var(--bp-sunset-deep);
  width: 15px; height: 15px;
  cursor: pointer;
}

/* label (선택) opt 톤 */
.bp-form-label-opt {
  font-weight: 400;
  font-size: 12px;
  color: var(--bp-ink-500);
  letter-spacing: -0.005em;
  margin-left: 4px;
}

/* photo preview list 컨테이너 */
.bp-form-photo-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

/* photo thumb (preview item) */
.bp-photo-thumb {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bp-bg);
  border: 1px solid var(--bp-line);
  flex-shrink: 0;
}
.bp-photo-thumb__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bp-photo-thumb__status {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: oklch(0.13 0.012 30 / 0.62);
  color: var(--bp-ink-0);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 3px 4px;
  line-height: 1.3;
}
.bp-photo-thumb__remove {
  position: absolute;
  top: 4px; right: 4px;
  width: 20px; height: 20px;
  background: oklch(0.13 0.012 30 / 0.62);
  color: var(--bp-ink-0);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 11px;
  line-height: 20px;
  text-align: center;
  padding: 0;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.18s ease;
}
.bp-photo-thumb__remove:hover {
  background: oklch(0.20 0.014 30 / 0.85);
}

/* add-slot 버튼 (스팟 추가) — 사이트 톤 */
.add-slot {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 14px 18px !important;
  background: var(--bp-bg) !important;
  border: 1.5px dashed var(--bp-line-strong) !important;
  border-radius: 12px !important;
  color: var(--bp-ink-700) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.008em !important;
  cursor: pointer !important;
  font-family: inherit !important;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.add-slot:hover {
  border-color: var(--bp-ink-700) !important;
  background: oklch(0.985 0.008 60) !important;
  color: var(--bp-ink-900) !important;
}
.add-slot span small,
.add-slot > span {
  font-size: 11.5px;
  color: var(--bp-ink-500);
  font-weight: 500;
}

/* slot (트립 row) — 사이트 카드 톤 */
.slot.trip-row {
  background: var(--bp-bg);
  border: 1px solid var(--bp-line);
  border-radius: 14px;
  padding: 16px 16px 14px;
  margin-bottom: 12px;
}
.slot__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 12px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bp-ink-500);
}
.slot__head .iconbtn,
.iconbtn--sm.btn-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  background: transparent;
  border: 1px solid var(--bp-line);
  border-radius: 50%;
  color: var(--bp-ink-500);
  cursor: pointer;
  font-size: 11px;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.slot__head .iconbtn:hover {
  border-color: oklch(0.50 0.18 25);
  color: oklch(0.50 0.18 25);
}

/* create__h (로컬 스팟 섹션 title) */
.create__h {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--bp-ink-900);
  margin: 24px 0 12px;
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .add-slot,
  .slot__head .iconbtn,
  .bp-photo-thumb__remove { transition: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   BP-PAGE-STICKY v7.7 — fixed bottom CTA bar (page-level)
   ----------------------------------------------------------------
   pick 상세 등 모바일 viewport bottom 단일 primary + 옵션 ghost.
   spot 상세의 .provider-actions--floating 과 다른 selector (page-level).
   ════════════════════════════════════════════════════════════════ */

.bp-page-sticky {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--bp-bg);
  border-top: 1px solid var(--bp-line);
  box-shadow: 0 -4px 16px oklch(0.45 0.18 40 / 0.06);
  pointer-events: auto;
}
.bp-page-sticky__primary {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 18px;
  background: var(--bp-ink-900);
  color: var(--bp-ink-0);
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.012em;
  text-decoration: none;
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.bp-page-sticky__primary:hover { color: var(--bp-ink-0); }
.bp-page-sticky__primary:active { transform: scale(0.98); }
.bp-page-sticky__ghost {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 16px;
  background: transparent;
  color: var(--bp-ink-700);
  border: 1px solid var(--bp-line);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.bp-page-sticky__ghost:hover {
  border-color: var(--bp-line-strong);
  background: oklch(0.985 0.008 60);
  color: var(--bp-ink-900);
}

/* body bottom padding 보상 (sticky bar 가 본문 가림 회피) */
body:has(.bp-page-sticky) {
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

/* viewport <380 */
@media (max-width: 380px) {
  .bp-page-sticky { padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .bp-page-sticky__primary { padding: 12px 16px; font-size: 13.5px; }
  .bp-page-sticky__ghost { padding: 12px 14px; font-size: 12.5px; }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .bp-page-sticky__primary,
  .bp-page-sticky__ghost { transition: none !important; }
  .bp-page-sticky__primary:active { transform: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   SKELETON v7.8 — card skeleton (shimmer) + loader spinner
   ════════════════════════════════════════════════════════════════ */

/* shimmer keyframes — translate3d X 좌→우 sweep */
@keyframes bp-skeleton-shimmer {
  from { transform: translate3d(-100%, 0, 0); }
  to   { transform: translate3d(100%, 0, 0); }
}

/* card skeleton — 사이트 카드 톤 (bp-bg + ink-line) */
.bp-card-skeleton {
  background: var(--bp-bg);
  border: 1px solid var(--bp-line);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
.bp-card-skeleton__thumb,
.bp-card-skeleton__line {
  position: relative;
  background: oklch(0.94 0.014 55);
  overflow: hidden;
}
.bp-card-skeleton__thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
}
.bp-card-skeleton__body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bp-card-skeleton__line {
  height: 12px;
  border-radius: 4px;
}
.bp-card-skeleton__line--title {
  height: 14px;
  width: 70%;
}
.bp-card-skeleton__line--meta {
  height: 10px;
  width: 50%;
}

/* shimmer overlay (3 element 모두) */
.bp-card-skeleton__thumb::after,
.bp-card-skeleton__line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    oklch(1 0 0 / 0.55) 50%,
    transparent 100%
  );
  animation: bp-skeleton-shimmer 1.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  will-change: transform;
}

/* loader (spinner + text) — 사이트 ink 톤 */
.bp-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 0 28px;
  color: var(--bp-ink-500);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.bp-loader__dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.bp-loader__dots span {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--bp-sunset-deep);
  opacity: 0.35;
  animation: bp-loader-pulse 1.2s ease-in-out infinite;
}
.bp-loader__dots span:nth-child(2) { animation-delay: 0.15s; }
.bp-loader__dots span:nth-child(3) { animation-delay: 0.30s; }
@keyframes bp-loader-pulse {
  0%, 80%, 100% { opacity: 0.35; transform: scale(1); }
  40%           { opacity: 1.00; transform: scale(1.25); }
}

/* prefers-reduced-motion — shimmer/spinner 정지 */
@media (prefers-reduced-motion: reduce) {
  .bp-card-skeleton__thumb::after,
  .bp-card-skeleton__line::after { animation: none !important; opacity: 0; }
  .bp-loader__dots span { animation: none !important; opacity: 0.6; transform: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   SHARE v7.9 — /pick/{slug}/share 사이트 톤 통일
   ════════════════════════════════════════════════════════════════ */

.bp-share {
  max-width: 720px;
  margin: 20px auto;
}
.bp-page-head--share {
  position: static !important;
  padding: 16px 0 12px !important;
}
.bp-page-head--share .bp-page-head__sub {
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: -0.005em !important;
  color: var(--bp-ink-500) !important;
  text-transform: none !important;
  margin-top: 10px;
  word-break: keep-all;
}

/* mini-preview thumb (h1 좌측) + meta — pick 식별 시각 단서 */
.bp-share__head-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.bp-share__head-thumb {
  width: 56px; height: 56px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--bp-ink-100) center/cover no-repeat;
  border: 1px solid var(--bp-line);
}
.bp-share__head-thumb--empty {
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at top left,
      oklch(0.97 0.05 60) 0%,
      oklch(0.99 0.012 60) 80%);
}
.bp-share__head-thumb--empty span {
  font-size: 22px; font-weight: 800;
  color: var(--bp-sunset-deep);
  letter-spacing: -0.02em;
}
.bp-share__head-text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  gap: 3px;
}
.bp-share__head-meta {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--bp-ink-500);
  font-family: ui-monospace, "SF Mono", monospace;
}

/* group section (링크 / 공유 텍스트) */
.bp-share__group {
  margin: 0 0 18px;
  padding: 14px 16px;
  background: var(--bp-bg);
  border: 1px solid var(--bp-line);
  border-radius: 12px;
}
.bp-share__group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.bp-share__group-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--bp-ink-500);
  flex-shrink: 0;
  margin-right: auto;  /* 라벨 좌측 / copy 버튼 + toast 우측 정렬 */
}

/* URL display (code) */
.bp-share__url {
  display: block;
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 12.5px;
  letter-spacing: -0.005em;
  color: var(--bp-ink-900);
  background: oklch(0.985 0.012 60);
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--bp-line);
  overflow-wrap: anywhere;
  word-break: break-all;
}

/* 공유 텍스트 textarea — readonly preview, 모바일 화면 절반 차지 회피.
 * polish: 280→200, 모바일 240→180 */
.bp-share__text {
  width: 100%;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 13px;
  letter-spacing: -0.008em;
  line-height: 1.6;
  padding: 12px 14px;
  background: var(--bp-bg);
  color: var(--bp-ink-900);
  border: 1px solid var(--bp-line);
  border-radius: 8px;
  resize: vertical;
  min-height: 200px;
  cursor: pointer;       /* tap-to-select 단서 */
}
.bp-share__text:focus {
  border-color: var(--bp-sunset-deep);
  outline: none;
  box-shadow: 0 0 0 3px oklch(0.78 0.18 50 / 0.16);
}

/* copy 버튼 — peach 사이트 standard primary tone (이전 ink-900 → 톤 일치). */
.bp-share__copy {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  background: var(--bp-sunset-deep);
  color: var(--bp-ink-0);
  border: none;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.15s, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.bp-share__copy:hover { background: oklch(0.46 0.18 30); }
.bp-share__copy:active { transform: scale(0.96); }
.bp-share__copy:focus-visible {
  outline: 2px solid oklch(0.78 0.16 60);
  outline-offset: 2px;
}
/* inline 피드백 — 복사 직후 1.4s 동안 라벨 + 시각 강조 */
.bp-share__copy.is-copied {
  background: oklch(0.62 0.16 145);  /* success green tinted */
  color: var(--bp-ink-0);
}
.bp-share__copy.is-copied::before {
  content: '✓ ';
}

/* toast — fade-in transition (이전 깜빡 토글 → 부드러운 등장). */
.bp-share__toast {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--bp-sunset-deep);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.18s ease-out, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.bp-share__toast::before { content: '✓ '; }
.bp-share__toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.bp-share__toast[hidden] { display: none; }

/* viewport <380 */
@media (max-width: 380px) {
  .bp-share { margin: 14px auto; padding: 0 14px; }
  .bp-share__group { padding: 12px 14px; }
  .bp-share__text { min-height: 180px; font-size: 12.5px; }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .bp-share__copy, .bp-share__toast { transition: none !important; }
  .bp-share__copy:active { transform: none !important; }
  .bp-share__toast { transform: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   PICK-SHOW polish v7.10 — itinerary visual placeholder + num carry
   ════════════════════════════════════════════════════════════════ */

/* visual placeholder (사진 없는 item) — 카테고리 색 light tint + 한국어 라벨 */
.pick-itinerary__visual--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: var(--bp-bg);
}
.pick-itinerary__visual--placeholder::after {
  content: attr(data-cat-label);
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.030em;
  color: currentColor;
  opacity: 0.85;
  z-index: 1;
}
/* 카테고리별 색 (사이트 placeholder v3.4 톤 참조) */
.pick-itinerary__visual--vehicle  { background-color: oklch(0.95 0.045 220) !important; color: oklch(0.42 0.18 220); }
.pick-itinerary__visual--food     { background-color: oklch(0.95 0.055 40)  !important; color: oklch(0.50 0.18 40); }
.pick-itinerary__visual--drink    { background-color: oklch(0.95 0.045 290) !important; color: oklch(0.45 0.18 290); }
.pick-itinerary__visual--activity { background-color: oklch(0.95 0.055 150) !important; color: oklch(0.42 0.17 150); }
.pick-itinerary__visual--wellness { background-color: oklch(0.95 0.045 330) !important; color: oklch(0.48 0.17 330); }
.pick-itinerary__visual--stay     { background-color: oklch(0.96 0.045 75)  !important; color: oklch(0.48 0.15 75); }
.pick-itinerary__visual--life     { background-color: oklch(0.95 0.045 185) !important; color: oklch(0.45 0.14 185); }

/* num 모바일 — 작아지지 않고 carry 유지 (18 → 22) */
@media (max-width: 480px) {
  .pick-itinerary__num {
    font-size: 22px !important;
    padding-top: 2px !important;
  }
}

/* byline main count 강조 — 14px sunset-deep (CTA tone) */
.pick-header__byline-main {
  font-size: 13px !important;
  color: var(--bp-ink-900) !important;
  font-weight: 700 !important;
}

/* ════════════════════════════════════════════════════════════════
   HOME-LATEST v7.12 — 방금 등록된 곳 (가로 스크롤 strip)
   ----------------------------------------------------------------
   사이트 다른 strip 과 차별: timestamp 강조 + 카테고리 dot + 작은 thumb.
   ════════════════════════════════════════════════════════════════ */

.home-latest__strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
  margin-inline: calc(-1 * var(--sp-4));
  padding: 4px var(--sp-4) 8px;
  scroll-padding-inline-start: var(--sp-4);
}
.home-latest__strip::-webkit-scrollbar { display: none; }

.home-latest__card {
  flex: 0 0 160px;
  min-width: 160px;       /* v7.16: flex grow / shrink 양방향 고정 */
  max-width: 160px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: transparent;
  border-radius: 10px;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.home-latest__card:active { transform: scale(0.98); color: inherit; }

.home-latest__thumb {
  width: 160px;            /* v7.16: 명시 — flex 컨텍스트 width 안전 */
  height: 120px;           /* v7.16: aspect-ratio 미지원 (iOS<15 등) fallback */
  aspect-ratio: 4 / 3;     /* modern browser: 비율 보장 */
  border-radius: 10px;
  background-color: var(--bp-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--bp-line);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;          /* v7.16: 부모 flex 컨텍스트에서 thumb shrink 방지 */
}
.home-latest__thumb-label {
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.022em;
  color: currentColor;
  opacity: 0.65;
}
/* 카테고리별 placeholder color (사진 없을 때 currentColor) */
.home-latest__thumb--vehicle  { background-color: oklch(0.95 0.045 220); color: oklch(0.42 0.18 220); }
.home-latest__thumb--food     { background-color: oklch(0.95 0.055 40);  color: oklch(0.50 0.18 40); }
.home-latest__thumb--drink    { background-color: oklch(0.95 0.045 290); color: oklch(0.45 0.18 290); }
.home-latest__thumb--activity { background-color: oklch(0.95 0.055 150); color: oklch(0.42 0.17 150); }
.home-latest__thumb--wellness { background-color: oklch(0.95 0.045 330); color: oklch(0.48 0.17 330); }
.home-latest__thumb--stay     { background-color: oklch(0.96 0.045 75);  color: oklch(0.48 0.15 75); }
.home-latest__thumb--shopping { background-color: oklch(0.95 0.045 320); color: oklch(0.45 0.17 320); }
.home-latest__thumb--guide    { background-color: oklch(0.95 0.045 165); color: oklch(0.42 0.16 165); }
.home-latest__thumb--life     { background-color: oklch(0.95 0.045 185); color: oklch(0.45 0.14 185); }

.home-latest__body {
  padding: 8px 2px 2px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.home-latest__time {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bp-sunset-deep);
  font-variant-numeric: tabular-nums;
}
.home-latest__name {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--bp-ink-900);
  line-height: 1.30;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-latest__meta {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--bp-ink-500);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-latest__dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--bp-ink-300);
  flex-shrink: 0;
}
.home-latest__dot--vehicle  { background: oklch(0.55 0.16 220); }
.home-latest__dot--food     { background: var(--bp-c-food); }
.home-latest__dot--drink    { background: var(--bp-c-drink); }
.home-latest__dot--activity { background: var(--bp-c-activity); }
.home-latest__dot--wellness { background: oklch(0.55 0.16 330); }
.home-latest__dot--stay     { background: var(--bp-c-company); }
.home-latest__dot--life     { background: oklch(0.55 0.14 185); }
.home-latest__dot--shopping { background: var(--bp-c-shopping); }
.home-latest__dot--guide    { background: var(--bp-c-guide); }

/* viewport <380 */
@media (max-width: 380px) {
  .home-latest__card { flex-basis: 140px; min-width: 140px; max-width: 140px; }
  .home-latest__thumb { width: 140px; height: 105px; }   /* 4:3 비율 유지 */
  .home-latest__name { font-size: 13px; }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .home-latest__card { transition: none !important; }
  .home-latest__card:active { transform: none !important; }
}

/* =====================================================================
   M7 v7.15 — Lang-conditional typography overrides
   ─────────────────────────────────────────────────────────────────────
   기존 base CSS 는 한국어 typography 기준 (word-break: keep-all,
   negative letter-spacing -0.005~-0.034em, max-width: 28~30ch 등).
   EN/ID 사용자에게는 라틴 어휘가 keep-all 로 단어 통째로 줄바꿈되어
   어색하거나, negative tracking 으로 자모가 너무 빡빡함.

   본 블록은 EN/ID 에서만 한국어 규칙을 풀어준다. 회귀 0 보장:
   기존 코드는 1줄도 수정하지 않음. html[lang="en"], html[lang="id"]
   attribute selector 의 specificity (0,1,X) 로 base override.
   base 에 !important 박힌 위치는 본 블록도 !important 로 동등 매칭.

   Design Ref: i18n-ui-rollout.design.md §4 (DD2).
   ===================================================================== */

/* 1) Root inherit reset — letter-spacing / word-break / overflow-wrap.
      자식 요소가 명시 override 한 경우 우선, 그 외에는 라틴 친화 기본값. */
html[lang="en"],
html[lang="id"] {
  letter-spacing: 0;
  word-break: normal;
  overflow-wrap: break-word;
}

/* 2) Hero / page-head / section title — !important 박힌 base 매칭.
      라틴 어휘 자연 wrap + 미세 -0.005em tracking 만 유지. */
html[lang="en"] .bp-page-head__h1,
html[lang="id"] .bp-page-head__h1,
html[lang="en"] .bp-discover__title,
html[lang="id"] .bp-discover__title,
html[lang="en"] .r-sec-title,
html[lang="id"] .r-sec-title,
html[lang="en"] .r-hot-feature__title,
html[lang="id"] .r-hot-feature__title,
html[lang="en"] .bp-empty__h,
html[lang="id"] .bp-empty__h,
html[lang="en"] .bp-empty__sub,
html[lang="id"] .bp-empty__sub,
html[lang="en"] .bp-picks__pull-quote,
html[lang="id"] .bp-picks__pull-quote,
html[lang="en"] .bp-page-head__sub,
html[lang="id"] .bp-page-head__sub,
html[lang="en"] .header-nav__link,
html[lang="id"] .header-nav__link {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  letter-spacing: -0.005em !important;
}

/* 3) max-width Nch 완화 — 라틴 평균 글자폭 ≈ 0.5x 한국어. 30ch → 45ch 등 1.5x. */
html[lang="en"] .bp-empty__sub,
html[lang="id"] .bp-empty__sub {
  max-width: 360px;
}

/* 4) Nav 가로 expansion 대응 — 라틴 라벨 "Register Spot" / "Daftarkan Spot"
      등이 길어 nav 가 줄바꿈/오버플로우 위험. 모바일 가로 스크롤 허용. */
html[lang="en"] .header-nav,
html[lang="id"] .header-nav {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html[lang="en"] .header-nav::-webkit-scrollbar,
html[lang="id"] .header-nav::-webkit-scrollbar {
  display: none;
}
html[lang="en"] .header-nav__link,
html[lang="id"] .header-nav__link {
  white-space: nowrap;   /* 라벨 자체는 한 줄 유지, 가로 스크롤로 전환 */
  flex-shrink: 0;
}

/* 5) 카드 카테고리 / chip — 라틴 라벨이 길어 chip wrap 시 줄바꿈 자연 */
html[lang="en"] .bp-chip,
html[lang="id"] .bp-chip,
html[lang="en"] .bp-cat,
html[lang="id"] .bp-cat {
  white-space: normal;
  overflow-wrap: break-word;
}

/* ════════════════════════════════════════════════════════════════
   HOME CURATED — templates/home.phtml inline <style> 에서 이관.
   (impeccable critique P1-(1) — single source of truth)
   기존 .curated-hscroll / .ncard 정의 (line 450~, 526~) 는 !important
   로 layer override 중. 이 블록은 layout / scroll snap / positioning
   등 외부에 없는 properties 만 의도. cascade later wins 로 inline
   삭제 후에도 visual 동일.
   ════════════════════════════════════════════════════════════════ */
.curated-hscroll {
  display: flex; gap: var(--sp-3); overflow-x: auto; scroll-snap-type: x mandatory;
  -ms-overflow-style: none; scrollbar-width: none;
  margin-inline: calc(-1 * var(--sp-4));
  padding: 2px var(--sp-4) var(--sp-2);
  scroll-padding-inline-start: var(--sp-4);
  scroll-padding-inline-end: var(--sp-4);
}
.curated-hscroll::-webkit-scrollbar { display: none; }
.ncard {
  flex: 0 0 200px;
  scroll-snap-align: start;
  background: var(--ink-0); border-radius: var(--r-md);
  overflow: hidden; box-shadow: var(--shadow-1);
  text-decoration: none; color: inherit;
  transition: transform .15s, box-shadow .15s;
}
.ncard:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.ncard__thumb {
  width: 100%; aspect-ratio: 4 / 3;
  background: var(--ink-100);
  position: relative;
}
.ncard__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ncard__newtag {
  position: absolute; top: 8px; left: 8px;
  background: oklch(0.65 0.20 30); color: #fff;
  padding: 3px 8px; border-radius: var(--r-pill);
  font-size: 10px; font-weight: 800; letter-spacing: 0.05em;
}
.ncard__body { padding: 10px 12px 12px; }
.ncard__name {
  font-size: 14px; font-weight: 700; color: var(--ink-900);
  line-height: 1.3; margin-bottom: 4px; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ncard__meta { font-size: 11.5px; color: var(--ink-500); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ncard__date {
  margin-left: auto; padding: 1px 7px; border-radius: var(--r-pill);
  background: var(--ink-100); color: var(--ink-700); font-size: 11px; font-weight: 600;
}

/* 큐레이션 placeholder (사진 없는 카드) */
.curated-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.curated-placeholder--vehicle  { background: oklch(0.94 0.04 220); }
.curated-placeholder--food     { background: oklch(0.94 0.05 28); }
.curated-placeholder--activity { background: var(--green-100); }
.curated-placeholder--wellness { background: oklch(0.94 0.04 320); }
.curated-placeholder--stay     { background: oklch(0.95 0.04 75); }
.curated-placeholder--life     { background: oklch(0.94 0.04 185); }
.curated-placeholder .cat-squircle { width: 48px; height: 48px; border-radius: 12px; }
.curated-placeholder .cat-squircle svg { width: 28px; height: 28px; }

/* iOS 스타일 카테고리 squircle (placeholder 내부) */
.cat-squircle {
  width: 64px; height: 64px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.08);
  border: 1px solid rgba(255,255,255,.4);
}
.cat-squircle svg { width: 38px; height: 38px; display: block; }
.cat-squircle--vehicle  { background: linear-gradient(135deg,#60A5FA,#2563EB); }
.cat-squircle--food     { background: linear-gradient(135deg,#FB923C,#EA580C); }
.cat-squircle--activity { background: linear-gradient(135deg,#4ADE80,#16A34A); }
.cat-squircle--wellness { background: linear-gradient(135deg,#F472B6,#DB2777); }
.cat-squircle--stay     { background: linear-gradient(135deg,#C084FC,#9333EA); }
.cat-squircle--life     { background: linear-gradient(135deg,#FBBF24,#D97706); }

/* ===== SPOTS PAGE inline (이관됨, 2026-05-21) =====
   templates/spots.phtml 의 inline <style> 447 라인을 이관.
   home commit 0355404 패턴 동일. dead 분석은 별도 follow-up.
   cascade: 외부 stylesheet 끝에 위치 → 동일 selector 가 위에 있어도
   later wins. inline 시절과 visual 동일 보장. */
/* search-modal 자동완성 — modal-q 옆에 prefix-match 결과 박스 */
.search-modal__group--q { position: relative; }
.search-suggest {
  list-style: none;
  padding: 4px 0;
  margin: 6px 0 0;
  background: #fff;
  border: 1px solid var(--ink-100, #E5E5E5);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
  max-height: 280px;
  overflow-y: auto;
}
.search-suggest[hidden] { display: none; }
.search-suggest__item {
  padding: 10px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.search-suggest__item:hover,
.search-suggest__item.is-active {
  background: var(--peach-100, #FFE5D4);
}
.search-suggest__name { font-weight: 600; color: var(--ink-700, #333); font-size: .92rem; }
.search-suggest__meta { color: var(--ink-400, #888); font-size: .75rem; }
.search-suggest__empty { padding: 12px 14px; color: var(--ink-400, #888); font-size: .85rem; text-align: center; }
/* empty-state CTA — 부족 영역 첫 제보 유도 */
.empty-state--cta { text-align: center; padding: var(--sp-6) var(--sp-4); }
.empty-state__title { font-size: 1rem; color: var(--ink-700); margin: 0 0 var(--sp-2); }
.empty-state__title strong { color: var(--coral-600, #C2410C); }
.empty-state__sub { color: var(--ink-500); font-size: .9rem; margin: 0 0 var(--sp-5); line-height: 1.55; }
.empty-state__cta { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }
.card-rating    { color: var(--green-600); font-weight: 700; font-size: .8rem; }
.card-view-count {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--ink-400); font-size: .75rem;
}
#card-grid { transition: opacity .15s ease; }
#card-grid.is-loading { opacity: 0.35; pointer-events: none; }

/* ===== 큐레이션 섹션 (이번 주 신규 / 인기 / 별점 TOP) ===== */
.curated-section { margin: 0 0 var(--sp-8); }
.curated-section + .curated-section { margin-top: 0; }

/* dead 제거 (B-1a, 2026-05-21): .curated-head/.curated-head__left/.curated-icon{,--new,--hot,--star}/.curated-title/.curated-sub/.curated-more — spots.phtml + partials/home_curated.phtml 사용 0 */

/* 이번 주 신규 — 가로 스크롤 큰 카드 */
.curated-hscroll {
  display: flex; gap: var(--sp-3);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-2);
  margin: 0 calc(-1 * var(--sp-4));
  padding-left: var(--sp-4);
  padding-right: var(--sp-4);
}
.curated-hscroll::-webkit-scrollbar { display: none; }
.ncard {
  flex: 0 0 220px;
  background: var(--ink-0);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  overflow: hidden;
  scroll-snap-align: start;
  box-shadow: var(--shadow-1);
  transition: transform .12s, box-shadow .15s;
  color: inherit;
}
.ncard:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  text-decoration: none;
}
.ncard__thumb {
  aspect-ratio: 16/10;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.ncard__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ncard__newtag {
  position: absolute; top: 10px; left: 10px;
  background: var(--green-600); color: #fff;
  padding: 3px 9px; border-radius: var(--r-pill);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em;
}
.ncard__body { padding: 10px 12px 12px; }
.ncard__name {
  font-size: 14px; font-weight: 700;
  line-height: 1.3; margin-bottom: 4px;
  color: var(--ink-900);
  letter-spacing: -.01em;
}
.ncard__meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-500);
}
.ncard__date {
  margin-left: auto;
  font-size: 11px; color: var(--green-700); font-weight: 600;
  white-space: nowrap;
}

/* dead 제거 (B-1a, 2026-05-21): .curated-rank/.rcard*/.curated-stargrid/.scard* — spots.phtml + partials/home_curated.phtml 사용 0. partials 는 .r-scard* 라는 별 vocab 사용 (style.css line 2314) */

/* 섹션 구분선 */
.curated-divider {
  height: 1px;
  background: var(--ink-100);
  margin: 0 0 var(--sp-6);
}

/* dead 제거 (B-1a, 2026-05-21): .search-section__head/.search-section__open(:hover)/.search-section__count — spots.phtml 사용 0. style.css 에 별도 정의 존재하나 그 stylesheet 의 라이프사이클은 별 사이클. */

/* ===== 검색 모달 ===== */
.search-modal[hidden] { display: none; }
.search-modal {
  position: fixed; inset: 0;
  z-index: 200;
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--sp-4);
}
.search-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 30, 22, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: search-fade-in .15s ease;
}
@keyframes search-fade-in {
  from { opacity: 0; } to { opacity: 1; }
}
.search-modal__panel {
  position: relative;
  width: 100%; max-width: 520px;
  margin-top: max(5vh, var(--sp-4));
  background: var(--ink-0);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-4);
  max-height: 88vh;
  display: flex; flex-direction: column;
  animation: search-modal-in .22s cubic-bezier(.2, 0, .2, 1);
}
@keyframes search-modal-in {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}
.search-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--ink-100);
}
.search-modal__title {
  /* B-3 (2026-05-21): heading h3 → h2 a11y fix. element-agnostic class
     selector 로 변환 — user-agent h2 default style 무효화 + margin 0. */
  margin: 0;
  font-size: 17px; font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -.01em;
}
.search-modal__close {
  width: 32px; height: 32px;
  border-radius: var(--r-pill);
  background: var(--ink-50);
  border: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-700);
  cursor: pointer;
  transition: background .12s;
}
.search-modal__close:hover { background: var(--ink-100); }
.search-modal__body {
  padding: var(--sp-5);
  overflow-y: auto;
  flex: 1;
}
.search-modal__group { margin-bottom: var(--sp-5); }
.search-modal__group:last-child { margin-bottom: 0; }
.search-modal__label {
  display: block; font-size: 11px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: var(--sp-2);
}
.search-modal__input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px 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;
}
.search-modal__input:focus {
  outline: none;
  border-color: var(--green-400);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--green-500) 18%, transparent);
}
.search-modal__chips {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.search-modal__chips .filter-tab { font-size: 12.5px; padding: 6px 12px; }
.search-modal__foot {
  display: flex; gap: var(--sp-2); justify-content: flex-end;
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--ink-100);
  background: var(--sand-50);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}
@media (max-width: 480px) {
  .search-modal { padding: 0; }
  .search-modal__panel {
    margin-top: 0;
    border-radius: 0;
    max-height: 100vh; height: 100vh;
  }
  .search-modal__foot { border-radius: 0; }
}

/* 큐레이션 placeholder (사진 없는 카드) */
.curated-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.curated-placeholder--vehicle  { background: oklch(0.94 0.04 220); }
.curated-placeholder--food     { background: oklch(0.94 0.05 28); }
.curated-placeholder--activity { background: var(--green-100); }
.curated-placeholder--wellness { background: oklch(0.94 0.04 320); }
.curated-placeholder--stay     { background: oklch(0.95 0.04 75); }
.curated-placeholder--life     { background: oklch(0.94 0.04 185); }
.curated-placeholder .cat-squircle { width: 48px; height: 48px; border-radius: 12px; }
.curated-placeholder .cat-squircle svg { width: 28px; height: 28px; }
/* dead 제거 (B-1a): .rcard__thumb .curated-placeholder ... — 부모 .rcard 가 dead 이므로 합성 selector 도 dead */

/* iOS 스타일 카테고리 squircle (placeholder 내부) */
.cat-squircle {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow:
    0 4px 10px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -1px 0 rgba(0,0,0,.08);
  border: 1px solid rgba(255,255,255,.4);
  opacity: 1;
}
.cat-squircle svg { width: 38px; height: 38px; display: block; }
.cat-squircle--vehicle  { background: linear-gradient(135deg,#60A5FA,#2563EB); }
.cat-squircle--food     { background: linear-gradient(135deg,#FB923C,#EA580C); }
.cat-squircle--activity { background: linear-gradient(135deg,#4ADE80,#16A34A); }
.cat-squircle--wellness { background: linear-gradient(135deg,#F472B6,#DB2777); }
.cat-squircle--stay     { background: linear-gradient(135deg,#C084FC,#9333EA); }
.cat-squircle--life     { background: linear-gradient(135deg,#FBBF24,#D97706); }

/* placeholder 안의 squircle 은 opacity .5 룰 무시 */
.card-placeholder .cat-squircle { opacity: 1; }
.card-placeholder .cat-squircle svg { opacity: 1; }


/* ===== SPOT DETAIL inline (이관됨, 2026-05-21, D-2) =====
   templates/spot_show.phtml 의 inline <style> 90 라인을 이관.
   spots commit 57d4521 (B-1) 패턴 동일. cascade 보장.
   D-4b 에서 photo-slider ease → cubic-bezier(0.16, 1, 0.3, 1) 교정 완료. */
/* ── 사진 슬라이더 ─────────────────────────────────────────── */
.photo-slider {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md, 8px);
  background: var(--ink-900, #111);
  aspect-ratio: 4 / 3;
  margin: 16px 0;
  touch-action: pan-y;
  user-select: none;
}
.photo-slider__track {
  display: flex;
  height: 100%;
  /* D-4b (2026-05-21): cubic-bezier(.25,.46,.45,.94) → ease-out-quart
     (DESIGN.md §6 site-wide motion vocab 일관) */
  transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.photo-slider__track.no-transition { transition: none; }
.photo-slider__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}
.photo-slider__slide a,
.photo-slider__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-slider__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,.42);
  border: none;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: background .2s;
  -webkit-tap-highlight-color: transparent;
}
.photo-slider__btn:hover { background: rgba(0,0,0,.68); }
.photo-slider__btn--prev { left: 10px; }
.photo-slider__btn--next { right: 10px; }
.photo-slider__counter {
  position: absolute;
  top: 10px;
  right: 12px;
  background: rgba(0,0,0,.45);
  color: #fff;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  padding: 2px 8px;
  border-radius: 99px;
  z-index: 3;
  pointer-events: none;
}
.photo-slider__dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 3;
}
.photo-slider__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .2s, transform .2s;
  -webkit-tap-highlight-color: transparent;
}
.photo-slider__dot.active {
  background: #fff;
  transform: scale(1.25);
}

/* 별점 위젯 스타일은 외부 style.css 의 v3.0 Bold Plum 정의를 따른다 */

/* ===== SPOT DETAIL D-3 (2026-05-21) — inline style attr → 컴포넌트 class =====
   templates/spot_show.phtml 의 inline style="" 14건 (kakao / Maps / 리뷰)
   을 class 기반 정의로 이관. SSR + JS dynamic 리뷰 카드가 같은 class 사용
   → 두 흐름이 자연 일관. */

/* 카카오 ID 마스킹 코드 (.bp-kakao-code) + 안내 (.bp-kakao-hint) */
.bp-kakao-code {
  background: var(--sand-50);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--coral-700);
}
.bp-kakao-hint {
  color: var(--ink-500);
  margin-left: 6px;
}

/* 구글 지도 임베드 + outbound 버튼 (.bp-spot-map) */
.bp-spot-map {
  margin: 18px 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--ink-100, #F0E8E2);
}
.bp-spot-map__embed {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #f4f4f4;
}
.bp-spot-map__embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.bp-spot-map__outbound {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--ink-0, #fff);
  color: var(--ink-800, #3D1810);
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  border-top: 1px solid var(--ink-100, #F0E8E2);
}

/* spot detail section 헤더 (.bp-section-title) — DESIGN.md §3 sub-heading scale */
.bp-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: -.018em;
  color: var(--ink-900);
}

/* 리뷰 목록 + 카드 (.bp-reviews-*, .bp-review-card) */
.bp-reviews-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bp-review-card {
  background: var(--ink-50, #f9f9f9);
  border: 1px solid var(--ink-100, #ebebeb);
  border-radius: 8px;
  padding: 12px 14px;
}
.bp-review-card__body {
  margin: 0 0 8px;
  font-size: .95rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
}
.bp-review-card__meta {
  font-size: .78rem;
  color: var(--ink-400, #aaa);
}
.bp-review-card__meta-link {
  color: var(--ink-400, #aaa);
  text-decoration: none;
}
.bp-reviews-sentinel {
  height: 1px;
  margin-top: 16px;
}
.bp-reviews-loader {
  display: none;
  text-align: center;
  padding: 12px 0;
  color: var(--ink-400);
  font-size: .9rem;
}

/* ────────────────────────────────────────────────────────────
 * pick-created (픽 생성 셀러브레이션) — 2026-05-21
 * Design Ref: shape brief "토스 스타일, 느리고 굵게"
 * Easing 단일: cubic-bezier(0.16, 1, 0.3, 1) (ease-out-quart)
 * 절대 ban 준수: bounce/spring/elastic/glass/gradient-text/side-stripe X
 * ──────────────────────────────────────────────────────────── */
.bp-pick-created {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: max(40px, env(safe-area-inset-top)) 24px max(32px, env(safe-area-inset-bottom));
  background: var(--bp-bg);
  overflow: hidden;
  text-align: center;
}

/* radial wash — sunset 미세 (5%), opacity-only */
.bp-pick-created__wash {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 38%,
    oklch(0.560 0.165 35 / 0.10) 0%,
    oklch(0.560 0.165 35 / 0.04) 30%,
    transparent 70%
  );
  opacity: 0;
  animation: bp-pc-wash 900ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: none;
}
@keyframes bp-pc-wash {
  to { opacity: 1; }
}

/* 체크 stage — 120px 굵은 원 + 굵은 tick */
.bp-pick-created__stage {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 28px;
  isolation: isolate;
}
.bp-pick-created__check {
  position: relative;
  width: 100%;
  height: 100%;
  color: var(--bp-ink-0);
  opacity: 0;
  transform: scale(0.5);
  transform-origin: 50% 50%;
  animation: bp-pc-check 900ms cubic-bezier(0.16, 1, 0.3, 1) 120ms forwards;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
@keyframes bp-pc-check {
  to { opacity: 1; transform: scale(1); }
}
.bp-pick-created__check-circle {
  fill: var(--bp-sunset-deep);
}
.bp-pick-created__check-tick {
  /* stroke draw: path length ≈ 70 */
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  animation: bp-pc-tick 700ms cubic-bezier(0.16, 1, 0.3, 1) 700ms forwards;
}
@keyframes bp-pc-tick {
  to { stroke-dashoffset: 0; }
}

/* Halo — 천천히 확산하는 굵은 ring */
.bp-celebrate-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border: 3px solid oklch(0.695 0.176 38 / 0.35);
  border-radius: 50%;
  opacity: 0;
  transform: scale(1);
  animation: bp-pc-halo 1200ms cubic-bezier(0.16, 1, 0.3, 1) 400ms forwards;
  pointer-events: none;
}
@keyframes bp-pc-halo {
  0%   { opacity: 0.5; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.6); }
}

/* Ray 6개 — 체크 위쪽 영역에서 일제히 솟구쳐 사라짐 */
.bp-celebrate-overlay {
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 2;
}
.bp-celebrate-ray {
  position: absolute;
  top: 38%;
  left: 0;
  width: 4px;
  height: 20px;
  margin-left: -2px;
  background: var(--bp-sunset);
  border-radius: 2px;
  opacity: 0;
  transform-origin: 50% 100%;
  /* 6 방향 각도: -75, -45, -15, 15, 45, 75 (위쪽 부채꼴) */
  transform: rotate(calc((var(--ray-i) - 2.5) * 30deg)) translateY(0);
  animation: bp-pc-ray 800ms cubic-bezier(0.16, 1, 0.3, 1) calc(500ms + var(--ray-i) * 80ms) forwards;
}
@keyframes bp-pc-ray {
  0%   { opacity: 0; transform: rotate(calc((var(--ray-i) - 2.5) * 30deg)) translateY(0); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(calc((var(--ray-i) - 2.5) * 30deg)) translateY(-44px); }
}

/* Sparkle 4 — 체크 주변 작은 펄스 */
.bp-celebrate-sparkle {
  position: absolute;
  top: 38%;
  left: 0;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: oklch(0.560 0.165 35 / 0.7);
  border-radius: 50%;
  opacity: 0;
  transform: translate(0, 0) scale(0);
  animation: bp-pc-sparkle 900ms cubic-bezier(0.16, 1, 0.3, 1) calc(1000ms + var(--sp-i) * 120ms) forwards;
}
.bp-celebrate-sparkle:nth-child(7)  { transform: translate(-90px, -30px); }
.bp-celebrate-sparkle:nth-child(8)  { transform: translate(90px, -30px); }
.bp-celebrate-sparkle:nth-child(9)  { transform: translate(-70px, 36px); }
.bp-celebrate-sparkle:nth-child(10) { transform: translate(70px, 36px); }
@keyframes bp-pc-sparkle {
  0%   { opacity: 0; }
  40%  { opacity: 1; }
  100% { opacity: 0; }
}
.bp-celebrate-overlay .bp-celebrate-sparkle {
  animation-name: bp-pc-sparkle-scale;
}
@keyframes bp-pc-sparkle-scale {
  0%   { opacity: 0; }
  40%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Confetti 8개 — 한 번 휙 떨어짐, 카테고리 색 burst */
.bp-celebrate-confetti {
  position: absolute;
  top: 30%;
  left: 0;
  width: 8px;
  height: 12px;
  margin: -6px 0 0 -4px;
  background: var(--cf-color, var(--bp-sunset));
  border-radius: 1px;
  opacity: 0;
  transform: translate3d(0, -20px, 0) rotate(0deg);
  animation: bp-pc-confetti 2000ms cubic-bezier(0.16, 1, 0.3, 1) calc(900ms + var(--cf-i) * 60ms) forwards;
}
@keyframes bp-pc-confetti {
  0%   { opacity: 0; transform: translate3d(0, -20px, 0) rotate(0deg); }
  10%  { opacity: 1; }
  100% { opacity: 0;
         transform: translate3d(calc((var(--cf-i) - 3.5) * 38px), 240px, 0)
                    rotate(calc((var(--cf-i) - 3.5) * 90deg)); }
}

/* 카피 */
.bp-pick-created__h1 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.3;
  color: var(--bp-ink-900);
  margin: 0 0 12px;
  opacity: 0;
  transform: translateY(20px);
  animation: bp-pc-fade-up 500ms cubic-bezier(0.16, 1, 0.3, 1) 1200ms forwards;
  word-break: keep-all;
}
.bp-pick-created__body {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.6;
  color: var(--bp-ink-700);
  margin: 0 0 40px;
  opacity: 0;
  transform: translateY(20px);
  animation: bp-pc-fade-up 500ms cubic-bezier(0.16, 1, 0.3, 1) 1400ms forwards;
  word-break: keep-all;
}
@keyframes bp-pc-fade-up {
  to { opacity: 1; transform: translateY(0); }
}

/* 액션 */
.bp-pick-created__actions {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bp-pick-created__share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  padding: 0 20px;
  border: none;
  border-radius: 14px;
  background: var(--bp-ink-900);
  color: var(--bp-ink-0);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.014em;
  cursor: pointer;
  opacity: 0;
  transform: translateY(24px);
  animation: bp-pc-fade-up 600ms cubic-bezier(0.16, 1, 0.3, 1) 1800ms forwards;
  transition: transform 120ms cubic-bezier(0.16, 1, 0.3, 1), background-color 200ms ease;
}
.bp-pick-created__share:active {
  transform: scale(0.97);
}
.bp-pick-created__share.is-copied {
  background: var(--bp-sunset-deep);
}
.bp-pick-created__share-label {
  display: inline-block;
  transition: opacity 200ms ease;
}
.bp-pick-created__share.is-copied .bp-pick-created__share-label {
  /* 텍스트는 JS 가 교체 */
}
.bp-pick-created__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  color: var(--bp-ink-700);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.010em;
  text-decoration: none;
  opacity: 0;
  animation: bp-pc-fade-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 2400ms forwards;
}
.bp-pick-created__close:active {
  color: var(--bp-ink-900);
}
@keyframes bp-pc-fade-in {
  to { opacity: 1; }
}

/* 미지원 hint (clipboard 실패 시) */
.bp-pick-created__hint {
  margin: 20px 0 0;
  font-size: 12.5px;
  color: var(--bp-ink-500);
  letter-spacing: -0.008em;
}

/* 데스크탑 — 중앙 좁게 */
@media (min-width: 720px) {
  .bp-pick-created {
    padding: 64px 24px;
  }
  .bp-pick-created__h1 { font-size: 30px; }
  .bp-pick-created__body { font-size: 16.5px; }
}

/* prefers-reduced-motion — 데코 motion 모두 즉시 final state */
@media (prefers-reduced-motion: reduce) {
  .bp-pick-created__wash,
  .bp-pick-created__check,
  .bp-pick-created__check-tick,
  .bp-celebrate-halo,
  .bp-celebrate-ray,
  .bp-celebrate-sparkle,
  .bp-celebrate-confetti,
  .bp-pick-created__h1,
  .bp-pick-created__body,
  .bp-pick-created__share,
  .bp-pick-created__close {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .bp-celebrate-ray,
  .bp-celebrate-sparkle,
  .bp-celebrate-confetti,
  .bp-celebrate-halo {
    display: none !important;
  }
  .bp-pick-created__check-tick {
    stroke-dashoffset: 0 !important;
  }
}