/* ESSR 브랜드 시스템 — ESSR-브랜드가이드-v1 기준.
   Ink Navy 다크를 기본으로 하고 라이트 변형은 두지 않는다(덱과 동일한 단일 무드). */
:root{
  --ink:#171632;        /* 배경 */
  --ink-deep:#0E0D22;   /* 페이지 바탕 */
  --paper:#FAF9F5;      /* 본문 텍스트 */
  --violet:#A48BF2;     /* 다크 위 강조 */
  --violet-deep:#5B3BC4;
  --sand:#C9A876;       /* 포인트 — 화면당 '가장 중요한 하나'에만 */
  --sub:#B9B7CE;        /* 보조 텍스트 */
  --line:#4A4870;       /* 구분선 */
  --card:#1E1D3A;       /* 카드 배경 */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ink-deep);color:var(--paper);
  font-family:'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',sans-serif;
  word-break:keep-all;line-height:1.6;
}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;letter-spacing:.18em}
.num{font-family:'Space Grotesk','Pretendard Variable',sans-serif;font-weight:700}
a{color:var(--violet);text-decoration:none}
a:hover{color:var(--sand)}

.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* 상단 내비
   구조: [로고] [메뉴들] [디스코드 CTA] [햄버거]
   ⚠️ CTA를 .links 안에 두지 말 것 — 모바일에서 메뉴를 접어도 CTA는 계속 보여야 한다.
   6개 항목을 그대로 세로로 흘리면 첫 화면의 절반 이상을 먹는다(실측). */
.nav{display:flex;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.nav .brand{display:flex;align-items:center;color:var(--paper);flex-shrink:0}
.nav .brand img{height:30px;display:block}
.nav .links{margin-left:auto;display:flex;gap:8px;font-size:15px}
.nav .links a{color:var(--sub);border:1px solid var(--line);padding:8px 15px;border-radius:6px;
  font-weight:600;white-space:nowrap}
.nav .links a:hover{color:var(--paper);border-color:var(--violet)}
.nav .links a.on{color:var(--paper);border-color:var(--violet);background:var(--card)}

/* ⚠️ 디스코드 CTA는 사이트에서 가장 중요한 행동이다. 밝은 Violet으로 채워 어두운 배경에서 떠오르게 한다
   — Violet Deep이던 시절엔 페이지 대비가 2.6:1뿐이라 버튼 자체가 배경에 묻혔다(지금 6.9:1).
   Silk Sand를 안 쓴 이유: 그 색은 화면당 '가장 중요한 하나'에만 쓰는 브랜드 규칙이 있고
   이미 hero 스탯·마감 임박에 쓰고 있다. */
.nav .cta{background:var(--violet);color:var(--ink);border:1px solid var(--violet);
  padding:8px 15px;border-radius:6px;font-weight:700;white-space:nowrap;font-size:15px;
  display:inline-flex;align-items:center;gap:7px;flex-shrink:0}
.nav .cta:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.nav .cta svg{width:17px;height:17px;fill:currentColor;flex-shrink:0}

.nav-toggle{display:none;background:transparent;border:1px solid var(--line);border-radius:6px;
  color:var(--paper);width:42px;height:40px;cursor:pointer;align-items:center;justify-content:center;
  flex-shrink:0;padding:0}
.nav-toggle:hover{border-color:var(--violet)}
.nav-toggle svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none}
.nav-toggle .ico-x{display:none}
.nav-toggle[aria-expanded="true"] .ico-x{display:block}
.nav-toggle[aria-expanded="true"] .ico-bar{display:none}

/* 큰 기본 버튼도 같은 이유로 밝게 */
.btn.join{background:var(--violet);color:var(--ink);display:inline-flex;align-items:center;gap:9px}
.btn.join:hover{background:var(--paper);color:var(--ink)}
.btn.join svg{width:20px;height:20px;fill:currentColor}

@media (max-width:900px){
  .nav{flex-wrap:wrap;gap:10px}
  .nav-toggle{display:inline-flex}
  .nav .cta{margin-left:auto}
  /* 메뉴는 둘째 줄 전체를 쓰되, 접혀 있는 게 기본 */
  .nav .links{order:9;width:100%;margin:0;display:none;flex-direction:column;gap:6px;padding-top:4px}
  .nav .links.open{display:flex}
  .nav .links a{padding:12px 15px;text-align:center}
}
/* 좁은 화면에서도 CTA 글자는 최대한 살린다 — 아이콘만 남기면 '디스코드로 간다'는 게 덜 읽힌다.
   실측: 360px에서도 로고+CTA+햄버거가 한 줄에 들어간다. */
@media (max-width:400px){
  .nav{gap:8px}
  .nav .brand img{height:24px}
  .nav .cta{padding:8px 11px;font-size:13px;gap:5px}
  .nav .cta svg{width:15px;height:15px}
  .nav-toggle{width:38px;height:36px}
}
@media (max-width:330px){ .nav .cta .label{display:none} }

/* 채용공고 2단 레이아웃 — 목록 + 마감 캘린더 */
.jobs-layout{display:grid;grid-template-columns:1fr 300px;gap:28px;align-items:start;margin-top:28px}
.cal{background:var(--card);border:1px solid var(--line);padding:20px 18px;position:sticky;top:20px}
.cal h4{margin:0 0 14px;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:space-between}
.cal button{background:none;border:0;color:var(--violet);cursor:pointer;font-size:16px;padding:0 6px;font-family:inherit}
.cal button:disabled{color:var(--line);cursor:default}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-grid span{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:12px;
  font-family:'Space Grotesk',monospace;color:var(--sub);border-radius:4px}
.cal-grid span.hd{color:var(--line);font-size:10px;aspect-ratio:auto;padding:2px 0}
.cal-grid span.has{background:var(--violet-deep);color:#fff;font-weight:700;cursor:pointer}
.cal-grid span.has:hover{background:var(--violet);color:var(--ink)}
.cal-grid span.soon{background:var(--sand);color:var(--ink);font-weight:700;cursor:pointer}
.cal-grid span.today{outline:1px solid var(--sub)}
.cal-legend{margin-top:14px;font-size:12px;color:var(--sub);line-height:1.9}
.cal-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.job-row.hl{background:var(--card);outline:1px solid var(--violet)}

@media (max-width:820px){ .jobs-layout{grid-template-columns:1fr} .cal{position:static;order:-1} }

/* 섹션 공통 — 덱의 눈썹 → 제목 규칙 */
section{padding:72px 0}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.18em;color:var(--violet);margin-bottom:14px}
h1{font-size:clamp(34px,5vw,56px);font-weight:800;line-height:1.25;margin:0 0 18px}
h2{font-size:clamp(26px,3.6vw,38px);font-weight:800;line-height:1.3;margin:0 0 16px}
h3{font-size:20px;font-weight:700;margin:0 0 10px}
.lead{font-size:18px;color:var(--sub);max-width:640px}

/* 스탯 */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-top:36px}
.stat{background:var(--card);border:1px solid var(--line);padding:22px 20px}
.stat b{display:block;font-family:'Space Grotesk',sans-serif;font-size:40px;font-weight:700;color:var(--violet);line-height:1.1}
.stat.hero b{color:var(--sand)}
.stat span{font-size:14px;color:var(--sub)}
.measured{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;color:var(--sub);margin-top:14px}

/* 카드 그리드 */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:28px}
.card{background:var(--card);border:1px solid var(--line);padding:26px 24px;color:var(--paper);display:block}
.card:hover{border-color:var(--violet)}
.card h3{color:var(--paper)}
.card p{color:var(--sub);font-size:15px;margin:0}
.card .tag{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;color:var(--violet)}

/* 실크로드 노드 목록 */
.route{list-style:none;margin:28px 0 0;padding:0}
.route li{position:relative;padding:0 0 26px 34px;border-left:2px dotted var(--line);margin-left:8px}
.route li:last-child{border-left-color:transparent;padding-bottom:0}
.route li::before{content:"";position:absolute;left:-8px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--violet)}
.route li.now::before{background:var(--sand)}
.route .when{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;color:var(--violet)}
.route li.now .when{color:var(--sand)}

/* 표 */
table{width:100%;border-collapse:collapse;margin-top:20px;font-size:15px}
th,td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{color:var(--sub);font-weight:600;font-size:13px}
.due{font-family:'JetBrains Mono',monospace;font-size:13px;white-space:nowrap}
.due.soon{color:var(--sand);font-weight:700}

/* 버튼 */
.btn{display:inline-block;background:var(--violet-deep);color:#fff;padding:13px 26px;border-radius:6px;font-weight:700;font-size:16px;border:0;cursor:pointer}
.btn:hover{background:var(--violet);color:var(--ink)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--paper)}
.btn.ghost:hover{border-color:var(--violet);background:transparent;color:var(--violet)}

/* 안내 배너 */
.note{border:1px solid var(--line);border-left:3px solid var(--sand);background:var(--card);padding:14px 18px;font-size:14px;color:var(--sub);margin-top:24px}

footer{border-top:1px solid var(--line);padding:36px 0 60px;margin-top:40px;color:var(--sub);font-size:14px}
footer .links{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:14px}

@media (max-width:640px){
  .nav .links{gap:14px;font-size:13px}
  section{padding:48px 0}
}