/* 랜딩 페이지. 색은 src/theme.css의 토큰만 쓴다. 앱과 같은 팔레트다.
   테마는 보는 사람의 시스템 설정을 따른다. */
* { box-sizing: border-box; }

/* display를 지정한 요소는 hidden 속성만으로 안 사라진다. CSS가 더 세기 때문이다. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font: 400 17px/1.7 -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', system-ui, sans-serif;
  word-break: keep-all;
}

canvas { image-rendering: pixelated; display: block; }
a { color: var(--accent); }

/* 스크롤해도 설치 버튼이 늘 보이게 붙여둔다. 배경을 칠하지 않으면 본문이 비쳐 보인다. */
header {
  position: sticky; top: 0; z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--surface-border);
}
nav {
  max-width: 880px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.navright { display: flex; align-items: center; gap: 12px; }
.langs { display: flex; gap: 6px; }

.cta-sm {
  background: var(--accent); color: #fff; text-decoration: none;
  border: 1px solid var(--surface-border); border-radius: 999px;
  padding: 6px 16px; font-size: 14px; font-weight: 700; white-space: nowrap;
}
/* 언어는 이제 실제로 갈라진 페이지라(루트/en/) 버튼이 아니라 링크다.
검색엔진이 각각을 독립된 페이지로 색인하려면 진짜 <a href>여야 한다. */
.langs a {
  border: 1px solid var(--surface-border); background: transparent; color: var(--text-dim);
  border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 14px;
  text-decoration: none; display: inline-block;
}
/* 지금 보고 있는 언어. 진한 주황(--accent)은 설치 버튼과 세기가 같아 시선을 나눠 가진다.
   햄스터 몸 색을 쓰면 팔레트 안에 있으면서 한 단계 물러난다. */
.langs a[aria-current="page"] { background: var(--ham-body); border-color: var(--ham-body); color: var(--ham-outline); }

main { max-width: 880px; margin: 0 auto; padding: 0 24px 80px; }

.hero { text-align: center; padding: 56px 0 40px; }
.hero canvas { margin: 0 auto 28px; }
h1 { margin: 0 0 14px; font-size: 42px; line-height: 1.3; letter-spacing: -0.02em; }
.lead { margin: 0 auto; max-width: 30em; color: var(--text-dim); font-size: 19px; }

/* macOS/Windows 고르는 버튼. 언어 버튼(.langs)과 같은 생김새를 쓴다.
둘 다 "지금 보는 걸 바꾸는 토글"이라는 같은 역할이라서다. */
.oses { display: flex; gap: 6px; justify-content: center; margin: 22px 0 0; }
.oses button {
  border: 1px solid var(--surface-border); background: transparent; color: var(--text-dim);
  border-radius: 999px; padding: 6px 16px; font: inherit; font-size: 14px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.oses button.on { background: var(--ham-body); border-color: var(--ham-body); color: var(--ham-outline); }
.beta-badge {
  background: var(--accent); color: #fff; border-radius: 999px;
  padding: 1px 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
}

.cta {
  display: inline-block; margin: 30px 0 14px;
  background: var(--accent); color: #fff; text-decoration: none;
  border: 2px solid var(--surface-border); border-radius: 14px;
  padding: 13px 34px; font-weight: 700; font-size: 18px;
}
/* 아직 받을 수 없으면 눌러도 되는 것처럼 보이면 안 된다 */
.cta.soon { background: var(--surface-2); color: var(--text-dim); }
.specs { margin: 0; color: var(--text-dim); font-size: 14px; }
/* 윈도우를 골랐을 때만 뜨는 베타 안내. .notice보다 눈에 덜 띄게. 경고가 아니라 참고니까. */
.beta-note { margin: 10px 0 0; color: var(--text-dim); font-size: 13px; }

.ctas { display: flex; gap: 10px; justify-content: center; margin: 30px 0 14px; flex-wrap: wrap; }
.ctas .cta { margin: 0; }

/* 아직 못 받는다는 사실은 잠긴 버튼 대신 한 줄로 알린다. */
.notice { margin: 10px 0 0; color: var(--accent); font-size: 14px; }
.notice a { color: inherit; font-weight: 700; text-decoration: underline; }

/* 진짜 앱이 도는 화면을 소개 맨 앞에 둔다. 그림 한 장보다 이게 설명을 대신한다. */
.preview { margin: 0 0 44px; }
.preview iframe {
  width: 100%; aspect-ratio: 16 / 10; border: 1px solid var(--surface-border);
  border-radius: 14px; display: block; background: var(--surface-2);
}
.preview-note { margin: 10px 0 0; color: var(--text-dim); font-size: 14px; text-align: center; }

h2 { letter-spacing: -0.01em; }
.install h2, .privacy h2 { font-size: 26px; margin: 0 0 14px; }
#install { scroll-margin-top: 76px; }
.install ol { margin: 0 0 24px; padding-left: 1.3em; color: var(--text-dim); }
.install li { margin-bottom: 10px; }
.install li b { color: var(--text); }

.warn { border-top: 1px solid var(--line); padding: 12px 0; margin-bottom: 56px; }
.warn summary { cursor: pointer; font-size: 16px; }
.warn p { margin: 10px 0 2px; color: var(--text-dim); font-size: 15px; line-height: 1.7; }
footer p { margin: 0; }

@media (max-width: 720px) {
  h1 { font-size: 32px; }
  .hero { padding-top: 36px; }
}

/* 다운로드 버튼 아래 한 줄. 설치 마찰을 미리 알려주되 겁주지 않을 만큼만. */
.hint { margin: 6px 0 0; color: var(--text-dim); font-size: 13px; }

.shots { margin: 0 0 40px; }
/* 카드를 가로로 3등분하면 글자가 작아져 읽히지 않는다. 세로로 쌓아 스크롤하며 본다. */
.shots > div { display: grid; grid-template-columns: 1fr; gap: 20px; }
.shots img { width: 100%; border-radius: 12px; display: block; }

.faq { margin: 0 0 56px; }
.faq h2 { margin: 0 0 12px; font-size: 21px; }
.faq details {
  border-top: 1px solid var(--line);
  padding: 12px 0;
}
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-size: 16px; }
.faq p { margin: 10px 0 2px; color: var(--text-dim); font-size: 15px; line-height: 1.7; }

/* 푸터는 main 바깥이라 가운데 정렬 컨테이너를 따로 줘야 한다. */
footer {
  border-top: 1px solid var(--line);
  max-width: 880px; margin: 0 auto; padding: 28px 24px 48px;
  text-align: center;
}
.foot-brand { margin: 0 0 8px; font-size: 15px; }
.foot-note { margin: 0 0 8px; color: var(--text-dim); font-size: 15px; }
.foot-links { margin: 0 0 8px; }
.foot-copy { margin: 0; color: var(--text-dim); font-size: 13px; }

/* Product layout: the demo and the copy share the first screen. */
nav, main { max-width: 1160px; }
.hero { display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:center; text-align:left; padding:80px 0 90px; }
.hero h1 { font-size:clamp(34px,3.3vw,48px); line-height:1.2; letter-spacing:-.04em; }
.hero .lead { margin:0; font-size:18px; max-width:27em; }
.eyebrow { font-size:13px; font-weight:700; color:var(--accent); letter-spacing:.04em; margin:0 0 18px; }
.hero .oses,.hero .ctas { justify-content:flex-start; }
.hero .ctas { gap:12px; margin:24px 0 12px; }
.cta { font-size:16px; padding:12px 22px; }
.cta.secondary { color:var(--text); background:transparent; border-color:var(--line); font-weight:500; }
.cta:hover,.cta-sm:hover { filter:brightness(.94); }
.trust { color:var(--text-dim); font-size:13px; margin:10px 0; }
.hero .hint { font-size:12px; }
.hero-preview { min-width:0; background:var(--surface-2); border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:0 18px 45px var(--shadow); }
.preview-bar { display:flex; gap:16px; align-items:center; padding:14px 20px; font-size:12px; color:var(--text-dim); }
.preview-bar span:first-child { letter-spacing:5px; color:var(--ham-body); }
.hero-preview iframe { width:100%; height:400px; border:0; display:block; }
.hero-preview .preview-note { margin:0; padding:14px 20px; font-size:12px; border-top:1px solid var(--line); }
.features { border-top:1px solid var(--line); padding:64px 0; }
.features>h2,.wardrobe h2 { font-size:32px; letter-spacing:-.03em; margin:0 0 24px; }
.feature-row { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; padding:42px 0; }
.feature-row h3 { font-size:28px; margin:16px 0; letter-spacing:-.03em; }
.feature-row p { color:var(--text-dim); max-width:26em; }
.feature-row img { width:100%; max-width:460px; border-radius:18px; border:1px solid var(--line); }
.step-number { font-size:13px; color:var(--accent); font-weight:700; }
.feature-row.reverse>div { order:2; }
.routine { list-style:none; padding:24px; margin:0; background:var(--surface-2); border-radius:18px; }
.routine li { display:flex; gap:24px; align-items:center; padding:20px 12px; }
.routine li+li { border-top:1px solid var(--line); }
.routine b { font-size:38px; color:var(--accent); min-width:92px; }
.routine b span { font-size:14px; margin-left:5px; }
.routine li>span { font-size:17px; }
.wardrobe { background:var(--surface-2); border:1px solid var(--line); border-radius:24px; padding:56px 32px; text-align:center; margin-bottom:80px; }
.wardrobe>p { color:var(--text-dim); }
.looks { display:flex; justify-content:center; gap:48px; margin:28px 0; }
.looks figure { margin:0; }
.looks canvas { width:168px; height:224px; margin:0 auto 12px; }
.looks figcaption { font-size:14px; color:var(--text-dim); }
.gear-choices { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.gear-choices button,.text-button { font:inherit; font-size:14px; cursor:pointer; }
.gear-choices button { padding:8px 18px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--text); }
.gear-choices button[aria-pressed=true] { background:var(--ham-body); border-color:var(--ham-body); color:var(--ham-outline); }
.text-button { border:0; background:none; color:var(--text-dim); padding:12px; text-decoration:underline; text-underline-offset:4px; }
.small-note { font-size:13px; margin-bottom:0; }
#install { max-width:760px; margin:0 auto 56px; }
#install .specs { margin-bottom:24px; }
.warn { margin-bottom:0; }
.faq { max-width:760px; margin:0 auto 64px; }
.faq h2 { font-size:26px; margin-bottom:24px; }
.final-cta { text-align:center; border-top:1px solid var(--line); padding:56px 0 0; }
.final-cta h2 { font-size:32px; margin:0 0 12px; }
.final-cta p { color:var(--text-dim); }
.final-cta .cta { margin:12px 0; }
a:focus-visible,button:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
@media(max-width:900px) {
 .hero { gap:28px; padding:56px 0; }
 .hero-preview iframe { height:360px; }
 .feature-row { gap:32px; }
}
@media(max-width:720px) {
 nav { padding:12px 16px; gap:8px; }
 .brand { font-size:15px; gap:6px; }
 .brand canvas { width:30px; height:30px; }
 .navright { gap:6px; }
 .langs a { font-size:12px; padding:4px 7px; }
 .cta-sm { font-size:12px; padding:6px 10px; }
 main { padding:0 20px 48px; }
 .hero { grid-template-columns:1fr; gap:32px; padding:40px 0 56px; }
 .hero h1 { font-size:36px; }
 .hero .lead { font-size:17px; }
 .hero-preview iframe { height:380px; }
 .features { padding:40px 0; }
 .features>h2,.wardrobe h2,.final-cta h2 { font-size:26px; }
 .feature-row { grid-template-columns:1fr; gap:20px; padding:24px 0 36px; }
 .feature-row h3 { font-size:25px; }
 .feature-row.reverse>div { order:0; }
 .feature-row img { max-width:100%; }
 .wardrobe { padding:36px 16px; margin-bottom:48px; }
 .looks { gap:16px; }
 .looks canvas { width:120px; height:160px; }
 .routine { padding:12px 20px; }
 .final-cta { padding-top:36px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* OS choice is a form control; only download uses the accent fill. */
.os-picker { display:flex; align-items:center; gap:12px; margin-top:24px; font-size:13px; color:var(--text-dim); }
.os-picker select { font:inherit; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:8px 30px 8px 12px; cursor:pointer; }
.hero .ctas { flex-direction:column; align-items:flex-start; gap:16px; margin-top:16px; }
.demo-link { font-size:14px; font-weight:500; color:var(--text-dim); text-decoration:underline; text-underline-offset:5px; }
.demo-link:hover { color:var(--accent); }
select:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }

/* Let complete phrases set the rhythm instead of labels and numbered cards. */
.headline-line,.copy-line { display:block; }
h1,h2,h3 { text-wrap:balance; }
p { text-wrap:pretty; }
.hero { grid-template-columns:1.05fr 1fr; gap:64px; padding:88px 0 104px; }
.hero h1 { font-size:clamp(36px,3.7vw,52px); font-weight:650; line-height:1.26; letter-spacing:-.045em; margin-bottom:24px; }
.hero .lead { max-width:32em; line-height:1.85; font-size:17px; }
.hero-preview { border-radius:12px; box-shadow:0 12px 28px var(--shadow); }
.hero-preview .preview-note { text-align:left; padding:14px 18px; }
.features>h2 { font-size:25px; font-weight:500; margin-bottom:20px; }
.feature-row { padding:50px 0; gap:88px; }
.feature-row h3 { font-weight:600; font-size:30px; margin:0 0 20px; line-height:1.4; }
.feature-row p { margin:0; font-size:17px; line-height:1.9; }
.feature-row img { border:0; border-radius:0; }
.routine { border-radius:4px; background:transparent; padding:12px 24px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.routine b { font-size:34px; font-weight:500; }
.wardrobe { border:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:0; background:transparent; padding:64px 0; }
.wardrobe h2 { font-weight:600; margin-bottom:18px; line-height:1.45; }
.wardrobe>p { line-height:1.9; }
.gear-choices button { border-radius:6px; }
.langs a { border:0; border-radius:0; padding:5px 8px; }
.langs a[aria-current="page"] { background:transparent; color:var(--text); text-decoration:underline; text-underline-offset:5px; }
.cta,.cta-sm { border-radius:7px; }
.final-cta h2 { font-weight:600; line-height:1.5; }
@media(max-width:1000px) and (min-width:721px) {
 .hero { gap:32px; }
 .hero h1 { font-size:37px; }
 .hero .lead { font-size:16px; }
 .feature-row { gap:40px; }
}
@media(max-width:720px) {
 .hero { grid-template-columns:1fr; padding:48px 0 64px; gap:36px; }
 .hero h1 { font-size:clamp(30px,8.8vw,39px); line-height:1.3; margin-bottom:22px; }
 html[lang=en] .hero h1 { font-size:clamp(27px,7.8vw,35px); }
 .hero .lead { font-size:16px; }
 .feature-row { padding:32px 0; gap:24px; }
 .feature-row h3 { font-size:26px; }
 .feature-row p { font-size:16px; }
 .features>h2 { font-size:21px; }
 .wardrobe { padding:44px 0; }
 .wardrobe h2 { font-size:25px; }
 .wardrobe>p { font-size:15px; }
}

@media(max-width:720px) {
 .routine li { gap:16px; padding:18px 0; }
 .routine b { min-width:72px; }
 .routine li>span { min-width:0; flex:1; }
 .os-picker { flex-wrap:wrap; gap:8px 12px; }
 .hero-copy { min-width:0; }
}
@media(max-width:360px) {
 .navright .cta-sm { display:none; }
}