/* 모비웍스 프로모션 사이트
   시안(Works.dc.html)의 색·타이포·간격 값을 토큰으로 옮겨 놓은 것. 값은 여기서만 바꾼다. */

/* 제목용 — 부크크 명조. 이 페이지에 쓰이는 글자만 남긴 판(각 45KB 내외)이라 문구를 바꾸면
   `python tools/subset-font.py` 로 다시 구워야 새 글자가 나온다. */
@font-face {
  font-family: 'BookkMyungjo';
  src: url('./assets/fonts/BookkMyungjo-Lt.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BookkMyungjo';
  src: url('./assets/fonts/BookkMyungjo-Bd.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* 바탕 */
  --ink:          #0b1019;   /* 페이지 바탕 */
  --panel:        #121a28;   /* 카드 · 슬리브 */
  --line:         #1c2534;   /* 구분선 */
  --line-strong:  #232c3c;   /* 카드 테두리 */
  --line-image:   #2a3446;   /* 스크린샷 테두리 */
  --code-bg:      #0d131e;   /* 코드 블록 바탕 */

  /* 글자 */
  --fg:           #e8ecf3;
  --fg-dim:       #a6b0c2;
  --fg-strong:    #c9d1de;   /* 본문 중 힘주는 줄 · 코드 글자 */
  --fg-mute:      #8b95a7;
  --fg-faint:     #6f7a8e;

  /* 강조 (금색) */
  --gold:         #e0b45b;
  --gold-hi:      #f0c96e;
  --gold-ink:     #14110a;   /* 금색 위 글자 */
  --gold-deep:    #4a3b12;   /* 라벨 부제 */
  --line-btn:     #34405a;   /* 외곽선 버튼 테두리 */

  /* 타이포 */
  --display: "BookkMyungjo", "Noto Serif KR", "Nanum Myeongjo", Georgia, serif;
  --sans: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  /* 레이아웃 */
  --page: 1280px;
  --gutter: clamp(20px, 5vw, 64px);
  --narrow: 960px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  position: relative;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* 한글은 어절 단위로 끊는다 — 없으면 「악기를 고르 / 고,」처럼 낱말 중간에서 잘린다.
     대신 줄보다 긴 낱말(긴 영문·경로)은 넘치지 않게 끊어 준다. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

img { max-width: 100%; }

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-hi); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.display { font-family: var(--display); font-weight: 700; }

h1, h2, h3 { margin: 0; text-wrap: pretty; }
p { margin: 0; }

/* 히어로 뒤 금색 번짐 */
.glow {
  position: absolute;
  inset: 0 0 auto 0;
  height: 960px;
  pointer-events: none;
  background: radial-gradient(circle at 50% 42%, rgba(224, 180, 91, 0.16) 0%, rgba(224, 180, 91, 0) 48%);
}

/* 가로 폭·좌우 여백은 이 한 곳에서만 준다 */
.wrap {
  position: relative;
  width: min(var(--page), 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ── 버튼 ─────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn-sm { height: 40px; padding: 0 16px; font-size: 14px; }

.btn-gold { background: var(--gold); color: var(--gold-ink); }
.btn-gold:hover { background: var(--gold-hi); color: var(--gold-ink); }

.btn-line { background: transparent; color: var(--fg); border-color: var(--line-btn); }
.btn-line:hover { border-color: var(--gold); color: var(--fg); }

/* ── 상단 바 ──────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  padding-block: 12px;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 11px; color: inherit; min-width: 0; }
.brand:hover { color: inherit; }
.brand-mark { width: 34px; height: 34px; border-radius: 8px; flex: none; }
.brand-text { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; min-width: 0; }
.brand-name { font-size: 20px; color: #ffffff; }
.brand-tag { font-size: 11px; letter-spacing: 0.2em; color: var(--gold); font-weight: 600; }

.topnav { display: flex; align-items: center; gap: clamp(16px, 3vw, 28px); }
.topnav-link { font-size: 14px; font-weight: 500; color: var(--fg-dim); }
.topnav-link:hover { color: var(--fg); }

/* 모비공방 롤오버 — 마우스를 올리거나(hover), 탭·키보드로 열 수 있다(open / focus-within) */
.menu { position: relative; }
.menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 2px;
  background: none;
  border: 0;
  font-family: var(--sans);
  line-height: 1;
  cursor: pointer;
}
.menu-chev { transition: transform .16s ease; }
.menu:hover .menu-chev,
.menu:focus-within .menu-chev,
.menu.open .menu-chev { transform: rotate(180deg); }

.menu-panel {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  z-index: 20;
  min-width: 232px;
  padding: 6px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  box-shadow: 0 20px 44px rgba(0,0,0,0.55);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
/* 방아쇠와 패널 사이 틈에서 hover 가 끊기지 않게 다리를 놓는다 */
.menu-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }

.menu:hover .menu-panel,
.menu:focus-within .menu-panel,
.menu.open .menu-panel { opacity: 1; visibility: visible; transform: none; }

.menu-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 11px;
  border-radius: 8px;
  color: var(--fg);
}
.menu-item:hover, .menu-item:focus-visible { background: rgba(224,180,91,0.09); color: var(--fg); }
.menu-item-name { font-size: 14px; font-weight: 600; }
.menu-item:hover .menu-item-name { color: var(--gold-hi); }
.menu-item-sub { font-size: 12px; color: var(--fg-faint); }

/* ── 히어로: 끝없이 도는 고리 ─────────────────────── */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  padding-top: clamp(24px, 4vw, 48px);
}

/* 시안의 440x293 을 좁은 화면에서 줄인다 — viewBox 가 비율을 잡아 준다.
   그림자는 <svg> 바깥쪽에 건다 — path 에 걸면 SVG 필터 영역에서 잘려 네모난 자국이 남는다. */
.loop-mark { width: min(440px, 72vw); height: auto; filter: drop-shadow(0 18px 42px rgba(0, 0, 0, 0.55)); }

/* 고리를 따라 도는 빛. pathLength=100 이라 dashoffset -100 이 한 바퀴다. */
@keyframes flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
.loop-trail, .loop-head { animation: flow 4.5s linear infinite; }

.hero h1 {
  margin-top: clamp(8px, 2vw, 24px);
  font-size: clamp(30px, 5vw, 50px);
  line-height: 1.2;
  color: #ffffff;
}
.lede {
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.65;
  color: var(--fg-dim);
  max-width: 640px;
}
.cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.meta { font-size: 13px; color: var(--fg-faint); font-variant-numeric: tabular-nums; }

/* 다운로드 버튼 아래 저장소 링크 */
.repo-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--fg-faint);
}
.repo-link:hover { color: var(--gold-hi); }
.repo-link svg { width: 15px; height: 15px; fill: currentColor; flex: none; }

/* ── 소개 ─────────────────────────────────────────── */
.intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  padding-top: clamp(64px, 9vw, 104px);
}
.intro p { max-width: 720px; font-size: clamp(16px, 1.7vw, 18px); line-height: 1.85; }
.intro-lead { color: var(--fg-strong); }
.intro-body { color: var(--fg-dim); }

/* ── 공통: 절 머리말 ──────────────────────────────── */
.section-head { display: flex; flex-direction: column; gap: 10px; }
.section-head h2 { font-size: clamp(26px, 3.4vw, 36px); color: #ffffff; }
.section-head h3 { font-size: clamp(22px, 2.6vw, 28px); line-height: 1.3; color: #ffffff; }
.eyebrow { font-size: 12px; letter-spacing: 0.2em; color: var(--gold); font-weight: 600; }
.section-lede { font-size: clamp(15px, 1.5vw, 16px); line-height: 1.75; color: var(--fg-dim); max-width: 720px; }

/* ── 공통: 카드 · 스크린샷 ────────────────────────── */
.card {
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
}

.shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--line-image);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
}
figure { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.shot-cap { font-size: 13.5px; line-height: 1.65; color: var(--fg-faint); }

/* ── 메인 화면 ────────────────────────────────────── */
.screen { padding-top: clamp(64px, 9vw, 104px); }
.shot-main { align-items: center; }
.shot-main .shot-cap { text-align: center; font-size: 14px; }

/* ── 주요 기능 ────────────────────────────────────── */
.features {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: clamp(72px, 10vw, 112px);
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.feature { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 3vw, 32px); }
.feature-title { font-size: 22px; color: #ffffff; }
.feature-body { font-size: 15px; line-height: 1.75; color: var(--fg-dim); }

/* ── 그룹: 글 + 그림 ──────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4.5vw, 56px);
  align-items: center;
  padding-top: clamp(72px, 10vw, 112px);
}
.split-text { display: flex; flex-direction: column; gap: 14px; }
.split-title { font-size: clamp(22px, 2.6vw, 28px); line-height: 1.3; color: #ffffff; }
.split-body { font-size: 16px; line-height: 1.75; color: var(--fg-dim); }
.split .shot { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); }

/* ── 오버레이 ─────────────────────────────────────── */
.overlay {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-top: clamp(72px, 10vw, 112px);
}
.shot-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.shot-pair .shot { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); }

/* ── 신뢰 ─────────────────────────────────────────── */
.trust {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: clamp(80px, 11vw, 128px);
  margin-top: clamp(80px, 11vw, 128px);
  border-top: 1px solid var(--line);
}
.trust-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 56px);
  align-items: start;
}
/* 왼쪽은 카드 없이 가는 선으로만 나눈다 — 오른쪽 그림 하나만 띄우기 위해 */
.trust-list { display: flex; flex-direction: column; margin: 0; }
.trust-item { display: flex; flex-direction: column; gap: 8px; padding-block: 24px; border-top: 1px solid var(--line); }
.trust-item:first-child { padding-top: 0; border-top: 0; }
.trust-item:last-child { padding-bottom: 0; }
.trust-term { font-size: 19px; color: #ffffff; }
.trust-desc { margin: 0; font-size: 15px; line-height: 1.75; color: var(--fg-dim); }
.trust-shot .shot { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); }
.trust-shot .shot-cap { line-height: 1.6; }

.mono {
  font-family: ui-monospace, "Cascadia Mono", Consolas, "D2Coding", monospace;
  font-size: 0.92em;
  color: var(--fg-strong);
  word-break: break-all;
}

/* ── 시작 전에 한 번: AI 커넥터 ───────────────────── */
.prereq-sec { padding-top: clamp(72px, 10vw, 112px); }
.prereq {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 32px);
  align-items: center;
  padding: 22px;
  border-radius: 14px;
  background: rgba(224, 180, 91, 0.05);
  border: 1px solid rgba(224, 180, 91, 0.18);
}
.prereq-shot {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
}
.prereq-text { display: flex; flex-direction: column; gap: 8px; }
.prereq-tag { font-size: 11.5px; letter-spacing: 0.18em; color: var(--gold); font-weight: 600; }
.prereq-title { font-size: 20px; color: #ffffff; }
.prereq-body { font-size: 14px; line-height: 1.7; color: var(--fg-mute); }
.prereq-body strong { color: var(--fg-dim); font-weight: 600; }

/* ── 첫 실행 경고 ─────────────────────────────────── */
.notice { padding-top: clamp(72px, 10vw, 112px); }
.notice-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(28px, 4vw, 40px);
  border-color: rgba(224, 180, 91, 0.28);
}
.notice-title { font-size: clamp(21px, 2.4vw, 26px); color: #ffffff; }
.notice-body { font-size: 16px; line-height: 1.8; color: var(--fg-dim); }
.notice-body-strong { color: var(--fg-strong); }

.code-block { display: flex; flex-direction: column; gap: 10px; }
.code-label { font-size: 13px; color: var(--fg-faint); }
.code {
  margin: 0;
  padding: 16px 18px;
  border-radius: 10px;
  background: var(--code-bg);
  border: 1px solid var(--line-strong);
  font-size: 14px;
  line-height: 1.7;
  color: var(--fg-strong);
  overflow-x: auto;
}
.code code { font: inherit; }
/* 해시는 64자라 좁은 화면에서 줄바꿈을 허용한다 */
.code:has([data-meta="sha256"]) code { word-break: break-all; white-space: pre-wrap; }

/* ── 다운로드 ─────────────────────────────────────── */
.download { padding-top: clamp(72px, 10vw, 112px); }
.download-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: clamp(32px, 5vw, 56px);
  text-align: center;
}
.download-card h2 { font-size: clamp(26px, 3.2vw, 34px); color: #ffffff; }
.download-card .cta-row { margin-top: 8px; }
.download-body { font-size: 15px; line-height: 1.8; color: var(--fg-dim); max-width: 620px; }
.download-note { font-size: 15px; line-height: 1.8; color: var(--fg-mute); }

/* ── 면책 ─────────────────────────────────────────── */
.footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: clamp(64px, 9vw, 96px);
  padding-block: 32px 64px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.8;
  color: var(--fg-faint);
}
.footer p { max-width: 900px; }

/* ── 좁은 화면 ────────────────────────────────────── */
@media (max-width: 860px) {
  .trust-grid { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .prereq { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 720px) {
  .feature-grid, .shot-pair { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  /* 시안의 강제 줄바꿈은 넓은 화면용이다 — 좁은 화면에서는 「마비노기 모바일 생활 작업,」
     한 줄이 가로를 넘겨 페이지 전체가 밀린다. 끄고 어절 단위로 흐르게 둔다. */
  .hero h1 br { display: none; }
  .brand-mark { width: 30px; height: 30px; }
  .brand-tag { font-size: 10px; }
  .btn { width: 100%; }
  .btn-sm { width: auto; }
  .cta-row { width: 100%; max-width: 360px; }
  .footer { padding-bottom: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .loop-trail, .loop-head { animation: none; }
  .btn { transition: none; }
}