/* ============================================================
   Hardware Accelerator N15 — Editorial Industrial design layer
   Light · Swiss grid · monochrome steel · minimal red accent
   Tailwind CDN handles utilities; this file = type, rules,
   materials, components the Play-CDN can't @apply.
   ============================================================ */

:root{
  --accent:#CD4440;
  --accent-deep:#A8362F;
  --paper:#FFFFFF;
  --bg:#EFEFEC;          /* warm light gray page */
  --bg-2:#E7E7E3;
  --ink:#121212;
  --ink-2:#3A3A3A;
  --muted:#737370;
  --line:rgba(18,18,18,.14);
  --line-soft:rgba(18,18,18,.08);
}

html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Pretendard','Archivo',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  word-break:keep-all;overflow-wrap:break-word; /* Hangul: never break mid-word */
}
.font-display{font-family:'Archivo','Pretendard',system-ui,sans-serif;letter-spacing:-.02em}
.keep{word-break:keep-all}
::selection{background:var(--ink);color:#fff}

/* ---- Bold display copy: keep Hangul lines from touching ---- */
.font-display.leading-snug{line-height:1.45}

/* ---- Mobile body text: extra breathing room ----
   text-* utilities set line-height too, so match p[class] with equal
   specificity, then re-assert leading-* choices below (cascade order wins). */
@media (max-width:767px){
  p,li{line-height:1.7}
  p[class*="text-"],li[class*="text-"]{line-height:1.7}
  p.leading-snug,li.leading-snug{line-height:1.5}
  .font-display.leading-snug{line-height:1.55}
  p.leading-relaxed,li.leading-relaxed{line-height:1.8}
}

/* ---- Hairline rules ---- */
.rule{border-color:var(--line)}
.rule-soft{border-color:var(--line-soft)}

/* ---- Spring motion ---- */
.spring{transition:all .45s cubic-bezier(.16,1,.3,1)}

/* ---- Eyebrow / micro labels ---- */
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.eyebrow-accent{color:var(--accent)}

/* ---- Tiny bullet marker (•• editorial dot) ---- */
.tick{display:inline-block;width:7px;height:7px;border:1.5px solid var(--ink);border-radius:50%;margin-right:8px;vertical-align:middle}
.tick-fill{background:var(--accent);border-color:var(--accent)}

/* ---- Media (full color per 260707 revision) ---- */
.media{transition:filter .6s cubic-bezier(.16,1,.3,1)}

/* ---- Scroll reveal ---- */
.reveal{opacity:0;transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---- Header (editorial top bar) ---- */
.topbar{background:rgba(239,239,236,.82);backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line)}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;
  padding:13px 22px;border-radius:2px;transition:all .4s cubic-bezier(.16,1,.3,1);cursor:pointer}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#000}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:var(--accent-deep)}
.btn-line{border:1px solid var(--line);color:var(--ink);background:transparent}
.btn-line:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.btn .arr{transition:transform .4s cubic-bezier(.16,1,.3,1)}
.btn:hover .arr{transform:translateX(4px)}

/* ---- Editorial card ---- */
.card{background:var(--paper);border:1px solid var(--line-soft);transition:all .45s cubic-bezier(.16,1,.3,1)}
.card-hover:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:0 18px 50px -28px rgba(0,0,0,.4)}

/* ---- Number index (01,02..) ---- */
.idx{font-family:'Archivo',sans-serif;font-weight:700;font-variant-numeric:tabular-nums}

/* ---- Marquee ---- */
.marquee-track{display:flex;gap:0;width:max-content;animation:marquee 40s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- Mobile menu ---- */
.mobile-menu{opacity:0;pointer-events:none;transition:opacity .35s cubic-bezier(.16,1,.3,1)}
.mobile-menu.open{opacity:1;pointer-events:auto}
.mobile-menu a{transform:translateY(12px);opacity:0;transition:all .45s cubic-bezier(.16,1,.3,1)}
.mobile-menu.open a{transform:none;opacity:1}
.mobile-menu.open a:nth-child(1){transition-delay:.04s}
.mobile-menu.open a:nth-child(2){transition-delay:.08s}
.mobile-menu.open a:nth-child(3){transition-delay:.12s}
.mobile-menu.open a:nth-child(4){transition-delay:.16s}
.mobile-menu.open a:nth-child(5){transition-delay:.20s}
.mobile-menu.open a:nth-child(6){transition-delay:.24s}

/* ---- Filter chip ---- */
.chip-filter{border:1px solid var(--line);background:transparent;color:var(--ink-2);
  transition:all .35s cubic-bezier(.16,1,.3,1)}
.chip-filter:hover{border-color:var(--ink)}
.chip-filter[data-active="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---- Form fields ---- */
.field-input{width:100%;background:var(--paper);border:1px solid var(--line);border-radius:2px;
  padding:13px 15px;color:var(--ink);font-size:15px;transition:all .35s cubic-bezier(.16,1,.3,1)}
.field-input::placeholder{color:#A6A6A2}
.field-input:focus{outline:none;border-color:var(--ink)}
select.field-input option{background:#fff;color:var(--ink)}
.seg-opt{display:block;text-align:center;border:1px solid var(--line);border-radius:2px;padding:13px;
  font-weight:600;font-size:14px;color:var(--ink-2);cursor:pointer;transition:all .35s cubic-bezier(.16,1,.3,1)}
.seg-radio:checked + .seg-opt{border-color:var(--ink);background:var(--ink);color:#fff}

/* ---- Logo wall (white logos on dark) ---- */
.logo-w{filter:brightness(0) invert(1);opacity:.62;object-fit:contain;max-width:100%;
  transition:opacity .4s cubic-bezier(.16,1,.3,1)}
.logo-w:hover{opacity:1}

/* ---- Hero plate (light) ---- */
.studio{background:radial-gradient(120% 90% at 60% 30%,#FBFBFA 0%,#E4E4E0 60%,#D6D6D2 100%)}

/* ---- Transparent → solid header (index full-bleed hero) ---- */
#nav{transition:background .35s cubic-bezier(.16,1,.3,1),border-color .35s,backdrop-filter .35s}
#nav .logo-onlight{display:none}
#nav[data-scrolled="false"]{background:transparent;border-bottom:1px solid transparent}
#nav[data-scrolled="false"] .nav-link{color:rgba(255,255,255,.85)}
#nav[data-scrolled="false"] .nav-link:hover{color:#fff}
#nav[data-scrolled="false"] .burger{color:#fff}
#nav[data-scrolled="false"] .logo-onvideo{display:block}
#nav[data-scrolled="false"] .logo-onlight{display:none}
#nav[data-scrolled="true"]{background:rgba(239,239,236,.85);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line)}
#nav[data-scrolled="true"] .nav-link{color:rgba(18,18,18,.8)}
#nav[data-scrolled="true"] .nav-link:hover{color:var(--accent)}
#nav[data-scrolled="true"] .burger{color:var(--ink)}
#nav[data-scrolled="true"] .logo-onvideo{display:none}
#nav[data-scrolled="true"] .logo-onlight{display:block}

/* ---- Full-bleed hero ticks (white over video) ---- */
.tick-light{display:inline-block;width:7px;height:7px;border:1.5px solid rgba(255,255,255,.85);border-radius:50%;margin-right:8px;vertical-align:middle}
.tick-light.tick-fill{background:var(--accent);border-color:var(--accent)}