/* ── 앱과 동일한 팔레트 (frontend/constants/theme.ts) ────────────
   라이트/다크 양쪽을 앱 토큰 그대로 쓴다. accent 는 양쪽 공통(#ff6933). */
:root{
  --bg:#FCFAF8; --surface:#FFFFFF; --card:#FFFFFF; --border:#E5E5E5;
  --text:#0F172A; --text-sub:#475569; --text-muted:#94A3B8;
  --accent:#ff6933; --accent-text:#FFFFFF; --accent-bg:rgba(255,105,51,.08);
  --outline:#111111; --shadow:0 2px 0 var(--outline);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0B0B0D; --surface:#111111; --card:#1D1D1D; --border:#2A2A2A;
    --text:#FFFFFF; --text-sub:#C0C0C0; --text-muted:#999999;
    --accent-text:#111111; --outline:#FFFFFF;
  }
}
:root[data-theme="dark"]{
  --bg:#0B0B0D; --surface:#111111; --card:#1D1D1D; --border:#2A2A2A;
  --text:#FFFFFF; --text-sub:#C0C0C0; --text-muted:#999999;
  --accent-text:#111111; --outline:#FFFFFF;
}
:root[data-theme="light"]{
  --bg:#FCFAF8; --surface:#FFFFFF; --card:#FFFFFF; --border:#E5E5E5;
  --text:#0F172A; --text-sub:#475569; --text-muted:#94A3B8;
  --accent-text:#FFFFFF; --outline:#111111;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:'DM Sans',-apple-system,sans-serif;-webkit-font-smoothing:antialiased;
  line-height:1.6}
h1,h2,h3{margin:0;line-height:1.15;text-wrap:balance}
p{margin:0}
img{display:block;max-width:100%;height:auto}
a{color:inherit}

.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.serif{font-family:'DM Serif Display',serif;font-weight:400}
.mono{font-family:'JetBrains Mono',monospace}

/* 앱의 Bold-Outline 스타일 — 굵은 테두리 + 오프셋 그림자 */
.card{background:var(--card);border:2px solid var(--outline);border-radius:16px;
  box-shadow:var(--shadow)}
.shot{border:2px solid var(--outline);border-radius:20px;overflow:hidden;
  background:var(--card);box-shadow:0 3px 0 var(--outline)}

.btn{display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:var(--accent-text);font-weight:700;
  border:2px solid var(--outline);border-radius:999px;padding:14px 28px;
  cursor:pointer;text-decoration:none;font-size:15px;
  box-shadow:0 3px 0 var(--outline);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--outline)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--outline)}

input[type=email]{flex:1;min-width:0;background:var(--surface);color:var(--text);
  border:2px solid var(--outline);border-radius:999px;padding:14px 20px;
  font-size:15px;font-family:inherit;outline:none}
input[type=email]::placeholder{color:var(--text-muted)}
input[type=email]:focus{border-color:var(--accent)}

header{position:fixed;top:0;left:0;right:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 85%,transparent);
  backdrop-filter:blur(12px);border-bottom:2px solid var(--outline)}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:700;font-size:24px;letter-spacing:-.02em}
.dot{color:var(--accent)}

/* 언어 토글 — 공식 언어는 영어와 한국어 둘뿐이다. */
.lang{display:inline-flex;border:2px solid var(--outline);border-radius:999px;
  overflow:hidden;font-size:12px;font-weight:700;font-family:'JetBrains Mono',monospace}
.lang a{padding:7px 11px;text-decoration:none;color:var(--text-sub);line-height:1}
.lang a[aria-current="true"]{background:var(--accent);color:var(--accent-text)}

.eyebrow{display:inline-block;font-size:11px;letter-spacing:.18em;
  color:var(--accent);border:2px solid var(--accent);border-radius:999px;
  padding:5px 12px;margin-bottom:20px}
.rule{width:56px;height:3px;background:var(--accent);border-radius:2px}

.exp{display:grid;grid-template-columns:1fr;gap:40px;align-items:center;
  padding:56px 0;border-top:2px solid var(--border)}
@media(min-width:900px){
  .exp{grid-template-columns:1fr 1fr;gap:64px;padding:80px 0}
  .exp.flip .exp-text{order:2}
}
.tag{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
  border:2px solid var(--outline);border-radius:999px;padding:6px 14px;margin-bottom:18px}
.lede{color:var(--text-sub);margin-bottom:22px}
.points{list-style:none;padding:0;margin:0;color:var(--text-sub);display:grid;gap:10px}

/* align-items:start 가 없으면 짧은 쪽 .shot 박스가 행 높이만큼 늘어나
   이미지 아래에 빈 카드 여백이 생긴다. */
.shots2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.shots2 .shot:nth-child(2){margin-top:32px}

/* 히어로 스크린샷 — 좁은 화면 2열, 넓어지면 4열로 펴서 한 장이 과하게 커지지 않게 한다.
   폰 목업이 한 장에 300px 을 넘으면 실제 기기보다 커 보인다. */
.hero-shots{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
  margin-top:56px;align-items:start}
.hero-shots .shot:nth-child(even){margin-top:28px}
@media(min-width:760px){
  .hero-shots{grid-template-columns:repeat(4,1fr);gap:20px;margin-top:64px}
}

.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;text-align:center;
  padding:36px 0;border-top:2px solid var(--outline);border-bottom:2px solid var(--outline)}
@media(min-width:700px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat-n{font-family:'JetBrains Mono',monospace;font-size:32px;font-weight:700;color:var(--accent)}
.stat-l{font-size:13px;color:var(--text-sub);margin-top:4px}

details{margin-bottom:12px}
summary{cursor:pointer;font-weight:700;display:flex;justify-content:space-between;
  align-items:center;list-style:none}
summary::-webkit-details-marker{display:none}
.plus{color:var(--accent);font-size:20px;transition:transform .2s}
details[open] .plus{transform:rotate(45deg)}

.rise{opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s}
.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}}

.marq-wrap{overflow:hidden;padding:28px 0;border-top:2px solid var(--border);
  border-bottom:2px solid var(--border)}
.marq{display:flex;width:max-content;animation:slide 46s linear infinite}
.marq span{padding-right:44px;color:var(--text-muted);font-family:'JetBrains Mono',monospace;font-size:14px}
@keyframes slide{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marq{animation:none}}

.theme-btn{background:none;border:2px solid var(--outline);border-radius:999px;
  width:36px;height:36px;cursor:pointer;color:var(--text);font-size:15px;line-height:1}