.site-header { position: sticky; top: 0; z-index: 40; margin-bottom: 0; }
.category-overview .cats, #category-panel .cats {
  display: grid; grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 18px 8px; overflow: visible; padding: 20px 0 22px; max-width: 760px; margin: 0 auto;
}
.cats .cat { width: auto; min-width: 0; gap: 8px; }
.cats .cat .ring { width: 64px; height: 64px; border-color: #e2eae5; }
.cats .cat .ring.all { background: var(--resale-action); font: 700 14px/1 Arial,sans-serif; letter-spacing: .06em; }
.cats .cat.active .ring { border-color: var(--resale-action); box-shadow: 0 0 0 2px var(--resale-action); }
.cats .cat.active .lbl { color: var(--resale-action); }
.top-link.category-toggle { display: flex; min-width: 48px; color: var(--resale-action); }
.category-toggle[hidden] { display: none; }
#category-panel {
  position: fixed; top: var(--search-header-height,64px); left: 0; right: 0; z-index: 39;
  padding: 0 16px; background: white; border-radius: 0 0 20px 20px; box-shadow: 0 12px 24px #173d2520;
  max-height: calc(100dvh - var(--search-header-height,64px) - 90px); overflow: auto;
}
.category-backdrop { position: fixed; inset: var(--search-header-height,64px) 0 0; z-index: 38; background: #102d2040; }
#category-panel[hidden], .category-backdrop[hidden] { display: none; }
.board-write { background: var(--resale-action); }
@media (max-width: 767px) {
  .product-form-editing .bottom-tab-bar { display: none; }
  /* Prevent iPhone focus zoom from enlarging and clipping the form. */
  .product-form-page #write-form input,
  .product-form-page #edit-form input,
  .product-form-page #write-form select,
  .product-form-page #edit-form select,
  .product-form-page #write-form textarea,
  .product-form-page #edit-form textarea,
  .product-form-page [contenteditable="true"] { font-size: 16px; }
  .cats .cat .ring { width: 52px; height: 52px; }
  .cats .cat .lbl { font-size: 12px; white-space: nowrap; }
  .site-header .brand { display: none; }
  .site-header .top { gap: 6px; }
  .site-header .top-links { flex-shrink: 0; gap: 4px; }
  .site-header .searchbar { min-width: 0; }
  .bottom-tab-bar { height: auto; min-height: 76px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom,0px)); background: #fff; border-top: 1px solid #e5ece7; }
  .bottom-tab-bar a { gap: 4px; color: #52675c; min-height: 58px; font-weight: 700; }
  .bottom-tab-bar .tab-icon { display: grid; place-items: center; width: 50px; height: 32px; border-radius: 16px; }
  .bottom-tab-bar svg { width: 25px; height: 25px; stroke-width: 2.6; }
  .bottom-tab-bar a.active { color: var(--resale-action); font-weight: 700; }
  .bottom-tab-bar a.active .tab-icon { background: var(--resale-surface-brand); }
  .site-footer { padding-bottom: 100px; }
}
@media (max-width: 380px) {
  .category-overview .cats, #category-panel .cats { gap: 16px 6px; padding-top: 16px; }
  .cats .cat .ring { width: 48px; height: 48px; }
}

/* Sidebar icons share the bottom navigation palette and stroke weight. */
.sp-quick-grid .sp-quick-icon, .sp-profile .sp-avatar { background:var(--resale-surface-brand); color:var(--resale-action); display:grid; place-items:center; }
.sp-quick-icon svg { width:24px; height:24px; }
.sp-avatar svg { width:30px; height:30px; }
.sp-menu-icon svg { width:24px; height:24px; color:var(--resale-action); }
.sp-admin-label { display:inline-flex; align-items:center; gap:8px; }
.sp-admin-label svg { width:20px; height:20px; color:var(--resale-action); }
.mypage-user .mypage-logout { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 20px; margin-top:12px; border:1px solid var(--resale-action); border-radius:8px; color:var(--resale-action); background:var(--resale-surface-brand); font-size:14px; font-weight:700; text-decoration:none; }
/* Home campaigns replace the default category grid; the grid appears on demand. */
.category-overview[hidden] { display:none; }
.home-campaign { position:relative; margin-top:8px; margin-bottom:12px; }
.campaign-stage { position:relative; overflow:hidden; border-radius:10px; }
.campaign-slide { position:relative; display:block; aspect-ratio:3 / 1; color:#263b31; overflow:hidden; }
.campaign-slide[hidden] { display:none; }
.campaign-slide>img { display:block; width:100%; height:100%; object-fit:cover; }
.campaign-copy { position:absolute; inset:0 4% 0 46%; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:8px; }
.campaign-copy small { font-size:14px; color:#6f6456; }
.campaign-copy strong { font-size:clamp(19px,2.9vw,34px); line-height:1.3; letter-spacing:-.8px; font-weight:750; }
.campaign-copy span { font-size:13px; }
.campaign-copy b { font-size:12px; border-bottom:1px solid #405a49; padding-bottom:3px; }
.campaign-controls { position:absolute; bottom:6px; right:10px; display:flex; gap:4px; }
.campaign-controls button { min-width:28px; min-height:32px; border:0; background:#ffffffb8; border-radius:16px; font-size:11px; color:#52675c; cursor:pointer; }
.campaign-controls button[aria-pressed=true] { background:var(--resale-action); color:white; }
#category-panel.campaign-categories { position:absolute; top:0; left:0; right:0; max-height:none; border-radius:10px; box-shadow:0 4px 16px #163e2520; z-index:39; }
#category-panel.campaign-categories .cats { gap:10px 8px; padding:12px 0; border:0; }
.sp-primary-nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:8px 12px; gap:6px; border-bottom:1px solid #e5ece7; }
.sp-primary-nav a,.sp-primary-nav button { display:grid; place-items:center; min-height:40px; border:0; border-radius:8px; background:var(--resale-surface-brand); color:var(--resale-action); font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; }
@media(max-width:767px) {
  .home-campaign { margin-top:0; }
  .campaign-slide { aspect-ratio:2.15 / 1; }
  .campaign-slide>img { object-position:25% center; }
  .campaign-copy { left:44%; right:3%; gap:5px; padding:6px 0; }
  .campaign-copy small { font-size:11px; }
  .campaign-copy strong { font-size:18px; letter-spacing:-.6px; }
  .campaign-copy span { display:none; }
  .campaign-copy b { font-size:10px; }
  .campaign-controls { bottom:3px; right:5px; }
  .campaign-controls button { min-height:26px; min-width:26px; }
  .site-footer { padding-bottom:24px; }
}