/* dnbestup-clone — Responsive (8 viewport: 360/390/414/768/820/1024/1280/1920) */

/* === Mobile drawer (when toggled) === */
.nav-list.is-open{
  display:flex;flex-direction:column;align-items:stretch;gap:0;
  position:fixed;inset:var(--header-h) 0 0 0;z-index:55;
  background:var(--cream);padding:24px 28px;
  border-top:1px solid var(--line-soft);
  overflow:auto;
}
.nav-list.is-open a{
  padding:18px 4px;border-bottom:1px solid var(--line-soft);
  font-size:18px;font-weight:600;border-radius:0;
  display:flex;justify-content:space-between;align-items:center;
}
.nav-list.is-open a::after{content:"→";color:var(--warm-gold-deep);font-family:var(--f-mono)}

/* === ≤ 1024 (tablet portrait) === */
@media(max-width:1023.98px){
  :root{--header-h:64px}
  .hero{padding:36px 0 64px}
  .hero-grid{gap:36px}
  .hero-visual{aspect-ratio:5/4;max-width:540px;margin-inline:auto;width:100%}
  .hero-stats{grid-template-columns:repeat(3,1fr)}
}

/* === ≤ 820 (iPad mini portrait & small tablets) === */
@media(max-width:820px){
  .nav-list{display:none}
  .menu-toggle{display:inline-flex}
  .nav-actions .lang-pill{display:none}
  .kakao-btn{padding:9px 14px;font-size:13px}
  .section-head{align-items:flex-start}
  .section-head .btn-ghost{align-self:flex-start}
}

/* === ≤ 768 (iPad mini portrait edge) === */
@media(max-width:768px){
  .cat-grid{
    grid-template-columns:repeat(2,1fr);
    grid-auto-rows:minmax(180px,auto);
  }
  .cat-card.x-large{grid-column:span 2;grid-row:span 1;min-height:280px}
  .cat-card.medium{grid-column:span 1;grid-row:span 1}
  .cat-card.wide{grid-column:span 2;grid-row:span 1}
}

/* === ≤ 600 (mobile landscape & small phones) === */
@media(max-width:600px){
  :root{--gutter:18px}
  .hero{padding:28px 0 56px}
  .hero-headline{font-size:clamp(38px,10vw,56px)}
  .hero-headline em{display:inline;margin-left:4px}
  .hero-sub{font-size:15.5px;margin-top:18px}
  .hero-actions .btn{padding:13px 20px;font-size:14px}
  .hero-stats{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:32px;padding-top:18px}
  .hero-stat .v{font-size:22px}
  .hero-stat .l{font-size:10.5px}
  .hero-visual{aspect-ratio:4/5;max-width:none}
  .hero-deco-num{font-size:140px;top:-20px;right:-8px}
  .hero-float{left:16px;right:16px;bottom:16px}
  .hero-float-l{font-size:14.5px;max-width:60%}
  .hero-float-r{padding:9px 12px;font-size:12.5px}

  .section{padding-block:60px}
  .section-head{margin-bottom:28px;gap:16px}
  .section-head h2,.section-title h2{font-size:30px;line-height:1.1}
  .section-head .btn{padding:11px 16px;font-size:13px}
  .lead{font-size:15px}

  .ticker-strip{padding:14px 0}
  .ticker-strip .ticker span{font-size:18px;gap:10px}

  .cat-grid{
    grid-template-columns:1fr;gap:14px;
  }
  .cat-card.x-large,.cat-card.medium,.cat-card.wide{grid-column:span 1;grid-row:span 1;min-height:200px}
  .cat-card.x-large{min-height:240px}
  .cat-card{padding:18px}
  .cat-card h3{font-size:22px}
  .cat-card .num{font-size:28px;top:14px;left:18px}
  .cat-card .pin{font-size:10px;padding:3px 8px;top:14px;right:14px}
  .cat-card .arrow{width:36px;height:36px;font-size:15px;bottom:18px;right:18px}

  .curated-row{gap:14px}
  .product-card .body{padding:14px 16px 18px}
  .product-card h4{font-size:16px}
  .product-card .price{font-size:16.5px}

  .tip-grid{gap:18px}
  .tip-card .body{padding:20px 20px 22px}
  .tip-card.featured h4{font-size:22px}
  .tip-card h4{font-size:18px}

  .reviews-grid{columns:1 280px}
  .review-card{padding:18px 18px 16px}
  .review-card .title{font-size:15px}
  .review-card .text{font-size:14px}
  .review-card .stars{font-size:13px;letter-spacing:1.5px}

  .cta-band{padding:48px 24px 56px;border-radius:var(--r-lg)}
  .cta-band h2{font-size:30px;line-height:1.1}
  .cta-band p{font-size:15px;margin-top:14px}
  .cta-band .num{font-size:96px;top:18px;right:18px}
  .cta-band .actions{margin-top:24px}
  .cta-band .actions .btn{padding:12px 18px;font-size:14px}

  .site-footer{padding:48px 0 24px}
  .foot-grid{gap:28px}
  .foot-bottom{margin-top:32px;padding-top:18px;font-size:11px;flex-direction:column;gap:6px}

  .fab-chat{padding:11px 16px;font-size:13.5px;bottom:14px;right:14px}
}

/* === ≤ 414 (iPhone Plus / 14 ProMax) === */
@media(max-width:414px){
  .hero-tag{font-size:12.5px;padding:7px 12px 7px 7px}
  .hero-headline{font-size:42px}
  .nav-row{gap:14px}
  .brand{font-size:16px}
  .brand-mark{width:30px;height:30px}
}

/* === ≤ 390 (iPhone 13/14 standard) === */
@media(max-width:390px){
  :root{--gutter:16px}
  .hero-headline{font-size:38px;letter-spacing:-.025em}
  .hero-stats{padding-top:16px;margin-top:28px}
  .hero-stat .v{font-size:20px}
  .cat-card h3{font-size:20px}
  .cat-card .tags li{font-size:11px;padding:2px 7px}
  .section-head h2,.section-title h2{font-size:26px}
  .cta-band h2{font-size:26px}
}

/* === ≤ 360 (Galaxy S9 / smaller) === */
@media(max-width:360px){
  .kakao-btn span{display:none}
  .kakao-btn{padding:9px 11px}
  .hero-headline{font-size:34px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{justify-content:center;width:100%}
  .review-card .meta{flex-wrap:wrap;gap:8px}
}

/* === ≥ 1280 large desktop === */
@media(min-width:1280px){
  .hero-grid{gap:80px}
}

/* === ≥ 1920 ultra-wide === */
@media(min-width:1920px){
  :root{--max:1480px}
}

/* === Reduced motion === */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .ticker{animation:none}
}