/* ==========================================================================
   Landing v2 — 의사랑 AI 랜딩 리디자인
   - aiMedicalStyle.css 의 :root 토큰 / @font-face / reset / .btn-* 를 재사용.
   - 이 파일은 v2 전용 컴포넌트만 정의하며 모든 규칙은 .lv2 네임스페이스 하위.
   - Figma "Landing v2" (1920×9006) 기반. 히어로 인트로 애니메이션은 Figma
     motion 데이터의 타임라인/이징을 CSS @keyframes 로 재현.
   ========================================================================== */

/* Jalnan Gothic (여기어때 잘난체 고딕, 무료·상업사용 가능) — Figma 헤딩/숫자/배지 폰트.
   자체 호스팅. 단일 웨이트라 font-weight: 100 900 로 전 굵기 매핑해 faux-bold 방지. */
@font-face {
  font-family: 'Jalnan Gothic';
  src: url('../font/JalnanGothic.woff2') format('woff2'),
       url('../font/JalnanGothic.woff') format('woff');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* JeonjuCraft Go (전주크래프트체 Go, 무료·상업사용 가능) — Figma 히어로 설명 / 최종 CTA 가격 폰트.
   자체 호스팅. 단일 웨이트라 font-weight: 100 900 로 전 굵기 매핑. */
@font-face {
  font-family: 'JeonjuCraft Go OTF';
  src: url('../font/JeonjuCraftGo.woff2') format('woff2'),
       url('../font/JeonjuCraftGo.woff') format('woff');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

.lv2 {
  /* v2 전용 토큰 */
  --lv2-lavender: #f2effc;
  --lv2-lavender-2: #efeaFb;
  --lv2-ink: #0b0b14;
  --lv2-brand: var(--Color-Surface-Brand, #4b30f3);
  --lv2-brand-2: #6a4bf5;
  --lv2-card: #ffffff;
  --lv2-stroke: #e7e3f6;
  --lv2-text: var(--Color-Text-OnBG-Primary, #222222);
  --lv2-text-2: var(--Color-Text-OnBG-Secondary, #666666);
  --lv2-text-3: var(--Color-Text-OnBG-Tertiary, #999999);

  --lv2-container: 1680px;   /* Figma 콘텐츠 폭(1920 - 240 마진) */
  --lv2-heading-grad: linear-gradient(96deg, #6b4bf5 0%, #4b30f3 26%, #211b3d 88%);
  --lv2-hero-anim: 4s; /* 히어로 인트로 마스터 길이 (4,000ms 1회) */

  width: 100%;
  min-width: 1200px;
  background: linear-gradient(180deg, #fff 14.39%, #edebff 100%);
  color: var(--lv2-text);
  font-family: 'Pretendard Variable', 'Pretendard', -apple-system, sans-serif;
  overflow-x: hidden;
}

.lv2 * { box-sizing: border-box; }

.lv2 .container {
  width: 100%;
  max-width: var(--lv2-container);
  margin: 0 auto;
  padding: 0 24px;
}

/* Shared eyebrow badge (pill) ------------------------------------------------ */
.lv2-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 9999px;
  background: #ffffff;
  border: 1px solid var(--lv2-stroke);
  box-shadow: 0 2px 10px rgba(75, 48, 243, .07);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: var(--lv2-brand);
  white-space: nowrap;
}

/* Gradient section heading --------------------------------------------------- */
.lv2-heading {
  font-size: 46px;
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -1.4px;
  background: var(--lv2-heading-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.lv2-subhead {
  margin-top: 18px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -.2px;
  color: var(--lv2-text-2);
}

/* Section header (centered) -------------------------------------------------- */
.lv2-shead {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}

/* ==========================================================================
   NAV
   ========================================================================== */
.lv2-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 18px 24px;
  transition: background-color .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}

.lv2-nav__inner {
  width: 100%;
  max-width: 1600px;               /* Figma Nav-bar 1600 (좌 160 / 우 1760) — 히어로 헤드라인 좌단과 정렬 */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lv2-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* 히어로 위에서는 흰색 아이콘 (Figma Color/Icon/OnFill/Primary #fff), 퍼플 SVG → 필터로 흰색 */
.lv2-nav__brand img { width: 28px; height: 28px; filter: brightness(0) invert(1); }

.lv2-nav__brand .name {
  font-size: 30px;                 /* Figma Heading-xl (30px 볼드) */
  font-weight: 700;
  letter-spacing: -.3px;
  color: #fff;
}

/* nav-actions: 링크 2개 + 시작 버튼 (Figma Nav-bar) */
.lv2-nav__actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.lv2-nav__link {
  display: inline-flex;
  align-items: center;
  height: 50px;
  padding: 0 18px;
  font-size: 18px;                 /* Figma Body-md (18px 볼드) */
  font-weight: 700;
  color: #fff;
  border-radius: 9999px;
  transition: background-color .15s ease;
}
.lv2-nav__link:hover { background: rgba(255, 255, 255, .12); }

.lv2-nav__start {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 190px;                 /* Figma Button-start 고정 폭 */
  height: 50px;
  justify-content: center;
  padding: 0 20px;
  border-radius: 24px;
  background: #fff;
  color: var(--lv2-text);       /* 다크 텍스트 #222 */
  font-size: 18px;              /* Figma Title/S Bold (18px) */
  font-weight: 700;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
/* Figma 호버(State2 · 1414:18761): Brand-20 = #4B30F3 투명도 20% + 흰 텍스트/화살표 (히어로 위) */
.lv2-nav:not(.is-scrolled) .lv2-nav__start:hover { background: rgba(75, 48, 243, .2); color: #fff; }
.lv2-nav:not(.is-scrolled) .lv2-nav__start:hover .lv2-nav__arrow { filter: brightness(0) invert(1); }

.lv2-nav__arrow {
  width: 16px;
  height: 16px;
  background: url('../images/icon-arrow-cta.svg') no-repeat center / contain;
  filter: brightness(0);  /* 흰색 SVG → 다크 화살표 (흰 버튼 위) */
}

/* nav turns to light glass once scrolled past hero */
.lv2-nav.is-scrolled {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  box-shadow: 0 1px 0 rgba(11, 11, 20, .06), 0 6px 22px rgba(75, 48, 243, .06);
}

.lv2-nav.is-scrolled .lv2-nav__brand .name { color: var(--lv2-text); }
.lv2-nav.is-scrolled .lv2-nav__brand img { filter: none; }   /* 밝은 글래스 nav 에선 퍼플 로고 복원 */
.lv2-nav.is-scrolled .lv2-nav__link { color: var(--lv2-text-2); }
.lv2-nav.is-scrolled .lv2-nav__link:hover { color: var(--lv2-text); background: rgba(0, 0, 0, .04); }
.lv2-nav.is-scrolled .lv2-nav__start { background: var(--lv2-brand); color: #fff; }
.lv2-nav.is-scrolled .lv2-nav__arrow { filter: brightness(0) invert(1); }

/* ==========================================================================
   HERO
   ========================================================================== */
.lv2-hero {
  position: relative;
  z-index: 1;                      /* 라이트 글로우(.lv2-lightbg z:0)가 히어로 하단으로 새지 않게 */
  margin-top: -86px;               /* nav 높이(패딩36+콘텐츠50)만큼 위로 완전 밀착 */
  /* 첫 화면(hero-bg-active 1442:13942)을 뷰포트 높이에 맞추고 콘텐츠를 세로 중앙에.
     nav 겹침(-86px)만큼 더해 뷰포트를 꽉 채움. */
  min-height: calc(100vh + 86px);
  display: flex;
  flex-direction: column;          /* 상단: 헤드라인+창 / 하단 중앙: CTA */
  padding: 120px 24px clamp(56px, 6.5vw, 124px);
  overflow: hidden;
  /* 어두운 베이스만 정적으로 두고, 색·밝기는 움직이는 글로우가 담당 (일렁임이 보이도록) */
  background: linear-gradient(158deg, #121125 0%, #1a1540 46%, #221a58 100%);
  color: #fff;
}

/* animated background glows */
.lv2-hero__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

/* ===== 히어로 배경 글로우 — Figma 9개 노드(위치·색·모션 그대로) =====
   위치는 Figma 좌표를 1920(폭) × 1354(히어로 배경 높이 H) 기준 %로 변환.
   .lv2-glow 는 중심 좌표에 배치(translate -50%), 실제 SVG(블러 내장)를 사용. */
.lv2-glow { position: absolute; transform: translate(-50%, -50%); }
.lv2-glow > img {
  display: block;
  width: 100%;
  height: auto;
  will-change: transform, opacity;
  transform-origin: center center;
  /* 글로우가 겹칠 때 빛이 더해지도록(additive) — Figma의 발광 배경 재현 */
  mix-blend-mode: screen;
}

/* 위치(중심 left%/top%) · 크기(width% of 1920) */
.lv2-glow--blue     { left: 7%;   top: 64%; width: 35%; }   /* glow-blue-left  #6680B2 (정적) */
.lv2-glow--indigo   { left: 8%;   top: 98%; width: 31%; }   /* glow-indigo-corner #304DBE (정적) */
.lv2-glow--darknavy { left: 65%;  top: 62%; width: 30%; }   /* glow-dark-navy  #122570 (정적) */
.lv2-glow--purple   { left: 33%;  top: 30%; width: 66%; }   /* glow-purple-top #722FB7 */
.lv2-glow--deep     { left: 65%;  top: 95%; width: 59%; }   /* glow-deep-purple #382686 */
.lv2-glow--navy     { left: 92%;  top: 85%; width: 66%; }   /* glow-navy-center #2E379E */
.lv2-glow--dleft    { left: 14%;  top: 85%; width: 25%; }   /* deco-glow-left  #71DAEC (시안) */
.lv2-glow--dright   { left: 121%; top: 24%; width: 25%; }   /* deco-glow-right #71DAEC (시안) */
.lv2-glow--violet   { left: 93%;  top: 98%; width: 38%; }   /* glow-violet-corner (우하단 발광) */

/* 모션 — Figma 타임라인(4초 1회 재생) 그대로. blue/indigo/darknavy 는 정적. */
.lv2-glow--purple > img { animation: lv2-g-purple 4s cubic-bezier(.5, 0, .5, 1) both; }
.lv2-glow--navy   > img { animation: lv2-g-navy   4s cubic-bezier(.5, 0, .5, 1) both; }
.lv2-glow--deep   > img { animation: lv2-g-deep   4s cubic-bezier(.5, 0, .5, 1) both; }
.lv2-glow--dleft  > img { animation: lv2-g-dleft  4s linear both; }
.lv2-glow--dright > img { animation: lv2-g-dright 4s linear both; }
.lv2-glow--violet > img { animation: lv2-g-violet 4s cubic-bezier(.5, 0, .5, 1) both; }

/* navy-center: 회전 66°→101° + 우상향 이동 + 세로 축소 (0~40%) 후 정지 */
@keyframes lv2-g-navy {
  0%   { transform: rotate(66deg)  translate(0, 0)          scaleY(1); }
  40%  { transform: rotate(101deg) translate(305px, -276px) scaleY(.74); }
  100% { transform: rotate(101deg) translate(305px, -276px) scaleY(.74); }
}
/* purple-top: 스케일 0.7→1.4 + 좌우로 배회하는 이동 경로 */
@keyframes lv2-g-purple {
  0%   { transform: translate(-10px, 0)     scale(.7); }
  25%  { transform: translate(0, 0)         scale(1); }
  35%  { transform: translate(86px, 0)      scale(1.05); }
  45%  { transform: translate(0, 0)         scale(1); }
  55%  { transform: translate(247px, -46px) scale(1.2); }
  70%  { transform: translate(24px, -20px)  scale(1.4); }
  100% { transform: translate(24px, -20px)  scale(1.4); }
}
/* deep-purple: 이동(152→91) + 스케일 0.8→1 (0~20%) 후 정지 */
@keyframes lv2-g-deep {
  0%   { transform: translate(61px, 0) scale(.8); }
  20%  { transform: translate(36px, 0) scale(1); }
  100% { transform: translate(36px, 0) scale(1); }
}
/* deco-left(시안 스트릭): 페이드인 + 상승 (0~25%) */
@keyframes lv2-g-dleft {
  0%   { opacity: 0; transform: translateY(24px) scale(.7); }
  25%  { opacity: 1; transform: translateY(0)    scale(.7); }
  100% { opacity: 1; transform: translateY(0)    scale(.7); }
}
/* deco-right(시안 스트릭): 지연 페이드인 (2.5~20%) */
@keyframes lv2-g-dright {
  0%    { opacity: 0; transform: scale(.75); }
  2.5%  { opacity: 0; transform: scale(.75); }
  20%   { opacity: 1; transform: scale(.75); }
  100%  { opacity: 1; transform: scale(.75); }
}
/* violet-corner: 우하단 발광 → 상승(58px) + 스케일 0.7→1 (20~35%) 후 정지 (Figma translate/scale) */
@keyframes lv2-g-violet {
  0%   { transform: translateY(58px) scale(.7); }
  20%  { transform: translateY(58px) scale(.7); }
  35%  { transform: translateY(0)    scale(1); }
  100% { transform: translateY(0)    scale(1); }
}

.lv2-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--lv2-container);   /* nav·하위 섹션과 동일 컨테이너(1680) → 좌측 정렬 일치 */
  margin: 0 auto;
  flex: 1 1 auto;                    /* 상단 영역을 채워 헤드라인+창을 세로 중앙에 */
  display: grid;
  grid-template-columns: 1fr auto;   /* 텍스트(가변) | 창(733 native) */
  align-items: center;
  gap: 40px;
  padding-right: 101px;              /* Figma: 창 우측을 컨테이너 우단서 101 안쪽(1699)으로 → 우측 여백에 EMR 칩 부유 */
}

.lv2-hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 40px;
}

/* 런칭 프로모션 — 다크 네이비 카드 (Figma 1362:5397). 창 좌측에 플로팅, 240×128.
   scene 안에 native 좌표로 배치(창 좌상단 기준 left:-184 top:225). */
.lv2-promo {
  position: absolute;
  left: -184px;
  top: 225px;
  width: 240px;
  height: 128px;
  border-radius: 20px;
  background: #181a5a;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 24px 50px rgba(8, 6, 40, .45);
  opacity: 0;
  /* 진입(2.4s, opacity) + 상시 부유(bob, 무한) */
  animation: lv2-in-a var(--lv2-hero-anim) linear both, lv2-bob2 4.6s ease-in-out infinite alternate;
}

.lv2-promo__tag { position: absolute; left: 23px; top: 16px; font-size: 17px; font-weight: 700; color: #fff; letter-spacing: -.2px; }
.lv2-promo__was { position: absolute; left: 23px; top: 84px; font-size: 16px; font-weight: 500; color: rgba(255, 255, 255, .45); text-decoration: line-through; }
.lv2-promo__now { position: absolute; right: 22px; top: 44px; font-size: 50px; font-weight: 800; line-height: 1; color: #fff; letter-spacing: -2px; }

.lv2-hero__title {
  margin-top: 22px;
  font-size: 68px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -2.4px;
  color: #fff;
  display: inline-block;
  text-align: left;
  --title-a-offset: 100px;         /* "시작," 초기 가운데 오프셋 (JS 가 실측으로 갱신) */
  --title-dock-x: 400px;           /* 초기 '중앙 등장' X 오프셋 — 타이틀 중심을 뷰포트 중앙에 (JS 가 실측으로 갱신) */
  transform-origin: left center;
  opacity: 0;
  /* 가운데에서 떠올랐다가 왼쪽으로 이동·축소하며 도킹 (Figma "시작"/"Union" 모션) */
  animation: lv2-title-dock var(--lv2-hero-anim) cubic-bezier(.62, 0, .2, 1) both;
  will-change: transform, opacity;
}
/* 첫 줄 "시작," — 초기엔 "넥스트 진료실" 기준 가운데, 도킹과 동기로 왼쪽으로 부드럽게 슬라이드 */
.lv2-hero__title-a {
  display: inline-block;
  transform-origin: left center;
  animation: lv2-title-a var(--lv2-hero-anim) cubic-bezier(.62, 0, .2, 1) both;
}
/* 둘째 줄 "넥스트 진료실" — Figma 그라데이션 (흰색 → #C3BAFC, 우측 ~40% 구간에서 전환) */
.lv2-hero__title-b {
  background: linear-gradient(105deg, #ffffff 0%, #ffffff 58%, #c3bafc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.lv2-hero__title .grad {
  background: linear-gradient(92deg, #b7a6ff 0%, #7d5cfa 60%, #4b30f3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.lv2-hero__desc {
  margin-top: 26px;
  font-family: 'JeonjuCraft Go OTF', 'Pretendard Variable', 'Pretendard', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  color: #cfd3ea;
  opacity: 0;
  animation: lv2-in-desc var(--lv2-hero-anim) ease both;
}

.lv2-hero__cta {
  position: relative;
  align-self: center;        /* 첫 페이지 하단 중앙 (Figma cta-group center-x=960/1920) */
  /* 이전 top:-82px 가 창(진료 미리보기)과 82px 겹침을 유발 → 제거.
     inner(flex:1)가 CTA를 하단으로 밀어내고, margin-top 으로 창과 최소 간격 보장(짧은 뷰포트 겹침 방지). */
  margin-top: clamp(24px, 4vh, 56px);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 32px;                 /* Figma cta-group: primary(390) ↔ secondary 간격 32 */
  opacity: 0;
  animation: lv2-in-cta var(--lv2-hero-anim) ease both;
}

/* CTA 버튼 — Figma "Button/CTA" (1414:25034/25035/25039):
   pill · 32px 볼드 흰색 · 기본 글래스 rgba(255,255,255,.1) · 호버 브랜드 rgba(75,48,243,.2) */
.lv2-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 22px 40px;
  position: relative;                                     /* 유리 림(::before) 기준 */
  border-radius: 9999px;
  background: rgba(255, 255, 255, .12);                   /* 필(글래스) — 그대로 유지 */
  border: 0;                                              /* 테두리는 ::before 그라데이션 림으로 그림 */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);      /* 상단 유리 하이라이트(반사) */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.46;
  white-space: nowrap;
  cursor: pointer;
  height: 94px;              /* Figma 고정 높이 */
  transition: background-color .15s ease, transform .15s ease, border-color .15s ease;
}
/* 유리 림(테두리만) — Figma 버튼처럼 위·아래가 밝은 그라데이션 테두리.
   background 를 건드리지 않도록 ::before 마스크 링으로 그린다(fill 은 그대로). */
.lv2-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.6px;                                         /* 테두리 두께 */
  background: linear-gradient(165deg,
    rgba(255, 255, 255, .6) 0%,
    rgba(255, 255, 255, .24) 32%,
    rgba(255, 255, 255, .18) 62%,
    rgba(255, 255, 255, .46) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.lv2-cta:hover { background: rgba(75, 48, 243, .2); transform: translateY(-1px); }  /* Figma hover = Brand-20(#4B30F3 20%)만 */
.lv2-cta:active { transform: translateY(0); }
.lv2-cta--primary { width: 390px; }              /* Figma 고정 크기 */
.lv2-cta--secondary { width: 207px; padding: 24px 40px; }
.lv2-cta__logo { width: 36px; height: 36px; display: block; }
.lv2-cta__arrow {
  width: 30px; height: 30px;
  display: inline-block;
  background: url('../images/icon-arrow-cta.svg') no-repeat center / contain;
  filter: brightness(0) invert(1);
}

/* hero product stage (mockup + floating pills)
   목업은 native 733×581 로 만들고 --mock-scale 로 축소. 스테이지 박스는
   축소된 실측(733·581 × scale)을 그대로 잡아 플로팅 칩 좌표를 유지한다. */
.lv2-hero__stage {
  position: relative;
  justify-self: end;
  align-self: center;        /* 그리드 stretch 방지 → 창 크기 유지 */
  --mock-scale: 1;           /* Figma preview-complete 733×581 native */
  width: calc(733px * var(--mock-scale));
  height: calc(581px * var(--mock-scale));
  max-width: 100%;
  opacity: 0;
  animation: lv2-preview-in var(--lv2-hero-anim) cubic-bezier(.2, .7, .2, 1) both;
}

/* 플로팅 칩 — Figma chip-float: rgba(87,81,154,.9) + 흰 볼드, radius 12, padding 16, 18px.
   (Jalnan Gothic 미설치 → 기존 Pretendard 볼드 폴백) */
.lv2-float-pill {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-radius: 12px;
  background: rgba(87, 81, 154, .9);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  box-shadow: 4px 9px 9px rgba(16, 24, 40, .19);
  white-space: nowrap;
  opacity: 0;
}

/* 위치는 창(733×581) 좌상단 기준 Figma 좌표 (scene 이 함께 축소) */
.lv2-float-pill--stt {
  left: -88px; top: 125px;
  /* 진입(2.4s) + 상시 부유(bob) */
  animation: lv2-in-a var(--lv2-hero-anim) linear both, lv2-bob1 3.4s ease-in-out infinite alternate;
}

.lv2-float-pill--emr {
  left: 637px; top: 407px;
  /* 진입(2.7s) + 상시 부유(bob) */
  animation: lv2-in-b var(--lv2-hero-anim) linear both, lv2-bob3 3.8s ease-in-out infinite alternate;
}

/* ==========================================================================
   HERO 목업 창 — 의사랑 AI 진료 화면 (Figma 1414:18166 을 실 DOM 으로 재현)
   native 733×581 기준 px 값을 그대로 쓰고, .lv2-hero__stage 의 --mock-scale 로 축소.
   내부 라이브 요소(녹음점·로딩·파형)는 아래 @keyframes 를 재사용.
   ========================================================================== */
/* 창 본체 — 히어로·핵심기능 공용. native 733×581, 배치/축소는 각 컨텍스트에서. */
.lv2-win {
  width: 733px;
  height: 581px;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: #fbfbfb;
  text-align: left;
  cursor: default;
  user-select: none;
  transform-origin: top left;
}
.lv2-win, .lv2-win * { box-sizing: border-box; }
.lv2-win svg { display: block; width: 100%; height: 100%; }

/* 히어로 scene: 창 + 플로팅(칩·프로모)을 한 그룹으로 묶어 함께 축소.
   내부는 Figma native 733×581 좌표를 그대로 사용 → --mock-scale 로 통째 축소. */
.lv2-hero__scene {
  position: absolute;
  top: 0;
  left: 0;
  width: 733px;
  height: 581px;
  transform: scale(var(--mock-scale));
  transform-origin: top left;
}
/* 히어로 창 배치: scene 좌상단에 절대배치 + 극적 그림자 */
.lv2-hero__mock {
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0 40px 90px rgba(5, 3, 30, .5), 0 10px 26px rgba(5, 3, 30, .4);
}

/* window bar */
.lv2-win__bar {
  flex: 0 0 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 16px;
  background: #f2f3f5;
  border-bottom: 1px solid #e6e9ec;
}
.lv2-win__bar-title { font-size: 14px; font-weight: 500; color: #222; }
.lv2-win__ctrls { display: flex; align-self: stretch; }
.lv2-win__ctrl { position: relative; width: 40px; align-self: stretch; }
.lv2-win__ctrl--min::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 10px; height: 1px; background: #222; transform: translate(-50%, -50%);
}
.lv2-win__ctrl--max::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 9px; height: 9px; border: 1px solid #222; border-radius: 1px;
  transform: translate(-50%, -50%);
}
.lv2-win__ctrl--close::before, .lv2-win__ctrl--close::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 11px; height: 1.2px; background: #222;
}
.lv2-win__ctrl--close::before { transform: translate(-50%, -50%) rotate(45deg); }
.lv2-win__ctrl--close::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* body */
.lv2-win__body { flex: 1 1 auto; display: flex; align-items: stretch; min-height: 0; }

/* sidebar — 환자 목록 */
.lv2-win__side {
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
  background: #fff;
  border-right: 1px solid #e6e9ec;
  overflow: hidden;
}
.lv2-win__side-top { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; }
.lv2-win__brand { display: flex; align-items: center; gap: 4px; padding: 0 4px; }
.lv2-win__brand-ico { width: 16px; height: 16px; display: block; }
.lv2-win__conn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 16px; background: #f2f3f5;
  font-size: 12px; font-weight: 500; color: #222;
}
.lv2-win__conn-dot { width: 5px; height: 5px; border-radius: 50%; background: #33c481; }
.lv2-win__ico16 { width: 16px; height: 16px; color: #666; }

/* tabs 대화/진료 */
.lv2-win__tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  margin: 0 8px; padding: 2px;
  background: #f7f7fb; border-radius: 8px;
}
.lv2-win__tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; border-radius: 8px;
  font-size: 13px; font-weight: 400; color: #666;
  border: 1px solid transparent;
}
.lv2-win__tab svg { width: 16px; height: 16px; }
.lv2-win__tab.is-active { background: #fff; border-color: #dcdcdd; color: #222; font-weight: 500; }

/* 새 음성기록 시작 */
.lv2-win__new {
  display: flex; align-items: center; gap: 8px;
  height: 32px; margin: 0 8px; padding: 0 10px;
  font-size: 14px; font-weight: 500; color: #222;
}
.lv2-win__new svg { width: 16px; height: 16px; color: #666; }

/* section (대기/예약/완료) */
.lv2-win__section { display: flex; flex-direction: column; gap: 8px; }
.lv2-win__sec-head, .lv2-win__sec-row { display: flex; align-items: center; gap: 4px; padding: 4px 8px; }
.lv2-win__sec-label { font-size: 13px; font-weight: 500; color: #999; }
.lv2-win__sec-count { font-size: 13px; font-weight: 700; color: #999; }
.lv2-win__chev { position: relative; width: 12px; height: 12px; flex: 0 0 12px; }
.lv2-win__chev::before {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 5px; height: 5px;
  border-right: 1.3px solid #999; border-bottom: 1.3px solid #999;
}
.lv2-win__chev--down::before { transform: rotate(45deg); }
.lv2-win__chev--right::before { transform: rotate(-45deg); top: 3px; left: 2px; }

/* 환자 카드 */
.lv2-win__cards { display: flex; flex-direction: column; gap: 8px; padding: 0 8px; }
.lv2-win__card { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 10px; }
.lv2-win__card.is-active { background: #f2f3f5; }
.lv2-win__card-top { display: flex; align-items: center; gap: 6px; min-height: 24px; }
.lv2-win__id {
  display: inline-flex; align-items: center;
  padding: 2px 4px; border: 1px solid #d6dae8; border-radius: 4px;
  font-size: 12px; font-weight: 400; color: #666; line-height: 1.3; white-space: nowrap;
}
.lv2-win__name { font-size: 14px; font-weight: 700; color: #222; white-space: nowrap; }
.lv2-win__age { font-size: 13px; font-weight: 400; color: #666; white-space: nowrap; }
.lv2-win__card-right { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.lv2-win__rec {
  width: 6px; height: 6px; border-radius: 50%;
  background: #ff5b5b; box-shadow: 0 0 0 3px rgba(255, 91, 91, .18);
  animation: lv2-blink 1.1s ease-in-out infinite;
}
.lv2-win__badge-live {
  padding: 2px 4px; border-radius: 2px; background: #3380ff;
  font-size: 12px; font-weight: 500; color: #fff; line-height: 1.3; white-space: nowrap;
}
.lv2-win__card-meta { display: flex; align-items: center; gap: 4px; font-size: 13px; color: #666; }
.lv2-win__vdiv { width: 1px; height: 12px; background: #dcdcdd; display: inline-block; flex: 0 0 1px; }

/* main panel */
.lv2-win__main {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 18px;
  padding: 16px;
}
.lv2-win__patient { display: flex; flex-direction: column; gap: 4px; }
.lv2-win__pname { display: flex; align-items: center; gap: 6px; }
.lv2-win__pname-name, .lv2-win__pname-mode { font-size: 15px; font-weight: 700; color: #222; white-space: nowrap; }
.lv2-win__ptime { margin-left: auto; font-size: 12px; color: #666; }
.lv2-win__pmeta { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #666; }

/* note 카드 (음성전사 / SOAP) */
.lv2-win__detail { display: flex; flex-direction: column; gap: 16px; }
.lv2-win__note {
  display: flex; flex-direction: column; gap: 12px;
  padding: 12px; border-radius: 12px;
  background: #fff; border: 1px solid #e6e9ec;
  box-shadow: 0 4px 8px rgba(16, 24, 40, .06);
}
.lv2-win__note-head { display: flex; align-items: center; justify-content: space-between; min-height: 28px; gap: 8px; }
.lv2-win__note-head-l { display: flex; align-items: center; gap: 8px; }
.lv2-win__note-head-r { display: flex; align-items: center; gap: 8px; }
.lv2-win__note-title { font-size: 14px; font-weight: 500; color: #222; white-space: nowrap; }
.lv2-win__seg { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 8px; background: #f7f7fb; }
.lv2-win__seg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 6px;
  border: 1px solid transparent; color: #666;
}
.lv2-win__seg-btn svg { width: 16px; height: 16px; }
.lv2-win__seg-btn.is-active { background: #fff; border-color: #dcdcdd; color: #222; }
.lv2-win__ico-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: #666; }
.lv2-win__ico-btn svg { width: 20px; height: 20px; }
.lv2-win__send {
  display: inline-flex; align-items: center; gap: 4px; height: 28px;
  padding: 0 10px; border-radius: 6px; background: #4b30f3;
  font-size: 14px; font-weight: 500; color: #fff; white-space: nowrap;
}
.lv2-win__send svg { width: 16px; height: 16px; }

/* transcript lines */
.lv2-win__lines { display: flex; flex-direction: column; gap: 16px; }
.lv2-win__line { display: flex; align-items: center; gap: 8px; }
.lv2-win__ts { flex: 0 0 36px; font-size: 13px; color: #999; }
.lv2-win__spk {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 8px; border-radius: 4px;
  font-size: 14px; font-weight: 400; line-height: 1.4;
}
.lv2-win__spk--pt { background: #f2f3f5; color: #666; }
.lv2-win__spk--dr { background: #4b30f3; color: #fff; }
.lv2-win__utt { flex: 1 1 auto; font-size: 14px; color: #222; line-height: 1.4; }
.lv2-win__load { display: inline-flex; gap: 4px; padding: 4px 0; }
.lv2-win__load i {
  width: 5px; height: 5px; border-radius: 50%; background: #8b7ff0; display: block;
  animation: lv2-loaddot 1.2s ease-in-out infinite;
}
.lv2-win__load i:nth-child(2) { animation-delay: .18s; }
.lv2-win__load i:nth-child(3) { animation-delay: .36s; }

/* SOAP rows */
.lv2-win__soap { display: flex; flex-direction: column; gap: 4px; }
.lv2-win__soap-row { display: flex; align-items: flex-start; gap: 12px; padding: 4px 8px; }
.lv2-win__soap-k {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; padding: 4px 8px; border-radius: 6px;
  background: #e9e9fe; color: #4b30f3; font-size: 13px; font-weight: 700;
}
.lv2-win__soap-v { flex: 1 1 auto; font-size: 14px; color: #222; line-height: 1.4; padding-top: 1px; }

/* recording bar */
.lv2-win__recbar {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  height: 42px; padding: 4px 8px; border-radius: 12px;
  background: rgba(36, 36, 54, .92);
}
.lv2-win__pause {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px; border-radius: 6px; background: #4b30f3;
  font-size: 14px; font-weight: 500; color: #fff;
}
.lv2-win__pause::before {
  content: ""; width: 9px; height: 10px;
  background:
    linear-gradient(#fff, #fff) left / 3px 100% no-repeat,
    linear-gradient(#fff, #fff) right / 3px 100% no-repeat;
}
.lv2-win__recctr {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 700; color: #fff; white-space: nowrap;
}
.lv2-win__mic-muted { width: 8px; height: 8px; border-radius: 2px; background: #fff; }
.lv2-win__recright { display: inline-flex; align-items: center; gap: 6px; }
.lv2-win__wave { display: inline-flex; align-items: center; gap: 2px; height: 16px; }
.lv2-win__wave i {
  width: 2px; height: 100%; border-radius: 10px; background: #fff;
  transform: scaleY(.35); transform-origin: center;
  animation: lv2-wave 1s ease-in-out infinite;
}
.lv2-win__wave i:nth-child(2n) { animation-delay: .15s; }
.lv2-win__wave i:nth-child(3n) { animation-delay: .32s; }
.lv2-win__wave i:nth-child(4n) { animation-delay: .48s; }
.lv2-win__rectime { font-size: 14px; font-weight: 700; color: #fff; }

/* 재사용 @keyframes — 녹음점 깜빡임 / 로딩 점 / 파형 */
@keyframes lv2-blink { 0%, 100% { opacity: 1; } 50% { opacity: .18; } }
@keyframes lv2-loaddot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
@keyframes lv2-wave { 0%, 100% { transform: scaleY(.32); } 50% { transform: scaleY(1); } }

/* ===== Hero 인트로 타임라인 (4,000ms · 1회) — 스펙 시각에 맞춘 키프레임 ===== */
/* 헤드라인: 0.4s(10%) 중앙 등장 → 2.0s(50%) 좌측 도킹 완료 */
@keyframes lv2-title-dock {
  0%   { opacity: 0; transform: translate(var(--title-dock-x, 400px), 46px) scale(1.22); }
  10%  { opacity: 0; transform: translate(var(--title-dock-x, 400px), 30px) scale(1.22); }
  40%  { opacity: 1; transform: translate(var(--title-dock-x, 400px), 0)    scale(1.22); }
  50%  { opacity: 1; transform: translate(0, 0)        scale(1); }
  100% { opacity: 1; transform: translate(0, 0)        scale(1); }
}
/* 첫 줄 "시작," 가운데 오프셋 → 0 (도킹 40~50% 구간과 동기로 왼쪽 정렬) */
@keyframes lv2-title-a {
  0%,
  40%  { transform: translateX(var(--title-a-offset, 100px)); }
  50%,
  100% { transform: translateX(0); }
}
/* 태그라인/설명: ~2.0s (48→62%) */
@keyframes lv2-in-desc {
  0%   { opacity: 0; transform: translateY(24px); }
  48%  { opacity: 0; transform: translateY(24px); }
  62%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}
/* preview-complete: 2.2s (55→70%) 슬라이드업 */
@keyframes lv2-preview-in {
  0%   { opacity: 0; transform: translateY(90px); }
  55%  { opacity: 0; transform: translateY(90px); }
  70%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}
/* STT·런칭프로모션 진입: 2.4s (60→72%) — opacity만 (bob과 겹쳐 상시 부유) */
@keyframes lv2-in-a {
  0%   { opacity: 0; }
  60%  { opacity: 0; }
  72%  { opacity: 1; }
  100% { opacity: 1; }
}
/* EMR 진입: 2.7s (67.5→80%) */
@keyframes lv2-in-b {
  0%    { opacity: 0; }
  67.5% { opacity: 0; }
  80%   { opacity: 1; }
  100%  { opacity: 1; }
}
/* CTA 그룹: 2.7s (67.5→82.5%) 슬라이드업 */
@keyframes lv2-in-cta {
  0%    { opacity: 0; transform: translateY(20px); }
  67.5% { opacity: 0; transform: translateY(20px); }
  82.5% { opacity: 1; transform: translateY(0); }
  100%  { opacity: 1; transform: translateY(0); }
}
/* 칩 상시 부유(둥둥) — 무한 왕복 translateY (진입 opacity와 별도 속성이라 충돌 없음) */
@keyframes lv2-bob1 { from { transform: translateY(2px); } to { transform: translateY(-9px); } }
@keyframes lv2-bob2 { from { transform: translateY(0); } to { transform: translateY(-7px); } }
@keyframes lv2-bob3 { from { transform: translateY(3px); } to { transform: translateY(-10px); } }

@media (prefers-reduced-motion: reduce) {
  /* 배경 글로우 인트로(.lv2-glow img)는 장식적 1회 재생이라 유지 — 콘텐츠 진입 모션만 정지 */
  .lv2-promo, .lv2-hero__title, .lv2-hero__title-a, .lv2-hero__desc,
  .lv2-hero__cta, .lv2-hero__stage, .lv2-float-pill {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  /* 창 내부 라이브 요소는 정지(표시는 유지) */
  .lv2-win__rec, .lv2-win__load i, .lv2-win__wave i { animation: none !important; }
  .lv2-win__wave i { transform: scaleY(.6); }
  /* 캐러셀 진행 링 정지 (자동 전환도 JS 에서 함께 비활성) */
  .lv2-feature-item.is-active::after { animation: none; opacity: 0; }
}

/* ==========================================================================
   SECTION SHELL
   ========================================================================== */
.lv2-section { padding: 120px 24px; }
/* 배경은 .lv2 전역 그라데이션(180deg #fff→#edebff)이 담당. 섹션은 투명하게
   비워 그라데이션이 위→아래로 이어지게 한다(히어로·stats 다크 밴드만 예외). */
.lv2-section--white { background: transparent; }
.lv2-section--lavender { background: transparent; }

/* ── 라이트 배경 앰비언트 글로우 (Figma "Group 1945" 1414:24951) ──
   1920 캔버스의 절대좌표를 vw(×100/1920)로 환산해 라이트 영역 상단에 깐다.
   히어로 글로우와 동일하게 blur 는 SVG 에 내장, 여기선 위치·크기만 배치.
   전역 그라데이션 위 / 콘텐츠 아래(z-index)로 은은하게 깔린다. */
.lv2-start { position: relative; }
.lv2-lightbg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 58vw;            /* 1114 / 1920 */
  pointer-events: none;
  z-index: 0;
}
.lv2-lightbg img { position: absolute; display: block; max-width: none; }
.lv2-lightbg .g1 { left: 26.77vw; top: -4.79vw; width: 46.51vw; height: 46.51vw; }
.lv2-lightbg .g2 { left: 29.69vw; top: 26.30vw; width: 40.63vw; height: 36.51vw; }
.lv2-lightbg .g3 { left: -3.13vw; top: 24.69vw; width: 17.55vw; height: 17.55vw; }
.lv2-lightbg .g4 { left: 105.78vw; top: 40.10vw; width: 13.54vw; height: 13.54vw; }
.lv2-lightbg .g6 { left: 92.08vw; top: 46.82vw; width: 7.29vw; height: 7.29vw; }
/* 글로우가 아래로 번져도 텍스트는 항상 위에 오도록 */
.lv2-start .container,
.lv2-compare .container { position: relative; z-index: 1; }

/* ==========================================================================
   SECTION 2 — 핵심 기능
   ========================================================================== */
.lv2-features { padding-top: 164px; }
.lv2-features .lv2-shead { margin-bottom: 112px; }

/* ── 핵심 기능 섹션 헤더 — Figma(1367:5433~5437 / 1371:5438) 매칭 ──
   배지: Brand-Tint(#edebff) 필 · Brand-Ink(#2f2885) 텍스트 (보더/섀도 없음).
   헤딩: line1(64) < line2(80) 2단 크기 + 줄마다 #5c42ff→#000 그라데이션.
   Figma는 Jalnan Gothic(미설치) → Pretendard 볼드 폴백, 크기는 1920캔버스×0.625. */
.lv2-features .lv2-badge,
.lv2-compare .lv2-badge {
  background: #edebff;
  border: 0;
  box-shadow: none;
  color: #2f2885;
  font-family: 'Jalnan Gothic', 'Pretendard Variable', 'Pretendard', sans-serif;
  font-size: 18px;
  font-weight: 700;
  padding: 10px 18px 8px;
}
/* Figma line1(1367:5433 64px) < line2(1367:5434 80px) · Jalnan · #5c42ff→#000 그라데이션 */
.lv2-heading--feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
  letter-spacing: 0;
  font-family: 'Jalnan Gothic', 'Pretendard Variable', 'Pretendard', sans-serif;
}
.lv2-heading--feature > span {
  background: linear-gradient(98deg, #5c42ff 3%, #000 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  line-height: 1.5;
}
.lv2-heading--feature .l1 { font-size: 64px; }
.lv2-heading--feature .l2 { font-size: 80px; }
/* 설명 — Figma description(1371:5438): Pretendard Regular 24px · #000 · lh1.46 */
.lv2-features .lv2-subhead { font-size: 24px; font-weight: 400; line-height: 1.46; letter-spacing: 0; color: #000; }

.lv2-feature-layout {
  display: grid;
  grid-template-columns: auto 1fr;   /* 창(고정폭) | 기능 목록 */
  align-items: center;
  gap: 72px;                         /* Figma: CarouselPreview(733) → carousel-tabs(x=805) = 72 */
  max-width: 1293px;                 /* Figma content-wrapper: 창 733 + 간격 72 + 탭 488 */
  margin: 0 auto;
}

/* 진료 화면 창 슬롯 — 히어로 창을 복제해 넣는다(하단 스크립트). native 733×581 축소. */
.lv2-feature-visual {
  --fv-scale: 1;                     /* Figma CarouselPreview 733×581 native — 1293 레이아웃에선 축소 불필요 */
  position: relative;
  width: calc(733px * var(--fv-scale));
  height: calc(581px * var(--fv-scale));
  border-radius: 14px;
  box-shadow: 0 30px 70px rgba(30, 24, 60, .16);
}
.lv2-feature-visual .lv2-win { position: absolute; top: 0; left: 0; transform: scale(var(--fv-scale)); }

/* ── 기능별 화면 전환 — 창 우측 main 패널 안에서 비활성 화면 숨김 ───────────── */
.lv2-feature-visual [data-screen][hidden] { display: none; }

/* 기능 2 · 한눈에 확인하는 과거기록 요약 (Figma 1390:16783) — SOAP 상세 자리에 교체.
   치수는 Figma 원본 그대로: 카드 12px inset, 헤더 23 · 탭바 40 · 섹션제목 26 · 표헤더 30 · 행 32.
   (Section/Medication 284 = 26 + 4 + 30 + 7×32) */
.lv2-hist {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  padding: 12px;
  border: 1px solid #e6e9ec; border-radius: 12px;
  background: #fff; overflow: hidden;
  box-shadow: 0 4px 8px rgba(16, 24, 40, .06);
}
.lv2-hist__head { height: 23px; margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; }
.lv2-hist__title { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: #222; }
.lv2-hist__spark { width: 16px; height: 16px; flex: 0 0 16px; }
.lv2-hist__close { font-size: 13px; font-weight: 500; color: #4b30f3; }

/* 탭바: 카드 좌우로 풀블리드(경계선 전체폭), 탭은 내부 12px 패딩으로 인접 배치 */
.lv2-hist__tabs { height: 40px; margin: 0 -12px 12px; padding: 0 12px; display: flex; align-items: stretch; border-bottom: 1px solid #e6e9ec; }
.lv2-hist__tab { position: relative; display: inline-flex; align-items: center; padding: 0 12px; font-size: 14px; font-weight: 400; color: #666; white-space: nowrap; }
.lv2-hist__tab.is-active { color: #222; font-weight: 700; }
.lv2-hist__tab.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #4b30f3;
}

/* 본문: 카드 남은 높이를 채우고 내부 세로 스크롤 (Figma ScrollLayout + ScrollBar).
   min-height:0 이 있어야 flex 컨테이너 안에서 넘치는 내용이 카드를 밀지 않고 스크롤된다. */
.lv2-hist__body {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; gap: 12px;
  overflow-y: auto; overflow-x: hidden;
  padding-right: 6px; margin-right: -6px;   /* 스크롤바 자리 확보(내용 폭 유지) */
  scrollbar-width: thin; scrollbar-color: #d6dae8 transparent;
  overscroll-behavior: contain;
}
.lv2-hist__body::-webkit-scrollbar { width: 6px; }
.lv2-hist__body::-webkit-scrollbar-thumb { background: #d6dae8; border-radius: 4px; }
.lv2-hist__body::-webkit-scrollbar-thumb:hover { background: #b9bfd0; }
.lv2-hist__body::-webkit-scrollbar-track { background: transparent; }
.lv2-hist__sec { display: flex; flex-direction: column; gap: 4px; }
.lv2-hist__sec-head { height: 26px; display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.lv2-hist__sec-title { font-size: 14px; font-weight: 700; color: #222; }
.lv2-hist__refit { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; color: #666; }
.lv2-hist__refit svg { width: 11px; height: 14px; }   /* 동기(양방향 화살표) 아이콘 — 세로 비율 9.7:12.5 */

.lv2-hist__table { display: flex; flex-direction: column; }
.lv2-hist__row {
  height: 32px;
  display: grid; grid-template-columns: minmax(0, 1fr) 32px 32px 40px 80px;
  align-items: center; gap: 8px; padding: 0 10px; border-bottom: 1px solid #f2f3f5;
}
.lv2-hist__row--chk { grid-template-columns: minmax(0, 1fr) 64px 44px 44px; }
.lv2-hist__row--head { height: 30px; background: #f2f3f5; border-radius: 6px; border-bottom: 0; }
.lv2-hist__c { font-size: 14px; color: #666; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv2-hist__row--head .lv2-hist__c { font-size: 13px; font-weight: 500; color: #666; }
.lv2-hist__c--name { text-align: left; color: #222; }
.lv2-hist__c--stat { display: flex; align-items: center; justify-content: flex-end; overflow: visible; }

.lv2-hist__n {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 4px; vertical-align: middle;
  height: 20px; padding: 0 5px; border-radius: 6px;
  background: #e9e9fe; color: #4b30f3;              /* Surface/BrandLight · Text/OnBG/Brand */
  font-size: 13px; font-weight: 700; line-height: 1;
}
/* 잔여일 상태 — 옅은 배경의 필 배지 (Figma Badge). 12px, 색상 토큰별 변형. */
.lv2-hist__st {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 8px; border-radius: 6px;
  font-size: 12px; font-weight: 500; font-style: normal; line-height: 1.3; white-space: nowrap;
}
.lv2-hist__st--danger { background: #fef3f2; color: #fc456a; }   /* BG/Danger · Text/OnBG/Danger */
.lv2-hist__st--ok { background: #ecfdf3; color: #027a48; }       /* Badge/Green/Subtle · Badge/Green/Text */
.lv2-hist__st--muted { background: #f2f3f5; color: #666; }        /* BG/Subtle · Text/OnBG/Secondary */
.lv2-hist__pill {
  display: inline-flex; align-items: center; gap: 3px;
  height: 22px; padding: 0 8px; border-radius: 6px;
  background: #4b30f3; color: #fff; font-size: 13px; font-weight: 500;
}
.lv2-hist__pill svg { width: 10px; height: 13px; }

/* ── 스크롤 본문 확장 콘텐츠 (Figma 1732:14186 · 특이사항/추이/영상/주사/예방접종/검진) ── */
/* 공통 2·3열 배치 */
.lv2-hist__cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lv2-hist__cols3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
/* 공통 서브 박스 */
.lv2-hist__box { border: 1px solid #e6e9ec; border-radius: 8px; padding: 10px; background: #fff; }

/* 특이사항 — 배지(라벨) + 값 인라인, 줄바꿈 */
.lv2-hist__tags { display: flex; flex-wrap: wrap; gap: 6px 8px; padding: 0 4px; }
.lv2-hist__tagline { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #222; }
.lv2-hist__tk {
  display: inline-flex; align-items: center; height: 20px; padding: 0 6px;
  border-radius: 6px; background: #f2f3f5; color: #666;   /* BG/Subtle · Text/OnBG/Secondary */
  font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap;
}
/* 알러지 등 위험 항목 — 배지·값 모두 danger (Figma: BG/Danger #fef3f2 · Text/OnBG/Danger #fc456a) */
.lv2-hist__tagline--danger { color: #fc456a; }
.lv2-hist__tagline--danger .lv2-hist__tk { background: #fef3f2; color: #fc456a; }

/* 미니 블록 — 제목(+전체보기) 위, 박스 아래 */
.lv2-hist__mb { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lv2-hist__mb-head { display: flex; align-items: center; justify-content: space-between; padding: 0 2px; }
.lv2-hist__viewall { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; color: #222; }
.lv2-hist__viewall svg { width: 14px; height: 14px; flex: 0 0 14px; }

/* 추이 테이블 — 라벨 + 3개 값(날짜 컬럼) */
.lv2-hist__trend { display: flex; flex-direction: column; gap: 6px; }
.lv2-hist__trow { display: grid; grid-template-columns: minmax(46px, 1fr) 46px 46px 46px; align-items: center; gap: 2px; }
.lv2-hist__trow > span { font-size: 13px; font-weight: 500; color: #222; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv2-hist__tlbl { text-align: left !important; color: #666 !important; font-size: 12px !important; font-weight: 500 !important; }
.lv2-hist__trow--head > span { font-size: 12px; font-weight: 400; color: #999; }
.lv2-hist__tv--info { color: #3380ff !important; }              /* Text/OnBG/Info */
.lv2-hist__twnl { grid-column: 2 / 5; text-align: left !important; color: #222; }

/* 영상검사 — 3열 카드, 각 헤더 + 말줄임 2행 */
.lv2-hist__imgcard { border: 1px solid #e6e9ec; border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow: hidden; }
.lv2-hist__imgcard-head { font-size: 14px; font-weight: 500; color: #666; white-space: nowrap; }
.lv2-hist__cnt { color: #999; font-weight: 400; }
.lv2-hist__imgrow { font-size: 12px; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv2-hist__imgrow b { color: #222; font-weight: 500; margin-right: 4px; }

/* 주사 — 2열 항목 */
.lv2-hist__inj { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.lv2-hist__inj-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lv2-hist__inj-title { font-size: 14px; font-weight: 500; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv2-hist__inj-det { font-size: 12px; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 예방접종 이력 — 상태 점 + 이름 + 완료/기록없음 칩 */
.lv2-hist__vac { display: flex; flex-wrap: wrap; gap: 6px; }
.lv2-hist__chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 8px 0 7px; border-radius: 6px; background: #f2f3f5;   /* BG/Subtle */
  font-size: 12px; line-height: 1;
}
.lv2-hist__dot { width: 2px; height: 11px; border-radius: 2px; background: #4b30f3; flex: 0 0 2px; }  /* Surface/Brand */
.lv2-hist__dot--danger { background: #fc456a; }                                                       /* Surface/Danger */
.lv2-hist__chip-name { color: #222; font-weight: 500; }
.lv2-hist__chip-ok, .lv2-hist__chip-date, .lv2-hist__chip-danger { font-style: normal; }
.lv2-hist__chip-ok { color: #666; }
.lv2-hist__chip-date { color: #999; }
.lv2-hist__chip-danger { color: #fc456a; }                                                            /* Text/OnBG/Danger */

/* 국가검진 — 라벨(좌) + 날짜(우) */
.lv2-hist__scr { display: flex; flex-direction: column; gap: 10px; }
.lv2-hist__scr-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lv2-hist__scr-row > span:first-child { font-size: 14px; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv2-hist__scr-row > span:last-child { font-size: 12px; font-weight: 500; color: #666; white-space: nowrap; flex: 0 0 auto; }

/* 기능 3 · 똑똑한 상병·처방 검색 (Figma 1390:16509) — 상병/처방 목록 + 하단 전송 버튼.
   카드는 space-between: 목록은 위, 버튼은 아래 고정(가운데 여백). */
.lv2-rx {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
  padding: 12px;
  border: 1px solid #e6e9ec; border-radius: 12px;
  background: #fff; overflow: hidden;
  box-shadow: 0 4px 8px rgba(16, 24, 40, .06);
}
.lv2-rx__lists { display: flex; flex-direction: column; gap: 12px; }
.lv2-rx__sec { display: flex; flex-direction: column; gap: 2px; }
.lv2-rx__sec-head { height: 28px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 8px; }
.lv2-rx__sec-title { font-size: 14px; font-weight: 500; color: #222; }
.lv2-rx__sec-count { font-size: 14px; font-weight: 400; color: #666; }
.lv2-rx__rows { display: flex; flex-direction: column; gap: 4px; }
.lv2-rx__row { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 8px; border-radius: 8px; }
.lv2-rx__code {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  padding: 2px 4px; border-radius: 4px; background: #f2f3f5;
  font-size: 12px; color: #666; line-height: 1.3; white-space: nowrap;
}
.lv2-rx__ai { width: 16px; height: 16px; flex: 0 0 16px; }
.lv2-rx__ai svg { width: 16px; height: 16px; }
.lv2-rx__name { flex: 1 1 auto; min-width: 0; font-size: 13px; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv2-rx__dose { flex: 0 0 auto; font-size: 13px; color: #999; white-space: nowrap; }
.lv2-rx__divider { height: 1px; background: #e6e9ec; }
.lv2-rx__send {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; border-radius: 6px;
  background: #4b30f3; color: #fff; font-size: 16px; font-weight: 700;
}
.lv2-rx__send svg { width: 20px; height: 20px; }

/* 기능 4 · 오늘 하루 경영 현황 (Figma 1390:16013) — 자연어 질의 → 지표 카드 + 매출 추이 차트.
   환자 헤더 없는 전체 패널: 질문 버블 · 답변 · 지표 4카드 · 라인 차트. */
.lv2-dash { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.lv2-dash__q { display: flex; justify-content: flex-end; }
.lv2-dash__bubble { max-width: 82%; padding: 12px 16px; border-radius: 16px; background: #eef0f8; font-size: 15px; color: #222; line-height: 1.5; }
.lv2-dash__body { display: flex; flex-direction: column; gap: 16px; }
.lv2-dash__a { font-size: 15px; color: #222; line-height: 1.5; }
.lv2-dash__panels { display: flex; flex-direction: column; gap: 2px; }

.lv2-dash__stats { display: flex; gap: 8px; }
.lv2-dash__card {
  flex: 1 1 0; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px; border-radius: 12px;
  background: #fff; border: 1px solid #e6e9ec;
  box-shadow: 0 4px 6px rgba(16, 24, 40, .03);
}
.lv2-dash__card--hl { background: #4b30f3; border-color: transparent; }
.lv2-dash__ctitle { font-size: 13px; font-weight: 500; color: #666; white-space: nowrap; }
.lv2-dash__card--hl .lv2-dash__ctitle { color: #fff; }
.lv2-dash__cval { display: flex; align-items: baseline; gap: 4px; font-size: 20px; font-weight: 700; color: #222; line-height: 1.5; white-space: nowrap; }
.lv2-dash__cval--xl { font-size: 24px; }
.lv2-dash__card--hl .lv2-dash__cval { color: #fff; }
.lv2-dash__cval em { font-size: 13px; font-weight: 400; font-style: normal; }
.lv2-dash__ctrend { font-size: 12px; color: #666; line-height: 1.3; white-space: nowrap; }
.lv2-dash__card--hl .lv2-dash__ctrend { color: #fff; }
.lv2-dash__ctrend .up { color: #fc456a; font-style: normal; }

.lv2-dash__chart-sec { display: flex; flex-direction: column; padding: 12px 0; }
.lv2-dash__chart-title { font-size: 15px; font-weight: 700; color: #222; padding: 0 16px; }
.lv2-dash__chart-title span { font-size: 14px; font-weight: 500; color: #999; }
.lv2-dash__chart-wrap { padding: 20px 16px 8px; }
.lv2-dash .lv2-dash__chart { display: block; width: 100%; height: auto; }  /* .lv2-win svg 의 height:100% 무력화 */
.lv2-dash__grid { stroke: #eef0f2; stroke-width: 1; }
.lv2-dash__line { fill: none; stroke: #4b30f3; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.lv2-dash__dot { fill: #4b30f3; }
.lv2-dash__xaxis { display: flex; justify-content: space-between; margin-top: 12px; font-size: 12px; color: #999; }

.lv2-feature-list { display: flex; flex-direction: column; gap: 8px; }

/* 캐러셀 탭 (Figma carousel-tabs) — 활성 항목만 흰 카드(그림자)로 부각.
   5초마다 자동 전환, 클릭 시 즉시 전환·타이머 리셋, 호버 시 정지. */
.lv2-feature-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 20px 24px;
  border: 0;
  border-radius: 26px;             /* Figma Landing v2/Radius/tab-card */
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background-color .3s ease, box-shadow .3s ease, padding-bottom .3s ease;
}
.lv2-feature-item.is-active {
  background: #fff;
  box-shadow: 0 12px 44px rgba(95, 82, 133, .16);
  padding-bottom: 28px;            /* 하단 가장자리 진행 막대 공간 확보 */
}

.lv2-feature-item h3 {
  font-size: 26px;                 /* Figma Landing v2/Heading-lg */
  font-weight: 700;
  line-height: 1.46;
  letter-spacing: -.4px;
  color: #000;                     /* Landing v2/Text/OnLight/Ink */
}

.lv2-feature-item p {
  font-size: 18px;                 /* Figma Landing v2/Body-md */
  font-weight: 400;
  line-height: 1.46;
  color: #535353;                  /* Landing v2/Text/OnLight/Secondary */
}

/* 항목 배지 — 활성 카드 우상단에 상단 가장자리를 걸치는 플로팅 필 (Figma tab-*-active).
   Brand-Tint #edebff / Brand-Ink #2f2885, 18px SemiBold, 활성 카드에서만 페이드 인. */
.lv2-feature-item .lv2-feature-item__tag {
  position: absolute;
  top: -20px;
  right: 24px;
  align-self: auto;
  margin: 0;
  padding: 8px 18px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  background: #edebff;
  color: #2f2885;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.lv2-feature-item.is-active .lv2-feature-item__tag { opacity: 1; }

/* 진행 표시 — 활성 카드 하단의 진행 막대. 카드 전체 크기 ::after 에 하단 4px 그라데이션만
   깔고, 카드와 동일한 radius 로 배경을 클립 → Figma 처럼 막대가 하단 라운드 모서리를 따라 붙는다.
   좌→우로 채워지며 자동 전환 주기(5초)와 동기(@property 퍼센트 애니메이트).
   ponytail: @property 미지원 브라우저(FF<128 등)에선 채움만 생략되고 카드 강조는 유지. */
@property --lv2-feat-p {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
.lv2-feature-item::after {
  content: "";
  position: absolute;
  inset: 0;                            /* 카드 전체 → radius 로 배경 클립 */
  border-radius: 26px;                 /* 카드와 동일(tab-card) — 하단 모서리를 따라 막대가 붙음 */
  background: linear-gradient(to right, #2f2885 var(--lv2-feat-p), transparent 0) left bottom / 100% 4px no-repeat;
  opacity: 0;
  pointer-events: none;
}
.lv2-feature-item.is-active::after {
  opacity: 1;
  animation: lv2-feat-ring var(--feat-dur, 2s) linear forwards;   /* 체류시간은 JS가 기능별로 주입(기능2=6s) */
}
/* 기능 목록 hover(CSS 폴백) + 상세 카드 hover(JS가 .is-paused 토글) 시 진행 막대 정지 */
.lv2-feature-list:hover .lv2-feature-item.is-active::after,
.lv2-feature-layout.is-paused .lv2-feature-item.is-active::after { animation-play-state: paused; }
@keyframes lv2-feat-ring { from { --lv2-feat-p: 0%; } to { --lv2-feat-p: 100%; } }

.lv2-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 9999px;
  background: var(--Color-Surface-BrandLight, #e9e9fe);
  color: var(--lv2-brand);
  font-size: 12px;
  font-weight: 700;
}

/* ==========================================================================
   SECTION 3 — 버전 비교
   ========================================================================== */
.lv2-compare .lv2-shead { margin-bottom: 130px; }

/* 헤딩 — 단일 라인 #5c42ff→#000→#464164 그라데이션.
   background-image(단축 아님)로 base 의 background-clip:text 유지하며 그라데이션 이미지만 교체. */
.lv2-compare .lv2-heading {
  font-family: 'Jalnan Gothic', 'Pretendard Variable', 'Pretendard', sans-serif;   /* Figma line2 · Jalnan 80px */
  font-size: clamp(48px, 5.6vw, 80px);   /* 1430px+ 에서 Figma 80px, 그보다 좁으면 줄바꿈 없이 축소(넘침 방지) */
  line-height: 1.5;
  letter-spacing: -1px;
  background-image: linear-gradient(103deg, #5c42ff 20%, #000 48%, #464164 99%);
  white-space: nowrap;
}
/* 서브헤드 — Figma description(1400:17463): Pretendard Regular 24px · lh1.46 · #000 */
.lv2-compare .lv2-subhead { font-size: 24px; font-weight: 400; line-height: 1.46; letter-spacing: 0; color: #000; }
/* 시작하기 타이틀 — Figma title(1414:24963): Jalnan Gothic 80px · 단일라인 · 3-stop 그라데이션 */
.lv2-start .lv2-heading {
  font-family: 'Jalnan Gothic', 'Pretendard Variable', 'Pretendard', sans-serif;
  font-size: 80px;
  line-height: 1.5;
  letter-spacing: -1px;
  background-image: linear-gradient(100deg, #5c42ff 20%, #000 48%, #464164 99%);
  white-space: nowrap;
}

.lv2-compare-grid {
  display: grid;
  grid-template-columns: 500px 1fr;   /* WEB 고정폭(잠금 문구 한 줄 유지) · 설치 카드가 더 넓음 — Figma 484 / 720 */
  gap: 40px;
  max-width: 1160px;
  margin: 0 auto;
  align-items: stretch;
}

.lv2-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--lv2-stroke);
  box-shadow: 0 20px 50px rgba(30, 24, 60, .08);
}

.lv2-plan__badge {
  position: absolute;
  top: 28px; right: 28px;
  display: inline-flex;
  padding: 6px 12px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
}

.lv2-plan__title { font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.lv2-plan__title b { color: var(--lv2-brand); }
.lv2-plan__sub { margin-top: 8px; font-size: 15px; font-weight: 500; color: var(--lv2-text-2); }

.lv2-plan__list { margin-top: 30px; display: flex; flex-direction: column; gap: 16px; flex: 1; }

.lv2-plan__row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 600;
}

.lv2-plan__row .check {
  flex: 0 0 22px;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lv2-plan__row .check svg { width: 12px; height: 12px; }
.lv2-plan__row .grow { flex: 1; }

.lv2-plan__foot { margin-top: 32px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lv2-plan__foot-note { font-size: 13px; font-weight: 500; color: var(--lv2-text-3); }
.lv2-plan__foot .lv2-plan__btn { width: 100%; }

.lv2-plan__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  transition: background-color .15s ease, transform .15s ease;
  cursor: pointer;
}

/* WEB plan — Figma 1400:17467 / 17495(badge) / 17497(tip). 카드 실측 484px = 구현 스케일.
   잠금 기능은 아이콘 없이 회색 텍스트 + 하단 화이트 페이드로 표현. */
.lv2-plan--web { padding: 32px; }
.lv2-plan--web .lv2-plan__title { font-size: 32px; font-weight: 700; color: #000; }
.lv2-plan--web .lv2-plan__sub { margin-top: 10px; font-size: 20px; font-weight: 400; color: #535353; }

.lv2-plan--web .lv2-plan__list { margin-top: 54px; gap: 18px; flex: none; position: relative; }
.lv2-plan--web .lv2-plan__list::after {   /* 잠금 영역 화이트 페이드 (Figma Rectangle 11) */
  content: "";
  position: absolute; left: 0; right: 0; top: 32%; bottom: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .4), #fff);
  pointer-events: none;
}

.lv2-plan--web .lv2-plan__row { gap: 16px; font-size: 26px; font-weight: 500; color: #000; }
.lv2-plan--web .lv2-plan__row .check {
  flex: 0 0 28px; width: 28px; height: 28px;
  background: var(--Color-Surface-BrandLight, #e9e9fe); color: var(--lv2-brand);
}
.lv2-plan--web .lv2-plan__row .check svg { width: 16px; height: 16px; }
.lv2-plan--web .lv2-plan__row.is-locked { color: #7d7d7d; }
.lv2-plan--web .lv2-plan__row.is-locked .check { background: transparent; }  /* 아이콘 없이 44px 들여쓰기만 */

.lv2-plan--web .lv2-plan__foot { margin-top: 54px; gap: 16px; }
.lv2-plan--web .lv2-plan__foot-note { font-size: 16px; font-weight: 400; color: #5e5e5e; }
.lv2-plan--web .lv2-plan__btn {
  height: 62px; border-radius: 10px; font-size: 18px; font-weight: 600;
  background: #edebff; color: #2f2885;
}
.lv2-plan--web .lv2-plan__btn:hover { background: #e2def9; }

/* 배지 — 카드 상단 우측에서 위로 걸침 (Figma x307 y-22), 4px 흰 테두리 */
.lv2-plan--web .lv2-plan__badge {
  top: -22px; right: 17px;
  padding: 10px 18px 8px;
  border: 4px solid #fff;
  background: #edebff; color: #2f2885;
  font-size: 18px; font-weight: 600;
}

/* WEB 전환 버튼 툴팁 — 다크 슬레이트 말풍선, 우하단만 각짐 (Figma 1400:17497) */
.lv2-plan__tip-wrap { position: relative; width: 100%; }
.lv2-plan__tip {
  position: absolute;
  top: -27px; left: -110px;   /* 카드 좌측 밖으로 걸침, 버튼 상단 높이 (Figma x-78, 우하단 각진 코너가 카드에 닿음) */
  padding: 12px 20px;
  border-radius: 22px 22px 0 22px;
  background: #38364a; color: #fff;
  font-size: 16px; font-weight: 600; line-height: 1.5;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(16, 24, 40, .22);
}

/* INSTALL plan (dark) — Figma 1400:17500 / 17551(badge). WEB 카드와 동일 트리트먼트, 다크 테마. */
.lv2-plan--install {
  background: var(--landing-v2-navy-deep, #1a1349);
  border-color: transparent;
  color: #fff;
  box-shadow: 11px 20px 22px rgba(120, 111, 143, .25), 10px 20px 38px rgba(120, 111, 143, .18);
}
.lv2-plan--install .lv2-plan__title { font-size: 32px; font-weight: 700; color: #fff; }
.lv2-plan--install .lv2-plan__sub { margin-top: 10px; font-size: 20px; font-weight: 400; color: #d1d1d1; }
.lv2-plan--install .lv2-plan__list { margin-top: 54px; gap: 18px; }
.lv2-plan--install .lv2-plan__row { gap: 16px; font-size: 26px; font-weight: 500; color: #fff; }
.lv2-plan--install .lv2-plan__row .check {
  flex: 0 0 28px; width: 28px; height: 28px;
  background: var(--lv2-brand-2); color: #fff;
}
.lv2-plan--install .lv2-plan__row .check svg { width: 16px; height: 16px; }
.lv2-plan--install .lv2-plan__foot { margin-top: 54px; gap: 16px; }
.lv2-plan--install .lv2-plan__foot-note { font-size: 16px; font-weight: 400; color: #d1d1d1; }
.lv2-plan--install .lv2-plan__btn {
  height: 62px; border-radius: 10px; font-size: 18px; font-weight: 600;
  background: var(--lv2-brand); color: #fff;
}
.lv2-plan--install .lv2-plan__btn:hover { background: #5a3ff7; }
/* "전용" 태그 (Figma badge-exclusive) */
.lv2-plan--install .lv2-tag {
  padding: 8px 16px; border-radius: 9999px;
  background: #28267a; color: #cfcbff;
  font-size: 16px; font-weight: 600; line-height: 1.5;
}
/* 배지 — 카드 상단 우측에서 위로 걸침 (Figma x420 y-22), 4px 네이비 테두리 */
.lv2-plan--install .lv2-plan__badge {
  top: -22px; right: 16px;
  padding: 10px 18px 8px;
  border: 4px solid #151354;
  background: #5c42ff; color: #fff;
  font-size: 18px; font-weight: 500;
}

/* ==========================================================================
   SECTION 4 — 시작하기
   ========================================================================== */
.lv2-start .lv2-shead { margin-bottom: 48px; }

/* 배지 — 흰 섹션이라 옅은 틴트 (Figma brand-tint-subtle #f8f7ff), compare 와 동일 잉크색 */
.lv2-start .lv2-badge {
  background: #f8f7ff; border: 0; box-shadow: none;
  color: #2f2885;
  font-family: 'Jalnan Gothic', 'Pretendard Variable', 'Pretendard', sans-serif;
  font-size: 18px; font-weight: 700;
  padding: 10px 18px 8px;
}
/* 설명 — Figma description(1414:24964): Pretendard Regular 24px · #000 · lh1.46 */
.lv2-start .lv2-subhead {
  font-size: 24px; font-weight: 400; line-height: 1.46; letter-spacing: 0; color: #000;
}

/* 시작 카드 — Figma 1414:24965 (get-started-path). 흰 카드 > [탭 2개] + [상세 패널] */
.lv2-start-card {
  width: 100%;
  max-width: 794px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border-radius: 16px;                             /* Landing/Radius/xl-card */
  background: #fff;
  box-shadow: 10px 20px 76px 0 rgba(120, 111, 143, .16);
}

.lv2-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.lv2-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 12px 24px;
  border-radius: 24px;
  cursor: pointer;
  transition: background-color .18s ease, border-radius .18s ease;
  background: transparent;
}
.lv2-tab .t { font-size: 24px; font-weight: 700; color: var(--lv2-text); }
.lv2-tab .s { font-size: 16px; font-weight: 500; color: var(--lv2-text-2); }
/* Hover (Figma Header Button State=Hover) — lavender-10 배경 + md-card 반경 */
.lv2-tab:not(.is-active):hover { background: #f8f8fc; border-radius: 14px; }
.lv2-tab.is-active { background: #f1f0fa; border-radius: 14px; }

/* 상세 패널 — rounded-16 박스 (Figma detail 1414:18665).
   그림자는 하단에만: 음수 spread(-14)로 상단·측면 번짐을 제거하고 아래로만 떨어뜨림. */
/* 두 패널을 같은 그리드 셀에 겹쳐 카드 높이를 항상 더 큰 패널 기준으로 고정 → 탭 전환 시 높이 불변 */
.lv2-start-panels { display: grid; }
.lv2-start-panels > .lv2-start-panel { grid-area: 1 / 1; }
.lv2-start-panel {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 30px -14px rgba(120, 111, 143, .25);
}
/* 비활성 패널은 자리는 유지하되 숨김 (display:none 대신 visibility로 셀 높이 보존) */
.lv2-start-panel:not(.is-active) { visibility: hidden; }
.lv2-start-panel__title { font-size: 32px; font-weight: 700; line-height: 1.46; letter-spacing: -.5px; color: #000; }
.lv2-start-panel__title b { color: var(--lv2-brand); font-weight: 700; }
.lv2-start-panel__desc { margin-top: 18px; margin-bottom: 54px; font-size: 20px; font-weight: 400; line-height: 1.46; color: #535353; }

.lv2-start-panel__btn {
  margin-top: auto; /* 패널 하단에 고정 → 탭 전환과 무관하게 버튼 위치 동일 (간격은 desc margin-bottom 54px가 최소값) */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 18px;
  border-radius: 10px;
  background: var(--lv2-ink);
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.lv2-start-panel__btn:hover { background: #1c1c2c; transform: translateY(-1px); }
/* 설치 버튼 다운로드 아이콘 (Figma Ysarang CTA showIcon=true) */
.lv2-start-panel__btn-ico { display: inline-flex; }
.lv2-start-panel__btn-ico svg { width: 24px; height: 24px; }

/* ==========================================================================
   SECTION 5 — 왜 의사랑 AI 인가
   ========================================================================== */
.lv2-why .lv2-shead { margin-bottom: 60px; }

/* 배지 — Figma tag-wrapper(1379:13211): Jalnan 18px · brand-ink · card-faint 필 (Jalnan 미설치 → Pretendard 볼드 폴백) */
.lv2-why .lv2-badge {
  background: #fbfbff;
  border: 0;
  box-shadow: none;
  color: #2f2885;                  /* brand-ink */
  font-family: 'Jalnan Gothic', 'Pretendard Variable', 'Pretendard', sans-serif;
  font-size: 18px;
  font-weight: 700;
  padding: 10px 18px 8px;
}
/* 헤딩 — Figma line1(1379:13216 64px) / line2(1379:13214 80px) 2줄 · Jalnan · 3-stop 그라데이션 */
.lv2-heading--why {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
  letter-spacing: 0;
  font-family: 'Jalnan Gothic', 'Pretendard Variable', 'Pretendard', sans-serif;
  font-weight: 700;
}
.lv2-heading--why > span {
  background: linear-gradient(98deg, #5c42ff 19.5%, #000 48%, #464164 99%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  line-height: 1.5;
}
.lv2-heading--why .l1 { font-size: 64px; }
.lv2-heading--why .l2 { font-size: 80px; }
/* 설명 — Figma description(1379:13215): Pretendard Regular 24px · #000 · lh1.46 */
.lv2-why .lv2-subhead {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.46;
  letter-spacing: 0;
  color: #000;
}

.lv2-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;                       /* Figma 카드 간격 30 */
}

/* 카드 — Figma point-*(1379:13221…): card-faint #fbfbff · radius16 · px32 py28 · gap20 · 좌측정렬(플랫, 테두리·그림자 없음) */
.lv2-why-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 20px;
  padding: 28px 32px;
  border-radius: 16px;
  background: #fbfbff;
  transition: transform .2s ease, box-shadow .2s ease;
}
.lv2-why-card:hover { transform: translateY(-4px); box-shadow: 0 24px 54px rgba(30, 24, 60, .1); }

/* 아이콘 — Figma icon 26px (배경칩 없이 벡터만). 3개 아이콘 폭이 달라 높이 26 고정·폭 auto 로 비율 보존 */
.lv2-why-card__icon {
  display: inline-flex;
  align-items: center;
  height: 26px;
}
.lv2-why-card__icon img { display: block; height: 26px; width: auto; }

/* 타이틀 — heading-xl 30px Bold · 설명 — body-md 18px Regular #666, 둘 다 lh1.46 */
.lv2-why-card h3 { font-size: 30px; font-weight: 700; line-height: 1.46; letter-spacing: 0; color: #000; }
.lv2-why-card p { font-size: 18px; font-weight: 400; line-height: 1.46; color: #666; }

/* ==========================================================================
   SECTION 6 — 지표 밴드
   ========================================================================== */
.lv2-stats {
  background: var(--lv2-ink);
  padding: 88px 24px;
}
.lv2-stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}
.lv2-stat { display: flex; flex-direction: column; align-items: center; gap: 14px; }
/* 숫자 — Figma number(1380:13278): Jalnan 72px · 흰→회색 그라데이션 클립 (Jalnan 미설치 → Pretendard 볼드 폴백) */
.lv2-stat__num {
  font-family: 'Jalnan Gothic', 'Pretendard Variable', 'Pretendard', sans-serif;
  font-size: 72px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  white-space: nowrap;
  background: linear-gradient(103deg, #fff 45%, #999 114%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* 단위 — Figma unit(1380:13279): Jalnan 36px · #a0a0a0, 숫자 베이스라인 정렬 */
.lv2-stat__unit {
  font-size: 36px;
  vertical-align: baseline;
  margin-left: 8px;
  color: #a0a0a0;
  -webkit-text-fill-color: #a0a0a0;   /* 부모 그라데이션 클립 무시하고 단색 */
}
/* 라벨 — Figma label(1380:13287): Pretendard Medium 24px · #d3d3d3 · lh1.46 */
.lv2-stat__label { font-size: 24px; font-weight: 500; line-height: 1.46; color: #d3d3d3; }

/* ==========================================================================
   SECTION 7 — FAQ
   ========================================================================== */
.lv2-faq .lv2-shead { margin-bottom: 56px; }

/* 배지 — Figma tag-wrapper(1382:13295): Jalnan 18px · brand-ink · brand-tint 필 */
.lv2-faq .lv2-badge {
  background: #f8f7ff;             /* surface/brand-tint-subtle */
  border: 0;
  box-shadow: none;
  color: #2f2885;                  /* brand-ink */
  font-family: 'Jalnan Gothic', 'Pretendard Variable', 'Pretendard', sans-serif;
  font-size: 18px;
  font-weight: 700;                /* Jalnan 미설치 → Pretendard 볼드 폴백 */
  padding: 10px 18px 8px;
}
/* 타이틀 — Figma title(1382:13298): Jalnan 80px · 3-stop 그라데이션 */
.lv2-faq .lv2-heading {
  font-family: 'Jalnan Gothic', 'Pretendard Variable', 'Pretendard', sans-serif;
  font-size: 80px;
  line-height: 1.5;
  letter-spacing: -1px;
  background: linear-gradient(98.14deg, #5c42ff 19.57%, #000 48.09%, #464164 99.13%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Figma FAQItem(1484:54363~): 844 폭 · gap20 · 카드 radius16 · soft shadow */
.lv2-accordion { max-width: 844px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }

.lv2-acc {
  background: #fff;                /* bg/elevated */
  border-radius: 16px;            /* radius/xl-card */
  box-shadow: 10px 20px 38px rgba(120, 111, 143, .16);
  overflow: hidden;
}
.lv2-acc > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 88px;               /* Figma item 88 (py24 + 40 content row) */
  padding: 20px 32px;             /* px = landing/spacing/16 */
  font-size: 22px;                /* Heading-md */
  font-weight: 700;
  line-height: 1.46;
  color: #000;                    /* text/onlight/ink */
}
.lv2-acc > summary::-webkit-details-marker { display: none; }

/* 토글 버튼 — Figma toggle(1414:18695 닫힘 / 1400:17376 열림):
   40px 버튼(투명·radius6·p10) 안에 20px 아이콘. 클릭 영역 40px, 아이콘은 우측에서 10px 안쪽 */
.lv2-acc__icon {
  flex: 0 0 40px;
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;             /* radius/md */
  background: transparent;
}
/* 닫힘 — #222 20px 라운드 사각 + 흰색 플러스 (icon/line/plus, 각도 0 / -90) */
.lv2-acc__icon i {
  position: relative;
  width: 20px; height: 20px;
  background: #222;               /* surface/neutralstrong */
  border-radius: 4px;            /* spacing/2 */
  transition: background .22s ease-out;
}
.lv2-acc__icon i::before, .lv2-acc__icon i::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 1px;
  transition: transform .22s ease-out, background .22s ease-out;   /* 200~250ms ease-out */
}
/* 가로획 / 세로획 — 20px 박스 중앙, 10px 길이 · 2px 두께 */
.lv2-acc__icon i::before { top: 50%; left: 5px; right: 5px; height: 2px; transform: translateY(-50%); }
.lv2-acc__icon i::after  { left: 50%; top: 5px; bottom: 5px; width: 2px; transform: translateX(-50%); }
/* 열림 — 두 획이 시계방향 45° 회전해 × (icon/line/close). 박스는 사라지고 획은 검정.
   닫을 땐 45deg → 0deg 로 되돌림 (역방향 애니메이션) */
.lv2-acc[open] .lv2-acc__icon i { background: transparent; }
.lv2-acc[open] .lv2-acc__icon i::before { transform: translateY(-50%) rotate(45deg); background: #000; }
.lv2-acc[open] .lv2-acc__icon i::after  { transform: translateX(-50%) rotate(45deg); background: #000; }

/* 답변 — Figma answer(1400:17377…): Pretendard Regular 18 · #666 · lh1.46, 강조는 검정 볼드 */
.lv2-acc__body {
  padding: 0 32px 24px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.46;
  color: #666;
}
.lv2-acc__body strong { color: #000; font-weight: 700; }

/* ==========================================================================
   SECTION 8 — 최종 CTA + FOOTER
   ========================================================================== */
.lv2-final { padding: 40px 24px 0; background: transparent; }

.lv2-final__banner {
  position: relative;
  overflow: hidden;
  max-width: 1600px;               /* Figma content 1600×665 (≈2.4:1) — 일반 1200 컨테이너보다 넓음 */
  margin: 0 auto;
  padding: 72px 24px;              /* Figma content 665 − inner 520 ≈ 72 상하 */
  border-radius: 53px;             /* Figma Radius/section-card */
  display: flex;
  justify-content: center;
  color: #fff;
  /* Figma bg: Ink-Black(#0c0b11) + 블루·바이올렛·틸 메시 (CSS 근사) */
  background:
    radial-gradient(60% 55% at 47% 40%, rgba(74, 64, 255, .85), rgba(74, 64, 255, 0) 70%),
    radial-gradient(46% 55% at 84% 55%, rgba(40, 95, 255, .70), rgba(40, 95, 255, 0) 70%),
    radial-gradient(55% 55% at 13% 90%, rgba(28, 200, 200, .55), rgba(28, 200, 200, 0) 70%),
    radial-gradient(45% 45% at 62% 104%, rgba(30, 130, 190, .55), rgba(30, 130, 190, 0) 70%),
    #0c0b11;
}

/* Figma 계층: inner(gap24) > text(gap50) > tagline(gap16) > title/desc, price(gap14) */
.lv2-final__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 640px;
  text-align: center;
}
.lv2-final__text { display: flex; flex-direction: column; align-items: center; gap: 50px; }
.lv2-final__tagline { display: flex; flex-direction: column; align-items: center; gap: 16px; }

.lv2-final__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Jalnan Gothic', 'Pretendard Variable', 'Pretendard', sans-serif;
  font-weight: 800;                /* Jalnan 미설치 → Pretendard 볼드 폴백 */
  line-height: 1.5;
  letter-spacing: -1px;
}
.lv2-final__title-a { font-size: 70px; color: #fff; }
.lv2-final__title-b {
  font-size: 90px;
  background: linear-gradient(108.8deg, #fff 65.68%, #c3bafc 98.26%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.lv2-final__desc { font-family: 'JeonjuCraft Go OTF', 'Pretendard Variable', 'Pretendard', sans-serif; font-size: 24px; font-weight: 500; line-height: 1.46; color: #fff; }

.lv2-final__price { display: inline-flex; align-items: center; gap: 14px; }
.lv2-final__price .was { font-family: 'JeonjuCraft Go OTF', 'Pretendard Variable', 'Pretendard', sans-serif; font-size: 18px; font-weight: 500; color: #fff; text-decoration: line-through; }
.lv2-final__price .now {
  font-family: 'Jalnan Gothic', 'Pretendard Variable', 'Pretendard', sans-serif;
  font-size: 50px; font-weight: 800; line-height: 1.5;
  background: linear-gradient(130.26deg, #fff 28.55%, #4b30f3 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.lv2-final__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 80px;
  padding: 22px 40px;
  border-radius: 16px;             /* Figma Radius/xl-card (핀 아님) */
  background: #fff;
  color: var(--lv2-brand);
  font-size: 24px;                 /* Figma Body-xl */
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
  transition: transform .15s ease, box-shadow .15s ease;
  cursor: pointer;
}
.lv2-final__btn:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(0, 0, 0, .3); }

/* FOOTER — Figma section/FOOTER (1382:13535) */
.lv2-footer { background: transparent; padding: 60px 24px 80px; }
/* iframe 임베드(ysarang 등 허용 도메인) 시 푸터 숨김 — 단독 접속 시에는 노출.
   <head> 조기 스크립트가 <html> 에 .ysrai-embed 를 부여한다. */
.ysrai-embed .lv2-footer { display: none; }
.lv2-footer__inner {
  max-width: var(--lv2-container); /* 전역 컨테이너(1680)와 통일 */
  margin: 0 auto;
  padding: 0 36px;                 /* Figma content 내부 여백 → info/links 폭 1608, 좌측정렬 x156 */
  display: flex;
  flex-direction: column;
}
/* 브랜드 | 회사정보 가로 배치 (Figma info>brand) */
.lv2-footer__info { display: flex; align-items: flex-start; gap: 20px; }
.lv2-footer__brand { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }   /* Figma logo-group gap 4 */
.lv2-footer__brand img { width: 24px; height: 24px; padding: 4px; }   /* Figma: 24px 로고 박스 안 16px AI 아이콘 */
.lv2-footer__brand .name { font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--lv2-text); white-space: nowrap; }

.lv2-footer__details { display: flex; flex-direction: column; gap: 8px; }
.lv2-footer__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--lv2-text);
}
.lv2-footer__sep { flex: 0 0 1px; width: 1px; height: 8px; background: #8f95bd; }

.lv2-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid #c8cdf0;   /* Figma color/stroke/infosubtle */
}
.lv2-footer__copy { font-size: 16px; color: var(--lv2-text); }
.lv2-footer__links { display: flex; gap: 20px; }
.lv2-footer__links a { font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--lv2-text-2); }
.lv2-footer__links a:hover { color: var(--lv2-brand); }

/* ==========================================================================
   Responsive (tablet / mobile) — 1200px min-width 완화
   ========================================================================== */
@media (max-width: 1080px) {
  .lv2 { min-width: 0; }
  .lv2-hero__inner { grid-template-columns: 1fr; gap: 48px; }
  .lv2-hero__text { padding-left: 0; }
  .lv2-hero__cta { top: 0; }
  .lv2-hero__stage { justify-self: center; --mock-scale: .764; }
  .lv2-hero__title { font-size: 52px; }
  .lv2-features { padding-top: 120px; }
  .lv2-features .lv2-shead { margin-bottom: 56px; }
  .lv2-feature-layout { grid-template-columns: 1fr; gap: 40px; }
  .lv2-feature-visual { --fv-scale: .68; margin: 0 auto; }
  .lv2-compare-grid { grid-template-columns: 1fr; max-width: 520px; }
  .lv2-why-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .lv2-stats__grid { gap: 40px; }
  .lv2-heading { font-size: 36px; }
  .lv2-compare .lv2-heading, .lv2-start .lv2-heading { font-size: 36px; white-space: normal; }
  .lv2-heading--feature .l1 { font-size: 40px; }
  .lv2-heading--feature .l2 { font-size: 50px; }
  .lv2-features .lv2-subhead, .lv2-start .lv2-subhead { font-size: 20px; }
  .lv2-heading--why .l1 { font-size: 40px; }
  .lv2-heading--why .l2 { font-size: 50px; }
  .lv2-why .lv2-subhead { font-size: 20px; }
  .lv2-final__title-a { font-size: 44px; }
  .lv2-final__title-b { font-size: 56px; }
  .lv2-final__text { gap: 36px; }
  .lv2-final__desc { font-size: 18px; }
  .lv2-final__price .now { font-size: 36px; }
  .lv2-final__btn { height: 64px; padding: 18px 32px; font-size: 18px; }
  .lv2-faq .lv2-heading { font-size: 44px; }
  .lv2-acc > summary { min-height: 72px; padding: 16px 24px; font-size: 18px; }
  .lv2-acc__body { padding: 0 24px 20px; }
  .lv2-footer__info { flex-direction: column; gap: 20px; }
}

@media (max-width: 560px) {
  .lv2-section { padding: 72px 20px; }
  .lv2-hero { padding: 120px 20px 80px; }
  .lv2-hero__title { font-size: 40px; letter-spacing: -1.4px; }
  .lv2-hero__stage { --mock-scale: .46; }
  .lv2-feature-visual { --fv-scale: .46; }
  .lv2-nav__links { display: none; }
  .lv2-stats__grid { grid-template-columns: 1fr; }
  .lv2-final__title-a { font-size: 32px; }
  .lv2-final__title-b { font-size: 40px; }
  .lv2-final__text { gap: 28px; }
  .lv2-final__price .now { font-size: 30px; }
  .lv2-faq .lv2-heading { font-size: 30px; }
  .lv2-heading--why .l1 { font-size: 28px; }
  .lv2-heading--why .l2 { font-size: 34px; }
  .lv2-heading--feature .l1 { font-size: 28px; }
  .lv2-heading--feature .l2 { font-size: 34px; }
  .lv2-acc > summary { font-size: 16px; }
  .lv2-footer__bottom { flex-direction: column; gap: 16px; align-items: flex-start; }
}