/* ARTREW — Components */

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);z-index:var(--z-nav);transition:background var(--dur-normal) var(--ease-out)}
.nav--scrolled{background:var(--overlay);backdrop-filter:blur(12px)}
.nav__logo{font-family:var(--font-display);font-size:1.25rem;letter-spacing:var(--ls-wider);color:var(--accent)}
.nav__tabs{display:flex;gap:var(--sp-4)}
.nav__ch{font-size:var(--text-small);font-weight:var(--w-medium);letter-spacing:var(--ls-wide);color:var(--text-2);transition:color var(--dur-fast);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm)}
.nav__ch:hover,.nav__ch.is-active{color:var(--c,var(--accent))}
.nav__back{font-size:var(--text-small);color:var(--text-2)}

/* BTN */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--sp-3) var(--sp-6);border-radius:var(--r-full);font-size:var(--text-small);font-weight:var(--w-semibold);letter-spacing:var(--ls-wide);background:var(--accent);color:var(--text-inv);transition:background var(--dur-fast),transform var(--dur-fast)}
.btn:hover{background:var(--accent-hover);transform:translateY(-1px)}
.btn--coupang{background:#e8492a;color:#fff}
.btn--naver{background:#03c75a;color:#fff}
.btn--ghost{background:transparent;border:1px solid var(--border-bold);color:var(--text)}

/* PRODUCT CARD */
.product-card{display:block;background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-4);transition:transform var(--dur-normal) var(--ease-out),box-shadow var(--dur-normal)}
.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-glow)}
.product-card__badge{font-size:2rem;margin-bottom:var(--sp-2)}
.product-card__price{color:var(--accent);font-weight:var(--w-semibold);margin-top:var(--sp-2)}

/* FEATURED CARD */
.featured-card{background:var(--surface);border-radius:var(--r-xl);padding:var(--sp-8);border:1px solid var(--border-gold)}

/* CH CARD (4채널 그리드) */
.ch-card{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);padding:var(--sp-8) var(--sp-6);background:var(--surface);border-radius:var(--r-xl);border:1px solid transparent;transition:border-color var(--dur-normal),transform var(--dur-normal) var(--ease-out)}
.ch-card:hover{border-color:var(--c,var(--accent));transform:translateY(-4px)}
.ch-card__icon{font-size:2.5rem}
.ch-card h3{font-family:var(--font-display);font-size:var(--text-h3);color:var(--c,var(--accent))}
.ch-card p{font-size:var(--text-small);color:var(--text-2);text-align:center}

/* LOADER */
.loader{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:1000;transition:opacity var(--dur-slow) var(--ease-out)}
.loader.is-done{opacity:0;pointer-events:none}

/* FOOTER */
.footer{padding:var(--sp-12) var(--gutter);border-top:1px solid var(--border);text-align:center}
.footer__links{display:flex;gap:var(--sp-6);justify-content:center;margin-bottom:var(--sp-4)}
.footer__links a{font-size:var(--text-small);color:var(--text-3)}
.footer__links a:hover{color:var(--text)}
.footer__copy{font-size:var(--text-xs);color:var(--text-3)}