/* 공용 스타일 — 홈(index.html)과 apps/<slug>/index.html이 함께 쓴다.
   색은 :root 변수만 바꾸면 전체에 반영된다. 다크 모드는 prefers-color-scheme로 자동. */
:root {
  --bg:#f4f8fc; --card:#ffffff; --fg:#1f2633; --muted:#5f6b7a; --line:#dfe6ef;
  --accent:#3f8fdc; --accent-2:#f5b740; --sky:#d4edfb;
  --shadow:0 10px 30px rgba(31,38,51,.08);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#121620; --card:#1b2130; --fg:#e8ecf3; --muted:#9aa5b5; --line:#2b3446;
    --accent:#6fb3f2; --accent-2:#f5c35c; --sky:#1e2a3b;
    --shadow:0 10px 30px rgba(0,0,0,.35);
  }
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg); color:var(--fg);
  font-family:"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,-apple-system,sans-serif;
  line-height:1.7; word-break:keep-all; -webkit-font-smoothing:antialiased;
}
a { color:var(--accent); }
img { max-width:100%; height:auto; display:block; }
figure { margin:0; }
.wrap { max-width:960px; margin:0 auto; padding:0 20px; }

/* ── 상단 바 ─────────────────────────────────────────── */
header.top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:17px; color:var(--fg); text-decoration:none; white-space:nowrap; }
.brand img { width:34px; height:34px; }
nav.menu { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
nav.menu a { font-size:14px; color:var(--muted); text-decoration:none; padding:6px 10px; border-radius:8px; }
nav.menu a:hover { background:var(--card); color:var(--fg); }
nav.menu a.yt { display:inline-flex; align-items:center; gap:7px; padding:5px 12px 5px 9px; border-radius:999px; background:var(--card); border:1px solid var(--line); color:var(--fg); font-weight:800; }
nav.menu a.yt:hover { border-color:#ff0000; color:#ff0000; }
nav.menu a.yt img { width:20px; height:14px; display:block; }

/* ── 히어로 ─────────────────────────────────────────── */
.hero { background:linear-gradient(180deg, var(--sky) 0%, var(--bg) 100%); padding:36px 0 28px; }
.hero-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center; }
.hero h1 { font-size:clamp(30px, 5vw, 44px); line-height:1.25; margin:0 0 12px; letter-spacing:-.5px; }
.hero h1 small { display:block; font-size:.5em; font-weight:700; color:var(--accent); margin-bottom:6px; }
.hero p.lead { font-size:17px; color:var(--muted); margin:0 0 22px; }
.badges { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
.badge { font-size:13px; padding:5px 11px; border-radius:999px; background:var(--card); border:1px solid var(--line); color:var(--muted); }
.cta { display:flex; gap:10px; flex-wrap:wrap; }
.btn {
  display:inline-flex; align-items:center; gap:10px; padding:13px 20px; border-radius:12px;
  text-decoration:none; font-weight:800; font-size:16px; border:1px solid transparent; transition:transform .1s;
}
.btn:active { transform:translateY(1px); }
.btn.primary { background:var(--accent); color:#fff; box-shadow:0 8px 20px rgba(63,143,220,.28); }
.btn.toss, .btn.ghost { background:var(--card); color:var(--fg); border-color:var(--line); }
.btn .ic { font-size:20px; line-height:1; }
.btn img.ic { width:22px; height:22px; flex:none; }
.btn.sm img.ic { width:16px; height:16px; }
.btn small { display:block; font-size:11px; font-weight:600; opacity:.75; line-height:1.2; }
.btn.sm { padding:9px 14px; font-size:14px; border-radius:10px; gap:6px; }
.hero-art { border-radius:18px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line); }
.note { font-size:13px; color:var(--muted); margin-top:12px; }

/* ── 섹션 공통 ───────────────────────────────────────── */
section { padding:34px 0; }
section.tight { padding-top:0; }
section h2 { font-size:clamp(22px, 3.2vw, 28px); margin:0 0 8px; letter-spacing:-.3px; }
section p.sub { margin:0 0 22px; color:var(--muted); }
.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:14px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:var(--shadow); }
.card .em { font-size:30px; line-height:1; margin-bottom:10px; }
.card h3 { margin:0 0 6px; font-size:17px; }
.card p { margin:0; color:var(--muted); font-size:15px; }

/* 단계 체인 (예: 돈 불리는 순서) */
.chain { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.chip { background:var(--card); border:1px solid var(--line); border-radius:999px; padding:8px 14px; font-weight:800; font-size:15px; }
.chip.coin { border-color:#d6b25a; }
.chip.bill { border-color:var(--accent); }
.chip.final { background:var(--accent-2); color:#3b2a00; border-color:transparent; }
.arrow { color:var(--muted); font-size:14px; }

/* 스크린샷 */
.shots { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.shot { background:var(--card); border:1px solid var(--line); border-radius:22px; padding:10px; box-shadow:var(--shadow); }
.shot img { border-radius:14px; width:100%; }
.shot figcaption { text-align:center; font-size:14px; color:var(--muted); padding:10px 0 2px; }

/* 안내 항목 */
.facts { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:12px; }
.fact { display:flex; gap:12px; align-items:flex-start; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; }
.fact .em { font-size:22px; line-height:1.3; }
.fact b { display:block; font-size:15px; }
.fact span { font-size:14px; color:var(--muted); }

/* 등급 표시 */
.rating { display:flex; align-items:center; gap:14px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin-top:14px; }
.rating .mark { width:52px; height:52px; border-radius:12px; background:#2eaf5a; color:#fff; display:grid; place-items:center; font-weight:900; font-size:13px; text-align:center; line-height:1.1; flex:none; }
.rating small { color:var(--muted); display:block; font-size:13px; }

/* ── 홈: 앱 목록 (한 줄에 앱 하나, 가로형 카드) ────────── */
.hero.slim { padding:26px 0 8px; }
.hero.slim h1 { font-size:clamp(24px, 3.6vw, 32px); margin-bottom:6px; }
.hero.slim p.lead { font-size:15px; margin-bottom:0; }
.app-list { display:grid; gap:14px; padding-top:16px; }
.featured { display:flex; gap:18px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:20px; box-shadow:var(--shadow); }
.featured img { width:84px; height:84px; border-radius:20px; flex:none; }
.featured > div { min-width:0; }
.featured h3 { margin:0 0 4px; font-size:20px; }
.featured h3 a { color:inherit; text-decoration:none; }
.featured h3 a:hover { color:var(--accent); }
.featured h3 .tag { font-size:13px; font-weight:700; }
.featured p { margin:0 0 12px; color:var(--muted); font-size:15px; }
.apps { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; }
.app-card { display:flex; flex-direction:column; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px; box-shadow:var(--shadow); }
.app-card .head { display:flex; gap:12px; align-items:center; }
.app-card .head img { width:56px; height:56px; border-radius:14px; flex:none; }
.app-card .head .ph { width:56px; height:56px; border-radius:14px; flex:none; display:grid; place-items:center; font-size:26px; background:var(--bg); border:1px dashed var(--line); }
.app-card h3 { margin:0; font-size:17px; }
.app-card .tag { font-size:12px; color:var(--muted); }
.app-card p { margin:0; color:var(--muted); font-size:14px; flex:1; }
.app-card .links { display:flex; gap:6px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
.app-card .links::-webkit-scrollbar { display:none; }
.app-card .links .btn { padding:8px 11px; font-size:13px; border-radius:9px; white-space:nowrap; flex:0 0 auto; }
.tag.live { color:#1f8f4e; font-weight:700; }
.tag.soon { color:var(--muted); }

/* ── 푸터 ────────────────────────────────────────────── */
footer { border-top:1px solid var(--line); padding:28px 0 40px; color:var(--muted); font-size:14px; }
footer .links { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
footer .links a { color:var(--fg); text-decoration:none; font-weight:700; }
footer .links a:hover { color:var(--accent); }
footer dl { display:grid; grid-template-columns:auto 1fr; gap:4px 14px; margin:0 0 12px; }
footer dt { font-weight:700; color:var(--fg); }
footer dd { margin:0; }

/* ── 모바일 ──────────────────────────────────────────── */
@media (max-width: 760px) {
  .hero-grid { grid-template-columns:1fr; gap:22px; }
  .hero-art { order:-1; }
  .shots { grid-template-columns:1fr; max-width:360px; margin:0 auto; }
  .featured { flex-direction:column; align-items:flex-start; }
  footer dl { grid-template-columns:1fr; gap:2px; }
  footer dt { margin-top:8px; }
}

/* ── 홈 카드 버튼: 좁은 화면에서는 스토어 버튼을 아이콘만 남겨 한 줄 유지 ── */
@media (max-width: 540px) {
  .featured .cta { flex-wrap:nowrap; gap:8px; }
  .featured .cta .btn.ghost { padding:9px 12px; }
  .featured .cta .btn.ghost img.ic { width:18px; height:18px; }
  .featured .cta .btn.ghost .lbl { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .featured .cta .cta-soon { display:none; }
  nav.menu a.yt { padding:6px 9px; }
  nav.menu a.yt .lbl { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}

/* ── 안내 토스트 (site.js가 PC에서 앱인토스 링크를 누를 때 띄운다) ── */
.toast { position:fixed; left:50%; bottom:28px; transform:translate(-50%, 12px); background:var(--fg); color:var(--bg); padding:12px 18px; border-radius:12px; font-size:14px; font-weight:700; box-shadow:var(--shadow); opacity:0; transition:opacity .2s, transform .2s; pointer-events:none; z-index:50; max-width:calc(100% - 40px); text-align:center; }
.toast.show { opacity:1; transform:translate(-50%, 0); }