/* 고민버리기 소개 사이트
   색·비율·타이포는 전부 gomin/docs/11-design-system.md 에서 가져왔다.
   여기에 새 색을 만들지 마라 — 앱과 어긋나는 순간 사이트가 튄다.

   페이지 전체가 "이어지는 하늘" 한 장이다 (스토어 스크린샷과 같은 안).
   위가 깊은 밤(#0B0D14), 아래가 동틀 녘(#45657E). 스크롤이 곧 시간이다. */

:root{
  /* 하늘 — 스토어 5판의 가로 그라디언트를 세로로 세운 것. 값은 그대로다 */
  --sky-0:#0B0D14;  /* night   깊은 밤 */
  --sky-1:#13202F;
  --sky-2:#22394F;
  --sky-3:#35566F;
  --sky-4:#45657E;  /* dawn    동틀 녘. §2 밝기 상한(상대휘도 0.15) 안이다 */

  --ink:#F2EFEA;          /* 본문 — 순백이 아닌 따뜻한 종이색 (§2) */
  --paper:#FBF8F3;        /* 밝은 알약 버튼 바탕 */
  --on-paper:#1A1520;     /* 그 위의 글자 */
  --glow:255,178,122;     /* 지평선 빛 #FFB27A (§3) */

  --col:1080px;           /* 본문 최대 폭 */
  --read:34rem;           /* 글줄 최대 폭 */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

html{background:var(--sky-0)}
body{
  /* 아래는 새벽이다 — 화면이 페이지보다 길어도 밤이 다시 나오지 않게 */
  background:var(--sky-4);
  color:var(--ink);
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",
              "Malgun Gothic","Noto Sans KR",sans-serif;
  font-size:17px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* 한국어는 어절 단위로 끊는다. 기본값은 글자 아무 데서나 끊어서
   "미래의 내 / 가 편지를 받습니다" 처럼 낱말이 갈라진다 (렌더에서 잡았다).
   일본어에는 걸지 마라 — 일본어는 아무 데서나 끊는 것이 정상 조판이라
   keep-all 을 걸면 줄이 넘친다. */
html[lang="ko"] body{word-break:keep-all;overflow-wrap:break-word}

/* 일본어는 본문을 아무 데서나 끊는 것이 정상이지만, 크게 앉히는 글자까지 그러면
   `AIもあ / りません` 처럼 갈라져 눈에 걸린다. 제목급에만 어절 단위를 준다.
   auto-phrase 를 모르는 브라우저는 그냥 기본 동작으로 떨어진다 — 깨지지 않는다. */
html[lang="ja"] h1,
html[lang="ja"] h2,
html[lang="ja"] .short,
html[lang="ja"] .closing .line{word-break:auto-phrase}

/* ja 는 서체를 못박는다 — Pretendard 에 한자가 없어 한 줄에서 가나·한자가 갈라진다.
   앱은 기기 폰트에 맡겼지만 웹은 방문자 기기가 제각각이라 그럴 수 없다. */
html[lang="ja"] body{
  font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
}

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

/* ── 하늘 한 장 ──────────────────────────────────────────────── */
.sky{
  position:relative;
  min-height:100vh;
  isolation:isolate;
  overflow:hidden;
  /* 정지점 위치는 대비가 정한다. 밝은 쪽을 아래로 몰아 두어야 본문이 놓이는
     구간이 #35566F 아래로 내려가지 않는다 (src/verify.py 가 잰다).
     맨 아래 #45657E 에 닿는 것은 마무리 글과 바닥글뿐이고, 그 둘은 따로 밝게 준다. */
  background:linear-gradient(180deg,
    var(--sky-0) 0%, var(--sky-1) 42%, var(--sky-2) 68%,
    var(--sky-3) 88%, var(--sky-4) 100%);
}
/* 지평선 빛 — §3 그대로(중심 50%/115%, #FFB27A 22% → 투명). 페이지 맨 아래에 깐다 */
.sky::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:120vh;z-index:0;
  pointer-events:none;
  background:radial-gradient(90% 60% at 50% 118%,
    rgba(var(--glow),.22) 0%, rgba(var(--glow),.10) 45%, rgba(var(--glow),0) 72%);
}

/* 별 — 앱과 같은 규칙(§12): 고정 시드, 위쪽에만, 글로우 없음.
   아래는 하늘이 밝아 묻히므로 마스크로 서서히 지운다. */
.stars{
  position:absolute;left:0;right:0;top:0;height:2400px;z-index:0;pointer-events:none;
  opacity:.85;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);
}
.stars i{position:absolute;display:block;border-radius:50%;background:var(--ink)}
@media (prefers-reduced-motion:no-preference){
  .stars i{animation:breathe var(--dur,7s) ease-in-out var(--del,0s) infinite}
}
@keyframes breathe{0%,100%{opacity:var(--o,.4)}50%{opacity:calc(var(--o,.4) * .35)}}

.wrap{position:relative;z-index:1;max-width:var(--col);margin:0 auto;padding:0 24px}

/* ── 머리 ────────────────────────────────────────────────────── */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:26px 0 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand .plane{width:22px;opacity:.55}
/* 앱 이름은 줄이 나뉘면 안 된다 — es 판 `Déjalo aquí` 가 좁은 화면에서 두 줄이 되어
   비행기가 가운데로 밀렸다. 좁으면 이름이 아니라 언어 목록이 접히게 한다 */
.brand b{font-size:15px;font-weight:600;letter-spacing:-.2px;white-space:nowrap}

.langs{display:flex;gap:4px;font-size:13px;flex-wrap:wrap;justify-content:flex-end}
.langs a{
  text-decoration:none;padding:5px 11px;border-radius:14px;
  color:rgba(242,239,234,.62);border:1px solid transparent;transition:color .2s,border-color .2s}
.langs a:hover{color:var(--ink);border-color:rgba(242,239,234,.24)}
.langs a[aria-current="page"]{color:var(--ink);border-color:rgba(242,239,234,.24)}

/* ── 히어로 ──────────────────────────────────────────────────── */
.hero{padding:88px 0 40px;text-align:center}
.hero .mark{width:76px;margin:0 auto 30px;opacity:.9}
.hero h1{
  font-size:clamp(30px,5.4vw,46px);font-weight:700;line-height:1.34;
  letter-spacing:-1.2px;text-wrap:balance;
  text-shadow:0 2px 24px rgba(5,7,11,.5)}
.hero .short{
  margin:22px auto 0;max-width:30rem;font-size:16.5px;line-height:1.8;
  color:rgba(242,239,234,.80);text-wrap:balance}

.get{margin-top:38px;display:flex;flex-direction:column;align-items:center;gap:12px}
/* §6 primary — 어두운 배경 위에서 밝은 알약이 유일하게 명확한 누를 것이다.
   화면당 하나만 쓴다. 이 페이지는 히어로와 마지막, 두 자리뿐이다. */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  height:54px;padding:0 30px;border-radius:27px;
  background:rgba(251,248,243,.92);color:var(--on-paper);
  font-size:16px;font-weight:600;text-decoration:none;letter-spacing:-.2px;
  box-shadow:0 10px 30px rgba(5,7,11,.45);
  transition:background .2s,transform .2s}
.btn:hover{background:var(--paper);transform:translateY(-1px)}
.btn svg{width:19px;height:19px;flex:none}
.get small{font-size:13px;color:rgba(242,239,234,.62);letter-spacing:.2px}

/* ── 기기 한 대 ───────────────────────────────────────────────
   앱 화면은 페이지 전체에서 이 한 장뿐이다. 스크린샷을 여러 장 붙이면
   조판이 아니라 자료 모음으로 보인다 (2026-08-27 결정).
   아래를 마스크로 녹여 "잘라 붙인 자국"을 없앤다 — 앱의 하늘이 페이지의
   하늘로 이어지는 것처럼 보이게 하려는 것이다.
   기울이지 않는다 (16-graphics: 흔한 목업 문법은 안 쓴다). */
.hero .device{margin:52px auto 0;width:min(272px,64vw)}
.device{
  position:relative;aspect-ratio:1080/1560;   /* 위 71% 만 보인다 */
  border-radius:24px 24px 0 0;overflow:hidden;
  border:1px solid rgba(242,239,234,.10);border-bottom:0;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 99%);
          mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 99%)}
.device img{width:100%;height:auto;aspect-ratio:1080/2200;
  object-fit:cover;object-position:top center}

/* ── 종이비행기 자국 ─────────────────────────────────────────
   스토어 5판에서 판을 가로지르던 점선을, 여기서는 절(節) 사이를 잇는 세로선으로.
   같은 하늘을 계속 지나가고 있다는 신호다. */
.trail{
  position:relative;height:104px;
  background:repeating-linear-gradient(180deg,
    rgba(242,239,234,.28) 0 4px, rgba(242,239,234,0) 4px 19px);
  width:1px;margin:0 auto}

/* 자국 위의 표시 — 단계 사이마다 하나. 앱 화면 대신 이것이 걸음을 센다 */
.trail.dot::after{
  content:"";position:absolute;left:50%;top:50%;
  width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;
  background:rgba(251,248,243,.62);
  box-shadow:0 0 0 5px rgba(11,13,20,.55)}   /* 점선을 가려 점이 또렷해진다 */

/* 편지함 앞에서는 점 대신 비행기가 앉는다. §12 — 떠나는 게 아니라 오는 것이라
   기수가 위를 본다 */
.trail.plane-stop{height:132px}
.trail.plane-stop svg{
  position:absolute;left:50%;top:50%;width:36px;height:auto;
  transform:translate(-50%,-50%) rotate(-24deg);opacity:.72;
  filter:drop-shadow(0 0 6px rgba(11,13,20,.8))}

/* ── 본문 절 ─────────────────────────────────────────────────── */
.sec{padding:20px 0}
/* §4 의 eyebrow 는 ink 52% 다. 웹에서는 76% 로 올렸다 — 앱은 화면마다 하늘이
   한 색이고 eyebrow 가 늘 어두운 위쪽에 있지만, 이 페이지는 같은 글자가
   밤부터 새벽까지 걸쳐 있어서 52% 로는 아래쪽에서 4.5:1 을 못 넘는다.
   근거 수치는 src/verify.py 가 매번 다시 잰다.
   (이 주석에 브랜드에서 뺀 말을 적지 마라. 이 파일은 웹루트로 그대로 나간다.) */
.eyebrow{
  font-size:12px;font-weight:500;letter-spacing:6px;text-transform:uppercase;
  color:rgba(242,239,234,.76)}
/* §4 의 자간 +6.0 은 라틴 대문자(STEP 1 같은 eyebrow)를 위한 값이다. 한글·가나에
   그대로 주면 "1 단 계" 처럼 글자가 흩어진다 */
html[lang="ko"] .eyebrow, html[lang="ja"] .eyebrow{letter-spacing:2px}
h2{font-size:clamp(23px,3vw,29px);font-weight:600;line-height:1.4;
  letter-spacing:-.8px;margin:14px 0 18px;text-wrap:balance}
.read p{font-size:16.5px;line-height:1.95;color:rgba(242,239,234,.88);max-width:var(--read)}
.read p + p{margin-top:16px}

.lead{text-align:center;max-width:37rem;margin:0 auto;padding:8px 0 4px}
.lead p{font-size:17.5px;line-height:1.95;color:rgba(242,239,234,.88)}
.lead p + p{margin-top:18px}

/* 단계 — 가운데 한 칸. 자국을 따라 아래로 내려간다 */
.step{max-width:34rem;margin:0 auto;padding:8px 0;text-align:center}
.step .read p{margin-left:auto;margin-right:auto}

/* ── 없는 것 ─────────────────────────────────────────────────── */
/* §5 종이 패널 — 앱에서 떠 있는 표면은 이 하나뿐이다. 사이트도 같게 간다 */
.panel{
  background:rgba(242,239,234,.06);
  border:1px solid rgba(242,239,234,.10);
  border-radius:20px;padding:26px 24px}
.none{max-width:44rem;margin:0 auto;padding:44px 0}
.none .head{text-align:center;margin-bottom:26px}
.none ul{list-style:none}
.none li{display:flex;gap:14px;align-items:baseline;padding:13px 2px;
  border-top:1px solid rgba(242,239,234,.08)}
.none li:first-child{border-top:0}
.none li b{font-weight:600;font-size:16px;white-space:nowrap}
.none li span{font-size:15px;line-height:1.7;color:rgba(242,239,234,.80)}

/* ── 마무리 ──────────────────────────────────────────────────── */
.closing{text-align:center;padding:80px 0 96px}
.closing .line{font-size:clamp(27px,4.4vw,38px);font-weight:700;line-height:1.36;
  letter-spacing:-1px;text-wrap:balance}
/* 마무리는 하늘이 가장 밝은 자리(#45657E)에 놓이고, 거기에 지평선 빛까지
   겹친다. 그래서 이 절의 글자는 **전부 ink 100%** 다 — 흐린 층을 두면
   4.5:1 을 못 넘는다(잔글씨 88% 로 4.17:1 이었다).
   대비 때문이기도 하고, 밤을 지나 새벽으로 왔다는 것이기도 하다 */
.closing .sub{margin-top:18px;font-size:16px;color:var(--ink)}
.closing .get{margin-top:40px}
.closing .get small{color:var(--ink)}

/* ── 바닥 ────────────────────────────────────────────────────── */
/* 바닥은 지평선 아래다. 옅게 어둡게 깔아 잔글씨가 새벽 하늘에 묻히지 않게 한다
   — 스토어 5판의 vshade 와 같은 수법이다 (src/run5.tpl.html) */
footer{
  position:relative;z-index:1;
  border-top:1px solid rgba(242,239,234,.14);
  margin-top:8px;
  padding:32px 24px 56px;font-size:13.5px;line-height:1.9;
  color:rgba(242,239,234,.80);
  border-radius:20px 20px 0 0;
  background:linear-gradient(180deg,rgba(11,13,20,.26) 0%,rgba(11,13,20,.44) 100%)}
footer .row{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;
  justify-content:space-between}
footer a{color:rgba(242,239,234,.88);text-decoration:none;
  border-bottom:1px solid rgba(242,239,234,.28)}
footer a:hover{color:var(--ink)}
footer .note{margin-top:14px;font-size:12.5px;color:rgba(242,239,234,.68)}

/* ── 좁은 화면 ───────────────────────────────────────────────── */
@media (max-width:760px){
  .read p{margin-left:auto;margin-right:auto}
  .hero{padding:56px 0 24px}
  .trail{height:76px}
  .trail.plane-stop{height:100px}
  .none li{flex-direction:column;gap:4px;align-items:flex-start;text-align:left}
}