/* 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; }

/* ---------- 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; }
@media(max-width:1024px){ .rb-gnb__nav{ display:none; } .rb-gnb__burger{ display:flex; } }

/* 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:199; }
.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(0,0,0,.4); 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(84vw,320px); background:#fff; transform:translateX(-100%); transition:transform var(--dur) var(--ease); overflow-y:auto; padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-1); }
.rb-drawer.is-open .rb-drawer__panel{ transform:none; }
.rb-drawer__panel a{ font-size:var(--fs-body); font-weight:600; color:#333; padding:var(--space-3) var(--space-2); border-bottom:1px solid var(--rb-line); }
.rb-drawer__panel a:hover{ color:var(--rb-purple); }
.rb-drawer__close{ align-self:flex-end; background:none; border:none; font-size:1.5rem; cursor:pointer; color:#888; }

/* 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; }
/* landscape view = PC capture: wider 4:3 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); }
/* image-swap landscape geometry only for design cards (story/collection covers keep native aspect) */
[data-gallery-grid][data-view="landscape"] .rb-card--design .rb-card__media{ aspect-ratio:4/3; }
[data-gallery-grid][data-view="landscape"] .rb-card--design .rb-card__img{ object-position:center; }
@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; } }