/* GrowHabit · For All People 공용 스타일 (홈페이지·문의·법률 문서 셸·회사 페이지)
   제목: ONE 모바일 POP(원본 파일 그대로 사용, 수정·재배포 금지) / 본문: Pretendard(OFL, 공식 CDN) */
@font-face {
  font-family: "ONE Mobile POP";
  src: url("/assets/site/fonts/ONE-Mobile-POP.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #fbf3e6;
  --bg-deep: #f6ead6;
  --card: #fffaf1;
  --ink: #3b2414;
  --body: #5a4636;
  --muted: #8a7260;
  --line: #eadcc6;
  --green: #1e6b3a;
  --green-ink: #ffffff;
  --mark: #fce77a;
  --display: "ONE Mobile POP", "Pretendard Variable", Pretendard, system-ui, sans-serif;
  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --wrap: 1336px;
  --radius: 22px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  word-break: keep-all;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 6px; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}

/* ---------- 헤더 ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.site-header .wrap { max-width: 1420px; display: flex; align-items: center; gap: 24px; min-height: clamp(66px, 6.8vw, 104px); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand img { width: clamp(40px, 5.7vw, 88px); height: auto; aspect-ratio: 1; border-radius: 22%; box-shadow: 0 2px 6px rgba(59,36,20,.18); }
.brand span { white-space: nowrap; font-family: var(--display); font-size: clamp(23px, 2.95vw, 45px); letter-spacing: -.01em; line-height: 1; }
.brand { gap: clamp(10px, 1.4vw, 22px); }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.site-nav a {
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: clamp(15px, 1.5vw, 23px);
  padding: 10px clamp(10px, 1.1vw, 18px); border-radius: 999px; white-space: nowrap;
}
.site-nav a:hover { background: var(--bg-deep); }
.site-nav a.lang { border: 1.5px solid var(--line); padding: 6px 14px; font-size: clamp(14px, 1.2vw, 18px); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-weight: 800; text-decoration: none; cursor: pointer;
  border-radius: 999px; border: 0; white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-green {
  color: var(--green-ink);
  background: linear-gradient(180deg, #34a259 0%, #23803f 48%, #1a6532 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.12), 0 6px 14px rgba(30,107,58,.28);
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
}
.btn-green:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.12), 0 9px 18px rgba(30,107,58,.32); }
.btn-outline { color: var(--ink); background: var(--card); border: 2px solid var(--ink); }
.btn-md { font-size: clamp(16px, 1.85vw, 28px); padding: 0 clamp(18px, 2.4vw, 38px); height: clamp(44px, 4.1vw, 63px); }
.btn-lg { font-size: 19px; padding: 16px 30px; }

.menu-toggle { display: none; margin-left: 4px; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--ink); }
.menu-toggle svg { width: 30px; height: 30px; }

/* ---------- 타이포 ---------- */
.eyebrow { font-family: var(--display); color: #2a7a3e; font-size: clamp(20px, 2.2vw, 34px); line-height: 1.25; margin: 0 0 clamp(12px, 1.5vw, 24px); }
.display { font-family: var(--display); color: var(--ink); font-weight: 400; letter-spacing: -.01em; line-height: 1.12; margin: 0; text-wrap: balance; }
.h1 { font-size: clamp(46px, 7.35vw, 113px); line-height: 1.03; }
.h2 { font-size: clamp(32px, 4.2vw, 54px); }
.h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.25; }
.mark { color: var(--green); background: linear-gradient(transparent 62%, var(--mark) 62%, var(--mark) 100%); padding: 0 .04em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lead { font-size: clamp(17px, 2.0vw, 31px); line-height: 1.5; color: var(--body); margin: clamp(14px, 1.6vw, 24px) 0 0; max-width: 36em; text-wrap: pretty; }

/* ---------- 스토어 배지 ---------- */
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(10px, 1.3vw, 20px); margin-top: clamp(20px, 1.9vw, 30px); }
.badges a { display: block; border-radius: 10px; }
.badges img { display: block; height: clamp(48px, 4.05vw, 62px); width: auto; } /* App Store·Google Play 배지는 같은 높이(구글 배지는 투명 여백을 잘라 낸 _t 파일) */

/* ---------- 폰 (투명 틀 에셋 위에 실제 화면) ---------- */
.phone { position: relative; aspect-ratio: 743 / 1505; width: 100%; filter: drop-shadow(0 22px 34px rgba(59,36,20,.22)); }
.phone .screen { position: absolute; left: 4.44%; top: 1.79%; width: 91.12%; height: 96.41%; object-fit: cover; object-position: top center; border-radius: 12.5% / 5.8%; background: #ddd; }
.phone .frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---------- 10단계 줄 ---------- */
.stages { display: flex; align-items: flex-end; gap: 0; margin-top: 44px; list-style: none; padding: 0; }
.stages li { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; position: relative; min-width: 0; }
.stages img { width: 100%; height: auto; }
.stages .n { font-family: var(--display); color: var(--ink); font-size: clamp(13px, 1.45vw, 22px); margin-top: 4px; }
.stages li + li::before { content: "›"; position: absolute; left: -5px; bottom: 38px; color: #b9a48f; font-size: 22px; font-weight: 700; }
.stages li:last-child::after { content: ""; position: absolute; top: -10px; right: 6%; width: 34px; height: 30px;
  background: radial-gradient(circle at 50% 100%, transparent 40%, transparent 41%) ; }

/* ---------- 섹션 공통 ---------- */
.section { padding: 96px 0; }
.section-head { text-align: center; max-width: 760px; margin: 0 auto 48px; }
.section-head .lead { margin-left: auto; margin-right: auto; }
.leaf-band { width: 100%; aspect-ratio: 1536 / 162; min-height: 72px; background: url("/assets/site/img/leaf-band.webp") center bottom / cover no-repeat; margin-top: 8px; }

.tag { display: inline-block; font-weight: 800; font-size: 16px; padding: 8px 18px; border-radius: 999px; color: #fff; box-shadow: 0 4px 10px rgba(59,36,20,.15); }
.tag.good { background: linear-gradient(180deg, #34a259, #1c6a35); }
.tag.bad { background: linear-gradient(180deg, #a07c5c, #7a5638); }

.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.card .shot { border-radius: 18px; overflow: hidden; background: var(--bg-deep); }
.card .shot img { width: 100%; height: auto; }
.card h3 { margin: 4px 0 0; }
.card p { margin: 0; font-size: 15.5px; }

/* ---------- 푸터 ---------- */
.site-footer { background: #3b2a1c; color: #e9dcc6; padding: 56px 0 calc(48px + env(safe-area-inset-bottom, 0px)); font-size: 14px; line-height: 1.75; }
.site-footer a { color: #fff6e6; }
.footer-top { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: flex-start; justify-content: space-between; padding-bottom: 28px; border-bottom: 1px solid rgba(233,220,198,.18); }
.footer-brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.footer-brand img { width: 40px; height: 40px; border-radius: 11px; }
.footer-brand span { font-family: var(--display); font-size: 22px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 22px; list-style: none; margin: 0; padding: 0; }
.footer-links a { text-decoration: none; font-weight: 600; }
.footer-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-links .strong a { font-weight: 800; color: #fff; }
.biz { margin-top: 24px; display: grid; gap: 4px; }
.biz p { margin: 0; }
.biz .sep { opacity: .45; margin: 0 8px; }
.copy { margin-top: 18px; opacity: .7; }

/* ---------- 반응형 ---------- */
@media (max-width: 1080px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px max(20px, env(safe-area-inset-left, 0px)) 16px; }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 14px 6px; border-radius: 10px; font-size: 17px; }
  .site-nav a.lang { align-self: flex-start; margin-top: 8px; }
  .menu-toggle { display: block; }
  .site-header .header-cta { margin-left: auto; }
  /* 다운로드 버튼이 없는 페이지(앱 웹뷰로 여는 방침·약관 등)도 메뉴 버튼은 오른쪽 끝 */
  .site-nav + .menu-toggle { margin-left: auto; }
  .section { padding: 72px 0; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .brand span { font-size: 23px; }
  .brand img { width: 38px; height: 38px; }
  .site-header .wrap { min-height: 66px; gap: 12px; }
  .btn-md { font-size: 15px; padding: 10px 18px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .card { padding: 12px 12px 16px; gap: 10px; border-radius: 18px; }
  .card .shot { border-radius: 12px; }
  .card p { font-size: 14px; }
  .h1 { font-size: clamp(40px, 13vw, 62px); }
  .lead { font-size: clamp(15px, 4.2vw, 18px); color: #4e3b2c; }
  .badges img { height: 44px; }
  .stages .n { font-size: 13px; }
  .stages li + li::before { font-size: 14px; left: -3px; bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } }
@media (max-width: 860px) { .br-d { display: none; } }

/* 한 줄 유지: 화면 폭에 맞춰 글자 크기를 줄이고, 그래도 넘치면 구절 단위로만 균형 있게 줄바꿈 */
.nw { white-space: nowrap; }
.eyebrow, .recover { text-wrap: balance; }
@media (max-width: 560px) {
  .eyebrow { font-size: clamp(15px, 4.7vw, 22px); }
  .recover { font-size: clamp(15px, 4.6vw, 20px); }
}

@media (max-width: 560px) {
  :lang(en) .h1 { font-size: clamp(34px, 10.4vw, 52px); }
  .site-header .header-cta { padding: 0 14px; }
}
@media (max-width: 380px) {
  .brand span { font-size: 21px; }
  .brand img { width: 34px; }
}