/* DEEPVIBE — site styles (components & layout) */

/* ── webfonts ─────────────────────────────────────────── */
@font-face{
  font-family:'Helvetica Now Display';
  src:url('../fonts/HelveticaNowDisplay-ExtraBold.woff2') format('woff2');
  font-weight:700 900;font-display:swap;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('../fonts/JetBrainsMono-Latin.woff2') format('woff2');
  font-weight:100 800;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── reset & base ─────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg-base);color:var(--text-body);
  font-family:var(--font-body);font-size:var(--fs-md);line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}

::selection{background:var(--depth-500);color:var(--silver-050)}

/* ── typography helpers ───────────────────────────────── */
h1,h2,h3,.display{
  font-family:var(--font-display);color:var(--text-strong);
  line-height:var(--lh-tight);letter-spacing:var(--ls-tight);font-weight:800;
  word-break:keep-all;
}
p,.lead{word-break:keep-all}
.eyebrow{
  font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:500;
  letter-spacing:var(--ls-widest);text-transform:uppercase;color:var(--accent);
  display:block;margin-bottom:var(--sp-4);
}
.section-title{font-size:var(--fs-3xl);margin-bottom:var(--sp-5)}
.lead{font-size:var(--fs-lg);line-height:var(--lh-relaxed);color:var(--text-body)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ── layout ───────────────────────────────────────────── */
.container{max-width:var(--container-lg);margin-inline:auto;padding-inline:var(--gutter)}
.container--md{max-width:var(--container-md)}
.section{padding-block:var(--section-y)}
.section--surface{background:var(--bg-surface)}
.section--brand{background:linear-gradient(180deg,var(--depth-900),var(--depth-700))}

/* ── buttons ──────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  height:var(--control-lg);padding-inline:var(--sp-6);
  font-family:var(--font-display);font-size:var(--fs-sm);font-weight:700;
  letter-spacing:var(--ls-wider);text-transform:uppercase;
  border-radius:var(--r-md);
  transition:background var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out);
}
.btn--primary{background:var(--accent);color:var(--depth-900)}
.btn--primary:hover{background:var(--depth-200)}
.btn--ghost{border:var(--bw-thin) solid var(--silver-600);color:var(--text-strong)}
.btn--ghost:hover{border-color:var(--silver-300)}
.btn--sm{height:var(--control-md);padding-inline:var(--sp-5);font-size:var(--fs-xs)}

/* ── tag chips ────────────────────────────────────────── */
.tag{
  display:inline-block;padding:var(--sp-1) var(--sp-3);
  font-family:var(--font-mono);font-size:var(--fs-3xs);font-weight:500;
  letter-spacing:var(--ls-wider);text-transform:uppercase;
  color:var(--silver-300);border:var(--bw-hair) solid var(--charcoal-300);
  border-radius:var(--r-sm);
}
.tag--accent{color:var(--depth-200);border-color:var(--depth-500)}

/* ── header ───────────────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--abyss-900) 88%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:var(--bw-hair) solid var(--charcoal-500);
}
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;
}
.site-header__logo img{height:16px;width:auto}
.site-nav{display:flex;align-items:center;gap:var(--sp-6)}
.site-nav a{
  font-family:var(--font-display);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--text-dim);
  transition:color var(--dur-fast) var(--ease-out);
}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--text-strong)}
.site-nav .btn{height:36px;padding-inline:var(--sp-4);font-size:var(--fs-2xs)}
.nav-toggle{display:none;width:var(--tap-min);height:var(--tap-min);flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--silver-050);transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-base)}

/* ── hero ─────────────────────────────────────────────── */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 70% -10%,var(--depth-700) 0%,var(--depth-800) 45%,var(--abyss-900) 100%);
  padding-block:calc(var(--section-y) * 1.15) var(--section-y);
}
.hero__symbol{height:56px;width:auto;margin-bottom:var(--sp-7);opacity:.92}
.hero h1{
  font-size:var(--fs-5xl);letter-spacing:var(--ls-tightest);line-height:var(--lh-tight);
  max-width:18em;margin-bottom:var(--sp-5);
}
.hero__tagline{
  font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:var(--ls-wider);
  text-transform:uppercase;color:var(--depth-200);margin-bottom:var(--sp-6);
}
.hero__lead{max-width:34em;margin-bottom:var(--sp-8)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--sp-4)}

/* ── product / category cards ─────────────────────────── */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.card-grid--2{grid-template-columns:repeat(2,1fr)}
.card{
  background:var(--bg-raised);border:var(--bw-hair) solid var(--charcoal-500);
  border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;
  transition:border-color var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);
}
.card:hover{border-color:var(--silver-600);transform:translateY(-2px)}
.card__media{background:var(--abyss-800);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover}
.card__media--contain img{object-fit:contain;padding:var(--sp-4)}
.card__body{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3);flex:1}
.card__tags{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.card__title{font-size:var(--fs-lg);color:var(--text-strong);font-weight:700;font-family:var(--font-body)}
.card__desc{font-size:var(--fs-sm);color:var(--text-dim);line-height:var(--lh-relaxed)}
.card__meta{
  margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);
  padding-top:var(--sp-4);border-top:var(--bw-hair) solid var(--charcoal-500);
}
.card__price{font-family:var(--font-mono);font-size:var(--fs-lg);font-weight:700;color:var(--text-strong)}
.card__price small{font-size:var(--fs-2xs);font-weight:400;color:var(--text-dim);margin-left:2px}
.card__reviews{font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--text-dim)}
.card__reviews strong{color:var(--signal-ok);font-weight:500}
.card .btn{width:100%}

/* ── stat readout (다이브 컴퓨터 시그니처) ─────────────── */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.stat{
  background:var(--abyss-800);border:var(--bw-hair) solid var(--charcoal-500);
  border-radius:var(--r-lg);padding:var(--sp-6);
}
.stat__value{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:var(--fs-3xl);font-weight:500;color:var(--silver-050);line-height:var(--lh-solid);
}
.stat__value em{font-style:normal;color:var(--accent)}
.stat__label{
  margin-top:var(--sp-3);font-family:var(--font-mono);font-size:var(--fs-2xs);
  letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--text-dim);
}

/* ── store banner ─────────────────────────────────────── */
.store-banner{
  background:linear-gradient(120deg,var(--depth-800),var(--depth-600));
  border-radius:var(--r-xl);padding:var(--sp-9) var(--sp-8);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);flex-wrap:wrap;
}
.store-banner h2{font-size:var(--fs-2xl)}
.store-banner p{color:var(--depth-100);margin-top:var(--sp-2)}

/* ── guide (SEO 콘텐츠) ───────────────────────────────── */
.guide{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.guide__item{
  border-top:var(--bw-thick) solid var(--depth-500);
  padding-top:var(--sp-5);
}
.guide__item h3{font-size:var(--fs-lg);font-family:var(--font-body);font-weight:700;margin-bottom:var(--sp-3)}
.guide__item p{font-size:var(--fs-sm);line-height:var(--lh-relaxed);color:var(--text-dim)}

/* ── breadcrumb ───────────────────────────────────────── */
.breadcrumb{
  font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:var(--ls-wide);
  text-transform:uppercase;color:var(--text-dim);margin-bottom:var(--sp-6);
}
.breadcrumb a:hover{color:var(--text-strong)}
.breadcrumb span[aria-hidden]{margin-inline:var(--sp-2);color:var(--silver-600)}

/* ── descent chapters (메인 — 스크롤 = 한 번의 다이빙) ── */
.descent{position:relative}
.chapter{
  position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding-block:calc(var(--section-y) * .8);overflow:hidden;background:var(--bg-base);
}
/* 필름 그레인 */
.chapter::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;z-index:3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
.chapter__bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
}
.chapter__bg--dim{opacity:.5}
.chapter__bg--band{opacity:.28}
.chapter__scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(6,8,11,.62) 0%,rgba(6,8,11,.28) 45%,rgba(6,8,11,.82) 100%);
}
.chapter__scrim--heavy{background:linear-gradient(180deg,rgba(6,8,11,.88),rgba(6,8,11,.78))}
.chapter__inner{position:relative;z-index:2;width:100%}
.chapter__inner--center{text-align:center}
.chapter__depth{
  font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:500;
  letter-spacing:var(--ls-widest);text-transform:uppercase;color:var(--depth-200);
  margin-bottom:var(--sp-6);
}
.giant{
  font-family:var(--font-display);font-weight:800;color:var(--text-strong);
  font-size:var(--fs-6xl);line-height:var(--lh-solid);letter-spacing:var(--ls-tightest);
  margin-bottom:var(--sp-6);text-wrap:balance;
}
.giant--sm{font-size:var(--fs-5xl)}
.chapter__lead{max-width:34em;margin-bottom:var(--sp-5)}
.chapter__hint{
  position:absolute;left:0;right:0;bottom:var(--sp-5);z-index:2;text-align:center;
  font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:var(--ls-wider);
  text-transform:uppercase;color:var(--silver-400);
}
.chapter--closing .chapter__depth{text-align:center}
.hero__cta--center{justify-content:center}
.btn--xl{height:var(--control-xl);padding-inline:var(--sp-8);font-size:var(--fs-md)}

/* 시그니처 기어 피처 행 */
.feature{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(var(--sp-6),4vw,var(--sp-10));
  align-items:center;margin-top:var(--sp-9);
}
.feature--flip .feature__media{order:2}
.feature--flip .feature__body{order:1}
.feature__media img{
  width:100%;height:auto;border-radius:var(--r-lg);
  border:var(--bw-hair) solid var(--charcoal-500);
}
.feature__no{
  display:block;font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:500;
  color:var(--accent);letter-spacing:var(--ls-wider);margin-bottom:var(--sp-3);
}
.feature__body h3{
  font-size:var(--fs-3xl);margin:var(--sp-4) 0 var(--sp-4);
}
.feature__body p{
  color:var(--text-body);line-height:var(--lh-relaxed);margin-bottom:var(--sp-4);max-width:30em;
}
.feature__proof{
  font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-dim);
  margin-bottom:var(--sp-5)!important;
}
.chapter__more{
  margin-top:var(--sp-10);font-size:var(--fs-sm);color:var(--text-dim);
}
.chapter__more a{color:var(--text-strong);border-bottom:var(--bw-hair) solid var(--silver-600)}
.chapter__more a:hover{border-color:var(--silver-200)}
.stats__note{position:relative;z-index:2;margin-top:var(--sp-5);font-size:var(--fs-xs);color:var(--silver-500)}
.chapter--craft .stats{grid-template-columns:repeat(3,1fr)}
.chapter--craft .stat{background:color-mix(in srgb,var(--abyss-800) 82%,transparent)}

/* 리빌 모션 — no bounce */
.reveal{opacity:0;transform:translateY(24px);transition:opacity var(--dur-deep) var(--ease-out),transform var(--dur-deep) var(--ease-out)}
.reveal.in-view{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

@media (max-width:960px){
  .feature{grid-template-columns:1fr;gap:var(--sp-5)}
  .feature--flip .feature__media{order:0}
  .feature--flip .feature__body{order:1}
  .chapter--craft .stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .chapter--craft .stats{grid-template-columns:1fr 1fr;gap:var(--sp-3)}
  .giant{font-size:clamp(2.5rem,11vw,4.5rem)}
  .giant--sm{font-size:clamp(2rem,9vw,3.25rem)}
}

/* ── depth gauge (시그니처 — 스크롤 = 하강) ───────────── */
.depth-gauge{
  position:fixed;left:28px;top:50%;transform:translateY(-50%);z-index:60;
  display:none;flex-direction:column;align-items:center;gap:var(--sp-3);
}
.depth-gauge__label{
  font-family:var(--font-mono);font-size:var(--fs-3xs);font-weight:500;
  letter-spacing:var(--ls-widest);text-transform:uppercase;color:var(--silver-500);
}
.depth-gauge__track{
  position:relative;width:9px;height:44vh;
}
.depth-gauge__track::before{
  content:"";position:absolute;left:4px;top:0;bottom:0;width:1px;background:var(--charcoal-400);
}
.depth-gauge__track::after{
  content:"";position:absolute;left:2px;top:0;bottom:0;width:5px;
  background:repeating-linear-gradient(to bottom,var(--charcoal-300) 0 1px,transparent 1px 10%);
}
.depth-gauge__dot{
  position:absolute;left:2px;top:0;width:5px;height:5px;
  background:var(--accent);border-radius:var(--r-xs);will-change:transform;z-index:1;
}
.depth-gauge__value{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:var(--fs-xs);font-weight:500;color:var(--silver-050);white-space:nowrap;
}
.depth-gauge__value em{font-style:normal;color:var(--accent)}
@media (min-width:1200px){.depth-gauge{display:flex}}

/* ── footer ───────────────────────────────────────────── */
.site-footer{
  border-top:var(--bw-hair) solid var(--charcoal-500);
  background:var(--bg-surface);padding-block:var(--sp-9) var(--sp-7);
}
.site-footer__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-6);flex-wrap:wrap;margin-bottom:var(--sp-8)}
.site-footer__logo img{height:40px;width:auto;opacity:.9}
.site-footer__links{display:flex;gap:var(--sp-6)}
.site-footer__links a{
  font-family:var(--font-display);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--text-dim);
}
.site-footer__links a:hover{color:var(--text-strong)}
.site-footer__note{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;
  padding-top:var(--sp-5);border-top:var(--bw-hair) solid var(--charcoal-500);
  font-size:var(--fs-xs);color:var(--silver-500);
}

/* ── page hero (서브페이지) ───────────────────────────── */
.page-hero{
  background:radial-gradient(100% 120% at 80% -20%,var(--depth-800) 0%,var(--abyss-900) 70%);
  padding-block:calc(var(--section-y) * .7) calc(var(--section-y) * .5);
}
.page-hero h1{font-size:var(--fs-4xl);margin-bottom:var(--sp-4)}
.page-hero .lead{max-width:40em}

/* ── responsive ───────────────────────────────────────── */
@media (max-width:960px){
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}
  .guide{grid-template-columns:1fr;gap:var(--sp-6)}
}
@media (max-width:640px){
  .card-grid,.card-grid--2{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .site-nav{
    position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--abyss-800);border-bottom:var(--bw-hair) solid var(--charcoal-500);
    padding:var(--sp-4) var(--gutter) var(--sp-6);display:none;
  }
  .site-nav.is-open{display:flex}
  .site-nav a{padding-block:var(--sp-4);font-size:var(--fs-sm)}
  .site-nav .btn{margin-top:var(--sp-4);height:var(--control-lg);font-size:var(--fs-xs)}
  .nav-toggle{display:flex}
  .nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.is-open span:nth-child(2){opacity:0}
  .nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .store-banner{padding:var(--sp-7) var(--sp-5)}
}

/* motion 감소 선호 존중 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}