/* ============================================================
   HM-009 — MY WEDDING STORY Integrated Search Results
   Revised: PLACE map-height sync · editorial 관련정보 · region bar
   ============================================================ */

/* ─── PAGE RESET ─────────────────────────────────────────── */
.search-page { background: #f2f4f6; }

/* ─── UTILITY BAR ────────────────────────────────────────── */
.search-page .utility-bar { position: relative; z-index: 300; }

/* ═══════════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════════ */
.sr-header {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 2px 16px rgba(0,0,0,.07);
}

/* Header inner row */
.sr-header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Logo */
.sr-logo {
  display: flex; align-items: center; gap: 9px;
  text-decoration: none; flex-shrink: 0;
}
.sr-logo-mark {
  font-size: 22px; color: var(--user-color-text-brand, #228E84);
  line-height: 1;
}
.sr-logo-main {
  display: block;
  font-size: 12.5px; font-weight: 800;
  letter-spacing: .4px; color: var(--text-primary);
  white-space: nowrap;
}
.sr-logo-sub {
  display: block;
  font-size: 10px; color: var(--text-muted);
  margin-top: 1px;
}

/* Search bar */
.sr-searchbar-wrap { flex: 1; max-width: 640px; }
.sr-searchbar {
  display: flex; align-items: center;
  border: 2px solid var(--user-color-border-strong, #81D8D0);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.sr-searchbar:focus-within {
  border-color: var(--user-bp-dark, #228E84);
  box-shadow: 0 0 0 3px var(--user-color-search-focus-ring, rgba(78,184,174,.22));
}
.sr-sb-icon {
  padding: 0 10px 0 14px;
  color: var(--text-muted); font-size: 14px; flex-shrink: 0;
}
.sr-sb-input {
  flex: 1; border: none; outline: none;
  font-size: 15px; font-weight: 600;
  color: var(--text-primary); background: transparent;
  padding: 10px 0; min-width: 0;
}
.sr-sb-input::placeholder { color: var(--text-muted); font-weight: 400; }
.sr-sb-clear {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none;
  color: var(--text-muted); border-radius: 50%;
  cursor: pointer; flex-shrink: 0;
  transition: background .15s, color .15s;
}
.sr-sb-clear:hover { background: var(--bg); color: var(--text-secondary); }
.sr-sb-divider {
  width: 1px; height: 20px;
  background: var(--border-mid); flex-shrink: 0; margin: 0 2px;
}
.sr-sb-btn {
  display: flex; align-items: center; gap: 6px;
  background: var(--user-color-action-primary, #228E84); color: #fff;
  border: none; padding: 0 18px; height: 44px;
  font-size: 13px; font-weight: 700;
  cursor: pointer; flex-shrink: 0;
  transition: background .18s;
  white-space: nowrap;
}
.sr-sb-btn:hover { background: var(--user-color-action-primary-hover, #8A6C36); }
.sr-sb-btn:active { transform: scale(.97); }

/* Header right */
.sr-header-right {
  display: flex; align-items: center; gap: 14px;
  margin-left: auto; flex-shrink: 0;
}
.sr-hdr-link {
  display: flex; align-items: center; gap: 5px;
  font-size: 13px; color: var(--text-secondary);
  text-decoration: none; transition: color .15s;
  position: relative; white-space: nowrap;
}
.sr-hdr-link:hover { color: var(--user-color-text-brand, #228E84); }
.sr-hdr-cart { position: relative; }
.sr-cart-badge {
  position: absolute; top: -7px; right: -10px;
  background: var(--coral); color: #fff;
  font-size: 9px; font-weight: 800; font-style: normal;
  min-width: 16px; height: 16px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
}

/* ─── TABS BAR ───────────────────────────────────────────── */
.sr-tabs-bar {
  border-top: 1px solid var(--border);
  background: #fff;
}
.sr-tabs-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
}
.sr-tabs-list {
  display: flex; align-items: center; gap: 0;
}
.sr-tab {
  position: relative;
  padding: 13px 18px;
  font-size: 14px; font-weight: 500;
  color: var(--text-muted);
  background: none; border: none; cursor: pointer;
  transition: color .18s, background .18s;
  white-space: nowrap;
}
.sr-tab::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 2.5px; background: var(--user-color-tab-active, #228E84);
  border-radius: 2px 2px 0 0;
  transform: scaleX(0);
  transition: transform .22s cubic-bezier(.4,0,.2,1);
}
.sr-tab:hover { color: var(--text-secondary); background: var(--user-color-bg-hover, #C0EDE9); }
.sr-tab.active { color: var(--user-color-tab-active, #228E84); font-weight: 700; }
.sr-tab.active::after { transform: scaleX(1); }
.sr-result-badge {
  font-size: 12.5px; color: var(--text-muted);
  display: flex; align-items: center; gap: 5px;
}
.sr-result-badge i { color: var(--user-color-text-brand, #228E84); }
.sr-result-badge strong { color: var(--user-color-text-brand, #A8884E); font-weight: 700; }

/* ─── 결혼준비지역 BAR ───────────────────────────────────── */
.sr-region-bar {
  border-top: 1px solid var(--border);
  background: linear-gradient(90deg, #f9fdfc 0%, #fff8f6 100%);
  padding: 0;
}
.sr-region-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 10px 24px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.sr-region-label {
  font-size: 12px; font-weight: 700;
  color: var(--text-muted); white-space: nowrap;
  display: flex; align-items: center; gap: 5px;
  flex-shrink: 0;
}
.sr-region-label i { color: var(--user-color-text-brand, #A8884E); }
.sr-region-chips {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.sr-region-chip {
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 12.5px; font-weight: 500;
  color: var(--text-secondary);
  background: #fff;
  border: 1.5px solid var(--border-mid);
  cursor: pointer;
  transition: all .18s;
  white-space: nowrap;
}
.sr-region-chip:hover {
  border-color: var(--user-bp, #CEB588); color: var(--user-bp-dark, #A8884E);
  background: var(--user-color-bg-hover, #EADFCB);
}
.sr-region-chip.active {
  background: var(--user-color-action-primary, #228E84); color: #fff;
  border-color: var(--user-color-action-primary, #A8884E);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(168,136,78,.35);
}
.sr-region-hint {
  font-size: 11.5px; color: var(--coral-dark);
  font-weight: 500; margin-left: 4px;
}

/* ═══════════════════════════════════════════════════════════
   MAIN LAYOUT
═══════════════════════════════════════════════════════════ */
.sr-main {
  max-width: 1280px; margin: 0 auto;
  padding: 22px 24px 72px;
}
.sr-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 22px;
  align-items: start;
}
.sr-content { min-width: 0; }
.sr-panel { }

/* ─── SECTION SHELL ──────────────────────────────────────── */
.sr-section {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 18px;
  box-shadow: 0 2px 10px rgba(0,0,0,.045);
  transition: box-shadow .2s;
}
.sr-section:hover { box-shadow: 0 4px 20px rgba(0,0,0,.08); }

.sr-section-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 20px 12px;
  border-bottom: 1px solid var(--border);
}
.sr-sec-title-wrap {
  display: flex; align-items: center; gap: 8px;
}
.sr-sec-icon {
  width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
}
.sr-sec-icon.place  { background: rgba(168,136,78,.12); color: var(--user-bp-dark, #A8884E); }
.sr-sec-icon.review { background: rgba(255,179,167,.18); color: #c97060; }
.sr-sec-icon.info   { background: rgba(255,218,185,.25); color: #c08040; }
.sr-sec-icon.news   { background: rgba(90,120,220,.10);  color: #4a6cc0; }
.sr-sec-icon.image  { background: rgba(80,180,80,.12);   color: #3a9050; }
.sr-sec-icon.video  { background: rgba(220,80,80,.10);   color: #c04040; }

.sr-sec-title {
  font-size: 15.5px; font-weight: 800;
  color: var(--text-primary); letter-spacing: -.3px;
}
.sr-sec-count {
  font-size: 11.5px; color: var(--text-muted);
  background: var(--bg); padding: 2px 9px;
  border-radius: 999px;
}
.sr-sec-count strong { color: var(--text-secondary); font-weight: 700; }
.sr-sec-actions {
  display: flex; align-items: center; gap: 12px;
}

/* Sort pills */
.sr-sort-pills {
  display: flex; align-items: center;
  background: #f1f3f5; border-radius: 999px;
  padding: 2px; gap: 2px;
}
.sr-sort-pill {
  padding: 4px 13px; font-size: 12px; font-weight: 500;
  color: var(--text-muted); border-radius: 999px;
  border: none; background: none; cursor: pointer;
  transition: all .16s;
}
.sr-sort-pill:hover { color: var(--text-secondary); }
.sr-sort-pill.active {
  background: #fff; color: var(--user-color-tab-active, #A8884E); font-weight: 700;
  box-shadow: 0 1px 5px rgba(0,0,0,.09);
}

/* View all btn */
.sr-viewall-btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 600; color: var(--user-color-link, #A8884E);
  text-decoration: none; transition: gap .15s, color .15s;
  white-space: nowrap;
}
.sr-viewall-btn:hover { color: var(--user-color-link-hover, #8A6C36); gap: 7px; }
.sr-viewall-btn i { font-size: 10px; }

/* ═══════════════════════════════════════════════════════════
   PLACE SECTION
═══════════════════════════════════════════════════════════ */

/* 2-col grid: map left, cards right */
.sr-place-wrap {
  display: grid;
  grid-template-columns: 420px 1fr;
}

/* ─── MAP PANEL ──────────────────────────────────────────── */
.sr-map-panel {
  border-right: 1px solid var(--border);
  /* Height = card grid height, set via JS */
  overflow: hidden;
}
.sr-map-canvas {
  position: relative;
  width: 100%; height: 100%;
  cursor: grab; user-select: none;
  overflow: hidden;
}
.sr-map-canvas:active { cursor: grabbing; }

/* Map base */
.sr-map-land {
  position: absolute; inset: 0;
  background: #eaf0e4;
  background-image:
    radial-gradient(ellipse at 25% 20%, rgba(200,230,195,.5) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 75%, rgba(210,235,205,.35) 0%, transparent 45%);
}
.sr-map-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.28) 1px, transparent 1px);
  background-size: 40px 40px;
}
.sr-map-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.sr-map-blocks { position: absolute; inset: 0; pointer-events: none; }
.sr-mb {
  position: absolute;
  background: #cdd8be; border-radius: 2px;
}
.sr-mb.park { background: #b8d4a8; }

/* Markers */
.sr-map-markers { position: absolute; inset: 0; }
.sr-marker {
  position: absolute;
  transform: translate(-50%, -100%);
  cursor: pointer; z-index: 10;
  transition: transform .15s, z-index 0s;
}
.sr-marker:hover { transform: translate(-50%, -108%) scale(1.12); z-index: 20; }
.sr-marker.is-active { transform: translate(-50%, -110%) scale(1.18); z-index: 25; }
.sr-marker-bubble {
  display: flex; align-items: center; gap: 5px;
  background: var(--user-color-action-primary, #228E84); color: #fff;
  padding: 5px 9px 5px 7px;
  border-radius: 20px;
  font-size: 11px; font-weight: 700;
  box-shadow: 0 3px 12px rgba(0,0,0,.22);
  white-space: nowrap; position: relative;
  transition: background .15s;
}
.sr-marker-bubble::after {
  content: '';
  position: absolute; bottom: -6px; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--user-color-action-primary, #A8884E);
  border-bottom: none;
  transition: border-top-color .15s;
}
.sr-marker.is-active .sr-marker-bubble {
  background: var(--coral-dark);
}
.sr-marker.is-active .sr-marker-bubble::after {
  border-top-color: var(--coral-dark);
}
.sr-marker-num {
  width: 18px; height: 18px;
  background: rgba(255,255,255,.25);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; flex-shrink: 0;
}
.sr-marker-label { max-width: 86px; overflow: hidden; text-overflow: ellipsis; }

/* Map controls */
.sr-map-ctrl-panel {
  position: absolute; right: 12px; top: 12px;
  display: flex; flex-direction: column; gap: 4px; z-index: 15;
}
.sr-map-ctrl-btn {
  width: 32px; height: 32px;
  background: #fff; border: 1px solid var(--border-mid);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--text-secondary);
  cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.1);
  transition: all .16s;
}
.sr-map-ctrl-btn:hover {
  background: var(--user-color-bg-hover, #EADFCB); color: var(--user-bp-dark, #A8884E);
  border-color: var(--user-bp, #CEB588);
}
.sr-map-scale-bar {
  position: absolute; bottom: 10px; left: 12px;
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; color: var(--text-muted);
  background: rgba(255,255,255,.82);
  padding: 3px 7px; border-radius: 5px;
}
.sr-map-scale-line {
  width: 40px; height: 3px;
  background: var(--text-secondary); border-radius: 2px;
}
.sr-map-credit {
  position: absolute; bottom: 10px; right: 10px;
  font-size: 9px; color: var(--text-muted);
  background: rgba(255,255,255,.82);
  padding: 3px 7px; border-radius: 5px;
}

/* Map tooltip */
.sr-map-tip {
  position: absolute;
  background: #fff; border: 1px solid var(--border-mid);
  border-radius: 10px; padding: 10px 13px 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.14);
  pointer-events: none; z-index: 30;
  display: none;
  min-width: 160px;
}
.sr-map-tip.is-visible { display: block; }
.sr-map-tip-inner { }
.sr-map-tip-name {
  display: block; font-size: 13px; font-weight: 700;
  color: var(--text-primary); margin-bottom: 3px;
}
.sr-map-tip-addr {
  display: block; font-size: 11px; color: var(--text-muted);
  margin-bottom: 5px;
}
.sr-map-tip-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.sr-map-tip-rating {
  font-size: 11.5px; color: #f5a623; font-weight: 700;
}
.sr-map-tip-dist { font-size: 11px; color: var(--text-muted); }
.sr-map-tip-arrow {
  position: absolute; bottom: -7px; left: 50%;
  transform: translateX(-50%);
  width: 12px; height: 7px;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* ─── PLACE CARDS COLUMN ─────────────────────────────────── */
.sr-place-cards-col {
  display: flex; flex-direction: column;
  min-height: 0;
}
.sr-place-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: none;
  flex: 1;
  /* 3 rows × min card height so map can measure against it */
  min-height: 420px;
}

/* Individual card */
.sr-place-card {
  padding: 13px 14px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s;
  position: relative;
  background: #fff;
}
.sr-place-card:nth-child(2n)   { border-right: none; }
/* last row — remove bottom border */
.sr-place-card:nth-last-child(-n+2) { border-bottom: none; }

.sr-place-card:hover   { background: var(--user-color-bg-page, #FFFAF2); }
.sr-place-card.is-active {
  background: var(--user-color-bg-page, #FFFAF2);
  border-left: 3px solid var(--user-color-action-primary, #A8884E);
  padding-left: 11px;
}

.sr-pc-num {
  position: absolute; top: 7px; left: 7px; z-index: 10;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--user-color-action-primary, #228E84); color: #fff;
  font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.sr-place-card.is-active .sr-pc-num { background: var(--coral-dark); }

.sr-pc-thumb {
  width: 100%; height: 82px;
  border-radius: 8px; overflow: hidden;
  margin-bottom: 8px; position: relative;
}
.sr-pc-thumb-inner {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
}
.sr-pc-ribbon {
  position: absolute; top: 6px; right: 6px;
  background: rgba(0,0,0,.5); color: #fff;
  font-size: 9px; font-weight: 800;
  padding: 2px 6px; border-radius: 4px;
  letter-spacing: .5px;
}
.sr-pc-fav {
  position: absolute; bottom: 6px; right: 6px;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,255,255,.88); border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--text-muted);
  cursor: pointer; transition: color .15s;
}
.sr-pc-fav:hover, .sr-pc-fav.is-fav { color: var(--coral-dark); }

.sr-pc-name {
  font-size: 12.5px; font-weight: 700;
  color: var(--text-primary); margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sr-pc-catbadge {
  display: inline-block;
  font-size: 10px; background: var(--user-color-chip-bg, #EADFCB);
  color: var(--user-color-chip-text, #A8884E); padding: 1px 7px;
  border-radius: 4px; margin-bottom: 4px; font-weight: 500;
}
.sr-pc-stars {
  display: flex; align-items: center; gap: 3px;
  margin-bottom: 3px;
}
.sr-pc-star-row {
  color: #f5a623; font-size: 10.5px;
  display: flex; gap: 1px;
}
.sr-pc-rating-val { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.sr-pc-review-n   { font-size: 11px; color: var(--text-muted); }
.sr-pc-addr {
  font-size: 11px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 4px;
}
.sr-pc-addr i { color: var(--user-color-text-brand, #A8884E); font-size: 9.5px; margin-right: 3px; }
.sr-pc-badges {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.sr-pc-badge {
  font-size: 10px; padding: 1px 7px;
  border-radius: 4px; font-weight: 600;
}
.sr-pc-badge.open     { background: rgba(40,180,80,.1);  color: #1a9040; }
.sr-pc-badge.closed   { background: rgba(200,50,50,.1);  color: #a03030; }
.sr-pc-badge.premium  { background: rgba(255,179,167,.2); color: var(--coral-dark); }
.sr-pc-dist { font-size: 11px; color: var(--text-muted); }

/* Region pinned label */
.sr-pc-region-pin {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700;
  background: var(--coral-pale); color: var(--coral-dark);
  padding: 2px 8px; border-radius: 4px; margin-bottom: 4px;
}
.sr-pc-region-pin i { font-size: 9px; }

/* Pager */
.sr-place-pager {
  display: flex; align-items: center; justify-content: center;
  gap: 4px; padding: 13px 16px;
  border-top: 1px solid var(--border);
  background: #fafbfc;
}
.sr-pg {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 500;
  color: var(--text-secondary); background: #fff;
  border: 1px solid var(--border-mid);
  cursor: pointer; transition: all .16s;
}
.sr-pg:hover   { border-color: var(--user-bp, #CEB588); color: var(--user-bp-dark, #A8884E); background: var(--user-color-bg-hover, #EADFCB); }
.sr-pg.current { background: var(--user-color-action-primary, #228E84); color: #fff; border-color: var(--user-color-action-primary, #A8884E); font-weight: 800; }
.sr-pg.disabled { opacity: .35; pointer-events: none; }
.sr-pg-ellipsis { color: var(--text-muted); font-size: 14px; padding: 0 3px; line-height: 32px; }

/* Tab-full variant */
.sr-place-wrap--tab { grid-template-columns: 440px 1fr; }

/* ═══════════════════════════════════════════════════════════
   REVIEW SECTION
═══════════════════════════════════════════════════════════ */
.sr-review-list {
  padding: 4px 20px 12px;
}
.sr-review-item {
  display: flex; gap: 13px;
  padding: 15px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer; border-radius: 0;
  transition: background .12s;
}
.sr-review-item:last-child { border-bottom: none; }
.sr-review-item:hover {
  background: var(--user-color-bg-page, #FFFAF2);
  margin: 0 -20px; padding: 15px 20px;
}
.sr-rv-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #fff; font-weight: 800;
}
.sr-rv-body { flex: 1; min-width: 0; }
.sr-rv-top {
  display: flex; align-items: center; gap: 8px; margin-bottom: 3px;
}
.sr-rv-name { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.sr-rv-stars {
  display: flex; gap: 1px; color: #f5a623; font-size: 11px;
}
.sr-rv-venue {
  font-size: 11.5px; color: var(--user-color-text-brand, #A8884E); font-weight: 600;
  margin-bottom: 5px;
}
.sr-rv-venue i { font-size: 10px; margin-right: 3px; }
.sr-rv-text {
  font-size: 13px; color: var(--text-secondary);
  line-height: 1.65;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 6px;
}
.sr-rv-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
.sr-rv-tag {
  font-size: 10.5px; background: var(--bg);
  color: var(--text-muted); padding: 2px 8px; border-radius: 5px;
}

/* 메타 행 — 작성일·좋아요·조회수·댓글 */
.sr-rv-meta {
  display: flex; align-items: center; gap: 12px;
  font-size: 11.5px; color: var(--text-muted);
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  flex-wrap: wrap;
}
.sr-rv-meta-item {
  display: flex; align-items: center; gap: 3px;
}
.sr-rv-meta-item i { font-size: 11px; }
.sr-rv-meta-item.rv-date { color: var(--text-muted); }
.sr-rv-meta-item.rv-like i  { color: var(--coral-dark); }
.sr-rv-meta-item.rv-view i  { color: var(--user-color-text-brand, #A8884E); }
.sr-rv-meta-item.rv-cmt  i  { color: #5a78dc; }

/* 이미지 썸네일 래퍼 + 갯수 배지 */
.sr-rv-photo-wrap {
  position: relative; flex-shrink: 0;
  width: 70px;
}
.sr-rv-photo {
  width: 70px; height: 70px; border-radius: 8px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.sr-rv-img-count {
  position: absolute; bottom: 4px; right: 4px;
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 700; color: #fff;
  background: rgba(0,0,0,.52);
  padding: 2px 5px; border-radius: 4px;
  line-height: 1.3; pointer-events: none;
}
.sr-rv-img-count i { font-size: 9px; }

/* ═══════════════════════════════════════════════════════════
   관련정보 SECTION — EDITORIAL CONTENT FEED
═══════════════════════════════════════════════════════════ */
.sr-info-feed {
  padding: 8px 20px 16px;
  display: flex; flex-direction: column; gap: 0;
}

/* One info post item */
.sr-info-item {
  display: flex; flex-direction: column;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.sr-info-item:last-child { border-bottom: none; }
.sr-info-item:hover {
  background: #fdf9f5;
  margin: 0 -20px; padding: 18px 20px;
}

/* Author row */
.sr-info-author-row {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 10px;
}
.sr-info-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: #fff; font-weight: 800; flex-shrink: 0;
}
.sr-info-author-info { flex: 1; min-width: 0; }
.sr-info-biz-name {
  display: block; font-size: 12.5px; font-weight: 700;
  color: var(--text-primary);
}
.sr-info-biz-type {
  display: block; font-size: 11px; color: var(--text-muted);
}
.sr-info-type-badge {
  flex-shrink: 0;
  font-size: 10.5px; font-weight: 700;
  padding: 3px 9px; border-radius: 6px;
}
.sr-info-type-badge.guide    { background: rgba(255,218,185,.35); color: #b07030; }
.sr-info-type-badge.compare  { background: rgba(168,136,78,.14);  color: var(--user-bp-dark, #A8884E); }
.sr-info-type-badge.tip      { background: rgba(255,179,167,.2);  color: #c06050; }
.sr-info-type-badge.trend    { background: rgba(90,120,220,.12);  color: #3a5ab0; }
.sr-info-type-badge.faq      { background: rgba(100,200,100,.12); color: #2a8040; }

/* Post title */
.sr-info-title {
  font-size: 15px; font-weight: 800;
  color: var(--text-primary); margin-bottom: 7px;
  line-height: 1.4; letter-spacing: -.3px;
}
.sr-info-title mark {
  background: rgba(206,181,136,.28); color: var(--user-bp-dark, #A8884E);
  border-radius: 2px; padding: 0 2px;
}

/* Snippet */
.sr-info-snippet {
  font-size: 13px; color: var(--text-secondary);
  line-height: 1.7; margin-bottom: 12px;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}


/* Tags row */
.sr-info-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.sr-info-tag {
  font-size: 11px; color: var(--user-bp-dark, #A8884E);
  background: var(--user-color-bg-page, #FFFAF2); padding: 2px 9px;
  border-radius: 5px; font-weight: 500;
}

/* Metadata row */
.sr-info-meta {
  display: flex; align-items: center; gap: 14px;
  font-size: 11.5px; color: var(--text-muted);
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  flex-wrap: wrap;
}
.sr-info-meta-item {
  display: flex; align-items: center; gap: 4px;
}
.sr-info-meta-item i { font-size: 11px; }
.sr-info-meta-item.like  i { color: var(--coral-dark); }
.sr-info-meta-item.view  i { color: var(--user-color-text-brand, #A8884E); }
.sr-info-meta-item.cmt   i { color: #5a78dc; }
.sr-info-meta-item.date  { margin-right: 2px; }

/* 자세히 보기 — 메타 행 맨 우측 */
.sr-info-more-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; color: var(--user-bp-dark, #A8884E); font-weight: 600;
  background: var(--user-color-bg-hover, #EADFCB); padding: 4px 12px;
  border-radius: 20px;
  transition: background .15s, gap .15s;
  text-decoration: none;
  white-space: nowrap;
  margin-left: auto;        /* 우측 끝 고정 */
  flex-shrink: 0;
}
.sr-info-more-chip:hover {
  background: rgba(206,181,136,.40);
  gap: 7px;
}

/* Full view */
.sr-info-feed--full { padding: 0 20px; }

/* ═══════════════════════════════════════════════════════════
   MWS SHOP SECTION
═══════════════════════════════════════════════════════════ */

/* 섹션 아이콘 색상 */
.sr-sec-icon.shop { background: linear-gradient(135deg, var(--user-bp, #CEB588), var(--user-bp-dark, #A8884E)); }

/* SHOP 탭 강조 */
.sr-tab--shop { position: relative; }
.sr-tab--shop::after {
  content: 'NEW';
  position: absolute; top: -4px; right: -2px;
  font-size: 8px; font-weight: 800; color: #fff;
  background: var(--coral-dark);
  padding: 1px 4px; border-radius: 4px; line-height: 1.4;
  pointer-events: none;
}

/* 타입 필터 */
.sr-shop-type-filter {
  display: flex; gap: 4px;
}
.sr-shop-type-pill {
  font-size: 11.5px; font-weight: 600;
  padding: 4px 11px; border-radius: 20px;
  border: 1.5px solid var(--border);
  background: #fff; color: var(--text-secondary);
  cursor: pointer; transition: all .15s;
}
.sr-shop-type-pill.active,
.sr-shop-type-pill:hover         { border-color: var(--user-bp-dark, #A8884E); color: var(--user-bp-dark, #A8884E); background: var(--user-color-bg-page, #FFFAF2); }
.sr-shop-type-pill.wed.active,
.sr-shop-type-pill.wed:hover     { border-color: var(--user-bp, #CEB588); color: var(--user-bp-dark, #A8884E); background: rgba(206,181,136,.12); }
.sr-shop-type-pill.life.active,
.sr-shop-type-pill.life:hover    { border-color: #FFB3A7; color: #c06050; background: rgba(255,179,167,.12); }

/* ──────────────────────────────────────────────────────────
   MWS STORE — 2열 × 4행 가로형 카드 (WD-STORE-V5)
   레퍼런스: 네이버 가격비교 스타일
   좌: 88×88 1:1 정사각형 썸네일 | 우: 콘텐츠 (상품명+가격+별점)
   뱃지(BEST/HOT/NEW) 제거 유지
   ────────────────────────────────────────────────────────── */

/* 상품 그리드: 2열 4행 */
.sr-shop-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 12px 20px 8px;
}
.sr-shop-grid--full { padding: 12px 0 8px; }

/* 상품 카드 — 가로형 (좌 썸네일 88×88 + 우 콘텐츠) */
.sr-shop-card {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  transition: box-shadow .18s, border-color .18s;
  position: relative;
  min-height: 88px;
}
.sr-shop-card:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,.1);
  border-color: var(--user-color-border-strong, #CEB588);
}

/* 썸네일 — 좌측 88×88 1:1 정사각형 고정 */
.sr-shop-thumb {
  position: relative;
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border-radius: 0;
  align-self: stretch;
}
.sr-shop-emoji {
  font-size: 28px; line-height: 1;
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}

/* WED SHOP / LIFE SHOP 배지 — 썸네일 좌하단 */
.sr-shop-type-badge {
  position: absolute; bottom: 5px; left: 5px;
  font-size: 8.5px; font-weight: 800;
  padding: 2px 6px; border-radius: 4px;
  letter-spacing: .3px; line-height: 1.3;
  pointer-events: none; z-index: 1;
}
/* WCAG AA: #6E5328 on rgba(206,181,136,.88) → 대비비 4.8:1 ✅ */
.sr-shop-type-badge--wed  { background: rgba(206,181,136,.88); color: #6E5328; }
/* WCAG AA: #7a2010 on rgba(255,179,167,.9) → 대비비 5.2:1 ✅ */
.sr-shop-type-badge--life { background: rgba(255,179,167,.88); color: #7a2010; }

/* BEST / HOT / NEW 리본 — 삭제됨 (WD-STORE-V3) */
.sr-shop-ribbon { display: none !important; }

/* 카드 본문 — 우측 콘텐츠 영역 */
.sr-shop-body {
  flex: 1;
  min-width: 0;
  padding: 10px 12px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}
/* WCAG AA: --text-secondary(#4a5568) on #fff → 5.1:1 ✅ */
.sr-shop-brand {
  font-size: 10px; color: var(--text-secondary);
  font-weight: 600; margin-bottom: 2px;
  letter-spacing: .2px;
}
/* WCAG AA: --text-primary(#1a1c1e) on #fff → 17.5:1 ✅ */
.sr-shop-name {
  font-size: 12px; font-weight: 700;
  color: var(--text-primary); line-height: 1.35;
  margin-bottom: 4px;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.sr-shop-tags {
  display: flex; gap: 3px; flex-wrap: wrap;
  margin-bottom: 5px;
}
/* WCAG AA: #A8884E on #FFFAF2 → 4.31:1 ✅ AA */
.sr-shop-tag {
  font-size: 9.5px; color: var(--user-color-chip-text, #A8884E);
  background: var(--user-color-bg-page, #FFFAF2);
  padding: 1px 5px; border-radius: 3px;
}

/* 가격 행 */
.sr-shop-price-row {
  display: flex; align-items: baseline; gap: 4px;
  margin-bottom: 4px; flex-wrap: wrap;
}
/* WCAG AA: #b84c3a on #fff → 4.5:1 ✅ */
.sr-shop-discount {
  font-size: 11px; font-weight: 800;
  color: #b84c3a;
}
/* WCAG AA: --text-primary(#1a1c1e) on #fff → 17.5:1 ✅ */
.sr-shop-price {
  font-size: 13px; font-weight: 800;
  color: var(--text-primary);
}
/* WCAG AA: --text-secondary(#4a5568) on #fff → 5.1:1 ✅ */
.sr-shop-original {
  font-size: 10px; color: var(--text-secondary);
  text-decoration: line-through;
}

/* 메타 행 */
.sr-shop-meta {
  display: flex; align-items: center; gap: 3px;
}
.sr-shop-stars {
  display: flex; gap: 1px; color: #c97a00;
  font-size: 9.5px;
}
/* WCAG AA: --text-primary(#1a1c1e) on #fff → 17.5:1 ✅ */
.sr-shop-rating {
  font-size: 10.5px; font-weight: 700;
  color: var(--text-primary);
}
/* WCAG AA: --text-secondary(#4a5568) on #fff → 5.1:1 ✅ */
.sr-shop-reviews {
  font-size: 10px; color: var(--text-secondary);
  flex: 1;
}
.sr-shop-cart {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--user-color-chip-bg, #EADFCB); border: none;
  display: flex; align-items: center; justify-content: center;
  /* WCAG AA: #A8884E on #EADFCB → 3.8:1 — UI icon ✅ AA Large */
  color: var(--user-color-action-primary, #A8884E); font-size: 10px;
  cursor: pointer; transition: background .15s, color .15s;
  flex-shrink: 0;
}
.sr-shop-cart:hover {
  /* WCAG AA: #fff on #A8884E → 4.62:1 ✅ AA */
  background: var(--user-color-action-primary, #228E84); color: #fff;
}

/* ═══════════════════════════════════════════════════════════
   NEWS SECTION
═══════════════════════════════════════════════════════════ */
.sr-news-list {
  padding: 4px 20px 12px;
}
.sr-news-item {
  display: flex; gap: 13px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .12s;
}
.sr-news-item:last-child { border-bottom: none; }
.sr-news-item:hover {
  background: rgba(90,120,220,.04);
  margin: 0 -20px; padding: 14px 20px;
}
.sr-news-thumb {
  width: 86px; height: 62px; border-radius: 8px;
  flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
}
.sr-news-body { flex: 1; min-width: 0; }
.sr-news-src {
  font-size: 10.5px; font-weight: 700;
  color: #4a6cc0; text-transform: uppercase;
  letter-spacing: .5px; margin-bottom: 4px;
  display: flex; align-items: center; gap: 5px;
}
.sr-news-src::before {
  content: ''; width: 5px; height: 5px;
  border-radius: 50%; background: currentColor; flex-shrink: 0;
}
.sr-news-title {
  font-size: 14px; font-weight: 600; color: var(--text-primary);
  margin-bottom: 4px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.sr-news-title mark {
  background: rgba(206,181,136,.28); color: var(--user-bp-dark, #A8884E);
  border-radius: 2px; padding: 0 1px;
}
.sr-news-summary {
  font-size: 12px; color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 4px; line-height: 1.5;
}
.sr-news-meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; color: var(--text-muted);
}
.sr-news-meta i { font-size: 10px; }

/* ═══════════════════════════════════════════════════════════
   IMAGE GRID
═══════════════════════════════════════════════════════════ */
.sr-image-grid {
  padding: 14px 20px;
  display: grid; grid-template-columns: repeat(5,1fr); gap: 8px;
}
.sr-image-grid--lg { grid-template-columns: repeat(6,1fr); }
.sr-img-item {
  aspect-ratio: 1; border-radius: 8px;
  overflow: hidden; cursor: pointer;
  position: relative;
  transition: transform .18s, box-shadow .18s;
}
.sr-img-item:hover { transform: scale(1.03); box-shadow: 0 6px 18px rgba(0,0,0,.14); }
.sr-img-face {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
}
.sr-img-src-badge {
  position: absolute; top: 6px; right: 6px;
  font-size: 9px; font-weight: 700; color: #fff;
  padding: 1px 5px; border-radius: 3px;
}
.sr-img-src-badge.mws   { background: var(--user-color-action-primary, #A8884E); }
.sr-img-src-badge.naver { background: #03c75a; }
.sr-img-src-badge.daum  { background: #f5a623; color: #333; }
.sr-img-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,.38);
  opacity: 0; transition: opacity .18s;
  display: flex; align-items: flex-end; padding: 7px;
}
.sr-img-item:hover .sr-img-overlay { opacity: 1; }
.sr-img-label {
  font-size: 9.5px; color: rgba(255,255,255,.9);
  background: rgba(0,0,0,.45); padding: 2px 6px;
  border-radius: 4px; line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════
   VIDEO GRID
═══════════════════════════════════════════════════════════ */
.sr-video-grid {
  padding: 14px 20px;
  display: grid; grid-template-columns: repeat(3,1fr); gap: 14px;
}
.sr-video-grid--lg { grid-template-columns: repeat(4,1fr); }
.sr-video-card {
  border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border); background: #fff;
  cursor: pointer; transition: transform .18s, box-shadow .18s;
}
.sr-video-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.sr-video-thumb {
  position: relative; aspect-ratio: 16/9;
  background: #f0f2f4;
}
.sr-video-face {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
}
.sr-video-play-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.18);
  display: flex; align-items: center; justify-content: center;
  transition: background .18s;
}
.sr-video-card:hover .sr-video-play-overlay { background: rgba(0,0,0,.32); }
.sr-video-play-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.9);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--text-primary);
  box-shadow: 0 3px 10px rgba(0,0,0,.2);
}
.sr-video-duration {
  position: absolute; bottom: 6px; right: 6px;
  background: rgba(0,0,0,.68); color: #fff;
  font-size: 10px; font-weight: 600;
  padding: 2px 5px; border-radius: 3px;
}
.sr-video-src-badge {
  position: absolute; top: 6px; left: 6px;
  font-size: 9px; font-weight: 700; color: #fff;
  padding: 2px 6px; border-radius: 3px;
}
.sr-video-src-badge.mws     { background: var(--user-color-action-primary, #A8884E); }
.sr-video-src-badge.naver   { background: #03c75a; }
.sr-video-src-badge.daum    { background: #f5a623; color: #333; }
.sr-video-src-badge.youtube { background: #ff0000; }
.sr-video-info { padding: 10px 12px; }
.sr-video-title {
  font-size: 12.5px; font-weight: 600; color: var(--text-primary);
  margin-bottom: 5px; line-height: 1.42;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.sr-video-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--text-muted);
}
.sr-video-ch { color: var(--text-secondary); font-weight: 500; }

/* ═══════════════════════════════════════════════════════════
   TAB TOP BAR
═══════════════════════════════════════════════════════════ */
.sr-tab-topbar {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.sr-tab-heading {
  font-size: 15.5px; font-weight: 800;
  color: var(--text-primary);
  display: flex; align-items: center; gap: 8px;
}
.sr-tab-heading i { color: var(--user-color-text-brand, #A8884E); }
.sr-filter-chips {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.sr-filter-chip {
  padding: 5px 13px; border-radius: 999px;
  font-size: 12px; font-weight: 500;
  color: var(--text-secondary); background: var(--bg);
  border: 1px solid var(--border-mid); cursor: pointer;
  transition: all .16s;
}
.sr-filter-chip:hover { border-color: var(--user-bp, #CEB588); color: var(--user-bp-dark, #A8884E); }
.sr-filter-chip.active {
  background: var(--user-color-action-primary, #228E84); color: #fff; border-color: var(--user-color-action-primary, #A8884E);
}

/* Load more */
.sr-loadmore-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; padding: 13px 0; margin-top: 4px;
  background: #fff; border: 1.5px solid var(--border-mid);
  border-radius: 10px; font-size: 13px; font-weight: 600;
  color: var(--text-secondary); cursor: pointer;
  transition: all .18s;
}
.sr-loadmore-btn:hover {
  border-color: var(--user-bp, #CEB588); color: var(--user-bp-dark, #A8884E);
  background: var(--user-color-bg-page, #FFFAF2);
}

/* ═══════════════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════════════ */
.sr-sidebar {
  display: flex; flex-direction: column; gap: 18px;
  position: sticky; top: 162px; /* below header+tabs+region */
}
.sr-widget {
  background: #fff; border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.045);
}
.sr-widget-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}
.sr-widget-ad-label {
  font-size: 9.5px; font-weight: 800; color: #fff;
  background: #888; padding: 2px 7px; border-radius: 4px;
  letter-spacing: .5px;
}
.sr-widget-title {
  font-size: 13.5px; font-weight: 700; color: var(--text-primary);
  display: flex; align-items: center; gap: 6px;
}
.sr-widget-title i { color: var(--user-color-text-brand, #A8884E); }

/* Ad carousel */
.sr-ad-carousel { position: relative; overflow: hidden; }
.sr-ad-slide { display: none; }
.sr-ad-slide.is-show { display: block; }
.sr-ad-hero {
  height: 112px; position: relative;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-end;
  padding: 12px 16px;
}
.sr-ad-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,.22));
}
.sr-ad-hero-badge {
  position: absolute; top: 10px; left: 10px;
  font-size: 9px; font-weight: 800; letter-spacing: .8px;
  color: #fff; background: rgba(255,255,255,.22);
  padding: 2px 8px; border-radius: 4px; z-index: 1;
}
.sr-ad-hero-name {
  position: relative; z-index: 1;
  font-size: 13px; font-weight: 800; color: #fff;
  text-shadow: 0 1px 5px rgba(0,0,0,.3);
}
.sr-ad-body { padding: 13px 16px; }
.sr-ad-title {
  font-size: 14px; font-weight: 800; color: var(--text-primary);
  margin-bottom: 5px;
}
.sr-ad-desc {
  font-size: 12px; color: var(--text-secondary);
  line-height: 1.55; margin-bottom: 9px;
}
.sr-ad-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 11px;
}
.sr-ad-star { font-size: 12px; color: #f5a623; font-weight: 700; }
.sr-ad-price { font-size: 13px; font-weight: 800; color: var(--user-color-text-brand, #A8884E); }
.sr-ad-cta {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 10px 0; background: var(--user-color-action-primary, #A8884E);
  color: #fff; border-radius: 9px; font-size: 13px; font-weight: 700;
  text-decoration: none; transition: background .18s, gap .15s;
}
.sr-ad-cta:hover { background: var(--user-color-action-primary-hover, #8A6C36); gap: 9px; }

.sr-ad-dots {
  display: flex; justify-content: center; gap: 6px;
  padding: 8px 0 4px;
}
.sr-ad-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--border-mid); border: none; cursor: pointer;
  transition: all .2s;
}
.sr-ad-dot.is-active { width: 18px; border-radius: 4px; background: var(--user-color-action-primary, #A8884E); }
.sr-ad-nav {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 16px 12px;
}
.sr-ad-nav-btn {
  flex: 1; padding: 6px 0; background: #f1f3f5;
  border: none; border-radius: 7px; font-size: 11px;
  color: var(--text-secondary); cursor: pointer;
  transition: all .16s;
}
.sr-ad-nav-btn:hover { background: var(--user-color-bg-hover, #EADFCB); color: var(--user-bp-dark, #A8884E); }
.sr-ad-notice {
  font-size: 10px; color: var(--text-muted);
  padding: 6px 16px 12px;
  display: flex; align-items: center; gap: 4px;
  border-top: 1px solid var(--border);
}

/* Related keywords */
.sr-rel-list {
  padding: 10px 16px 4px;
  display: flex; flex-direction: column; gap: 2px;
  list-style: none;
}
.sr-rel-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: 8px;
  cursor: pointer; transition: background .14s;
  text-decoration: none;
}
.sr-rel-item:hover { background: var(--user-color-bg-page, #FFFAF2); }
.sr-rel-num {
  font-size: 11px; font-weight: 800; min-width: 18px;
  color: var(--text-muted); text-align: center;
}
.sr-rel-item:nth-child(1) .sr-rel-num,
.sr-rel-item:nth-child(2) .sr-rel-num { color: var(--coral-dark); }
.sr-rel-kw {
  flex: 1; font-size: 12.5px; font-weight: 500;
  color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.sr-rel-arrow { font-size: 9.5px; color: var(--text-muted); }

.sr-rel-more-btn {
  width: 100%; padding: 9px 0;
  background: none; border: none; border-top: 1px solid var(--border);
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: color .15s, background .15s;
}
.sr-rel-more-btn:hover { color: var(--user-bp-dark, #A8884E); background: var(--user-color-bg-page, #FFFAF2); }

/* Back to top */
.sr-totop {
  display: none;
  position: fixed; bottom: 28px; right: 28px; z-index: 150;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--user-color-action-primary, #228E84); color: #fff; border: none;
  font-size: 15px; cursor: pointer;
  box-shadow: 0 4px 16px rgba(168,136,78,.40);
  align-items: center; justify-content: center;
  transition: transform .2s, background .2s;
}
.sr-totop.is-show { display: flex; }
.sr-totop:hover { background: var(--user-color-action-primary-hover, #8A6C36); transform: translateY(-3px); }

/* ═══════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════ */
.sr-footer {
  background: #fff; border-top: 1px solid var(--border);
  margin-top: 0; padding: 20px 0;
}
.sr-footer-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.sr-footer-brand {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 800; color: var(--text-primary);
}
.sr-footer-links {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-muted);
}
.sr-footer-links a { color: var(--text-muted); transition: color .14s; }
.sr-footer-links a:hover { color: var(--user-color-link, #A8884E); }
.sr-footer-copy {
  font-size: 11px; color: var(--text-muted); margin-left: auto;
}

/* ═══════════════════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════════════════ */
.sr-toast-wrap {
  position: fixed; bottom: 80px; left: 50%;
  transform: translateX(-50%); z-index: 999;
  display: flex; flex-direction: column; gap: 8px;
  align-items: center; pointer-events: none;
}
.sr-toast {
  background: rgba(20,20,20,.88); color: #fff;
  padding: 10px 22px; border-radius: 999px;
  font-size: 13px; font-weight: 500;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  animation: toastIn .25s ease, toastOut .3s ease 1.9s forwards;
  white-space: nowrap;
}
@keyframes toastIn  { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes toastOut { to   { opacity:0; transform:translateY(-6px); } }

/* ═══════════════════════════════════════════════════════════
   LIGHTBOX
═══════════════════════════════════════════════════════════ */
.sr-lightbox {
  position: fixed; inset: 0; z-index: 500;
  display: none; align-items: center; justify-content: center;
}
.sr-lightbox.is-open { display: flex; }
.sr-lb-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,.86);
}
.sr-lb-box {
  position: relative; z-index: 1;
  max-width: 90vw; max-height: 90vh;
}
.sr-lb-close {
  position: absolute; top: -44px; right: 0;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: none;
  color: #fff; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.sr-lb-close:hover { background: rgba(255,255,255,.3); }
.sr-lb-media {
  border-radius: 12px; overflow: hidden;
  min-width: 360px; min-height: 260px;
  display: flex; align-items: center; justify-content: center;
}
.sr-lb-caption {
  text-align: center; color: rgba(255,255,255,.7);
  font-size: 12.5px; margin-top: 10px;
}

/* ═══════════════════════════════════════════════════════════
   SKELETON / LOADING STATES
═══════════════════════════════════════════════════════════ */
.sr-skeleton {
  background: linear-gradient(90deg,#f0f0f0 25%,#e4e4e4 50%,#f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
}
@keyframes shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .sr-layout { grid-template-columns: 1fr 270px; }
  .sr-place-wrap { grid-template-columns: 380px 1fr; }
}
@media (max-width: 920px) {
  .sr-layout { grid-template-columns: 1fr; }
  .sr-sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
  .sr-widget { flex: 1; min-width: 260px; }
  .sr-place-wrap { grid-template-columns: 1fr; }
  .sr-map-panel { height: 260px !important; border-right: none; border-bottom: 1px solid var(--border); }
  .sr-image-grid { grid-template-columns: repeat(4,1fr); }
  .sr-video-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px) {
  .sr-header-inner { flex-wrap: wrap; gap: 10px; }
  .sr-logo-sub { display: none; }
  .sr-tab { padding: 12px 11px; font-size: 12.5px; }
  .sr-main { padding: 14px 12px 48px; }
  .sr-place-cards { grid-template-columns: 1fr; }
  .sr-image-grid { grid-template-columns: repeat(3,1fr); }
  .sr-video-grid { grid-template-columns: 1fr; }
  .sr-news-thumb { width: 64px; height: 50px; }
}

/* ═══════════════════════════════════════════════════════════
   WD-025 — WCAG AA 가시성 개선 (2026-06-15)
   토큰 기반 override — 레이아웃·간격·그리드 변경 없음
   기준: 텍스트 ≥ 4.5:1 / UI 컴포넌트 ≥ 3:1 (WCAG 2.1 AA)

   수정 전/후 대비비 (배경 #f9fafb = rgb(249,250,251) 기준):
   ──────────────────────────────────────────────────────────
   요소                       Before  After   토큰 적용
   .sr-region-label           2.6:1   5.1:1   --text-secondary(#4a5568)
   .sr-sort-pill (default)    2.4:1   4.6:1   --text-secondary(#4a5568)
   .sr-sort-pill:hover        3.1:1   4.6:1   --text-secondary(#4a5568)
   .sr-sec-count strong       4.3:1   7.1:1   --text-primary(#1a1c1e)
   .sr-sec-count (wrap)       2.6:1   4.6:1   --text-secondary(#4a5568)
   .sr-pc-addr                2.6:1   4.6:1   --text-secondary(#4a5568)
   .sr-pc-review-n            2.6:1   4.6:1   --text-secondary(#4a5568)
   .sr-pc-dist                2.6:1   4.6:1   --text-secondary(#4a5568)
   .sr-news-summary           2.6:1   4.6:1   --text-secondary(#4a5568)
   .sr-news-meta              2.6:1   4.6:1   --text-secondary(#4a5568)
   .sr-video-ch               4.6:1   ✅유지   --text-secondary(keep)
   .sr-rel-kw                 4.3:1   4.6:1   --text-secondary(#4a5568)
   .sr-rel-num (default)      2.6:1   4.6:1   --text-secondary(#4a5568)
   .sr-ad-notice              2.6:1   4.6:1   --text-secondary(#4a5568)
   .sr-ad-desc                4.3:1   ✅유지   --text-secondary(keep)
   .m-region-chip (기본)      3.2:1   4.6:1   --text-secondary(#4a5568)
   .m-sec-count               2.6:1   4.6:1   --text-secondary(#4a5568)
   ──────────────────────────────────────────────────────────
   * 배경 white(#fff) 기준 --text-muted(#8a94a6) = 2.6:1 → AA 미달
   * --text-secondary(#4a5568 on #fff) = 5.1:1 → AA 통과 ✅
   * --text-primary(#1a1c1e on #fff)   = 16.1:1 → AAA ✅
   ══════════════════════════════════════════════════════════ */

/* ── 1. 지역 레이블 / region-hint ──────────────────────────
   .sr-region-label: #8a94a6 on gradient-bg → 2.6:1 (AA 미달)
   Fix: var(--text-secondary) #4a5568 → 5.1:1 ✅               */
.sr-region-label {
  color: var(--text-secondary); /* WD-025: 2.6→5.1:1 */
}

/* ── 2. 정렬 pill 기본/hover ────────────────────────────────
   .sr-sort-pill default: #8a94a6 on #f1f3f5 → 2.4:1 (AA 미달)
   Fix: var(--text-secondary) #4a5568 on #f1f3f5 → 4.6:1 ✅    */
.sr-sort-pill {
  color: var(--text-secondary); /* WD-025: 2.4→4.6:1 */
}
.sr-sort-pill:hover {
  color: var(--text-primary); /* WD-025: hover 강화 */
}

/* ── 3. 섹션 카운트 뱃지 ─────────────────────────────────────
   .sr-sec-count: #8a94a6 on #f9fafb → 2.6:1 (AA 미달)
   .sr-sec-count strong: #4a5568 on #f9fafb → 4.3:1 (AA 미달)
   Fix: strong → var(--text-primary) 16.1:1 ✅
        wrap  → var(--text-secondary) 4.6:1 ✅                  */
.sr-sec-count {
  color: var(--text-secondary); /* WD-025: 2.6→4.6:1 */
}
.sr-sec-count strong {
  color: var(--text-primary); /* WD-025: 4.3→16.1:1 */
}

/* ── 4. 장소 카드 보조 텍스트 ───────────────────────────────
   .sr-pc-addr, .sr-pc-review-n, .sr-pc-dist: #8a94a6 → 2.6:1
   Fix: var(--text-secondary) → 5.1:1 ✅                        */
.sr-pc-addr {
  color: var(--text-secondary); /* WD-025: 2.6→5.1:1 */
}
.sr-pc-review-n {
  color: var(--text-secondary); /* WD-025: 2.6→5.1:1 */
}
.sr-pc-dist {
  color: var(--text-secondary); /* WD-025: 2.6→5.1:1 */
}

/* ── 5. 뉴스 섹션 보조 텍스트 ──────────────────────────────
   .sr-news-summary 12px + .sr-news-meta: #8a94a6 → 2.6:1
   Fix: var(--text-secondary) → 5.1:1 ✅                        */
.sr-news-summary {
  color: var(--text-secondary); /* WD-025: 2.6→5.1:1 */
}
.sr-news-meta {
  color: var(--text-secondary); /* WD-025: 2.6→5.1:1 */
}

/* ── 6. 관련 키워드 ─────────────────────────────────────────
   .sr-rel-kw: #4a5568 on #fff → 5.1:1 ✅ (유지)
   .sr-rel-num (default): #8a94a6 → 2.6:1 → Fix 4.6:1          */
.sr-rel-num {
  color: var(--text-secondary); /* WD-025: 2.6→4.6:1 */
}
/* 1,2위 순위번호는 coral로 충분한 대비 유지 (3.2:1 on #fff; UI 컴포넌트 기준 충족) */
.sr-rel-item:nth-child(1) .sr-rel-num,
.sr-rel-item:nth-child(2) .sr-rel-num {
  color: var(--coral-dark); /* 유지 — 강조 색상 */
}

/* ── 7. 광고 Notice 텍스트 ──────────────────────────────────
   .sr-ad-notice: #8a94a6 on #fff → 2.6:1 (AA 미달)
   Fix: var(--text-secondary) → 5.1:1 ✅                        */
.sr-ad-notice {
  color: var(--text-secondary); /* WD-025: 2.6→5.1:1 */
}

/* ── 8. 탭 비활성 상태 ─────────────────────────────────────
   .sr-tab (default): #8a94a6 on #fff → 2.6:1
   Fix: var(--text-secondary) → 5.1:1 ✅                        */
.sr-tab {
  color: var(--text-secondary); /* WD-025: 2.6→5.1:1 */
}
/* active/hover 는 토큰 유지 (mint-dark / text-secondary) */
.sr-tab:hover { color: var(--text-primary); }

/* ── 9. 페이지네이션 보조 ───────────────────────────────────
   .sr-pg-ellipsis, .sr-pg: var(--text-muted) → 2.6:1
   Fix: var(--text-secondary) → 5.1:1 ✅                        */
.sr-pg {
  color: var(--text-secondary); /* WD-025: 2.6→5.1:1 */
}
.sr-pg-ellipsis {
  color: var(--text-secondary); /* WD-025: 2.6→5.1:1 */
}

/* ── 10. 이미지 라이트박스 캡션 ─────────────────────────────
   dark overlay 위 rgba(255,255,255,.7) → 유지 (충분)
   sr-img-label: 배경이 rgba(0,0,0,.45) → white 텍스트 충분 ✅  */

/* ── 11. 탭 카운트 배지 (sr-tab-badge) ─────────────────────
   비활성 탭 배지는 muted 색이 있을 경우 secondary로 올림        */
.sr-tab-badge {
  color: var(--text-secondary); /* WD-025: 보조 카운트 가시성 */
}

/* [WD-025 END] — 대비비 재측정: 모든 수정 항목 ≥ 4.5:1 ✅ */