/* ============================================
   수업 소개 (lesson-info) 전용 CSS
   ============================================ */

/* ① 다크 히어로 */
.li-hero { position:relative; background:linear-gradient(180deg, #D6EEFF 0%, #EFF8FF 60%, #FFFFFF 100%); min-height:100svh; display:flex; align-items:center; justify-content:center; text-align:center; padding:120px 24px 80px; overflow:hidden; }
.li-hero__glow { position:absolute; top:-20%; left:50%; transform:translateX(-50%); width:600px; height:600px; background:radial-gradient(circle, rgba(232,93,138,0.12) 0%, transparent 70%); pointer-events:none; }
.li-hero__inner { position:relative; max-width:1100px; width:100%; z-index:1; }
.li-hero__label { font-size:15px; letter-spacing:3px; color:var(--purple-600); margin-bottom:8px; }
.li-hero__sub { font-size:19px; color:var(--navy); margin-bottom:12px; }
.li-hero__title { font-size:clamp(2.125rem, 5vw, 3.325rem); font-weight:700; color:var(--black-800); line-height:1.3; margin-bottom:12px; }
.li-hero__title em { font-style:normal; color:var(--purple-600); }
.li-hero__desc { font-size:19px; color:var(--navy); margin-bottom:28px; }
.li-hero__ctas { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:24px; }

.btn-li-primary { display:inline-block; background:var(--purple-600); color:#fff; padding:14px 32px; border-radius:var(--radius-md); font-size:19px; font-weight:500; transition:background 0.2s,transform 0.2s; }
.btn-li-primary:hover { background:var(--purple-700); transform:translateY(-2px); }
.btn-li-primary--lg { padding:16px 48px; font-size:20px; animation:btnGlow 2s ease-in-out infinite; }
@keyframes btnGlow { 0%,100% { box-shadow:0 0 8px rgba(232,93,138,0.3); } 50% { box-shadow:0 0 24px rgba(232,93,138,0.6), 0 0 48px rgba(232,93,138,0.2); } }
.btn-li-ghost { display:inline-block; border:1px solid var(--black-500); color:var(--black-800); padding:14px 32px; border-radius:var(--radius-md); font-size:19px; font-weight:500; transition:all 0.2s; }
.btn-li-ghost:hover { border-color:rgba(255,255,255,0.5); background:rgba(255,255,255,0.05); }

/* 피아노 바 */
.piano-bar { display:flex; max-width:560px; height:48px; margin:0 auto 8px; border:1px solid rgba(232,93,138,0.25); border-radius:var(--radius-sm); overflow:hidden; position:relative; }
.piano-key { flex:1; background:rgba(189,224,254,0.4); border-right:1px solid rgba(232,93,138,0.1); }
.piano-key:last-child { border-right:none; }
.piano-key.yours { background:rgba(232,93,138,0.5); }
.piano-key.target { background:rgba(232,93,138,0.2); }
.piano-key.gap { background:rgba(196,89,58,0.45); }
.piano-bar--empty { animation:pianoGlow 3s ease-in-out infinite; }
@keyframes pianoGlow { 0%,100% { border-color:rgba(232,93,138,0.25); } 50% { border-color:rgba(232,93,138,0.5); } }
/* 게이지 마커 (YOUR RANGE / 1차 커리큘럼 완료 시) */
.li-gauge-markers       { max-width:680px; margin:4px auto 0;     position:relative; height:42px; }
.li-gauge-markers-top   { max-width:680px; margin:0 auto 4px;     position:relative; height:42px; display:block; }
.li-gauge-marker { position:absolute; top:0; text-align:center; }
.li-gauge-marker__arrow { font-size:14px; font-weight:700; color:var(--pink-500); display:block; line-height:1; }
.li-gauge-marker__label { font-size:11px; letter-spacing:1.5px; color:var(--pink-500); font-weight:700; white-space:nowrap; }
.li-gauge-marker__note  { display:block; font-size:13px; font-weight:600; color:var(--pink-500); white-space:nowrap; }
.li-gauge-marker--user  { opacity:0.55; }

/* 기본(모바일 포함): 두 마커 모두 왼쪽 -2px */
.li-gauge-marker--user { transform: translateX(calc(-50% - 2px)); }
.li-gauge-marker--goal { transform: translateX(calc(-50% - 2px)); }

/* PC: USER만 추가로 -4px 더 (총 -6px) */
@media (min-width: 769px) {
  .li-gauge-marker--user { transform: translateX(calc(-50% - 6px)); }
}

/* YOUR RANGE는 항상 게이지 위쪽 컨테이너에 표시, 아래쪽엔 GOAL만 */
.li-gauge-markers-top .li-gauge-marker {
  top: auto;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.25;
}
.li-gauge-markers > #li-user-marker { display: none; }
.li-gauge-markers { height: 42px; }

.piano-label { position:absolute; top:50%; transform:translateY(-50%); font-size:15px; color:var(--black-800); font-weight:500; padding:0 8px; }
.piano-label--left { left:0; }
.piano-label--right { right:0; }
.piano-caption { font-size:15px; color:var(--navy); margin-bottom:28px; }

/* 수업소개 게이지 (음역대 테스트 결과 기반) */
.li-gauge { max-width:100%; margin:0 auto 24px; }

.li-gauge__frame {
  display:flex; gap:2px; padding:3px;
  border:1.5px solid rgba(232,93,138,0.3);
  border-radius:4px; background:#fff;
}

.li-gauge__cell {
  flex:1; height:36px; border-radius:2px;
  background:#D4EFFF;
  transition: background 0.3s;
}

.li-gauge__cell--you { border:none; }
.li-gauge__cell--goal { border-radius:2px; }

.li-gauge__labels {
  display:flex; justify-content:space-between;
  margin-top:12px; padding:0 4px;
}

.li-gauge__lbl { display:flex; flex-direction:column; gap:2px; }
.li-gauge__lbl-title {
  font-size:14px; letter-spacing:2px; text-transform:uppercase;
  color:var(--black-700); font-weight:600;
}

.li-gauge__lbl-val { font-size:17px; font-weight:600; }
.li-gauge__lbl-val--you { color:var(--purple-600); }
.li-gauge__lbl-val--goal { color:var(--black-800); text-align:right; }

.li-gauge__verdict {
  text-align:center; margin-top:16px; font-size:18px; font-weight:600;
  padding:8px 20px; border-radius:20px; display:inline-block;
}

.li-gauge { text-align:center; }

.li-gauge__verdict--reached {
  background:rgba(76,175,80,0.15); color:#4CAF50;
  border:1px solid rgba(76,175,80,0.25);
}

.li-gauge__verdict--gap {
  background:rgba(232,93,138,0.15); color:var(--purple-600);
  border:1px solid rgba(232,93,138,0.25);
}

.li-gauge--empty .li-gauge__frame {
  animation:pianoGlow 3s ease-in-out infinite;
}

.li-gauge__caption {
  font-size:15px; color:var(--navy); margin-top:8px;
}

.scroll-indicator { font-size:15px; color:var(--navy); letter-spacing:2px; display:flex; flex-direction:column; align-items:center; gap:4px; }
.scroll-arrow { animation:scrollFloat 2s ease-in-out infinite; }
.scroll-arrow--up { animation:scrollFloatUp 2s ease-in-out infinite; }
@keyframes scrollFloatUp { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
@keyframes scrollFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(6px); } }

/* ★ 매칭 섹션 (음역대 테스트 → 수업소개 1:1 매칭) */
.match-section { padding: 80px 24px 56px; position: relative; z-index: 1; }
.match-section[hidden] { display: none; }
.match-inner { max-width: 880px; margin: 0 auto; text-align: center; }
.match-illust { width: 144px; height: auto; margin: 0 auto 16px; display: block; }
.match-eyebrow { font-size: 14px; letter-spacing: 2px; color: var(--pink-500); margin: 0 0 12px; font-weight: 600; }
.match-heading { font-size: clamp(1.75rem, 4vw, 2.4rem); font-weight: 800; color: var(--navy); margin: 0 0 40px; line-height: 1.35; }
.match-heading__br-mobile { display: none; }
@media (max-width: 768px) { .match-heading__br-mobile { display: inline; } }

.match-cards { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 14px; }
.match-card { display: flex; flex-direction: row; align-items: stretch; gap: 0; background: #fff; border: 1px solid rgba(212,195,165,0.3); border-radius: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); overflow: hidden; }
.match-card[hidden] { display: none; }

.match-card__left,
.match-card__right { flex: 1; padding: 20px 24px; text-align: left; word-break: keep-all; }
.match-card__left { border-right: 1px solid rgba(212,195,165,0.3); }

.match-card__tag { display: inline-block; font-size: 14px; font-weight: 600; padding: 4px 12px; border-radius: 999px; margin-bottom: 12px; letter-spacing: 0.3px; }
.match-card__tag--worry { background: rgba(232,93,138,0.12); color: var(--pink-500); }
.match-card__tag--answer { background: rgba(85,162,217,0.14); color: #2c7eb8; }

.match-card__quote { margin: 0; font-size: 18px; font-weight: 600; color: var(--black-800); line-height: 1.55; }
.match-card__answer { margin: 0; font-size: 18px; font-weight: 700; color: var(--navy); line-height: 1.6; }

/* 브릿지 → 스토리 섹션 */
.match-bridge { background: var(--beige-50, #f7f0e3); border-radius: 16px; padding: 32px 24px; text-align: center; }
.match-bridge__hook { margin: 0 0 6px; font-size: 19px; font-weight: 700; color: var(--navy); }
.match-bridge__sub { margin: 0 0 20px; font-size: 17px; color: var(--black-700); }
.match-bridge__btn { background: var(--pink-500); color: #fff; border: none; padding: 14px 32px; border-radius: 999px; font-size: 19px; font-weight: 500; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease; }
.match-bridge__btn:hover { background: #d44a78; transform: translateY(-1px); }
.match-bridge__btn:active { transform: translateY(0); }

@media (max-width: 768px) {
  .match-section { padding: 56px 16px 40px; }
  .match-card { flex-direction: column; }
  .match-card__left { border-right: none; border-bottom: 1px solid rgba(212,195,165,0.3); }
  .match-card__left,
  .match-card__right { padding: 18px 20px; }
  .match-card__quote,
  .match-card__answer { font-size: 17px; }
  .match-bridge__hook { font-size: 17px; }
  .match-bridge__sub { font-size: 15px; }
  .match-bridge__btn { font-size: 17px; padding: 13px 28px; }
}

/* ② 루룽 스토리 (대화형) */
.story-section { padding:96px 24px 64px; max-width:600px; margin:0 auto; position:relative; z-index:1; }
.story-header { margin-bottom:32px; text-align:center; }
.story-header .section-label { padding-top:0; }
.story-illust { width:144px; height:auto; margin:0 auto 16px; display:block; }
.story-heading { font-size:clamp(1.75rem, 4vw, 2.4rem); font-weight:800; color:var(--navy); line-height:1.35; margin:0 0 8px; }
.story-sub { font-size:17px; color:var(--black-700); line-height:1.7; }

.li-sec-label { font-size:15px; letter-spacing:3px; color:var(--purple-600); margin-bottom:8px; text-align:center; }

/* 대화 래퍼 */
.chat-wrap { display:flex; flex-direction:column; }

/* ===== 메시지 행 (Grid 기반) =====
   데스크톱: 아바타 옆에 [이름 위 / 말풍선 아래] 2행 (현재 모양 유지)
   모바일:   [아바타+이름 한 줄 / 말풍선 풀와이드 아래] 2행 (카톡 스타일) */
.chat-msg {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "avatar name"
    "avatar bubble";
  column-gap: 12px;
  row-gap: 4px;
  margin-bottom: 20px;
  align-items: start;
}
.chat-msg-right {
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "name   avatar"
    "bubble avatar";
  justify-items: end;
}

/* 아바타 */
.chat-avatar { grid-area: avatar; width:96px; height:96px; border-radius:50%; flex-shrink:0; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:600; align-self: start; }
.chat-avatar img { width:100%; height:100%; object-fit:cover; }
.chat-avatar-mone { background:#fff; color:var(--navy); }
.chat-avatar-user { background:var(--pink-100); color:var(--pink-500); }
.chat-avatar--hide { visibility:hidden; }

/* 이름 */
.chat-name { grid-area: name; font-size:15px; font-weight:500; margin:0 0 4px; }
.chat-name-mone { color:var(--navy); }
.chat-name-user { color:var(--pink-500); }

/* 말풍선 */
.chat-bubble { grid-area: bubble; max-width:75%; padding:14px 18px; border-radius:16px; font-size:18px; line-height:1.7; color:var(--black-800); }
.chat-bubble-mone { background:#fff; border:1px solid rgba(212,223,235,0.2); border-bottom-left-radius:4px; }
.chat-bubble-user { background:var(--pink-100); border-bottom-right-radius:4px; }
.chat-msg-right .chat-bubble { justify-self: end; }

/* 본문 */
.chat-text { margin:0; }
.chat-text strong { font-weight:600; color:var(--black-800); }

/* ===== 모바일: 카톡 스타일 ===== */
@media (max-width: 768px) {
  .chat-msg {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "avatar name"
      "bubble bubble";
    column-gap: 8px;
    row-gap: 4px;
    margin-bottom: 16px;
    align-items: center;
  }
  .chat-msg-right {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name   avatar"
      "bubble bubble";
  }
  .chat-avatar { width: 22px; height: 22px; align-self: center; }
  .chat-name { font-size: 14px; font-weight: 600; margin: 0; align-self: center; }
  .chat-bubble { max-width: 92%; font-size: 15px; padding: 12px 14px; line-height: 1.6; }
  .chat-msg-right .chat-bubble { justify-self: end; margin-right: 8px; }
  .chat-msg .chat-bubble { margin-left: 4px; }
  .chat-msg-right .chat-bubble { margin-left: 0; }
  /* 연속 말풍선: 아바타 invisible일 땐 이름도 숨김 (자리는 차지 X) */
  .chat-msg .chat-avatar--hide + .chat-name { display: none; }
  .chat-msg .chat-avatar--hide {
    width: 0; height: 0; margin: 0;
  }
}

/* 챕터 구분 */
.chat-divider { text-align:center; margin:28px 0; font-size:16px; color:var(--pink-500); letter-spacing:2px; }

/* 프로필 카드 */
.story-profile { display:flex; align-items:center; gap:10px; padding:14px; background:#fff; border-radius:var(--radius-lg); border:1px solid rgba(212,223,235,0.2); margin-top:24px; }
.story-profile-name { font-size:18px; font-weight:500; color:var(--black-800); margin:0; }
.story-profile-meta { font-size:16px; color:var(--black-700); margin:0; }

/* 전환 텍스트 */
.story-bridge-wrap { text-align:center; margin-top:32px; }
.story-bridge-illust { width:144px; height:auto; margin:0 auto 16px; display:block; }
.story-bridge { font-size:19px; font-weight:500; color:var(--black-700); margin:0; cursor:pointer; text-align:center; transition:color 0.2s var(--ease); }
.story-bridge:hover { color:var(--purple-600); }

[data-story-anim] { opacity:0; transform:translateY(24px); transition:opacity 0.5s cubic-bezier(0.4,0,0.2,1), transform 0.5s cubic-bezier(0.4,0,0.2,1); }
[data-story-anim].visible { opacity:1; transform:translateY(0); }

/* ③ Proof Wall */
.proof-section { background:linear-gradient(180deg, #FFFFFF 0%, #FBEAF0 30%, #FBEAF0 50%, #FDF4F7 75%, #FFFFFF 100%); padding-bottom:48px; position:relative; z-index:1; overflow:hidden; }
.proof-title { font-size:clamp(1.75rem, 4vw, 2.4rem); font-weight:800; color:var(--navy); text-align:center; margin-bottom:4px; }
.proof-sub { font-size:18px; color:var(--navy); text-align:center; margin-bottom:32px; }

.proof-wall { overflow:hidden; }
.proof-row { display:flex; gap:16px; padding:8px 0; width:max-content; }
.proof-row--left { animation:scrollL 120s linear infinite; }
.proof-row--right { animation:scrollR 120s linear infinite; }
.proof-row:hover { animation-play-state:paused; }
@keyframes scrollL { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }
@keyframes scrollR { 0% { transform:translateX(-50%); } 100% { transform:translateX(0); } }

.proof-card { flex:0 0 270px; background:#fff; border-radius:var(--radius-lg); overflow:hidden; }
.proof-thumb { aspect-ratio:16/9; background:var(--beige-200); position:relative; }
.proof-info { padding:12px 14px; }
.proof-name { font-size:17px; font-weight:500; color:var(--black-800); margin-bottom:4px; }
.proof-quote { font-size:16px; color:var(--navy); line-height:1.5; margin-bottom:6px; }
.proof-tag { font-size:14px; padding:2px 8px; border-radius:10px; }
.proof-tag--review { background:rgba(232,93,138,0.2); color:var(--purple-600); }
.proof-tag--cover { background:rgba(94,122,58,0.2); color:#8ab060; }
.proof-tag--video { background:rgba(232,93,138,0.2); color:var(--purple-600); }

/* 텍스트 후기 카드 */
.proof-card--text { background:#fff; flex:0 0 300px; }
.proof-card--text .proof-thumb { display:none; }

.proof-text-inner { padding:16px 18px; }

.proof-text-head { display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.proof-text-name { font-size:17px; font-weight:600; color:var(--black-800); }
.proof-text-stars { font-size:16px; color:#D4920A; letter-spacing:1px; }
.proof-text-date { font-size:15px; color:var(--black-700); }

.proof-text-body { font-size:17px; color:var(--black-700); line-height:1.7; display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; }

.proof-more { display:flex; justify-content:center; gap:32px; padding:24px; }
.proof-more a { font-size:18px; color:var(--purple-600); font-weight:500; transition:color 0.2s; }
.proof-more a:hover { color:var(--purple-700); }

/* ④ WHY POSSIBLE (그룹핑 + 교차 레이아웃) */
.why-section { padding:96px 32px 64px; max-width:960px; margin:0 auto; position:relative; z-index:1; }
.why-header { text-align:center; margin-bottom:40px; }
.why-heading { font-size:clamp(1.75rem, 4vw, 2.4rem); font-weight:800; color:var(--navy); line-height:1.35; margin:0 0 8px; }
.why-sub { font-size:18px; color:var(--black-700); line-height:1.7; }

.system-group-header { margin-bottom:16px; }
.system-group-title { font-size:25px; font-weight:600; color:var(--black-800); margin:0 0 4px; }
.system-group-sub { font-size:15px; color:var(--black-700); line-height:1.7; margin:0; }
.system-group-gap { height:48px; }

.system-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.system-row:last-child { margin-bottom:0; }
.system-row-reverse { direction:rtl; }
.system-row-reverse > * { direction:ltr; }

/* 보충수업: 이미지가 박스 너비에 맞춰 잘리지 않게 */
.system-row--bochung-tall .system-cell-img img { object-fit: contain; }
@media (max-width: 768px) {
  .system-row--bochung-tall .system-cell-img { min-height: 240px; }
}

.system-cell { border-radius:var(--radius-lg); min-height:160px; display:flex; }
.system-cell-img { background:var(--beige-200, #E4D6BE); align-items:center; justify-content:center; overflow:hidden; flex-direction:column; gap:6px; position:relative; }
.system-cell-img img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }
.system-img-label { font-size:17px; font-weight:500; color:var(--black-700); }
.system-cell-txt { background:#fff; border:1px solid rgba(212,223,235,0.2); padding:24px; flex-direction:column; justify-content:center; position:relative; }

.system-title { font-size:19px; font-weight:600; color:var(--black-800); margin:0 0 4px; }
.system-hook { font-size:17px; font-weight:500; color:var(--purple-600); line-height:1.5; margin:0 0 12px; }
.system-desc { font-size:17px; color:var(--black-700); line-height:1.7; margin:0 0 10px; }
.system-desc:last-child { margin:0; }
.system-badge { position:absolute; top:16px; right:16px; font-size:14px; background:var(--purple-50); color:var(--purple-600); padding:3px 10px; border-radius:var(--radius-sm, 4px); font-weight:500; }

.card { background:#fff; border-radius:var(--radius-lg); border:1px solid rgba(212,223,235,0.2); }

/* (legacy) How It Works */
.how-section { background:var(--beige-50); padding:64px 24px 48px; position:relative; z-index:1; }
.how-inner { max-width:960px; margin:0 auto; }
.how-title { font-size:30px; font-weight:600; color:var(--black-800); text-align:center; margin-bottom:4px; }
.how-sub { font-size:18px; color:var(--black-700); text-align:center; margin-bottom:32px; }

.how-tabs { display:flex; border-bottom:1px solid var(--beige-300); margin-bottom:28px; }
.how-tab { flex:1; text-align:center; padding:14px 0; font-size:18px; font-weight:500; color:var(--black-700); cursor:pointer; border-bottom:2px solid transparent; transition:all 0.2s; }
.how-tab.active { color:var(--black-800); border-bottom-color:var(--purple-600); }
.how-tab__num { color:var(--purple-600); margin-right:6px; font-weight:600; }

.how-panel { display:none; grid-template-columns:1fr 1fr; gap:32px; align-items:center; }
.how-panel.active { display:grid; }
.how-panel__img { aspect-ratio:4/3; background:var(--beige-200); border-radius:var(--radius-lg); }
.how-panel__text h3 { font-size:24px; font-weight:600; color:var(--black-800); margin-bottom:16px; }
.how-panel__text ul { list-style:none; }
.how-panel__text li { font-size:18px; color:var(--black-700); line-height:1.8; padding-left:16px; position:relative; }
.how-panel__text li::before { content:''; position:absolute; left:0; top:10px; width:6px; height:6px; border-radius:50%; background:var(--purple-600); }

/* 시스템 4카드 */
.sys-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:44px; }
.sys-card { background:#fff; border:1px solid rgba(212,223,235,0.2); border-radius:var(--radius-lg); padding:20px; transition:transform 0.2s; }
.sys-card:hover { transform:translateY(-3px); }
.sys-icon { width:36px; height:36px; background:var(--purple-50); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:10px; }
.sys-name { font-size:18px; font-weight:600; color:var(--black-800); margin-bottom:4px; }
.sys-desc { font-size:16px; color:var(--black-700); line-height:1.6; }

/* FAQ */
.faq-section { padding:64px 32px; max-width:960px; margin:0 auto; }
.faq-heading { font-size:22px; font-weight:600; color:var(--black-800); margin:0 0 24px; }
.faq-list { border-top:1px solid var(--beige-300); }
.faq-item { border-bottom:1px solid var(--beige-300); }
.faq-question { width:100%; display:flex; align-items:center; justify-content:space-between; padding:20px 0; background:none; border:none; cursor:pointer; text-align:left; font-family:inherit; font-size:19px; font-weight:500; color:var(--black-800); transition:color 0.2s var(--ease); }
.faq-question:hover { color:var(--purple-600); }
.faq-icon { font-size:22px; color:var(--black-700); flex-shrink:0; margin-left:16px; transition:transform 0.3s var(--ease); }
.faq-item.open .faq-icon { transform:rotate(45deg); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height 0.3s var(--ease), padding 0.3s var(--ease); padding:0; }
.faq-item.open .faq-answer { max-height:300px; padding:0 0 20px; }
.faq-answer p { font-size:18px; color:var(--black-700); line-height:1.7; margin:0; }

/* ⑤ Final CTA */
/* Final CTA */
.final-cta-section { background:var(--beige-50); padding:64px 32px; text-align:center; max-width:960px; margin:0 auto; position:relative; z-index:1; }
.final-cta-illust { width:144px; height:auto; margin:0 auto 16px; display:block; }
.final-cta-heading { font-size:clamp(1.75rem, 4vw, 2.4rem); font-weight:800; color:var(--navy); margin:0 0 8px; line-height:1.35; }
.final-cta-video { max-width:960px; margin:0 auto 28px; padding-bottom:56.25%; border-radius:var(--radius-lg); overflow:hidden; background:var(--beige-200); position:relative; height:0; }
.final-cta-video iframe, .final-cta-video video { position:absolute; top:0; left:0; width:100%; height:100%; display:block; border:0; object-fit:cover; }
.final-cta-video img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }
.final-cta-sub { font-size:18px; color:var(--black-700); margin:0 0 28px; line-height:1.7; }
.final-cta-btn { display:inline-block; background:var(--purple-600); color:#fff; font-size:20px; font-weight:500; padding:14px 40px; border-radius:var(--radius-md); text-decoration:none; transition:background 0.2s var(--ease); margin-bottom:28px; }
.final-cta-btn:hover { background:var(--purple-700); color:#fff; }
.final-cta-closing { font-size:17px; color:var(--black-700); line-height:1.7; margin:0; }

.li-ps { max-width:560px; margin:32px auto 0; text-align:left; border-left:3px solid var(--purple-600); background:rgba(255,255,255,0.03); padding:20px 24px; border-radius:0 var(--radius-md) var(--radius-md) 0; }
.li-ps p { font-size:18px; color:var(--black-700); line-height:1.8; }

/* 아웃트로 */
.li-outro { max-width:640px; margin:80px auto 0; text-align:center; padding:0 24px; }
.li-outro__title { font-size:clamp(1.75rem, 4vw, 2.4rem); font-weight:800; color:var(--navy); line-height:1.4; margin-bottom:32px; }
.li-outro__body { font-size:17px; color:var(--black-700); line-height:1.9; margin-bottom:20px; }
.li-outro__body:last-child { margin-bottom:0; }

/* Sticky CTA */
.li-sticky-cta { position:fixed; bottom:0; left:0; right:0; z-index:99; background:rgba(255,255,255,0.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-top:1px solid rgba(44,74,110,0.1); padding:12px 24px; text-align:center; transform:translateY(100%); transition:transform 0.3s var(--ease); }
.li-sticky-cta.visible { transform:translateY(0); }
.li-sticky-btn { display:inline-block; max-width:400px; width:100%; background:var(--purple-600); color:#fff; padding:14px; border-radius:var(--radius-md); font-size:19px; font-weight:500; transition:background 0.2s; }
.li-sticky-btn:hover { background:var(--purple-700); }

/* 히어로 애니메이션 키프레임 */
@keyframes fadein {
  0%   { opacity:0; transform:translateY(10px) }
  100% { opacity:1; transform:translateY(0) }
}
@keyframes nameGlow {
  0%   { text-shadow:0 0 0 transparent }
  50%  { text-shadow:0 0 24px rgba(232,93,138,0.5) }
  100% { text-shadow:0 0 8px rgba(232,93,138,0.2) }
}
@keyframes overGlow {
  0%   { box-shadow:0 0 6px rgba(232,93,138,0.15) }
  15%  { box-shadow:0 0 18px rgba(232,93,138,0.5) }
  30%  { box-shadow:0 0 5px rgba(232,93,138,0.1) }
  50%  { box-shadow:0 0 22px rgba(232,93,138,0.6),0 0 40px rgba(232,93,138,0.15) }
  70%  { box-shadow:0 0 6px rgba(232,93,138,0.1) }
  85%  { box-shadow:0 0 14px rgba(232,93,138,0.4) }
  100% { box-shadow:0 0 6px rgba(232,93,138,0.15) }
}
.gauge-over-on { animation:overGlow 2s ease infinite; border-radius:8px; }

/* reveal */
.reveal { opacity:0; transform:translateY(24px); transition:opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.reveal.visible { opacity:1; transform:translateY(0); }

/* 반응형 */
@media (max-width:768px) {
  .li-hero__title { font-size:30px; }
  .li-hero__sub, .li-hero__desc { font-size:16px; }
  .li-hero__label, .li-sec-label { font-size:13px; }
  .piano-bar { height:40px; }
  .li-gauge__cell { height:28px; }
  .li-gauge__lbl-val { font-size:15px; }
  .story-section { padding:64px 16px 48px; }
  .story-heading { font-size:clamp(1.5rem, 5vw, 1.75rem); }
  .story-sub { font-size:15px; }
  .chat-avatar { width:80px; height:80px; }
  .chat-bubble { max-width:85%; font-size:15px; padding:12px 14px; }
  .chat-name { font-size:13px; }
  .chat-divider { font-size:14px; }
  .story-profile { flex-direction:column; text-align:center; }
  .story-profile-name { font-size:16px; }
  .story-profile-meta { font-size:14px; }
  .story-bridge { font-size:16px; }
  .proof-title { font-size:clamp(1.5rem, 5vw, 1.75rem); }
  .proof-sub { font-size:15px; }
  .proof-name { font-size:15px; }
  .proof-quote { font-size:14px; }
  .proof-text-body { font-size:15px; }
  .proof-more a { font-size:16px; }
  .why-section { padding:64px 20px 48px; }
  .why-heading { font-size:clamp(1.5rem, 5vw, 1.75rem); }
  .why-sub { font-size:15px; }
  .system-group-title { font-size:20px; }
  .system-group-sub { font-size:14px; }
  .system-title { font-size:16px; }
  .system-hook { font-size:15px; }
  .system-desc { font-size:14px; }
  .system-row, .system-row-reverse { grid-template-columns:1fr; direction:ltr; }
  .system-row-reverse > * { direction:ltr; }
  .system-row .system-cell-img { order:-1; }
  .system-cell-img { min-height:200px; }
  .system-group-gap { height:32px; }
  .how-title { font-size:24px; }
  .how-sub { font-size:15px; }
  .how-tab { font-size:15px; }
  .how-panel__text h3 { font-size:20px; }
  .how-panel__text li { font-size:15px; }
  .how-panel.active { grid-template-columns:1fr; }
  .sys-name { font-size:16px; }
  .sys-desc { font-size:14px; }
  .sys-grid { grid-template-columns:repeat(2,1fr); }
  .faq-section { padding:48px 20px; }
  .faq-heading { font-size:19px; }
  .faq-question { font-size:16px; padding:16px 0; }
  .faq-answer p { font-size:15px; }
  .final-cta-section { padding:48px 20px; }
  .final-cta-heading { font-size:clamp(1.5rem, 5vw, 1.75rem); }
  .final-cta-sub { font-size:15px; }
  .final-cta-btn { font-size:17px; padding:12px 32px; width:100%; max-width:320px; }
  .final-cta-closing { font-size:15px; }
  .btn-li-primary, .btn-li-ghost { font-size:16px; padding:12px 24px; }
  .btn-li-primary--lg { font-size:17px; padding:14px 36px; }
  .li-sticky-btn { font-size:17px; }
  .li-outro { margin-top:48px; }
  .li-outro__title { margin-bottom:24px; }
  .li-outro__body { font-size:15px; }
  .li-ps p { font-size:16px; }
  .proof-card { flex:0 0 230px; }
}

.mobile-br { display: none; }

@media (max-width:480px) {
  .li-hero__title { font-size:28px; }
  .li-hero__ctas { flex-direction:column; }
  .btn-li-primary, .btn-li-ghost { width:100%; text-align:center; }
  .sys-grid { grid-template-columns:1fr; }
  .proof-card { flex:0 0 230px; }
  .mobile-br { display: inline; }
}