/* WorryStone 랜딩 — 스타일 시트
   ───────────────────────────────────────────────────────────────────────────
   설계 근거: ui-ux-pro-max 스킬
     · 패턴  App Store Style Landing (히어로 목업 → 스크린샷 → 기능 → CTA)
     · 스타일 Soft UI Evolution (은은한 깊이, 뉴모피즘보다 또렷한 그림자, WCAG AA+)
     · 다이얼 variance 4 / motion 4 / density 3(여유)

   색은 스킬이 제안한 주황·파랑 대신 **앱 팔레트를 그대로 쓴다.**
   (worryston_app/lib/core/theme/palette.dart 가 원본 — 스토어 스크린샷 옆에
   나란히 놓이는 페이지라 브랜드 일치가 일반 추천보다 우선한다.)

   ⚠️ 다만 앱의 색을 **웹 본문에 그대로 쓰면 대비가 깨진다.** 실측값:
        inkMuted #9B9286 on canvas  →  2.69:1   (기준 4.5:1)
        흰 글씨  on accent #E78C73  →  2.50:1
   앱은 큰 글씨·아이콘 위주라 견디지만 웹은 15~17px 본문이 주력이다.
   그래서 **텍스트 전용 변형**(--ink-muted, --accent-deep, --link)을 따로 두고,
   원본 코랄 --accent 는 글자가 얹히지 않는 장식(테두리·글로우)에만 쓴다.
   ─────────────────────────────────────────────────────────────────────────── */

/* Jua = 앱이 쓰는 글꼴(GoogleFonts.jua). 한글을 지원해서 제목에 그대로 쓴다.
   본문은 장문이라 Noto Sans KR — Jua 는 표시용이라 긴 글에서 눈이 아프다. */
@import url('https://fonts.googleapis.com/css2?family=Jua&family=Noto+Sans+KR:wght@400;500;700&display=swap');

:root {
  /* 표면 */
  --canvas: #f3f0e9;        /* 웜 크림 — 앱 배경 */
  --paper: #fbf9f5;         /* 카드 */
  --paper-alt: #efeae0;
  --line: #e3ddd1;

  /* 텍스트 (대비 검증 완료) */
  --ink: #4a443c;           /* 8.45:1 on canvas */
  --ink-muted: #6e6459;     /* 5.08:1 on canvas — 앱의 #9B9286 은 2.69:1 이라 웹 부적합 */
  --link: #a85236;          /* 4.70:1 on canvas */

  /* 브랜드 */
  --accent: #e78c73;        /* 코랄 원본 — 장식 전용, 글자 배경으로 쓰지 말 것 */
  --accent-soft: #f2b7a6;
  --accent-deep: #bf4520;   /* 흰 글씨 얹는 배경 5.14:1 */

  /* Soft UI Evolution — 뉴모피즘보다 또렷하고 플랫보다 깊게 */
  --shadow-sm: 0 1px 2px rgba(74, 68, 60, 0.06), 0 2px 8px rgba(74, 68, 60, 0.04);
  --shadow-md: 0 2px 4px rgba(74, 68, 60, 0.06), 0 12px 28px rgba(74, 68, 60, 0.08);
  --shadow-cta: 0 2px 6px rgba(191, 69, 32, 0.24), 0 10px 24px rgba(191, 69, 32, 0.18);

  --radius: 20px;
  --radius-sm: 14px;

  /* 여유 있는 간격 스케일 (density 3) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;

  --max: 1080px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 어두운 화면에서도 **웜톤**을 유지한다.
   ⚠️ 앱의 canvasDark(#14181C)를 그대로 가져오면 안 된다 — 그건 명상 화면용
   파란기 도는 검정이라, 랜딩 전체에 깔면 브랜드가 차갑고 딱딱해진다.
   여기서는 촛불 켠 방처럼 갈색이 도는 어둠을 쓴다. 대비는 전부 재측정했다. */
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #26211c;      /* 웜 다크 — 흙/나무 계열 */
    --paper: #302a24;
    --paper-alt: #3a332b;   /* 앱의 bubble 색과 같은 값 */
    --line: #453d34;
    --ink: #f0e9de;         /* 13.2:1 */
    --ink-muted: #b5a996;   /* 6.90:1 */
    --link: #f2b7a6;        /* 8.16:1 — 다크에선 어두운 링크색이 오히려 안 보인다 */
    --accent-deep: #e78c73; /* 어두운 배경에선 원본 코랄이 CTA 로 충분히 밝다 */
    --shadow-sm: none;
    --shadow-md: 0 12px 28px rgba(0, 0, 0, 0.32);
    --shadow-cta: 0 10px 24px rgba(231, 140, 115, 0.18);
  }
  /* 밝은 코랄 위에는 흰 글씨가 아니라 짙은 잉크가 읽힌다 (6.16:1) */
  .btn-primary { color: #2b2320; }
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* 가로 삐져나옴 방지. ⚠️ body 에 `overflow-x: hidden` 을 걸면 안 된다 —
     body 가 별도의 스크롤 상자가 되어 **window 의 scroll 이벤트가 끊긴다**
     (위치는 바뀌는데 리스너가 한 번도 안 불려 스크롤 등장이 전부 죽었다).
     `clip` 은 스크롤 상자를 만들지 않아서 뷰포트 스크롤이 그대로 산다. */
  overflow-x: clip;
}

body {
  margin: 0;
  /* 위쪽에 코랄빛 후광을 아주 옅게 깔아 화면이 돌을 감싸는 느낌을 준다.
     단색 배경이면 특히 어두운 화면에서 벽처럼 딱딱해진다. */
  background:
    radial-gradient(1200px 640px at 50% -10%,
      color-mix(in srgb, var(--accent) 14%, transparent), transparent 68%),
    var(--canvas);
  background-attachment: fixed;
  color: var(--ink);
  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont,
    'Apple SD Gothic Neo', 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;      /* 한글이 단어 중간에서 끊기지 않게 */
}

h1, h2, h3, .brand span {
  font-family: 'Jua', 'Noto Sans KR', sans-serif;
  font-weight: 400;          /* Jua 는 한 가지 굵기뿐 — bold 를 주면 가짜 굵기가 된다 */
  letter-spacing: -0.01em;
  line-height: 1.35;
}

img { max-width: 100%; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--space-3); }

/* 키보드 초점은 절대 지우지 않는다 — 지우면 키보드 사용자가 길을 잃는다 */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--accent-deep);
  outline-offset: 3px;
  border-radius: 6px;
}

/* 스크린 리더 전용 — 화면에서는 안 보이지만 읽힌다 */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 8px;
  background: var(--paper); color: var(--ink);
  padding: 10px 18px; border-radius: 8px; z-index: 100;
}
.skip-link:focus { left: 16px; }

/* ─────────── 헤더 ─────────── */
.site-head {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2);
  padding: 14px var(--space-3);
  max-width: var(--max); margin: 0 auto;
  background: color-mix(in srgb, var(--canvas) 86%, transparent);
  backdrop-filter: blur(12px);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.brand img { width: 36px; height: 36px; border-radius: 10px; box-shadow: var(--shadow-sm); }
.brand span { font-size: 19px; }
.site-head nav { display: flex; gap: var(--space-3); font-size: 15px; }
.site-head nav a {
  color: var(--ink-muted); text-decoration: none;
  padding: 8px 0;                  /* 터치 목표를 세로로 넓힌다 */
  transition: color 0.2s var(--ease);
}
.site-head nav a:hover { color: var(--ink); }

/* ─────────── 히어로 ─────────── */
.hero { text-align: center; padding: var(--space-5) 0 var(--space-4); }

.hero-stone {
  width: min(280px, 60vw);
  height: auto;
  filter: drop-shadow(0 24px 40px rgba(74, 68, 60, 0.18));
  animation: breathe 7s ease-in-out infinite;
}
/* 돌이 아주 느리게 숨 쉰다 — 앱에서 문지를 때의 호흡과 같은 템포다.
   transform 만 건드려서 레이아웃을 다시 계산시키지 않는다. */
@keyframes breathe {
  0%, 100% { transform: scale(1) translateY(0); }
  50%      { transform: scale(1.035) translateY(-8px); }
}

h1 { font-size: clamp(32px, 6.4vw, 54px); margin: var(--space-3) 0 var(--space-2); }
.lead {
  color: var(--ink-muted);
  font-size: clamp(16px, 2.2vw, 19px);
  margin: 0 auto; max-width: 30em;
}

/* ─────────── 버튼 ─────────── */
.cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: var(--space-4); }
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 48px;                /* 터치 목표 44px 이상 */
  padding: 12px 26px;
  border-radius: 999px;
  text-decoration: none; font-weight: 500; font-size: 16px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
.btn svg { width: 20px; height: 20px; flex: 0 0 auto; }
.btn-primary { background: var(--accent-deep); color: #fff; box-shadow: var(--shadow-cta); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(191,69,32,.26), 0 16px 32px rgba(191,69,32,.22); }
.btn-ghost { background: var(--paper); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }

/* ─────────── 섹션 ─────────── */
section { padding: var(--space-6) 0; }
.sec-head { max-width: 34em; margin-bottom: var(--space-4); }
.sec-head h2 { font-size: clamp(24px, 3.8vw, 34px); margin: 0 0 var(--space-1); }
.sec-head p { color: var(--ink-muted); margin: 0; }

/* ─────────── 기능 카드 ─────────── */
/* 카드가 4장이다. auto-fit 에 맡기면 본문 폭에 따라 3+1 이 되어 한 장이 외따로
   남는다 — 열 수를 직접 정해 항상 2×2 로 떨어뜨린다. */
.features { display: grid; gap: var(--space-2); grid-template-columns: 1fr; }
@media (min-width: 760px) { .features { grid-template-columns: 1fr 1fr; } }
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card .ico {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent-deep);
  margin-bottom: var(--space-2);
}
.card .ico svg { width: 22px; height: 22px; }
.card h3 { margin: 0 0 6px; font-size: 19px; }
.card p { margin: 0; color: var(--ink-muted); font-size: 15.5px; }

/* ─────────── 스크린샷 ─────────── */
/* 기본(넓은 화면) = 감싸는 격자.
   ⚠️ 가로 스크롤 띠를 데스크톱에 두면 안 된다. 화면 높이의 절반을 차지하는
   띠 위에 포인터가 올라간 채 휠을 굴리면 **페이지도 띠도 움직이지 않고 갇힌다**
   (실측: 페이지 1000px 에서 정지, 띠 scrollLeft 0). 마우스가 있는 환경에서는
   스크롤 컨테이너 자체를 만들지 않는 게 안전하다. */
.shots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));  /* 본문 폭에서 4열 → 7장이 4+3 으로 앉는다 */
  gap: var(--space-2);
  padding: 4px;
}
.shots img {
  width: 100%; height: auto;
  border-radius: 26px;
  box-shadow: var(--shadow-md);
}

/* 좁은 화면 = 옆으로 미는 띠. 터치는 세로 스와이프와 가로 스와이프를
   구분하므로 여기서는 갇히지 않는다. */
@media (max-width: 699px) {
  .shots {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;            /* 한 축만 지정하면 나머지도 auto 로 계산된다 */
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding: 4px 4px var(--space-2);
    mask-image: linear-gradient(to right, #000 0, #000 92%, transparent 100%);
  }
  .shots img { width: 232px; flex: 0 0 auto; scroll-snap-align: center; }
}

/* ─────────── 단계 ─────────── */
.steps { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: step; }
.step { padding: var(--space-3); border-radius: var(--radius); background: var(--paper-alt); }
.step::before {
  counter-increment: step; content: counter(step);
  font-family: 'Jua', sans-serif; font-size: 26px;
  color: var(--accent-deep); display: block; margin-bottom: 6px;
}
.step h3 { margin: 0 0 4px; font-size: 17px; }
.step p { margin: 0; color: var(--ink-muted); font-size: 15px; }

/* ─────────── 문서(방침·약관) ─────────── */
.doc {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--space-4) var(--space-3);
  margin: var(--space-3) 0 var(--space-5); box-shadow: var(--shadow-sm);
}
.doc h1 { font-size: clamp(26px, 4.4vw, 36px); margin: 0 0 6px; }
.doc .meta { color: var(--ink-muted); font-size: 15px; margin: 0 0 var(--space-4); }
.doc h2 { font-size: 20px; margin: var(--space-4) 0 10px; padding-top: var(--space-3); border-top: 1px solid var(--line); }
.doc h2:first-of-type { border-top: 0; padding-top: 0; }
.doc ul { padding-left: 20px; }
.doc li { margin: 6px 0; }
.doc a { color: var(--link); }
.doc table { width: 100%; border-collapse: collapse; font-size: 15.5px; margin: 14px 0; min-width: 520px; }
.doc th, .doc td { border: 1px solid var(--line); padding: 11px 13px; text-align: left; vertical-align: top; }
.doc th { background: var(--paper-alt); }
.table-scroll { overflow-x: auto; }
.callout {
  background: var(--paper-alt);
  border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 16px 20px; margin: var(--space-3) 0;
}
.callout p { margin: 0; }

/* ─────────── 푸터 ─────────── */
footer { border-top: 1px solid var(--line); padding: var(--space-4) 0 var(--space-5); color: var(--ink-muted); font-size: 14.5px; }
footer .links { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: 10px; }
footer a { color: var(--ink-muted); text-decoration: none; padding: 6px 0; }
footer a:hover { color: var(--ink); text-decoration: underline; }

/* ─────────── 스크롤 등장 ─────────── */
/* 콘텐츠는 기본이 '보임'이다. JS 가 .reveal 을 붙였을 때만 숨겼다가 올라온다 —
   반대로 만들면 JS 가 죽는 순간 페이지가 백지가 된다. */
.js-reveal .reveal { opacity: 0; transform: translateY(18px); }
.js-reveal .reveal.in {
  opacity: 1; transform: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

/* 움직임에 민감한 사용자에게는 전부 정지 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-stone { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js-reveal .reveal { opacity: 1; transform: none; }
}

/* ─────────── 좁은 화면 ─────────── */
@media (max-width: 640px) {
  body { font-size: 16px; }
  section { padding: var(--space-5) 0; }
  .site-head nav { gap: var(--space-2); font-size: 14px; }
  .cta-row .btn { flex: 1 1 100%; justify-content: center; }
  .shots img { width: 200px; }
}