/* 오늘도냥 웹 공통 스타일
 *
 * **왜 파일로 뺐나**(대표님 2026-09-14 — "공통 css로 정리해줘").
 * 랜딩과 성격 테스트가 **같은 값을 각자 손으로 적고 있었다.** 그래서
 * 이름은 같은데 값이 다른 규칙이 **16개**였고(절 사이 80 vs 76px, 꼬리말 40/40 vs 34/26 …),
 * 한쪽만 고치면 다른 쪽이 조용히 갈라졌다. 실제로 그래서 두 번 고쳤다.
 *
 * 이 파일이 원본이다. 페이지 안 `<style>`은 **그 페이지에만 있는 것**만 적는다.
 * 불러오는 순서가 공통 → 페이지라, 페이지 쪽이 덮어쓴다.
 *
 * 쓰는 곳: oneuldonyang/index.html · oneuldonyang/test/index.html
 */

/* 색은 앱 토큰 그대로(Theme.swift). 앱이 다크 고정이라 이 페이지도 다크 고정. */
  :root {
    --paper:#0E1428; --fill:#182038; --card:#1E2744;
    --ink:#FFFFFF; --sub:#B0B6CD; --line:#303A5A; --line-hero:#48557A;
    --moon:#F4D38D; --moon-deep:#C4A060; --clay:#E07A5F; --night:#96B4E6; --ok:#8FD3A8;
    --sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard",
            "Noto Sans KR", system-ui, sans-serif;
    --num: Georgia, "Times New Roman", serif;
    --r-inner:10px; --r-card:14px; --r-hero:20px;
    color-scheme: dark;
  }
  * { box-sizing: border-box; }
  /* 한글은 기본값이 글자 단위로 끊긴다 — 「듣기만 해 / 요.」처럼 어절이 쪼개진다.
     띄어쓰기에서만 끊고(keep-all), 한 어절이 줄보다 길 때만 어쩔 수 없이 쪼갠다 */
  body { word-break: keep-all; overflow-wrap: anywhere; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body {
    margin: 0; background: var(--paper); color: var(--ink);
    font-family: var(--sans); font-size: 17px; line-height: 1.7;
    -webkit-font-smoothing: antialiased;
  }
  /* 앱의 nightSky와 같은 광원 — 위쪽 가운데에서 번진다. 달을 하나 더 그리지 않는다. */
  body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(1100px 900px at 50% 22%, #18203C 0%, #0E1428 68%);
  }
  .wrap { max-width: 680px; margin: 0 auto; padding: 0 20px; }
  h1,h2,h3 { line-height: 1.34; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
  h1 { font-size: 40px; font-weight: 800; }
  h2 { font-size: 25px; font-weight: 700; }
  p { margin: 10px 0 0; }
  .sub { color: var(--sub); }
  a { color: var(--moon); }

  /* ── 한 마디: 그림 옆에 붙는 짧은 글. 이 페이지의 기본 단위다 ── */
  .beat { padding: 40px 0; }
  .beat + .beat { border-top: 1px solid rgba(48,58,90,.6); }
  .beat h2 { font-size: 25px; }
  .beat .say { margin-top: 8px; color: var(--sub); font-size: 16.5px; }
  /* 잘라낸 화면은 **액자 안에 여백을 두고** 앉힌다 — 상자에 꽉 채우면 잘린 티가 난다.
     액자 바닥은 앱 배경과 같은 밤하늘이라 크롭 가장자리가 액자 안에서 이어진다.

     **척도 규칙: 앱 1pt = 랜딩 1px.** 크롭은 앱 화면의 368pt 폭을 담았으므로 368px로 놓는다.
     그러면 앱 본문 17pt가 랜딩에서도 17px — 본문 글자 크기와 같아진다.
     이 규칙이 없을 때는 608px로 늘어나 앱 글자가 28px(본문의 1.65배)로 보였고,
     그림 안 글자만 유난히 커서 엉성해 보였다(대표님 지적 2026-09-12). */
  .beat figure {
    --app-width: 368px;   /* 크롭이 담은 앱 화면의 논리 폭(pt) = 표시 폭(px) */
    margin: 20px auto 0; padding: 14px;
    width: fit-content; max-width: 100%;
    background: radial-gradient(140% 120% at 50% 0%, #18203C 0%, #0E1428 72%);
    border: 1px solid var(--line); border-radius: var(--r-hero);
  }
  .beat figure img {
    width: var(--app-width); max-width: 100%; height: auto; display: block;
    border-radius: var(--r-inner);
    box-shadow: 0 10px 26px rgba(0,0,0,.35);
  }
  .tag {
    display: inline-block; margin-bottom: 12px; font-size: 13px; font-weight: 800;
    letter-spacing: .04em; color: var(--moon-deep);
  }

  /* ── 표지 ── */
  .hero { padding: 46px 0 28px; text-align: center; }
  /* **사각형 테두리를 안 쓴다**(대표님 2026-09-14 — "달/고양이는 배경이 있으면
     사각형 테두리를 넣지마"). `mark.png`는 투명 배경이라 밤하늘 위에 그대로 얹힌다.
     달무리가 그림 안에 있으므로 `box-shadow`도 뺀다 — 두 겹이 되면 탁해진다 */
  .hero img.mark { width: 132px; height: 132px; margin: 0 auto 14px; display: block; }
  .hero h1 { font-size: 40px; }
  .hero .one { margin-top: 14px; font-size: 19px; color: var(--sub); }
  .badge { display: inline-block; margin-bottom: 18px; padding: 5px 12px;
           font-size: 13px; font-weight: 700; color: var(--night);
           background: rgba(150,180,230,.10); border: 1px solid rgba(150,180,230,.28);
           border-radius: 999px; }
  /* 폰 전체 화면은 「기기」로 읽히는 다른 범주다 — 표지와 「한 장」이 서로 같은 폭이면 된다 */
  .phone { margin: 30px auto 0; width: min(304px, 78%); }
  .phone img { width: 100%; height: auto; display: block;
               border-radius: 26px; border: 1px solid var(--line-hero);
               box-shadow: 0 30px 70px rgba(0,0,0,.45); }

  /* 달 버튼 — 빛 받는 쪽만 달색, 반대쪽은 가라앉힌다(앱 moonFill과 같은 규칙) */
  .cta {
    display: inline-block; padding: 15px 30px; font-size: 16.5px; font-weight: 800;
    color: #14182C; text-decoration: none; border: 0; border-radius: var(--r-card);
    cursor: pointer; font-family: var(--sans);
    background: radial-gradient(120% 130% at 26% 12%, var(--moon) 30%, var(--moon-deep) 100%);
    box-shadow: 0 0 34px rgba(244,211,141,.16);
  }
  .cta:hover { filter: brightness(1.05); }
  .cta:focus-visible { outline: 2px solid var(--moon); outline-offset: 3px; }
  .hero .cta { margin-top: 28px; }
  .cta-note { margin-top: 11px; font-size: 14px; color: var(--sub); }

  /* ── 큰 한마디 ── */
  .punch { padding: 52px 0 40px; text-align: center; }
  .punch p { font-size: 27px; font-weight: 700; line-height: 1.45; letter-spacing: -0.02em; margin: 0; }
  .punch .after { margin-top: 14px; font-size: 16.5px; font-weight: 400; color: var(--sub); }

  /* ── 2주 띠 ── */
  /* 2주 띠 — **SVG 글자를 쓰면 안 된다.** viewBox 640을 335px 폭에 맞추면 0.52배로
     줄어서, 15px로 적은 글자가 화면에서는 7.8px로 그려진다(창업자 지적 — 안 보인다).
     그래서 띠만 그림이고 글자는 진짜 글자다 — 폭이 바뀌어도 크기가 안 변한다 */
  .band { margin-top: 20px; display: grid; grid-template-columns: 4fr 6fr; gap: 12px; }
  .band .when { font-size: 13.5px; font-weight: 700; color: var(--sub); letter-spacing: .02em; }
  .band .lit .when { color: var(--moon-deep); }
  .band .rail { height: 8px; border-radius: 4px; background: #2A3558; margin: 9px 0 11px; }
  .band .lit .rail { background: linear-gradient(90deg, var(--moon), var(--moon-deep)); }
  .band .what { font-size: 15px; line-height: 1.45; color: var(--sub); }
  .band .lit .what { color: var(--ink); font-weight: 700; }

  /* ── 세 줄 대비 ── */
  .vs { margin-top: 20px; }
  .vs-row { padding: 16px 0; }
  .vs-row + .vs-row { border-top: 1px solid var(--line); }
  .vs-them { color: var(--sub); font-size: 15.5px; }
  .vs-us { margin-top: 4px; font-size: 17px; font-weight: 700; }
  .vs-them::before { content: "보통은 "; color: var(--line-hero); }
  .vs-us::before { content: "오늘도냥 "; color: var(--moon-deep); font-weight: 800; font-size: 14px; }

  /* ── 가격 ── */
  /* **중앙정렬은 표지(`hero`)와 큰 한마디(`punch`)에만 둔다**(대표님 2026-09-14).
     이 상자만 혼자 가운데라 페이지 전체가 공유하는 왼쪽 선을 깨고 있었다 —
     큰 숫자는 크기로 이미 눈에 띈다 */
  .pricebox { margin-top: 20px; padding: 24px 20px; background: var(--fill);
              border-radius: var(--r-hero); }
  .pricebox .n { font-family: var(--num); font-style: italic; font-size: 46px; line-height: 1.1; }
  .pricebox .u { color: var(--sub); font-size: 16px; margin-left: 8px; }
  .pricebox .why { margin-top: 10px; color: var(--sub); font-size: 15.5px; }

  /* ── 약속 ── */
  .promise { margin: 20px 0 0; padding: 0; list-style: none; }
  .promise li { padding: 14px 0; border-top: 1px solid var(--line); font-weight: 700; }
  .promise li span { display: block; font-weight: 400; color: var(--sub); font-size: 15.5px; margin-top: 2px; }

  /* ── 알림 신청 ── */
  .signup { margin-top: 20px; padding: 28px 22px; background: var(--card); border-radius: var(--r-hero); }
  .signup h2 { font-size: 23px; }
  .form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
  .form input[type=email] {
    flex: 1 1 200px; min-width: 0; padding: 14px 15px; font-size: 16px;
    font-family: var(--sans); color: var(--ink); background: var(--paper);
    border: 1px solid var(--line); border-radius: var(--r-inner);
  }
  .form input[type=email]::placeholder { color: #6E7899; }
  .form input[type=email]:focus { outline: none; border-color: var(--moon-deep); }
  .form button { flex: 0 0 auto; min-height: 48px; }
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .msg { margin: 12px 0 0; font-size: 15px; min-height: 1.5em; }
  .msg.ok { color: var(--ok); }
  .msg.err { color: var(--clay); }

  /* 화면 「한 장」을 통째로 보여주는 자리 — 크롭 액자와 다르게 폰처럼 세운다 */
  /* **폰 목업만 가운데 둔다.** 글이 아니라 기기 그림이라 가운데가 맞다 —
     왼쪽에 붙이면 오른쪽에 74px이 비어 실수처럼 보인다.
     나머지(그림 상자·표·목록·상자)는 전부 전폭 왼쪽이다 */
  .page { margin: 20px auto 0; width: min(304px, 78%); }
  .page img { width: 100%; height: auto; display: block;
              border-radius: 22px; border: 1px solid var(--line-hero);
              box-shadow: 0 26px 60px rgba(0,0,0,.45); }

  /* ── 앱 화면 더 보기 ── */
  footer { padding: 40px 0 56px; border-top: 1px solid var(--line); margin-top: 40px; }
  footer .links { display: flex; gap: 18px; flex-wrap: wrap; font-size: 15px; }
  footer p { color: var(--sub); font-size: 13.5px; }

  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  @media (max-width: 560px) {
    body { font-size: 16.5px; }
    .hero h1 { font-size: 33px; }
    h2, .beat h2 { font-size: 22px; }
    .punch p { font-size: 22px; }
    .pricebox .n { font-size: 40px; }
  }