/* =========================================================
   마유 Mayu · 랜딩페이지 스타일시트
   브랜드: 종이 위 색연필 일러스트 · Pretendard
   ========================================================= */

/* ---------- 디자인 토큰 ---------- */
:root{
  /* 색 */
  --paper:#FDF6E3;
  --cream:#FAF0DE;
  --ink:#56473A;
  --ink-soft:#7E6E5B;
  --pink:#EC9BAC;
  --pink-soft:#FBE3E7;
  --rose:#E8899E;
  --cocoa:#4B1528;
  --line:#ECE3D6;
  --pencil:#9C8472;
  --sprout:#93C17C;
  --sage:#A4C193;
  --butter:#F0CB72;
  --lilac:#C3B4E4;
  --shadow:rgba(120,95,60,.13);
  --shadow-lift:rgba(120,95,60,.16);

  /* 카드 색연필 테두리 기본색 */
  --card-edge:#C9B8A5;

  /* 타이포 스케일 — 토큰명은 원 스케일 유지·값만 +1~3 상향(2026-07-06 강영훈 "글씨 키우자") */
  --fs-11:12px; --fs-12:13px; --fs-13:14px; --fs-15:16px; --fs-16:17px;
  --fs-18:19px; --fs-22:24px; --fs-26:28px; --fs-30:33px;

  /* 반경 */
  --r-card:20px; --r-card-lg:24px; --r-pill:999px;

  /* 모션 */
  --e:cubic-bezier(.2,.7,.3,1);
  --t-fast:120ms; --t-mid:180ms; --t-slow:260ms;

  /* 레이아웃 — 1120→1360(2026-07-24 강영훈 폭 확장 누적·영문에서 확정 후 전 언어 통일) */
  --maxw:1360px;
  --pad-x:24px;
}

/* ---------- 리셋 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background-color:var(--paper)}
body{
  margin:0;
  position:relative;
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  color:var(--ink);
  /* 배경은 html이 칠한다(캔버스). body가 칠하면 z-index:-1 그레인이 가려짐 */
  font-size:var(--fs-16);
  line-height:1.6;
  font-weight:400;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* 종이 그레인: 순수 크림 위 은은한 웜 오버레이(콘텐츠 뒤·문서에 고정) */
body::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:url("../img/paper-grain.webp") repeat;
  background-size:640px;
  opacity:.22;
  mix-blend-mode:multiply;
  pointer-events:none;
}
img,video{max-width:100%;display:block}
[hidden]{display:none !important} /* img/video display:block 리셋이 hidden 속성을 이기지 못하게 */
h1,h2,h3,h4,p,ul,dl,dd,blockquote,figure{margin:0}
ul{list-style:none;padding:0}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

/* 포커스 */
:focus-visible{outline:2.5px solid var(--rose);outline-offset:2px;border-radius:4px}

/* ---------- 레이아웃 유틸 ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x)}
main{display:block}
section{position:relative}

.hl{color:var(--pink)}

.eyebrow{
  display:inline-block;position:relative;
  font-size:20px; /* 전 섹션 pill 확대(2026-07-07 강영훈) */
  font-weight:700;
  color:var(--rose);
  background:var(--pink-soft);
  padding:8px 20px;
  border-radius:var(--r-pill);
  letter-spacing:0;
  margin:0 0 14px;
  box-shadow:0 2px 8px var(--shadow);
}
/* 연필 테두리(카드 문법 정본을 pill에 적용) */
.eyebrow::before{
  content:'';position:absolute;inset:0;
  border:2px solid color-mix(in srgb, var(--rose) 45%, #FFF 55%);
  border-radius:inherit;filter:url(#pencilRough);pointer-events:none;
}

h1,h2,h3,h4{font-weight:800;line-height:1.28;letter-spacing:-.02em;color:var(--ink)}
h2{font-size:var(--fs-30)}
h3{font-size:var(--fs-22)}
h4{font-size:var(--fs-18)}

.section-head{max-width:640px;margin:0 auto 44px;text-align:center}
.section-head .eyebrow{margin-bottom:12px}
.section-body{margin-top:14px;color:var(--ink-soft);font-size:22px}

/* ---------- 색연필 카드 테두리 패턴 ---------- */
.pencil-edge{position:relative;border:0}
.pencil-edge::before{
  content:'';position:absolute;inset:0;
  border:2px solid var(--card-edge,#C9B8A5);
  border-radius:inherit;
  filter:url(#pencilRough);
  pointer-events:none;
}

/* =========================================================
   헤더
   ========================================================= */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background var(--t-slow) var(--e),box-shadow var(--t-slow) var(--e),border-color var(--t-slow) var(--e);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(250,240,222,.82);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom-color:var(--line);
  box-shadow:0 1px 0 var(--shadow);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.logo{display:inline-flex;align-items:center}
.logo-img{height:44px;width:auto}

.header-nav{display:flex;align-items:center;gap:14px}
.lang-switch{display:flex;align-items:center;gap:4px}
.lang-pill{
  font-size:var(--fs-13);font-weight:500;color:var(--ink-soft);
  padding:6px 11px;border-radius:var(--r-pill);
  transition:color var(--t-mid) var(--e),background var(--t-mid) var(--e);
}
.lang-pill:hover{color:var(--ink);background:var(--pink-soft)}
.lang-pill.is-active{color:var(--cocoa);background:var(--pink-soft);font-weight:700}

.cta-pill{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--fs-13);font-weight:700;color:#fff;
  background:var(--pink);
  padding:8px 16px;border-radius:var(--r-pill);
  box-shadow:0 2px 8px rgba(232,137,158,.35);
  transition:transform var(--t-mid) var(--e),box-shadow var(--t-mid) var(--e),background var(--t-mid) var(--e);
}
.cta-pill:hover{transform:translateY(-2px);background:var(--rose);box-shadow:0 5px 14px rgba(232,137,158,.42)}
.cta-pill:active{transform:scale(.97)}

/* =========================================================
   1. 히어로
   ========================================================= */
/* --- 풀블리드 영상 배너 --- */
.hero{
  position:relative;
  height:clamp(600px,88vh,1000px);
  min-height:600px;
  overflow:hidden;
  display:flex;align-items:stretch; /* 카피 컬럼을 마유 세로 스팬에 정렬(2026-07-07) */
}

/* 풀블리드 스테이지: 뷰포트 폭 가득(컨테이너 제약 해제) */
.hero-stage{
  position:absolute;inset:0;
  overflow:hidden;
}

/* 영상 · 정적 폴백: 스테이지 가득 채우는 주인공
   울트라와이드: 구도 자체를 1800px에서 캡 → 영상만 무한히 늘어나지 않고 중앙 정렬 */
.hero-video-wrap,.hero-static{
  position:absolute;inset:0;
  max-width:1800px;margin-inline:auto;
  display:flex;align-items:center;justify-content:center;
}
.hero-video-wrap[hidden],.hero-static[hidden]{display:none !important}
/* 영상(16:9): cover · 높이 87%(헤더 클리어)·폭 63%(우측 압축) — 2026-07-07 축소 2단계 */
.hero-video-wrap video,.hero-video-wrap img{
  position:absolute;right:0;bottom:0;
  width:min(63%,1020px);height:87%;
  object-fit:cover;
  object-position:50% 100%;
  transform:scaleX(-1); /* 마유가 카피를 향하도록 미러 */
  transform-origin:center;
}
/* 정적 폴백(1:1 정사각): contain으로 전신 유지 · 우측 배치(좌측 카피 공간) */
.hero-static{justify-content:flex-end;align-items:flex-end}
.hero-static img{
  width:auto;height:87%;max-width:60%;
  object-fit:contain;
  margin-right:clamp(0px,6vw,120px);
  filter:drop-shadow(0 10px 18px rgba(120,95,60,.14));
}
/* 영상 이음새 보험: 구운 크림 배경 페더(풀블리드=가장자리만 살짝)
   ellipse 명시 → 와이드에서 상하뿐 아니라 좌우도 부드럽게 페이드 */
.idle-video{
  -webkit-mask-image:radial-gradient(ellipse 100% 100% at 50% 50%,#000 78%,transparent 100%);
  mask-image:radial-gradient(ellipse 100% 100% at 50% 50%,#000 78%,transparent 100%);
}

/* 깃털: 커서 팔로워(스테이지 전체 위 부유) */
.feather{
  position:absolute;left:0;top:0;z-index:4;
  width:clamp(88px,7vw,128px);
  will-change:transform;pointer-events:none;
  transform:translate3d(0,0,0);
}
.feather img{
  width:100%;height:auto;
  filter:drop-shadow(0 6px 10px rgba(120,95,60,.16));
}
/* 터치(coarse)에선 깃털 오버레이 없음 */
@media (hover:none),(pointer:coarse){
  .feather{display:none}
}

/* 부화 인트로 레이어: 뷰포트 전체 풀커버(헤더·아래 섹션까지 덮음 · 첫 방문 브랜드 모먼트) */
.hatch-intro{
  position:fixed;inset:0;z-index:200; /* 헤더(z100) 위 */
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
  /* 인트로 배경: 종이톤으로 페이지 전체 가림 */
  background:var(--paper);
}
/* 인트로 표면도 페이지와 같은 그레인(불투명 풀커버라 body 그레인이 안 비침) */
.hatch-intro::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:url("../img/paper-grain.webp") repeat;background-size:640px;
  opacity:.22;mix-blend-mode:multiply;
}
.hatch-intro[hidden]{display:none !important}
/* 인트로 진행 중 스크롤 잠금(끝난 뒤 아래 섹션이 어중간하게 스크롤돼 있지 않도록) */
html.intro-lock,html.intro-lock body{overflow:hidden}
/* 첫 페인트 커버: head 인라인 스크립트가 페인트 전에 부여 → main.js(+GSAP CDN) 도착 전까지
   실제 화면 선노출 차단. 해제 = main.js 조기무장/finishIntro + 인라인 7s 안전핀 */
html.pre-intro{overflow:hidden}
html.pre-intro::before{
  content:'';position:fixed;inset:0;z-index:199; /* 인트로(z200) 바로 아래 */
  background:var(--paper);
}
.hatch-frame{
  width:clamp(280px,34vh,440px);height:auto;
  /* 크림 배경 구움 → 종이에 자연 융화(페더 마스크) */
  -webkit-mask-image:radial-gradient(closest-side,#000 66%,transparent 98%);
  mask-image:radial-gradient(closest-side,#000 66%,transparent 98%);
  will-change:transform,opacity;
}
.hatch-flash{
  position:absolute;left:50%;top:50%;
  width:70vh;max-width:820px;aspect-ratio:1/1;transform:translate(-50%,-50%);
  border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(255,251,240,.6) 34%,transparent 68%);
  will-change:opacity;
}

/* --- 카피 오버레이(좌측 겹침 · 뒤 크림 radial) --- */
.hero-overlay-wrap{
  position:relative;z-index:5;width:100%;
  display:flex; /* hero-copy가 히어로 전체 높이를 받도록 */
  pointer-events:none; /* 배지/링크만 클릭 가능하게 개별 복원 */
}
.hero-copy{
  position:relative;
  max-width:min(690px,56%); /* 540/44%→690/56%(2026-07-24 h1·lead 결합줄 수납·전 언어 통일) */
  /* 로고 상단=마유 머리(잎) 상단 · note 하단=발 하단 정렬 (프레임 실측 11.9%/88.9% → 히어로 계수 .234/.097)
     사이 간격 균등 분배 · 영상 크기 바꾸면 계수 재측정 필요 */
  display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;
  padding:calc(clamp(600px,88vh,1000px)*0.234) 0 calc(clamp(600px,88vh,1000px)*0.097);
}
.hero-copy > *{pointer-events:auto}
/* 히어로 eyebrow: 섹션용보다 큰 전용 사이즈(2026-07-07 강영훈 "pill 키워줘·20px") */
.hero-copy .eyebrow{margin-bottom:8px}
/* 히어로 워드마크: 카피 상단 브랜드 락업(헤더 로고보다 큰 위계) */
.hero-logo{
  height:clamp(112px,16vh,168px);width:auto;
  margin:0 0 8px;user-select:none;
  filter:drop-shadow(0 3px 8px rgba(120,95,60,.10));
}
.hero-title{
  font-size:clamp(32px,4.8vw,62px);line-height:1.38;letter-spacing:-.035em;margin:0 0 8px;
}
.lead{font-size:22px;color:var(--ink-soft);font-weight:500;margin:0 0 8px;line-height:1.75}
.lead .hl,.empathy-body .hl{font-weight:700}

.store-badges{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 6px}
.store-badge{
  display:inline-flex;border-radius:12px;
  transition:transform var(--t-mid) var(--e),box-shadow var(--t-mid) var(--e);
}
.store-badge:hover{transform:translateY(-3px);box-shadow:0 5px 12px var(--shadow-lift)}
.store-badge:active{transform:scale(.97)}
.store-badge img{height:52px;width:auto}
/* Google 배지: PNG 불투명 박스 실측(160px 캔버스 중 124px)으로 보이는 박스=애플과 동일 52px */
.store-badge-google img{height:67px;margin:-7.5px 0}
/* en 구글 배지는 아트 여백이 더 큼(박스 108/160) → 동일 52px 박스 보정 */
html[lang="en"] .store-badge-google img{height:77px;margin:-12.5px 0}

.note{font-size:var(--fs-13);color:var(--ink-soft)}

/* =========================================================
   2. 공감
   ========================================================= */
.empathy{padding:250px 0 125px} /* 최상단 간격 250 단독 · 섹션 간 125+125=250 */
.empathy-inner{
  max-width:880px;margin-inline:auto;text-align:center;
  background:var(--cream);
  border-radius:var(--r-card-lg);
  padding:60px 56px;
  position:relative;
  box-shadow:0 8px 26px rgba(120,95,60,.22); /* 강화 그림자(2026-07-07 강영훈) */
}
.empathy-inner::before{
  content:'';position:absolute;inset:0;
  border:2px solid color-mix(in srgb, var(--rose) 50%, #FFF 50%); /* pink-soft는 크림 배경에 안 보여 rose 톤으로(2026-07-07) */
  border-radius:inherit;filter:url(#pencilRough);pointer-events:none;
}
.empathy-quote{
  font-size:var(--fs-30);font-weight:800;line-height:1.55;color:var(--ink);
  letter-spacing:-.02em;position:relative;
}
.empathy-quote::before{
  content:'\201C';
  display:block;font-size:66px;line-height:.4;color:var(--pink);
  margin-bottom:12px;font-weight:800;
}
.empathy-body{margin-top:24px;font-size:24px;color:var(--ink-soft);font-weight:500}
/* en: 라틴 장문 인용의 래그 균형(미지원 브라우저는 무시) */
html[lang="en"] .empathy-quote,html[lang="en"] .empathy-body{text-wrap:balance}

/* =========================================================
   3. 핵심 특성 3블록
   ========================================================= */
.features{padding:125px 0}
.feature-block{
  display:grid;grid-template-columns:470px 1fr;gap:48px;align-items:center; /* 미디어 고정·텍스트 확장 */
  padding:60px 0;
}
.block-even{grid-template-columns:1fr 470px} /* 미디어가 우측 컬럼 */
.feature-block + .feature-block{margin-top:24px}
/* 짝수 블록: 텍스트-미디어 순서 뒤집기 (데스크톱) */
.block-even .feature-media{order:2}
.block-even .feature-text{order:1}

.feature-media{position:relative}
.media-frame{
  position:relative;border-radius:var(--r-card-lg);overflow:hidden;
  background:var(--paper); /* 영상 bg 보정색(#FDF6E3)과 동일해야 상자 경계가 사라짐 */
  aspect-ratio:1/1;max-width:420px;margin-inline:auto;
  box-shadow:0 6px 20px rgba(120,95,60,.20);
}
.media-frame::before{
  content:'';position:absolute;inset:0;z-index:2;
  border:2px solid var(--card-edge);
  border-radius:inherit;filter:url(#pencilRough);pointer-events:none;
}
/* 프레임 내부 그레인: overflow:hidden이 body 그레인을 가리므로 페이지와 같은 밀도로 자체 도포 */
.media-frame::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:url("../img/paper-grain.webp") repeat;background-size:640px;
  opacity:.22;mix-blend-mode:multiply;border-radius:inherit;
}
.media-edge-seal{--card-edge:#9FC4D8}
.media-edge-bunny{--card-edge:#C3B4E4}
.media-edge-fox{--card-edge:#A4C193}
.media-frame video,.media-frame img{
  width:100%;height:100%;object-fit:contain;padding:6%;
}

.feature-text h3{font-size:30px;margin-bottom:12px}
.feature-sub{color:var(--ink-soft);font-size:22px;font-weight:500;margin-bottom:22px}
/* 한국어: 어절 단위 줄바꿈(큰 글씨에서 조사 단독 낙하 방지) · ja/zh는 keep-all 시 넘침이라 ko 한정 */
html[lang="ko"] .feature-sub,html[lang="ko"] .feature-list li span,html[lang="ko"] .section-body,html[lang="ko"] .trust-card p,html[lang="ko"] .grow-hint,html[lang="ko"] .plan-list li{word-break:keep-all}
.feature-list{display:flex;flex-direction:column;gap:16px}
.feature-list li{display:flex;gap:13px;align-items:flex-start;font-size:18px;line-height:1.5}
.fl-icon{width:26px;height:26px;flex-shrink:0;margin-top:1px}
.feature-list li span{color:color-mix(in srgb, var(--card-edge,#C9B8A5) 34%, #2B2521 66%);padding-left:14px} /* 설명 텍스트=각 pill 배경색(하늘/세이지/라일락)과 같은 색조의 진한 버전 · 마룬 코코아 대신 중립 웜차콜에 섞어 색조 유지(대비 ~6.5:1) · padding-left로 pill 안쪽 텍스트와 시작점 정렬(pill은 margin-left로 원위치) */

/* 기능 리스트 소제목 pill: 같은 블록 안에서는 카드 엣지색 계열로 통일
   (블록에 media-edge-* 클래스로 --card-edge 상속 · SCORE/COACH/EVIDENCE 칩 대체 · 2026-07-07 강영훈) */
.feature-list li span b{
  display:block;width:fit-content; /* pill 한 줄 독점 · 설명은 다음 줄 */
  font-size:24px;font-weight:700;line-height:1.4;letter-spacing:0;
  color:color-mix(in srgb, var(--card-edge,#C9B8A5) 34%, var(--cocoa) 66%);
  background:color-mix(in srgb, var(--card-edge,#C9B8A5) 30%, #FFF 70%);
  padding:4px 14px;border-radius:var(--r-pill);
  margin:0 0 10px -14px; /* span의 padding-left 14px를 상쇄해 pill은 원래 위치(아이콘 옆) 유지 */
}

/* =========================================================
   4. 성장 시스템
   ========================================================= */
.grow{padding:125px 0;text-align:center}
.grow-strip{
  display:flex;align-items:center;justify-content:flex-start;
  gap:8px;flex-wrap:nowrap;margin-top:8px;
  overflow-x:auto;padding:8px 4px 12px;
}
/* 공간이 남으면 중앙 정렬, 넘치면 좌측부터 스크롤(중앙정렬+overflow 좌측 유실 방지) */
.grow-step:first-child{margin-left:auto}
.grow-step:last-child{margin-right:auto}
.grow-step{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  flex:0 0 auto;
}
.grow-art{
  width:200px;height:200px;border-radius:28px; /* 132→200 확대(2026-07-07 강영훈) */
  display:flex;align-items:center;justify-content:center;
  background:var(--paper);position:relative;
  box-shadow:0 6px 18px rgba(120,95,60,.19);
}
.grow-art::before{
  content:'';position:absolute;inset:0;
  border:2px solid var(--card-edge);border-radius:inherit;
  filter:url(#pencilRough);pointer-events:none;
}
.grow-art img{width:82%;height:82%;object-fit:contain}

/* 알(구운 이미지) */
.grow-egg{--card-edge:#F0CB72}
.grow-egg img{
  width:98%;height:98%;object-fit:cover;
  /* 크림 배경 구움 → 카드 크림과 자연 융화 */
  -webkit-mask-image:radial-gradient(closest-side,#000 74%,transparent 99%);
  mask-image:radial-gradient(closest-side,#000 74%,transparent 99%);
}

/* 물음표 실루엣 */
.grow-mystery{--card-edge:#C9B8A5;border:0;background:repeating-linear-gradient(135deg,var(--cream),var(--cream) 8px,#F5EAD3 8px,#F5EAD3 9px)}
.grow-mystery::before{border-style:dashed;border-color:var(--pencil)}
.grow-mystery span{font-size:76px;font-weight:800;color:var(--pencil);opacity:.55}

.grow-label{font-size:20px;font-weight:700;color:var(--ink);white-space:nowrap}
.grow-arrow{
  flex:0 0 auto;width:36px;height:2px;background:var(--pencil);opacity:.5;position:relative;
  border-radius:2px;
}
.grow-arrow::after{
  content:'';position:absolute;right:-1px;top:50%;transform:translateY(-50%) rotate(45deg);
  width:8px;height:8px;border-top:2px solid var(--pencil);border-right:2px solid var(--pencil);
}
.grow-hint{margin-top:26px;font-size:20px;color:var(--ink-soft)}

/* =========================================================
   5. 가격
   ========================================================= */
.pricing{padding:125px 0}
.plan-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;
  max-width:900px;margin-inline:auto;align-items:stretch;
}
.plan-card{
  position:relative;background:var(--cream);
  border-radius:var(--r-card-lg);padding:32px 28px;
  display:flex;flex-direction:column;
  transition:transform var(--t-mid) var(--e),box-shadow var(--t-mid) var(--e);
  box-shadow:0 6px 20px rgba(120,95,60,.20);
}
.plan-card::before{
  content:'';position:absolute;inset:0;
  border:2px solid var(--card-edge);border-radius:inherit;
  filter:url(#pencilRough);pointer-events:none;
}
.plan-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(120,95,60,.24)}
.plan-care{
  --card-edge:var(--butter);
  background:#FBF3DF; /* 샴페인 크림 — 은은한 금빛(누런기 완화)·Friend(크림 #FAF0DE)와 대비로 Care 부각(2026-07-07 강영훈) */
  /* 상시 골드 halo는 카드 자체 그림자에 병합(::after는 오빗 글린트 전용) */
  box-shadow:0 6px 20px rgba(120,95,60,.20),0 0 0 2px rgba(240,203,114,.35),0 8px 22px rgba(240,203,114,.28);
}
/* 금빛 글린트 오빗: 링 마스크(고정) 안에서 conic 디스크가 transform 회전(전 브라우저 호환 · 2026-07-07) */
.care-orbit{
  position:absolute;inset:-2.5px;border-radius:inherit;pointer-events:none;z-index:0; /* 배지 아래로 통과 */
  padding:2.5px;overflow:hidden;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.care-orbit::before{
  content:'';position:absolute;left:50%;top:50%;
  width:220%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(0deg);
  background:conic-gradient(
    rgba(240,203,114,0) 0deg, rgba(240,203,114,.55) 34deg, #FFE9A8 52deg,
    #F3D584 70deg, rgba(240,203,114,.55) 88deg, rgba(240,203,114,0) 130deg,
    rgba(240,203,114,0) 180deg, rgba(240,203,114,.4) 214deg, #FFE9A8 232deg,
    rgba(240,203,114,.4) 250deg, rgba(240,203,114,0) 292deg, rgba(240,203,114,0) 360deg);
  animation:careOrbit 3.6s linear infinite;
  will-change:transform;
}
@keyframes careOrbit{to{transform:translate(-50%,-50%) rotate(360deg)}}
/* 카드 밖으로 번지는 금빛 glow: 오빗 글린트와 같은 conic·같은 careOrbit(위상 동기)으로 회전 · 정적 프레임 마스크로 카드 밖 20px 밴드만 노출(내부 텍스트 불침범)·blur로 번짐 · 2026-07-07 강영훈 */
.care-glow{
  position:absolute;inset:-11px;border-radius:calc(var(--r-card-lg) + 9px);pointer-events:none;z-index:0; /* 배지(z1) 아래 */
  padding:11px;overflow:hidden; /* 카드 밖 11px 밴드만 노출(얇은 아우라) */
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  filter:blur(6px);
}
.care-glow::before{
  content:'';position:absolute;left:50%;top:50%;
  width:230%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(0deg);
  background:conic-gradient(
    rgba(240,203,114,0) 0deg, rgba(240,203,114,.75) 34deg, #FFE4A0 52deg,
    #F3D584 70deg, rgba(240,203,114,.75) 88deg, rgba(240,203,114,0) 130deg,
    rgba(240,203,114,0) 180deg, rgba(240,203,114,.6) 214deg, #FFE4A0 232deg,
    rgba(240,203,114,.6) 250deg, rgba(240,203,114,0) 292deg, rgba(240,203,114,0) 360deg);
  animation:careOrbit 3.6s linear infinite;
  will-change:transform;
}
.plan-care-badge{
  position:absolute;top:-13px;left:28px;z-index:1; /* 오빗 글린트 위 */
  font-size:var(--fs-12);font-weight:800;color:#fff;
  background:linear-gradient(180deg,#F3D584,#E6B24E);
  padding:5px 14px;border-radius:var(--r-pill);
  box-shadow:0 3px 8px rgba(230,178,78,.4);letter-spacing:.01em;
}
.plan-name-row{display:flex;align-items:baseline;gap:10px}
.plan-name{font-size:var(--fs-26);margin:0}
.plan-badge-label{font-size:var(--fs-12);font-weight:700;color:var(--ink-soft)}
.plan-price{font-size:var(--fs-22);font-weight:800;color:var(--cocoa);margin:12px 0 0}
.plan-price-sm{font-size:var(--fs-15);font-weight:700;color:var(--ink-soft)}
.plan-sub{font-size:var(--fs-13);color:var(--ink-soft);margin-top:6px}
.plan-list{
  display:flex;flex-direction:column;gap:11px;margin:22px 0 26px;flex:1;
}
.plan-list li{
  position:relative;padding-left:26px;font-size:var(--fs-15);line-height:1.5;color:var(--ink);
}
.plan-list li::before{
  content:'';position:absolute;left:2px;top:7px;
  width:13px;height:8px;
  border-left:2.5px solid var(--sprout);border-bottom:2.5px solid var(--sprout);
  transform:rotate(-45deg);border-radius:1px;
}
/* plan-list-rich 축소 규칙 삭제: 두 카드 리스트 텍스트 동일(2026-07-07 강영훈) */
/* Care 강조(2026-07-07): 리스트 텍스트 중간 굵기(Friend는 일반) + Friend 대비 괄호는 회색·일반으로 물러나게 */
.plan-care .plan-list li{font-weight:500}
.plan-care .plan-list li .plan-vs{font-weight:400;color:var(--ink-soft);display:inline-block}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;padding:13px 20px;border-radius:14px;
  font-size:var(--fs-15);font-weight:700;
  transition:transform var(--t-mid) var(--e),box-shadow var(--t-mid) var(--e),background var(--t-mid) var(--e);
  cursor:pointer;border:0;
}
.btn:active{transform:scale(.97)}
.btn-ghost{
  background:transparent;color:var(--cocoa);
  box-shadow:inset 0 0 0 1.5px var(--pink);
}
.btn-ghost:hover{background:var(--pink-soft)}
.btn-solid{
  background:var(--pink);color:#fff;
  box-shadow:0 3px 10px rgba(232,137,158,.35);
}
.btn-solid:hover{background:var(--rose);box-shadow:0 6px 14px rgba(232,137,158,.42);transform:translateY(-2px)}
.plan-note{text-align:center;margin-top:22px;font-size:var(--fs-12);color:var(--ink-soft)}

/* =========================================================
   6. 신뢰·안전
   ========================================================= */
.trust{padding:125px 0}
.trust-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  max-width:960px;margin-inline:auto;
}
.trust-card{
  position:relative;background:var(--cream);
  border-radius:var(--r-card);padding:28px 24px;text-align:center;
  transition:transform var(--t-mid) var(--e),box-shadow var(--t-mid) var(--e);
  box-shadow:0 6px 20px rgba(120,95,60,.20);
}
.trust-card:nth-child(1){--card-edge:#EFC3CC}
.trust-card:nth-child(2){--card-edge:#A4C193}
.trust-card:nth-child(3){--card-edge:#C3B4E4}
.trust-card::before{
  content:'';position:absolute;inset:0;
  border:2px solid var(--card-edge);border-radius:inherit;
  filter:url(#pencilRough);pointer-events:none;
}
.trust-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(120,95,60,.24)}
.trust-icon{
  width:60px;height:60px;margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;
  background:var(--paper);border-radius:16px;
}
.trust-icon img{width:34px;height:34px}
.trust-card h4{font-size:24px;margin-bottom:10px}
.trust-card p{font-size:18px;color:var(--ink-soft);line-height:1.55}

.evidence-demo{
  display:inline-flex;align-items:center;gap:8px;
  margin:32px auto 0;
  background:#EAF3E4;color:#5E8B49;
  font-size:20px;font-weight:600;
  padding:10px 20px;border-radius:var(--r-pill);
  width:fit-content;
}
.trust .wrap{display:flex;flex-direction:column;align-items:center}
.trust-grid{width:100%}
.evi-leaf{width:22px;height:22px;object-fit:contain;flex-shrink:0}

/* =========================================================
   7. 최종 CTA
   ========================================================= */
.final{padding:125px 0 250px;text-align:center} /* 최하단(푸터 앞) 250 */
.final-inner{
  max-width:640px;margin-inline:auto;
  background:var(--pink-soft);
  border-radius:var(--r-card-lg);
  padding:52px 40px;position:relative;
  box-shadow:0 6px 20px rgba(120,95,60,.20);
}
.final-inner::before{
  content:'';position:absolute;inset:0;
  border:2px solid var(--pink);border-radius:inherit;
  filter:url(#pencilRough);pointer-events:none;
}
.final h2{font-size:var(--fs-30);line-height:1.25;margin-bottom:14px}
.final p{color:var(--ink-soft);font-size:var(--fs-16);margin-bottom:28px}
.final .store-badges{justify-content:center}

/* =========================================================
   8. 푸터
   ========================================================= */
.footer{
  background:var(--cocoa);color:#F4E6DE;
  padding:40px 0 28px;margin-top:8px;
  border-radius:34px 34px 0 0;
  margin-top:-6px;
}
.footer-inner{display:flex;flex-direction:column;gap:16px}
.footer-logo{height:26px;width:auto;filter:brightness(0) invert(1);opacity:.92;margin-bottom:10px}
.footer-desc{max-width:none;font-size:12px;line-height:1.6;color:#E4CFC6}

.footer-info{
  display:grid;grid-template-columns:auto auto;gap:8px 56px;
  justify-content:start; /* 콘텐츠 폭 맞춤 → 주소 한 줄(2026-07-07) */
}
.footer-info div{display:flex;gap:8px;font-size:11px;line-height:1.55}
.footer-info dt{color:#C9A79C;flex-shrink:0;font-weight:600}
.footer-info dd{color:#EAD8D0;margin:0}

.footer-links{display:flex;align-items:center;gap:10px;font-size:12px}
.footer-links a{color:#F4E6DE;font-weight:600;transition:color var(--t-mid) var(--e)}
.footer-links a:hover{color:var(--pink)}
.footer-sep{color:#8C5E6B}

.footer-notice p{font-size:10.5px;line-height:1.6;color:#C9A79C;max-width:none}
.footer-notice p + p{margin-top:4px}
.footer-copy{font-size:10.5px;color:#A98A81;margin-top:4px}

/* =========================================================
   두들 (장식 낙서): pointer-events 없음
   ========================================================= */
.doodle{
  position:absolute;pointer-events:none;user-select:none;z-index:1;
  opacity:.85;
}
.doodle-hero-1{width:30px;top:-14px;right:8%;transform:rotate(-10deg)}
.doodle-hero-2{width:18px;bottom:16px;left:-10px;transform:rotate(8deg)}
.doodle-stage-1{width:30px;top:12%;right:9%;transform:rotate(12deg);z-index:3}
.doodle-stage-2{width:26px;bottom:14%;left:5%;transform:rotate(-8deg);z-index:3}
.doodle-empathy{width:32px;top:-14px;left:10%;transform:rotate(-12deg)}
.doodle-fb1{width:26px;top:-14px;left:8%;transform:rotate(-10deg);z-index:3}
.doodle-fb2{width:26px;top:-14px;right:8%;transform:rotate(11deg);z-index:3}
.doodle-fb3{width:28px;top:-14px;left:8%;transform:rotate(-9deg);z-index:3}
.doodle-grow{width:30px;top:36px;right:9%;transform:rotate(10deg)}
.doodle-pricing{width:28px;top:44px;left:7%;transform:rotate(-11deg)}
.doodle-trust{width:26px;top:40px;right:8%;transform:rotate(9deg)}
.doodle-final-1{width:30px;top:8%;left:11%;transform:rotate(-12deg)}
.doodle-final-2{width:26px;bottom:14%;right:12%;transform:rotate(10deg)}

/* =========================================================
   스크롤 리빌 초기 상태 (GSAP가 제어; JS 없거나 reduced-motion이면 즉시 표시)
   ========================================================= */
.js-anim .reveal{opacity:0;transform:translateY(18px)}

/* =========================================================
   히어로 부화 인트로 진행 중 상태
   .intro-armed = 인트로가 재생될 예정(JS가 스테이지에 부여) → 영상/깃털 초기 숨김.
   (hatch-intro 레이어가 종이톤 배경으로 영상 첫 프레임을 덮고, 인트로 완료 시 영상 fade-in)
   ========================================================= */
.hero-stage.intro-armed .hero-video-wrap,
.hero-stage.intro-armed .feather{opacity:0}
.feather{opacity:1}

/* 성장 스트립: 진입 pop 초기 상태(JS-anim일 때만) */
.js-anim .grow-step{opacity:0;transform:scale(.96)}

/* careShimmer 폐기: 오빗 글린트(careOrbit)로 대체 */

/* =========================================================
   반응형
   ========================================================= */
@media (max-width:900px){
  /* 모바일: 16:9 큰 배너(스테이지) 위 + 카피 아래 스택 */
  .hero{
    height:auto;min-height:0;
    flex-direction:column;
    padding:56px 0 8px; /* 헤더 아래 */
  }
  .hero-stage{
    position:relative;inset:auto;
    width:100%;aspect-ratio:16/9;
    order:1;
  }
  .hero-video-wrap video,.hero-video-wrap img{position:absolute;right:auto;width:100%;height:100%;object-fit:contain;object-position:50% 100%;transform:scaleX(-1)}
  /* 모바일 정적 폴백: 배너 중앙 · 전신(우측배치 해제) */
  .hero-static{justify-content:center}
  .hero-static img{max-width:none;width:100%;object-fit:cover;margin-right:0;transform:scale(1.04)}
  .hero-overlay-wrap{order:2;pointer-events:auto}
  .hero-copy{
    max-width:none;text-align:center;
    display:block;height:auto; /* 스택 모드: 데스크톱 정렬 스트레치 해제 */
    padding:22px 4px 4px;background:none;
    margin-inline:auto;
  }
  .hero-copy .doodle-hero-1{right:2%}
  .hero-copy .doodle-hero-2{left:2%}
  .hero-logo{height:72px;margin-inline:auto} /* 스택 모드: 중앙 정렬·축소 */
  .store-badges{justify-content:center}
  .hero-title{margin-top:4px}
}

@media (max-width:1100px){
  .feature-block,.block-even{grid-template-columns:1fr 1fr}
}

@media (max-width:768px){
  :root{--pad-x:20px}
  h2{font-size:var(--fs-26)}

  .feature-block,.block-even .feature-media,.block-even .feature-text{
    display:block;order:0;
  }
  .feature-block{padding:24px 0}
  .feature-media{margin-bottom:24px}
  .media-frame{max-width:340px}
  .feature-text{text-align:left}
  .feature-list li{font-size:var(--fs-15)}

  .plan-grid{grid-template-columns:1fr;gap:28px;max-width:440px}
  .plan-care{margin-top:6px}

  .trust-grid{grid-template-columns:1fr;max-width:400px}

  .footer-info{grid-template-columns:1fr;gap:8px}

  .empathy-inner{padding:44px 26px}
  .empathy-quote{font-size:26px}
  .final-inner{padding:44px 26px}

  /* en: 좁은 폭에서 24px pill 라벨 과대 → 한 단계 축소 */
  html[lang="en"] .feature-list li span b{font-size:20px}
  /* en: 인용·본문 강제 br는 데스크톱 폭 기준 — 모바일에선 자연 개행 */
  html[lang="en"] .empathy-quote br,html[lang="en"] .empathy-body br{display:none}
}

@media (max-width:420px){
  .header-nav{gap:8px}
  .lang-pill{padding:5px 8px;font-size:var(--fs-12)}
  .hero-title{font-size:clamp(28px,8.4vw,40px)}
}

/* =========================================================
   reduced-motion: 모든 모션 무효화, 콘텐츠 즉시 표시
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .care-orbit::before,.care-glow::before{animation-duration:7.2s !important;animation-iteration-count:infinite !important} /* 오빗+glow는 계속(감속·위상 동기) */
  .js-anim .reveal{opacity:1 !important;transform:none !important}
  .js-anim .grow-step{opacity:1 !important;transform:none !important}
  .feather{opacity:0 !important} /* reduced-motion: 깃털 추적 없음 → 숨김 */
  .plan-care:hover::after{animation:none !important}
}

/* 모바일 헤더 컴팩트: 375px 줄바꿈 방지 (Advisor fix)
   2026-07-24 밤: 언어 스위처 축약형(EN·한·日·中)으로 전환해 앱 다운로드 CTA 복원(강영훈 "모바일에 앱다운로드가 없어") */
.lp-s{display:none}
@media (max-width:520px){
  .header-inner{gap:8px}
  .logo-img{height:28px}
  .header-nav{gap:6px}
  .lang-switch{gap:2px;flex-wrap:nowrap}
  .lang-pill{padding:4px 7px;font-size:11px;white-space:nowrap}
  .lp-l{display:none}
  .lp-s{display:inline}
  .header-cta{font-size:11px;padding:5px 10px;white-space:nowrap}
}


/* =========================================================
   Three.js 꽃잎·반짝임 파티클 캔버스(JS 주입)
   그레인(z2) 위 · 스테이지 두들(z3) 아래 · 매트 2D(글로우/블러 없음)
   ========================================================= */
.hero-particles{
  position:absolute;inset:0;z-index:2;
  width:100%;height:100%;
  pointer-events:none;
  /* 그레인 ::after 와 동일 레이어지만 DOM상 나중 주입 → 위에서 페인트 */
}

/* h1 word-rise: 분할된 word 스팬은 인라인블록(transform 개별 적용) */
.hero-title.title-split{white-space:normal}
.hero-title .word{
  display:inline-block;
  will-change:transform,opacity;
}
/* .hl 이 word로 감싸져도 강조색 유지 */
.hero-title .word.hl{color:var(--pink)}
/* split 되기 전(JS 전) 통짜 h1은 .reveal 기본 규칙 따름 */

/* 성장 스트립 스크럽: egg 슬롯에 hatch 겹 img 절대 적층 */
.grow-egg.grow-egg-scrub{position:relative}
.grow-egg .grow-egg-layer{
  position:absolute;left:0;top:0;
  width:98%;height:98%;
  left:1%;top:1%;
  object-fit:cover;
  -webkit-mask-image:radial-gradient(closest-side,#000 74%,transparent 99%);
  mask-image:radial-gradient(closest-side,#000 74%,transparent 99%);
  pointer-events:none;
  will-change:opacity;
}

/* ::selection · 웹킷 스크롤바 코코아 톤 */
::selection{background:var(--pink-soft);color:var(--cocoa)}
::-webkit-selection{background:var(--pink-soft);color:var(--cocoa)}
html::-webkit-scrollbar{width:10px;height:10px}
html::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-thumb{
  background:rgba(75,21,40,.28);
  border-radius:999px;
  border:2px solid var(--paper);
}
html::-webkit-scrollbar-thumb:hover{background:rgba(75,21,40,.42)}

/* reduced-motion: 파티클/워드라이즈/스크럽 레이어 무효화 */
@media (prefers-reduced-motion:reduce){
  .hero-particles{display:none !important}
  .hero-title .word{transform:none !important;opacity:1 !important}
  .grow-egg .grow-egg-layer{display:none !important}
}

/* 커서 깃털 비활성: 배너 영상에 깃털 스토리가 내장됨(중복 방지).
   복원하려면 이 블록을 삭제하라. (Advisor · 2026-07-06) */
#featherEl{display:none !important}

/* 스크롤 큐(장식 · JS 주입) */
.scroll-cue{
  position:absolute;left:50%;bottom:22px;z-index:6;
  width:13px;height:13px;margin-left:-7px;
  border-right:2.5px solid var(--pencil);border-bottom:2.5px solid var(--pencil);
  border-radius:2px;transform:rotate(45deg);opacity:.55;
  animation:cueBob 2.2s var(--e) infinite;pointer-events:none;
}
@keyframes cueBob{
  0%,100%{transform:rotate(45deg) translate(0,0)}
  50%{transform:rotate(45deg) translate(4px,4px)}
}
@media (prefers-reduced-motion: reduce){.scroll-cue{animation:none}}

/* h1 세이프티: 워드 분할 후 컨테이너는 어떤 리빌 재무장에도 숨지 않는다
   (등장 연출은 .word 레벨 · 모바일 h1 소실 레이스 수정 · Advisor) */
.hero-title.title-split{opacity:1 !important;transform:none !important}

/* 언어별 h1 스케일 보정: 라틴/CJK 줄바꿈 밀도 차이 (Advisor) */
html[lang="en"] .hero-title{font-size:clamp(24px,2.8vw,35px);letter-spacing:-.005em;line-height:1.24} /* 데스크톱 2줄(35px 캡) · 모바일 하한 24px(2026-07-24 밤 "모바일 더 작게") */
/* 카피 컬럼 축소는 데스크톱 한정 — 무스코프 시 모바일 스택의 max-width:none을 이겨 154px 컬럼 붕괴 */
@media (min-width:901px){
  html[lang="en"] .hero-title br.h1-m{display:none} /* 첫 br=모바일 전용(데스크톱 2줄·모바일 3줄 유지) · 카피 폭은 base .hero-copy(690/56%)로 통일 */
}
/* lead 결합줄("journey, from before ~ stop.")은 1280px 이상에서만 1줄 — 미만은 기존 3줄 스탠자 */
@media (min-width:1280px){
  html[lang="en"] .lead br.lead-m{display:none}
}
html[lang="ja"] .hero-title,html[lang="zh-Hans"] .hero-title{font-size:clamp(30px,4vw,52px)}

/* =========================================================
   디자인 폴리시(2026-07-24) — 영문에서 확정 후 전 언어 이식(강영훈 "다른 언어도 적용"):
   언어 중립(폭·그리드·색·인트로/Egg 영상·정렬)=무스코프 전역 · 라틴 전용(서체·자간·이탤릭·영문 줄바꿈 장치)=html[lang="en"]
   ========================================================= */

/* ── B안 서체 페어링 채택(2026-07-24 강영훈 "B로 가자") — 제목·pill·버튼=Baloo 2 · 본문=Nunito · CJK·미로드 폴백=Pretendard · 라틴 전용 ── */
html[lang="en"]{
  --ff-display:'Baloo 2','Nunito','Pretendard Variable',Pretendard,sans-serif;
  --ff-body:'Nunito','Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
}
html[lang="en"] body{font-family:var(--ff-body)}
html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3,html[lang="en"] h4,
html[lang="en"] .eyebrow,html[lang="en"] .feature-list li span b,
html[lang="en"] .plan-care-badge,html[lang="en"] .plan-badge-label,
html[lang="en"] .grow-label,html[lang="en"] .btn,html[lang="en"] .cta-pill,
html[lang="en"] .evidence-demo,html[lang="en"] .lang-pill{font-family:var(--ff-display)}
html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3,html[lang="en"] h4{letter-spacing:-.005em} /* Baloo 2는 자체 폭이 넉넉 — 한글용 강한 음수 자간 해제 */
html[lang="en"] .empathy-quote{font-style:italic} /* Nunito 정식 이탤릭 — "사용자 목소리" 액센트(시안 5번 승인) */

/* ── 부화 인트로 v2(2026-07-24 강영훈): 영상 부화 + EXP 로딩 바(목업 '부화까지' 게이지 문법 이식) — 전 언어(라벨만 언어별) ── */
.hatch-intro{flex-direction:column;gap:30px}
.hatch-slot{position:relative;display:flex;align-items:center;justify-content:center}
.hatch-video{
  position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:radial-gradient(closest-side,#000 66%,transparent 98%);
  mask-image:radial-gradient(closest-side,#000 66%,transparent 98%);
  will-change:opacity;
}
.hatch-load{width:min(300px,64vw);text-align:center}
.hatch-load-track{
  position:relative;height:12px;border-radius:999px;background:#F1E6D0;overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(120,95,60,.16);
}
.hatch-load-track::before{
  content:'';position:absolute;inset:0;z-index:2;
  border:2px solid color-mix(in srgb, var(--rose) 40%, #FFF 60%);
  border-radius:inherit;filter:url(#pencilRough);pointer-events:none;
}
.hatch-load-fill{
  display:block;height:100%;width:0%;border-radius:999px;position:relative;overflow:hidden;
  background:linear-gradient(90deg,var(--pink),color-mix(in srgb, var(--pink) 55%, #fff));
  transition:width .3s var(--e);
}
.hatch-load-fill::after{
  content:'';position:absolute;inset:0;
  background:url("../img/paper-grain.webp") repeat;background-size:90px;
  opacity:.3;mix-blend-mode:multiply;
}
.hatch-load-label{margin-top:10px;font-family:var(--ff-display,inherit);font-size:16px;font-weight:700;color:#C95E77;letter-spacing:.02em}

/* 성장 스트립 Egg 슬롯 부화 영상(전 언어·뷰포트 진입 1회 재생·끝 프레임 정지) — 층 스크럽 지오메트리·마스크 승계 */
.grow-egg-video{
  position:absolute;left:1%;top:1%;width:98%;height:98%;object-fit:cover;
  opacity:0;transition:opacity .45s var(--e);pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 68% 66% at 50% 52%,#000 50%,transparent 86%);
  mask-image:radial-gradient(ellipse 68% 66% at 50% 52%,#000 50%,transparent 86%);
}
@media (prefers-reduced-motion:reduce){.grow-egg-video{display:none !important}}
.eyebrow{color:#C95E77} /* rose보다 한 단계 깊은 동일 계열 — pink-soft 대비 2.0→3.2:1 */
.lead .hl,.empathy-body .hl{color:#CE6680} /* 본문 강조 가독 2.0→3.3:1 · h1 .hl은 브랜드 핑크 유지 */
.plan-care-badge{color:var(--cocoa)} /* 골드 위 화이트 1.9:1 → 코코아 7.5:1 */
.plan-price-sm{line-height:calc(var(--fs-22)*1.6)} /* Friend 가격줄과 동일 행높이 → 두 카드 리스트 시작점 정렬 */
.fl-icon{margin-top:8px} /* pill 첫 줄(42px) 세로 중앙: (42-26)/2 */
.final p{font-size:var(--fs-18)} /* 타 섹션 본문 대비 위계 정합(17→19px) */
/* 스테이지 하트: 좌측 마진이 얇은 구간(901~1560px·frame 1360 기준)에서 카피·배지와 겹침 → 숨김(모바일 스택은 배너 안이라 유지) */
@media (min-width:901px) and (max-width:1560px){.doodle-stage-2{display:none}}
/* lead 3줄 스탠자(2026-07-24 강영훈 "from before~ / A companion~ 줄 바꿈"):
   데스크톱=19px로 최장 줄(A companion~) 1줄 수납 · 스택(≤900px)=br 해제·자연 개행(22px 유지) */
@media (min-width:901px){html[lang="en"] .lead{font-size:19px}}
@media (max-width:900px){html[lang="en"] .lead br,html[lang="en"] .section-body br{display:none}}
/* ── 영문 가독성 패스(2026-07-24 강영훈 "영문 가독성 낮음") — 회사 사이트(habitushealth.app) 타이포 원칙 이식:
   ①라틴 트래킹 리셋(한글용 음수 자간이 라틴 본문을 조임 → 0)
   ②읽는 본문=잉크 승격 #63513F(4.5→7.0:1) · 캡션(note/plan-sub/plan-vs 등)만 ink-soft 유지
   ③measure 캡: 본문 60~75자/줄(1240 프레임 확장 부작용 보정) ── */
html[lang="en"] body{letter-spacing:0} /* 라틴 전용(CJK는 음수 자간 유지) */
.lead,.section-body,.feature-sub,.trust-card p,.empathy-body,.grow-hint,
.final p{color:#63513F} /* 읽는 본문 잉크 승격(4.5→7.0:1) — 전 언어 */
/* 특성 리스트 설명=1줄 지향(강영훈 2026-07-24 "한 줄로·width 넓혀"): 미디어 컬럼 470→430(프레임은 420 고정=시각 불변)으로 텍스트 +40px.
   리드문(feature-sub·멀티라인 본문)만 measure 캡 유지 · base 1100px 브레이크포인트와 충돌하지 않게 스코프 */
@media (min-width:1101px){
  .feature-block{grid-template-columns:430px 1fr} /* 미디어 프레임은 420 고정=시각 불변·텍스트 +40px */
  .block-even{grid-template-columns:1fr 430px}
}
@media (min-width:769px){html[lang="en"] .feature-sub{font-size:20px}} /* 라틴 전용·데스크톱 한정(모바일 누수 방지) */
.plan-grid{max-width:none} /* 가격 리스트 1줄: 900 캡 해제→카드당 ~640px */
.trust-grid{max-width:none} /* 신뢰 카드 타이틀 1줄: 960 캡 해제→카드당 ~420px */
/* 특성 블록 타이틀=카드 테두리 색조(2026-07-24 강영훈 "테두리와 동일한 색"): 파스텔 원색은 대비 1.6:1로 부적합 →
   pill 텍스트 문법(color-mix+cocoa) 승계·엣지 비중 55%로 색감 강화(대비 ~4.1:1=대형 텍스트 통과) */
.feature-text h3{color:color-mix(in srgb, var(--card-edge,#C9B8A5) 55%, var(--cocoa) 45%)}
.section-head{max-width:1100px} /* 섹션 본문 1줄 수납(영문 최장 100자≈1,020px 기준·CJK는 여유) */
/* 푸터 소개문=1줄(2026-07-24 강영훈): 1360 프레임에서 전 언어 한 줄 수납 — measure 캡 해제 · 고지문은 en만 물리적으로 길어 캡 유지 */
.footer-desc{max-width:none}
html[lang="en"] .footer-notice p{max-width:720px}
/* 푸터 회사명 백링크(→habitushealth.app) — 회사 사이트 관례: 밑줄은 호버만 */
.footer-corp-link{font-weight:600;transition:color var(--t-mid) var(--e)}
.footer-corp-link:hover{color:var(--pink);text-decoration:underline;text-underline-offset:2px}

/* 공감 카드: 와이드 배너(전 언어) · 인용 31px는 라틴 전용 수납 보정(CJK는 기본 33px) */
@media (min-width:769px){
  .empathy-inner{max-width:min(1100px,calc(100% - 48px))} /* 1100 미만 뷰포트에서 카드가 화면 양끝에 붙지 않게 좌우 24px 확보 */
  html[lang="en"] .empathy-quote{font-size:31px}
}

/* 영상 가장자리 = 종이색 덧칠 페이드(좌·상·하) · 마스크 대체 (Advisor seam fix) */
.hero-video-wrap::after{
  content:'';position:absolute;bottom:0;right:0;height:87%;
  width:min(63%,1020px);z-index:1;pointer-events:none;
  background:
    linear-gradient(to right, #FDF6E3 0%, rgba(253,246,227,0) 18%),
    linear-gradient(to left, #FDF6E3 0%, rgba(253,246,227,0) 8%), /* 캡 초과 와이드: 우측 모서리도 종이로 융화 */
    linear-gradient(to bottom, #FDF6E3 0%, rgba(253,246,227,0) 13%),
    linear-gradient(to top, #FDF6E3 0%, rgba(253,246,227,0) 12%);
}

/* 스택 레이아웃(<=900px): 오버레이를 전폭 대칭 페이드로 교체 (Advisor seam fix 2) */
@media (max-width:900px){
  .hero-video-wrap::after{
    width:100%;right:0;top:0;height:auto;
    background:
      linear-gradient(to right, #FDF6E3 0%, rgba(253,246,227,0) 7%),
      linear-gradient(to left, #FDF6E3 0%, rgba(253,246,227,0) 7%),
      linear-gradient(to bottom, #FDF6E3 0%, rgba(253,246,227,0) 10%),
      linear-gradient(to top, #FDF6E3 0%, rgba(253,246,227,0) 9%);
  }
}

/* 영상 박스 그레인 패치: 영상 배경 = 페이지 종이와 동일 질감 (Advisor root fix) */
.hero-video-wrap::before{
  content:'';position:absolute;bottom:0;right:0;height:87%;
  width:min(63%,1020px);z-index:2;pointer-events:none; /* 페이드(z1) 위에 그레인 = 밝은 띠 제거 */
  background:url(../img/paper-grain.webp) repeat;background-size:640px;
  mix-blend-mode:multiply;opacity:.23;
}
@media (max-width:900px){
  .hero-video-wrap::before{width:100%;top:0;height:auto}
}

/* 특성 미디어 정적 이미지: 베이크드 배경 가장자리 페이드 (Advisor) */
.feature-media img{
  -webkit-mask-image:radial-gradient(ellipse 100% 100% at 50% 50%,#000 74%,transparent 99%);
  mask-image:radial-gradient(ellipse 100% 100% at 50% 50%,#000 74%,transparent 99%);
}
/* 성장 스트립: 피사체 크기별 차등 마스크(글로우 사각 크롭 융해 · Advisor) */
.grow-art img{
  -webkit-mask-image:radial-gradient(ellipse 100% 100% at 50% 50%,#000 74%,transparent 98%);
  mask-image:radial-gradient(ellipse 100% 100% at 50% 50%,#000 74%,transparent 98%);
}
.grow-egg img,.grow-egg .grow-egg-layer{
  /* 타원 반경을 박스보다 작게 → 변 중앙부터 글로우가 종이로 융화(사각 잔상 소거 · 2026-07-07) */
  -webkit-mask-image:radial-gradient(ellipse 68% 66% at 50% 52%,#000 50%,transparent 86%) !important;
  mask-image:radial-gradient(ellipse 68% 66% at 50% 52%,#000 50%,transparent 86%) !important;
}
/* 아이콘 타일: 목업 rec-ic 문법(연필 링 + 따뜻한 미니 그림자) */
.trust-icon{position:relative;box-shadow:0 2px 6px var(--shadow)}
.trust-icon::before{
  content:'';position:absolute;inset:0;
  border:2px solid color-mix(in srgb, var(--card-edge,#C9B8A5) 75%, var(--cocoa) 25%);
  border-radius:inherit;filter:url(#pencilRough);pointer-events:none;opacity:.75;
}


/* =========================================================
   모든 pill: 연필 테두리 + 웜 그림자 (2026-07-07 강영훈 · eyebrow와 동일 문법)
   ========================================================= */
.feature-list li span b{position:relative;box-shadow:0 2px 8px var(--shadow)}
.feature-list li span b::before{
  content:'';position:absolute;inset:0;
  border:2px solid color-mix(in srgb, var(--card-edge,#C9B8A5) 72%, #FFF 28%);
  border-radius:inherit;filter:url(#pencilRough);pointer-events:none;
}
.evidence-demo{position:relative;box-shadow:0 2px 8px var(--shadow)}
.evidence-demo::before{
  content:'';position:absolute;inset:0;
  border:2px solid color-mix(in srgb, var(--sprout) 62%, #FFF 38%);
  border-radius:inherit;filter:url(#pencilRough);pointer-events:none;
}
.cta-pill{position:relative}
.cta-pill::before{
  content:'';position:absolute;inset:0;
  border:2px solid color-mix(in srgb, var(--rose) 68%, var(--cocoa) 32%);
  border-radius:inherit;filter:url(#pencilRough);pointer-events:none;opacity:.85;
}
.plan-care-badge::before{
  content:'';position:absolute;inset:0;
  border:2px solid color-mix(in srgb, #E6B24E 68%, var(--cocoa) 32%);
  border-radius:inherit;filter:url(#pencilRough);pointer-events:none;opacity:.9;
}
.lang-pill.is-active{position:relative;box-shadow:0 2px 8px var(--shadow)}
.lang-pill.is-active::before{
  content:'';position:absolute;inset:0;
  border:2px solid color-mix(in srgb, var(--rose) 45%, #FFF 55%);
  border-radius:inherit;filter:url(#pencilRough);pointer-events:none;
}


/* =========================================================
   여백 산포 두들(JS 주입 · 2026-07-07) — 콘텐츠 밖 마진 전용 · 본문 방해 금지
   ========================================================= */
.doodle-extra{opacity:.6}
.doodle-x1{width:24px;top:70px;right:9%;transform:rotate(8deg)}
.doodle-x2{width:26px;top:34%;left:4.5%;transform:rotate(-10deg)}
.doodle-x3{width:22px;top:66%;right:4.5%;transform:rotate(12deg)}
.doodle-x4{width:20px;bottom:160px;left:8%;transform:rotate(-14deg)}
.doodle-x5{width:30px;top:150px;right:7%;transform:rotate(6deg)}
.doodle-x6{width:20px;top:40%;right:4.5%;transform:rotate(10deg)}
.doodle-x7{width:24px;bottom:170px;left:6%;transform:rotate(-6deg)}
.doodle-x8{width:26px;bottom:130px;left:6%;transform:rotate(-8deg)}
.doodle-x9{width:18px;bottom:100px;left:13%;transform:rotate(-12deg)}
/* 좁은 화면: 마진이 얇아져 본문과 겹칠 수 있어 숨김 */
@media (max-width:1200px){.doodle-extra{display:none !important}}

/* =========================================================
   모바일 타이포 컴팩트(2026-07-24 강영훈 "모바일 글씨 줄이고 title 되도록 한 줄")
   375px 실측 기반 — 전 언어 공통 축소 + 영문 타이틀 1줄 보장 스코프(파일 최후단=최우선 캐스케이드)
   ========================================================= */
@media (max-width:768px){
  /* 2~3차 축소(2026-07-24 밤 "더 줄여도" ×2): 가독 하한선(본문 14~15·캡션 12) · 타이틀 1줄 보장은 자동 유지 */
  .hero-title{font-size:24px} /* CJK(ko) 스택 히어로 */
  html[lang="ja"] .hero-title,html[lang="zh-Hans"] .hero-title{font-size:24px}
  .eyebrow{font-size:15px;padding:5px 14px}
  .feature-list li span b{font-size:18px} /* CJK pill */
  html[lang="en"] .feature-list li span b{font-size:16px}
  .feature-list li{font-size:14px}
  h2{font-size:20px}
  .final h2{font-size:20px}
  .feature-text h3{font-size:19px}
  .trust-card h4{font-size:18px}
  .lead{font-size:15px}
  .section-body{font-size:15px}
  .feature-sub{font-size:15px}
  .empathy-quote{font-size:19px}
  .trust-card p{font-size:15px}
  .empathy-body{font-size:15px}
  .grow-label{font-size:14px}
  .grow-hint{font-size:13px}
  .evidence-demo{font-size:14px}
  .final p{font-size:14px}
  .plan-name{font-size:19px}
  .plan-price{font-size:18px}
  .plan-list li{font-size:14px}
  .plan-sub{font-size:12px}
  .btn{font-size:14px}
  .note{font-size:12px}
  .hatch-load-label{font-size:13px}
  /* 영문 타이틀 1줄 보장(실측 한계 20/19px보다 작게 → 전부 1줄) */
  html[lang="en"] .section-head h2,html[lang="en"] .final h2{font-size:19px} /* 1줄 한계 20px 이내 */
  html[lang="en"] .feature-text h3{font-size:18px} /* 1줄 한계 19px 이내 */

  /* 모바일 수직 리듬(2026-07-24 밤 "섹션 간격 크고 내부는 좁다"): 섹션 간 대폭 축소 + 내부 스택 소폭 확대 */
  .empathy{padding:88px 0 48px}
  .features,.grow,.trust,.pricing{padding:48px 0}
  .final{padding:48px 0 88px}
  .section-head{margin-bottom:28px}
  .feature-block{padding:20px 0}
  .feature-block + .feature-block{margin-top:8px}
  .empathy-inner{padding:36px 22px}
  .final-inner{padding:36px 22px}
  .grow-hint{margin-top:18px}
  .evidence-demo{margin-top:24px}
  .plan-note{margin-top:16px}
  /* 내부 숨통 */
  .hero-copy{padding:26px 4px 8px}
  .hero-logo{height:60px}
  .hero-copy .eyebrow{margin-bottom:10px}
  .hero-title{margin-top:6px;margin-bottom:10px}
  .lead{margin-bottom:12px}
  .store-badges{gap:10px;margin-bottom:8px;flex-wrap:nowrap;justify-content:center}
  /* 배지 40px 박스로 축소 → 375px에서 두 개 나란히(구글 PNG 여백 보정도 동비율 40/52 스케일) */
  .store-badge img{height:40px}
  .store-badge-google img{height:51.5px;margin:-5.75px 0}
  html[lang="en"] .store-badge-google img{height:59px;margin:-9.5px 0}
  .feature-list{gap:18px}
  .feature-media{margin-bottom:20px}
  .plan-list{gap:12px}

  /* 성장 3단계=한 화면(2026-07-24 밤 강영훈 "좌우 스크롤 말고 한 화면에") — 카드 유동 축소·스크롤 제거 */
  .grow-strip{overflow-x:visible;justify-content:center;gap:3px;padding:8px 0 10px}
  .grow-step{gap:8px}
  .grow-step:first-child{margin-left:0}
  .grow-step:last-child{margin-right:0}
  .grow-art{width:min(26vw,120px);height:auto;aspect-ratio:1/1;border-radius:16px}
  .grow-mystery span{font-size:38px}
  .grow-arrow{width:12px}
  /* 풀블리드 카드(.wrap 자신)가 화면 양끝에 붙는 문제 — 좌우 16px 확보 */
  .empathy-inner,.final-inner{max-width:calc(100% - 32px)}
}