/* ============ Reset & Base ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scrollbar-gutter: stable;
}

/* ============ Accessibility ============ */
:focus-visible {
  outline: 2px solid #facc15;
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 9999;
  padding: 8px 16px;
  background: #1e293b;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 8px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mobile-bottom-nav {
  display: none;
}

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

:root {
  --primary: #374151;
  --primary-dark: #1f2937;
  --primary-light: #e5e7eb;
  --bg: #f7f8ff;
  --bg-inner: #f8fafc;
  --card-bg: #ffffff;
  --text: #1e293b;
  --text-secondary: #64748b;
  --border: #e2e8f0;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.06);
  --survey-active: #0891b2;
  --survey-closed: #ea580c;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans KR', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
}

body.popup-open {
  overflow: hidden;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============ Header ============ */
.header {
  background: #191919;
  border-bottom: 1px solid #111;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 200;
}
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  position: relative;
}
.header-inner .logo {
  position: absolute;
  left: 0;
}
.header-inner .header-nav {
  position: absolute;
  right: 0;
}
/* Search Bar */
.search-bar-wrap {
  position: relative;
  z-index: 99;
  background: var(--bg);
  padding: 10px 24px;
}
.search-bar {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  border: 2px solid #facc15;
  border-radius: 999px;
  overflow: hidden;
  background: var(--card-bg);
}
.search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  padding: 8px 16px;
}
.search-input::placeholder { color: #aaa; }
.search-btn {
  border: none;
  background: transparent;
  color: #facc15;
  cursor: pointer;
  padding: 8px 14px;
  display: flex;
  align-items: center;
}
.search-btn:hover { color: var(--primary); }

/* Search Results */
.search-results-wrap {
  padding: 24px;
  background: var(--bg);
  min-height: 50vh;
}
.search-results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.search-results-header h2 { font-size: 16px; font-weight: 700; }
/* Search result cards - compact */
#searchResultProducts { max-width: 900px; margin: 0 auto; }
#searchResultYoutube { max-width: 900px; margin: 16px auto 0; padding-top: 16px; border-top: 1px solid #ccc; }
#searchResultProducts .menu-list { gap: 15px; }
#searchResultProducts .menu-list-col { gap: 15px; }
#searchResultProducts .menu-card { font-size: 12px; }
#searchResultProducts .menu-card-image-wrap { height: 120px; }
#searchResultProducts .menu-card-summary { padding: 8px 10px; gap: 2px; }
#searchResultProducts .menu-name { font-size: 13px; }
#searchResultProducts .menu-price { font-size: 18px; }
#searchResultProducts .menu-card-price-row { gap: 12px; }
#searchResultProducts .menu-name-row { flex-wrap: wrap; align-items: center; gap: 3px; }
#searchResultProducts .menu-name-row .rep-badge { order: 0; }
#searchResultProducts .menu-name-row .category-badge { order: 10; margin-top: 0; }
#searchResultProducts .menu-name-row::after { content: ''; flex-basis: 100%; height: 0; order: 1; }
#searchResultProducts .menu-comment-form { display: none; }
#searchResultProducts .menu-comment-panel { display: none; }

/* Search chart + ranking layout */
.search-chart-layout {
  display: flex;
  gap: 16px;
  max-width: 900px;
  margin: 0 auto 16px;
}
.search-chart-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.search-chart-main .chart-section { flex: 1; display: flex; flex-direction: column; }
.search-chart-sidebar { width: 240px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; }
.search-chart-sidebar .sidebar-panel { padding: 12px; }
.search-chart-sidebar .sidebar-title { margin-bottom: 8px; padding-bottom: 6px; font-size: 13px; }
@media (max-width: 768px) {
  .search-chart-layout { flex-direction: column; }
  .search-chart-sidebar { width: 100%; }
}

.search-results-subtitle { font-size: 14px; font-weight: 700; margin-bottom: 12px; }

.logo {
  color: #facc15;
  display: flex;
  align-items: center;
  gap: 0;
  line-height: 1;
  text-decoration: none;
}
.logo:hover {
  text-decoration: none;
}
.logo-img {
  height: 30px;
  width: auto;
  display: block;
}
.logo-stack {
  display: flex;
  align-items: baseline;
  gap: 4px;
  line-height: 1;
}
.logo-word {
  display: block;
  color: #facc15;
}
.logo-word-main {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.04em;
}
.logo-word-sub {
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.header-nav a {
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  font-weight: 500;
  margin-left: 24px;
  transition: color 0.2s;
}
.header-nav a:hover { color: white; text-decoration: none; }
.header-identity-nickname {
  background: rgba(255,255,255,0.12);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: middle;
}
.header-identity-login {
  font-size: 13px;
  opacity: 0.7;
}
.header-identity-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
  font-size: 0;
  line-height: 1;
  vertical-align: middle;
}
.header-identity-icon:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(250,204,21,0.55);
}
.header-identity-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.9;
}

/* ============ Container ============ */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 0;
}

/* ============ Category Tabs (Chrome-style) ============ */
.category-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  height: 100%;
  gap: 6px;
  padding: 0 4px;
}
.category-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 100px;
  height: 32px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  position: relative;
  flex-shrink: 0;
}
.category-tab:hover {
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.25);
}
.category-tab.active {
  background: #facc15;
  color: #1a1a1a;
  font-weight: 700;
  border-color: #facc15;
  z-index: 1;
}
.category-tab .icon { font-size: 15px; line-height: 1; }

/* ============ Admin Brand/News Category Tabs (pill style) ============ */
#brandCategoryTabs,
#newsCategoryTabs {
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
#brandCategoryTabs .category-tab,
#newsCategoryTabs .category-tab {
  width: auto;
  min-width: unset;
  max-width: unset;
  height: 34px;
  padding: 0 20px;
  border-radius: 9999px;
  background: #f3f4f6;
  color: #555;
  border: none;
}
#brandCategoryTabs .category-tab:hover,
#newsCategoryTabs .category-tab:hover {
  background: #e5e7eb;
  color: #222;
}
#brandCategoryTabs .category-tab.active,
#newsCategoryTabs .category-tab.active {
  background: #facc15;
  color: #1a1a2e;
  font-weight: 700;
  z-index: 1;
}

/* ============ Hero Banner ============ */
.hero-banner {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  margin-top: 0;
  margin-bottom: 12px;
  box-shadow: none;
  position: relative;
  z-index: 100;
}
.hero-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============ Price Change Ticker ============ */
.price-change-ticker {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  align-items: center;
}
.ticker-prices {
  display: flex;
  gap: 4px;
  width: calc(100% - 300px - 24px);
  flex-shrink: 0;
}
.ticker-slot {
  flex: 1;
  min-width: 0;
  height: 36px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
}
.ticker-slot-news {
  flex: 0 1 300px;
  max-width: 300px;
  background: none;
  border: none;
  margin-left: auto;
}
.ticker-track {
  display: flex;
  flex-direction: column;
}
.ticker-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 14px;
  height: 36px;
  white-space: nowrap;
  font-size: 13px;
  flex-shrink: 0;
}
.ticker-brand {
  font-weight: 700;
  color: #374151;
}
.ticker-product {
  color: #666;
}
.ticker-price {
  font-weight: 700;
  color: #1a1a1a;
}
.ticker-price.up { color: var(--danger); }
.ticker-price.down { color: #2563eb; }
.ticker-diff {
  font-weight: 700;
  font-size: 12px;
}
.ticker-diff.up { color: var(--danger); }
.ticker-diff.down { color: #2563eb; }
.ticker-news-link {
  display: block;
  color: #374151;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.ticker-news-link:hover { color: var(--danger); }
  object-fit: cover;
}

/* ============ Section ============ */
.section-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.chart-title-unit {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ============ Main Layout ============ */
.main-layout {
  display: flex;
  gap: 15px;
}
.main-content {
  flex: 1;
  min-width: 0;
}

/* ============ Chart Section ============ */
.chart-section {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
  margin-bottom: 15px;
  margin-top: 0;
}
.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.chart-filter-buttons {
  display: flex;
  gap: 6px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-x;
  padding-bottom: 2px;
}
.chart-filter-buttons::-webkit-scrollbar {
  display: none;
}
.chart-filter-buttons.is-dragging {
  cursor: grabbing;
  user-select: none;
}
.chart-filter-btn {
  flex: 0 0 auto;
  padding: 5px 14px;
  border: 1.5px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
  color: #6b7280;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.chart-filter-btn:hover {
  border-color: #facc15;
  color: #a16207;
}
.chart-filter-btn.active {
  background: #facc15;
  border-color: #facc15;
  color: #000;
}
.desktop-price-bars {
  display: block;
  margin: 8px 0 18px;
  padding: 16px 18px 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  background: linear-gradient(180deg, #fffdf6 0%, #ffffff 100%);
  overflow: visible;
}
.desktop-price-bars-empty {
  padding: 40px 0 28px;
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
}
.desktop-bars-inner {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}
.desktop-bar-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.desktop-bar-upper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  border-bottom: 1px solid var(--border, #e5e7eb);
  overflow: visible;
}
.desktop-bar-menu {
  font-size: 11px;
  line-height: 1.2;
  color: var(--text-secondary);
  text-align: center;
  white-space: nowrap;
}
.desktop-bar-price {
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  white-space: nowrap;
}
.desktop-bar-fill {
  width: 34px;
  flex-shrink: 0;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(to top, #facc15, #fde68a);
  transition: height 0.6s ease;
}
.desktop-bar-fill-lowest {
  background: linear-gradient(to top, #2563eb, #93c5fd);
}
.desktop-bar-fill-highest {
  background: linear-gradient(to top, #f97316, #fdba74);
}
.desktop-bar-brand {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 12px;
  line-height: 1.1;
  color: #475569;
  font-weight: 700;
  white-space: nowrap;
}
.desktop-meat-line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1.5px dashed #ef4444;
  pointer-events: none;
  z-index: 1;
}
.desktop-meat-label {
  position: absolute;
  left: 50%;
  right: auto;
  top: 0;
  transform: translate(-50%, -50%);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  background: #ef4444;
  border-radius: 999px;
  padding: 1px 8px;
}
.chart-container {
  position: relative;
  height: 370px;
}
.chart-legend-wrap {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 24px 8px 40px;
  flex-wrap: wrap;
  font-size: 12px;
}
.chart-legend-items {
  display: flex;
  gap: 4px 12px;
  flex-wrap: wrap;
}
.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  transition: opacity 0.15s;
}
.chart-legend-item.hidden {
  opacity: 0.35;
  text-decoration: line-through;
}
.chart-legend-item:hover {
  background: rgba(0,0,0,0.04);
}
.chart-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.chart-legend-label {
  color: var(--text-primary);
}
.chart-legend-toggle {
  position: absolute;
  right: 8px;
  top: 8px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}
.chart-legend-toggle:hover .chevron-icon {
  border-color: var(--text-primary);
}
.chevron-icon {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--text-secondary);
  border-bottom: 1.5px solid var(--text-secondary);
  transform: rotate(45deg);
  transition: transform 0.2s;
}
.chevron-icon.open {
  transform: rotate(-135deg);
}
.chart-footer {
  text-align: right;
  padding-right: 40px;
}
.chart-disclaimer {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-top: 4px;
  white-space: nowrap;
}
.chart-disclaimer a {
  color: var(--primary);
  text-decoration: none;
}
.chart-disclaimer a:hover {
  text-decoration: underline;
}

/* ============ Sidebar ============ */
.sidebar {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.sidebar-panel {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.sidebar-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #facc15;
}
#top3Section::before { background: linear-gradient(to right, #facc15, #fde68a); }
#sidePromoSection::before { background: linear-gradient(to right, #f472b6, #f9a8d4); }
#otherCategorySection::before { background: linear-gradient(to right, #34d399, #6ee7b7); }
#newsSection::before { background: linear-gradient(to right, #60a5fa, #93c5fd); }
#priceChangeSection::before { background: linear-gradient(to right, #f97316, #fdba74); }
/* Side Promo Slider */
.side-promo-slider {
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: opacity 0.3s, transform 0.3s;
}
.side-promo-row {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 10px 0;
  border-bottom: 1px solid #f3f4f6;
  overflow: hidden;
}
.side-promo-row:last-child {
  border-bottom: none;
}
.side-promo-row:hover {
  background: #f9fafb;
}
.side-promo-row-top {
  display: flex;
  align-items: center;
  gap: 6px;
}
.side-promo-brand {
  font-size: 11px;
  color: #9ca3af;
  font-weight: 600;
}
.side-promo-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
}
.side-promo-badge-event {
  background: #dbeafe;
  color: #1d4ed8;
}
.side-promo-badge-new {
  background: #fee2e2;
  color: #dc2626;
}
.side-promo-title {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.side-promo-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.side-promo-price {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: #f97316;
  flex-shrink: 0;
  white-space: nowrap;
}
.side-promo-period {
  font-size: 10px;
  color: #9ca3af;
  margin-left: auto;
}
.side-promo-slot {
  transition: opacity 0.15s, transform 0.15s;
  border-bottom: 1px solid #f3f4f6;
}
.side-promo-slot:first-child .side-promo-row {
  padding-top: 0;
}
.side-promo-slot:last-child {
  border-bottom: none;
}
.side-promo-slot:last-child .side-promo-row {
  padding-bottom: 0;
}
.side-promo-slot-out {
  opacity: 0;
  transform: translateY(-6px);
}
.side-promo-slot-in {
  animation: sideSlotIn 0.15s ease;
}
@keyframes sideSlotIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.sidebar-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sidebar-title-right {
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  padding-right: 12px;
}
#surveySection .sidebar-title-right {
  margin-left: auto;
  padding-right: 0;
  font-weight: 400;
}

/* ============ Top 3 ============ */
.top3-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.top3-slot {
  height: 52px;
  overflow: hidden;
  position: relative;
}
.top3-track {
  display: flex;
  flex-direction: column;
  transition: transform 0.4s ease;
}
.top3-item {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border-radius: var(--radius);
  background: var(--bg-inner);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.top3-rank {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
  color: white;
}
.top3-rank.rank-1 { background: #f59e0b; }
.top3-rank.rank-2 { background: #94a3b8; }
.top3-rank.rank-3 { background: #b45309; }
.top3-info {
  flex: 1;
  min-width: 0;
}
.top3-brand {
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top3-product {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top3-price {
  font-weight: 800;
  font-size: 15px;
  color: #ff7800;
  flex-shrink: 0;
}
.top3-empty,
.sidebar-empty {
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
  padding: 16px 0;
}

/* ============ Menu Category Rankings ============ */
.other-cat-list {
  display: flex;
  flex-direction: column;
}

/* ============ Ranking Track Slider ============ */
.rk-slot {
  overflow: hidden;
  position: relative;
}
.rk-slot-rank {
  height: 36px;
}
.rk-slot-rank + .rk-slot-rank {
  margin-top: 4px;
}
.rk-track {
  display: flex;
  flex-direction: column;
  transition: transform 0.4s ease;
}
.rk-rank-item {
  height: 36px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 0 12px 0 6px;
  border-radius: 8px;
  background: var(--bg-inner);
}
.ranking-row-rank {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 11px;
  flex-shrink: 0;
  color: white;
}
.ranking-row-rank.rank-1 { background: #f59e0b; }
.ranking-row-rank.rank-2 { background: #94a3b8; }
.ranking-row-rank.rank-3 { background: #b45309; }
.ranking-row-brand {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ranking-row-menu {
  font-weight: 400;
  color: var(--text-secondary, #64748b);
  margin-left: 4px;
}
.ranking-row-price {
  font-weight: 800;
  font-size: 13px;
  color: var(--primary);
  flex-shrink: 0;
}

/* ============ Price Changes ============ */
.price-change-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.price-change-slot {
  overflow: hidden;
  position: relative;
  border-radius: var(--radius);
}
.price-change-track {
  display: flex;
  flex-direction: column;
}
.price-change-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--bg-inner);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.price-change-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.price-change-price-row {
  align-items: flex-end;
  margin-top: 2px;
}
.price-change-previous-row {
  margin-top: -1px;
}
.price-change-title,
.price-change-previous {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.price-change-title {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-weight: 700;
  font-size: 13px;
}
.price-change-product {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.price-change-brand {
  font-weight: 400;
  color: var(--text-secondary);
  white-space: nowrap;
}
.price-change-current {
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  color: #facc15;
}
.price-change-diff {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  gap: 4px;
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
}
.price-change-diff-amount {
  white-space: nowrap;
  line-height: 1.1;
}
.price-change-diff.up, .price-change-current.up { color: var(--danger); }
.price-change-diff.down, .price-change-current.down { color: #2563eb; }
.price-change-diff-rate {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.85;
  line-height: 1.1;
}
.price-change-previous {
  font-size: 12px;
  color: var(--text-secondary);
}
.price-change-date {
  font-size: 11px;
  color: var(--text-secondary);
  flex-shrink: 0;
  white-space: nowrap;
}

/* ============ News ============ */
.news-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.news-slot {
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid var(--border);
}
.news-slot:last-child {
  border-bottom: none;
}
.news-track {
  display: flex;
  flex-direction: column;
}
.news-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  text-decoration: none;
  color: var(--text);
  flex-shrink: 0;
}
.news-item:hover {
  text-decoration: none;
}
.news-item:hover .news-title {
  color: var(--primary);
}
.news-date {
  font-size: 11px;
  color: var(--text-secondary);
  flex-shrink: 0;
  white-space: nowrap;
}
.news-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s;
}

/* ============ Comments ============ */
.chart-comment-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 16px 0;
}
.comment-section {
  margin-top: 0;
  margin-bottom: 0;
}
.comment-section .section-title {
  margin-bottom: 16px;
}
.comment-form-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.comment-input-nickname,
.comment-input-password {
  width: 120px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  flex-shrink: 0;
}
.comment-input-content {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  resize: none;
  line-height: 1.5;
  field-sizing: content;
  max-height: 120px;
  overflow-y: auto;
}
.comment-input-nickname:focus,
.comment-input-password:focus,
.comment-input-content:focus {
  outline: none;
  border-color: var(--primary);
}
.comment-btn.btn.btn-primary {
  flex-shrink: 0;
  border-radius: var(--radius);
  padding: 8px 20px;
  box-sizing: border-box;
  align-self: stretch;
  background: #facc15;
  color: #374151;
}
.comment-btn.btn.btn-primary:hover {
  background: #eab308;
}
.comment-cancel-btn {
  flex-shrink: 0;
  background: var(--bg-inner);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px 12px;
  border-radius: var(--radius);
  font-size: 13px;
}
.comment-list {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.comment-item {
  padding: 6px 16px;
  border-bottom: 1px solid var(--border);
}
.comment-item:hover {
  background: var(--bg-inner);
}
.comment-item.open:hover {
  background: transparent;
}
.comment-item:last-child {
  border-bottom: 1px solid var(--border);
}
.comment-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.comment-page-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  font-size: 13px;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  min-width: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.comment-page-btn:hover:not(.disabled):not(.active) {
  border-color: var(--border);
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-primary);
}
.comment-page-btn.active {
  background: #facc15;
  color: #000;
  border-color: #facc15;
  font-weight: 600;
}
.comment-page-btn.disabled {
  opacity: 0.4;
  cursor: default;
}
.comment-badge-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 0;
}
.comment-badge {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  object-fit: contain;
}
.comment-badge-slot {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.comment-badge-item {
  border-bottom: 1px solid var(--border);
}
.comment-badge-item[data-badge="1"],
.comment-badge-item[data-badge="2"],
.comment-badge-item[data-badge="3"] {
  background: #fff;
  border-radius: 8px;
}
.comment-more-toggle-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
  margin-bottom: 0;
}
.comment-more-toggle {
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
  padding: 4px 0;
  background: none;
  border: none;
}
.comment-more-toggle:hover {
  color: var(--primary);
}
#commentTitle {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 400;
}
.comment-expanded-wrap {
  border-top: none;
  margin-top: 4px;
  padding-top: 4px;
  contain: content;
}
.comment-row-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
  position: relative;
}
.comment-row-top.has-badge {
  padding-left: 32px;
}
.comment-nickname {
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.comment-date {
  font-size: 11px;
  color: #c0c4cc;
  font-weight: 400;
}
.comment-delete-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  flex-shrink: 0;
  border-radius: 4px;
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.2s;
}
.comment-item:hover > .comment-row-top > .comment-delete-btn,
.comment-reply:hover > .comment-row-top > .comment-delete-btn {
  opacity: 1;
}
.comment-delete-btn:hover {
  background: var(--bg-inner);
  color: var(--danger);
}
.comment-content-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 0;
}
.comment-content {
  font-size: 13px;
  line-height: 1.3;
  word-break: break-word;
  min-width: 0;
  flex: 1;
}
.comment-row-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}
.comment-reply-toggle {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  font-weight: 600;
}
.comment-reply-toggle:hover {
  color: var(--primary);
}
.comment-reactions {
  display: flex;
  gap: 8px;
}
.comment-react-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.comment-react-btn:hover {
  background: var(--bg-inner);
}
.react-icon {
  filter: grayscale(1) brightness(0.7);
}
.comment-replies {
  margin-top: 8px;
}
.comment-reply {
  margin-left: 20px;
  padding: 8px 12px;
  background: var(--bg-inner);
  border-radius: var(--radius);
  border-left: none;
  margin-top: 6px;
}
.inline-reply-form {
  margin-top: 8px;
  margin-left: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.inline-reply-nickname,
.inline-reply-password {
  width: 100px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  flex-shrink: 0;
  box-sizing: border-box;
}
.inline-reply-content {
  flex: 1;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  font-family: inherit;
  resize: none;
  line-height: 30px;
  overflow: hidden;
  box-sizing: border-box;
}
.inline-reply-nickname:focus,
.inline-reply-password:focus,
.inline-reply-content:focus {
  outline: none;
  border-color: var(--primary);
}
.inline-reply-btn.btn.btn-primary {
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
  flex-shrink: 0;
  box-sizing: border-box;
  background: #facc15;
  color: #374151;
}
.inline-reply-btn.btn.btn-primary:hover {
  background: #eab308;
}
.comment-empty {
  text-align: center;
  color: var(--text-secondary);
  padding: 24px;
  font-size: 14px;
}

/* ============ Brand Cards ============ */
.brand-section {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
.brand-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.brand-grid .menu-img-slider {
  display: none;
}
.brand-grid .survey-mix-ad-card .brand-logo-wrap {
  padding-left: 6px;
  padding-right: 10px;
}
#brandYtTable tr.byt-selected {
  background: #dbeafe !important;
}
#brandYtTable tr.byt-selected td {
  background: #dbeafe !important;
}
#brandYtTable tbody {
  user-select: none;
  -webkit-user-select: none;
}
#brandYtTable td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0;
}
#brandYtTable td a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.brand-card {
  background: #f5f5f7;
  border-radius: var(--radius);
  padding: 5px 10px;
  padding-top: 9px;
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
  border: 0.5px solid #e0e0e0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(to right, #8b95a8, #a3b1c6);
  border-radius: var(--radius) var(--radius) 0 0;
}
.brand-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--primary-light);
  transform: translateY(-2px);
}
.brand-card .brand-logo-wrap {
  flex-shrink: 0;
  padding-right: 10px;
  border-right: 1px solid var(--border);
  align-self: stretch;
  display: flex;
  align-items: center;
}
.brand-card .brand-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.brand-card .brand-info {
  flex: 1;
  min-width: 0;
}
.brand-card .brand-name {
  font-size: 16px;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 6px;
}
.brand-card .rep-product {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.brand-card .menu-slider {
  height: 20px;
  overflow: hidden;
  position: relative;
}
.brand-card .price-slider,
.brand-card .date-slider {
  height: 22px;
  overflow: hidden;
  position: relative;
}
.brand-card .menu-slider {
  margin-bottom: 1px;
}
.brand-card .menu-slider-track,
.brand-card .price-slider-track,
.brand-card .date-slider-track {
  display: flex;
  flex-direction: column;
  transition: transform 0.4s ease;
}
.brand-card .menu-slider-item,
.brand-card .price-slider-item,
.brand-card .date-slider-item {
  height: 20px;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}
.brand-card .menu-slider-item {
  font-size: 12px;
  color: var(--text-secondary);
  position: relative;
  top: -2px;
}
.brand-card .price-slider-item {
  height: 22px;
  line-height: 22px;
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.brand-card .price-slider-item.rep .price,
.brand-card .price-slider-item.rep .price-unit {
  color: #ff7800;
}
.brand-card .date-slider-item {
  height: 22px;
  line-height: 22px;
  font-size: 9px;
  color: var(--text-secondary);
  text-align: right;
}
.slider-rep-badge {
  display: inline-block;
  background: #facc15;
  color: #1a1a2e;
  font-size: 9px;
  font-weight: 700;
  padding: 0 5px;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 4px;
  line-height: 14px;
}
.brand-card .price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.brand-card .price {
  font-size: 22px;
  font-weight: 800;
  color: var(--primary);
}
.brand-card .price-unit {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
}
.brand-card .checked-date {
  font-size: 12px;
  color: var(--text-secondary);
}
.brand-card .price-date-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.brand-card .price-slider {
  flex-shrink: 0;
}
.brand-card .date-slider {
  flex: 1;
  text-align: right;
  min-width: 0;
}
.brand-card .menu-img-slider {
  flex-shrink: 0;
  width: 140px;
  height: 90px;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
}
.brand-card .menu-img-slider-track {
  display: flex;
  flex-direction: column;
  transition: transform 0.4s ease;
}
.brand-card .menu-img-slider-item {
  width: 140px;
  height: 90px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.brand-card .menu-img-slider-item img {
  width: 170%;
  height: 170%;
  object-fit: cover;
  display: block;
  border-radius: 7px;
}

/* ============ Brand Detail Page ============ */
.brand-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  margin-bottom: 12px;
}
.brand-header-box {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255,255,255,0.85);
  border-radius: 16px;
  padding: 12px 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  flex: 1;
}
.brand-detail-name-ko {
  font-size: 54px;
  font-weight: 700;
  color: #374151;
  flex: 1;
  text-align: center;
}
.brand-promo-card {
  border-radius: 14px;
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  min-width: 0;
  margin-bottom: 12px;
  position: relative;
}
.brand-promo-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(to right, #f472b6, #f9a8d4);
}
.brand-promo-inner {
  padding: 14px;
  overflow: hidden;
  min-width: 0;
}
.brand-promo-title {
  font-size: 14px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 6px;
}
.brand-promo-card .side-promo-row {
  padding: 6px 0;
}
.brand-survey-card {
  cursor: pointer;
  border-radius: 14px;
  overflow: hidden;
  background: #fafafa;
  border: 1px solid var(--border);
}
.brand-survey-topbar {
  height: 4px;
  background: var(--survey-active, #0891b2);
}
.brand-survey-body {
  padding: 12px;
}
.brand-survey-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.brand-survey-total {
  font-size: 12px;
  color: #888;
}
.brand-survey-question {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.brand-yt-card {
  border-radius: 14px;
  overflow: hidden;
}
.brand-yt-card .youtube-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: none;
  border-radius: 0;
}
.brand-yt-card .youtube-card-body {
  flex: 1;
}
body.brand-page {
  background-image: url('/img/Chicken_back.png');
  background-repeat: repeat;
  background-size: 500px;
  background-position: center;
}
.brand-detail-logo img {
  width: 78px;
  height: 78px;
  object-fit: contain;
  border-radius: var(--radius);
}
.brand-header h1 {
  font-size: 24px;
  font-weight: 800;
}
.mobile-brand-detail-header {
  display: none;
}
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 16px;
}
.back-btn:hover { color: var(--primary); text-decoration: none; }

.menu-group {
  margin-bottom: 24px;
}
.menu-group-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border);
}
.menu-list {
  display: flex;
  gap: 12px;
}
.menu-list-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.menu-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--card-bg);
  padding: 0;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  cursor: pointer;
  transition: box-shadow .15s ease;
}
.menu-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
}
.menu-card-image-wrap {
  border-radius: 14px 14px 0 0;
}
.menu-card-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
}
.menu-card-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.menu-card-image-wrap {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
}
.menu-card-like-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #f0f0f0;
  border: none;
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  color: var(--text-secondary);
  flex-shrink: 0;
  justify-content: flex-end;
}
.like-heart {
  display: flex;
  align-items: center;
}
.like-heart svg {
  transition: transform 0.2s ease;
}
.menu-card-like-btn:hover .like-heart svg {
  transform: scale(1.08);
}
.like-heart-active svg {
  fill: #ff4757;
  stroke: #ff4757;
}
.like-count {
  font-size: 12px;
  font-weight: 600;
}
.menu-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.menu-card-heading {
  flex: 1;
  min-width: 0;
}
.menu-card-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.menu-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.menu-name {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
}
.rep-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #facc15;
  color: #1a1a2e;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  line-height: 1.4;
}
.new-menu-badge-overlay {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  line-height: 1.4;
  z-index: 2;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.menu-category-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.menu-card-brand {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
}
.category-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #9e9e9e;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  border: none;
  line-height: 1.4;
}
.cat-fried { background: #e65100; }
.cat-seasoned { background: #c62828; }
.cat-간장\/마늘 { background: #5d4037; }
.cat-매운맛 { background: #d32f2f; }
.cat-구이\/바베큐 { background: #bf360c; }
.cat-반반 { background: #7b1fa2; }
.cat-side, .cat-pizza-side, .cat-burger-side { background: #2e7d32; }
.cat-pepperoni { background: #ad1457; }
.cat-cheese, .cat-cheese-gimbap { background: #f9a825; }
.cat-bulgogi, .cat-bulgogi-burger { background: #6d4c41; }
.cat-combination { background: #00695c; }
.cat-americano, .cat-coldbrew, .cat-decaf { background: #3e2723; }
.cat-latte { background: #ff8f00; }
.cat-tea { background: #388e3c; }
.cat-cheeseburger { background: #f57f17; }
.cat-chicken-burger { background: #ef6c00; }
.cat-set, .cat-ramen-set { background: #1565c0; }
.cat-basic, .cat-tuna { background: #558b2f; }
.menu-price-sparkline {
  width: 116px;
  height: 36px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}
.menu-price-sparkline svg {
  display: block;
  width: 116px;
  height: 36px;
  overflow: visible;
}
.menu-price-sparkline-path,
.menu-price-sparkline-fallback {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.menu-price-sparkline-area {
  stroke: none;
}
.menu-price-sparkline-dot {
  fill: currentColor;
}
.menu-card-meta-left {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.sparkline-label-group {
  width: 116px;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
}
.sparkline-label {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
}
.sparkline-label.up {
  color: var(--danger);
}
.sparkline-label.down {
  color: #2563eb;
}
.menu-price-sparkline.up {
  color: var(--danger);
}
.menu-price-sparkline.down {
  color: #2563eb;
}
.menu-price-sparkline.stable,
.menu-price-sparkline.is-empty {
  color: #94a3b8;
}
.menu-card-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.menu-price {
  font-weight: 800;
  color: #ff7800;
  font-size: 24px;
  line-height: 1.2;
  white-space: nowrap;
}
.price-unit {
  font-size: 0.6em;
  font-weight: 400;
  position: relative;
  top: -2px;
}
.menu-price-change {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}
.menu-price-change.up { color: var(--danger); }
.menu-price-change.down { color: #2563eb; }
.menu-price-change.stable {
  color: var(--text-secondary);
  font-weight: 600;
}
.menu-card-meta-inline {
  display: none;
}
.menu-card-meta {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: -5px;
}
.menu-card-source {
  white-space: nowrap;
}
.menu-card-source-link {
  color: var(--primary);
  text-decoration: none;
}
.menu-card-source-link:hover {
  color: var(--primary-dark);
}
.menu-comment-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 2px;
}
.menu-comment-readonly-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary, #6b7280);
  padding: 4px 0 0;
}
.menu-comment-btn {
  border: none;
  background: none;
  color: var(--text-secondary);
  padding: 4px 0;
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
}
.menu-comment-btn:hover {
  color: var(--primary);
}
.menu-card.is-comments-open .menu-comment-toggle {
  color: var(--primary);
}
.menu-comment-panel {
  flex-direction: column;
  gap: 4px;
  padding: 0;
}
.menu-comment-panel:not([hidden]) {
  display: flex;
}
.menu-comment-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.menu-comment-item {
  --menu-comment-right-rail: 24px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.menu-comment-item:hover > .menu-comment-item-head,
.menu-comment-item:hover > .menu-comment-item-bottom {
  background: var(--bg-inner);
  border-radius: 8px;
}
.menu-comment-item:last-child {
  border-bottom: none;
}
.menu-comment-reply-count {
  font-size: 11px;
  color: var(--text-secondary);
}
.menu-comment-delete-btn {
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
  padding: 0 2px;
  margin-left: 0;
  position: absolute;
  top: 50%;
  right: calc(var(--menu-comment-right-rail) - 24px);
  transform: translateY(-50%);
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s;
}
.menu-comment-item:hover .menu-comment-item-head > .menu-comment-delete-btn,
.menu-comment-reply-item:hover > .menu-comment-item-head .menu-comment-delete-btn {
  opacity: 1;
}
.menu-comment-delete-btn:hover {
  color: var(--danger);
}
.menu-comment-replies {
  margin-top: 8px;
  padding-left: 20px;
  border-left: 2px solid var(--border);
  flex-direction: column;
  gap: 6px;
}
.menu-comment-replies:not([hidden]) {
  display: flex;
}
.menu-comment-reply-item {
  padding: 6px 4px;
  border-bottom: 1px solid var(--border);
  border-radius: 6px;
  transition: background 0.15s ease;
}
.menu-comment-reply-item:hover {
  background: var(--bg-inner);
}
.menu-comment-reply-item:last-child {
  border-bottom: none;
}
.menu-comment-reply-item .menu-comment-item-body {
  font-size: 12px;
}
.menu-comment-reply-form:not([hidden]) {
  display: block;
  margin-top: 8px;
}
.menu-comment-reply-form-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.menu-comment-reply-form .menu-comment-input {
  width: 90px;
}
.menu-comment-reply-form .menu-comment-textarea {
  flex: 1;
  min-height: 38px;
  height: 38px;
}
.menu-comment-item-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 1px;
  position: relative;
  padding-right: var(--menu-comment-right-rail);
}
.menu-comment-medal {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}
.menu-comment-item-author {
  font-size: 13px;
  font-weight: 700;
}
.menu-comment-item-date {
  font-size: 11px;
  color: #c0c4cc;
  margin-left: 6px;
  flex-shrink: 0;
}
.menu-comment-reply-btn {
  border: none;
  background: none;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
}
.menu-comment-reply-btn:hover {
  color: var(--primary);
}
.menu-comment-item-bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-right: var(--menu-comment-right-rail);
}
.cs-card-panel .menu-comment-item,
.pd-comments .menu-comment-item {
  --menu-comment-right-rail: 0px;
  padding-right: 0;
}
.menu-comment-item-body {
  font-size: 13px;
  line-height: 1.5;
  word-break: break-word;
  flex: 1;
  min-width: 0;
}
.menu-comment-reactions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  align-items: center;
}
.menu-comment-react-btn {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--text);
  padding: 2px 4px;
}
.menu-comment-react-btn .react-icon {
  filter: grayscale(1) brightness(0.7);
}
.menu-comment-react-btn:hover .react-icon {
  filter: none;
}
.menu-comment-react-btn[data-type="dislike"]:hover .react-icon {
  filter: hue-rotate(180deg) saturate(3) brightness(0.8);
}
.menu-comment-empty,
.menu-comment-loading,
.menu-comment-error {
  padding: 10px 12px;
  background: var(--bg-inner);
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--text-secondary);
  font-size: 11px;
  opacity: 0.6;
  text-align: center;
}
.menu-comment-error {
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.28);
  background: #fef2f2;
}
.menu-comment-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.menu-comment-form-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.menu-comment-input,
.menu-comment-textarea {
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: white;
}
.menu-comment-input {
  width: 120px;
  flex: none;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
}
.menu-comment-password {
  width: 90px;
}
.menu-comment-textarea {
  flex: 1;
  min-height: 38px;
  height: 38px;
  padding: 8px 12px;
  resize: none;
  line-height: 1.5;
}
.menu-comment-input:focus,
.menu-comment-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.menu-comment-submit,
.menu-comment-more-btn {
  border: none;
  background: var(--primary);
  color: white;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.menu-comment-submit {
  background: #facc15;
  color: #000;
}
.menu-comment-submit:hover {
  background: #eab308;
}
.menu-comment-more-btn:hover {
  background: none;
  color: var(--primary);
}
.menu-comment-submit:disabled,
.menu-comment-more-btn:disabled {
  opacity: 0.65;
  cursor: default;
}
.menu-comment-more-wrap {
  justify-content: flex-end;
  padding-bottom: 4px;
}
.menu-comment-more-wrap:not([hidden]) {
  display: flex;
}
.menu-comment-more-btn {
  background: none;
  color: var(--text-secondary);
  padding: 4px 0;
  border-radius: 0;
  font-size: 12px;
  font-weight: 400;
}
.menu-comment-more-btn:hover {
  background: none;
  color: var(--primary);
}

/* ============ Admin Page ============ */
.admin-page .container {
  max-width: 1464px;
}

.admin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-height: calc(100vh - 64px);
  align-content: start;
}
.admin-sidebar {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0 0 0 56px;
  box-shadow: none;
  height: 44px;
  margin-bottom: 0;
  position: relative;
  z-index: 2;
}
.admin-sidebar a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  flex: 0 0 160px;
  margin-right: 4px;
  height: 44px;
  line-height: 1;
  box-sizing: border-box;
  padding: 0 16px;
  border-radius: 10px 10px 0 0;
  border: 1px solid #cfd8e3;
  border-bottom: none;
  background: #e8eaed;
  color: #5b6879;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 0;
  transition: none;
  white-space: nowrap;
  text-decoration: none;
}
.admin-sidebar a.admin-tab-right {
  margin-right: 4px;
}
.admin-sidebar a:not(.admin-tab-right) + a.admin-tab-right {
  margin-left: auto;
}
.admin-sidebar a.admin-tab-right:last-child {
  margin-right: 20px;
}
.admin-sidebar a:hover {
  background: #f0f2f5;
  color: var(--text);
  text-decoration: none;
}
.admin-sidebar a.active {
  background: var(--card-bg);
  color: var(--text);
  border-color: #cfd8e3;
  box-shadow: none;
  transform: none;
  position: relative;
}
.admin-sidebar a.active::before,
.admin-sidebar a.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 10px;
  background: transparent;
}
.admin-sidebar a.active::before {
  left: -10px;
  border-bottom-right-radius: 10px;
  box-shadow: 4px 0 0 0 var(--card-bg);
}
.admin-sidebar a.active::after {
  right: -10px;
  border-bottom-left-radius: 10px;
  box-shadow: -4px 0 0 0 var(--card-bg);
}
.sidebar-excel-btn {
  margin-top: 12px !important;
  background: #16a34a !important;
  color: white !important;
  text-align: center;
  border-radius: 8px;
  font-weight: 600 !important;
}
.sidebar-excel-btn:hover {
  background: #15803d !important;
}
.sidebar-excel-upload {
  background: #2563eb !important;
  cursor: pointer;
}
.sidebar-excel-upload:hover {
  background: #1d4ed8 !important;
}
.brand-excel-download {
  background: #16a34a;
  color: white !important;
  cursor: pointer;
  text-decoration: none !important;
}
.brand-excel-download:hover { background: #15803d; }
.brand-excel-upload {
  background: #facc15;
  color: #1a1a2e;
  cursor: pointer;
}
.brand-excel-upload:hover { background: #eab308; }

.admin-content {
  min-width: 0;
  margin-top: -1px;
  position: relative;
  z-index: 1;
  border-top: none;
}

.admin-tab-panel {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: none;
  margin-top: 0;
  box-shadow: none;
  padding-top: 14px;
}

.admin-tab-panel-title {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.admin-panel {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
  margin-bottom: 24px;
}
.admin-panel h2 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

/* YouTube Cards (Landing) */
.youtube-section {
  margin-top: 15px;
  margin-bottom: 15px;
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
.youtube-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.youtube-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--card-bg);
  transition: box-shadow 0.15s;
}
.youtube-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.youtube-card-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.youtube-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.youtube-card-body { padding: 10px 12px; }
.youtube-card-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 6px;
  color: var(--text);
}
.youtube-card-channel {
  font-size: 11px;
  color: var(--text-secondary);
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
@media (max-width: 768px) {
  .youtube-card-grid { grid-template-columns: 1fr; }
}

.brand-list-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  overflow: hidden;
}
.brand-list-tab.admin-tab-right {
  margin-left: auto;
}
.brand-list-tab {
  border: 1px solid var(--border);
  background: var(--bg-inner);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  padding: 0 12px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.brand-list-tab:hover {
  color: var(--text);
}
.brand-list-tab.active {
  background: #facc15;
  color: #1a1a2e;
  box-shadow: var(--shadow);
}
.brand-list-panel {
  min-height: 120px;
}

.brand-menu-category-manager {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.brand-menu-category-manager-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.brand-menu-category-manager-head h3 {
  font-size: 15px;
  font-weight: 700;
}
.brand-menu-category-context {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
}
.brand-menu-category-manager-empty {
  padding: 14px 16px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--bg-inner);
  font-size: 13px;
  color: var(--text-secondary);
}
.brand-menu-category-manager-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.brand-menu-category-manager-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  position: relative;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  transition: background-color 0.15s ease, margin 0.15s ease;
}
.brand-menu-category-manager-row.is-selected {
  background: rgba(37, 99, 235, 0.04);
}
.brand-menu-category-manager-row[data-subcategory-id].dragging {
  opacity: 0.4;
}
.brand-menu-category-manager-row[data-subcategory-id]:not(.dragging) {
  transition: transform 0.15s ease;
}
.brand-menu-category-manager-row.mc-drag-before {
  margin-top: 14px;
}
.brand-menu-category-manager-row.mc-drag-before::before {
  content: '';
  position: absolute;
  left: -8px;
  right: -8px;
  top: -10px;
  height: 6px;
  background: #facc15;
  border-radius: 999px;
  pointer-events: none;
}
.brand-menu-category-manager-row.mc-drag-after {
  margin-bottom: 14px;
}
.brand-menu-category-manager-row.mc-drag-after::after {
  content: '';
  position: absolute;
  left: -8px;
  right: -8px;
  bottom: -10px;
  height: 6px;
  background: #facc15;
  border-radius: 999px;
  pointer-events: none;
}
.brand-menu-category-manager-row:last-child {
  border-bottom: none;
}
.brand-menu-category-manager-order {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.brand-menu-category-manager-order-add {
  color: var(--primary);
  font-size: 15px;
  line-height: 1;
}
.brand-menu-category-manager-input {
  width: 100%;
  height: 34px;
  box-sizing: border-box;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
  background: var(--card-bg);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.brand-menu-category-manager-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.brand-menu-category-manager-row-add {
  grid-template-columns: 1fr;
}
.brand-menu-category-add-trigger {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  text-align: center;
  width: 100%;
  padding: 2px 6px;
  cursor: pointer;
}
.brand-menu-category-add-trigger:hover {
  color: var(--primary);
}
.brand-menu-category-manager-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.brand-menu-category-action {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  line-height: 1.2;
}
.brand-menu-category-action:hover,
.brand-menu-category-action.is-ready {
  color: var(--primary);
}
.brand-menu-category-action:disabled {
  color: #cbd5e1;
  cursor: default;
}
.brand-menu-category-action-delete:hover {
  color: var(--danger);
}

@media (max-width: 768px) {
  .brand-list-tabs {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  .brand-list-tab {
    flex: 1 1 auto;
    text-align: center;
    min-width: 0;
  }

  .brand-menu-category-manager-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .brand-menu-category-manager-row {
    grid-template-columns: 18px minmax(0, 1fr);
  }

  .brand-menu-category-manager-row-add {
    grid-template-columns: 1fr;
  }

  .brand-menu-category-manager-actions {
    grid-column: 2;
    justify-content: flex-end;
    padding-top: 2px;
  }
}

/* ============ Forms ============ */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}
.form-group input,
.form-group select,
.form-group textarea {
  height: 34px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text);
  background: var(--card-bg);
  transition: border-color 0.2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.form-group .form-full {
  grid-column: 1 / -1;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-dark); }
.admin-page .btn-primary { background: #facc15; color: #1a1a2e; }
.admin-page .btn-primary:hover { background: #eab308; }
.btn-secondary { background: var(--bg); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--border); }
.btn-danger { background: transparent; color: var(--text-secondary); border: 1px solid transparent; transition: all 0.15s; }
.btn-danger:hover { background: var(--danger); color: white; border-color: var(--danger); }
.btn-sm { padding: 6px 12px; font-size: 12px; white-space: nowrap; }

.btn-group {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

/* ============ Table ============ */
/* Survey resizable table */
.survey-resizable-table { table-layout: fixed; }
.survey-resizable-table th,
.survey-resizable-table td { border-right: 1px solid var(--border); overflow: hidden; text-overflow: ellipsis; }
.survey-resizable-table th:last-child,
.survey-resizable-table td:last-child { border-right: none; }
.survey-resizable-table th { position: relative; }
.survey-resizable-table th .col-resizer {
  position: absolute; top: 0; right: -3px; width: 6px; height: 100%;
  cursor: col-resize; z-index: 2; user-select: none;
}
.survey-resizable-table th .col-resizer:hover,
.survey-resizable-table th .col-resizer.active { background: var(--primary); opacity: 0.4; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table th {
  text-align: center;
  vertical-align: middle;
  padding: 0 8px;
  height: 36px;
  line-height: 36px;
  background: var(--bg-inner);
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}
.data-table td {
  padding: 0 8px;
  height: 25px;
  line-height: 25px;
  border-bottom: 1px solid var(--border);
  text-align: center;
  vertical-align: middle;
  vertical-align: middle;
  font-size: 13px;
}
#eventTable {
  table-layout: fixed;
}
#eventTable colgroup .col-no { width: 40px; min-width: 40px; }
#eventTable colgroup .col-image { width: 60px; min-width: 60px; }
#eventTable colgroup .col-brand { width: 15%; }
#eventTable colgroup .col-title { width: auto; }
#eventTable colgroup .col-period { width: 18%; }
#eventTable colgroup .col-url { width: 22%; }
#eventTable colgroup .col-delete { width: 40px; min-width: 40px; }
#eventTable th,
#eventTable td {
  white-space: nowrap;
  border-right: 1px solid #e5e7eb;
}
#eventTable th:last-child,
#eventTable td:last-child {
  border-right: none;
}
#eventTable th.ph-th-resizable::after {
  display: none;
}
#eventTable td {
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  height: auto;
  line-height: normal;
  padding-top: 6px;
  padding-bottom: 6px;
}
#eventTable tr.evt-editing td {
  background: #f3f4f6;
}
#eventTable tr.evt-editing td.evt-edit-brand,
#eventTable tr.evt-editing td.evt-edit-title,
#eventTable tr.evt-editing td.evt-edit-period,
#eventTable tr.evt-editing td.evt-edit-link {
  text-decoration: none;
}
.evt-edit-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  background: #f3f4f6;
  z-index: 1;
  gap: 2px;
}
.evt-inline-input {
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 12px;
  font-family: inherit;
  padding: 2px 6px;
  height: 26px;
  color: var(--text);
  background: #fff;
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  text-align: center;
}
.evt-inline-input option {
  text-align: left;
}
select.evt-inline-input {
  text-align-last: center;
}
.evt-inline-input:focus {
  outline: none;
  border-color: var(--primary);
}
.evt-date-input {
  flex: 1;
}
.evt-date-sep {
  flex-shrink: 0;
  font-size: 12px;
  color: #999;
}
#eventTable tr.event-expired td {
  background: #f3f4f6;
  color: #9ca3af;
  text-decoration: line-through;
  text-decoration-color: #9ca3af;
}
#eventTable tr.event-expired td a {
  color: #9ca3af;
}
#eventTable tr.event-expired td img {
  opacity: 0.5;
}
#newMenuTable {
  table-layout: fixed;
}
#newMenuTable colgroup .col-no { width: 40px; min-width: 40px; }
#newMenuTable colgroup .col-image { width: 60px; min-width: 60px; }
#newMenuTable colgroup .col-brand { width: 14%; }
#newMenuTable colgroup .col-name { width: auto; }
#newMenuTable colgroup .col-release { width: 11%; }
#newMenuTable colgroup .col-end { width: 11%; }
#newMenuTable colgroup .col-type { width: 12%; }
#newMenuTable colgroup .col-url { width: 22%; }
#newMenuTable colgroup .col-status { width: 76px; min-width: 76px; }
#newMenuTable colgroup .col-delete { width: 40px; min-width: 40px; }
#newMenuTable th,
#newMenuTable td {
  white-space: nowrap;
  border-right: 1px solid #e5e7eb;
}
#newMenuTable th:last-child,
#newMenuTable td:last-child {
  border-right: none;
}
#newMenuTable th.ph-th-resizable::after {
  display: none;
}
#newMenuTable td {
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  height: auto;
  line-height: normal;
  padding-top: 6px;
  padding-bottom: 6px;
}
#newMenuTable td.new-menu-cell-status,
#newMenuTable td.new-menu-cell-action {
  overflow: visible;
  text-overflow: clip;
}
.new-menu-action-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 28px;
}
#newMenuTable tr[data-nm-id] {
  cursor: pointer;
  user-select: none;
}
#newMenuTable tr.nm-row-selected td {
  background: var(--primary-light) !important;
}
.btn-secondary {
  background: #9ca3af;
  color: #fff;
}
.btn-secondary:hover {
  background: #6b7280;
}
#newMenuTable tr.nm-inactive td {
  opacity: 0.4;
}
#newMenuTable tr.nm-inactive td:last-child,
#newMenuTable tr.nm-inactive td:nth-last-child(2) {
  opacity: 1;
}
#newMenuTable tr.nm-expired td {
  background: #f3f4f6;
  color: #9ca3af;
  text-decoration: line-through;
  text-decoration-color: #9ca3af;
}
#newMenuTable tr.nm-expired td a {
  color: #9ca3af;
}
.data-table tr:hover td {
  background: #f9fafb;
}
.data-table tr[data-id]:hover td {
  background: var(--primary-light);
}
.brand-row-active td {
  background: var(--primary-light) !important;
}
.inline-price-row-active td {
  background: var(--primary-light) !important;
}
.price-latest td {
  color: #1e40af;
  font-weight: 700;
}
.ph-field {
  font: inherit;
  font-size: 13px;
  color: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0 4px;
  height: 32px;
  line-height: 32px;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}
.ph-field-readonly {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-color: transparent !important;
  background: transparent !important;
}
.ph-field:not(:disabled) {
  border-color: var(--primary);
  background: white;
}
#inlinePriceTable td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 4px !important;
}
#inlinePriceBody tr[data-ph-id] {
  cursor: pointer;
}
/* ============ Inline Confirm Popover ============ */
.inline-confirm {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #1e293b;
  color: white;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  white-space: nowrap;
}
.inline-confirm-msg {
  font-weight: 600;
}
.inline-confirm-yes {
  background: var(--danger);
  color: white;
  border: none;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.inline-confirm-yes:hover { background: #dc2626; }
.inline-confirm-no {
  background: transparent;
  color: #94a3b8;
  border: 1px solid #475569;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
}
.inline-confirm-no:hover { color: white; border-color: #94a3b8; }

.ph-memo-view {
  font-size: 12px;
  line-height: 1.1;
}
.price-diff-up {
  color: var(--danger);
  font-weight: 700;
  font-size: 12px;
}
.price-diff-down {
  color: #2563eb;
  font-weight: 700;
  font-size: 12px;
}

/* ============ Drag & Drop ============ */
.sortable tr[data-id],
.sortable-row {
  cursor: grab;
}
.sortable tr[data-id]:active,
.sortable-row:active {
  cursor: grabbing;
}
tr.dragging {
  opacity: 0.4;
  background: var(--primary-light);
}
tr.drag-over-top {
  position: relative;
  z-index: 2;
}
tr.drag-over-top td {
  border-top: 3px solid #facc15 !important;
}
tr.drag-over-bottom {
  position: relative;
  z-index: 2;
}
tr.drag-over-bottom td {
  border-bottom: 3px solid #facc15 !important;
}

#inlinePriceBody tr[data-ph-id] {
  cursor: grab;
}
#inlinePriceBody tr[data-ph-id].dragging {
  cursor: grabbing;
}

.product-desc-wrap {
}
.product-desc-view,
.product-desc-edit {
  font-size: 13px;
  line-height: 1.5;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 100%;
  font-family: inherit;
  box-sizing: border-box;
}
.product-desc-view {
  color: var(--text-secondary);
  min-height: 36px;
  cursor: default;
  white-space: pre-wrap;
  word-break: break-word;
}
.product-desc-edit {
  position: absolute;
  top: 0;
  left: 0;
  resize: none;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.product-desc-edit.is-editing {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}
.product-desc-view:empty::before {
  content: '';
}
.product-desc-view:hover {
  border-color: #aaa;
}

/* ============ Inline Price Table ============ */
.inline-price-table-wrap {
  overflow-x: auto;
}
.admin-table-scroll {
  overflow-x: hidden;
}
th.ph-th-resizable {
  position: relative;
}
th.ph-th-resizable::after {
  content: '';
  position: absolute;
  right: 0;
  top: 25%;
  height: 50%;
  width: 1px;
  background: #d1d5db;
  pointer-events: none;
}
.ph-col-resize-handle {
  position: absolute;
  top: 0;
  right: -6px;
  width: 12px;
  height: 100%;
  cursor: col-resize;
  z-index: 4;
  background: transparent;
  touch-action: none;
}
.ph-col-resize-handle:hover {
  background: transparent;
}

/* ============ Inline Price Row ============ */
.price-expand-row td {
  padding: 0 !important;
  border-bottom: 2px solid var(--primary);
}
.price-expand-inner {
  background: var(--bg-inner);
  padding: 16px 20px;
}
.price-expand-inner .form-grid {
  margin-bottom: 12px;
}
.price-expand-inner h4 {
  font-size: 14px;
  font-weight: 600;
  margin: 16px 0 8px;
  color: var(--text-secondary);
}
.price-history-mini {
  font-size: 12px;
}
.price-history-mini td {
  padding: 0 8px !important;
  height: 25px !important;
  line-height: 25px !important;
}
tr.product-row-active > td {
  background: var(--primary-light);
}
/* ============ Inline Edit Toggle ============ */
.cell-sub, .cell-name, .cell-edit, .cell-rep, .cell-status {
  position: relative;
}
.cell-sub, .cell-name, .cell-edit, .cell-rep, .cell-status {
  padding: 0 !important;
}
.cell-sub .view-mode,
.cell-name .view-mode,
.cell-edit .view-mode,
.cell-rep .view-mode,
.cell-status .view-mode {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 8px;
  width: 100%;
  box-sizing: border-box;
}
.cell-sub .view-mode.subcategory-trigger {
  cursor: pointer;
  transition: color 0.15s ease;
}
.cell-sub .view-mode.subcategory-trigger:hover {
  color: var(--primary);
}
.cell-status .view-mode {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 8px;
  line-height: 1;
}
.cell-status .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  height: 18px;
  min-height: 18px;
  line-height: 1;
}
.cell-sub .edit-mode,
.cell-name .edit-mode,
.cell-edit .edit-mode {
  position: absolute;
  inset: 6px 8px 6px 3px;
  visibility: hidden;
  min-width: 0;
  display: flex;
  align-items: center;
}
.edit-save-btn {
  display: none;
}
.editing .edit-mode {
  visibility: visible;
}
.editing .cell-sub .view-mode,
.editing .cell-name .view-mode,
.editing .cell-edit .view-mode {
  visibility: hidden;
}
.editing-subcategory .cell-sub .edit-mode {
  visibility: visible;
}
.editing-subcategory .cell-sub .view-mode {
  visibility: hidden;
}
.editing .row-action-btn {
  display: none;
}
.editing .edit-save-btn {
  display: inline;
}

.inline-edit-input {
  padding: 0 4px;
  border: 1px solid var(--primary);
  border-radius: 4px;
  font: inherit;
  font-size: 13px;
  color: inherit;
  width: auto;
  height: 32px;
  line-height: 32px;
  box-sizing: border-box;
  background: white;
  margin: 0;
  text-align: center;
}
.product-subcategory-select {
  padding-right: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 8px center;
  background-repeat: no-repeat;
  background-size: 10px 6px;
}
.product-subcategory-select[size] {
  height: auto;
  min-height: 32px;
  line-height: normal;
}
select.inline-edit-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 8px;
  background-image: none;
}
#productTable {
  table-layout: fixed;
  --status-action-space: 76px;
}
#productTable colgroup .col-no { width: 40px; min-width: 40px; }
#productTable colgroup .col-image { width: 60px; min-width: 60px; }
#productTable colgroup .col-edit-img { width: 32px; min-width: 32px; }
#productTable colgroup .col-sub { width: 11%; }
#productTable colgroup .col-name { width: auto; }
#productTable colgroup .col-price { width: 11%; }
#productTable colgroup .col-source { width: 10%; }
#productTable colgroup .col-date { width: 12%; }
#productTable colgroup .col-rep { width: 7%; }
#productTable colgroup .col-status { width: 40px; min-width: 40px; }
#productTable colgroup .col-delete { width: 40px; }
#productTable td,
#productTable th {
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#productTable tr.product-row.editing-subcategory td {
  overflow: visible;
}
#productTable th:last-child {
  padding-right: calc(var(--status-action-space) + 12px);
}
#productTable .view-mode {
  justify-content: center;
  text-align: center;
}
#categoryTable td,
#categoryTable th {
  height: 40px !important;
  line-height: 40px !important;
}
#brandTable tr[data-id] td {
  height: 40px;
  line-height: 40px;
  vertical-align: middle;
}
#productTable tr.product-row td {
  height: 40px;
  line-height: 40px;
  vertical-align: middle;
  position: relative;
}
#inlinePriceTable td {
  height: 40px !important;
  line-height: 40px !important;
  vertical-align: middle !important;
}
#inlinePriceTable th {
  padding: 0 4px !important;
  height: 40px !important;
  line-height: 40px !important;
}

/* ============ Price History Modal ============ */
body.modal-open {
  overflow: hidden;
  padding-right: var(--scrollbar-width, 0px);
}
.admin-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.5);
  z-index: 1100;
}
.admin-modal-card {
  width: min(920px, 100%);
  max-height: calc(100vh - 48px);
  background: var(--card-bg);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.admin-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}
.admin-modal-heading {
  flex: 1;
  min-width: 0;
}
.admin-modal-header h3 {
  font-size: 18px;
  font-weight: 700;
}
.admin-modal-meta {
  display: block;
  margin-top: 6px;
  min-width: 0;
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-modal-subtitle {
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-secondary);
}
.admin-modal-subtitle:empty {
  display: none;
}
.admin-modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 24px 24px;
  min-height: 0;
}
.price-history-modal-scroll {
  max-height: 380px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
}
#priceHistoryModalTable th,
#priceHistoryModalTable td {
  text-align: center;
}

.badge {
  display: inline-block;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}
.youtube-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 0 8px;
  font-size: 14px;
  line-height: 1;
  background: var(--yt-type-bg);
  color: var(--yt-type-color);
}
.youtube-type-chip-label {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
}
.yt-type-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-size: 13px;
  color: var(--text-secondary, #888);
  cursor: pointer;
  white-space: nowrap;
}
.yt-type-tab:hover { color: var(--text-primary, #333); background: var(--bg-secondary, #f5f5f5); }
.yt-type-tab.active { color: var(--primary, #3b82f6); border-bottom-color: var(--primary, #3b82f6); font-weight: 600; }
.youtube-tab-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.youtube-icon-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 0;
  line-height: 1;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.youtube-tab-chip-remove,
.youtube-type-chip-remove {
  color: inherit;
  flex: 0 0 16px;
}
.youtube-remove-icon::before,
.youtube-remove-icon::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
}
.youtube-remove-icon::before {
  transform: rotate(45deg);
}
.youtube-remove-icon::after {
  transform: rotate(-45deg);
}
.youtube-add-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 999px;
  color: #666;
  font-size: 0;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
}
.youtube-add-trigger::before,
.youtube-add-trigger::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
}
.youtube-add-trigger::after {
  transform: rotate(90deg);
}
.youtube-tab-add-trigger {
  align-self: center;
  border: 1px solid var(--border);
  background: var(--bg-inner);
  color: var(--text-secondary);
}
.youtube-type-add-trigger {
  background: #f0f0f0;
  color: #666;
}
/* YouTube table resizable */
.yt-resizable th { position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-right: 1px solid var(--border, #ddd); }
.yt-resizable td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-right: 1px solid var(--border, #ddd); }
.yt-resizable th:last-child, .yt-resizable td:last-child { border-right: none; }
.yt-resize-handle:hover { border-right-color: var(--primary, #3b82f6) !important; }
#youtubeTable tr.yt-selected { background: #e0edff; }
#youtubeTable tbody tr { user-select: none; }
#newsListBody tr { user-select: none; }
#youtubeTable tbody tr:hover { background: #f0f4ff; }
.badge-active { background: #dcfce7; color: #166534; }
.badge-inactive { background: #fee2e2; color: #991b1b; }
.badge-rep { background: #facc15; color: #1a1a2e; }
.badge-new-menu {
  background: none;
  color: #ccc;
  border-radius: 999px;
  font-size: 11px;
  padding: 2px 10px;
  transition: background 0.15s, color 0.15s;
}
.badge-new-menu:hover {
  color: #1d4ed8;
}
.badge-new-menu-active {
  background: #fee2e2;
  color: #dc2626;
}
.badge-new-menu-active:hover {
  background: #fecaca;
}
.badge-send {
  background: none;
  color: #ccc;
  border-radius: 999px;
  font-size: 11px;
  padding: 2px 10px;
  transition: background 0.15s, color 0.15s;
}
.badge-send:hover {
  background: #e0e7ff;
  color: #4338ca;
}
.badge-rep-inactive {
  font-size: 11px;
  color: #ccc;
  cursor: pointer;
  transition: color 0.15s;
}
.badge-rep-inactive:hover {
  color: var(--primary);
}
.action-edit-inactive {
  font-size: 11px;
  color: #999;
  cursor: pointer;
  transition: color 0.15s;
}
.action-edit-inactive:hover {
  color: var(--primary);
}


.brand-inline-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.brand-inline-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}
.admin-detail-inline-row {
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.admin-detail-inline-row-spacious {
  margin-bottom: 14px;
}
.admin-detail-inline-row-center {
  align-items: center;
}
.admin-detail-inline-label {
  width: 80px;
  min-width: 80px;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}
.admin-detail-inline-label-top {
  padding-top: 6px;
}
.admin-detail-inline-field {
  flex: 1;
  min-width: 0;
}
.admin-detail-inline-edit-field {
  position: relative;
  min-height: 32px;
}
.admin-detail-inline-controls {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.brand-inline-input {
  height: 34px;
  box-sizing: border-box;
  padding: 0 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
}
.brand-inline-edit-input {
  width: 100%;
  min-width: 0;
  display: block;
  padding: 0 10px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  outline: none;
  box-shadow: none;
  height: 34px;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  text-align: inherit;
  box-sizing: border-box;
}
#brandTable {
  table-layout: fixed;
}
#brandTable td,
#brandTable th {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brand-save-btn,
.product-save-btn,
.ph-save-btn {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}
.brand-save-btn:hover,
.product-save-btn:hover,
.ph-save-btn:hover {
  background: transparent;
  color: var(--primary-dark);
}

/* ============ Brand Logo ============ */
.brand-logo-cell {
  width: 80px;
  text-align: center;
  padding: 0 6px !important;
}
.brand-logo-upload {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 34px;
  box-sizing: border-box;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  margin: 0 auto;
  line-height: 1;
  border: 1px dashed var(--border);
  background: var(--bg-inner);
  transition: border-color 0.2s;
}
.brand-logo-upload:hover {
  border-color: var(--primary);
}
.brand-logo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.brand-logo-placeholder {
  font-size: 18px;
  color: var(--text-secondary);
  line-height: 1;
}
.brand-logo-remove {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  background: var(--danger);
  color: white;
  border-radius: 50%;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  cursor: pointer;
  display: none;
}
.brand-logo-upload:hover .brand-logo-remove {
  display: block;
}

.product-image-cell {
  width: 60px;
  text-align: center;
  padding: 0 6px !important;
  position: relative;
}
.product-image-edit-btn {
  font-size: 12px;
  color: var(--primary);
  cursor: pointer;
  padding: 4px 8px;
}
.product-image-edit-btn:hover {
  text-decoration: underline;
}
.image-crop-box {
  overflow: hidden;
  border: 2px solid var(--primary);
  border-radius: 8px;
  position: relative;
  cursor: grab;
  background: #f8f8f8;
  user-select: none;
  touch-action: none;
}
.image-crop-box:active {
  cursor: grabbing;
}
.image-crop-box img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: fill;
  object-position: center center;
  transform-origin: center center;
  pointer-events: none;
  will-change: transform;
}
.product-image-upload {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  box-sizing: border-box;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  margin: 0 auto;
  line-height: 1;
  border: 1px dashed var(--border);
  background: var(--bg-inner);
  transition: border-color 0.2s, background 0.2s;
}
.product-image-upload:hover {
  border-color: var(--primary);
  background: white;
}
.product-image-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-image-placeholder {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-secondary);
  line-height: 1;
}
.product-image-upload.has-image .product-image-placeholder {
  display: none;
}

/* ============ Toast ============ */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #1e293b;
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 1000;
  animation: slideIn 0.3s ease;
}
.toast.success { background: var(--success); }
.toast.error { background: var(--danger); }

@keyframes slideIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ============ Loading ============ */
.loading {
  display: flex;
  justify-content: center;
  padding: 40px;
  color: var(--text-secondary);
}

/* ============ Empty State ============ */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-secondary);
}
.empty-state .icon { font-size: 48px; margin-bottom: 16px; }
.empty-state p { font-size: 14px; }

/* ============ Responsive ============ */
@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    overflow-x: hidden;
  }
  html, body, * {
    scrollbar-gutter: auto;
    scrollbar-width: none;
  }
  ::-webkit-scrollbar {
    display: none;
  }
  body.has-mobile-bottom-nav {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }
  .header-inner {
    flex-wrap: wrap;
    height: auto;
    padding: 10px 0;
    gap: 8px;
  }
  .category-tabs {
    order: 3;
    width: 100%;
    justify-content: center;
    padding: 4px 0 0;
  }

  /* 검색바를 헤더 우측 돋보기만 */
  .search-bar-wrap {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 0;
    background: none;
    z-index: 201;
  }
  .search-bar {
    border: none;
    background: none;
  }
  .search-input {
    display: none;
  }
  .search-btn {
    padding: 6px;
    color: #facc15;
  }
  .search-btn svg {
    width: 26px;
    height: 26px;
  }
  .header {
    position: relative;
  }
  .logo-img {
    height: 21px;
  }
  .header-identity-nickname,
  .header-identity-login,
  .header-identity-icon {
    display: none;
  }
  .admin-layout {
    grid-template-columns: 1fr;
  }
  .admin-sidebar {
    position: static;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0;
    height: 44px;
  }
  .admin-sidebar a { white-space: nowrap; }
  .brand-menu-category-manager {
    align-items: stretch;
  }
  .brand-menu-category-manager-head,
  .brand-menu-category-manager-row,
  .brand-menu-category-manager-add {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }
  .brand-menu-category-manager-row {
    display: grid;
  }
  .brand-menu-category-manager-actions {
    justify-content: flex-end;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  /* ===== 모바일 메인 레이아웃: 1컬럼 세로 흐름 ===== */
  .main-layout {
    flex-direction: column;
    gap: 10px;
  }
  .main-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  #priceComparisonSection,
  #brandSection {
    scroll-margin-top: 72px;
  }
  .brand-section,
  .chart-section,
  .youtube-section,
  .community-preview-section,
  .sidebar-panel,
  .mobile-price-bars,
  .mobile-community-top,
  .mobile-ticker-news,
  .hero-banner {
    border-radius: 0 !important;
  }

  /* 섹션 순서 재배치 + 간격·경계 통일 */
  .main-content > * {
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
    border-radius: 0 !important;
    background: var(--card-bg);
    padding: 14px !important;
  }
  .main-content .brand-section {
    order: 1;
    width: 100%;
  }
  .main-content .brand-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible;
  }
  .main-content .community-preview-section {
    order: 2;
    display: none !important;
  }
  .main-content .mobile-promo-section,
  .main-content #mobileSurveySection {
    order: 2;
  }
  .main-content #mobilePromoSection {
    height: 192px;
    overflow: hidden;
    contain: strict;
  }
  .main-content .chart-section {
    order: 3;
  }
  .main-content .youtube-section {
    order: 4;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible;
  }
  .main-content .mobile-festival-section {
    order: 5;
  }
  .mobile-festival-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .mobile-festival-card {
    display: flex;
    flex-direction: column;
  }
  .mobile-festival-thumb {
    height: 100px;
    overflow: hidden;
    flex-shrink: 0;
  }
  .mobile-festival-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .mobile-festival-card .community-card-body {
    padding: 8px;
  }
  .mobile-festival-card .community-festival-date,
  .mobile-festival-card .community-festival-location {
    font-size: 11px;
  }
  .mobile-festival-grid .community-card {
    border-radius: 10px;
    overflow: hidden;
    margin: 5px 0 !important;
    padding-left: 0;
    padding-right: 0;
  }

  .mobile-promo-section {
    position: relative;
    overflow: hidden;
  }
  .mobile-promo-section::before {
    display: none;
  }
  .mobile-survey-summary-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 0;
  }
  .mobile-survey-summary-label {
    font-size: 11px;
    color: #0f766e;
    letter-spacing: -0.01em;
  }
  .mobile-survey-summary-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
    font-weight: 600;
    white-space: nowrap;
  }
  .mobile-survey-summary-question {
    font-size: 14px;
    font-weight: 700;
    color: var(--text, #1e293b);
    line-height: 1.5;
  }
  #mobileSurveyList {
    position: relative;
  }
  .mobile-survey-summary {
    position: relative;
    display: block;
  }
  .mobile-survey-summary-count-viewport,
  .mobile-survey-summary-question-viewport {
    position: relative;
    overflow: hidden;
  }
  .mobile-survey-summary-count-viewport {
    min-height: 18px;
    flex-shrink: 0;
  }
  .mobile-survey-summary-question-viewport {
    min-height: 21px;
  }
  .mobile-survey-summary-count-item {
    width: 100%;
  }
  .mobile-survey-summary-slide-enter,
  .mobile-survey-summary-slide-exit {
    position: absolute;
    inset: 0;
    width: 100%;
    will-change: transform, opacity;
  }
  .mobile-survey-summary-slide-enter {
    transform: translateY(100%);
    opacity: 0;
  }
  .mobile-survey-summary-slide-exit {
    transform: translateY(0);
    opacity: 1;
  }
  .mobile-survey-summary-slide-exit.mobile-survey-summary-slide-active,
  .mobile-survey-summary-slide-enter.mobile-survey-summary-slide-active {
    transition: transform 0.38s ease, opacity 0.38s ease;
  }
  .mobile-survey-summary-slide-enter.mobile-survey-summary-slide-active {
    transform: translateY(0);
    opacity: 1;
  }
  .mobile-survey-summary-slide-exit.mobile-survey-summary-slide-active {
    transform: translateY(-100%);
    opacity: 0;
  }
  .mobile-promo-section .sidebar-title {
    display: none;
  }
  .mobile-promo-section .side-promo-price {
    font-size: 14px;
    font-weight: 700;
  }
  .mobile-promo-section .side-promo-slider {
    overflow: hidden;
  }
  .mobile-promo-section .side-promo-slot {
    height: 56px;
    overflow: hidden;
    will-change: transform, opacity;
    transform: translateZ(0);
  }
  .mobile-promo-section .side-promo-slot:first-child .side-promo-row {
    padding-top: 0;
  }
  .mobile-promo-section .side-promo-slot:last-child .side-promo-row {
    padding-bottom: 10px;
  }

  /* 브랜드 그리드: 가로 스크롤, 화면 100% */
  .brand-grid {
    display: flex !important;
    overflow-x: auto;
    overflow-y: hidden;
    width: calc(100% + 28px);
    margin-left: -14px;
    margin-right: -14px;
    padding-left: 14px;
    padding-right: 14px;
    gap: 10px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .brand-grid::-webkit-scrollbar {
    display: none;
  }
  .brand-grid .brand-card,
  .brand-grid .survey-mix-ad-card {
    min-width: 140px;
    max-width: 140px;
    flex-shrink: 0;
    scroll-snap-align: start;
  }
  .brands-list-page .brand-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow-x: visible;
    overflow-y: visible;
    width: 100%;
    margin: 0;
    padding: 0 12px;
    gap: 10px;
    scroll-snap-type: none;
    box-sizing: border-box;
  }
  .brands-list-page .brand-grid .brand-card,
  .brands-list-page .brand-grid .survey-mix-ad-card {
    min-width: 0;
    max-width: none;
    flex-shrink: unset;
    scroll-snap-align: unset;
  }
  .brands-list-page .brand-card {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 12px 8px;
  }
  .brands-list-page .brand-card .brand-logo-wrap {
    display: flex !important;
    border-right: none;
    padding: 0;
    justify-content: center;
    margin-bottom: 8px;
    width: 100%;
  }
  .brands-list-page .brand-card .brand-logo {
    width: 56px;
    height: 56px;
  }
  .brands-list-page .brand-card .brand-info .brand-name {
    display: block !important;
    font-size: 14px;
    text-align: left;
  }
  .brands-list-page .brand-card .price-date-row {
    align-items: flex-end !important;
    width: 100%;
  }
  .brands-list-page .brand-card .date-slider {
    flex: 1;
    text-align: right !important;
  }
  .brands-list-page .brand-card .date-slider-item {
    text-align: right !important;
  }

  /* 차트 섹션: 접힌 상태 */
  .desktop-price-bars {
    display: none;
  }
  .chart-container {
    height: 220px;
  }
  .chart-footer {
    display: none;
  }
  .chart-comment-divider {
    display: none;
  }
  .comment-section {
    display: block;
    border-top: 1px solid var(--border, #e5e7eb);
    margin-top: 10px;
    padding-top: 10px;
  }
  .comment-section .section-title {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 400;
    margin-bottom: 8px;
  }
  .comment-form-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr auto;
    grid-template-rows: auto auto;
    gap: 6px;
  }
  .comment-input-nickname {
    grid-column: 1;
    grid-row: 1;
    width: auto !important;
    min-width: 0 !important;
    font-size: 11px;
    padding: 5px 6px;
  }
  .comment-input-password {
    grid-column: 2;
    grid-row: 1;
    width: auto !important;
    min-width: 0 !important;
    font-size: 11px;
    padding: 5px 6px;
  }
  .comment-input-content {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 12px;
    padding: 6px 8px;
  }
  .comment-btn {
    grid-column: 3;
    grid-row: 1;
    font-size: 12px;
    padding: 6px 10px;
  }
  .comment-badge-list {
    gap: 4px;
  }
  .comment-badge-list .comment-item {
    padding: 4px 10px 6px;
  }
  .comment-badge-list .comment-row-top {
    min-height: 18px;
  }
  .comment-badge-list .comment-content-row {
    margin-top: 2px;
  }
  .chart-legend-wrap {
    font-size: 10px;
  }
  .chart-filter-buttons {
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 4px;
  }
  .chart-filter-btn {
    font-size: 11px;
    padding: 4px 8px;
  }

  /* 사이드바: 세로 흐름, 가로 스크롤 제거 */
  .sidebar {
    width: 100%;
    flex-direction: column;
    overflow-x: visible;
    gap: 10px;
  }
  .sidebar-panel {
    min-width: unset;
    width: 100%;
    padding: 14px;
    margin: 0 !important;
  }

  /* 사이드바 섹션 순서 */
  #otherCategorySection { order: 1; }
  #priceChangeSection { order: 2; }
  #sidePromoSection { order: 3; display: none !important; }
  #newsSection { order: 4; }
  #top3Section { order: 5; }
  #surveySection {
    order: 6;
    display: none !important;
  }

  /* 오늘의 치킨: 2열, 2개만 */
  .community-preview-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .community-preview-grid .community-card:nth-child(n+3) {
    display: none;
  }

  /* 유튜브: 가로 스크롤 슬라이드 */
  .youtube-card-grid {
    display: flex !important;
    overflow-x: auto;
    overflow-y: hidden;
    width: calc(100% + 28px);
    margin-left: -14px;
    margin-right: -14px;
    padding-left: 14px;
    padding-right: 14px;
    gap: 10px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0;
  }
  .youtube-card-grid::-webkit-scrollbar {
    display: none;
  }
  .youtube-card-grid > * {
    min-width: 200px;
    max-width: 200px;
    flex-shrink: 0;
    scroll-snap-align: start;
  }
  .youtube-card-grid .youtube-card-thumb {
    aspect-ratio: unset;
    height: 112px;
  }

  /* 여백/폰트 조정 */
  .container {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
  }
  .section-title {
    font-size: 15px;
  }
  .sidebar-title {
    font-size: 14px;
  }
  .brand-card {
    padding: 6px 10px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .brand-card .brand-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 2px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--border, #e5e7eb);
    height: 36px;
    overflow: hidden;
  }
  .brand-card .brand-top-row .brand-name {
    font-size: 13px;
    margin: 0;
  }
  .brand-card .brand-logo-wrap {
    display: none;
  }
  .brand-card .brand-top-row .brand-logo {
    width: 36px;
    height: 36px;
  }
  .brand-card .brand-info .brand-name {
    display: none;
  }
  .price-compare-page .brand-card .brand-info .brand-name {
    display: block !important;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 1px;
  }
  .price-compare-page .brand-card {
    padding-bottom: 4px !important;
  }
  .survey-mix-ad-card .survey-mix-ad-email {
    white-space: nowrap;
  }
  .survey-mix-ad-card .survey-mix-ad-desc {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .brand-card .menu-img-slider {
    display: none;
  }

  /* 헤더 축소 */
  .logo-stack {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    line-height: 0.88;
  }
  .logo-word-main {
    font-size: 18px;
  }
  .logo-word-sub {
    font-size: 11px;
    letter-spacing: 0.65em;
  }
  .category-tab {
    font-size: 12px;
    padding: 6px 10px;
  }

  /* 히어로 배너 */
  .hero-banner {
    width: calc(140% + 20px);
    max-width: none;
    margin-bottom: 5px;
    margin-left: calc(-20% - 10px);
    margin-right: calc(-20% - 10px);
    border-radius: 16px;
  }
  .hero-img {
    width: 100%;
    height: auto;
    display: block;
    transform: scale(1.2);
    transform-origin: center center;
  }

  /* 가격변동 티커: 1개만 */
  .ticker-prices {
    width: 100%;
  }
  .ticker-slot:nth-child(n+2) {
    display: none;
  }

  /* 모바일: 가격+뉴스 가로 배치 */
  .mobile-ticker-news {
    gap: 8px;
    margin-bottom: 5px;
    align-items: stretch;
  }
  .mobile-ticker-news .mobile-ticker-col {
    flex: 1;
    min-width: 0;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    padding: 0 10px;
    overflow: hidden;
    height: 36px;
  }
  .mobile-price-track {
    transition: transform 0.4s ease;
  }
  .mobile-price-item {
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    white-space: nowrap;
  }
  .mobile-ticker-news .mobile-news-col {
    flex: 1;
    min-width: 0;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    padding: 0 10px;
    overflow: hidden;
    height: 36px;
  }
  .mobile-news-track {
    transition: transform 0.4s ease;
  }
  .mobile-news-track .mobile-news-item {
    height: 36px;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mobile-news-track .mobile-news-item a {
    color: var(--text);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    min-width: 0;
  }

  /* 모바일: 브랜드 가격 세로 막대그래프 */
  .mobile-price-bars {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    padding: 14px 8px 10px;
    margin-bottom: 5px;
    overflow: visible;
  }
  /* 모바일: 바 그래프 아래 오늘의 치킨 (가로 스크롤) */
  .mobile-community-top {
    display: flex !important;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 10px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 0;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    padding: 12px;
  }
  .mobile-community-top::-webkit-scrollbar {
    display: none;
  }
  .mobile-community-top .community-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    min-width: 140px;
    max-width: 140px;
    flex-shrink: 0;
    scroll-snap-align: start;
  }
  .mobile-community-top .community-card-image {
    height: 60px;
    flex-shrink: 0;
    border-radius: 10px 10px 0 0;
    aspect-ratio: unset;
  }
  .mobile-community-top .community-card .community-card-body {
    flex-shrink: 0;
    overflow: hidden;
    padding: 4px 6px 2px !important;
    margin-bottom: 0 !important;
  }
  .mobile-community-top .community-card .community-card-meta {
    margin-bottom: 2px;
  }
  .mobile-community-top .community-card-content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    margin-bottom: 0;
  }
  .mobile-community-top .community-card-no-image .community-card-body {
    flex: 1;
    margin: 0 !important;
    padding: 6px !important;
  }
  .mobile-community-top .community-card-no-image .community-card-meta {
    margin-bottom: 3px;
    line-height: 14px;
  }
  .mobile-community-top .community-card-no-image .community-card-content {
    -webkit-line-clamp: 3;
    line-height: 1.5;
  }
  .mobile-community-top .community-card-no-image .community-preview-like {
    position: static;
    background: none;
    color: var(--text-secondary);
    padding: 0;
    margin-left: auto;
  }
  .mobile-community-top .community-preview-like {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: #fff;
    background: rgba(0,0,0,0.4);
    border-radius: 12px;
    padding: 2px 8px;
    z-index: 1;
  }
  .mobile-community-top .community-card-date {
    font-size: 10px;
    color: #b0b8c4;
  }

  .mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    bottom: 0;
    z-index: 350;
    display: flex !important;
    gap: 0;
    justify-content: space-between;
    padding: 10px 8px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.98);
    border-top: 1px solid var(--border, #e2e8f0);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(12px);
    overflow: hidden;
    overscroll-behavior-x: none;
    transform: translateY(calc(var(--mobile-bottom-nav-offset, 0px) * -1));
    will-change: transform;
  }
  .mobile-bottom-nav.is-hidden {
    display: none !important;
  }
  .mobile-bottom-nav-link {
    flex: 0 0 15%;
    max-width: 15%;
    min-width: 0;
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 0 4px;
    border: none;
    background: transparent;
    color: #64748b;
    text-decoration: none;
    transition: color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-bottom-nav-link:hover,
  .mobile-bottom-nav-link:active {
    text-decoration: none;
    background: transparent;
    color: #334155;
  }
  .mobile-bottom-nav-link.is-active {
    color: #ea580c;
    background: transparent;
  }
  .mobile-bottom-nav-link.is-active .mobile-bottom-nav-icon svg {
    stroke: #ea580c;
  }
  .mobile-bottom-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
  }
  .mobile-bottom-nav-icon svg {
    width: 24px;
    height: 24px;
  }
  .mobile-bottom-nav-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
  }

  .mobile-price-bars-header {
    margin-bottom: 0;
  }
  .mobile-price-bar-filters {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .mobile-price-bar-filters::-webkit-scrollbar {
    display: none;
  }
  .mobile-price-bar-filter-btn {
    border: 1px solid var(--border, #e5e7eb);
    background: #fff;
    color: #4b5563;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .mobile-price-bar-filter-btn.active {
    background: #facc15;
    border-color: #facc15;
    color: #1a1a1a;
  }
  .mobile-price-bars-plot {
    padding-top: 0;
    overflow: visible;
  }
  .mobile-price-bars-empty {
    padding: 36px 0 12px;
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
  }
  .mobile-bar-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    overflow: visible;
  }
  .mobile-bar-price {
    font-size: 9px;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
  }
  .mobile-bar-upper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    overflow: visible;
    border-bottom: 1px solid var(--border, #e5e7eb);
  }
  .mobile-bar-fill {
    background: linear-gradient(to top, #facc15, #fde68a);
    transition: height 0.6s ease;
    border-radius: 8px 8px 0 0;
  }
  .mobile-bar-fill-lowest {
    background: linear-gradient(to top, #2563eb, #93c5fd);
  }
  .mobile-bar-fill-highest {
    background: linear-gradient(to top, #f97316, #fdba74);
  }
  .mobile-bar-menu {
    font-size: 9px;
    color: var(--text-secondary);
    white-space: nowrap;
    text-align: center;
  }
  .mobile-bar-brand {
    display: block;
    width: 100%;
    font-size: 9px;
    color: #555;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    margin-top: 0;
    text-align: center;
  }
  .mobile-bars-inner {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  .mobile-meat-line {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1.5px dashed #ef4444;
    pointer-events: none;
    z-index: 1;
  }
  .mobile-meat-label {
    position: absolute;
    right: 0;
    top: -14px;
    font-size: 8px;
    font-weight: 600;
    color: #ef4444;
    white-space: nowrap;
  }

  /* 원래 티커/뉴스 숨김 */
  .price-change-ticker {
    display: none;
  }
  #newsSection {
    display: none;
  }

  .menu-list {
    display: flex;
    gap: 12px;
    padding-top: 12px;
  }
  .menu-list-col {
    flex: 1 1 0;
    width: 0;
  }
  .brand-promo-card {
    margin-bottom: 0;
  }
  .menu-name-row {
    flex-wrap: nowrap;
  }
  .menu-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  body.brand-page {
    background-image: none;
    background-color: var(--bg, #f7f8ff);
  }
  body.brand-page .container {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
  }
  body.brand-page .container > * {
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
  }
  body.brand-page .brand-header-box {
    padding-left: 12px;
    padding-right: 12px;
  }
  .menu-card {
    position: relative;
  }
  .menu-card-image-wrap {
    height: 120px;
  }
  .menu-card-image {
    transform: scale(1.3);
  }
  .menu-card > .menu-card-summary > .menu-card-top-row > .menu-card-like-btn,
  .menu-card .menu-card-like-btn {
    background: none;
    padding: 4px;
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
  }
  .menu-card-like-btn .like-heart svg {
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
    stroke: #fff;
  }
  .menu-card-like-btn .like-heart-active svg {
    stroke: #ff4757;
  }
  .menu-card-like-btn .like-count {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
  }
  .new-menu-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    line-height: 1.4;
  }
  .brand-info-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    margin-bottom: 2px;
  }
  .menu-comment-readonly-title {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    padding: 4px 0 0;
  }
  .menu-comment-item-readonly .menu-comment-item-body {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .menu-comment-item-readonly .menu-comment-item-head {
    display: flex;
    align-items: center;
    padding-right: 0;
    width: 100%;
  }
  .menu-comment-item-readonly .menu-comment-item-author {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .menu-comment-reactions-inline {
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .menu-card-summary {
    padding: 6px 8px;
  }
  .menu-card-top-row {
    align-items: center;
    gap: 4px;
  }
  .menu-card-price-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .menu-card-meta-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-secondary, #6b7280);
  }
  .menu-card-meta {
    display: none;
  }
  .menu-card-summary {
    gap: 4px;
  }
  .menu-comment-actions {
    justify-content: flex-start;
  }
  .menu-comment-form-row {
    flex-wrap: wrap;
  }
  .menu-comment-submit,
  .menu-comment-more-btn {
    width: 100%;
  }
  .pd-comment-form-row {
    flex-wrap: wrap;
  }
  .pd-comment-submit {
    width: 100%;
  }

  /* 팝업: 모바일 전체화면 */
  .product-detail-popup {
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
    animation: none;
    overflow-x: hidden;
  }
  .product-detail-content {
    overflow-x: hidden;
    max-width: 100%;
  }
  .product-detail-content .pd-header {
    padding: 20px 12px 0;
  }
  .product-detail-content .pd-chart-wrap {
    padding-left: 12px;
    padding-right: 12px;
  }
  .product-detail-content .pd-comparison-inner {
    padding: 0 12px 16px;
  }
  .product-detail-content .pd-bar-chart-inner {
    padding: 0 12px 16px;
  }
  .product-detail-content .pd-bar-chart-canvas-wrap {
    height: 230px;
  }
  .product-detail-content .pd-promotions {
    padding-left: 12px;
    padding-right: 12px;
  }
  .product-detail-content .pd-history {
    padding: 0 12px;
  }
  .product-detail-content .pd-comments {
    padding: 12px 12px 16px;
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
  }
  .product-detail-content .pd-comment-form-row {
    flex-wrap: wrap;
    max-width: 100%;
  }
  .product-detail-content .pd-comment-form-row .menu-comment-input {
    width: auto;
    flex: 1;
    min-width: 60px;
  }
  .product-detail-content .pd-comment-textarea {
    width: 100%;
    flex-basis: 100%;
    box-sizing: border-box;
  }
  .product-detail-content .pd-comment-submit {
    width: auto;
    flex-shrink: 0;
  }

}

/* ============ Product Detail Popup ============ */
.product-detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 16px;
  transition: background .3s ease;
}
.product-detail-overlay.is-visible {
  background: rgba(0,0,0,.45);
}
.product-detail-overlay[hidden] { display: none; }
.product-detail-popup {
  position: relative;
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  scrollbar-width: none;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  animation: popupSlideUp .25s ease;
}
.product-detail-popup::-webkit-scrollbar { display: none; }
@keyframes popupSlideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.product-detail-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(0,0,0,.06);
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  color: #666;
  cursor: pointer;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-detail-close:hover { background: rgba(0,0,0,.12); }
.product-detail-content {
  padding: 0;
}
.product-detail-content .pd-image-wrap {
  width: 100%;
  height: 280px;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
  position: relative;
}
.pd-image-notice {
  font-size: 10px;
  color: #d1d5db;
  text-align: right;
  padding: 2px 10px 0;
  margin-bottom: -8px;
}
.product-detail-content .pd-image-wrap > a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
.product-detail-content .pd-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product-detail-content .pd-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'main actions'
    'price price';
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  padding: 20px 24px 0;
}
.pd-header-main {
  grid-area: main;
  min-width: 0;
}
.image-notice-wrap {
  display: flex;
  align-items: center;
}

.pd-actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.pd-price-block {
  grid-area: price;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  min-width: 0;
}
.pd-price-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}
.pd-price-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.pd-like-btn {
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: #666;
}
.pd-like-btn:hover {
  color: #ef4444;
}
.pd-like-btn.is-liked {
  color: #ef4444;
}
.pd-like-btn.is-liked svg {
  fill: #ef4444;
}
.pd-brand-popup-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 24px 0;
}
.pd-brand-popup-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}
.pd-brand-popup-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  text-align: left;
}
.pd-brand-like-btn {
  flex-shrink: 0;
}
.pd-like-count {
  font-size: 12px;
  font-weight: 600;
  color: #999;
}
.pd-share-btn {
  background: none;
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #666;
  flex-shrink: 0;
}
.pd-share-btn:hover {
  background: #f3f4f6;
  color: #333;
}
.product-detail-content .pd-brand-name {
  font-size: 12px;
  color: #999;
  margin-bottom: 2px;
}
.pd-brand-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.pd-brand-name-link {
  font-size: 12px;
  color: #999;
  text-decoration: none;
}
.pd-brand-name-link:hover {
  color: #555;
  text-decoration: underline;
}
.product-detail-content .pd-title {
  font-size: 20px;
  font-weight: 800;
  color: #1a1a1a;
}
.product-detail-content .pd-description {
  font-size: 13px;
  color: #666;
  margin-top: 4px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.product-detail-content .pd-price {
  font-size: 24px;
  font-weight: 800;
  color: #ff7800;
  margin-top: 0;
  line-height: 1.2;
  white-space: nowrap;
}
.pd-price-date {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 2px;
}
.pd-order-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 29px;
  margin-left: auto;
  padding: 0 14px;
  background: #facc15;
  color: #000;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  flex-shrink: 0;
  transition: background 0.15s;
}
.pd-order-btn:hover {
  background: #eab308;
  text-decoration: none;
}
.product-detail-content .pd-price-change {
  font-size: 13px;
  font-weight: 600;
  margin-left: 0;
}
.product-detail-content .pd-price-change.up { color: var(--danger); }
.product-detail-content .pd-price-change.down { color: #2563eb; }
.product-detail-content .pd-chart-wrap {
  margin: 20px 0;
  padding: 0 24px;
  height: 200px;
  position: relative;
}
.pd-comparison-inner {
  padding: 0 24px 16px 24px;
}
.pd-bar-chart-inner {
  padding: 0 24px 16px 24px;
}
.pd-bar-chart-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.pd-bar-chart-canvas-wrap {
  height: 200px;
  position: relative;
}
.pd-comparison-title {
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 10px;
}
.pd-comparison-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.pd-comparison-row.is-current .pd-comparison-brand,
.pd-comparison-row.is-current .pd-comparison-price {
  font-weight: 700;
  color: #ff7800;
}
.pd-comparison-row.is-current .pd-comparison-bar {
  background: linear-gradient(to right, #ff9a3c, #ff5e00);
}
.pd-comparison-row.is-lowest .pd-comparison-brand,
.pd-comparison-row.is-lowest .pd-comparison-price {
  font-weight: 700;
  color: #36bbda;
}
.pd-comparison-row.is-lowest .pd-comparison-bar {
  background: linear-gradient(to right, #5dd4ed, #2a9fbd);
}
.pd-comparison-bars {
  position: relative;
}
.pd-comparison-avg-line {
  position: absolute;
  top: 0;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  transform: translateX(-50%);
}
.pd-comparison-avg-line::after {
  content: '';
  flex: 1;
  width: 2px;
  margin-top: 2px;
  background: repeating-linear-gradient(to bottom, #facc15 0, #facc15 3px, transparent 3px, transparent 5px);
}
.pd-comparison-avg-badge {
  font-size: 10px;
  font-weight: 600;
  color: #000;
  background: #facc15;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  margin-bottom: 2px;
}
.pd-comparison-brand {
  font-size: 11px;
  color: #555;
  width: 70px;
  flex-shrink: 0;
  text-align: right;
}
.pd-comparison-product {
  font-size: 9px;
  color: rgba(255,255,255,.9);
  font-weight: 500;
  padding-left: 6px;
  line-height: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pd-comparison-bar-wrap {
  flex: 1;
  height: 14px;
  background: #f1f5f9;
  border-radius: 7px;
  overflow: hidden;
}
.pd-comparison-bar {
  height: 100%;
  background: #cbd5e1;
  border-radius: 7px;
  transition: width .3s ease;
  display: flex;
  align-items: center;
}
.pd-comparison-price {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  width: 65px;
  flex-shrink: 0;
}

/* Promotions (이벤트 · 신메뉴) */
.pd-promotions {
  padding: 0 24px;
}
.pd-promo-title {
  font-size: 14px;
  font-weight: 700;
  color: #374151;
  margin: 20px 0 10px;
}
.pd-promo-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.pd-promo-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s;
  position: relative;
}
.pd-promo-card::before {
  content: '';
  display: block;
  height: 4px;
}
.pd-promo-card.pd-promo-event::before {
  background: linear-gradient(to right, #3b82f6, #93c5fd);
}
.pd-promo-card.pd-promo-new::before {
  background: linear-gradient(to right, #ef4444, #fca5a5);
}
.pd-promo-card.pd-promo-popular::before {
  display: none;
}
.pd-promo-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.pd-promo-img,
.pd-promo-img-empty {
  display: none;
}
.pd-promo-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin: 8px 8px 0;
  align-self: flex-start;
}
.pd-promo-badge-event {
  background: #dbeafe;
  color: #1d4ed8;
}
.pd-promo-badge-new {
  background: #fee2e2;
  color: #dc2626;
}
.pd-promo-badge-popular {
  background: #ef4444;
  color: #fff;
}
.pd-brand-timeline {
  padding: 0;
}
.pd-promo-popular {
  position: relative;
  height: 80px;
}
.pd-promo-popular .pd-promo-badge {
  position: relative;
  z-index: 1;
}
.pd-promo-popular::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
  border-radius: 0 0 10px 10px;
  z-index: 0;
}
.pd-promo-popular .pd-promo-card-title {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding: 4px 8px 8px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.pd-promo-popular .pd-promo-img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
  z-index: 0;
}
.pd-promo-popular .pd-promo-img-empty {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f3f4f6;
  border-radius: 10px;
  z-index: 0;
}
.pd-promo-card-title {
  font-size: 13px;
  font-weight: 800;
  padding: 4px 8px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: 100%;
}
.pd-promo-period {
  font-size: 10px;
  color: #9ca3af;
  padding: 2px 8px 8px;
  text-align: right;
}

.product-detail-content .pd-history {
  margin: 20px 0 0;
  padding: 0 24px;
}
.product-detail-content .pd-history-title {
  font-size: 14px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 8px;
}
.pd-history-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-bottom: 1px solid #e5e7eb;
  font-size: 11px;
  font-weight: 600;
  color: #999;
  text-align: center;
}
.product-detail-content .pd-history-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 13px;
  border-radius: 4px;
  transition: background .1s;
}
.product-detail-content .pd-history-hidden {
  display: none;
}
.product-detail-content .pd-history-expanded .pd-history-hidden {
  display: flex;
}
.pd-history-toggle-btn {
  display: block;
  width: 100%;
  padding: 8px 0;
  margin-top: 4px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
}
.pd-history-toggle-btn:hover {
  background: #f5f5f7;
}
.product-detail-content .pd-history-item:hover,
.product-detail-content .pd-history-item.is-highlight {
  background: rgba(0,0,0,.04);
}
.product-detail-content .pd-history-item.is-selected {
  background: rgba(255,120,0,.08);
}
.product-detail-content .pd-history-date {
  color: #666;
  width: 90px;
  flex-shrink: 0;
  text-align: center;
}
.product-detail-content .pd-history-price {
  font-weight: 700;
  width: 80px;
  flex-shrink: 0;
  text-align: center;
}
.product-detail-content .pd-history-diff {
  width: 80px;
  flex-shrink: 0;
  font-weight: 600;
  font-size: 12px;
  text-align: center;
}
.product-detail-content .pd-history-diff.up { color: var(--danger); }
.product-detail-content .pd-history-diff.down { color: #2563eb; }
.product-detail-content .pd-history-expanded .pd-history-up .pd-history-date,
.product-detail-content .pd-history-expanded .pd-history-up .pd-history-price { color: var(--danger); }
.product-detail-content .pd-history-expanded .pd-history-down .pd-history-date,
.product-detail-content .pd-history-expanded .pd-history-down .pd-history-price { color: #2563eb; }
.product-detail-content .pd-history-source {
  color: #999;
  text-decoration: none;
  font-size: 12px;
  flex: 1;
  text-align: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-detail-content .pd-history-source:hover { text-decoration: underline; }
.product-detail-content .pd-history-memo {
  color: #999;
  font-size: 11px;
  flex: 1;
  min-width: 0;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-detail-content .pd-comments {
  margin-top: 24px;
  border-top: 1px solid #e5e7eb;
  padding: 16px 12px 24px;
}
.pd-brand-other-menus {
  border-top: 1px solid #e5e7eb;
  margin-top: 12px;
  padding: 12px 12px 24px;
}
.pd-brand-other-menus-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.pd-brand-other-menus-grid .menu-card {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.pd-brand-other-menus-grid .menu-card-summary {
  min-width: 0;
  overflow: hidden;
  padding: 10px 12px 6px;
  gap: 4px;
}
.pd-brand-other-menus-grid .menu-card {
  cursor: pointer;
}
.pd-brand-other-menus-grid .menu-card-price-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px;
  grid-template-areas:
    "price spark"
    "meta spark";
  align-items: start;
  column-gap: 8px;
  row-gap: 2px;
}
.pd-brand-other-menus-grid .menu-price {
  grid-area: price;
}
.pd-brand-other-menus-grid .menu-card-meta-inline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  font-size: 11px;
  color: var(--text-secondary, #6b7280);
  white-space: normal;
  overflow: hidden;
  min-width: 0;
  grid-area: meta;
}
.pd-brand-other-menus-grid .menu-card-meta {
  display: none;
}
.pd-brand-other-menus-grid .menu-card-date,
.pd-brand-other-menus-grid .menu-card-source {
  display: block;
  min-width: 0;
  max-width: 100%;
}
.pd-brand-other-menus-grid .menu-price-sparkline {
  width: 100%;
}
.pd-brand-other-menus-grid .menu-price-sparkline svg {
  width: 100%;
}
.pd-brand-other-menus-grid .menu-card-source-link {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
}
.product-detail-content .pd-comments-title {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.pd-comment-form {
  margin-bottom: 4px;
}
.pd-comment-form-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.pd-comment-form-row .menu-comment-input {
  width: 80px;
  flex: none;
  min-width: 0;
  height: 28px;
  padding: 0 8px;
}
.pd-comment-form-row .pd-comment-password {
  width: 90px;
}
.pd-comment-textarea {
  flex: 1;
  min-height: 28px;
  height: 28px;
  padding: 4px 12px;
  resize: none;
  overflow: hidden;
  line-height: 1.5;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: white;
}
.pd-comment-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.pd-comment-submit {
  border: none;
  background: #facc15;
  color: #1e293b;
  padding: 4px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.pd-comment-submit:hover {
  background: #eab308;
}
.pd-comment-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.pd-comment-list {
}
.pd-comment-pagination {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 12px;
}
.pd-page-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 50%;
  font-size: 13px;
  color: #374151;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.pd-page-btn:hover:not(:disabled):not(.is-active) {
  background: #f3f4f6;
}
.pd-page-btn.is-disabled {
  opacity: 0.3;
  cursor: default;
}
.pd-page-arrow {
  background: none;
  border: none;
  font-size: 16px;
  color: #374151;
  cursor: pointer;
  padding: 0 4px;
  height: 32px;
}
.pd-page-arrow:hover:not(:disabled) {
  color: #000;
}
.pd-page-arrow.is-disabled {
  opacity: 0.3;
  cursor: default;
}
.pd-page-btn.is-active {
  background: #facc15;
  color: #000;
  border-color: #facc15;
  font-weight: 700;
}

/* ============ Survey Page ============ */
.survey-page-header {
  margin-bottom: 12px;
}
.survey-page-header .mobile-survey-detail-back {
  display: none;
}
.survey-page-header .mobile-survey-detail-title {
  text-align: left;
  padding-right: 0;
}
@media (max-width: 768px) {
  .survey-page-header .mobile-survey-detail-back {
    display: flex;
  }
  .survey-page-header.mobile-survey-detail-header {
    margin-top: 0;
  }
  .survey-page-header .mobile-survey-detail-title {
    text-align: center;
    padding-right: 28px;
  }
}
.survey-card-page {
  position: relative;
  overflow: hidden;
  border: none;
  cursor: pointer;
}
.survey-card-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(to right, var(--survey-active), color-mix(in srgb, var(--survey-active) 40%, white));
}
.survey-card-page[data-survey-has-cover="true"]::before {
  display: none !important;
}
.survey-card-page[data-survey-status="closed"]::before {
  background: linear-gradient(to right, var(--survey-closed), color-mix(in srgb, var(--survey-closed) 40%, white));
}
.survey-card-page[data-survey-voted="true"]::before {
  background: linear-gradient(to right, var(--survey-voted, #f59e0b), color-mix(in srgb, var(--survey-voted, #f59e0b) 40%, white));
}
.survey-card-page[data-survey-voted="true"] .survey-result-fill {
  background: linear-gradient(to right, color-mix(in srgb, var(--survey-voted, #f59e0b) 40%, white), var(--survey-voted, #f59e0b));
}
.survey-card-page[data-survey-voted="true"] .survey-revote-btn {
  background: linear-gradient(to right, color-mix(in srgb, var(--survey-voted, #f59e0b) 40%, white), var(--survey-voted, #f59e0b));
}
.survey-card-page[data-survey-voted="true"] .survey-revote-btn:hover {
  filter: brightness(0.85);
}
/* Survey Mix Cards (News & Brand) */
.survey-mix-card {
  display: flex;
  flex-direction: column;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  text-decoration: none;
  color: var(--text);
  transition: box-shadow 0.15s;
  position: relative;
  overflow: hidden;
}
.survey-mix-card:hover {
  box-shadow: var(--shadow-lg);
}
.survey-mix-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}
.survey-mix-news::before {
  background: linear-gradient(to right, #60a5fa, #93c5fd);
}
.survey-mix-brand::before {
  background: linear-gradient(to right, #facc15, #fde68a);
}
.survey-mix-ad-card {
  text-decoration: none;
  color: inherit;
}
.survey-mix-ad-card::before {
  background: linear-gradient(to right, #34d399, #6ee7b7);
}
.survey-mix-ad-card .brand-logo-wrap {
  padding-left: 20px;
  padding-right: 28px;
}
.survey-mix-ad-card .survey-mix-ad-icon {
  font-size: 22px;
  line-height: 1;
}
.survey-mix-ad-card .survey-mix-ad-email {
  font-size: 12px;
  font-weight: 600;
  color: #059669;
  margin-bottom: 2px;
  word-break: break-all;
}
.survey-mix-ad-card .survey-mix-ad-label {
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 2px;
}
.survey-mix-ad-card .survey-mix-ad-desc {
  font-size: 11px;
  color: #9ca3af;
  line-height: 1.4;
}
.survey-mix-ad-center {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
  padding: 12px;
  gap: 4px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  background: #f5f5f7;
}
.survey-mix-ad-center::before {
  display: block !important;
}
.survey-mix-ad-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.survey-mix-ad-center .survey-mix-ad-icon-svg {
  flex-shrink: 0;
  vertical-align: middle;
}
.survey-mix-ad-reverse .brand-logo-wrap {
  padding-right: 0;
  padding-left: 20px;
  border-right: none;
  border-left: 1px solid var(--border);
}
.survey-mix-ad-reverse .brand-info {
  padding-right: 10px;
}
.survey-mix-ad-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
  padding: 14px 12px;
  background: #f5f5f7;
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
  border: 2px solid transparent;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}
.survey-mix-ad-vertical::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(to right, #34d399, #6ee7b7);
}
.survey-mix-ad-vertical:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--primary-light);
  transform: translateY(-2px);
}
.survey-mix-ad-vertical .survey-mix-ad-icon {
  font-size: 28px;
  line-height: 1;
}
.survey-mix-ad-hr {
  width: 100%;
  border: none;
  border-top: 1px solid var(--border);
  margin: 8px 0;
}
.survey-mix-ad-vertical .brand-name {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}
.survey-mix-ad-vertical .survey-mix-ad-email {
  font-size: 11px;
  font-weight: 600;
  color: #059669;
  margin-bottom: 4px;
}
.survey-mix-ad-vertical .survey-mix-ad-desc {
  font-size: 11px;
  color: #9ca3af;
  line-height: 1.4;
}
.survey-mix-promo {
  margin-bottom: 12px !important;
  border-radius: 8px;
}
.survey-mix-promo::before {
  background: linear-gradient(to right, #f472b6, #f9a8d4);
}
.survey-mix-brand-card {
  cursor: pointer;
}
/* Brand Info Card */
.brand-info-card {
  padding: 16px;
  position: relative;
  overflow: hidden;
}
.brand-info-card-title-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.brand-card-like-btn {
  align-self: auto;
  flex-shrink: 0;
}
.brand-info-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(to right, #facc15, #fde68a);
}
.brand-info-card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.brand-info-card-logo {
  width: 96px;
  height: 96px;
  object-fit: contain;
  border-radius: 8px;
}
.brand-info-card-name {
  font-size: 16px;
  font-weight: 700;
  flex: 1;
  min-width: 0;
  align-self: auto;
}
@media (max-width: 768px) {
  .brand-info-card {
    padding: 10px;
  }
  .brand-info-card-header {
    gap: 0;
    margin-bottom: 0;
  }
  .brand-info-card-logo {
    width: 64px;
    height: 64px;
  }
}
.pd-brand-promo-list {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.pd-promo-row-slot {
  overflow: hidden;
  position: relative;
}
.pd-promo-row-track {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  transform: translateY(0);
  will-change: transform;
}
.pd-promo-row-frame {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.pd-promo-row-frame > * {
  width: 100%;
}
.pd-brand-promo-sub {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}
.pd-brand-promo-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  transition: box-shadow 0.15s;
  position: relative;
  overflow: hidden;
}
.pd-brand-promo-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}
.pd-brand-promo-badge-event + .pd-brand-promo-item::before,
.pd-brand-promo-item:has(.pd-brand-promo-badge-event)::before {
  background: linear-gradient(to right, #60a5fa, #93c5fd);
}
.pd-brand-promo-item:has(.pd-brand-promo-badge-new)::before {
  background: linear-gradient(to right, #facc15, #fde68a);
}
.pd-brand-promo-item:has(.pd-brand-promo-badge-product)::before {
  background: linear-gradient(to right, #34d399, #86efac);
}
.pd-brand-promo-item-product::before {
  background: linear-gradient(to right, #34d399, #86efac);
}
.pd-brand-promo-item-product {
  justify-content: flex-end;
  background: #0f172a;
}
.pd-brand-promo-item-product .pd-promo-row-slot {
  position: relative;
  z-index: 1;
}
.pd-brand-promo-product-cover {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.pd-brand-promo-product-cover-enter {
  opacity: 0;
  transform: translateY(6px);
}
.pd-brand-promo-product-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.88), rgba(15, 23, 42, 0.18) 58%, rgba(15, 23, 42, 0.08));
}
.pd-brand-promo-product-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pd-brand-promo-product-cover-placeholder {
  background: linear-gradient(135deg, #1f2937, #334155);
}
.pd-brand-promo-item:hover {
  box-shadow: var(--shadow);
  text-decoration: none;
}
.pd-brand-promo-product-head {
  display: flex;
  align-items: center;
  min-height: 20px;
}
.pd-brand-promo-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0;
}
.pd-brand-promo-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
}
.pd-brand-promo-badge-event {
  background: #dbeafe;
  color: #2563eb;
}
.pd-brand-promo-badge-new {
  background: #facc15;
  color: #713f12;
}
.pd-brand-promo-badge-product {
  background: #dcfce7;
  color: #15803d;
}
.pd-brand-promo-title {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pd-brand-promo-product-title {
  position: relative;
  z-index: 1;
  color: #fff;
  text-shadow: 0 1px 6px rgba(15, 23, 42, 0.6);
}
.pd-brand-promo-product-title span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pd-brand-promo-product-spacer {
  min-height: 0;
}
.pd-brand-promo-brand {
  font-size: 11px;
  color: #9ca3af;
}
.pd-brand-promo-period {
  font-size: 10px;
  color: #9ca3af;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 0;
}
.pd-brand-promo-price {
  font-size: 13px;
  font-weight: 700;
  color: #f97316;
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
  margin-top: 0;
}
.brand-info-card-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 10px;
  white-space: pre-line;
}
.brand-mix-rep {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}
.brand-mix-price {
  font-size: 14px;
  font-weight: 700;
  margin-top: 2px;
}
.survey-mix-badge {
  font-size: 10px;
  font-weight: 700;
  color: #9ca3af;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}
.survey-mix-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.survey-mix-news .survey-mix-title {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.survey-mix-meta {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 6px;
}
.survey-news-slot {
  transition: opacity 0.2s, transform 0.2s;
}
.survey-news-slot-out {
  opacity: 0;
  transform: translateY(-8px);
}
.survey-news-slot-in {
  animation: surveyNewsIn 0.2s ease;
}
@keyframes surveyNewsIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.survey-mix-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  margin-bottom: 6px;
}

.survey-card-page[data-survey-status="closed"] .survey-result-fill,
.survey-card[data-survey-status="closed"] .survey-result-fill {
  background: linear-gradient(to right, color-mix(in srgb, var(--survey-closed) 40%, white), var(--survey-closed));
}
.survey-page-header .section-title {
  font-size: 18px;
  font-weight: 700;
}
.survey-section-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.survey-page-list {
  columns: 3;
  column-gap: 12px;
}
.survey-page-list > * {
  break-inside: avoid;
  margin-bottom: 12px;
}
@media (max-width: 768px) {
  .survey-page-list {
    columns: 2;
    column-gap: 10px;
    padding: 0 12px;
  }
}
.survey-card-page {
  padding: 12px;
  display: flex;
  flex-direction: column;
}
.survey-card-page .survey-card-cover {
  margin: -12px -12px 12px;
  aspect-ratio: 32 / 7;
  overflow: hidden;
  background: #e5e7eb;
  box-shadow: 0 12px 24px -20px rgba(15, 23, 42, 0.45);
  position: relative;
  border-radius: 8px 8px 0 0;
}
.survey-card-page .survey-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.survey-card-page .survey-card-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.survey-card-page .survey-card-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
  flex: 1;
}
.survey-card-page .survey-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 12px;
}
.survey-card-page .survey-card-period {
  font-size: 11px;
  color: #9ca3af;
  margin: 0;
}
.survey-card-page .survey-card-participants {
  font-size: 11px;
  color: #9ca3af;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 3px;
}
.survey-card-page .survey-card-voted {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--survey-voted, #f59e0b);
  padding: 2px 8px;
  border-radius: 999px;
}
.survey-card-page .survey-card-total {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  color: var(--survey-active);
  text-align: right;
  white-space: nowrap;
}
.survey-card-page[data-survey-status="closed"] .survey-card-total {
  color: var(--survey-closed);
  text-align: right;
  white-space: nowrap;
}
.survey-card-page[data-survey-voted="true"] .survey-card-total {
  color: var(--survey-voted, #f59e0b);
}
.survey-card-page[data-survey-voted="true"] .pd-comment-submit {
  background: var(--survey-voted, #f59e0b);
}
.survey-card-page[data-survey-voted="true"] .pd-comment-submit:hover {
  filter: brightness(0.85);
}
.survey-page-empty {
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
  padding: 40px 0;
  grid-column: 1 / -1;
}
/* Survey detail modal overlay */
.survey-detail-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: surveyFadeIn 0.2s ease;
}
@keyframes surveyFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.survey-detail-modal {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-width: 520px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 24px;
  position: relative;
  animation: surveySlideUp 0.25s ease;
}
@keyframes surveySlideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.survey-detail-close {
  position: absolute;
  top: 12px; right: 12px;
  background: none; border: none;
  font-size: 20px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 1;
}
.survey-detail-close:hover {
  background: #f3f4f6;
  color: var(--text);
}
.survey-detail-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 4px;
  padding-right: 30px;
}
.survey-detail-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 6px;
  line-height: 1.5;
}
.survey-detail-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 11px;
  color: #9ca3af;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
@media (max-width: 640px) {
  .survey-detail-modal {
    max-width: 100%;
    max-height: 90vh;
  }
}

/* ============ Survey Section ============ */
#surveySection::before { background: linear-gradient(to right, var(--survey-active), color-mix(in srgb, var(--survey-active) 40%, white)); }
.survey-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#surveySection .survey-card {
  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
}
#surveySection .survey-card-clickable {
  cursor: pointer;
}
.survey-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  background: #fafafa;
}
.survey-card.survey-card-page {
  border: none;
  box-shadow: 0 0 0 1px var(--border);
  overflow: hidden;
  padding: 12px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.survey-card.survey-card-page:hover {
  transform: scale(1.02);
  box-shadow: 0 0 0 1px var(--border), 0 4px 12px rgba(0,0,0,0.08);
}
.survey-modal-overlay .survey-card.survey-card-page {
  cursor: default;
}
.survey-modal-overlay .survey-card.survey-card-page:hover {
  transform: none;
  box-shadow: 0 0 0 1px var(--border);
}
.sidebar .survey-question-text {
  font-size: 15px;
  font-weight: 700;
}
.sidebar {
  --sidebar-survey-marker-col: 16px;
  --sidebar-survey-label-col: 82px;
  --sidebar-survey-value-col: 64px;
  --sidebar-survey-col-gap: 6px;
}
.sidebar .survey-options {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 6px;
}
.sidebar .survey-result-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sidebar .survey-option-label {
  width: 100%;
  min-height: 24px;
  border: none !important;
  border-bottom: 1px solid #f3f4f6 !important;
  border-radius: 0;
  padding: 4px 8px;
  box-sizing: border-box;
}
.sidebar .survey-option-label:last-child {
  border-bottom: none !important;
}
.sidebar .survey-result-label,
.sidebar .survey-result-pct {
  border-bottom: none !important;
}
.sidebar .survey-options > label.survey-option-label {
  display: grid;
  grid-template-columns: var(--sidebar-survey-marker-col) var(--sidebar-survey-label-col) minmax(0, 1fr) var(--sidebar-survey-value-col);
  align-items: center;
  column-gap: var(--sidebar-survey-col-gap);
  border: none;
  border-bottom: none;
  border-radius: 0;
  padding: 2px 0;
  min-height: 0;
}
.sidebar .survey-options > label.survey-option-label input[type="radio"],
.sidebar .survey-options > label.survey-option-label input[type="checkbox"] {
  margin: 0;
  grid-column: 1;
}
.sidebar .survey-option-text {
  grid-column: 2;
  position: relative;
  top: -1px;
}
.sidebar .survey-option-bar-placeholder {
  grid-column: 3;
  min-height: 10px;
}
.sidebar .survey-option-value-placeholder {
  grid-column: 4;
}
.sidebar .survey-option-bar-placeholder,
.sidebar .survey-option-value-placeholder {
  display: none;
}
.sidebar .survey-option-label.survey-result-row {
  display: grid;
  grid-template-columns: var(--sidebar-survey-label-col) minmax(0, 1fr) var(--sidebar-survey-value-col);
  align-items: center;
  column-gap: var(--sidebar-survey-col-gap);
  border: none;
  border-bottom: 1px solid #e5e7eb;
  border-radius: 0;
  min-height: 22px;
  padding: 2px 0;
}
.sidebar .survey-option-text,
.sidebar .survey-result-label {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar .survey-result-label {
  grid-column: 1;
  min-width: 0;
  box-sizing: border-box;
}
.sidebar .survey-result-bar {
  grid-column: 2;
  height: 10px;
  min-width: 0;
}
.sidebar .survey-result-pct {
  grid-column: 3;
  font-size: 12px;
  min-width: var(--sidebar-survey-value-col);
  text-align: right;
  white-space: nowrap;
}
.survey-card-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}
.survey-card-desc {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 10px;
}
.survey-card-period {
  font-size: 10px;
  color: #9ca3af;
  margin-bottom: 10px;
}
.survey-question {
  margin-bottom: 0;
}
.survey-question-text {
  font-size: 15px;
  font-weight: 700;
  margin-top: 8px;
  margin-bottom: 6px;
}
.cs-card-form {
  margin-top: 12px;
}
.cs-card-form .menu-comment-input,
.cs-card-form .pd-comment-textarea {
  font-size: 11px;
  opacity: 0.7;
}
.survey-options {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.survey-option-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
  padding: 0 4px;
  border: none;
  border-bottom: 1px solid #e5e7eb;
  border-radius: 0;
  transition: background 0.15s;
  height: 26px;
  box-sizing: border-box;
}
.survey-option-label:hover {
  background: #f9fafb;
}
.survey-option-label input[type="radio"],
.survey-option-label input[type="checkbox"] {
  accent-color: var(--survey-active);
}
.survey-submit-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px 0;
  background: var(--survey-active);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.survey-submit-btn:hover {
  filter: brightness(0.85);
}
.survey-revote-btn {
  background: linear-gradient(to right, color-mix(in srgb, var(--survey-active) 40%, white), var(--survey-active));
}
.survey-revote-btn:hover {
  background: linear-gradient(to right, #60a5fa, #1d4ed8);
}
.survey-submit-btn:disabled {
  background: #d1d5db;
  cursor: default;
}
.survey-btn-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}
.survey-btn-row.survey-btn-row-stack {
  flex-direction: column;
  align-items: stretch;
}
.survey-btn-row .survey-submit-btn {
  flex: 1;
  margin-top: 0;
}
.survey-btn-row.survey-btn-row-stack .survey-submit-btn,
.survey-btn-row.survey-btn-row-stack .survey-peek-btn {
  width: 100%;
}
.survey-peek-btn {
  flex: 1;
  padding: 8px 0;
  background: #f3f4f6;
  color: #6b7280;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.survey-peek-btn:hover {
  background: #e5e7eb;
}
/* Survey results bar */
.survey-result-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.survey-options:has(.survey-result-row) {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0;
}
.survey-option-label.survey-result-row {
  cursor: default;
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: center;
  gap: 8px;
  height: auto;
  min-height: 26px;
  border: none;
  border-bottom: 1px solid #e5e7eb;
  border-radius: 0;
  padding: 2px 4px;
}
.survey-option-label.survey-result-row:last-child {
  border-bottom: none;
}
.survey-result-label {
  white-space: nowrap;
  font-weight: 500;
}
.survey-result-bar {
  height: 16px;
  background: #f3f4f6;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.survey-result-pct {
}
.survey-result-fill {
  height: 100%;
  background: linear-gradient(to right, color-mix(in srgb, var(--survey-active) 40%, white), var(--survey-active));
  border-radius: 4px;
  transition: width 0.4s ease;
  min-width: 0;
}
.survey-result-pct {
  font-size: 11px;
  color: #6b7280;
  min-width: 62px;
  text-align: right;
  white-space: nowrap;
}
.survey-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: nowrap;
}
.survey-card-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.survey-card-total {
  font-size: 11px;
  color: #9ca3af;
  font-weight: 600;
}
.survey-status-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
/* Survey Modal */
.survey-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  justify-content: center;
  align-items: flex-start;
  padding: 20px;
  overflow-y: auto;
}
.survey-modal-content {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  width: 100%;
  max-width: 500px;
  max-height: none;
  overflow-y: visible;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  margin-top: 150px;
  margin-bottom: 40px;
}
.survey-modal-survey {
  margin-bottom: 16px;
}
.survey-modal-survey .survey-question-text {
  font-size: 18px;
  font-weight: 700;
}
.survey-modal-survey .survey-option-label {
  height: 32px;
  font-size: 14px;
}
.survey-modal-content #surveyModalComments .pd-comments-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
}
.survey-modal-content #surveyModalComments .pd-comment-form {
  margin-bottom: 18px;
}
.survey-modal-close {
  display: none;
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  font-size: 22px;
  color: #9ca3af;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}
.survey-modal-close:hover {
  color: #374151;
}
.survey-color-picker {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid #e2e8f0;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
}
.survey-color-picker::-webkit-color-swatch-wrapper {
  padding: 0;
}
.survey-color-picker::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}
.survey-color-picker::-moz-color-swatch {
  border: none;
  border-radius: 50%;
}
.survey-admin-modal-card {
  max-width: 640px;
  margin: 140px auto 40px;
  background: var(--card-bg);
  border-radius: 12px;
  padding: 24px;
  position: relative;
}
.survey-admin-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.survey-admin-modal-close {
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-secondary);
}
.survey-admin-modal-close:hover {
  color: var(--text);
}
.survey-admin-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.survey-admin-field {
  min-width: 0;
}
.survey-admin-label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
.survey-admin-date-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.survey-admin-title-input,
.survey-admin-date-row .brand-inline-input {
  width: 100%;
  box-sizing: border-box;
}
.survey-item-row {
  --survey-option-action-space: 24px;
  --survey-option-action-gap: 4px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
  position: relative;
}
.survey-item-main-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px var(--survey-option-action-space);
  gap: 8px;
  margin-bottom: 8px;
}
.survey-item-question-wrap,
.survey-item-type-wrap,
.survey-options-list,
.survey-options-wrap {
  min-width: 0;
}
.survey-delete-icon-btn {
  width: var(--survey-option-action-space);
  min-width: var(--survey-option-action-space);
  height: 24px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.survey-delete-icon-btn:hover {
  color: var(--danger);
  background: #f8fafc;
}
.survey-item-remove {
  align-self: end;
}
.survey-option-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--survey-option-action-space);
  gap: var(--survey-option-action-gap);
  align-items: center;
  margin-bottom: 4px;
}
.survey-option-input {
  width: 100%;
  box-sizing: border-box;
}
.survey-option-delete {
  align-self: center;
}
@media (max-width: 640px) {
  .survey-admin-date-row {
    grid-template-columns: 1fr;
  }
  .survey-item-main-row {
    grid-template-columns: minmax(0, 1fr) var(--survey-option-action-space);
    row-gap: 8px;
  }
  .survey-item-question-wrap {
    grid-column: 1 / -1;
  }
  .survey-item-type-wrap {
    grid-column: 1;
  }
  .survey-item-remove {
    grid-column: 2;
  }
}

.survey-status-active {
  background: color-mix(in srgb, var(--survey-active) 15%, white);
  color: var(--survey-active);
}
.survey-status-closed {
  background: var(--survey-closed);
  color: #fff;
}
.survey-voted-msg {
  font-size: 12px;
  color: #a78bfa;
  font-weight: 600;
  text-align: center;
  margin-top: 6px;
}

/* ============ Site Footer ============ */
.site-footer {
  margin-top: 0;
  border-top: 1px solid var(--border);
  padding: 0;
}
.site-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 20px 0;
  text-align: center;
}
.site-footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  color: #9ca3af;
  margin-bottom: 0;
}
.site-footer-links a {
  color: #9ca3af;
  text-decoration: none;
}
.site-footer-links a:hover {
  color: #6b7280;
}
.footer-sep {
  color: #d1d5db;
}
.site-footer-copy {
  font-size: 11px;
  color: #d1d5db;
  margin-top: 8px;
}

/* ============ DataTable Component ============ */
.dt-add-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.dt-add-input { font-size: 12px; }

/* ============ Brand Timeline ============ */
.bt-timeline {
  margin-top: 4px;
  padding: 8px 0;
}
.bt-stage {
  position: relative;
  margin: 0 auto;
  max-width: 100%;
}
.bt-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.bt-track {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bt-track-hidden {
  stroke: none;
  fill: none;
}
.bt-dot {
  fill: #facc15;
  stroke: #eab308;
  stroke-width: 2;
  transition: r 0.15s ease;
}
.bt-dot-last {
  fill: #f97316;
  stroke: #ea580c;
  stroke-width: 2;
}
.bt-node-first .bt-summary,
.bt-node-first .bt-year {
  color: #3b82f6;
}
.bt-node-last .bt-summary {
  color: #f97316;
  font-size: 12px;
  font-weight: 700;
}
.bt-node-last .bt-year {
  color: #f97316;
}
.bt-node {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
.bt-summary {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.3;
  padding: 0 8px;
}
.bt-stem {
  position: absolute;
  left: 50%;
  top: 16px;
  height: calc(var(--bt-track-offset) - 16px);
  border-left: 1px dashed #cbd5e1;
  border-image: repeating-linear-gradient(to bottom, #cbd5e1 0px, #cbd5e1 2px, transparent 2px, transparent 4px) 1;
  z-index: 0;
}
.bt-year {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--bt-track-offset) + var(--bt-year-offset));
  font-size: 10px;
  color: var(--text-secondary);
  text-align: center;
  white-space: nowrap;
}
.bt-dot-hit {
  position: absolute;
  transform: translate(-50%, -50%);
  border: none;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  z-index: 1;
}
.bt-dot-hit:hover,
.bt-dot-hit:focus-visible {
  box-shadow: none;
}
.bt-tooltip {
  position: absolute;
  display: none;
  background: #1e293b;
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
  max-width: 280px;
  z-index: 99999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  pointer-events: none;
}
.bt-tooltip-header {
  margin-bottom: 4px;
}
.bt-tooltip-year {
  font-size: 11px;
  color: #94a3b8;
}
.bt-tooltip-summary {
  font-weight: 700;
}
.bt-tooltip-content {
  color: #cbd5e1;
  font-size: 11px;
}
.bt-tooltip-publisher {
  display: none;
}

/* ============ Community Preview (Landing) ============ */
.community-preview-section {
  margin-top: 15px;
  margin-bottom: 15px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  padding: 16px;
}
.community-preview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.community-preview-like {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: #fff;
  background: rgba(0,0,0,0.4);
  border-radius: 12px;
  padding: 2px 8px;
  z-index: 1;
}
.community-preview-grid .community-card-no-image .community-preview-like {
  position: static;
  background: none;
  color: var(--text-secondary);
  padding: 0;
  margin-left: auto;
}
.community-preview-grid .community-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 105px;
}
.community-preview-grid .community-preview-festival {
  height: 105px;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
}
.community-preview-grid .community-preview-festival img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.community-preview-grid .community-card-no-image .community-card-meta {
  margin-bottom: 5px;
  line-height: 14px;
}
.community-preview-grid .community-card-no-image .community-card-date {
  font-size: 10px;
  color: #b0b8c4;
}
.community-preview-grid .community-card .community-card-body {
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-bottom: 4px;
}
.community-preview-grid .community-card-image {
  aspect-ratio: 16 / 5.6;
  flex-shrink: 1;
  min-height: 0;
}
.community-preview-grid .community-card-content {
  -webkit-line-clamp: 1;
}
.community-preview-grid .community-card-no-image .community-card-body {
  flex: 1;
  margin-top: 0;
  padding-top: 10px;
}
.community-preview-grid .community-card-no-image .community-card-content {
  -webkit-line-clamp: 3;
  line-height: 1.7;
}

.community-brand-card {
  border: 1px solid var(--border, #e5e7eb);
}
.community-brand-card .community-card-content strong {
  color: var(--primary);
}
.community-festival-card {
  border: 1px solid var(--border, #e5e7eb);
}
.community-festival-card-image-only {
  display: block;
  position: relative;
}
.community-festival-card-image-only .community-card-image {
  aspect-ratio: auto;
  overflow: visible;
  background: transparent;
}
.community-festival-card-image-only .community-card-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}
.community-festival-card-image-only {
  border: none;
  overflow: hidden;
  border-radius: 10px;
  position: relative;
}
.community-festival-bg-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}
.community-festival-img-content {
  position: absolute;
  top: 0;
  left: 0;
  padding: 3px 10px;
  z-index: 1;
}
.community-festival-card-image-only .community-card-image {
  aspect-ratio: unset;
  background: none;
}
.community-festival-card-image-only .community-card-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}
.community-festival-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  color: #fff;
}
.community-festival-badge-ongoing {
  background: #4ade80;
}
.community-festival-badge-upcoming {
  background: #60a5fa;
}
.community-festival-date {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.community-festival-location {
  font-size: 11px;
  color: var(--text-secondary);
}

/* 커뮤니티 페이지 버튼 노란색 */
.community-grid ~ .community-load-more-wrap .btn,
#createPostBtn,
.community-comment-popup .menu-comment-btn,
.community-comment-popup .btn-primary,
.community-create-overlay .btn-primary,
.community-card-comments .pd-comment-submit,
.community-comment-popup .pd-comment-submit {
  background: #facc15 !important;
  color: #1e293b !important;
  border-color: #facc15 !important;
}

.cs-writer-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  margin-bottom: 8px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(15, 118, 110, 0.08);
  color: #0f766e;
  font-size: 14px;
  font-weight: 700;
  box-sizing: border-box;
}

.cs-landing-writer-status,
.community-create-writer-status {
  width: 100%;
}

.cs-identity-setup-row {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  margin-bottom: 8px;
}

.cs-identity-trigger {
  cursor: pointer;
  background: #f8fafc;
  color: #64748b;
}

.cs-identity-setup-btn,
#communityIdentitySetupBtn {
  border: none;
  border-radius: 12px;
  min-height: 40px;
  padding: 0 14px;
  background: #0f766e;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.menu-comment-edit-btn,
.comment-edit-btn {
  display: none;
}

/* ============ 오늘의 치킨 커뮤니티 ============ */
@media (max-width: 768px) {
  .cs-identity-setup-row {
    flex-wrap: wrap;
  }
  .cs-identity-setup-row .menu-comment-input,
  .cs-identity-setup-row .community-create-input {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }
  .cs-identity-setup-btn,
  #communityIdentitySetupBtn {
    width: 100%;
  }
  .community-grid-page {
    padding-left: 12px;
    padding-right: 12px;
  }
  .community-page-header {
    position: relative;
  }
  .community-page-header .section-title {
    flex: 1;
    text-align: center;
  }
  .community-page-header {
    display: none !important;
  }
  .community-card-comments .pd-comment-form {
    display: none;
  }
  .community-grid-page ~ .site-footer,
  #mainContainer ~ .site-footer {
    display: none;
  }
}
.community-grid {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.community-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.community-card {
  background: var(--card-bg, #fff);
  border-radius: 10px;
  border: 1px solid var(--border, #e5e7eb);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: box-shadow 0.15s;
}
.community-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.community-card.community-card-no-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--no-img-bar, linear-gradient(to right, #facc15, #fde68a));
}
.community-card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f3f4f6;
}
.community-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.community-card-body {
  padding: 10px 12px 12px;
}
.community-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 12px;
}
.community-card-author {
  font-weight: 600;
  color: var(--text, #1e293b);
}
.community-card-date {
  color: var(--text-secondary, #6b7280);
}
.community-card-image-wrap {
  position: relative;
}
.community-card-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0,0,0,0.45);
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 1;
}
.community-card:hover .community-card-delete { opacity: 1; }
.community-card-delete:hover { background: rgba(239,68,68,0.8); }
.community-card-like {
  margin-left: auto;
}
.community-card-content {
  font-size: 13px;
  color: var(--text, #1e293b);
  line-height: 1.5;
  margin-bottom: 8px;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.community-card-comments {
  margin-top: 0;
}
.community-card-comments .pd-comment-form-row-inline-meta {
  align-items: center;
  flex-wrap: nowrap;
}
.community-card-comments .pd-comment-form-row-inline-meta .menu-comment-input {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}
.community-card-comments .pd-comment-form-row-inline-meta .pd-comment-submit {
  margin-left: auto;
}
.community-card-comments .pd-comment-form-row-content-only .pd-comment-textarea {
  width: 100%;
}

/* 글쓰기 팝업 */
.community-create-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.community-create-popup {
  background: #fff;
  border-radius: 14px;
  padding: 28px 24px;
  width: 380px;
  max-width: 90vw;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
}
.community-create-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 18px;
  text-align: center;
}
.community-create-image-wrap {
  margin-bottom: 14px;
}
.community-create-image-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 2px dashed #d1d5db;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background: #f9fafb;
  transition: border-color 0.15s;
}
.community-create-image-label:hover {
  border-color: #facc15;
}
.community-create-image-plus {
  font-size: 40px;
  color: #9ca3af;
  line-height: 1;
}
.community-create-image-preview {
  position: absolute;
  pointer-events: none;
  user-select: none;
}
.community-create-image-label.has-image {
  cursor: grab;
}
.community-create-image-label.has-image:active {
  cursor: grabbing;
}
.community-create-image-change {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  z-index: 2;
}
.community-create-image-change:hover {
  background: rgba(0,0,0,0.75);
}
.community-create-input {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 10px;
  box-sizing: border-box;
}
.community-create-textarea {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 14px;
  box-sizing: border-box;
  resize: vertical;
  font-family: inherit;
}
.community-create-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.community-create-actions .btn {
  padding: 9px 20px;
  font-size: 14px;
  border-radius: 8px;
}

/* 댓글 팝업 */
.community-comment-shell {
  position: relative;
  width: 500px;
  max-width: 90vw;
}
/* 모바일: 전체화면 페이지 */
.community-post-fullpage {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #fff;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.community-post-fullpage .community-comment-shell {
  max-width: 100%;
}
.community-post-fullpage .community-comment-popup {
  border-radius: 0;
  box-shadow: none;
  max-height: none;
  padding: 0 16px 24px;
}
.community-post-fullpage .community-popup-image {
  margin: 0 -16px 14px;
  border-radius: 0;
}
.community-fullpage-back {
  display: block;
  background: none;
  border: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--text, #1e293b);
  padding: 14px 16px;
  cursor: pointer;
}

.community-comment-popup {
  position: relative;
  background: #fff;
  border-radius: 14px;
  padding: 20px 24px 24px;
  width: 100%;
  max-width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
  box-sizing: border-box;
}
.community-comment-popup::-webkit-scrollbar {
  display: none;
}
.community-comment-popup.community-comment-popup-no-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(to right, #facc15, #fde68a);
  z-index: 1;
  pointer-events: none;
}
.community-popup-image {
  margin: -20px -24px 14px;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
}
.community-popup-image img {
  width: 100%;
  display: block;
}
.community-popup-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  margin-bottom: 6px;
}
.community-comment-popup .pd-comments-title {
  font-size: 13px;
  margin-bottom: 10px;
}
.community-comment-popup .pd-comment-form-row-inline-meta {
  align-items: center;
  flex-wrap: wrap;
}
.community-comment-popup .pd-comment-form-row-inline-meta .pd-comment-submit {
  margin-left: auto;
  width: auto;
  flex-shrink: 0;
}
.community-comment-popup .pd-comment-form-row-content-only .pd-comment-textarea {
  width: 100%;
}
.community-popup-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.community-popup-actions .community-popup-meta {
  margin-bottom: 0;
  flex: 1;
}
.community-popup-image-wrap {
  position: relative;
}
.community-popup-edit-zone {
  position: absolute;
  top: -39px;
  right: 0;
  width: 84px;
  height: 44px;
  z-index: 1;
}
.community-popup-edit-btn {
  position: absolute;
  top: -31px;
  right: 0;
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 2;
}
.community-popup-edit-zone:hover + .community-popup-edit-btn {
  opacity: 1;
  pointer-events: auto;
}
.community-popup-edit-btn:hover,
.community-popup-edit-btn:focus-visible {
  opacity: 1;
  pointer-events: auto;
}
@media (hover: none) {
  .community-popup-edit-btn {
    opacity: 1;
    pointer-events: auto;
  }
}
.community-edit-delete-btn { color: #ef4444 !important; border-color: #fca5a5 !important; }
.community-edit-delete-btn:hover { background: #fef2f2 !important; }
.community-popup-content {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 14px;
  word-break: break-word;
}
.community-popup-edit-area {
  margin-bottom: 14px;
}
.community-popup-edit-image-wrap {
  margin-bottom: 10px;
}
.community-popup-edit-image-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 2px dashed #d1d5db;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background: #f9fafb;
}
.community-popup-edit-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

#festivalTableWrap .dt-img-edit-btn { display: none; }
#festivalTableWrap td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#festivalTableWrap th { white-space: nowrap; }
#festivalTableWrap .festival-edit-btn { vertical-align: middle; }
#festivalTableWrap td:has(.festival-edit-btn),
#festivalTableWrap th:nth-child(3) {
  text-align: center;
  vertical-align: middle;
}

/* ============ PC/Mobile 분리 유틸리티 ============ */
.mobile-only { display: none !important; }
.mobile-only-flex { display: none !important; }
.mobile-only-grid { display: none !important; }
@media (max-width: 768px) {
  .mobile-hide { display: none !important; }
  .mobile-only { display: block !important; }
  .mobile-only-flex { display: flex !important; }
  .mobile-only-grid { display: grid !important; }

  /* 모바일: 랜딩 페이지 외 헤더 숨김 */
  body:not(.landing-page) .header { display: none !important; }
  body.brand-page .site-footer,
  .community-grid-page ~ .site-footer { display: none !important; }

  /* 브랜드 상세: 히어로, 목록 돌아가기 숨김 */
  .brand-page .back-btn { display: none !important; }
  .brand-page .brand-header { display: none !important; }

  /* 모바일 브랜드 상세 헤더 */
  .mobile-brand-detail-header {
    display: flex;
    align-items: center;
    padding: 12px 12px;
    border-bottom: none;
    background: #191919;
    position: sticky;
    top: 0;
    z-index: 200;
  }
  .mobile-brand-detail-back {
    display: flex;
    align-items: center;
    font-size: 22px;
    line-height: 1;
    color: #fff;
    text-decoration: none;
    stroke: #fff;
    padding: 0 4px;
    flex-shrink: 0;
  }
  .mobile-brand-detail-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    flex: 1;
    text-align: center;
    padding-right: 30px;
    text-decoration: none;
    line-height: 1;
  }

  /* 모바일 브랜드 정보: 패딩 축소 */
  .pd-brand-popup-hero {
    padding: 0;
  }
  #mobileBrandInfo .like-count {
    color: #000;
    text-shadow: none;
  }
  #mobileBrandInfo .mobile-brandinfo-menus-grid .like-count {
    color: #fff;
  }

  /* 모바일 브랜드 정보: 이벤트·신메뉴 카드 */
  .mobile-brand-promo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 70px;
    gap: 10px;
    margin: 0;
  }
  .mobile-brand-promo-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: var(--card-bg, #fff);
  }
  .mobile-brand-promo-card .mobile-brand-promo-card-img {
    flex: 1;
    min-height: 0;
    aspect-ratio: auto;
  }
  .mobile-brand-promo-card:not(.mobile-brand-promo-card-menu) .mobile-brand-promo-card-img {
    display: none;
  }
  .mobile-brand-promo-card-menu {
    position: relative;
  }
  .mobile-brand-promo-card-menu .mobile-brand-promo-card-img img {
    transform: scale(1.4);
  }
  .mobile-brand-promo-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 8px 8px;
    background: linear-gradient(transparent, rgba(0,0,0,0.6));
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
  }
  .mobile-brand-promo-card-img {
    overflow: hidden;
  }
  .mobile-brand-promo-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .mobile-brand-promo-card-body {
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .mobile-brand-promo-card-badge {
    font-size: 10px;
    font-weight: 700;
    align-self: flex-start;
    padding: 1px 6px;
    border-radius: 4px;
  }
  .mobile-brand-promo-card-badge.pd-brand-promo-badge-event {
    background: #dbeafe;
    color: #1d4ed8;
  }
  .mobile-brand-promo-card-badge.pd-brand-promo-badge-new {
    background: #facc15;
    color: #713f12;
  }
  .mobile-brand-promo-card-price {
    font-size: 11px;
    font-weight: 700;
    color: var(--text, #1e293b);
  }
  .mobile-brand-promo-card-title {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 모바일 제품 상세: 같은 브랜드 다른 메뉴 */
  .mobile-pd-box.mobile-pd-other-menus {
    padding-top: 12px;
    padding-bottom: 12px;
    border-top: 1px solid var(--border, #e2e8f0);
    margin-top: 6px;
  }
  .mobile-pd-other-menus-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    grid-auto-rows: 1fr;
    padding: 0 12px;
  }
  .mobile-pd-other-menus .menu-card {
    cursor: pointer;
    height: 100%;
  }

  /* 모바일 브랜드 정보: 하단 메뉴 그리드 */
  .mobile-brandinfo-menus {
    border-top: 1px solid var(--border, #e2e8f0);
  }
  .mobile-brandinfo-menus-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    grid-auto-rows: 1fr;
    padding-top: 12px;
  }
  .mobile-brandinfo-menus-grid .menu-card {
    cursor: pointer;
    height: 100%;
  }
  .mobile-brandinfo-menus-grid .like-count {
    color: #fff;
    text-shadow: none;
  }
  .mobile-pd-other-menus .menu-card,
  .mobile-brandinfo-menus-grid .menu-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
  .mobile-pd-other-menus .menu-card-image-wrap,
  .mobile-brandinfo-menus-grid .menu-card-image-wrap {
    height: 112px;
    flex: 0 0 112px;
  }
  .mobile-pd-other-menus .menu-card.no-image::before,
  .mobile-brandinfo-menus-grid .menu-card.no-image::before {
    content: '';
    display: block;
    height: 112px;
    flex: 0 0 112px;
    background: linear-gradient(180deg, #eef2f7 0%, #f8fafc 100%);
    border-radius: 14px 14px 0 0;
  }
  .mobile-pd-other-menus .menu-card-summary,
  .mobile-brandinfo-menus-grid .menu-card-summary {
    flex: 1;
    height: 108px;
    justify-content: flex-start;
    min-width: 0;
    padding: 8px;
    gap: 2px;
    overflow: hidden;
  }
  .mobile-pd-other-menus .menu-card-heading,
  .mobile-brandinfo-menus-grid .menu-card-heading {
    height: 38px;
    overflow: hidden;
  }
  .mobile-pd-other-menus .menu-category-row,
  .mobile-brandinfo-menus-grid .menu-category-row {
    min-height: 18px;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .mobile-pd-other-menus .menu-name,
  .mobile-brandinfo-menus-grid .menu-name {
    line-height: 1.25;
  }
  .mobile-pd-other-menus .menu-name-row,
  .mobile-brandinfo-menus-grid .menu-name-row {
    min-width: 0;
  }
  .mobile-pd-other-menus .menu-card-meta-inline,
  .mobile-brandinfo-menus-grid .menu-card-meta-inline {
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }
  .mobile-pd-other-menus .menu-card-date,
  .mobile-brandinfo-menus-grid .menu-card-date {
    flex-shrink: 0;
  }
  .mobile-pd-other-menus .menu-card-source,
  .mobile-pd-other-menus .menu-card-source-link,
  .mobile-brandinfo-menus-grid .menu-card-source,
  .mobile-brandinfo-menus-grid .menu-card-source-link {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mobile-pd-other-menus .menu-price-sparkline,
  .mobile-brandinfo-menus-grid .menu-price-sparkline {
    width: 100%;
    height: 30px;
  }
  .mobile-pd-other-menus .menu-price-sparkline svg,
  .mobile-brandinfo-menus-grid .menu-price-sparkline svg {
    width: 100%;
    height: 30px;
  }
  .mobile-pd-other-menus .menu-card-brand,
  .mobile-brandinfo-menus-grid .menu-card-brand {
    display: none;
  }
  .mobile-pd-other-menus .product-comment-container,
  .mobile-brandinfo-menus-grid .product-comment-container {
    min-height: 0;
    margin-top: 0;
    overflow: hidden;
  }
  .mobile-pd-other-menus .menu-comment-readonly-title,
  .mobile-brandinfo-menus-grid .menu-comment-readonly-title {
    display: none;
  }
  .mobile-pd-other-menus .menu-comment-readonly-list,
  .mobile-brandinfo-menus-grid .menu-comment-readonly-list {
    display: none;
  }

  /* 모바일 커뮤니티 리스트형 레이아웃 */
  .community-grid-mobile-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    align-items: stretch !important;
  }
  .community-list-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border, #e5e7eb);
    cursor: pointer;
  }
  .community-list-item:last-child {
    border-bottom: none;
  }
  .community-list-item:active {
    background: #f9fafb;
  }
  .community-list-thumb {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    background: #f3f4f6;
  }
  .community-list-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .community-list-thumb-empty {
    background: linear-gradient(135deg, #fef9e7 0%, #fde68a 100%);
  }
  .community-list-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
  }
  .community-list-content {
    font-size: 14px;
    color: var(--text, #1e293b);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
  }
  .community-list-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
    width: 100%;
    flex-shrink: 0;
  }
  .community-list-author {
    font-weight: 600;
    color: var(--text, #1e293b);
    flex-shrink: 0;
  }
  .community-list-date {
    flex-shrink: 0;
  }
  .community-list-comment-count {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-secondary, #6b7280);
  }
  .community-list-like {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
    flex-shrink: 0;
    color: var(--text-secondary, #6b7280);
  }
  .community-list-like svg {
    vertical-align: -1px;
  }

  /* 다른 오늘의 치킨 리스트 */
  .mobile-detail-other-posts {
    margin-top: 24px;
    padding: 0 12px;
  }
  .mobile-detail-other-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text, #1e293b);
    margin: 0 0 12px;
  }

  /* 모바일 상세 페이지 (팝업 대신 인라인 표시) */
  .mobile-detail-page {
    padding: 0;
    background: var(--bg, #f7f8ff);
  }
  .mobile-pd-box {
    background: var(--card-bg, #fff);
    margin-left: -12px;
    margin-right: -12px;
    margin-bottom: 6px;
    padding: 0;
    border-top: 1px solid var(--border, #e2e8f0);
    border-bottom: 1px solid var(--border, #e2e8f0);
    overflow: hidden;
    box-sizing: border-box;
    max-width: none;
  }
  .mobile-pd-box:first-child {
    border-top: none;
  }
  #pdPromotionsBox {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .mobile-pd-box:last-child {
    margin-bottom: 0;
  }
  .mobile-detail-title {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 17px;
    font-weight: 700;
    color: var(--text, #1e293b);
    padding: 10px 16px 12px;
    text-align: center;
  }
  .mobile-detail-title span {
    flex: 1;
    text-align: center;
  }
  .mobile-detail-title-text {
    flex: 1;
    text-align: center;
  }
  .mobile-detail-title-back {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    color: var(--text, #1e293b);
    text-decoration: none;
  }
  .mobile-detail-back {
    display: none;
  }
  .mobile-detail-page .community-comment-shell {
    max-width: 100%;
  }
  .mobile-detail-page .community-comment-popup {
    border-radius: 0;
    box-shadow: none;
    max-height: none;
    width: 100%;
    padding: 0 16px 24px;
  }
  .mobile-detail-page .community-popup-image {
    margin: 0 -16px 14px;
    border-radius: 0;
  }
  .mobile-detail-page .community-popup-image img {
    width: 100%;
    display: block;
  }
  .brand-page {
    --mobile-brand-detail-side-padding: 12px;
  }
  .mobile-detail-page .product-detail-content {
    padding: 0;
  }
  .mobile-detail-page .pd-image-wrap {
    margin: 0 calc(var(--mobile-brand-detail-side-padding) * -1) 0;
    width: calc(100% + (var(--mobile-brand-detail-side-padding) * 2));
    border-radius: 0 !important;
  }
  .mobile-detail-page .pd-header {
    padding-top: 10px !important;
    grid-template-areas:
      'main actions'
      'desc desc'
      'price price' !important;
    row-gap: 0 !important;
  }
  .mobile-detail-page .pd-description {
    grid-area: desc;
    margin-bottom: 10px;
  }
  .mobile-detail-page .pd-image {
    width: 100%;
    display: block;
    border-radius: 0 !important;
  }
  .mobile-detail-page .pd-header,
  .mobile-detail-page .pd-comparison-inner,
  .mobile-detail-page .pd-bar-chart-inner,
  .mobile-detail-page .pd-chart-wrap,
  .mobile-detail-page .pd-history,
  .mobile-detail-page .pd-promotions {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .mobile-detail-page .pd-comments {
    margin-top: 0 !important;
    border-top: none !important;
    padding-top: 0 !important;
  }
  .mobile-detail-page .survey-modal-survey .survey-card {
    box-shadow: none;
    border-radius: 0;
    border: none;
    background: transparent;
  }
  .mobile-detail-page .survey-modal-survey {
    margin-bottom: 0;
  }

  /* 모바일 설문 상세 헤더 */
  .mobile-survey-detail-header {
    border-bottom: none;
    background: #191919;
    position: sticky;
    top: 0;
    z-index: 200;
    margin-top: 0;
  }
  .mobile-survey-detail-header {
    display: flex;
    align-items: center;
    padding: 12px 12px;
  }
  .mobile-survey-detail-back {
    font-size: 22px;
    line-height: 1;
    color: #fff;
    text-decoration: none;
    stroke: #fff;
    padding: 0 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    position: static;
    transform: none;
    vertical-align: middle;
  }
  .mobile-survey-detail-title {
    flex: 1;
    font-size: 15px;
    line-height: 1;
    text-align: center;
    padding-right: 30px;
    color: #fff;
  }

  /* 모바일 설문 상세 댓글 들여쓰기 + 축소 */
  .mobile-survey-detail-comments {
    padding: 0 14px;
  }
  .mobile-survey-detail-comments .pd-comments-title {
    padding-left: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
  }

  /* 모바일 설문 상세: 다른 설문 목록 */
  /* 설문 상세: 프로모션 카드 */
  /* 설문 상세 박스 레이아웃 */
  .mobile-survey-detail-page {
    background: var(--bg, #f7f8ff);
    padding-left: 0;
    padding-right: 0;
  }
  .mobile-survey-box {
    background: var(--card-bg, #fff);
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--border, #e2e8f0);
    overflow: hidden;
    width: 100%;
    margin-bottom: 12px;
  }
  .mobile-survey-promos {
    padding: 12px;
    margin-top: 0;
    border-top: 1px solid var(--border, #e2e8f0);
    border-bottom: 1px solid var(--border, #e2e8f0);
  }
  .survey-promo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 10px;
  }
  .survey-promo-card {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    border: 1px solid var(--border, #e2e8f0);
    overflow: hidden;
    background: var(--card-bg, #fff);
  }
  .survey-promo-card-img {
    height: 100px;
    overflow: hidden;
  }
  .survey-promo-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.3);
  }
  .survey-promo-card-body {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .survey-promo-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    align-self: flex-start;
  }
  .survey-promo-badge-event {
    background: #dbeafe;
    color: #1d4ed8;
  }
  .survey-promo-badge-new {
    background: #fef3c7;
    color: #b45309;
  }
  .survey-promo-card-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .survey-promo-card-price {
    font-size: 14px;
    font-weight: 800;
    color: #ff7800;
    white-space: nowrap;
  }

  .mobile-survey-other-section {
    padding: 12px;
    border-top: 1px solid var(--border, #e2e8f0);
    border-bottom: 1px solid var(--border, #e2e8f0);
    border-radius: 0;
    background: var(--card-bg, #fff);
    margin-top: 0;
  }
  .mobile-survey-other-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 12px;
  }
  .mobile-survey-other-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .mobile-survey-other-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    background: var(--card-bg, #fff);
    text-decoration: none;
    color: inherit;
  }
  .mobile-survey-other-cover {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
  }
  .mobile-survey-other-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .mobile-survey-other-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .mobile-survey-other-info .survey-status-badge {
    align-self: flex-start;
  }
  .mobile-survey-other-question {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* 모바일 하단 고정 댓글 입력바 */
  .mobile-comment-fixed-bar {
    position: fixed;
    bottom: env(safe-area-inset-bottom, 0px);
    left: 0;
    right: 0;
    width: 100%;
    z-index: 340;
    background: #fff;
    border-top: 1px solid var(--border, #e2e8f0);
    padding: 8px 0;
    box-sizing: border-box;
  }
  .mobile-comment-spacer {
    height: 52px;
  }
  .mobile-comment-fixed-inner {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 0 8px;
  }
  .mobile-comment-fixed-input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 20px;
    padding: 8px 14px;
    font-size: 14px;
    line-height: 1.4;
    resize: none;
    outline: none;
    min-height: 36px;
    max-height: 100px;
    background: #f9fafb;
    font-family: inherit;
  }
  .mobile-comment-fixed-input:focus {
    border-color: #facc15;
    background: #fff;
  }
  .mobile-comment-fixed-submit {
    flex-shrink: 0;
    background: #facc15;
    color: #1a1a1a;
    border: none;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    height: 36px;
  }
  .mobile-comment-fixed-submit:disabled {
    opacity: 0.5;
  }

  /* 상세페이지 하단 여백 */
  .mobile-detail-page {
    padding-bottom: 0;
  }

  /* 랜딩 막대그래프 하단 고정 댓글 입력바 */
  .landing-comment-fixed-bar {
    position: fixed;
    bottom: calc(68px + env(safe-area-inset-bottom));
    left: 0;
    right: 0;
    z-index: 340;
    background: #fff;
    border-top: 1px solid var(--border, #e2e8f0);
    padding: 8px 0 16px;
  }
  .landing-comment-fixed-inner {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 0 12px;
  }
  .landing-comment-fixed-input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 20px;
    padding: 8px 14px;
    font-size: 14px;
    line-height: 1.4;
    resize: none;
    outline: none;
    min-height: 36px;
    box-sizing: border-box;
    max-height: 100px;
    background: #f9fafb;
    font-family: inherit;
  }
  .landing-comment-fixed-input:focus {
    border-color: #facc15;
    background: #fff;
  }
  .landing-comment-fixed-submit {
    flex-shrink: 0;
    background: #facc15;
    color: #1a1a1a;
    border: none;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    height: 36px;
  }
  .landing-comment-fixed-submit:disabled {
    opacity: 0.5;
  }

  /* 브랜드 상세 카드 읽기전용 댓글 */
  .menu-comment-readonly-list {
    padding: 0;
  }
  .menu-comment-item-readonly {
    padding: 2px 0;
    border-bottom: none;
  }
  .menu-comment-item-readonly .menu-comment-item-head {
    gap: 4px;
  }
  .menu-comment-item-readonly .menu-comment-item-body {
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .menu-comment-reactions-inline {
    font-size: 11px;
    color: var(--text-tertiary, #9ca3af);
    margin-left: auto;
  }
}

/* 비회원 가입 유도 팝업 (미디어쿼리 밖 — PC에서도 사용 가능) */
.signup-prompt-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.signup-prompt-box {
  background: #fff;
  border-radius: 14px;
  padding: 28px 24px 20px;
  width: 280px;
  text-align: center;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}
.signup-prompt-msg {
  font-size: 16px;
  font-weight: 600;
  color: var(--text, #1e293b);
  margin-bottom: 20px;
}
.signup-prompt-actions {
  display: flex;
  gap: 10px;
}
.signup-prompt-btn {
  flex: 1;
  padding: 10px 0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
}
.signup-prompt-cancel {
  background: #f3f4f6;
  color: var(--text-secondary, #6b7280);
}
.signup-prompt-go {
  background: #facc15;
  color: #1a1a1a;
}