/* MobiFolio 프로모션 사이트
   시안(Folio.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;   /* 스크린샷 테두리 */

  /* 글자 */
  --fg:           #e8ecf3;
  --fg-dim:       #a6b0c2;
  --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;
  justify-content: center;
  padding-block: 36px 40px;
}

/* 시안 좌표(590×380)를 컨테이너 비율(cqw)로 옮겨, 폭이 줄어도 구도가 그대로 유지된다 */
.stage {
  container-type: inline-size;
  position: relative;
  width: min(590px, 100%);
  aspect-ratio: 590 / 380;
}

.sleeve {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 64.407cqw;
  height: 64.407cqw;
  padding: 5.424cqw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 4px;
  background-color: var(--panel);
  background-image:
    linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 45%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px);
  box-shadow:
    0 30px 70px rgba(0,0,0,0.65),
    inset 0 0 0 1px rgba(255,255,255,0.07),
    inset 8px 0 12px -10px rgba(0,0,0,0.9);
}
.sleeve-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.label { font-size: max(8px, 1.695cqw); letter-spacing: 0.24em; font-weight: 600; }
.label-gold { color: var(--gold); }
.label-mute { color: var(--fg-faint); }

/* 오선지 */
.staff {
  width: 100%;
  height: 15.593cqw;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(224,180,91,0.55) 0px, rgba(224,180,91,0.55) 1px,
    rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3.051cqw);
  background-size: 100% 15.254cqw;
  background-repeat: no-repeat;
}

.sleeve-foot { display: flex; flex-direction: column; gap: 6px; }
.sleeve-title { font-size: max(24px, 7.458cqw); line-height: 1; color: #ffffff; }
.sleeve-sub { font-size: max(8px, 2.034cqw); letter-spacing: 0.18em; color: var(--fg-dim); font-weight: 500; }

.vinyl-slot {
  position: absolute;
  left: 35.593cqw;
  top: 0;
  z-index: 1;
  width: 64.407cqw;
  height: 64.407cqw;
  animation: pull-out 1.1s cubic-bezier(.2, .75, .25, 1) both;
}
.vinyl { position: absolute; inset: 0; animation: spin 8s linear infinite; }

.vinyl-disc, .vinyl-sheen { position: absolute; inset: 0; border-radius: 999px; }
.vinyl-disc {
  background: repeating-radial-gradient(circle at 50% 50%, #1b1f27 0px, #1b1f27 2px, #0f1218 3px, #0f1218 5px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.04);
}
.vinyl-sheen {
  background: conic-gradient(from 210deg,
    rgba(255,255,255,0) 0deg, rgba(255,255,255,0.09) 25deg, rgba(255,255,255,0) 60deg,
    rgba(255,255,255,0) 200deg, rgba(255,255,255,0.06) 225deg, rgba(255,255,255,0) 260deg);
}
.vinyl-label {
  position: absolute;
  inset: 32.1%;
  border-radius: 999px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: var(--gold);
  box-shadow: inset 0 0 0 6px rgba(0,0,0,0.12);
}
.vinyl-label-title { font-size: max(11px, 3.39cqw); color: var(--gold-ink); letter-spacing: 0.02em; }
.vinyl-label-sub { font-size: max(6px, 1.525cqw); letter-spacing: 0.22em; color: var(--gold-deep); font-weight: 600; }
.vinyl-spindle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(6px, 1.695cqw);
  height: max(6px, 1.695cqw);
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: var(--ink);
}

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pull-out { from { transform: translateX(-16%); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── 소개 ─────────────────────────────────────────── */
.intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.intro h1 {
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.2;
  color: #ffffff;
  text-wrap: balance;
}
.lede {
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.65;
  color: var(--fg-dim);
  max-width: 620px;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.meta { font-size: 13px; color: var(--fg-faint); font-variant-numeric: tabular-nums; }

/* ── 특징 3줄 ─────────────────────────────────────── */
.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: calc(var(--narrow) + var(--gutter) * 2);
  padding-top: 56px;
  padding-bottom: 96px;
}
.feature { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.feature-title { font-size: 18px; color: #ffffff; }
.feature-body { font-size: 14px; line-height: 1.6; color: var(--fg-mute); max-width: 34ch; }

/* ── 앱 화면 ──────────────────────────────────────── */
.screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  border-top: 1px solid var(--line);
  padding-top: clamp(56px, 8vw, 96px);
}
.section-head { display: flex; flex-direction: column; gap: 10px; }
.section-head-center { align-items: center; text-align: center; }
.section-head h2 { font-size: clamp(26px, 3.4vw, 36px); 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.65; color: var(--fg-dim); max-width: 560px; }

.screen figure { margin: 0; display: flex; flex-direction: column; gap: 12px; }

.shot {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid var(--line-image);
  box-shadow: 0 40px 90px rgba(0,0,0,0.6);
}
.shot-main { width: min(1040px, 100%); }

/* 큰 화면 아래 나란히 두 장 — 좁아지면 한 장씩 */
.shot-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 32px);
  width: min(1040px, 100%);
}
.shot-pair .shot { box-shadow: 0 24px 60px rgba(0,0,0,0.55); }

.shot-cap { font-size: 13.5px; line-height: 1.65; color: var(--fg-mute); max-width: 62ch; }
.shot-cap strong { color: var(--fg); font-weight: 600; }
.shot-cap em {
  font-style: normal;
  color: var(--gold);
  border: 1px solid rgba(224,180,91,0.35);
  border-radius: 5px;
  padding: 0 5px;
  font-size: 0.92em;
}

.shot-note { font-size: 12.5px; color: var(--fg-faint); text-align: center; }

@media (max-width: 720px) {
  .shot-pair { grid-template-columns: 1fr; }
}

/* ── 사용 순서 ────────────────────────────────────── */
.howto {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: calc(var(--narrow) + var(--gutter) * 2);
  padding-top: clamp(64px, 9vw, 96px);
}
/* 시작 전 준비 — 세 단계와 성격이 달라 금색 기운의 판으로 따로 띄운다 */
.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; }

@media (max-width: 760px) {
  .prereq { grid-template-columns: 1fr; align-items: start; }
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.step {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
}
.step-num { font-size: 32px; line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; }
.step-title { font-size: 20px; color: #ffffff; }
.step-body { font-size: 14px; line-height: 1.65; color: var(--fg-mute); }

/* ── 동작 방식 · 권한 ─────────────────────────────── */
.how-built {
  display: flex;
  flex-direction: column;
  gap: 36px;
  max-width: calc(var(--narrow) + var(--gutter) * 2);
  padding-top: clamp(64px, 9vw, 96px);
}
.how-built .section-lede { max-width: 68ch; }

.built-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
}

/* 왼쪽: 카드 없이 가는 선으로만 나눈다 — 오른쪽 '쓰지 않는 것' 하나만 판으로 띄우기 위해 */
.built-list { display: flex; flex-direction: column; gap: 0; margin: 0; }
.built-item { display: flex; flex-direction: column; gap: 8px; padding-block: 24px; border-top: 1px solid var(--line); }
.built-item:first-child { padding-top: 0; border-top: 0; }
.built-item:last-child { padding-bottom: 0; }
.built-term { font-size: 19px; color: #ffffff; }
.built-desc { margin: 0; font-size: 14px; line-height: 1.7; color: var(--fg-mute); }
.built-desc strong { color: var(--fg-dim); font-weight: 600; }

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

.built-not {
  padding: 28px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
}
.built-not-title { font-size: 18px; color: #ffffff; margin-bottom: 16px; }
.built-not-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.built-not-list li { display: flex; gap: 10px; font-size: 14px; line-height: 1.6; color: var(--fg-mute); }
.built-not-list strong { color: var(--fg); font-weight: 600; }
.built-not-list .mark { flex: none; color: var(--gold); font-size: 13px; line-height: 1.75; }

.built-note { font-size: 13px; line-height: 1.7; color: var(--fg-faint); }

@media (max-width: 760px) {
  .built-grid { grid-template-columns: 1fr; }
}

/* ── 마무리 ───────────────────────────────────────── */
.closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  padding-top: clamp(72px, 10vw, 112px);
  padding-bottom: 80px;
}
.closing h2 { font-size: clamp(28px, 3.8vw, 40px); line-height: 1.2; color: #ffffff; text-wrap: balance; }
.closing .cta-row { margin-top: 0; }

/* ── 푸터 ─────────────────────────────────────────── */
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-block: 28px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg-faint);
}

/* ── 좁은 화면 ────────────────────────────────────── */
@media (max-width: 900px) {
  .features, .steps { grid-template-columns: 1fr 1fr; }
  .steps .step:last-child { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .features, .steps { grid-template-columns: 1fr; gap: 20px; }
  .steps .step:last-child { grid-column: auto; }
  .features { padding-bottom: 72px; }
  .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 { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .vinyl { animation: none; }
  .vinyl-slot { animation: none; opacity: 1; transform: none; }
  .btn { transition: none; }
}