@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* === DESIGN TOKENS — 모든 시각 색의 단일 출처(SoT). DS/README.md 참조.
   raw hex 전면 토큰화: :root 한 곳만 바꾸면 전 컴포넌트에 반영된다.
   방향: Sophistication & Trust. 브랜드=보라+민트. radius 샤프(2~4px). */
:root {
  /* 브랜드 */
  --white:              #fff;
  --brand-purple:       #a855f7;
  --brand-purple-hover: #9333ea;
  --brand-purple-soft:  #c084fc;
  --brand-violet:       #5b43db;
  --brand-hero:         #7c4dee;
  --brand-mint:         #88f8f0;
  --accent-gold:        #e8c872;
  --brand-red:          #ef4444;   /* 필진 소개 역할(키워드) 텍스트 — 전체 통일 강조색 (다크 배경) */
  --hl-box:             #5D46DE;   /* 히어로 로고 하이라이트 박스 */
  --flow-icon-a:        #A558F8;   /* 활용 플로우 아이콘 — 번갈이 A */
  --flow-icon-b:        #5D46DE;   /* 활용 플로우 아이콘 — 번갈이 B */
  --point-gold:         #FFCC4D;   /* 카피 강조 포인트 */
  /* 표면 (레이어드 깊이) */
  --bg-base:            #111113;
  --bg-1:               #2D2A3A;   /* 글로벌 배경 그라디언트 상단 */
  --bg-2:               #1A1728;   /* 글로벌 배경 그라디언트 하단 */
  --bg-deep:            #0d0d0f;
  --surface-1:          #19191b;
  --surface-1-alt:      #1a1a1d;
  --surface-locked:     #18181a;
  --surface-2:          #1e1e21;
  --surface-2-hover:    #222225;
  --surface-card-hover: #232327;
  --surface-3:          #26262a;
  --surface-3-hover:    #2e2e32;
  /* 선·구분 */
  --border:             #2a2a2e;
  --border-strong:      #333338;
  --divider-line:       rgba(77,71,102,0.5);
  --shadow-color:       rgba(0,0,0,0.28);
  --shadow-text:        0 2px 8px rgba(0,0,0,0.45);   /* 텍스트 드롭섀도우 */
  --mask-opaque:        #000;                          /* mask-image 그라디언트의 '완전 노출' 스톱(시각색 아님·불투명도 의미) */
  --avatar-placeholder: #c2b2ee;                       /* 아바타 placeholder SVG 채움색. data URI 안 hex는 var() 불가 → 아래 .expert-card 등 data URI와 값 동기화 */
  /* 텍스트 위계 */
  --text-1:             #ffffff;
  --text-1-dim:         #d4d1cc;
  --text-cool:          #e0e0e5;
  --text-soft:          #d8d6e0;
  --text-result-soft:   #bfbad9;   /* 결과 카드 설명 본문(유형 설명·BEST PARTNER) — lavender grey */
  --text-2:             #b8b8bd;
  --text-3:             #9a9aa1;
  --text-muted:         #a3a3a8;
  --text-faint:         #8a8a8f;
  --ink-muted:          #77777c;
  --ink-locked:         #4a4a50;
  --ink-locked-2:       #555559;
  --ink-faint:          #555;
  /* 기능색 (브랜드 accent 아님 — 의미 격리) */
  --fn-done:            #3d7a5f;
  --fn-done-bright:     #2e8c57;
  --fn-alert:           #c53030;
  --avatar-bg:          #edeef2;
  /* 퀴즈 레벨 (1·2·4는 기능/브랜드색 별칭 → 중앙 조율) */
  --level-1:            var(--fn-done);
  --level-2:            var(--brand-purple);
  --level-3:            #b87333;
  --level-4:            var(--fn-alert);
  /* 유형 카드 보조색 (레벨 색 외 투자 유형에 쓰는 팔레트 — admin COLOR_TOKENS 와 동기) */
  --type-blue:          #4a6fa5;
  --type-violet:        #8b5cf6;
  /* 스페이싱 (4px 베이스) */
  /* 스페이싱 — 최소 4px, 그 위로는 전부 8배수 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 16px; --sp-4: 24px;
  --sp-5: 32px; --sp-6: 40px; --sp-7: 48px; --sp-8: 64px; --sp-9: 80px;
  /* radius — 최소 4px, 그 위로는 8배수 */
  --r-sm: 4px; --r: 4px; --r-lg: 8px;
  /* 타이포 */
  --font-body: 'Pretendard', -apple-system, sans-serif;
  /* 타입 스케일 (위계: 작을수록 부연/메타, 클수록 제목)
     웹 가독성 위해 전면 스케일 업 — 최소 12px. 기존 11/12/14/15/16/18/22/26 → 12/14/16/17/18/20/24/30 */
  --fs-micro:  12px;   /* 뱃지·법적 고지 등 최소 보조 (스케일 하한) */
  --fs-meta:   14px;   /* 메타데이터·캡션·부연설명 */
  --fs-body:   16px;   /* 기본 본문 (default) */
  --fs-review: 17px;   /* 후기 별·문장 */
  --fs-lg:     18px;   /* 강조 본문·카드 제목 */
  --fs-h3:     20px;   /* 소제목 */
  --fs-h2:     24px;   /* 섹션 제목 */
  --fs-h1:     30px;   /* 페이지·퀴즈 제목 */
  /* 폰트 웨이트 위계 */
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --fw-black:     900;
  --lh-tight:  1.3;    /* 제목 */
  --lh-body:   1.6;    /* 본문 */

  /* === GLASS (frosted surface) — 다크 위 유리 재질. 장식 스트립 없이 재질만으로 위계 표현 === */
  /* 카드·컨테이너 = 프로스티드 글래스(뒤 스카이라인이 비침), nav도 글래스 */
  --glass-1:            color-mix(in srgb, var(--surface-2) 52%, transparent);   /* 기본 카드 — 백드롭 블러 잘 보이게 */
  --glass-1-hover:      color-mix(in srgb, var(--surface-2-hover) 60%, transparent);
  --glass-2:            color-mix(in srgb, var(--surface-1) 50%, transparent);   /* 떠있는 nav — 배경 비침 줄여 가독성 확보 */
  --glass-deep:         color-mix(in srgb, var(--bg-deep) 52%, transparent);     /* 안쪽 패널·입력 */
  --glass-brand:        color-mix(in srgb, var(--brand-purple) 14%, var(--glass-1));
  /* 테두리 선 배제 — 깊이는 그림자+글래스로만 (모든 탭 공통) */
  --glass-border:       transparent;
  --glass-border-hi:    transparent;
  --glass-border-brand: transparent;
  --border-card:        color-mix(in srgb, var(--white) 13%, transparent);   /* 소개탭 카드 가시 테두리 (about-flow-step 등) */
  --glass-blur:         22px;
  --glass-blur-strong:  28px;
  --glass-blur-soft:    10px;
  --glass-shadow:       0 10px 34px rgba(0,0,0,0.46);
  --glass-shadow-lg:    0 16px 48px rgba(0,0,0,0.42);
  --glass-shadow-sm:    0 4px 18px rgba(0,0,0,0.22);   /* 살짝 띄우는 약한 그림자 (필진 카드 본문 등) */
  /* 필진 카드 본문 = 흰색 카드 — 그 위 다크 텍스트/구분선 위계 */
  --glass-white:        color-mix(in srgb, var(--white) 90%, transparent);
  --text-on-light-1:    var(--bg-2);                                        /* 흰 카드 위 주 텍스트(거의 검정) */
  --text-on-light-2:    color-mix(in srgb, var(--bg-2) 72%, var(--white));  /* 보조 본문 */
  --text-on-light-3:    color-mix(in srgb, var(--bg-2) 50%, var(--white));  /* 메타 */
  --divider-on-light:   color-mix(in srgb, var(--bg-2) 14%, transparent);   /* 흰 카드 내 구분선 */
  --divider-on-dark:    color-mix(in srgb, var(--white) 28%, transparent);  /* 다크 배경 위 잘 보이는 구분선(필진 카드 상하 선) */
  --stats-pie-size:     120px;                                              /* 참여자 통계 도넛 차트 지름 */

  /* === AMBIENT — 엠블럼 3색(보라→바이올렛→민트) blob. 유리 뒤에 비칠 광원 === */
  --amb-purple:         color-mix(in srgb, var(--brand-purple) 24%, transparent);
  --amb-violet:         color-mix(in srgb, var(--brand-violet) 22%, transparent);
  --amb-mint:           color-mix(in srgb, var(--brand-mint) 15%, transparent);
  --amb-blur:           80px;

  /* === GRADIENT — 브랜드 CTA·글로우 === */
  --grad-brand:         linear-gradient(100deg, var(--brand-purple) 0%, var(--brand-violet) 42%, var(--brand-mint) 100%);
  --grad-brand-hover:   linear-gradient(100deg, var(--brand-purple-soft) 0%, var(--brand-violet) 42%, var(--brand-mint) 100%);
  --glow-brand:         0 6px 22px color-mix(in srgb, var(--brand-purple) 38%, transparent);

  /* === LAYOUT — 본문 폭 토큰 (인라인 px 금지 규칙 준수) === */
  --content-w-reading:  640px;
  --content-w-header:    720px;   /* 헤더 내부 콘텐츠 폭(바는 풀너비) */
  --content-w-quiz:     640px;
  --r-glass:            16px;
  --r-glass-sm:         8px;
  --r-pill:             999px;   /* 알약(둥근 끝) — 섹션 라벨 등 */

  /* === SCROLLBAR — 다크 위 가는 오버레이형 막대 === */
  --scrollbar-w:           10px;
  --scrollbar-thumb:       color-mix(in srgb, var(--white) 14%, transparent);
  --scrollbar-thumb-hover: color-mix(in srgb, var(--white) 26%, transparent);

  /* === SKYLINE — 하단 도시 지평선(부동산 분위기). 실제 사진으로 교체 시 url만 변경 === */
  --skyline-img:     url('skyline.png');   /* 실제 사진: assets/skyline.png 로 저장 */
  --skyline-opacity: 0.15;
  --skyline-w:       min(96vw, 720px);     /* 좌우 폭 — 이미지 비율 유지 */
  --skyline-ratio:   1400 / 837;           /* 원본 이미지 비율 */
  /* 둥근 사각형 페이드 마스크 — 둥근 rect + 블러(가장자리 부드럽게). rx=둥글기, stdDeviation=페이드폭, inset=솔리드영역 */
  --skyline-mask:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 837' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='44'/%3E%3C/filter%3E%3Crect x='110' y='110' width='1180' height='617' rx='120' fill='%23fff' filter='url(%23b)'/%3E%3C/svg%3E");

  /* === TEXTURE — 글로벌 배경 그런지 텍스처(배경색 위에 오버레이) === */
  --texture-img:     url('texture.png');
  --texture-opacity: 0.15;
  --arrow-img:       url('arrow-down.png');   /* 활용법 → 내집마련 다운 화살표 */
  --house-img:       url('house.png');        /* 내집마련 3D 집 (웹) */
  --arrow-long-img:  url('arrow-long.png');    /* 활용법 가운데 긴 화살표 */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  font-size: var(--fs-micro);
  /* 스크롤바 유무와 무관하게 본문 폭 고정 — 레이아웃/비율 시프트 제거 */
  scrollbar-gutter: stable;
  scrollbar-width: thin;                                  /* Firefox */
  scrollbar-color: var(--scrollbar-thumb) transparent;
  /* 배경 그라디언트를 루트(html)에 직접 지정.
     루트 배경은 캔버스로 전파되어 ① 스크롤해도 뷰포트 고정처럼 보이고
     ② 오버스크롤(고무줄 바운스)로 드러나는 영역까지 덮어 흰 화면 노출을 원천 차단.
     (background-attachment:fixed 의 모바일 버그도 피함) */
  background: linear-gradient(170deg, var(--bg-1) 0%, var(--bg-2) 100%);
  background-color: var(--bg-2);                          /* 폴백 */
}
/* 단독 페이지(어드민 iframe 임베드가 아닐 때)에서만 스크롤 잠금.
   html을 비스크롤 루트로, body를 중첩 스크롤러로 만들어 iOS 고무줄 바운스 차단.
   (iOS Safari는 루트 문서의 overscroll-behavior는 무시하지만 중첩 스크롤러는 존중한다)
   임베드 시엔 적용 안 함 → sendPreviewHeight()의 scrollHeight 측정이 정상 동작. */
html.standalone { height: 100%; overflow: hidden; }
html.standalone body {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}
/* WebKit: 트랙 투명 + 가는 막대(콘텐츠 위에 떠 보이도록) */
::-webkit-scrollbar { width: var(--scrollbar-w); height: var(--scrollbar-w); }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb); background-clip: content-box;
  border: 3px solid transparent; border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }
body {
  font-family: var(--font-body);
  /* body 에도 다크 그라디언트(비-fixed). 투명 레이어 제거로 오버스크롤 시 흰색 노출 방지.
     스크롤 컨테이너 기본(scroll attachment)이라 standalone 에선 뷰포트 고정처럼 보이고,
     fixed 가 아니므로 모바일 background-attachment 버그도 없음. */
  background: linear-gradient(170deg, var(--bg-1) 0%, var(--bg-2) 100%);
  background-color: var(--bg-2);
  color: var(--text-1);
  min-height: 100vh;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  position: relative;
  /* body 를 스태킹 컨텍스트로 — body::before(z-index:-1) 텍스처가 body 배경 위·콘텐츠 아래에 그려지게.
     (없으면 텍스처가 불투명 body 그라디언트 뒤로 가려져 질감이 사라짐) */
  isolation: isolate;
}
/* === 글로벌 배경 텍스처 — 배경색(bg-base) 위에 그런지 텍스처를 fixed 오버레이 === */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--texture-img) center center / cover no-repeat;
  opacity: var(--texture-opacity);
}

/* === 섹션 로드 리빌 (frontend-design) === */
.section.active { animation: fadeIn 0.5s ease both; }

/* === DEMO BANNER === */
.demo-banner {
  position: sticky; top: 0; z-index: 100;
  background: var(--fn-alert);
  padding: 8px 24px;
  text-align: center;
  font-size: var(--fs-body); font-weight: 700;
  color: var(--white);
  letter-spacing: 0.5px;
}
.demo-banner a { color: var(--white); text-decoration: underline; margin-left: 8px; }

/* === NAV (frosted floating bar) === */
.nav {
  position: sticky; top: 0; z-index: 90;
  background: var(--glass-2);
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(150%);
  box-shadow: 0 6px 24px var(--shadow-color);
  padding: 0 16px;
}
.nav-inner {
  width: 100%; max-width: var(--content-w-header); margin: 0 auto;
  min-height: 64px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.nav-inner::-webkit-scrollbar { display: none; }
.nav-logo { width: 24px; height: 24px; flex-shrink: 0; margin-right: 8px; border-radius: var(--r); }
.nav-item {
  flex-shrink: 0;
  min-height: 48px; padding: 8px 16px;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  font-size: var(--fs-lg); font-weight: 600;
  cursor: pointer;
  transition: color 0.2s;
  background: transparent; color: var(--text-2);
  border: none; white-space: nowrap;
}
.nav-ico { display: none; }
.nav-ico svg { width: 24px; height: 24px; display: block; }
.nav-item.active { color: var(--hl-box); font-weight: 800; }
.nav-item:hover { color: var(--text-1); }
.nav-item.active:hover { color: var(--hl-box); }
.nav-item .nav-badge {
  display: inline-block; background: var(--fn-alert); color: var(--white);
  font-size: var(--fs-micro); font-weight: 700; padding: 2px 8px;
  border-radius: 3px; margin-left: 4px; vertical-align: middle;
}

/* === SECTIONS === */
.section { display: none; padding: 0 0 64px; }
.section.active { display: block; }

/* === QUIZ === */
.quiz-wrap { width: 100%; max-width: var(--content-w-quiz); margin: 0 auto; padding: clamp(24px, 7vw, 40px) clamp(16px, 5vw, 24px); }
.quiz-label { color: var(--brand-purple); font-size: var(--fs-meta); font-weight: 700; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; }
.quiz-title { font-size: var(--fs-h1); font-weight: 800; margin-bottom: 8px; letter-spacing: -0.5px; }
.quiz-sub { color: var(--text-2); font-size: var(--fs-body); line-height: 1.5; margin-bottom: 24px; }
.divider { height: 1px; background: var(--divider-line); margin: 24px 0; }
.q-label { font-size: var(--fs-lg); font-weight: 700; margin-bottom: 16px; }
.pills { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 8px; }
.pill {
  padding: 8px 24px; border-radius: var(--r-glass-sm);
  font-size: var(--fs-body); font-weight: 600;
  cursor: pointer; transition: all 0.15s;
  background: var(--glass-1); color: var(--text-2); border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur-soft));
  -webkit-backdrop-filter: blur(var(--glass-blur-soft));
}
.pill.selected { background: var(--white); color: var(--bg-2); border-color: transparent; box-shadow: var(--glass-shadow); }
.pill:hover { border-color: var(--glass-border-hi); color: var(--text-1); }
.pill.selected:hover { background: var(--white); color: var(--bg-2); }
.q-hint { font-size: var(--fs-meta); color: var(--text-3); margin-bottom: 32px; }

/* quiz slide */
.quiz-slide-area { position: relative; overflow: hidden; min-height: 200px; }
.quiz-slide {
  display: none; opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.35s, transform 0.35s;
}
.quiz-slide.active { display: block; opacity: 1; transform: translateX(0); }
.quiz-slide.exit-left { display: block; opacity: 0; transform: translateX(-40px); }
.quiz-step-label { font-size: var(--fs-meta); color: var(--text-3); margin-bottom: 8px; }
.quiz-back-btn {
  background: none; border: none; color: var(--text-3); font-size: var(--fs-body);
  cursor: pointer; padding: 0; margin-bottom: 16px; display: none;
}
.quiz-back-btn:hover { color: var(--brand-purple); }
.quiz-participant-count {
  text-align: center; font-size: var(--fs-meta); color: var(--text-3);
  margin-bottom: 24px; padding: 8px; border-radius: var(--r-glass-sm);
  background: var(--glass-1);
  backdrop-filter: blur(var(--glass-blur-soft));
  -webkit-backdrop-filter: blur(var(--glass-blur-soft));
  border: 1px solid var(--glass-border);
}
.quiz-participant-count strong { color: var(--brand-purple); font-weight: 700; }

/* quiz progress bar */
.quiz-progress { display: flex; gap: 8px; margin-bottom: 24px; }
.quiz-progress-dot {
  flex: 1; height: 4px; border-radius: 2px;
  background: var(--surface-3); transition: background 0.3s;
}
.quiz-progress-dot.filled { background: var(--brand-purple); }
.quiz-progress-dot.current { background: var(--accent-gold); }

/* loading overlay */
.quiz-loading {
  display: none; text-align: center; padding: 64px 24px;
}
.quiz-loading.show { display: block; }
.quiz-loading-title { font-size: var(--fs-h3); font-weight: 700; margin-bottom: 16px; }
.quiz-loading-sub { font-size: var(--fs-body); color: var(--text-3); margin-bottom: 24px; }
.loading-bar-wrap { width: 200px; height: 8px; background: var(--surface-3); border-radius: 3px; margin: 0 auto; overflow: hidden; }
.loading-bar-fill { width: 0; height: 100%; background: var(--brand-purple); border-radius: 3px; transition: width 0.8s ease; }
.loading-bar-fill.go { width: 100%; transition: width 2.5s ease-out; }

.cta-btn {
  display: block; width: 100%; padding: 16px;
  border-radius: var(--r-glass-sm); border: none;
  font-size: var(--fs-lg); font-weight: 700;
  cursor: pointer; transition: all 0.15s;
  background: var(--grad-brand); color: var(--white);
  box-shadow: var(--glow-brand);
  opacity: 0.4; pointer-events: none;
}
.cta-btn.ready { opacity: 1; pointer-events: auto; }
.cta-btn.ready:hover { background: var(--grad-brand-hover); transform: translateY(-1px); }

/* === SOCIAL PROOF BAR === */
.social-proof-bar {
  background: var(--glass-1);
  backdrop-filter: blur(var(--glass-blur-soft)); -webkit-backdrop-filter: blur(var(--glass-blur-soft));
  border-radius: var(--r-glass-sm); box-shadow: var(--glass-shadow);
  padding: 8px 24px; text-align: left;
  font-size: var(--fs-meta); color: var(--text-3);
}
.social-proof-bar strong { color: var(--brand-purple); font-weight: 700; }

/* === RESULT === */
/* about 탭과 동일: wrap=flex column + 단일 gap이 섹션 간격 책임 (개별 마진 금지) */
.result-wrap { width: 100%; max-width: var(--content-w-quiz); margin: 0 auto; padding: clamp(24px, 7vw, 40px) clamp(16px, 5vw, 24px); display: flex; flex-direction: column; gap: var(--sp-9); }
.result-wrap > .divider { margin: 0; }
.result-block { display: flex; flex-direction: column; gap: var(--sp-3); }
.result-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2); }
.result-badge {
  display: inline-block; padding: var(--sp-1) var(--sp-3); border-radius: 2px;
  font-size: var(--fs-meta); font-weight: 700; color: var(--white); text-transform: uppercase; letter-spacing: 0.5px;
}
/* 결과 섹션 제목 = 소개 탭 라벨과 동일한 흰 pill (가운데 정렬) */
.result-title, .result-note-label {
  display: flex; align-items: center; width: fit-content; margin: 0 auto 16px;
  font-family: var(--font-body); font-size: var(--fs-h3); font-weight: 700;
  color: var(--brand-violet); line-height: 1.3; letter-spacing: -0.01em;
  background: var(--white); border-radius: var(--r-pill); padding: 10px 22px;
}
.result-sub { font-size: var(--fs-body); color: var(--text-2); }
/* 유형 캐릭터 이미지 — 카톡 공유 미리보기와 동일한 유형별 OG 카드 전체(assets/og/*.jpg, 1200×630).
   결과 카드 상단 가로 히어로 배너로 노출. 로드 실패 시 기존 SVG 엠블럼(type.icon)으로 폴백 → 아래 svg 규칙도 함께 적용. */
.type-figure { width: 100%; margin: 0 auto var(--sp-3); }
.type-figure img,
.type-figure svg { display: block; width: 100%; height: auto; }
.type-figure img { aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--glass-shadow-sm); }

/* 결과 카드 내부 섹션 라벨 — YOUR INVESTOR TYPE · BEST PARTNER · 참여자 통계 공통 양식(알약 아님) */
.result-card-label { font-size: var(--fs-micro); font-weight: 700; color: var(--brand-purple); letter-spacing: 0.16em; margin-bottom: var(--sp-1); }

/* 첫 칼럼 읽기 CTA — 내 레벨 카드 하단 보라 바 (흰 텍스트 + 버튼 우측) */
.result-action {
  margin-top: var(--sp-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  background: var(--brand-violet); border-radius: var(--r-glass-sm);
  padding: var(--sp-3) var(--sp-4);
}
.result-action-text { min-width: 0; flex: 1; }
.result-action-title { font-size: var(--fs-lg); font-weight: 700; color: var(--white); }
.result-action-sub { font-size: var(--fs-meta); color: color-mix(in srgb, var(--white) 80%, transparent); margin-top: var(--sp-1); }
.result-action-link {
  flex-shrink: 0; white-space: nowrap;
  display: inline-block; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-glass-sm);
  background: var(--white); color: var(--brand-violet); font-size: var(--fs-body); font-weight: 700;
  text-decoration: none; transition: all 0.2s;
}
.result-action-link:hover { background: color-mix(in srgb, var(--white) 88%, var(--brand-violet)); transform: translateY(-1px); }
/* 모바일: 텍스트(2줄) 위 + 버튼 우측 하단 */
@media (max-width: 768px) {
  .result-action { flex-direction: column; align-items: stretch; }
  .result-action-link { align-self: flex-end; }
}

/* 보조 정보 본문 (관심분야 추천 · BEST PARTNER 내용) */
.result-note-title { font-size: var(--fs-lg); font-weight: 700; color: var(--text-1); margin-bottom: var(--sp-1); }
.result-note-body { font-size: var(--fs-body); color: var(--text-2); line-height: 1.6; }
/* BEST PARTNER 설명 — 상단 유형 설명과 동일한 14px + 동일 색 */
#compatDesc { font-size: var(--fs-meta); color: var(--text-result-soft); }
/* 참여자 통계 — 투자 유형 분포 도넛 차트 + 범례 */
.stats-pie-wrap { display: flex; align-items: center; justify-content: center; gap: var(--sp-5); flex-wrap: wrap; }
.stats-pie { position: relative; width: var(--stats-pie-size); height: var(--stats-pie-size); flex-shrink: 0; }
.stats-pie svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.stats-pie-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.stats-pie-center strong { font-size: var(--fs-h2); font-weight: 800; color: var(--text-1); line-height: var(--lh-tight); }
.stats-pie-center span { font-size: var(--fs-micro); color: var(--text-3); margin-top: var(--sp-1); }
.stats-legend { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); text-align: left; }
.stats-legend li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-meta); color: var(--text-2); }
.stats-legend li.is-me { color: var(--text-1); font-weight: 700; }
.stats-legend li b { margin-left: auto; font-weight: 700; color: var(--text-1); }
.stats-legend-dot { width: var(--sp-2); height: var(--sp-2); border-radius: var(--r-pill); flex-shrink: 0; }
.stats-total { font-size: var(--fs-meta); color: var(--text-muted); margin-top: var(--sp-4); }

#resultCards { display: flex; flex-direction: column; gap: var(--sp-3); }
.level-card {
  background: var(--glass-1); border-radius: var(--r-glass); padding: var(--sp-4);
  transition: all 0.2s;
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
}
/* 내 레벨 카드 — 소개탭 카드와 동일한 배경(glass-1) + 가시 테두리 + 흰 텍스트 */
.level-card.highlighted { background: var(--glass-1); border: 2px solid var(--border-card); }
.level-card.highlighted .level-meta { color: var(--text-1); }
.level-card.highlighted .level-steps,
.level-card.highlighted .level-steps a { color: var(--text-1); }
.level-card.highlighted .level-steps a:hover { color: var(--brand-purple-soft); }
.level-badge {
  display: inline-block; padding: var(--sp-1) var(--sp-2); border-radius: 2px;
  font-size: var(--fs-meta); font-weight: 700; color: var(--white); margin-bottom: var(--sp-2);
}
.level-name { font-size: var(--fs-lg); font-weight: 700; margin-bottom: var(--sp-1); }
.level-meta { font-size: var(--fs-meta); color: var(--text-3); margin-bottom: var(--sp-5); }
.level-steps { font-size: var(--fs-meta); color: var(--text-2); line-height: 1.5; margin-bottom: var(--sp-3); }
.level-steps a { display: block; color: var(--text-2); text-decoration: none; transition: color 0.2s; }
.level-steps a + a { margin-top: var(--sp-3); }
.level-steps .step-num { font-weight: 800; color: var(--brand-purple-soft); margin-right: var(--sp-1); }
.level-steps a:hover { color: var(--brand-purple); text-decoration: underline; }
/* 칼럼 링크 클릭 어포던스 — 끝단 꺾쇠(외부 칼럼으로 이동) */
.level-steps a .step-chevron { float: right; margin-left: var(--sp-2); color: var(--brand-purple-soft); font-weight: 700; }
.level-steps a:hover .step-chevron { color: var(--brand-purple); }
/* 레벨 카드 헤더 — 뱃지 + 레벨문장 (카드 안 상단, 본문과 동일 좌측 정렬) */
.level-card-head { margin-bottom: var(--sp-3); }
.level-card-head .result-badge { margin-bottom: var(--sp-2); }
.level-card-head .result-sub { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--text-1); }
/* 인용구 — 카드 헤더 아래 헤드라인 (흰색) */
.level-quote { font-size: var(--fs-h3); font-weight: 700; color: var(--white); line-height: 1.4; margin-bottom: var(--sp-3); }

/* === VIDEO CTA === */
/* 카드 없이 — 내용물(영상 링크)만 노출 */
.video-cta-section {
  background: none; border: none; box-shadow: none; padding: 0;
  margin-top: var(--sp-5);
}
.video-cta-title { font-size: var(--fs-lg); font-weight: 700; margin-bottom: var(--sp-2); }
.video-cta-sub { font-size: var(--fs-meta); color: var(--text-3); margin-bottom: var(--sp-3); }
.video-cta-row {
  display: flex; gap: var(--sp-2); margin-bottom: var(--sp-2); align-items: center;
  background: var(--glass-deep); border-radius: var(--r-glass-sm); padding: var(--sp-3);
  cursor: pointer; transition: all 0.15s;
  text-decoration: none; color: inherit; border: 1px solid var(--glass-border);
}
.video-cta-row:hover { background: var(--glass-1-hover); border-color: var(--glass-border-hi); }
.video-icon {
  width: 40px; height: 40px; border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-body); flex-shrink: 0; color: var(--white); font-weight: 700;
}
.video-info { flex: 1; }
.video-info-title { font-size: var(--fs-body); font-weight: 700; }
.video-info-desc { font-size: var(--fs-meta); color: var(--text-3); margin-top: 2px; }
.video-arrow { color: var(--text-3); font-size: var(--fs-body); }

/* === SHARE BUTTON === */
.share-section { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-2); }
/* 결과 카드 + 카드 외부 우상단 액션 묶음. 그룹 내부 gap(sp-2)으로 버튼이 카드 바로 위에 붙게 */
.result-card-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.result-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--sp-2); }
/* 결과 카드 상단 액션 — 카드와 같은 글래스 톤이라 묻히므로 브랜드 컬러로 시인성 강화 */
.result-actions .share-btn { background: var(--glass-brand); border: 1px solid var(--brand-purple); color: var(--text-1); box-shadow: var(--glass-shadow-sm); }
.result-actions .share-btn:hover { background: var(--brand-purple); border-color: var(--brand-purple); color: var(--white); }

/* === 공유 결과 전용 뷰 (받는 사람이 #r= 링크로 진입) — 랜딩 크롬을 숨기고 결과+초대 CTA만 === */
.shared-banner, .shared-cta { display: none; }
.shared-banner { text-align: center; }
.shared-banner-label { display: inline-block; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.16em; color: var(--brand-purple); border: 1px solid var(--brand-purple); border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-3); margin-bottom: var(--sp-2); }
.shared-banner-sub { font-size: var(--fs-meta); color: var(--text-2); }
body.shared-result-mode .nav { display: none; }
body.shared-result-mode .result-wrap > .divider,
body.shared-result-mode .result-actions,
body.shared-result-mode .result-block,
body.shared-result-mode #videoCta,
body.shared-result-mode #interestRec,
body.shared-result-mode .share-section { display: none; }
body.shared-result-mode .shared-banner,
body.shared-result-mode .shared-cta { display: block; }
.share-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-glass-sm);
  background: var(--glass-1); border: 1px solid var(--glass-border);
  color: var(--text-2); font-size: var(--fs-meta); font-weight: 600;
  cursor: pointer; transition: all 0.15s;
  backdrop-filter: blur(var(--glass-blur-soft));
  -webkit-backdrop-filter: blur(var(--glass-blur-soft));
}
.share-btn:hover { border-color: var(--glass-border-hi); color: var(--text-1); }

/* === CTA GOLD === */
.cta-gold {
  display: block; width: 100%; padding: var(--sp-3);
  border-radius: var(--r-sm); border: none;
  font-size: var(--fs-lg); font-weight: 700;
  cursor: pointer; transition: all 0.15s;
  background: var(--text-1); color: var(--bg-base);
}
.cta-gold:hover { background: var(--text-1-dim); }
.cta-gold-sub { text-align: center; font-size: var(--fs-meta); color: var(--text-2); margin-top: var(--sp-2); }

/* === TESTIMONIALS === */
.testimonial-card {
  background: var(--glass-1); border-radius: var(--r-glass); padding: 16px 16px;
  margin-bottom: 8px; border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  box-shadow: var(--glass-shadow);
}
.testimonial-text { font-size: var(--fs-body); color: var(--text-2); line-height: 1.6; margin-bottom: 8px; font-style: italic; }
.testimonial-author { font-size: var(--fs-meta); color: var(--text-3); }
.testimonial-author strong { color: var(--white); font-weight: 600; }

/* === WEEKLY SCHEDULE === */
.schedule-wrap { width: 100%; max-width: var(--content-w-reading); margin: 0 auto; padding: clamp(24px, 7vw, 40px) clamp(16px, 5vw, 24px); }
.schedule-title { font-size: var(--fs-h2); font-weight: 800; margin-bottom: 8px; }
.schedule-sub { font-size: var(--fs-body); color: var(--text-2); line-height: 1.6; margin-bottom: 24px; }
/* 요일/필진 필터 — 세그먼트 컨트롤 (다크 글래스 아일랜드 + 슬라이딩 인디케이터) */
.day-tabs {
  position: relative;
  display: flex; gap: var(--sp-1);
  width: fit-content; max-width: 100%; margin: 0 auto var(--sp-4);
  padding: var(--sp-1);
  background: var(--glass-deep); border-radius: var(--r-pill);
  box-shadow: var(--glass-shadow);
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.day-tabs::-webkit-scrollbar { display: none; }
.day-seg-indicator {
  position: absolute; top: var(--sp-1); bottom: var(--sp-1); left: 0; width: 0;
  background: var(--brand-violet); border-radius: var(--r-pill); z-index: 0;
  transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1), width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.day-tab, .expert-filter {
  position: relative; z-index: 1; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-pill);
  font-size: var(--fs-body); font-weight: 600; white-space: nowrap; line-height: 1.2;
  cursor: pointer; transition: color 0.3s ease, transform 0.1s ease;
  background: none; border: none; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  color: var(--text-3);
}
.day-tab { flex-direction: column; gap: 0; }
.day-tab.active, .expert-filter.active { color: var(--white); font-weight: 700; }
.day-tab.today:not(.active) { color: var(--brand-mint); }
.day-tab:hover, .expert-filter:hover { color: var(--text-1); }
.day-tab.active:hover, .expert-filter.active:hover { color: var(--white); }
.day-tab:active, .expert-filter:active { transform: scale(0.94); }
.day-label { font-size: var(--fs-micro); display: block; color: var(--brand-mint); font-weight: 700; }
.day-content { animation: fadeIn 0.3s ease; }
.day-expert-card {
  background: var(--glass-1); border-radius: var(--r-glass); padding: 24px;
  margin-bottom: 16px; position: relative; overflow: hidden; transition: all 0.15s;
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
}
.day-expert-card:hover { background: var(--glass-1-hover); border-color: var(--glass-border-hi); }
.day-expert-bar { display: none; }
.day-expert-header { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.day-expert-name { font-size: var(--fs-h3); font-weight: 700; }
.day-expert-role {
  display: inline-block; padding: 4px 8px; border-radius: 10px;
  font-size: var(--fs-meta); font-weight: 600;
}
.day-expert-quote {
  font-size: var(--fs-meta); color: var(--text-2); font-style: italic;
  padding: 8px 16px; margin-bottom: 16px; line-height: 1.5;
}
.day-expert-desc { font-size: var(--fs-body); color: var(--text-2); margin-bottom: 16px; }
.day-column-item {
  display: flex; align-items: center; gap: 8px;
  background: var(--glass-deep); border-radius: var(--r-glass-sm); padding: 16px 16px;
  margin-bottom: 8px; text-decoration: none; color: inherit; transition: all 0.15s;
  border: 1px solid var(--glass-border);
}
.day-column-item:hover { background: var(--glass-1-hover); border-color: var(--glass-border-hi); }
.expert-column-link {
  display: block; margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  background: color-mix(in srgb, var(--bg-2) 5%, transparent); border-radius: var(--r-lg);
  color: var(--text-on-light-2); font-size: var(--fs-meta); text-decoration: none;
  transition: all 0.2s;
}
.expert-column-link:hover { background: color-mix(in srgb, var(--brand-purple) 10%, transparent); color: var(--text-on-light-1); transform: translateX(4px); }
.day-column-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.day-column-title { font-size: var(--fs-body); font-weight: 500; flex: 1; line-height: 1.5; }
.day-column-arrow { color: var(--text-3); font-size: var(--fs-meta); }

/* === TRIAL === */
.trial-wrap { width: 100%; max-width: var(--content-w-reading); margin: 0 auto; padding: clamp(24px, 7vw, 40px) clamp(16px, 5vw, 24px); }
.trial-hero {
  text-align: left; padding: 32px 24px; margin-bottom: 32px;
  background: var(--glass-1); border-radius: var(--r-glass);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}
.trial-badge {
  display: inline-block; padding: 8px 16px; border-radius: 12px;
  font-size: var(--fs-meta); font-weight: 700;
  background: var(--fn-alert); color: var(--white);
  margin-bottom: 16px;
}
.trial-title { font-size: var(--fs-h1); font-weight: 800; margin-bottom: 8px; }
.trial-sub { font-size: var(--fs-body); color: var(--text-2); line-height: 1.6; }
.trial-counter {
  display: inline-block; margin-top: 16px;
  font-size: var(--fs-body); font-weight: 700; color: var(--accent-gold);
}
.trial-timer { font-size: var(--fs-meta); color: var(--level-3); margin-top: 8px; }
.trial-section-label { font-size: var(--fs-body); font-weight: 700; color: var(--brand-purple); margin-bottom: 16px; }
.trial-card {
  background: var(--glass-1); border-radius: var(--r-glass); overflow: hidden;
  margin-bottom: 8px; transition: all 0.15s;
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}
.trial-card:hover { background: var(--glass-1-hover); border-color: var(--glass-border-hi); }
.trial-card-header {
  padding: 16px 16px;
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer;
}
.trial-card-left { display: flex; align-items: center; gap: 8px; flex: 1; }
.trial-card-writer {
  padding: 4px 8px; border-radius: 8px; font-size: var(--fs-meta); font-weight: 700;
  color: var(--white); flex-shrink: 0;
}
.trial-card-title { font-size: var(--fs-body); font-weight: 600; line-height: 1.4; }
.trial-card-arrow { color: var(--text-3); font-size: var(--fs-body); transition: transform 0.2s; }
.trial-card.open .trial-card-arrow { transform: rotate(180deg); }
.trial-card-body {
  display: none; padding: 0 16px 16px;
  font-size: var(--fs-body); color: var(--text-2); line-height: 1.8;
}
.trial-card.open .trial-card-body { display: block; }
.trial-card-blur { position: relative; overflow: hidden; }
.trial-card-blur::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 64px;
  background: linear-gradient(transparent, var(--surface-2));
}
.trial-card.open:hover .trial-card-blur::after { background: linear-gradient(transparent, var(--surface-3)); }
.trial-read-more {
  display: inline-block; margin-top: 8px;
  padding: 8px 16px; border-radius: 20px;
  font-size: var(--fs-meta); font-weight: 600;
  background: var(--brand-purple); color: var(--white);
  text-decoration: none; transition: all 0.2s;
}
.trial-read-more:hover { background: var(--brand-purple-hover); }

/* email capture */
.email-capture {
  background: var(--glass-1);
  border: 1px solid var(--glass-border); border-radius: var(--r-glass);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  padding: 24px; margin: 24px 0;
}
.email-capture-title { font-size: var(--fs-lg); font-weight: 700; margin-bottom: 8px; }
.email-capture-sub { font-size: var(--fs-meta); color: var(--text-2); margin-bottom: 16px; }
.email-form { display: flex; gap: 8px; max-width: 360px; margin: 0 auto; }
.email-input {
  flex: 1; padding: 16px 16px; border-radius: var(--r-glass-sm);
  background: var(--glass-deep); border: 1px solid var(--glass-border);
  color: var(--white); font-size: var(--fs-body); font-family: inherit;
  outline: none; transition: border-color 0.2s;
}
.email-input:focus { border-color: var(--brand-purple); }
.email-input::placeholder { color: var(--text-3); }
.email-submit {
  padding: 16px 24px; border-radius: var(--r-glass-sm); border: none;
  background: var(--grad-brand); color: var(--white); font-size: var(--fs-body); font-weight: 600;
  cursor: pointer; transition: all 0.2s; white-space: nowrap; box-shadow: var(--glow-brand);
}
.email-submit:hover { background: var(--grad-brand-hover); }
.email-success {
  display: none; font-size: var(--fs-body); color: var(--fn-done); font-weight: 600; margin-top: 8px;
}

/* === ABOUT === */
.about-wrap { width: 100%; max-width: var(--content-w-reading); margin: 0 auto; padding: clamp(24px, 7vw, 40px) clamp(16px, 5vw, 24px); display: flex; flex-direction: column; gap: var(--sp-9); }
/* 섹션 그룹 — 블록 사이 64, 블록 내부(라벨↔콘텐츠) 16 */
.about-block { margin: 0; display: flex; flex-direction: column; gap: 24px; }
.about-block .about-section-label { margin: 0; }
.about-block > *:last-child { margin-bottom: 0; }
.about-hero {
  position: relative; overflow: hidden; text-align: left;
  padding: clamp(72px, 12vw, 112px) 0 clamp(16px, 4vw, 32px);
  margin-bottom: clamp(16px, 4vw, 24px);
  background: transparent;   /* 보라 블록 제거 — 다크 배경에 녹아듦 */
}
/* 히어로 노이즈 오버레이 제거 — 히어로/wrap 모두 글로벌 배경만 사용 */
.about-hero-inner { position: relative; z-index: 1; width: 100%; max-width: var(--content-w-reading); margin: 0 auto; padding: 0 clamp(16px, 5vw, 24px); }
/* 아파트 스카이라인 — 히어로 이너 배경(헤드라인·통계 뒤). 가장자리 부드럽게 페이드 */
.about-hero-inner::before {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: var(--skyline-w); aspect-ratio: var(--skyline-ratio); z-index: -1; pointer-events: none;
  background: var(--skyline-img) center / contain no-repeat;
  filter: grayscale(1) contrast(1.02);
  opacity: var(--skyline-opacity);
  /* 둥근 사각형 페이드 (SVG 마스크) — 솔리드·페이드 영역 모두 크게, 가장자리 부드럽게 */
  -webkit-mask: var(--skyline-mask) center / 100% 100% no-repeat;
  mask: var(--skyline-mask) center / 100% 100% no-repeat;
}
.about-logo-chip {
  display: none; align-items: center; justify-content: center;
  width: 64px; height: 64px; margin-bottom: 16px;
  background: var(--bg-base); border-radius: 14px;
  box-shadow: 0 8px 24px var(--shadow-color);
}
.about-logo-mark { display: block; width: 48px; height: 48px; }
.about-logo {
  display: block; width: fit-content;
  background: var(--hl-box); color: var(--white);
  padding: 4px 16px; border-radius: 0;
  font-size: clamp(26px, 7vw, 34px); font-weight: 900; margin-bottom: 16px;
  box-shadow: 0 8px 24px var(--shadow-color);
}
.about-logo span { color: var(--white); }
.about-tagline { font-family: var(--font-body); font-size: clamp(23px, 7vw, 32px); color: var(--white); font-weight: var(--fw-bold); line-height: 1.35; letter-spacing: -0.02em; margin-bottom: 16px; text-shadow: var(--shadow-text); }
.about-desc { font-size: var(--fs-body); color: color-mix(in srgb, var(--white) 82%, transparent); line-height: 1.7; }
.about-stats {
  display: flex; gap: 32px; margin-top: 24px;
  padding-top: 24px; border-top: 1px solid color-mix(in srgb, var(--white) 22%, transparent);
}
.about-stat { text-align: left; }
.about-stat-num { font-size: var(--fs-h2); font-weight: 800; color: var(--white); }
.about-stat-label { font-size: var(--fs-meta); color: color-mix(in srgb, var(--white) 72%, transparent); margin-top: 2px; }
.about-section-label {
  align-self: center;
  display: inline-flex; align-items: center;
  font-family: var(--font-body); font-size: var(--fs-h3); font-weight: 700;
  color: var(--brand-violet); line-height: 1.3; letter-spacing: -0.01em;
  margin: 48px 0 16px; padding: 10px 22px;
  background: var(--white); border-radius: var(--r-pill);
}
.about-card {
  background: var(--glass-1);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border); border-radius: var(--r-glass);
  box-shadow: var(--glass-shadow);
  padding: 24px; margin-bottom: 16px;
}
.about-card-title { font-size: var(--fs-lg); font-weight: 700; margin-bottom: 8px; }
.about-card-desc { font-size: var(--fs-body); color: var(--text-2); line-height: 1.6; }
/* 카드 X — 아이콘 노드 + 간격 연결선(아이콘 뒤로 안 지나감) = 흐름 */
.about-flow { display: flex; flex-direction: column; gap: 24px; margin-bottom: 32px; padding: 4px 0; }
.about-flow-step { position: relative; display: flex; align-items: center; gap: 16px; }
.about-flow-step:not(:last-child)::after {
  content: ''; position: absolute; left: 24px; top: calc(100% + 2px);
  width: 2px; height: 24px; background: var(--border-strong);
}
.about-flow-icon {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--flow-icon-a) 15%, transparent); color: var(--flow-icon-a);
}
.about-flow-icon svg { width: 24px; height: 24px; }
.about-flow-step:nth-child(even) .about-flow-icon { background: color-mix(in srgb, var(--flow-icon-b) 15%, transparent); color: var(--flow-icon-b); }
.about-flow-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.about-flow-step strong { font-size: var(--fs-lg); font-weight: 700; color: var(--text-1); }
.about-flow-body span { font-size: var(--fs-body); color: var(--text-2); }
.about-diff-grid { display: flex; flex-direction: column; gap: 8px; margin-bottom: 32px; }
.about-diff-item {
  background: var(--glass-1); border-radius: var(--r-glass); padding: 16px 16px;
  display: flex; align-items: flex-start; gap: 16px;
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur-soft)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur-soft)) saturate(140%);
}
.about-diff-icon { font-size: var(--fs-h3); flex-shrink: 0; margin-top: 1px; }
.about-diff-text { flex: 1; }
.about-diff-title { font-size: var(--fs-body); font-weight: 700; margin-bottom: 4px; }
.about-diff-desc { font-size: var(--fs-meta); color: var(--text-2); line-height: 1.55; }

/* === ABOUT v6.1: trust-bar / benefits / experts grid / pricing === */
.about-trust-bar {
  display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;
  background: var(--glass-1);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border); border-radius: var(--r-glass);
  box-shadow: var(--glass-shadow);
  padding: 16px 16px; margin-bottom: 8px;
}
.about-trust-item { display: flex; align-items: center; gap: 8px; font-size: var(--fs-meta); font-weight: 600; color: var(--text-cool); }
.about-trust-icon { color: var(--brand-purple); font-size: var(--fs-body); font-weight: 800; }
.about-trust-caption { font-size: var(--fs-meta); color: var(--text-2); text-align: center; margin-bottom: 32px; font-style: italic; }

.about-benefits-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 32px;
}
.about-benefit-item {
  background: var(--glass-1);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border); border-radius: var(--r-glass);
  box-shadow: var(--glass-shadow);
  padding: 16px 16px; transition: border-color 0.18s, transform 0.18s, background 0.18s;
}
.about-benefit-item:hover {
  background: var(--glass-1-hover); border-color: var(--glass-border-hi); transform: translateY(-2px);
}
.about-benefit-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--brand-purple) 13%, transparent); color: var(--brand-purple);
  margin-bottom: 16px;
}
.about-benefit-icon svg { width: 24px; height: 24px; }
.about-benefit-item:nth-child(even) .about-benefit-icon {
  background: color-mix(in srgb, var(--brand-mint) 13%, transparent); color: var(--brand-mint);
}
.about-benefit-title { font-size: var(--fs-lg); font-weight: 700; margin-bottom: 4px; color: var(--white); }
.about-benefit-desc { font-size: var(--fs-meta); color: var(--text-2); line-height: 1.55; }

.about-mid-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; background: var(--glass-brand);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  border: 1px solid var(--glass-border-brand); border-radius: var(--r-glass);
  box-shadow: var(--glass-shadow);
  padding: 16px 16px; margin: 0 0 32px 0;
}
.about-mid-cta-text { display: flex; flex-direction: column; gap: 2px; }
.about-mid-cta-text strong { font-size: var(--fs-lg); color: var(--white); font-weight: 700; }
.about-mid-cta-text span { font-size: var(--fs-meta); color: var(--text-2); }
.about-mid-cta-btn {
  flex-shrink: 0; background: var(--grad-brand); color: var(--white);
  border: none; border-radius: var(--r-glass-sm);
  min-height: 40px; padding: 8px 16px; font-size: var(--fs-meta); font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; white-space: nowrap; transition: all 0.15s;
  box-shadow: var(--glow-brand);
}
.about-mid-cta-btn:hover { background: var(--grad-brand-hover); transform: translateY(-1px); }
/* 카피 강조 포인트 */
.hl-point { color: var(--point-gold); }
/* 상단 CTA — 흰색 카드 + 어두운 텍스트 (버튼은 그라디언트 유지) */
.about-top-cta {
  background: var(--white); border-color: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* 상단 CTA 블록 막내라 last-child가 마진을 0으로 만들어 — 전용 하단 마진으로 이김 */
.about-block > .about-top-cta { margin-bottom: var(--sp-6); }
.about-top-cta .about-mid-cta-text strong { color: var(--bg-2); }
.about-top-cta .about-mid-cta-text span { color: var(--ink-muted); }

/* About 후기 섹션 */
.about-review-event {
  background: var(--glass-brand);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  border: 1px solid var(--glass-border-brand); border-radius: var(--r-glass);
  box-shadow: var(--glass-shadow);
  padding: 16px 16px 24px; margin-bottom: 32px; text-align: center;
}
.about-review-event-badge {
  display: inline-block; background: var(--brand-purple); color: var(--bg-base);
  font-size: var(--fs-micro); font-weight: 800; letter-spacing: 1px;
  padding: 4px 8px; border-radius: 3px; margin-bottom: 8px;
}
.about-review-event-title { font-size: var(--fs-body); font-weight: 700; color: var(--white); margin-bottom: 8px; }
.about-review-event-desc { font-size: var(--fs-meta); color: var(--text-2); line-height: 1.55; margin-bottom: 16px; }
.about-review-event-link {
  display: inline-block; font-size: var(--fs-meta); font-weight: 700; color: var(--brand-purple);
  text-decoration: none; padding: 8px 16px; border: 1px solid color-mix(in srgb, var(--brand-purple) 40%, transparent); border-radius: 4px;
  transition: all 0.15s;
}
.about-review-event-link:hover { background: var(--brand-purple); color: var(--bg-base); }
.about-review-card {
  background: color-mix(in srgb, var(--white) 95%, transparent);
  backdrop-filter: blur(var(--glass-blur-soft)); -webkit-backdrop-filter: blur(var(--glass-blur-soft));
  border-radius: var(--r-glass); box-shadow: var(--glass-shadow);
  padding: 16px 18px; margin-bottom: 8px;
}
.about-review-link-card {
  display: block; text-decoration: none; color: inherit;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.about-review-link-card:hover { background: var(--white); transform: translateY(-2px); box-shadow: var(--glass-shadow-lg); }
.about-review-link-title { font-size: var(--fs-lg); font-weight: 600; color: var(--bg-2); line-height: 1.5; }
.about-review-link-title .arrow { display: none; }
.about-review-highlight { font-size: var(--fs-body); color: var(--brand-purple); font-weight: 700; margin-bottom: 8px; }
.about-review-body { font-size: var(--fs-meta); color: var(--ink-muted); line-height: 1.6; margin-bottom: 8px; }
.about-review-meta { font-size: var(--fs-micro); color: var(--ink-muted); }
.about-reviews-list { margin-bottom: 32px; }
/* 후기 = 흰색 말풍선 카드 (꼬리 좌·우·좌) + 상단 별 5개 + 문장 색 강조 */
.about-reviews-list .about-review-link-card { position: relative; margin-bottom: var(--sp-4); }
.about-reviews-list .about-review-link-card::before {
  content: '★★★★★'; display: block; color: var(--brand-purple);
  font-size: var(--fs-review); letter-spacing: 3px; margin-bottom: 8px;
}
.about-reviews-list .about-review-link-card::after {
  content: ''; position: absolute; bottom: -10px; width: 0; height: 0;
  border-left: 10px solid transparent; border-right: 10px solid transparent;
  border-top: 10px solid color-mix(in srgb, var(--white) 95%, transparent);
}
.about-reviews-list .about-review-link-card:nth-child(odd)::after { left: 28px; }
.about-reviews-list .about-review-link-card:nth-child(even)::after { right: 28px; }
.rev-em { color: var(--brand-purple); font-weight: 800; }

.about-experts-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  width: 100%; margin: 0 0 8px;
}
.about-expert-card {
  position: relative; overflow: hidden;
  background: var(--glass-1);
  backdrop-filter: blur(var(--glass-blur-soft)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur-soft)) saturate(140%);
  border: 1px solid var(--glass-border); border-radius: var(--r-glass);
  box-shadow: var(--glass-shadow);
  padding: 0 0 8px; text-align: center;
  transition: border-color 0.18s, transform 0.18s;
}
.about-expert-card:hover { border-color: var(--glass-border-hi); transform: translateY(-2px); }
.about-expert-count {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  font-size: var(--fs-meta); font-weight: 800; color: var(--white); letter-spacing: -0.2px;
  background: color-mix(in srgb, var(--bg-base) 88%, transparent); border-radius: 6px; padding: 4px 8px; line-height: 1.35;
}
.about-expert-count:empty { display: none; }
.about-expert-avatar {
  display: block; width: 100%; aspect-ratio: 1 / 1;
  object-fit: contain; object-position: center bottom;
  background-color: var(--avatar-bg);
  /* SVG fill='%23c2b2ee' == var(--avatar-placeholder). data URI 안 hex는 var() 불가 → :root 토큰과 값 동기화 */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'%3E%3Cpath%20d='M10%20100%20V42%20a40%2040%200%200%201%2080%200%20V100%20Z'%20fill='%23c2b2ee'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center bottom; background-size: 100% 100%;
  -webkit-mask-image: linear-gradient(to bottom, var(--mask-opaque) 42%, transparent 98%);
  mask-image: linear-gradient(to bottom, var(--mask-opaque) 42%, transparent 98%);
  margin: 0 0 8px;
}
/* 박정호 BI는 인물이 우측으로 치우쳐 편수 뱃지와 겹침 → 좌우반전으로 균형 (아치는 좌우대칭이라 영향 없음) */
.about-expert-avatar[src*="parkjeongho"] { transform: scaleX(-1); }
.about-expert-name { font-size: var(--fs-lg); font-weight: 700; margin: 0 8px 4px; color: var(--text-1); }
.about-expert-field { font-size: var(--fs-meta); color: var(--text-2); line-height: 1.35; padding: 0 8px; }
.about-expert-caption { font-size: var(--fs-micro); color: var(--text-3); text-align: center; margin: 8px 0 32px; }

/* mobile responsive for new About blocks */
@media (max-width: 480px) {
  .about-experts-grid { grid-template-columns: repeat(2, 1fr); }
  .about-mid-cta { flex-direction: column; align-items: stretch; gap: 8px; padding: 16px; text-align: center; }
  .about-mid-cta-btn { width: 100%; padding: 16px; }
  .about-trust-bar { gap: 8px; padding: 8px 16px; }
  .about-trust-item { font-size: var(--fs-meta); }
}

/* === EXPERTS === */
.experts-wrap { width: 100%; max-width: var(--content-w-reading); margin: 0 auto; padding: clamp(24px, 7vw, 40px) clamp(16px, 5vw, 24px); }
.experts-title { font-size: var(--fs-h2); font-weight: 800; margin-bottom: 8px; }
.experts-sub { font-size: var(--fs-body); color: var(--text-2); line-height: 1.6; margin-bottom: 24px; }
.experts-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); }
/* 카드 = 배경·테두리 없이 상·하 선만(각 카드가 위·아래 선을 가짐) + 카드 간 간격 */
.expert-card {
  background: none; border: none; border-radius: 0;
  padding: var(--sp-5) 0; position: relative; cursor: pointer; box-shadow: none;
}
/* 필진 소개 탭에서만 카드 사이 섹션 구분 선 (관심분야 추천 등 다른 곳엔 선 없음) */
.experts-grid .expert-card + .expert-card { border-top: 1px solid var(--divider-on-dark); }
.expert-bar { display: none; }
.expert-header { display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.expert-avatar {
  width: var(--sp-9); height: var(--sp-9); border-radius: var(--r-pill); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-h2); font-weight: 800; color: var(--ink-faint); flex-shrink: 0;
  background-color: var(--avatar-bg);
  /* SVG fill='%23c2b2ee' == var(--avatar-placeholder). data URI 안 hex는 var() 불가 → :root 토큰과 값 동기화 */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'%3E%3Cpath%20d='M10%20100%20V42%20a40%2040%200%200%201%2080%200%20V100%20Z'%20fill='%23c2b2ee'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center bottom; background-size: 100% 100%;
}
.expert-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.expert-header-info { flex: 1; min-width: 0; }
.expert-name { font-size: var(--fs-h2); font-weight: 800; color: var(--text-1); line-height: var(--lh-tight); margin-bottom: var(--sp-1); }
.expert-role { font-size: var(--fs-lg); font-weight: 600; margin-bottom: 0; color: var(--brand-red); }
.expert-career { font-size: var(--fs-meta); color: var(--text-muted); line-height: 1.4; margin-top: var(--sp-1); }
.expert-day-badge {
  display: inline-block; align-self: flex-start; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-lg);
  font-size: var(--fs-micro); font-weight: 700; background: var(--surface-3); color: var(--text-2);
  flex-shrink: 0; white-space: nowrap;
}
/* 메타·소개·풀쿼트·스탯·토글을 하나의 흰색 카드로 묶음 (그 위 텍스트는 다크 톤) */
.expert-body {
  background: var(--glass-white); border-radius: var(--r-glass); padding: var(--sp-4);
  color: var(--text-on-light-1); box-shadow: var(--glass-shadow-sm);
}
.expert-meta-row { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-3); }
.expert-tag {
  display: inline-block; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-lg);
  font-size: var(--fs-micro); font-weight: 600; background: var(--brand-purple); color: var(--white);
}
.expert-desc { font-size: var(--fs-body); color: var(--text-on-light-1); line-height: var(--lh-body); margin-bottom: var(--sp-3); }
.expert-pullquote {
  font-size: var(--fs-h3); color: var(--text-on-light-1); font-weight: 700; font-style: italic;
  margin: var(--sp-3) 0; line-height: 1.4;
}
.expert-stats {
  display: flex; gap: var(--sp-4); flex-wrap: wrap;
  margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--divider-on-light);
}
.expert-stat { font-size: var(--fs-meta); color: var(--text-on-light-3); }
.expert-stat strong { color: var(--brand-violet); font-weight: 800; }
.expert-levels { font-size: var(--fs-micro); color: var(--text-on-light-3); margin-top: var(--sp-1); }
.expert-columns { display: none; margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--divider-on-light); }
.expert-columns-label { font-size: var(--fs-micro); font-weight: 700; color: var(--text-on-light-2); margin-bottom: var(--sp-2); }
/* 카드 펼침 어포던스 — 끝단 꺾쇠, 펼치면 180° 회전 + 대표 칼럼 노출 */
.expert-toggle { margin-left: auto; align-self: center; display: inline-flex; color: var(--text-on-light-3); transition: transform 0.2s ease; }
.expert-toggle svg { width: var(--sp-3); height: var(--sp-3); display: block; }
.expert-card.expanded .expert-toggle { transform: rotate(180deg); }
.expert-card.expanded .expert-columns { display: block; }
/* 관심 분야 추천 — 필진 카드 재사용(세로 스택) */
.interest-rec-cards { display: flex; flex-direction: column; gap: var(--sp-6); }

/* === CURRICULUM === */
.curriculum-wrap { width: 100%; max-width: var(--content-w-reading); margin: 0 auto; padding: clamp(24px, 7vw, 40px) clamp(16px, 5vw, 24px); }
.cur-label { color: var(--brand-purple); font-size: var(--fs-body); font-weight: 600; margin-bottom: 8px; }
.cur-title { font-size: var(--fs-h1); font-weight: 800; margin-bottom: 8px; }
.cur-sub { font-size: var(--fs-body); color: var(--text-2); margin-bottom: 24px; }
.progress-header { display: flex; justify-content: space-between; margin-bottom: 8px; }
.progress-label { font-size: var(--fs-meta); font-weight: 600; color: var(--text-2); }
.progress-count { font-size: var(--fs-meta); font-weight: 700; color: var(--accent-gold); }
.progress-bar { background: var(--surface-3); border-radius: 4px; height: 8px; margin-bottom: 24px; overflow: hidden; }
.progress-fill { background: var(--brand-purple); height: 100%; border-radius: 4px; transition: width 0.5s ease; }
.step-card {
  border-radius: var(--r-glass); padding: var(--sp-4); margin-bottom: var(--sp-3); transition: all 0.15s;
  border: 1px solid var(--glass-border); box-shadow: none;
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}
.step-card.done { background: var(--glass-1); }
/* 진행중(current) 카드만 그림자로 강조 — 나머지(done·locked)는 그림자 없음 */
.step-card.current { background: var(--glass-brand); border-color: var(--glass-border-brand); box-shadow: var(--glass-shadow); }
.step-card.locked { background: var(--glass-deep); box-shadow: none; }
.step-badge {
  display: inline-block; padding: 4px 8px; border-radius: 2px;
  font-size: var(--fs-micro); font-weight: 700; color: var(--white); margin-right: 8px; text-transform: uppercase;
}
.step-badge.done-badge { background: var(--fn-done); }
.step-badge.current-badge { background: var(--brand-purple); }
.step-badge.locked-badge { background: var(--ink-locked); color: var(--ink-muted); }
.step-label { display: inline; font-size: var(--fs-body); font-weight: 600; color: var(--text-3); }
.step-card.locked .step-label { color: var(--ink-locked-2); }
.step-title { font-size: var(--fs-h3); font-weight: 700; margin: 8px 0 8px; }
.step-card.locked .step-title { color: var(--text-3); }
.step-desc { font-size: var(--fs-body); color: var(--text-2); margin-bottom: 8px; }
.step-card.locked .step-desc { color: var(--ink-locked-2); }
.step-avg { font-size: var(--fs-meta); color: var(--brand-purple); margin-bottom: 16px; }
.step-row {
  background: var(--glass-deep); border-radius: var(--r-glass-sm); padding: 16px 16px;
  margin-bottom: 8px; display: flex; align-items: center; gap: 16px;
  transition: all 0.2s; border: 1px solid var(--glass-border);
}
.step-row-link {
  flex: 1; min-width: 0; display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
  text-decoration: none; color: inherit; cursor: pointer;
}
.step-card.done .step-row { background: var(--surface-3); }
.step-card.current .step-row { background: var(--surface-2); }
.step-card.locked .step-row { background: transparent; border: 1px solid var(--surface-3); cursor: default; }
.step-row:hover { background: var(--border-strong); }
.step-card.locked .step-row:hover { background: transparent; }
.step-row-check { font-size: var(--fs-body); font-weight: 500; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step-card.done .step-row-check { color: var(--fn-done); }
.step-card.current .step-row-check { color: var(--white); }
.step-card.locked .step-row-check { color: var(--ink-locked-2); }
.step-row-writer { font-size: var(--fs-meta); font-weight: 600; }
.step-card.done .step-row-writer { color: var(--text-3); }
.step-card.current .step-row-writer { color: var(--brand-purple); }
.step-card.locked .step-row-writer { color: var(--ink-locked); }
.step-lock-msg { text-align: center; font-size: var(--fs-meta); font-weight: 600; color: var(--ink-locked); margin-top: 8px; }
.check-box {
  width: 24px; height: 24px; border-radius: 3px; border: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-meta); font-weight: 700; flex-shrink: 0; font-family: inherit;
  transition: all 0.2s; cursor: pointer;
  position: relative;
}
/* 클릭 판정 넓힘 (모바일 탭 편의) — 이제 링크와 분리돼 안전 */
.check-box::before {
  content: ''; position: absolute;
  top: -12px; bottom: -12px; left: -12px; right: -12px;
}
.check-box.unchecked { background: var(--border-strong); color: transparent; }
.check-box.checked { background: var(--fn-done); color: var(--white); }
.step-row-left { display: flex; align-items: center; flex: 1; min-width: 0; }

/* === ANIMATIONS === */
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeIn 0.4s ease forwards; }

/* === RESPONSIVE (mobile-first additions, v6.0) === */
@media (max-width: 768px) {
  /* 모바일: 헤더를 뷰포트 하단 고정 네비게이션 바로 (아이콘 위 + 텍스트 아래) */
  .nav {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0;
    border-top: 1px solid var(--glass-border); border-bottom: none;
    padding: 0 8px;
  }
  .nav-inner { gap: 4px; justify-content: space-around; }
  .nav-logo { display: none; }
  .nav-ico { display: block; }
  .nav-item { flex-direction: column; gap: 4px; min-height: 48px; padding: 4px 8px; font-size: var(--fs-micro); font-weight: 600; }
  body { padding-bottom: 72px; }
  .section { padding: 0 0 40px; }
  .about-stats { gap: 24px; flex-wrap: wrap; justify-content: flex-start; }
  .about-stat-num { font-size: var(--fs-h1); }
  .about-stat-label { font-size: var(--fs-meta); }
  .pills { gap: 8px; }
  .pill { font-size: var(--fs-body); padding: 8px 16px; line-height: 1.35; min-height: 48px; }
  .demo-banner { font-size: var(--fs-meta); padding: 8px 8px; flex-wrap: wrap; gap: 8px; text-align: center; }
}
@media (max-width: 480px) {
  .nav-item { padding: 4px 8px; }
  .about-stat-num { font-size: var(--fs-h2); }
  .pill { font-size: var(--fs-meta); padding: 8px 8px; }
  /* Long pill labels: ensure wrap doesn't overflow */
  .pills { flex-direction: column; align-items: stretch; }
  .pill { width: 100%; text-align: left; }
  /* Social proof: 좁은 화면에서 줄바꿈 자연스럽게 */
  .social-proof-bar { font-size: var(--fs-meta); padding: 8px 16px; line-height: 1.5; text-align: center; }
  /* Result CTA 버튼들 폭 확보 */
  .share-btn { font-size: var(--fs-body); padding: 16px; }
  /* About 페르소나 카드 여백 축소 */
  .about-card { padding: 16px 16px; margin-bottom: 8px; }
  .about-card-title { font-size: var(--fs-body); }
  .about-card-desc { font-size: var(--fs-meta); }
}

/* === GLASS REDESIGN: 반응형/성능 보강 (v2.0) === */
/* 태블릿: 좁은 본문 컬럼이라 데스크탑과 동일 레이아웃 유지, 여백만 유동 */
@media (min-width: 769px) {
  .nav { padding: 0 clamp(16px, 4vw, 24px); }
  /* 활용법 — 웹에서만 지그재그 + 중앙 화살표 (모바일은 세로 유지) */
  .about-flow { position: relative; padding: 8px 0; }
  .about-flow::before {
    content: ''; position: absolute; top: 96px; bottom: 200px; left: 50%; transform: translateX(-50%);
    width: 176px; z-index: 0; pointer-events: none; opacity: 0.2;
    background: var(--arrow-long-img) center bottom / 100% auto no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, var(--mask-opaque) 32%);
    mask-image: linear-gradient(to bottom, transparent 0%, var(--mask-opaque) 32%);
  }
  .about-flow-step {
    z-index: 1; width: fit-content; max-width: 92%; align-self: center;
    background: var(--glass-1); border: 1px solid var(--glass-border); border-radius: var(--r-glass-sm);
    box-shadow: var(--glass-shadow); padding: 16px 20px;
    backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  }
  .about-flow-step:not(:last-child)::after { display: none; }
  .about-flow-step:nth-child(odd) { transform: translateX(-88px); }
  .about-flow-step:nth-child(even) { transform: translateX(88px); }
  .about-flow-step strong { font-size: var(--fs-h3); }
  /* 내집마련 — 화살표 아래, 카드 없이 집 이미지 + 텍스트 */
  .about-flow-step:last-child {
    width: auto; align-self: center; justify-content: center; transform: none;
    background: none; border: none; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; margin-top: 32px;
  }
  .about-flow-step:last-child strong { font-size: var(--fs-h1); }
  .about-flow-step:last-child .about-flow-body { align-items: flex-start; text-align: left; }
  .about-flow-step:last-child .about-flow-icon {
    width: 176px; height: 176px; border-radius: 0;
    background: var(--house-img) center / contain no-repeat;
  }
  .about-flow-step:last-child .about-flow-icon svg { display: none; }
}

/* 모바일: 앰비언트·유리 blur 경량화(렌더 비용↓) + 그리드/터치 정리 */
@media (max-width: 768px) {
  body { --amb-blur: 54px; --glass-blur: 13px; --glass-blur-strong: 18px; --glass-blur-soft: 8px; }
  .about-benefits-grid { gap: 8px; }
  .video-cta-row, .day-column-item, .step-row { padding: var(--sp-3); }
}
@media (max-width: 380px) {
  .about-benefits-grid { grid-template-columns: 1fr; }
}

/* 모션 최소화 선호 사용자 존중 */
@media (prefers-reduced-motion: reduce) {
  .about-benefit-item:hover, .about-expert-card:hover, .expert-card:hover,
  .cta-btn.ready:hover, .result-action-link:hover, .about-mid-cta-btn:hover { transform: none; }
}

/* 내 단계 블록 — 텍스트 가운데 정렬 */
.about-step { text-align: center; }

/* === 바이집 소개(about) 탭은 카드 테두리 유지 — 다른 탭만 그림자+글래스(보더리스) === */
.about-card, .about-diff-item, .about-trust-bar, .about-benefit-item,
.about-review-card, .about-expert-card {
  border: 2px solid var(--border-card);
}
@media (min-width: 769px) {
  .about-flow-step:not(:last-child) { border: 2px solid var(--border-card); }
}
.about-mid-cta, .about-review-event {
  border: 2px solid color-mix(in srgb, var(--brand-purple) 42%, transparent);
}
.about-benefit-item:hover, .about-expert-card:hover {
  border-color: color-mix(in srgb, var(--white) 22%, transparent);
}

/* 전 탭 공통 푸터 */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-6) var(--sp-4) calc(var(--sp-6) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
}
.site-footer a {
  font-size: var(--fs-meta);
  color: var(--text-muted);
  text-decoration: none;
}
.site-footer a:hover { text-decoration: underline; }
.site-footer a + a {
  border-left: 1px solid var(--border);
  padding-left: var(--sp-3);
}