/* PhotoSpec — getphotospec.com
 *
 * 원칙(owner 지시 2026-08-04): 앱 첫 화면과 같은 다크 네이비/블랙 + 절제된 골드.
 *   과한 글로우·그라데이션·애니메이션 금지. 흔한 AI 스타트업 템플릿처럼 보이지 않게.
 *   → 골드는 얇은 선, 작은 라벨, 버튼 하나에만 쓴다. 큰 면적을 골드로 채우지 않는다.
 *   → radial glow, 배경 그라데이션, 스크롤 애니메이션 없음. 그림자는 폰 목업에만 최소로.
 *
 * 색은 앱과 동일한 브랜드 값이다(app/index.tsx · tools/brand/gen_icons.js 의 C).
 *
 * ★img 에 height:auto 는 필수다. <img width=640 height=1306> 속성이 있어서 이게 없으면
 *   가로만 줄고 세로가 원본으로 남아 2.8배 늘어난다(2026-08-03 실제 사고).
 */

@font-face {
  font-family: 'Playfair';
  src: url('../fonts/PlayfairDisplay-Regular.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Playfair';
  src: url('../fonts/PlayfairDisplay-SemiBold.ttf') format('truetype');
  font-weight: 600; font-display: swap;
}

:root {
  --bg: #06090f;
  --bg-2: #0b1220;
  --line: rgba(255, 255, 255, 0.10);
  --line-gold: rgba(201, 162, 75, 0.38);
  --gold: #c9a24b;
  --ink: #f2efe9;
  --muted: #9aa5b5;
  --maxw: 1080px;
  --serif: 'Playfair', Georgia, 'Times New Roman', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', 'Noto Sans KR', 'Hiragino Sans',
    'Microsoft YaHei', 'Noto Sans Devanagari', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* 접근성 — 키보드 포커스를 항상 보이게 한다. */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--bg-2); color: var(--ink); padding: 12px 18px; z-index: 200;
}
.skip:focus { left: 12px; top: 12px; }

/* ── 헤더 ─────────────────────────────────────────────────────────── */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: rgba(6, 9, 15, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.hdr .wrap { display: flex; align-items: center; gap: 12px; height: 62px; }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; margin-right: auto; }
.brand svg { width: 27px; height: 27px; flex: none; }
.brand b { font-family: var(--serif); font-weight: 600; font-size: 21px; letter-spacing: .2px; }
.brand b i { color: var(--gold); font-style: normal; }

/* ── 버튼 ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 18px; font: inherit; font-size: 15px;
  background: transparent; color: var(--ink);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: border-color .15s, background .15s;
}
.btn:hover { border-color: var(--line-gold); background: rgba(255, 255, 255, .04); }
.btn:active { background: rgba(255, 255, 255, .07); }
/* 골드는 '단 하나의 주 동작'에만. 그라데이션 없이 단색. */
.btn-primary {
  background: var(--gold); border-color: var(--gold); color: #14100a; font-weight: 600;
}
.btn-primary:hover { background: #d4ae5c; border-color: #d4ae5c; }
.btn-lg { padding: 14px 26px; font-size: 16px; border-radius: 12px; }
/* 아직 열 수 없는 경로 — 눌리지 않는다는 것이 보이게. */
.btn[aria-disabled='true'] {
  cursor: not-allowed; opacity: .55; color: var(--muted);
}
.btn[aria-disabled='true']:hover { border-color: var(--line); background: transparent; }
.btn .soon {
  font-size: 11px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--line-gold);
  border-radius: 5px; padding: 2px 6px; margin-left: 2px;
}

/* ── 언어 선택 ────────────────────────────────────────────────────── */
.lang-btn svg { width: 16px; height: 16px; }
.lang-cur { color: var(--gold); }
.sheet-bg {
  position: fixed; inset: 0; z-index: 100; display: none;
  background: rgba(3, 6, 12, .74);
  align-items: center; justify-content: center; padding: 22px;
}
.sheet-bg[data-open='1'] { display: flex; }
.sheet {
  width: 100%; max-width: 340px; max-height: 78vh; overflow-y: auto;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 8px;
}
/* ★이 제목만은 번역하지 않는다(앱과 동일 · owner 확정 2026-08-03):
   언어 선택기는 "지금 언어를 못 읽는 사람"이 쓰는 곳이라, 번역하면 실수로 낯선 언어를
   고른 사용자가 되돌아올 길이 막힌다. 목록은 이미 각 언어를 그 언어로 적는다. */
.sheet h2 {
  margin: 10px 0 10px; text-align: center; font-family: var(--sans);
  font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted);
}
.sheet button {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  background: none; border: 0; border-radius: 8px; cursor: pointer;
  padding: 12px 14px; font: inherit; font-size: 16px; color: var(--ink); text-align: left;
}
.sheet button:hover { background: rgba(255, 255, 255, .05); }
.sheet button[aria-current='true'] { color: var(--gold); }

/* ── 섹션 공통 ────────────────────────────────────────────────────── */
/* ★세로 리듬(owner 지시 2026-08-04: "스크롤하면 여백이 너무 많다").
 *   ★경계 여백 = padB(위 섹션) + padT(아래 섹션) 이다. 76px 은 실제로 **152px 짜리 띠**였다.
 *   이 한 줄을 고치면 페이지 전체가 움직이므로, 감으로 만지지 말고 아래 방법으로 다시 재라.
 *
 *   측정 방법(1280×900): 보이는 리프 요소(텍스트·이미지)의 y 범위를 합쳐 그 사이 빈틈을 더한다.
 *   실측 결과 —            전체        빈 구간            최대 빈구간
 *     76px (조정 전)     4,942px    1,953px (39.5%)      190px
 *     54px (1차)         4,421px    1,499px (33.9%)      139px
 *     46px (채택)        4,305px    1,345px (31.3%)      122px
 *   38px 이하는 시도하지 않았다 — 46px 에서 이미 프리미엄 톤이 조여지기 시작했다. */
section { padding: 46px 0; border-top: 1px solid var(--line); }
section:first-of-type { border-top: 0; }
.eyebrow {
  display: block; font-size: 11.5px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--gold); margin-bottom: 14px;
}
h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(33px, 4.6vw, 50px); line-height: 1.14;
  margin: 0 0 18px; letter-spacing: -.2px;
}
h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(27px, 3.4vw, 36px); line-height: 1.2; margin: 0 0 12px;
}
h3 { font-size: 17px; margin: 0 0 6px; font-weight: 600; }
.lede { font-size: clamp(16px, 1.6vw, 18px); color: var(--muted); margin: 0; max-width: 36em; }
.sec-head { max-width: 620px; margin-bottom: 26px; }
.sec-head p { color: var(--muted); margin: 0; }

/* ── 히어로 ───────────────────────────────────────────────────────── */
.hero { padding: 48px 0 54px; }
.hero .wrap { display: grid; gap: 36px; align-items: center; }
@media (min-width: 880px) { .hero .wrap { grid-template-columns: 1.08fr .92fr; gap: 56px; } }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.cta-note { font-size: 13.5px; color: var(--muted); margin: 14px 0 0; }

/* 폰 목업 — 그림자는 형태를 읽히게 하는 최소한만. 글로우 없음. */
.phone {
  width: min(280px, 74vw); margin: 0 auto;
  border: 1px solid var(--line); border-radius: 26px; padding: 7px;
  background: #11151d;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.phone img { border-radius: 20px; }
.phone-sm { width: min(216px, 62vw); border-radius: 22px; padding: 6px; }
.phone-sm img { border-radius: 17px; }

/* ── 기능 목록(여권/헤드샷) ───────────────────────────────────────── */
.split { display: grid; gap: 34px; align-items: center; }
@media (min-width: 880px) { .split { grid-template-columns: 1fr 1fr; gap: 56px; } }
.feat { list-style: none; margin: 20px 0 0; padding: 0; }
.feat li { display: flex; gap: 13px; padding: 13px 0; border-top: 1px solid var(--line); }
.feat li:first-child { border-top: 0; padding-top: 0; }
.feat svg { width: 19px; height: 19px; flex: none; color: var(--gold); margin-top: 3px; }
.feat p { margin: 0; color: var(--muted); font-size: 15.5px; }

.shots { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ── 사용 순서 ────────────────────────────────────────────────────── */
.steps { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps > div { background: var(--bg); padding: 22px 20px; }
.steps .n {
  font-family: var(--serif); font-size: 15px; color: var(--gold);
  display: block; margin-bottom: 12px;
}
.steps p { margin: 0; color: var(--muted); font-size: 15px; }

/* ── 개인정보 ─────────────────────────────────────────────────────── */
.priv { list-style: none; margin: 24px 0 0; padding: 0; }
.priv li { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 12px; color: var(--muted); font-size: 15.5px; }
.priv svg { width: 17px; height: 17px; flex: none; color: var(--gold); margin-top: 3px; }

/* ── 지원 규격 ────────────────────────────────────────────────────── */
.fmt-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.fmt-card {
  border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px;
}
.fmt-card b { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15.5px; }
.fmt-card span { display: block; color: var(--muted); font-size: 14px; margin-top: 6px; }
.fmt-card .flag { font-size: 19px; line-height: 1; }

/* ── 최종 CTA ─────────────────────────────────────────────────────── */
.final { text-align: center; }
.final .cta-row { justify-content: center; }
.final h2 { font-size: clamp(30px, 4vw, 42px); }

/* ★2026-08-04 제거: `.ba` 전후비교 **빈 점선 자리표시자**.
 *   "예시가 이 자리에 들어갑니다"라는 공사 메모가 라이브 사이트에 그대로 노출돼 있었다.
 *   가짜 이미지를 안 넣은 건 맞지만, 빈 자리를 공개한 것도 같은 실수다.
 *   실제 앱 처리 결과가 생기면 그때 진짜 이미지와 함께 스타일을 새로 만든다. */

/* ── 푸터 ─────────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--line); padding: 26px 0 32px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; }
footer nav { display: flex; gap: 20px; margin-left: auto; flex-wrap: wrap; }
footer a, footer small { color: var(--muted); font-size: 14px; text-decoration: none; }
footer a:hover { color: var(--ink); }

/* ── 360px 대응 ───────────────────────────────────────────────────── */
@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap { padding: 0 18px; }
  section { padding: 42px 0; }
  .hdr .wrap { gap: 8px; }
  .hdr .btn-primary { display: none; }   /* 히어로 CTA 가 바로 아래에 있다 */
  .brand b { font-size: 19px; }
  .btn { padding: 10px 13px; font-size: 14px; }
  .sec-head { margin-bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* 스크린리더 전용 텍스트 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* 푸터의 비활성 링크(페이지가 아직 없음) — 링크처럼 보이지 않게 */
footer [aria-disabled='true'] { color: var(--muted); opacity: .6; cursor: not-allowed; }

/* ── 출시 알림 신청 ────────────────────────────────────────────────── */
.notify {
  max-width: 460px; margin: 34px auto 0; padding-top: 26px;
  border-top: 1px solid var(--line); text-align: center;
}
.notify h3 { font-size: 17px; margin: 0 0 8px; }
.notify > p { color: var(--muted); font-size: 15px; margin: 0 0 20px; }
.notify-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.notify input[type='email'] {
  flex: 1 1 220px; min-width: 0;
  background: rgba(255, 255, 255, .04); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 15px; font: inherit; font-size: 15px;
}
.notify input[type='email']::placeholder { color: var(--muted); }
.notify input[type='email']:focus { border-color: var(--line-gold); outline: none; }
.notify input[type='email']:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* 응답 문구 — 성공/실패를 색으로 구분한다(색만으로 구분하지 않게 문구도 함께 바뀐다). */
.notify-msg { min-height: 1.4em; margin: 14px 0 0; font-size: 14.5px; color: var(--muted); }
.notify-msg[data-state='ok'] { color: var(--gold); }
.notify-msg[data-state='err'] { color: #e2a2a2; }

/* ── 규격 페이지 (tools/gen_spec_pages.js 가 생성) ─────────────────── */
.crumbs { font-size: 13.5px; color: var(--muted); margin-bottom: 18px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--gold); }
.spec-hero { padding: 40px 0 52px; }
.spec-hero .wrap { display: block; }

/* 규정 표 — 이 페이지의 본체다. 페이지마다 값이 실제로 다르다. */
table.spec { width: 100%; border-collapse: collapse; margin-bottom: 22px; }
table.spec th, table.spec td {
  text-align: left; padding: 14px 0; border-bottom: 1px solid var(--line);
  font-size: 15.5px; vertical-align: top;
}
table.spec th { width: 40%; font-weight: 600; padding-right: 18px; }
table.spec td { color: var(--muted); }
@media (max-width: 560px) {
  table.spec th, table.spec td { display: block; width: auto; border-bottom: 0; padding: 6px 0; }
  table.spec th { padding-top: 14px; }
  table.spec tr { display: block; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
}