/* components.css — REBEAUTY renewal rb-* component system (loads AFTER style.css so refinements win).
   CONTRACT: style by .rb-* classes; JS binds only to [data-*]. Tall 2:3 cards, emoji-H2 sections,
   white canvas, purple #5E10A1 accent. Reuses style.css HSL tokens via hsl(var(--primary)) etc. */
:root{
  --rb-ink:#1a1a1a; --rb-ink-2:#6b6b70; --rb-line:#ececec; --rb-bg-soft:#f7f7f8;
  --rb-purple:#5e10a1; --rb-purple-soft:#f4ecfb;
}

/* ---------- section ---------- */
.rb-section{ padding-block:var(--section-pad-block); }
.rb-section + .rb-section{ padding-top:0; }
.rb-section__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-5); flex-wrap:wrap; }
.rb-section__title{ display:flex; align-items:center; gap:var(--space-2); font-size:var(--fs-h2); font-weight:800; line-height:var(--lh-tight); color:var(--rb-ink); margin:0; letter-spacing:-.01em; }
.rb-section__emoji{ font-size:1.15em; }
.rb-section__tip{ font-size:var(--fs-meta); font-weight:700; color:var(--rb-purple); background:var(--rb-purple-soft); padding:var(--space-1) var(--space-2); border-radius:999px; }
.rb-section__sub{ font-size:var(--fs-meta); color:var(--rb-ink-2); margin:var(--space-1) 0 0; font-weight:500; }
.rb-section__more{ font-size:var(--fs-meta); font-weight:700; color:var(--rb-ink-2); white-space:nowrap; display:inline-flex; align-items:center; gap:.15em; transition:color var(--dur) var(--ease); }
.rb-section__more:hover{ color:var(--rb-purple); }
.rb-section__more::after{ content:"›"; font-size:1.2em; line-height:1; }

/* ---------- chips ---------- */
.rb-chips{ display:flex; gap:var(--cluster-gap); flex-wrap:wrap; margin-bottom:var(--space-5); }
.rb-chips--scroll{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:var(--space-1); }
.rb-chips--scroll::-webkit-scrollbar{ display:none; }
.rb-chip{ font-size:var(--fs-meta); font-weight:600; color:#444; background:#fff; border:1px solid var(--rb-line); padding:var(--space-2) var(--space-4); border-radius:999px; white-space:nowrap; cursor:pointer; transition:all var(--dur) var(--ease); }
.rb-chip:hover{ border-color:#cbb6e6; color:var(--rb-purple); }
.rb-chip.is-active{ background:var(--rb-purple); border-color:var(--rb-purple); color:#fff; }
/* HOT 배지 — 인기 카테고리(성형외과) 강조. 메가메뉴·드로어·칩 공용 */
.rb-hot{ display:inline-block; margin-left:.3em; padding:.14em .42em; border-radius:999px;
  font-size:.58rem; font-weight:800; line-height:1; letter-spacing:.03em; color:#fff;
  background:linear-gradient(135deg,#ff512f,#dd2476); vertical-align:middle;
  animation:rb-hot-pulse 1.6s var(--ease) infinite; }
.rb-chip .rb-hot{ margin-left:.35em; font-size:.55rem; }
.rb-chip.is-active .rb-hot{ background:#fff; color:#dd2476; animation:none; }
@keyframes rb-hot-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.12); } }

/* ---------- 랜딩 스크롤 네비게이션 (우측 고정 도트, 홈 전용 — JS가 동적 생성) ---------- */
.rb-scrollnav{ position:fixed; right:16px; top:50%; transform:translateY(-50%); z-index:900;
  display:flex; flex-direction:column; gap:9px; padding:10px 7px; border-radius:999px;
  background:rgba(255,255,255,.82); backdrop-filter:blur(6px); border:1px solid var(--rb-line);
  box-shadow:0 2px 10px rgb(0 0 0/.08); }
.rb-scrollnav button{ position:relative; width:9px; height:9px; padding:0; border:0; border-radius:999px;
  background:#d9d2e8; cursor:pointer; transition:background var(--dur) var(--ease), height var(--dur) var(--ease); }
.rb-scrollnav button:hover{ background:#a985d6; }
.rb-scrollnav button.is-active{ background:var(--rb-purple); height:22px; }
.rb-scrollnav button::after{ content:attr(data-label); position:absolute; right:16px; top:50%;
  transform:translateY(-50%); white-space:nowrap; font-size:.7rem; font-weight:700; color:#fff;
  background:rgba(26,26,26,.88); padding:.25rem .55rem; border-radius:6px; opacity:0;
  pointer-events:none; transition:opacity var(--dur) var(--ease); }
.rb-scrollnav button:hover::after, .rb-scrollnav button:focus-visible::after{ opacity:1; }
/* 자동 스크롤 ⏸/▶ 버튼 — 도트와 구분되는 아이콘 버튼(구분선 위) */
.rb-scrollnav__pause.rb-scrollnav__pause{ width:22px; height:22px; margin:4px -6.5px 0; border-radius:999px;
  display:flex; align-items:center; justify-content:center; color:#fff; background:var(--rb-purple);
  border-top:0; box-shadow:0 1px 4px rgb(0 0 0/.18); }
.rb-scrollnav__pause.rb-scrollnav__pause:hover{ background:#7a1fc7; }
.rb-scrollnav__pause.rb-scrollnav__pause.is-active{ height:22px; }
@media(max-width:1024px){ .rb-scrollnav{ display:none; } }

/* ---------- grid + peek ---------- */
.rb-grid, .rb-grid--6, .rb-grid--5, .rb-grid--4, .rb-grid--3, .rb-grid--dual{ display:grid; gap:var(--grid-gap-tight); }
.rb-grid{ grid-template-columns:repeat(6,1fr); }
.rb-grid--6{ grid-template-columns:repeat(6,1fr); }
.rb-grid--5{ grid-template-columns:repeat(5,1fr); }
.rb-grid--4{ grid-template-columns:repeat(4,1fr); }
.rb-grid--3{ grid-template-columns:repeat(3,1fr); gap:var(--grid-gap); }
.rb-grid--dual{ grid-template-columns:repeat(3,1fr); gap:var(--grid-gap); }
@media(max-width:1180px){ .rb-grid,.rb-grid--6{ grid-template-columns:repeat(4,1fr); } .rb-grid--5{ grid-template-columns:repeat(4,1fr);} }
@media(max-width:1024px){ .rb-grid,.rb-grid--6{ grid-template-columns:repeat(3,1fr); } .rb-grid--4{ grid-template-columns:repeat(3,1fr);} .rb-grid--dual{ grid-template-columns:repeat(2,1fr);} }
@media(max-width:768px){ .rb-grid,.rb-grid--6,.rb-grid--5,.rb-grid--4{ grid-template-columns:repeat(2,1fr); } .rb-grid--3{ grid-template-columns:repeat(2,1fr);} }
@media(max-width:480px){ .rb-grid--dual,.rb-grid--3{ grid-template-columns:1fr; } }

/* mobile peek-carousel: each section row can become a swipe strip with the next card peeking */
.rb-peek{ display:grid; gap:var(--grid-gap-tight); grid-template-columns:repeat(6,1fr); }
@media(max-width:1180px){ .rb-peek{ grid-template-columns:repeat(4,1fr);} }
@media(max-width:1024px){ .rb-peek{ grid-template-columns:repeat(3,1fr);} }
@media(max-width:768px){
  .rb-peek{ display:flex; gap:var(--peek-gutter); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:var(--space-2); margin-inline:calc(var(--gutter)*-1); padding-inline:var(--gutter); }
  .rb-peek::-webkit-scrollbar{ display:none; }
  .rb-peek > *{ flex:0 0 calc(100%/2.3 - var(--peek-gutter)); scroll-snap-align:start; }
}
@media(max-width:480px){ .rb-peek > *{ flex:0 0 calc(100%/1.6 - var(--peek-gutter)); } }

/* ---------- card ---------- */
.rb-card{ display:block; background:#fff; border:1px solid var(--rb-line); border-radius:var(--card-radius); overflow:hidden; color:inherit; transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.rb-card:hover{ box-shadow:var(--card-shadow-hover); transform:translateY(-2px); }
.rb-card.is-reveal{ opacity:0; transform:translateY(var(--reveal-y)); }
.rb-card.is-revealed{ opacity:1; transform:none; transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.rb-card__media{ position:relative; aspect-ratio:var(--card-aspect); background:var(--rb-bg-soft); overflow:hidden; }
.rb-card__img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; transition:transform var(--dur-slow) var(--ease); }
.rb-card:hover .rb-card__img{ transform:scale(1.03); }
.rb-card__badge{ position:absolute; top:var(--space-2); left:var(--space-2); font-size:var(--fs-caption); font-weight:800; color:#fff; background:var(--rb-purple); padding:.15rem .5rem; border-radius:999px; letter-spacing:.02em; z-index:2; }
.rb-card__badge--new{ background:#0ea5e9; }
.rb-card__badge--free{ background:var(--rb-purple); }
.rb-card__badge--type{ position:absolute; top:var(--space-2); right:var(--space-2); font-size:var(--fs-caption); font-weight:700; color:#fff; background:rgba(20,20,24,.62); backdrop-filter:blur(4px); padding:.12rem .45rem; border-radius:6px; z-index:2; }
.rb-card__rank{ position:absolute; top:0; left:0; min-width:1.9rem; height:1.9rem; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:var(--fs-meta); color:#fff; background:var(--rb-purple); border-bottom-right-radius:var(--card-radius); z-index:2; }
.rb-card__rank--top{ background:#1a1a1a; }
.rb-card__heart{ position:absolute; bottom:var(--space-2); right:var(--space-2); width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:999px; background:rgba(255,255,255,.92); border:none; cursor:pointer; color:#888; box-shadow:0 1px 4px rgb(0 0 0/.12); z-index:3; transition:color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.rb-card__heart:hover{ transform:scale(1.1); }
.rb-card__heart.is-on{ color:#e0245e; }
.rb-card__heart svg{ width:16px; height:16px; }
.rb-card__body{ padding:var(--card-pad); }
.rb-card__cat{ font-size:var(--fs-caption); font-weight:700; color:var(--rb-purple); }
.rb-card__title{ font-size:var(--fs-card-title); font-weight:600; line-height:var(--lh-snug); color:var(--rb-ink); margin:var(--space-1) 0 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.rb-card__meta{ display:flex; align-items:center; gap:var(--space-2); margin-top:var(--space-2); font-size:var(--fs-meta); color:var(--rb-ink-2); flex-wrap:wrap; }
.rb-card__meta svg{ width:13px; height:13px; vertical-align:-2px; opacity:.7; }
.rb-card__meta-dot::before{ content:"·"; margin-right:var(--space-2); }
/* dual (PC + phone) media kept for kit cards */
.rb-card__media--dual{ display:grid; grid-template-columns:1fr 34%; gap:var(--space-1); aspect-ratio:auto; padding:var(--space-2); background:var(--rb-bg-soft); }
.rb-card__media--dual .rb-card__img{ aspect-ratio:4/3; border-radius:4px; }
.rb-card__media--dual .rb-card__phone{ aspect-ratio:9/19; object-fit:cover; object-position:top; border-radius:8px; border:2px solid #fff; box-shadow:0 2px 8px rgb(0 0 0/.12); width:100%; height:100%; }

/* ---------- stars / review ---------- */
.rb-stars{ display:inline-flex; gap:1px; color:#f5a623; font-size:var(--fs-meta); letter-spacing:.05em; }
.rb-stars--input{ font-size:1.4rem; cursor:pointer; color:#ddd; }
.rb-stars--input .is-on{ color:#f5a623; }
.rb-review{ display:flex; flex-direction:column; gap:var(--space-2); background:#fff; border:1px solid var(--rb-line); border-radius:var(--card-radius); padding:var(--space-4); }
.rb-review__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); }
.rb-review__user{ font-size:var(--fs-meta); font-weight:700; color:var(--rb-ink); }
.rb-review__verified{ font-size:var(--fs-caption); font-weight:700; color:#16a34a; background:#eafaf0; padding:.05rem .4rem; border-radius:4px; }
.rb-review__body{ font-size:var(--fs-body); color:#333; line-height:var(--lh-body); }
.rb-review__thumb{ width:56px; aspect-ratio:var(--card-aspect); object-fit:cover; border-radius:6px; flex:none; }

/* ---------- designer card ---------- */
.rb-dcard{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--space-2); background:#fff; border:1px solid var(--rb-line); border-radius:var(--card-radius); padding:var(--space-5) var(--space-4); color:inherit; transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.rb-dcard:hover{ box-shadow:var(--card-shadow-hover); transform:translateY(-2px); }
.rb-dcard__avatar{ width:64px; height:64px; border-radius:999px; object-fit:cover; background:var(--rb-purple-soft); display:flex; align-items:center; justify-content:center; color:var(--rb-purple); font-weight:800; font-size:1.5rem; }
.rb-dcard__name{ font-weight:800; color:var(--rb-ink); font-size:var(--fs-body); }
.rb-dcard__stat{ font-size:var(--fs-meta); color:var(--rb-ink-2); }
.rb-dcard__thumbs{ display:grid; grid-template-columns:repeat(3,1fr); gap:3px; width:100%; margin-top:var(--space-1); }
.rb-dcard__thumbs img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:4px; }

/* ---------- buttons ---------- */
.rb-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.4em; font-size:var(--fs-meta); font-weight:700; padding:var(--space-2) var(--space-4); border-radius:8px; border:1px solid transparent; cursor:pointer; transition:all var(--dur) var(--ease); text-align:center; }
.rb-btn--primary{ background:var(--rb-purple); color:#fff; }
.rb-btn--primary:hover{ background:#4a0d82; }
.rb-btn--outline{ background:#fff; border-color:var(--rb-line); color:#333; }
.rb-btn--outline:hover{ border-color:var(--rb-purple); color:var(--rb-purple); }
.rb-btn--cta{ background:var(--rb-purple); color:#fff; border-radius:999px; padding:var(--space-2) var(--space-5); }
.rb-btn--cta:hover{ background:#4a0d82; }
.rb-btn--block{ width:100%; }
.rb-btn.is-on{ background:#f4ecfb; color:var(--rb-purple); border-color:#d9c2f0; }

/* ---------- conversion band ---------- */
.rb-cta-band{ background:linear-gradient(135deg,#2a0a4a,#5e10a1); color:#fff; border-radius:16px; padding:var(--space-12) var(--space-8); text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--space-4); }
.rb-cta-band h2{ font-size:var(--fs-h1); font-weight:800; margin:0; color:#fff; }
.rb-cta-band p{ font-size:var(--fs-body); opacity:.85; margin:0; }
.rb-cta-band .rb-btn--cta{ background:#fff; color:var(--rb-purple); }

/* ---------- ticker ---------- */
.rb-ticker{ display:flex; gap:var(--space-5); flex-wrap:wrap; }
.rb-ticker__item{ font-size:var(--fs-meta); color:var(--rb-ink-2); }
.rb-ticker__num{ font-weight:800; color:var(--rb-ink); }

/* ---------- page head / empty ---------- */
.rb-page-head{ padding-block:var(--space-8) var(--space-5); }
.rb-page-head h1{ font-size:var(--fs-h1); font-weight:800; color:var(--rb-ink); margin:0; }
.rb-page-head p{ font-size:var(--fs-body); color:var(--rb-ink-2); margin:var(--space-2) 0 0; }
.rb-empty{ text-align:center; color:var(--rb-ink-2); padding:var(--space-16) var(--space-4); font-size:var(--fs-body); }
.rb-sentinel{ height:1px; }
.rb-loading{ text-align:center; color:var(--rb-ink-2); padding:var(--space-6); font-size:var(--fs-meta); }

/* ---------- GNB (global nav) ---------- */
.rb-gnb{ position:sticky; top:0; z-index:200; background:#fff; border-bottom:1px solid var(--rb-line); }
.rb-gnb.is-scrolled{ box-shadow:0 2px 12px rgb(0 0 0/.06); }
.rb-gnb__bar{ display:flex; align-items:center; gap:var(--space-5); height:var(--gnb-h); }
.rb-gnb__logo{ display:flex; align-items:center; gap:var(--space-2); font-weight:800; color:var(--rb-ink); white-space:nowrap; }
.rb-gnb__logo img{ width:28px; height:28px; }
.rb-gnb__logo-badge{ font-size:var(--fs-caption); font-weight:700; color:#fff; background:var(--rb-purple); padding:.05rem .35rem; border-radius:5px; }
.rb-gnb__nav{ display:flex; align-items:center; gap:var(--space-5); margin-left:var(--space-2); }
.rb-gnb__link{ font-size:var(--fs-body); font-weight:600; color:#333; position:relative; padding:var(--space-2) 0; white-space:nowrap; transition:color var(--dur) var(--ease); }
.rb-gnb__link:hover,.rb-gnb__link.is-active{ color:var(--rb-purple); }
.rb-gnb__link.is-active::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--rb-purple); }
.rb-gnb__tools{ display:flex; align-items:center; gap:var(--space-3); margin-left:auto; }
.rb-gnb__icon-btn{ width:36px; height:36px; display:flex; align-items:center; justify-content:center; border:none; background:none; color:#444; cursor:pointer; border-radius:8px; }
.rb-gnb__icon-btn:hover{ background:var(--rb-bg-soft); color:var(--rb-purple); }
.rb-gnb__icon-btn svg{ width:20px; height:20px; }
.rb-gnb__text-link{ font-size:var(--fs-meta); font-weight:600; color:#444; white-space:nowrap; }
.rb-gnb__text-link:hover{ color:var(--rb-purple); }
.rb-gnb__burger{ display:none; }
.rb-gnb__auth{ display:flex; align-items:center; gap:var(--space-3); }
/* mobile: collapse to logo + search + hamburger; auth/CTA live inside the drawer */
@media(max-width:1024px){ .rb-gnb__nav{ display:none; } .rb-gnb__burger{ display:flex; } .rb-gnb__auth{ display:none; } }

/* search panel (slides under GNB) */
.rb-search-panel{ display:none; border-top:1px solid var(--rb-line); background:#fff; padding:var(--space-4) 0; }
.rb-search-panel.is-open{ display:block; }
.rb-search-panel form{ display:flex; gap:var(--space-2); max-width:640px; margin:0 auto; }
.rb-search-panel input[type=search],.rb-search-panel input[name=q]{ flex:1; font-size:var(--fs-body); padding:var(--space-3) var(--space-4); border:1px solid var(--rb-line); border-radius:10px; background:var(--rb-bg-soft); }
.rb-search-panel input:focus{ outline:2px solid var(--rb-purple); background:#fff; }

/* ticker strip under GNB */
.rb-ticker-bar{ background:var(--rb-bg-soft); border-bottom:1px solid var(--rb-line); }
.rb-ticker-bar .rb-ticker{ padding-block:var(--space-2); }

/* mega-menu */
.rb-megamenu{ display:none; position:absolute; left:0; right:0; background:#fff; border-bottom:1px solid var(--rb-line); box-shadow:0 12px 24px rgb(0 0 0/.08); z-index:201; }
.rb-megamenu.is-open{ display:block; }
.rb-megamenu__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5); padding-block:var(--space-6); }
.rb-megamenu__col h4{ font-size:var(--fs-meta); font-weight:800; color:var(--rb-ink); margin:0 0 var(--space-2); }
.rb-megamenu__col a{ display:block; font-size:var(--fs-meta); color:#555; padding:var(--space-1) 0; }
.rb-megamenu__col a:hover{ color:var(--rb-purple); }

/* mobile drawer */
.rb-drawer{ position:fixed; inset:0; z-index:300; visibility:hidden; }
.rb-drawer.is-open{ visibility:visible; }
.rb-drawer__backdrop{ position:absolute; inset:0; background:rgba(17,17,20,.5); opacity:0; transition:opacity var(--dur) var(--ease); }
.rb-drawer.is-open .rb-drawer__backdrop{ opacity:1; }
.rb-drawer__panel{ position:absolute; top:0; left:0; bottom:0; width:min(88vw,360px); background:#fff; transform:translateX(-100%); transition:transform var(--dur) var(--ease); overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; display:flex; flex-direction:column; padding-bottom:max(var(--space-6), env(safe-area-inset-bottom)); box-shadow:0 0 40px rgb(0 0 0/.18); }
.rb-drawer.is-open .rb-drawer__panel{ transform:none; }
/* drawer header (sticky) */
.rb-drawer__head{ position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-4) var(--space-5); background:#fff; border-bottom:1px solid var(--rb-line); }
.rb-drawer__brand{ display:flex; align-items:center; gap:var(--space-2); font-weight:800; color:var(--rb-ink); white-space:nowrap; }
.rb-drawer__brand img{ width:26px; height:26px; }
.rb-drawer__close{ width:40px; height:40px; flex:none; display:flex; align-items:center; justify-content:center; background:none; border:none; color:#666; cursor:pointer; border-radius:10px; margin-right:calc(var(--space-2) * -1); }
.rb-drawer__close:hover{ background:var(--rb-bg-soft); color:var(--rb-ink); }
.rb-drawer__close svg{ width:22px; height:22px; }
/* auth block */
.rb-drawer__auth{ display:flex; gap:var(--space-2); padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--rb-line); }
.rb-drawer__btn{ flex:1; display:flex; align-items:center; justify-content:center; padding:var(--space-3); border-radius:10px; font-size:var(--fs-body); font-weight:700; border:1px solid var(--rb-line); color:#333; background:#fff; transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.rb-drawer__btn:hover{ border-color:var(--rb-purple); color:var(--rb-purple); }
.rb-drawer__btn--primary{ background:var(--rb-purple); border-color:var(--rb-purple); color:#fff; }
.rb-drawer__btn--primary:hover{ filter:brightness(1.08); color:#fff; }
/* sections */
.rb-drawer__section{ padding:var(--space-3) var(--space-4); }
.rb-drawer__section + .rb-drawer__section{ border-top:1px solid var(--rb-line); }
.rb-drawer__label{ margin:0 0 var(--space-1); padding:0 var(--space-2); font-size:var(--fs-caption); font-weight:700; letter-spacing:.04em; color:var(--rb-ink-2); }
.rb-drawer__nav{ display:flex; align-items:center; justify-content:space-between; font-size:var(--fs-body); font-weight:700; color:#222; padding:var(--space-3) var(--space-2); border-radius:8px; transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.rb-drawer__nav::after{ content:""; width:7px; height:7px; border-right:2px solid #cfcfd6; border-bottom:2px solid #cfcfd6; transform:rotate(-45deg); margin-right:.2rem; }
.rb-drawer__nav:hover{ background:var(--rb-bg-soft); color:var(--rb-purple); }
.rb-drawer__nav.is-active{ color:var(--rb-purple); background:#f3edf9; }
.rb-drawer__nav.is-active::after{ border-color:var(--rb-purple); }
.rb-drawer__group{ display:flex; align-items:center; gap:.4rem; margin-top:var(--space-2); padding:var(--space-2); font-size:var(--fs-caption); font-weight:700; color:var(--rb-ink-2); }
.rb-drawer__group svg{ flex:0 0 auto; }
.rb-drawer__cat{ display:flex; align-items:center; gap:.5rem; font-size:var(--fs-meta); font-weight:500; color:#555; padding:var(--space-2); border-radius:8px; transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.rb-drawer__cat:hover{ background:var(--rb-bg-soft); color:var(--rb-purple); }
.rb-drawer__cat svg{ flex:0 0 auto; color:#9aa0a6; }
.rb-drawer__cat:hover svg{ color:var(--rb-purple); }

/* 카테고리 SVG 아이콘 정렬 (메가메뉴) */
.rb-megamenu__col h4{ display:flex; align-items:center; gap:.4rem; }
.rb-megamenu__col a{ display:flex; align-items:center; gap:.4rem; }
.rb-megamenu__col h4 svg{ flex:0 0 auto; color:var(--rb-purple); }
.rb-megamenu__col a svg{ flex:0 0 auto; color:#9aa0a6; }
.rb-megamenu__col a:hover svg{ color:var(--rb-purple); }

/* announcement bar tone (existing class kept) */
.rb-feed-strip .rb-card__media{ aspect-ratio:var(--card-aspect); }

/* ---------- gallery view toggle (세로뷰/가로뷰) ---------- */
.rb-view-toggle{ display:inline-flex; border:1px solid var(--rb-line); border-radius:8px; overflow:hidden; flex:none; }
.rb-view-toggle button{ display:inline-flex; align-items:center; gap:.3em; padding:var(--space-2) var(--space-3); background:#fff; border:none; cursor:pointer; font-size:var(--fs-meta); font-weight:600; color:#666; transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.rb-view-toggle button + button{ border-left:1px solid var(--rb-line); }
.rb-view-toggle button:hover{ color:var(--rb-purple); }
.rb-view-toggle button.is-active{ background:var(--rb-purple); color:#fff; }
.rb-view-toggle svg{ width:15px; height:15px; }
/* 템플릿 카드 기본 = PC(가로) 캡쳐. 디자인/레퍼런스 카드는 PC 캡쳐를 4:3 박스에 담아
   갤러리 토글이 없는 그리드(관련/즐겨찾기/검색 등)에서도 잘림 없이 PC 화면을 기본 노출한다. */
.rb-card--design .rb-card__media{ aspect-ratio:4/3; }
.rb-card--design .rb-card__img{ object-position:center; }
/* landscape(PC) view = 기본: wider cards, fewer columns. Attribute selector (0,2,0) beats
   the .rb-grid--N class rules (0,1,0), so it overrides columns at every breakpoint. */
[data-gallery-grid][data-view="landscape"]{ grid-template-columns:repeat(3,1fr); }
/* portrait(모바일) view = 사용자가 토글했을 때만 세로 2:3 카드로 복원 (열 수는 .rb-grid--N 기본) */
[data-gallery-grid][data-view="portrait"] .rb-card--design .rb-card__media{ aspect-ratio:var(--card-aspect); }
[data-gallery-grid][data-view="portrait"] .rb-card--design .rb-card__img{ object-position:top; }
/* ── 카드 호버 미리보기(hdweb 스타일) ──
   전체페이지 롱 스크린샷 1장을 4:3 창에 담아, hover 시 object-position top→bottom 으로
   페이지 전체를 스크롤하듯 미리보기. 갤러리 세로/가로 토글과 무관하게 항상 4:3(포트레이트
   토글 규칙 (0,4,0)을 이기도록 [data-view="portrait"] 스코프도 함께 명시). @media(hover:hover)
   로 터치기기 제외, reduced-motion 시 스크롤 정지. */
/* ⚠️ 특이도 격상(.rb-card. 접두): .rb-card--design 계열 규칙과 동점-순서 의존이던 것을
   구조적으로 이기게 함(향후 규칙 추가/재배열에도 hoverpreview 가 안 뒤집힘 — 적대감사 warn 조치)
   가로뷰=PC 풀캡처 4:3 창, 세로(모바일)뷰=모바일 풀캡처 세로 카드(--card-aspect 2:3) — 둘 다 롤링 */
.rb-card.rb-card--hoverpreview .rb-card__media{ aspect-ratio:4/3; }
[data-gallery-grid][data-view="portrait"] .rb-card.rb-card--hoverpreview .rb-card__media{ aspect-ratio:var(--card-aspect); }
.rb-card.rb-card--hoverpreview .rb-card__img--full{
  object-fit:cover; object-position:center top;
  transition:object-position var(--preview-scroll-dur,8s) cubic-bezier(.5,1,.89,1); }
/* 세로(모바일)뷰 = 모바일 롱캡처가 더 길어 절반 속도(8s) */
[data-gallery-grid][data-view="portrait"] .rb-card.rb-card--hoverpreview .rb-card__img--full{
  object-fit:cover; object-position:center top;
  transition:object-position var(--preview-scroll-dur-m,16s) cubic-bezier(.5,1,.89,1); }
.rb-card--hoverpreview .rb-card__preview-mask{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.42); opacity:0; transition:opacity var(--dur) var(--ease); pointer-events:none; }
.rb-card--hoverpreview .rb-card__preview-ico{ width:18px; height:18px; color:#fff;
  transition:width .15s var(--ease), height .15s var(--ease); }
/* hover:hover 미지원(터치겸용 노트북 등)에서도 마우스가 있으면 동작하도록 any-hover 까지 허용 */
@media(hover:hover),(any-hover:hover){
  .rb-card.rb-card--hoverpreview:hover .rb-card__img--full,
  [data-gallery-grid][data-view="portrait"] .rb-card.rb-card--hoverpreview:hover .rb-card__img--full{
    object-position:center bottom; transform:none; }
  .rb-card--hoverpreview:hover .rb-card__preview-mask{ opacity:1; }
  .rb-card--hoverpreview:hover .rb-card__preview-ico{ width:34px; height:34px; }
}
/* 모션 최소화(reduced-motion) 환경에서도 호버 프리뷰 스크롤은 유지한다.
   ① 이 모션은 사용자가 마우스를 올려 직접 개시하는 상호작용(자동재생 아님 — WCAG상 허용),
      레퍼런스(hdweb)도 동일하게 동작. Windows "애니메이션 효과 끔"/원격데스크톱(RDP)에서
      브라우저가 reduce 를 보고하면 tokens.css 전역 `transition-duration:.001ms !important` 가
      이 트랜지션까지 죽여 "롤링이 전혀 안 되는" 사고가 났다(즉시 푸터로 점프).
   ② 전역 규칙이 !important 라 여기도 !important 필요(클래스 특이도가 * 를 이김). */
@media(prefers-reduced-motion:reduce){
  .rb-card--hoverpreview .rb-card__img--full{
    transition:object-position var(--preview-scroll-dur,8s) cubic-bezier(.5,1,.89,1) !important;
  }
  [data-gallery-grid][data-view="portrait"] .rb-card--hoverpreview .rb-card__img--full{
    transition:object-position var(--preview-scroll-dur-m,16s) cubic-bezier(.5,1,.89,1) !important;
  }
}
/* hero layout — desktop 2-col; mobile stacks so the mobile-capture preview shows at a proper size */
.home-hero__inner{ display:grid; grid-template-columns:1.2fr .8fr; gap:var(--space-8); align-items:center; padding-block:var(--space-12); }
@media(max-width:768px){
  .home-hero__inner{ grid-template-columns:1fr; gap:var(--space-6); padding-block:var(--space-8); }
  .home-hero__strip{ --hero-h:min(54vw,210px); width:calc(var(--hero-h) * 4 / 3 + var(--hero-gap)); max-width:100%; margin:0 auto; }
  [data-view="landscape"].home-hero__strip{ width:calc(var(--hero-h) * 16 / 10); }
}
/* hero = track swiper (app.js [data-hero-slider]):
   세로=모바일캡쳐 2:3 2장씩, 가로=PC캡쳐 16:10 1장씩. 양쪽 높이 동일(--hero-h). */
.home-hero__strip{ --hero-gap:14px; position:relative; height:var(--hero-h);
  width:calc(var(--hero-h) * 4 / 3 + var(--hero-gap)); max-width:100%; margin-inline:auto; overflow:hidden; }
@media(min-width:769px){ .home-hero__strip{ --hero-h:300px; } }
[data-view="landscape"].home-hero__strip{ width:calc(var(--hero-h) * 16 / 10); }
.home-hero__strip .hero-slides{ position:absolute; inset:0; display:flex; gap:var(--hero-gap);
  transition:transform .5s ease; will-change:transform; }
.home-hero__strip .hero-slide{ position:relative; flex:0 0 auto; height:100%; aspect-ratio:2/3;
  opacity:1; visibility:visible; transform:none; border-radius:10px; overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.25); display:block; }
[data-view="landscape"].home-hero__strip .hero-slide{ aspect-ratio:16/10; }
.home-hero__strip .hero-slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; }
/* 히어로 호버 롤링(관리자 card_hover_preview 모드) — 카드와 동일한 top→bottom 스크롤 프리뷰 */
.home-hero__strip .hero-slide.is-roll img{ object-position:center top;
  transition:object-position var(--preview-scroll-dur,8s) cubic-bezier(.5,1,.89,1); }
@media(hover:hover),(any-hover:hover){
  .home-hero__strip .hero-slide.is-roll:hover img{ object-position:center bottom; }
}
@media(prefers-reduced-motion:reduce){
  .home-hero__strip .hero-slide.is-roll img{
    transition:object-position var(--preview-scroll-dur,8s) cubic-bezier(.5,1,.89,1) !important; }
}
.home-hero__strip .hero-dots{ position:absolute; bottom:8px; left:0; right:0; display:flex; gap:6px; justify-content:center; z-index:2; }
.home-hero__strip .hero-dot{ width:7px; height:7px; border-radius:999px; border:none; background:rgba(255,255,255,.5); cursor:pointer; padding:0; transition:width var(--dur) var(--ease); }
.home-hero__strip .hero-dot.is-active{ background:#fff; width:18px; }
@media(max-width:1024px){ [data-gallery-grid][data-view="landscape"]{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ [data-gallery-grid][data-view="landscape"]{ grid-template-columns:1fr; } }


/* ── 스토리 에디토리얼 허브 (2026-06-21) ── */
.st-feat{display:grid;grid-template-columns:1.12fr .88fr;gap:0;border-radius:16px;overflow:hidden;border:1px solid hsl(var(--border));margin-bottom:var(--space-8);background:#fff;text-decoration:none;color:inherit}
.st-feat:hover{box-shadow:0 16px 40px rgba(0,0,0,.12)}
.st-feat__media{position:relative;min-height:320px;background:#efedf5}
.st-feat__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.st-feat__body{padding:clamp(1.5rem,3vw,2.75rem);display:flex;flex-direction:column;justify-content:center;gap:var(--space-3)}
.st-tag{align-self:flex-start;font-size:.72rem;font-weight:800;letter-spacing:.03em;color:#fff;padding:.26rem .72rem;border-radius:999px}
.st-feat__title{font-size:clamp(1.4rem,2.6vw,2.05rem);font-weight:800;line-height:1.25;margin:0}
.st-feat__ex{color:#666;font-size:.96rem;line-height:1.65;margin:0}
.st-feat__meta{font-size:.78rem;color:#999;display:flex;gap:.6rem;flex-wrap:wrap}
.st-feat--banner{display:block;border:0}.st-feat--banner img{width:100%;height:auto;display:block}
@media(max-width:768px){.st-feat{grid-template-columns:1fr}.st-feat__media{min-height:0;aspect-ratio:16/9}}
.st-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5)}
@media(max-width:1024px){.st-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.st-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.st-grid{grid-template-columns:1fr}}
.st-card{display:flex;flex-direction:column;background:#fff;border:1px solid hsl(var(--border));border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .18s,box-shadow .18s}
.st-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(0,0,0,.1)}
.st-card__media{position:relative;aspect-ratio:16/9;background:#efedf5;overflow:hidden}
.st-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.st-card__tag{position:absolute;top:10px;left:10px;font-size:.66rem;font-weight:700;color:#fff;padding:.2rem .55rem;border-radius:999px}
.st-card__body{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2);flex:1}
.st-card__title{font-size:.95rem;font-weight:700;line-height:1.35;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.st-card__ex{font-size:.8rem;color:#777;line-height:1.5;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.st-card__meta{font-size:.72rem;color:#aaa;display:flex;gap:.5rem;margin-top:auto}
.st-article{max-width:880px;margin:0 auto}
.st-hero{position:relative;border-radius:16px;overflow:hidden;margin:var(--space-5) 0 var(--space-6)}
.st-hero--banner img{width:100%;height:auto;display:block}
.st-hero--accent{color:#fff;padding:clamp(2rem,5vw,3.5rem)}
.st-hero--accent .st-feat__title{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.2)}
.st-metarow{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;font-size:.82rem;color:#888;margin:var(--space-3) 0 var(--space-5)}
.st-metarow .dot{color:#ccc}
.st-prose{font-size:1.05rem;line-height:1.9;color:#2c2c2c}
.st-prose :is(h2,h3){font-weight:800;margin:1.6em 0 .5em;line-height:1.3}.st-prose p{margin:0 0 1.1em}
.st-prose img{max-width:100%;border-radius:10px;margin:1em 0}.st-prose a{color:#5e10a1;font-weight:600;text-decoration:underline}
.st-share{display:flex;gap:.5rem;align-items:center;margin:var(--space-6) 0}
.st-share a,.st-share button{width:38px;height:38px;border-radius:999px;border:1px solid hsl(var(--border));background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;color:#555;font-size:1rem}
.st-share a:hover,.st-share button:hover{border-color:#5e10a1;color:#5e10a1}

/* ── 스토리 히어로 모자이크 (메인 피처드 + 에디터 픽 4) ── */
.st-mosaic{display:grid;grid-template-columns:1.25fr 1fr;gap:var(--space-5);margin-bottom:var(--space-7)}
@media(max-width:900px){.st-mosaic{grid-template-columns:1fr}}
.st-main{display:flex;flex-direction:column;border:1px solid hsl(var(--border));border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;background:#fff;transition:transform .18s,box-shadow .18s}
.st-main:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.13)}
.st-main__media{position:relative;aspect-ratio:16/9;background:#efedf5;overflow:hidden}
.st-main__media img{width:100%;height:100%;object-fit:cover;display:block}
.st-main__body{padding:clamp(1.1rem,2.2vw,1.7rem);display:flex;flex-direction:column;gap:var(--space-2)}
.st-main__title{font-size:clamp(1.25rem,2vw,1.6rem);font-weight:800;line-height:1.3;margin:0}
.st-main__ex{color:#666;font-size:.94rem;line-height:1.65;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.st-main__meta{font-size:.78rem;color:#999;display:flex;gap:.55rem;flex-wrap:wrap;align-items:center}
.st-main__meta .go{margin-left:auto;font-weight:700;color:var(--rb-purple)}
.st-side{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);align-content:start}
@media(max-width:560px){.st-side{grid-template-columns:1fr 1fr}}
.st-rowhead{display:flex;align-items:baseline;gap:.5rem;margin:var(--space-2) 0 var(--space-4)}
.st-rowhead h2{font-size:1.1rem;font-weight:800;margin:0}
.st-rowhead span{font-size:.8rem;color:#999}