/* D2: 에디토리얼 블랙 (영 포트폴리오의 결: 검정, 얇은 대문자, 쪽 번호, 세로 캡션) */
:root{--paper:#000;--white:#0C0C0C;--ink:#000;--text:#EDEDED;--muted:#8C8C8C;--line:rgba(255,255,255,.12);
  --disp:"General Sans","Pretendard Variable",Pretendard,system-ui,sans-serif}
body{background:#000;color:var(--text)}
h1,h2,h3,.p-name,.tagline{font-family:var(--disp)}
.mono{letter-spacing:.12em;font-size:11px}

.nav,.nav.solid{background:rgba(0,0,0,.72);color:#EDEDED;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}
.nav .lockup svg{fill:var(--red)}
.links{font-size:12px;font-weight:400;letter-spacing:.12em;text-transform:uppercase}
.links .lang{border-color:rgba(255,255,255,.3)}
.clock{display:inline-flex;gap:6px;color:var(--muted);font-size:11px}.clock b{color:#EDEDED;font-weight:400}
@media (max-width:900px){.clock{display:none}}

.rail{display:flex;position:fixed;left:18px;top:50%;z-index:40;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;gap:28px;color:var(--muted);font-size:10px}
.rail-count{color:#EDEDED}
@media (max-width:1180px){.rail{display:none}}

/* hero: 로고 전체가 보이게 가운데 */
.hero{background:#000;color:#EDEDED;text-align:center;padding-block:clamp(56px,7vw,96px) 40px}
.hero-glow{background:radial-gradient(520px circle at var(--mx,50%) var(--my,30%),rgba(255,50,14,.14),transparent 60%)}
.hero-mark{position:relative;right:auto;top:auto;width:min(46vw,300px);margin:0 auto 40px;opacity:1}
.motion .hero-mark{opacity:0}.motion.ready .hero-mark{opacity:1}
.hero-mark svg{fill:var(--red)}
.hero .label{color:var(--muted);opacity:1}
.hero h1{font-weight:300;font-size:clamp(38px,5.6vw,80px);letter-spacing:-.02em;line-height:1.12}
.hero .lead{margin-inline:auto;color:#A3A3A3;font-size:16px;max-width:36em}
.cta{justify-content:center}
.btn{height:46px;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;border-radius:0}
.btn-white{background:#EDEDED;color:#000}
.btn-ghost{border:1px solid rgba(255,255,255,.3);color:#EDEDED;text-transform:none;letter-spacing:.02em}
.stats{text-align:left;border-top:1px solid var(--line)}
.stats div+div{border-left-color:var(--line)}
.stats dd{font-family:var(--disp);font-weight:300;letter-spacing:-.02em}
.stats dt{color:var(--muted);opacity:1}

/* index: 포트폴리오 목차처럼 */
.index-sec{display:block;position:relative;padding-block:clamp(56px,8vw,110px);border-top:1px solid var(--line)}
.index{margin-top:18px;border-bottom:1px solid var(--line)}
.index a{display:grid;grid-template-columns:64px minmax(0,1.2fr) minmax(0,1fr) 80px 32px;align-items:baseline;gap:16px;padding:26px 0;border-top:1px solid var(--line);text-decoration:none;transition:color .25s,padding .3s}
.index a:hover{color:var(--red);padding-left:14px}
.index .n,.index .yr{color:var(--muted)}
.index .nm{font-family:var(--disp);font-size:clamp(30px,4vw,56px);font-weight:300;letter-spacing:-.02em;line-height:1}
.index .ds{color:var(--muted);font-size:15px}
.index .ar{font-size:22px;justify-self:end;transition:transform .25s}.index a:hover .ar{transform:translateX(6px)}
@media (max-width:720px){.index a{grid-template-columns:40px 1fr 24px}.index .ds,.index .yr{display:none}}

.ticker{background:#000;color:var(--muted);border-block:1px solid var(--line);font-weight:300}
.ticker span{font-weight:300;letter-spacing:.02em;text-transform:uppercase;font-size:13px}
.ticker i{color:var(--red)}

.products{background:#000}
.sec-head h2,.contact h2{font-weight:300;letter-spacing:-.02em}
.kicker{color:var(--muted)}
.prod{background:#0A0A0A;border-radius:2px;box-shadow:0 0 0 1px var(--line)}
.prod+.prod{margin-top:20px}
.chap{color:var(--muted)}
.prod-name h3,.p-name{font-weight:400}
.tagline{font-weight:400;letter-spacing:-.01em}
.status{background:transparent;border:1px solid rgba(255,50,14,.5);color:#FF7A5C;border-radius:0}
.prod-lead{color:#B5B5B5}
.chips li{background:transparent;border:1px solid var(--line);border-radius:0;font-weight:400;color:#CFCFCF}
.plinks a{border-radius:0;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.plinks .ext{color:#EDEDED}
.prod-vis{border-radius:0}
.vis-note{color:rgba(0,0,0,.5)}

.story-sec{background:#000;border-top:1px solid var(--line)}
.timeline li::before{background:#EDEDED}
.partners{background:#000;border-top:1px solid var(--line)}
.pcards li{background:transparent;box-shadow:0 0 0 1px var(--line);border-radius:0}
.pcards h3{font-weight:400}
.contact{background:#000;border-top:1px solid var(--line)}
.contact .kicker{color:var(--muted)}
.mail{font-family:var(--disp);font-weight:300;border-bottom:1px solid var(--red)}
.copy{border-radius:0}
.foot{background:#000;border-top:1px solid var(--line)}

/* 제품 상세: 검은 틀 안에 제품 색 판 */
.p-hero,.pp-nbnb .p-hero,.pp-anchak .p-hero{background:#000;color:#EDEDED}
.p-hero h1{font-weight:300;letter-spacing:-.02em}
.p-hero-vis{border-radius:2px;min-height:620px;padding:40px 0!important}
.pp-nbnb .p-hero-vis{background:linear-gradient(165deg,#EEF4F0,#CFE1D4)!important}
.pp-anchak .p-hero-vis{background:radial-gradient(90% 80% at 70% 20%,#2F6B3A,#12301D 60%,#0B1F13)!important}
.pp-nbnb .p-hero .status,.pp-anchak .p-hero .status{background:transparent;color:#FF7A5C}
.p-hero .plinks .ext,.pp-anchak .p-hero .plinks .ext{color:#EDEDED}
.p-ps{background:#000;border-top:1px solid var(--line)}
.p-solution,.p-feat-text h2{font-weight:300;letter-spacing:-.02em}
.p-feats{background:#000}
.p-feat+.p-feat{border-top-color:var(--line)}
.p-shot{border-radius:20px}
.p-rest>div{background:transparent;box-shadow:0 0 0 1px var(--line);border-radius:0}
.p-rest h3{font-weight:400}
.p-next{background:#000;border-top-color:var(--line)}
.p-next h2{font-weight:300}
.p-other{border-radius:2px}
.contact,.foot,.story-sec{color:#EDEDED}
.foot .op,.foot .mini{color:var(--muted)}
.copy{color:#EDEDED;border-color:rgba(255,255,255,.4)}
@media (max-width:900px){.p-hero-vis{min-height:0;padding:28px 0!important}}

/* 앱 스튜디오 칸 (2026-10-26) */
.next-name{font-family:var(--disp);font-weight:300;letter-spacing:-.02em}
.next-card{border-radius:0;border-color:rgba(255,255,255,.22)}
.next-badge{background:transparent;color:var(--red);box-shadow:inset 0 0 0 1px var(--red);border-radius:0}
.studio-sec{border-top:1px solid var(--line);color:#EDEDED}
.studio-text{color:#C9C9C9;font-weight:300}
.studio-facts dd{font-weight:400}