/* 모아 랜딩 — 앱과 같은 Black · Lime
   앱 토큰: paper #050505 · wash #18191b · raised #222426 · border #2c2e30
            ink #f5f5f5 · secondary #a3a5aa · accent #e4ff55 · 모서리 12~16 · 시스템 폰트
   이 파일은 모아 랜딩(/screenshot-organizer/)에서만 불린다. */

:root {
  --booth: #050505;
  --booth-deep: #050505;
  --booth-line: #2c2e30;
  --enamel: #f5f5f5;
  --paper: #050505;
  --paper-2: #0d0d0e;
  --card: #18191b;
  --ink: #f5f5f5;
  --ink-2: #cfd0d3;
  --muted: #a3a5aa;
  --rule: #2c2e30;
  --amber: #e4ff55;
  --amber-soft: #e4ff55;
  --signal: #ff8a6b;
  --radius: 16px;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Apple SD Gothic Neo", "Pretendard Variable",
    Pretendard, "Segoe UI", "Noto Sans KR", system-ui, sans-serif;
  color-scheme: dark;
}
body[data-app="moa"] { --accent: #e4ff55; --accent-ink: #050505; --accent-ground: #121405; }

html, body { background: #050505; color: var(--ink); }
::selection { background: #e4ff55; color: #050505; }
:focus-visible { outline-color: #e4ff55; }

/* 머리 — 검정 바, 가는 선 하나 */
.masthead { background: rgba(5, 5, 5, .92); background-image: none; border-bottom: 1px solid var(--rule); }
.plate { border: 1px solid var(--rule); border-radius: 12px; box-shadow: none; letter-spacing: 0; }
.masthead nav a { color: var(--muted); opacity: 1; }
.masthead nav a:hover, .masthead nav a[aria-current] { color: #f5f5f5; border-bottom-color: #e4ff55; }
.lang { border: 1px solid var(--rule); background: #18191b; }
.masthead nav .lang a { color: var(--muted); }
.masthead nav .lang a[aria-current] { background: #e4ff55; color: #050505; }
.crumbs a { border-bottom-color: var(--rule); }

/* 히어로 — 앱 첫 화면처럼 검정, 라임은 한 곳에만 */
.hero {
  background: #050505;
  background-image: radial-gradient(52% 70% at 82% 28%, rgba(228, 255, 85, .09), transparent 62%);
  border-bottom: 1px solid var(--rule);
  padding-block: 64px 72px;
}

.hero h1 { font-weight: 800; letter-spacing: -.045em; }
.hero .lede { color: #cfd0d3; }
.hero-facts li { color: var(--muted); }
.hero-facts li::before { background: #e4ff55; width: 6px; height: 6px; border-radius: 50%; top: .72em; }
.hero-shot {
  border: 1px solid #2c2e30;
  border-radius: 30px;
  box-shadow: 0 0 0 7px #0d0d0e, 0 0 0 8px #2c2e30, 0 40px 90px rgba(228, 255, 85, .07);
}

/* 버튼 — 앱의 라임 버튼과 회색 버튼 */
.btn { border-radius: 12px; font-weight: 700; }
.btn-primary { background: #e4ff55; border-color: #e4ff55; color: #050505; }
.btn-primary:hover { background: #d4ef45; border-color: #d4ef45; }
.btn-ghost, .btn-line { background: #18191b; border: 1px solid var(--rule); color: #f5f5f5; opacity: 1; }
.btn-ghost:hover, .btn-line:hover { border-color: #e4ff55; color: #e4ff55; background: #18191b; }
.btn[aria-disabled="true"] { background: transparent; border: 1px dashed #3a3c3f; color: var(--muted); opacity: 1; }
.btn-solid { background: #e4ff55; border-color: #e4ff55; color: #050505; }

/* 구획 */
.band-tint { background: #0d0d0e; border-color: var(--rule); }
h2 { color: #f5f5f5; letter-spacing: -.035em; }
.sec-label { color: #e4ff55; }

/* 증거 — 화면은 테두리 한 줄로만 */
.screens img { border: 1px solid var(--rule); border-radius: 22px; box-shadow: none; }
.screens figcaption { color: var(--muted); }
.proof-num { background: #e4ff55; color: #050505; font-size: 13px; width: 28px; height: 28px; }

/* 사용법 — 앱 목록 셀 */
.steps li { background: #18191b; border: 1px solid var(--rule); }
.steps li::before { background: #e4ff55; color: #050505; }
.steps p { color: var(--muted); }

/* 장단점 */
.panel { background: #18191b; border: 1px solid var(--rule); }
.panel.good { border-top: 3px solid #e4ff55; }
.panel.bad { border-top: 3px solid #ff8a6b; }
.panel li { color: #cfd0d3; }

/* 표·상태 */
.status-row, .table-scroll { background: #18191b; border: 1px solid var(--rule); }
thead th { background: #222426; color: #f5f5f5; }
th, td { border-bottom-color: var(--rule); }
tbody th { color: #f5f5f5; }
td { color: #cfd0d3; }
.units { color: var(--muted); }
.units i { border-color: #3a3c3f; }
.units i.on { background: #e4ff55; border-color: #e4ff55; }

/* FAQ — 앱의 접히는 셀 */
.faq { gap: 0; border-top: 1px solid var(--rule); }
.faq details { background: transparent; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: 6px 2px; }
.faq details[open] summary { color: #e4ff55; }
.faq summary { color: #f5f5f5; }
.faq summary::before { color: #e4ff55; }
.faq details p { color: #cfd0d3; }

/* 관련 글 */
.links-list a { border-bottom-color: var(--rule); }
.links-list a:hover { background: #111213; }
.links-list span { color: var(--muted); }
.links-list em { color: #e4ff55; border-color: #3a3d20; background: #121405; }

/* 개인정보 띠 */
.privacy-strip { background: #0d0d0e; border: 1px solid var(--rule); color: #cfd0d3; }
.privacy-strip strong { color: #e4ff55; }
.privacy-strip a { color: #f5f5f5; }

/* 바닥 */
.site-footer { background: #050505; background-image: none; border-top: 1px solid var(--rule); color: var(--muted); }
.site-footer h2 { color: #e4ff55; }
.site-footer a { color: #f5f5f5; border-bottom-color: var(--rule); }
.site-footer a:hover { border-bottom-color: #e4ff55; }
.site-footer .fine { color: #7d7f84; }

/* ── 알라미식 부품: 검정 위 짙은 회색 면, 라임은 라벨에만 ── */
.hero-center { padding-block: 64px 0; overflow: hidden; }
.hero-sub { color: #cfd0d3; }
.chips li { background: #18191b; border: 1px solid var(--rule); color: #f5f5f5; }
.float { background: #18191b; border: 1px solid var(--rule); box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 0 30px rgba(228, 255, 85, .06); }
.stage .hero-shot { margin-bottom: -40px; }
.intro-label, .feature-label { color: #e4ff55; }
.feature { background: #111213; border: 1px solid var(--rule); }
.feature figure img { border: 1px solid var(--rule); border-bottom: 0; }
.howto li, .stats li { background: #111213; border: 1px solid var(--rule); }
.howto p, .stats span { color: var(--muted); }
.howto .n { color: #e4ff55; }
.panel.good, .panel.bad { border-top: 1px solid var(--rule); }
.privacy-strip.has-icon strong { color: #e4ff55; }