/* COSMOZONE Theme v2 - GNUBoard5
   Layout inspired by clean Korean cosmetics brand sites.
*/
:root{
  --bg:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --line:rgba(15,23,42,.10);
  --soft:rgba(2,6,23,.04);
  --shadow:0 18px 48px rgba(2,6,23,.10);
  --radius:18px;
  --radius2:28px;
  --primary:#2563eb;
  --teal:#06b6d4;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans KR","Apple SD Gothic Neo",Arial,sans-serif;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{width:min(1240px,calc(100% - 40px));margin:0 auto}
.grid{display:grid;gap:18px}

/* top utility bar */
.cz-topbar{
  background:#0b2a7a;
  color:#eaf2ff;
  font-size:12px;
}
.cz-topbar .inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 0;
}
.cz-topbar a{ color:#eaf2ff; opacity:.9 }
.cz-topbar a:hover{ opacity:1 }
.cz-topbar .right{ display:flex; gap:12px; align-items:center; flex-wrap:wrap }
.cz-topbar .left{ display:flex; gap:10px; align-items:center }
.cz-pill{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  padding:4px 10px;
  border-radius:999px;
  font-weight:800;
}

/* main header */
.cz-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.cz-header .bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:16px 0;
}
.cz-logo{ display:flex; align-items:center; gap:12px }
.cz-logo img{ width:190px }
.cz-nav{
  display:flex; align-items:center; gap:14px;
  font-size:14px; font-weight:800;
  color:rgba(15,23,42,.70);
}
.cz-nav a{
  padding:10px 10px;
  border-radius:999px;
}
.cz-nav a:hover{ background:var(--soft); color:var(--text) }
.cz-actions{ display:flex; align-items:center; gap:10px }
.cz-search{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:9px 12px;
  min-width:340px;
}
.cz-search input{ border:0; outline:0; width:100%; font-size:14px }
.cz-iconbtn{
  width:38px; height:38px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  display:grid; place-items:center;
  cursor:pointer;
}
.cz-iconbtn:hover{ box-shadow:0 12px 26px rgba(2,6,23,.10) }
.cz-mobile-toggle{ display:none }

/* drawer */
.cz-drawer{ position:fixed; inset:0; background:rgba(15,23,42,.45); display:none }
.cz-drawer.open{ display:block }
.cz-drawer .panel{
  position:absolute; right:0; top:0; height:100%;
  width:min(360px,92vw);
  background:#fff;
  border-left:1px solid var(--line);
  padding:18px;
}
.cz-drawer .panel a{
  display:block;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  margin-bottom:10px;
  font-weight:900;
}
.cz-drawer .panel a:hover{ background:rgba(2,6,23,.03) }

/* hero */
.cz-hero{
  background:linear-gradient(180deg, rgba(37,99,235,.06), transparent 70%);
  padding:18px 0 0;
}
.cz-hero .hero-wrap{
  border-radius:var(--radius2);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  background:#fff;
}
.cz-hero .hero-row{
  display:grid;
  grid-template-columns: 1fr;
}
.cz-hero .hero-row img{ width:100% }
.cz-hero .hero-controls{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 14px;
  border-top:1px solid var(--line);
  background:#fff;
}
.cz-hero .dots{ display:flex; gap:8px }
.cz-dot{
  width:10px; height:10px; border-radius:999px;
  border:1px solid rgba(15,23,42,.30);
  background:rgba(255,255,255,.70);
  cursor:pointer;
}
.cz-dot.active{ background:rgba(37,99,235,.85); border-color:rgba(37,99,235,.85) }
.cz-arrows{ display:flex; gap:8px }
.cz-arrow{
  width:38px; height:38px; border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  display:grid; place-items:center;
}
.cz-arrow:hover{ box-shadow:0 10px 22px rgba(2,6,23,.10) }

/* section */
.cz-section{ padding:44px 0 }
.cz-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:18px; margin-bottom:16px;
}
.cz-head h2{ margin:0; font-size:22px; letter-spacing:-0.02em }
.cz-head .sub{ margin:6px 0 0; color:var(--muted); font-size:14px }
.cz-chiprow{ display:flex; gap:10px; flex-wrap:wrap; }
.cz-chip{
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line);
  background:#fff;
  padding:8px 12px;
  border-radius:999px;
  font-size:13px; font-weight:900;
  color:rgba(15,23,42,.65);
  cursor:pointer;
}
.cz-chip.active{ color:var(--text); border-color:rgba(37,99,235,.25); background:rgba(37,99,235,.06) }

/* BEST horizontal scroller */
.cz-scroller{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--radius2);
  background:#fff;
  overflow:hidden;
}
.cz-scroller .track{
  display:flex;
  gap:14px;
  padding:16px;
  overflow:auto;
  scroll-behavior:smooth;
}
.cz-scroller .track::-webkit-scrollbar{ height:10px }
.cz-scroller .track::-webkit-scrollbar-thumb{ background:rgba(15,23,42,.15); border-radius:999px }
.cz-card{
  width:260px;
  flex:0 0 auto;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:#fff;
  transition:transform .15s ease, box-shadow .15s ease;
}
.cz-card:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(2,6,23,.10) }
.cz-card .thumb{
  background:linear-gradient(135deg, rgba(168,85,247,.10), rgba(14,165,233,.10));
  padding:14px;
  border-bottom:1px solid var(--line);
}
.cz-card .thumb img{ border-radius:14px; border:1px solid rgba(15,23,42,.10) }
.cz-card .body{ padding:14px 14px 16px }
.cz-tagrow{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px }
.cz-tag{
  font-size:11px; font-weight:900;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(2,6,23,.05);
  color:rgba(15,23,42,.65);
}
.cz-tag.best{ background:rgba(37,99,235,.12); color:#1d4ed8 }
.cz-tag.new{ background:rgba(14,165,233,.12); color:#0369a1 }
.cz-tag.sale{ background:rgba(244,63,94,.12); color:#be123c }
.cz-card h3{ margin:0 0 8px; font-size:14px; letter-spacing:-0.01em }
.cz-price{ display:flex; align-items:baseline; gap:8px; font-weight:900 }
.cz-price del{ color:rgba(15,23,42,.35); font-weight:800; font-size:12px }
.cz-price .rate{ color:#e11d48; font-size:12px; font-weight:900 }

.cz-scrollbtn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.90);
  cursor:pointer;
  display:grid; place-items:center;
}
.cz-scrollbtn:hover{ box-shadow:0 10px 22px rgba(2,6,23,.12) }
.cz-scrollbtn.prev{ left:10px }
.cz-scrollbtn.next{ right:10px }

/* recommendation 2x2 */
.cz-reco{ grid-template-columns: repeat(2, 1fr) }
.reco-card{
  border:1px solid var(--line);
  border-radius:var(--radius2);
  overflow:hidden;
  background:#fff;
  display:grid;
  grid-template-columns: 1fr 1fr;
  min-height:190px;
}
.reco-card .left{ padding:18px; display:flex; flex-direction:column; justify-content:center; gap:10px }
.reco-card .left strong{ font-size:16px }
.reco-card .left span{ color:var(--muted); font-size:13px }
.reco-card .right{ background:linear-gradient(135deg, rgba(37,99,235,.10), rgba(244,63,94,.10)); display:grid; place-items:center }
.reco-card .right img{ width:72% }

/* membership banner + benefits row */
.cz-banner{
  border-radius:var(--radius2);
  border:1px solid var(--line);
  overflow:hidden;
  background:linear-gradient(90deg, rgba(37,99,235,.10), rgba(6,182,212,.10));
  box-shadow:var(--shadow);
}
.cz-banner .inner{
  padding:28px;
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap;
}
.cz-banner h3{ margin:0; font-size:18px; letter-spacing:-0.02em }
.cz-banner p{ margin:6px 0 0; color:var(--muted); font-size:14px }
.cz-banner .stampwrap{ display:flex; align-items:center; gap:12px }
.cz-banner .stampwrap img{ width:74px; height:74px }

.cz-benefits{ margin-top:18px; grid-template-columns: repeat(6, 1fr) }
.cz-benefit{
  border:1px solid var(--line);
  background:#fff;
  border-radius:16px;
  padding:14px 12px;
  text-align:center;
}
.cz-benefit .ico{
  width:42px; height:42px; border-radius:14px;
  margin:0 auto 10px;
  background:rgba(37,99,235,.10);
  border:1px solid rgba(37,99,235,.15);
  display:grid; place-items:center;
  font-weight:900; color:var(--primary);
}
.cz-benefit strong{ display:block; font-size:13px }
.cz-benefit span{ display:block; font-size:12px; color:var(--muted); margin-top:4px }

/* reviews */
.cz-reviews{ grid-template-columns: repeat(3, 1fr) }
.cz-review{
  border:1px solid var(--line);
  background:#fff;
  border-radius:var(--radius2);
  padding:18px;
}
.cz-review .top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px }
.cz-stars{ letter-spacing:1px; font-size:12px }
.cz-review p{ margin:8px 0 0; color:var(--muted); font-size:13px }
.cz-review .who{ margin-top:12px; font-size:12px; color:rgba(15,23,42,.55); font-weight:900 }

/* instagram tiles */
.cz-ig{ grid-template-columns: repeat(4, 1fr) }
.cz-ig .tile{
  border-radius:18px;
  border:1px solid var(--line);
  overflow:hidden;
  background:linear-gradient(135deg, rgba(234,179,8,.12), rgba(37,99,235,.10), rgba(244,63,94,.10));
  aspect-ratio:1/1;
  display:flex; align-items:flex-end;
  padding:12px;
}
.cz-ig .tile span{
  background:rgba(255,255,255,.82);
  border:1px solid rgba(15,23,42,.10);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
}

/* SEO accordion */
.cz-seo{ border:1px solid var(--line); border-radius:var(--radius2); overflow:hidden; background:#fff }
.cz-seo summary{
  list-style:none; cursor:pointer;
  padding:16px 18px;
  font-weight:900;
  display:flex; align-items:center; justify-content:space-between;
}
.cz-seo summary::-webkit-details-marker{display:none}
.cz-seo .content{ padding:0 18px 18px; color:var(--muted); font-size:13px; white-space:pre-wrap }

/* footer */
.cz-footer{ border-top:1px solid var(--line); padding:34px 0 40px; background:linear-gradient(180deg, rgba(2,6,23,.02), transparent 70%) }
.cz-footgrid{ display:grid; grid-template-columns: 1.2fr .8fr; gap:18px }
.cz-footer .mini{ color:var(--muted); font-size:13px; margin-top:10px }
.cz-footer .links{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; align-items:flex-start }
.cz-footer .links a{
  border:1px solid var(--line);
  background:#fff;
  padding:8px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:900;
  color:rgba(15,23,42,.70);
}
.cz-footer .links a:hover{ color:var(--text) }

/* responsive */
@media (max-width:1024px){
  .cz-search{ min-width:220px }
  .cz-benefits{ grid-template-columns: repeat(3, 1fr) }
  .cz-reviews{ grid-template-columns: 1fr }
}
@media (max-width:720px){
  .cz-nav,.cz-search{ display:none }
  .cz-mobile-toggle{ display:inline-grid }
  .container{ width:calc(100% - 28px) }
  .cz-reco{ grid-template-columns: 1fr }
  .cz-ig{ grid-template-columns: repeat(2, 1fr) }
  .cz-footgrid{ grid-template-columns: 1fr }
  .cz-footer .links{ justify-content:flex-start }
  .cz-scrollbtn{ display:none }
  .cz-card{ width:240px }
}