/* SEOULRAVE — 공용 스타일
   어두운 종이 위 편집디자인. 밀도는 장식이 아니라 정보로 만든다 —
   번호, 좌표, 시각, 상태. 빈칸을 그림으로 채우지 않는다. */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

:root{
  --paper:#0A0A09;
  --raise:#111110;
  --ink:#F3F1EB;
  --dim:#8B867B;
  --faint:#5A564E;
  --line:rgba(243,241,235,.13);
  --hair:rgba(243,241,235,.07);
  --acid:#D8FF3E;
  --coral:#FF3752;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --sans:'Archivo','Pretendard Variable',Pretendard,-apple-system,system-ui,sans-serif;
  --kr:'Pretendard Variable',Pretendard,'Archivo',-apple-system,system-ui,sans-serif;
  --pad:clamp(16px,3.2vw,40px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.5;letter-spacing:-.008em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--acid);color:#0A0A09}

/* 얇은 세로 격자 — 판면이 있다는 걸 아주 약하게만 알린다 */
.grid-bg{position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:repeating-linear-gradient(90deg,var(--hair) 0 1px,transparent 1px calc(100%/12));
  background-size:100% 100%;opacity:.55}
@media(max-width:800px){.grid-bg{background-image:repeating-linear-gradient(90deg,var(--hair) 0 1px,transparent 1px 25%)}}

.wrap{position:relative;z-index:1;max-width:1560px;margin:0 auto;padding:0 var(--pad)}

/* ── 마스트헤드 ─────────────────────────────────────────────── */
.mast{position:sticky;top:0;z-index:50;background:rgba(10,10,9,.82);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.mast .wrap{display:flex;align-items:center;gap:22px;height:52px}
.logo{font-weight:800;font-size:15px;letter-spacing:.16em;white-space:nowrap}
.logo .r{color:var(--acid)}
.mast nav{margin-left:auto;display:flex;gap:2px;align-items:center}
.mast nav a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--dim);
  padding:7px 11px;border-radius:2px;transition:color .16s,background .16s}
.mast nav a:hover{color:var(--ink);background:rgba(243,241,235,.07)}
.mast nav a.on{color:var(--acid)}
.clock{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--faint);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.clock b{color:var(--dim);font-weight:400}
@media(max-width:720px){.clock{display:none}}

/* ── 러닝 티커 ──────────────────────────────────────────────── */
.ticker{border-bottom:1px solid var(--line);overflow:hidden;background:var(--raise)}
.ticker div{display:flex;white-space:nowrap;animation:slide 42s linear infinite;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;color:var(--faint);padding:8px 0}
.ticker span{padding:0 26px}
.ticker em{color:var(--acid);font-style:normal}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── 섹션 공통 ──────────────────────────────────────────────── */
section{border-bottom:1px solid var(--line)}
.eyebrow{display:flex;align-items:baseline;gap:14px;padding:22px 0 0;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--faint)}
.eyebrow .n{color:var(--acid)}
.eyebrow .l{flex:1;height:1px;background:var(--line);transform:translateY(-3px)}

/* ── 히어로 ─────────────────────────────────────────────────── */
.hero{padding-bottom:clamp(28px,5vw,60px)}   /* padding 단축 금지 — .wrap 의 좌우 여백을 덮는다 */
.hero h1{font-size:clamp(46px,11.2vw,168px);line-height:.86;font-weight:800;
  letter-spacing:-.045em;margin:clamp(24px,4vw,52px) 0 0;text-transform:uppercase}
.hero h1 .thin{font-weight:400;color:var(--dim)}
.hero h1 .dot{color:var(--acid)}
.hero .kr{font-family:var(--kr);font-size:clamp(14px,1.5vw,19px);line-height:1.75;
  color:var(--dim);max-width:52ch;margin-top:clamp(20px,3vw,34px);letter-spacing:-.015em;font-weight:400}
.hero .kr b{color:var(--ink);font-weight:600}

.rail{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:clamp(26px,4vw,46px)}
.rail div{padding:16px 0;border-right:1px solid var(--hair)}
.rail div:last-child{border-right:0}
.rail .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--faint);display:block}
.rail .v{font-size:clamp(15px,1.7vw,22px);font-weight:700;letter-spacing:-.02em;margin-top:5px;display:block;
  font-variant-numeric:tabular-nums}
.rail .v.acid{color:var(--acid)}
@media(max-width:720px){.rail{grid-template-columns:repeat(2,1fr)}.rail div{border-bottom:1px solid var(--hair)}}

/* ── NOW (조각) ─────────────────────────────────────────────── */
.now{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);
  padding:clamp(26px,4vw,54px) 0 clamp(34px,5vw,72px);align-items:center}
@media(max-width:900px){.now{grid-template-columns:1fr}}
.now h2{font-size:clamp(34px,5.4vw,74px);line-height:.94;font-weight:800;letter-spacing:-.04em;
  text-transform:uppercase}
.now h2 em{font-style:normal;color:var(--coral)}
.now .krbig{font-family:var(--kr);font-size:clamp(15px,1.6vw,20px);line-height:1.7;color:var(--dim);
  margin-top:18px;max-width:44ch;letter-spacing:-.015em}
.now .krbig b{color:var(--ink);font-weight:600}
.specs{margin-top:26px;border-top:1px solid var(--line)}
.specs .row{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:10px 0;
  border-bottom:1px solid var(--hair);font-size:13.5px}
.specs .row dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--faint);padding-top:3px}
.specs .row dd{font-family:var(--kr);color:var(--ink);letter-spacing:-.015em}
.cta{display:inline-flex;align-items:center;gap:10px;margin-top:26px;font-family:var(--mono);
  font-size:11.5px;letter-spacing:.14em;padding:12px 20px;border:1px solid var(--line);border-radius:2px;
  transition:border-color .16s,color .16s,background .16s}
.cta:hover{border-color:var(--acid);color:var(--acid)}
.cta.solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cta.solid:hover{background:var(--acid);border-color:var(--acid);color:var(--paper)}

.phones{display:flex;gap:clamp(8px,1.4vw,20px);justify-content:center;align-items:flex-end}
.phones figure{flex:1;max-width:250px;border-radius:12px;overflow:hidden;background:#151513;
  border:1px solid var(--line);position:relative}
.phones figure:nth-child(2){margin-bottom:clamp(16px,3vw,44px)}
.phones img{width:100%;display:block}
.phones figcaption{position:absolute;left:0;right:0;bottom:0;padding:20px 10px 8px;
  background:linear-gradient(transparent,rgba(10,10,9,.92));
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--dim);text-align:center}
@media(max-width:520px){.phones figure:nth-child(3){display:none}}

/* ── INDEX 표 ───────────────────────────────────────────────── */
.works{padding-bottom:clamp(30px,4vw,60px)}
.thead,.trow{display:grid;grid-template-columns:52px minmax(150px,1.1fr) minmax(0,2.2fr) 118px 62px 84px;
  gap:14px;align-items:center}
.thead{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--faint);
  padding:16px 0 9px;border-bottom:1px solid var(--line)}
.trow{padding:14px 0;border-bottom:1px solid var(--hair);transition:background .14s;position:relative}
.trow:hover{background:rgba(243,241,235,.035)}
.trow .no{font-family:var(--mono);font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.trow .nm{font-size:clamp(16px,1.9vw,25px);font-weight:700;letter-spacing:-.025em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.trow:hover .nm{color:var(--acid)}
.trow .ds{font-family:var(--kr);font-size:13px;color:var(--dim);letter-spacing:-.015em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trow .ct,.trow .yr{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--faint)}
.trow .st{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-align:right}
.trow .st i{font-style:normal;display:inline-flex;align-items:center;gap:6px}
.trow .st i::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--acid)}
.trow .st.dev i{color:var(--faint)}
.trow .st.dev i::before{background:var(--faint)}
@media(max-width:900px){
  .thead{display:none}
  .trow{grid-template-columns:40px 1fr auto;gap:10px;row-gap:2px}
  .trow .ds{grid-column:2/4;white-space:normal;font-size:12.5px}
  .trow .ct,.trow .yr{display:none}
}
/* 마우스를 얹으면 썸네일이 따라온다 — 표의 밀도를 해치지 않으면서 그림을 보여준다 */
#peek{position:fixed;width:246px;pointer-events:none;z-index:60;opacity:0;transform:translate(-50%,-50%) scale(.96);
  transition:opacity .16s,transform .16s;border:1px solid var(--line);border-radius:4px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.6);background:var(--raise)}
#peek img{width:100%;display:block}
#peek.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media(max-width:900px){#peek{display:none}}

/* ── 회사 정보 ──────────────────────────────────────────────── */
.co{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,4vw,64px);padding:clamp(26px,4vw,52px) 0}
@media(max-width:900px){.co{grid-template-columns:1fr}}
.co h2{font-size:clamp(30px,4.6vw,60px);line-height:.96;font-weight:800;letter-spacing:-.04em;text-transform:uppercase}
.co .krbig{font-family:var(--kr);font-size:15px;line-height:1.8;color:var(--dim);margin-top:18px;
  max-width:46ch;letter-spacing:-.015em}
.info{border-top:1px solid var(--line)}
.info .row{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:11px 0;border-bottom:1px solid var(--hair)}
.info dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--faint);padding-top:2px}
.info dd{font-family:var(--kr);font-size:14px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.info dd a{border-bottom:1px solid var(--line)}
.info dd a:hover{color:var(--acid);border-color:var(--acid)}

/* ── 푸터 ───────────────────────────────────────────────────── */
footer{padding:clamp(30px,4vw,56px) 0 40px}
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;border-top:1px solid var(--line);padding-top:22px}
@media(max-width:760px){.fgrid{grid-template-columns:repeat(2,1fr)}}
.fgrid .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--faint);display:block;margin-bottom:7px}
.fgrid .v{font-size:13.5px;font-family:var(--kr);color:var(--dim);line-height:1.7;letter-spacing:-.01em}
.fgrid .v a:hover{color:var(--acid)}
.fbot{display:flex;flex-wrap:wrap;gap:14px;align-items:baseline;margin-top:34px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--faint)}
.fbot .sp{margin-left:auto}

/* ── 문서 페이지 ────────────────────────────────────────────── */
.doc{max-width:760px;padding-top:clamp(28px,4vw,56px);padding-bottom:90px}
.doc .back{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--faint)}
.doc .back:hover{color:var(--acid)}
.doc h1{font-family:var(--kr);font-size:clamp(28px,3.6vw,42px);font-weight:800;letter-spacing:-.035em;
  margin:22px 0 6px;text-transform:none}
.doc .meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--faint);
  padding-bottom:22px;border-bottom:1px solid var(--line)}
.doc h2{font-family:var(--kr);font-size:17px;font-weight:700;letter-spacing:-.02em;margin:38px 0 12px;
  padding-top:14px;border-top:1px solid var(--hair)}
.doc p,.doc li{font-family:var(--kr);font-size:14.5px;line-height:1.85;color:var(--dim);letter-spacing:-.012em}
.doc strong{color:var(--ink);font-weight:600}
.doc ol,.doc ul{padding-left:20px;margin:10px 0}
.doc li{margin-bottom:7px}
.doc li::marker{color:var(--faint)}
.doc table{width:100%;border-collapse:collapse;margin:14px 0;font-family:var(--kr);font-size:13.5px}
.doc th,.doc td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--hair);color:var(--dim);
  letter-spacing:-.01em;vertical-align:top}
.doc th{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--faint);font-weight:400;
  border-bottom:1px solid var(--line)}
.doc a{color:var(--ink);border-bottom:1px solid var(--line)}
.doc a:hover{color:var(--acid);border-color:var(--acid)}
.doc .note{border-left:2px solid var(--acid);padding:12px 0 12px 16px;margin:18px 0;
  font-family:var(--kr);font-size:13.5px;line-height:1.8;color:var(--dim)}
.doc footer{padding:26px 0 0;margin-top:44px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--faint)}