@charset "utf-8";
/* ============================================================
   브랜드마루 랜딩페이지
   ------------------------------------------------------------
   디자인 기준폭 : 1920px
   브레이크포인트 : PC 1280px~ / 태블릿 768~1279px / 모바일 ~767px
   작성 방식     : 데스크톱 우선(desktop-first), max-width 미디어쿼리
   ============================================================ */

/* ------------------------------------------------------------
   0. 웹폰트 — G마켓 산스 Bold (2026-08-23)
   고민 카드의 큰따옴표 시안이 G마켓 산스 Bold 라서 추가.
   unicode-range 로 "따옴표 글자에만" 적용해, 본문 한글이 실수로
   이 폰트로 바뀌는 일을 막는다(본문은 계속 Pretendard).
   ------------------------------------------------------------ */
@font-face {
  font-family: 'GMarketSans';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0022, U+0027, U+2018-201F;
}

/* ------------------------------------------------------------
   1. 디자인 토큰
   ------------------------------------------------------------ */
:root {
  /* 브랜드 컬러 */
  --c-blue:        #0757C2;   /* 메인 배경 블루 */
  --c-blue-dark:   #0B3B7A;
  --c-navy:        #123A78;   /* 헤드라인 네이비 */
  --c-navy-text:   #23386B;   /* 본문 네이비 */
  --c-navy-sub:    #42618E;
  --c-link:        #1B5FD9;
  /* 포인트 컬러 — 배경에 관계없이 이 한 가지만 사용합니다. */
  --c-mint:        #15FFC2;
  --c-sky:         #7FAEE7;   /* 블루 배경 위 보조 텍스트 */
  --c-sky-2:       #89B4E8;
  --c-sky-3:       #9CC0EC;
  --c-sky-4:       #C9DDF6;
  --c-sky-5:       #DCE9FA;
  --c-line:        #CFE0F3;
  --c-line-2:      #BFD6F2;
  --c-line-3:      #D7E5F5;
  --c-line-4:      #E1EAF5;
  --c-concern-bd:  #4084D7;   /* 고민 카드 테두리·구분선 (2026-08-23 시안) */
  --c-bg-gray:     #F8FAFB;

  /* 타이포 — 뷰포트에 따라 유연하게 축소 (1920px에서 원안 크기와 동일) */
  --fs-h2:        clamp(21px, 3.75vw, 72px);   /* 섹션 대제목 72px */
  --fs-eyebrow:   clamp(12px, 1.042vw, 20px);  /* 영문 라벨 20px */
  --fs-lead:      clamp(15px, 1.25vw, 24px);   /* 리드 문단 24px */
  --fs-body:      clamp(14px, 1.05vw, 20px);   /* 본문 20px */
  --fs-card-t:    clamp(16px, 1.198vw, 23px);  /* 카드 제목 23px */
  --fs-ba:        clamp(16px, 1.15vw, 22px);   /* BEFORE/AFTER 강조 22px */
  --fs-stat:      clamp(34px, 3.54vw, 68px);   /* 카운터 숫자 68px */
  --fs-vertical:  clamp(36px, 7.5vw, 144px);   /* 세로 영문 라벨 144px */
  --fs-marquee:   clamp(44px, 8.59vw, 165px);  /* 흐르는 대형 텍스트 165px */
  --fs-btn:       clamp(14px, 1.05vw, 20px);   /* 버튼 20px */

  /* 여백 / 레이아웃 */
  --container:      1240px;
  --container-wide: 1560px;
  --gutter:  clamp(20px, 2.1vw, 40px);   /* 좌우 안전 여백 */
  --sec-y:   clamp(72px, 7.8vw, 150px);  /* 섹션 상하 여백 */

  /* 히어로 스크롤 구간 길이 (JS가 이 값을 읽지 않고 CSS만으로 제어) */
  --hero-h: 260vh;
}

/* ------------------------------------------------------------
   2. 리셋 / 기본
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0;
  background: #FFFFFF;
  color: var(--c-navy);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               system-ui, "Malgun Gothic", "맑은 고딕", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 고정폭 레이아웃 제거 — 가로 스크롤 방지 */
  overflow-x: hidden;
  /* 2026-08-23: 한글은 단어 단위로만 줄바꿈 ("시작 / 은" 처럼 낱말이 쪼개지지 않게).
     긴 URL·영문 등 한 덩어리가 화면을 넘칠 때만 예외적으로 끊는다. */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

img { max-width: 100%; height: auto; display: block; }

a { color: #0757C2; text-decoration: none; }

h1, h2, h3, p { margin: 0; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* 화면에는 안 보이지만 스크린리더는 읽는 텍스트 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 키보드 포커스 표시 (개발사 접근성 기준용) */
:focus-visible { outline: 3px solid var(--c-mint); outline-offset: 3px; border-radius: 4px; }

/* ------------------------------------------------------------
   3. 공통 레이아웃 유틸
   ------------------------------------------------------------ */
.container       { width: 100%; max-width: var(--container); margin: 0 auto; }
.container--wide { width: 100%; max-width: var(--container-wide); margin: 0 auto; }

.section { padding-left: var(--gutter); padding-right: var(--gutter); }

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #3E7FD0;
}
.eyebrow--mint { color: var(--c-mint); }
.eyebrow--sky  { color: #5B96E8; }

.h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.025em;
}
.h2--navy { color: var(--c-navy); }

.lead {
  font-size: var(--fs-body);
  line-height: 1.75;
  letter-spacing: -0.025em;
  font-weight: 500;
}

/* 데스크톱에서만 의도적으로 줄바꿈되는 <br> — 좁은 화면에선 자연스럽게 흐르도록 해제 */
@media (max-width: 767px) {
  .br-pc { display: none; }
}

/* ------------------------------------------------------------
   4. 버튼
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: var(--fs-btn);
  font-weight: 800;
  letter-spacing: -0.02em;
  padding: 16px 36px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn__chev { font-weight: 500; }

.btn--outline {
  border: 1.5px solid var(--c-navy);
  color: var(--c-navy);
  font-weight: 700;
}
.btn--outline:hover { background: var(--c-navy); color: #fff; }

.btn--mint {
  background-color: var(--c-mint);
  color: var(--c-blue-dark);
}
.btn--mint:hover { background-color: var(--c-mint); }

/* ------------------------------------------------------------
   5. 헤더 / GNB
   ------------------------------------------------------------ */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid #EAEFF6;
}
.header__inner {
  /* 전체 컨테이너(1560px)보다 넓게 잡아 메뉴와 버튼을 화면 바깥쪽으로 민다 */
  max-width: 1820px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 48px);
  padding: clamp(14px, 1.15vw, 22px) var(--gutter);
}
.logo {
  flex: none;
  display: block;
  line-height: 0;   /* 이미지 아래 여백 제거 */
}
.logo img {
  display: block;
  height: clamp(19px, 1.35vw, 26px);
  width: auto;
}
.gnb {
  display: flex;
  gap: clamp(24px, 2.6vw, 50px);
  /* 로고와 오른쪽 버튼 그룹 사이, 화면 가운데쯤에 놓는다.
     왼쪽은 auto 로 밀고 오른쪽 여백만 화면폭에 비례해 잡아 위치를 고정한다. */
  margin-left: auto;
  margin-right: clamp(0px, 21.8vw, 419px);
}
.gnb__link {
  /* 1920px 기준 18px (원안 24px 대비 6px 축소) */
  font-size: clamp(13px, 1.11vw, 18px);
  font-weight: 600;
  color: #33507E;
  transition: color .2s ease;
}
.gnb__link:hover { color: var(--c-blue); }
/* 현재 보고 있는 페이지 메뉴 */
.gnb__link.is-current { color: var(--c-navy); font-weight: 700; }
.mobile-nav__link.is-current { color: var(--c-blue); }

.header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
/* 헤더 안의 버튼만 작게 — 최종 CTA 섹션의 큰 버튼은 그대로 둔다 */
.header__actions .btn {
  font-size: clamp(12px, 0.833vw, 16px);   /* 원안 20px 대비 4px 축소 */
  padding: clamp(10px, 0.73vw, 14px) clamp(18px, 1.51vw, 29px);
  gap: 8px;
}

/* 햄버거 버튼 — PC/태블릿에서는 숨김 */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  flex: none;
  margin-left: auto;
  padding: 10px;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--c-navy);
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle span + span { margin-top: 6px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* 모바일 전체화면 메뉴 */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 49;
  background: #fff;
  padding: 96px var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav__link {
  font-size: 22px;
  font-weight: 700;
  color: var(--c-navy);
  padding: 18px 4px;
  border-bottom: 1px solid #EAEFF6;
}
.mobile-nav__actions { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.mobile-nav__actions .btn { width: 100%; }

/* 메뉴 열렸을 때 배경 스크롤 잠금 */
body.is-nav-open { overflow: hidden; }

/* ------------------------------------------------------------
   6. 히어로 (스크롤 연동 카피 전환)
   ------------------------------------------------------------ */
.hero {
  position: relative;
  height: var(--hero-h);
  background: var(--c-blue);
}
.hero__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;              /* 모바일 주소창 대응 */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 배경 장식 도형 — 모두 % 기반이라 화면폭에 따라 자동으로 늘어남 */
.hero__deco { position: absolute; pointer-events: none; }
.hero__deco--1 {
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.10) 42%, rgba(0,0,0,0) 42%);
  clip-path: polygon(0 0, 62% 0, 0 100%);
}
.hero__deco--2 {
  left: 0; bottom: 0; width: 60%; height: 70%;
  background: linear-gradient(60deg, #23C39B 0%, rgba(7,87,194,0) 70%);
  opacity: .55;
  clip-path: polygon(0 100%, 55% 100%, 0 22%);
}
.hero__deco--3 {
  right: 0; bottom: 0; width: 45%; height: 55%;
  background: linear-gradient(200deg, rgba(255,255,255,.14), rgba(255,255,255,0));
  clip-path: polygon(100% 0, 100% 100%, 8% 100%);
}
.hero__copy {
  position: absolute;
  width: min(800px, 86vw);
  text-align: center;
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: #fff;
  will-change: transform, opacity;
}
/* 두 번째 카피는 JS가 등장시키기 전까지 숨김 */
.hero__copy--b { opacity: 0; }


/* ------------------------------------------------------------
   6-1. 히어로 카피 B — 텍스트(왼쪽) + 8각형 브랜드 진단 레이더(오른쪽)
   ------------------------------------------------------------ */
.hero__copy--b {
  width: min(1360px, 92vw);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3.6vw, 68px);
  text-align: left;
}
.hero__copy-text { flex: 1 1 auto; min-width: 0; }

.hero__radar {
  flex: 0 0 auto;
  width: clamp(230px, 29vw, 555px);
}

/* --- 레이더 도형 --- */
.radar { display: block; width: 100%; height: auto; overflow: visible; }

.radar__ring {
  fill: none;
  stroke: rgba(255,255,255,.20);
  stroke-width: 1.2;
}
.radar__ring--outer { stroke: rgba(255,255,255,.34); stroke-width: 1.6; }
.radar__axis { stroke: rgba(255,255,255,.16); stroke-width: 1; }

.radar__label {
  fill: #DCE9FA;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.radar__area {
  fill: rgba(21,255,194,.26);
  stroke: var(--c-mint);
  stroke-width: 2.6;
  stroke-linejoin: round;
}
.radar__dot { fill: var(--c-mint); }

/* --- 8각 레이어가 움직이는 효과 --------------------------------
   격자·축선·라벨은 고정하고, 진단 도형의 8개 꼭짓점만 각 축을 따라
   늘었다 줄었다 한다. 좌표 계산과 시퀀스는 js/main-v2.js 가 담당한다.
   여기서는 등장 페이드(--rp)만 처리한다.
   -------------------------------------------------------------- */
.radar__area { opacity: var(--rp, 0); }
.radar__dot {
  opacity: var(--rp, 0);
  transition: opacity .45s ease;
}

.t-sky    { color: var(--c-sky-2); }
.t-sky-3  { color: var(--c-sky-3); }
.t-sky-5  { color: var(--c-sky-5); }
.t-sky-b  { color: var(--c-sky); }
.t-mint   { color: var(--c-mint); }
.t-white  { color: #fff; }

/* ------------------------------------------------------------
   7. 고민 카드 섹션
   ------------------------------------------------------------ */
.concerns {
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFB 100%);
  padding-top: var(--sec-y);
  padding-bottom: var(--sec-y);
}
.concerns__title { text-align: center; margin-bottom: clamp(40px, 3.65vw, 70px); }

.concerns__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.67vw, 32px);
}
/* 2026-08-23 시안 반영: 테두리 2px #4084D7, 모서리 60px(좌하단만 각) */
.concern-card {
  border: 2px solid var(--c-concern-bd);
  border-radius: 60px 60px 60px 0;
  padding: clamp(24px, 1.8vw, 34px) clamp(22px, 1.67vw, 32px) clamp(22px, 1.56vw, 30px);
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.35vw, 26px);
}
/* 2026-08-23 시안: 88px/110px G마켓 산스 Bold, 자간 -2.2px, #15FFC2
   폰트는 이 파일 맨 위 @font-face(GMarketSans) 에서 불러온다. */
.concern-card__quote {
  /* ※ font-family 목록 안에 inherit 를 쓰면 선언 전체가 무효가 된다 — 폰트명을 끝까지 나열할 것 */
  font-family: 'GMarketSans', 'Gmarket Sans', "Pretendard Variable", Pretendard,
               -apple-system, BlinkMacSystemFont, system-ui, "Malgun Gothic", sans-serif;
  font-size: 88px;
  /* 시안 행간은 110px 이지만 따옴표 잉크는 25px 정도라 아래가 통째로 빈다.
     글자 크기·위치는 그대로 두고(줄상자 58px) 요소 높이만 잉크 크기에 맞춰
     28px 로 잡아 카드의 빈 공간을 없앰(2026-08-23). */
  line-height: 58px;
  height: 28px;
  font-weight: 700;
  letter-spacing: -2.2px;
  color: var(--c-mint);
}
/* 2026-08-23 시안: 20px/25px Pretendard Regular, 자간 -0.5px, #123D70, 왼쪽 정렬 */
.concern-card__text {
  font-size: 20px;
  font-weight: 400;
  line-height: 25px;
  letter-spacing: -0.5px;
  color: #123D70;
  text-align: left;
  flex: 1;
}
.concern-card__label {
  border-top: 1px solid var(--c-concern-bd);
  padding-top: 18px;
  font-size: var(--fs-card-t);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.025em;
  color: var(--c-link);
  text-align: center;
}

/* ------------------------------------------------------------
   8. 서비스 소개 (배경 이미지 + 흐르는 텍스트)
   ------------------------------------------------------------ */
.about {
  position: relative;
  overflow: hidden;
  min-height: clamp(420px, 36vw, 690px);
  display: flex;
  flex-direction: column;
  padding-top: clamp(90px, 11.98vw, 230px);
  padding-bottom: var(--gutter);
  background-image: url(../assets/about-bg.png);
  background-size: cover;
  background-position: center bottom;
}
.about__head { position: relative; text-align: center; }
.about__title { margin: clamp(14px, 1.35vw, 26px) 0 clamp(20px, 2.08vw, 40px); }
.about__desc {
  margin: 0 auto;
  width: min(746px, 100%);
  color: var(--c-link);
}

/* 흐르는 텍스트(마퀴) 공통 */
.marquee { position: relative; overflow: hidden; }
.marquee__track {
  display: flex;
  width: max-content;
  animation: bm-marquee 26s linear infinite;
}
.about__marquee {
  position: relative;
  /* margin-top:auto 로 바닥에 붙이면 위 문단과 지나치게 벌어져,
     고정 간격으로 바꿔 문단 바로 아래에 오도록 한다 */
  margin-top: clamp(40px, 7.66vw, 147px);
}
.about__marquee .marquee__item {
  font-size: var(--fs-marquee);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: #0F58C0;
  white-space: nowrap;
  padding-right: clamp(60px, 9.4vw, 180px);
}

@keyframes bm-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ------------------------------------------------------------
   9. 스토리 + 실적 카운터
   ------------------------------------------------------------ */
.story {
  background: var(--c-blue);
  color: #fff;
  padding-top: clamp(72px, 6.77vw, 130px);
}
.story__head { text-align: center; }
.story__desc {
  margin: clamp(20px, 2.08vw, 40px) auto clamp(40px, 3.65vw, 70px);
  width: min(860px, 100%);
  color: var(--c-sky-4);
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1000px;
  margin: 0 auto;
  gap: 20px;
  text-align: center;
}
.stat__label {
  display: inline-block;
  border: 1.5px solid #6FA3E2;
  border-radius: 999px;
  padding: 9px clamp(14px, 1.35vw, 26px);
  font-size: var(--fs-card-t);
  font-weight: 700;
  color: #D6E7FB;
}
.stat__num {
  margin-top: clamp(14px, 1.35vw, 26px);
  font-size: var(--fs-stat);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

/* ------------------------------------------------------------
   10. 3단계 변화 (BEFORE / AFTER)
   ------------------------------------------------------------ */
.steps { padding: clamp(80px, 7.8vw, 150px) 0 clamp(80px, 8.3vw, 160px); }
.steps__title { margin-top: clamp(18px, 1.77vw, 34px); }

/* 흐려짐 처리 — JS가 뷰포트 중앙에 가장 가까운 그룹만 선명하게 표시 */
[data-step] { transition: opacity .5s ease, filter .5s ease; }

.step {
  display: grid;
  grid-template-columns: 191px minmax(0, 1fr);
  gap: clamp(20px, 2.08vw, 40px);
  align-items: end;
  margin-top: clamp(56px, 5.73vw, 110px);
}
.step--reverse { grid-template-columns: minmax(0, 1fr) 191px; }

.step__label {
  font-size: var(--fs-vertical);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--c-mint);
  line-height: 1;
  justify-self: center;
  writing-mode: vertical-rl;
  white-space: nowrap;
}
/* CONCEPT / STORY 는 아래에서 위로 읽히도록 180도 회전 */
.step__label--up { transform: rotate(180deg); }
.step--reverse .step__label { order: 2; }

.step__cards { display: flex; gap: 20px; align-items: stretch; }

.ba-card {
  flex: 1 1 0;
  min-width: 0;
  max-width: 322px;
  min-height: clamp(300px, 18.75vw, 360px);
  border-radius: 20.63px;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.ba-card--before {
  background: #5A8FD4;
  padding: clamp(24px, 1.77vw, 34px) clamp(20px, 1.46vw, 28px);
}
.ba-card--after {
  overflow: hidden;
  border: 4px solid var(--c-mint);
}
.ba-card__tag { font-size: clamp(13px, .78vw, 15px); font-weight: 800; letter-spacing: .04em; }
.ba-card--before .ba-card__tag { color: var(--c-mint); }
.ba-card--after  .ba-card__tag { color: var(--c-mint); }

.ba-card__body { font-size: var(--fs-body); line-height: 1.6; }
.ba-card--before .ba-card__body {
  margin: clamp(20px, 1.77vw, 34px) 0 clamp(24px, 2.08vw, 40px);
  font-weight: 600;
  color: #EAF2FD;
}
.ba-card--after .ba-card__inner {
  background: #fff;
  padding: clamp(20px, 1.46vw, 28px) clamp(18px, 1.25vw, 24px) clamp(24px, 1.77vw, 34px);
  flex: 1;
}
.ba-card--after .ba-card__body {
  margin-top: clamp(20px, 1.77vw, 34px);
  font-weight: 800;
  color: var(--c-navy);
}
.ba-card__foot {
  font-size: var(--fs-ba);
  font-weight: 800;
  line-height: 1.6;
}
.ba-card--before .ba-card__foot {
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,.45);
  padding-top: 22px;
  color: #fff;
}
.ba-card--after .ba-card__foot {
  padding: 22px clamp(18px, 1.25vw, 24px);
  color: var(--c-blue-dark);
  background-color: var(--c-mint);
}

/* 번호 + 문장 줄 */
.step-head {
  display: flex;
  align-items: flex-start;
  gap: clamp(40px, 10.4vw, 200px);
  margin-top: clamp(28px, 2.4vw, 46px);
  padding-left: 231px;              /* 라벨 컬럼 191px + gap 40px */
  white-space: nowrap;
}
.step-head--reverse {
  padding-left: 0;
  padding-right: 231px;
  justify-content: space-between;
  gap: clamp(20px, 2.08vw, 40px);
}
.step-head__num {
  width: clamp(60px, 7.3vw, 140px);
  flex: none;
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
}
.step-head--reverse .step-head__num { order: 2; text-align: right; }
.step-head__title {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

/* ------------------------------------------------------------
   11. 브랜드 언어의 이유 (3 카드)
   ------------------------------------------------------------ */
.why {
  background: var(--c-bg-gray);
  padding-top: clamp(80px, 7.3vw, 140px);
  padding-bottom: clamp(80px, 7.8vw, 150px);
}
.why__head { text-align: center; }
.why__title { margin: clamp(16px, 1.46vw, 28px) 0 clamp(18px, 1.77vw, 34px); }
.why__desc {
  margin: 0 auto;
  width: min(640px, 100%);
  font-size: var(--fs-lead);
  line-height: 1.6;
  letter-spacing: -0.025em;
  font-weight: 500;
  color: var(--c-navy-text);
}
.why__grid {
  max-width: 1120px;
  margin: clamp(44px, 4.17vw, 80px) auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.67vw, 32px);
}
.why-card {
  background: #fff;
  border: 1.5px solid var(--c-line);
  border-radius: 20px 20px 4px 20px;
  padding: clamp(26px, 1.88vw, 36px) clamp(24px, 1.77vw, 34px) clamp(30px, 2.19vw, 42px);
}
.why-card__num {
  text-align: right;
  font-size: clamp(40px, 3.34vw, 64px);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--c-mint);
  line-height: 1;
}
.why-card__title {
  margin-top: clamp(24px, 1.98vw, 38px);
  font-size: var(--fs-card-t);
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: -0.025em;
  color: var(--c-navy-text);
}
.why-card__desc {
  margin-top: clamp(22px, 1.67vw, 32px);
  border-top: 1px solid var(--c-line-4);
  padding-top: clamp(20px, 1.46vw, 28px);
  font-size: var(--fs-body);
  line-height: 1.7;
  letter-spacing: -0.02em;
  color: var(--c-navy-sub);
}
.why__banner {
  width: min(1120px, 100%);
  margin: clamp(28px, 2.71vw, 52px) auto 0;
  border-radius: 14px;
  padding: clamp(20px, 1.35vw, 26px);
  text-align: center;
  font-size: clamp(18px, 2.08vw, 40px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.025em;
  color: var(--c-navy-text);
  background-color: var(--c-mint);
}
.why__note {
  margin-top: clamp(24px, 2.3vw, 44px);
  text-align: center;
  font-size: var(--fs-lead);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--c-navy-sub);
}

/* ------------------------------------------------------------
   12. 베타 사용자 후기
   ------------------------------------------------------------ */
.reviews {
  position: relative;
  overflow: hidden;
  background: var(--c-blue);
  color: #fff;
  padding: clamp(72px, 6.77vw, 130px) 0 clamp(60px, 5.2vw, 100px);
}
.reviews__deco { position: absolute; pointer-events: none; }
.reviews__deco--1 {
  inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,.10) 0 40%, rgba(0,0,0,0) 40%);
  clip-path: polygon(0 0, 55% 0, 0 100%);
}
.reviews__deco--2 {
  right: 0; bottom: 0; width: 55%; height: 80%;
  background: linear-gradient(220deg, #3FCBA6 0%, rgba(7,87,194,0) 65%);
  opacity: .5;
  clip-path: polygon(100% 20%, 100% 100%, 20% 100%);
}
.reviews__head { position: relative; text-align: center; padding: 0 var(--gutter); }
.reviews__title { margin-top: clamp(16px, 1.46vw, 28px); }

.reviews__marquee { position: relative; margin-top: clamp(40px, 4.17vw, 80px); }
.reviews__track {
  display: flex;
  width: max-content;
  gap: clamp(16px, 1.67vw, 32px);
  padding: 0 clamp(16px, 1.67vw, 32px);
  animation: bm-marquee 40s linear infinite;
}
.reviews__group { display: flex; gap: clamp(16px, 1.67vw, 32px); }

.review-card {
  width: clamp(260px, 19.8vw, 380px);
  flex: none;
  background: rgba(255,255,255,.5);
  border-radius: 16px;
  padding: clamp(22px, 1.56vw, 30px) clamp(22px, 1.56vw, 30px) clamp(20px, 1.46vw, 28px);
  display: flex;
  flex-direction: column;
}
.review-card__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.review-card__stars { font-size: clamp(14px, 1.05vw, 20px); color: var(--c-mint); letter-spacing: 2px; }
.review-card__who { font-size: clamp(12px, .76vw, 14.5px); font-weight: 700; color: var(--c-navy); text-align: right; }
.review-card__text {
  margin-top: clamp(18px, 1.35vw, 26px);
  font-size: var(--fs-body);
  line-height: 1.7;
  font-weight: 600;
  color: #12356E;
  flex: 1;
}
/* ※ 원본 시안에는 이 슬로건 색이 #15FFC2(민트)와 #12C98E(진한 초록) 두 가지로
      섞여 있었습니다. 민트는 반투명 흰 카드 배경 위에서 대비가 약해 거의 읽히지
      않아, 원본에 함께 쓰이던 #12C98E 로 통일했습니다.
      더 또렷하게 가려면 color 를 var(--c-blue-dark) 로 바꾸면 됩니다. */
.review-card__slogan {
  margin-top: clamp(18px, 1.25vw, 24px);
  border-top: 1px solid rgba(18,53,110,.35);
  padding-top: 22px;
  text-align: center;
  font-size: var(--fs-card-t);
  font-weight: 800;
  color: var(--c-mint);
}
.reviews__note {
  position: relative;
  margin: clamp(40px, 3.65vw, 70px) auto 0;
  padding: 0 var(--gutter);
  text-align: center;
  font-size: clamp(11px, 0.78vw, 15px);
  font-weight: 600;
  color: var(--c-sky-4);
}

/* ------------------------------------------------------------
   13. 자주 묻는 질문
   ------------------------------------------------------------ */
.faq {
  background: var(--c-bg-gray);
  padding-top: clamp(80px, 7.8vw, 150px);
  padding-bottom: clamp(80px, 8.3vw, 160px);
}
.faq__title { text-align: center; margin-bottom: clamp(44px, 4.7vw, 90px); }
.faq__list {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.15vw, 22px);
}

/* 아코디언 한 칸 */
.faq__item {
  background: #fff;
  border: 1.5px solid var(--c-line);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .2s ease;
}
.faq__item:hover { border-color: var(--c-mint); }

/* 질문 = 토글 버튼 */
.faq__q {
  width: 100%;
  padding: clamp(18px, 1.46vw, 28px) clamp(20px, 2.3vw, 44px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  text-align: left;
  font-size: clamp(15px, 1.15vw, 22px);
  font-weight: 800;
  color: var(--c-navy);
  line-height: 1.45;
}

/* + 아이콘 — 열리면 45도 회전해 × 가 된다 */
.faq__icon {
  position: relative;
  width: clamp(18px, 1.25vw, 24px);
  height: clamp(18px, 1.25vw, 24px);
  flex: none;
  transition: transform .3s ease;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--c-mint);
  border-radius: 2px;
}
.faq__icon::before { width: 100%; height: 2px; }
.faq__icon::after  { width: 2px;  height: 100%; }
.faq__item.is-open .faq__icon { transform: rotate(45deg); }

/* 답변 패널 — grid-template-rows 0fr→1fr 로 높이 계산 없이 부드럽게 펼침 */
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s ease;
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }

.faq__a-inner {
  overflow: hidden;
  visibility: hidden;
  transition: visibility .32s;
}
.faq__item.is-open .faq__a-inner { visibility: visible; }

.faq__a p {
  padding: 0 clamp(20px, 2.3vw, 44px) clamp(20px, 1.46vw, 28px);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: -0.02em;
  color: var(--c-navy-sub);
}

/* grid-template-rows 트랜지션 미지원 브라우저 대비 (열림 자체는 항상 동작) */
@supports not (grid-template-rows: 0fr) {
  .faq__a { display: block; height: 0; overflow: hidden; }
  .faq__item.is-open .faq__a { height: auto; }
}

/* ------------------------------------------------------------
   14. 최종 CTA
   ------------------------------------------------------------ */
.cta {
  background: var(--c-blue);
  color: #fff;
  text-align: center;
  padding-top: clamp(90px, 8.85vw, 170px);
  padding-bottom: clamp(96px, 9.4vw, 180px);
}
.cta__eyebrow { letter-spacing: 0.22em; }
.cta__title { margin: clamp(20px, 1.67vw, 32px) 0 clamp(22px, 2.08vw, 40px); }
.cta__desc {
  margin-bottom: clamp(28px, 2.3vw, 44px);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--c-sky-4);
}

/* ------------------------------------------------------------
   15. 등장 애니메이션
   ------------------------------------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .7s ease, transform .7s ease;
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ============================================================
   16. 태블릿  (768px ~ 1279px)
   ============================================================ */
@media (max-width: 1279px) {
  :root {
    --container: 100%;
    --hero-h: 240vh;
  }

  /* 헤더: 로그인 버튼을 감추고 CTA 하나만 남겨 폭 확보 */
  .header__inner { gap: 20px; }
  .gnb { gap: 28px; }
  .header__actions .btn--outline { display: none; }
  .btn { padding: 12px 22px; }

  /* 히어로 레이더 — 텍스트 자리를 남기고 축소 */
  .hero__radar { width: clamp(210px, 32vw, 330px); }
  .radar__label { font-size: 14px; }

  /* 4단 → 2단 */
  .concerns__grid { grid-template-columns: repeat(2, 1fr); }

  /* 서비스 소개 본문 폭 해제 */
  .about { min-height: 0; padding-bottom: clamp(40px, 5vw, 90px); }

  /* 3단계: 세로 라벨 컬럼 축소 (좌우 여백은 부모 .story.section 이 담당) */
  .step { grid-template-columns: 110px minmax(0, 1fr); align-items: center; }
  .step--reverse { grid-template-columns: minmax(0, 1fr) 110px; }
  .step-head { padding-left: 130px; gap: 32px; white-space: normal; }
  .step-head--reverse { padding-left: 0; padding-right: 130px; }

  /* 브랜드 언어 카드: 폭이 좁아지면 3단 → 2단 → 1단으로 자동 전환 */
  .why__grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
  .why-card__desc br,
  .why-card__title br { display: none; }
}

/* ============================================================
   17. 모바일  (~767px)
   ============================================================ */
@media (max-width: 767px) {
  :root {
    --hero-h: 220vh;
    --gutter: 20px;
  }

  /* --- 헤더: 햄버거 메뉴 --- */
  .gnb,
  .header__actions { display: none; }
  .nav-toggle { display: block; }
  .header__inner { padding: 14px var(--gutter); justify-content: space-between; }

  /* --- 히어로 ---
     2026-08-22: 모바일 첫 화면 카피가 너무 작아 키움(21px → 화면폭의 7.6%, 375px 기준 28.5px).
     폭은 92vw 로 넓혀 <br> 로 끊은 줄이 다시 접히지 않게 한다.
     행간: 1em → 1.3 → 사용자 지정 2 (2026-08-23). 375px 기준 줄 높이 57px. */
  .hero__copy {
    width: 92vw;
    letter-spacing: -0.02em;
    font-size: clamp(24px, 7.6vw, 42px);
    line-height: 2;
  }

  /* 첫 카피 — 한 글자씩 떠오르기 (js/main.js 가 글자마다 .hero-ch 와 --i 를 넣는다) */
  .hero__copy--a .hero-ch {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.22em);
    will-change: opacity, transform;
  }
  .hero__copy--a.is-typed .hero-ch {
    animation: hero-ch-in .34s cubic-bezier(.22, .61, .36, 1) forwards;
    animation-delay: calc(var(--i, 0) * 55ms);
  }
  @keyframes hero-ch-in {
    from { opacity: 0; transform: translateY(0.22em); }
    to   { opacity: 1; transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero__copy--a .hero-ch { opacity: 1; transform: none; animation: none; }
  }
  /* 두 번째 카피는 줄이 짧아 더 키울 수 있다 — 폰트 9vw(375px 기준 33.7px), 행간 1.28 */
  .hero__copy--b {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    width: 92vw;
    font-size: clamp(27px, 9vw, 46px);
    line-height: 1.28;
  }
  .hero__radar { width: min(348px, 90vw); }
  .radar__label { font-size: 12px; }

  /* --- 고민 카드: 1단 --- */
  .concerns__grid { grid-template-columns: 1fr; }
  .concern-card { border-radius: 48px 48px 48px 0; gap: 14px; }
  /* 2026-08-23 시안 확정: 모바일도 왼쪽 정렬 + 원고의 <br> 줄바꿈 그대로 (가운데 정렬 지시는 철회됨) */
  /* 따옴표 글자는 그대로 두고 줄상자(110px)만 줄여 아래 빈 공간을 없앤다 */
  .concern-card__quote { line-height: 52px; height: 26px; }

  /* --- 서비스 소개 --- */
  .about { background-position: center bottom; }
  .about__desc br { display: none; }

  /* --- 실적 카운터: 1단 --- */
  .stats { grid-template-columns: 1fr; gap: 32px; }
  .story__desc br { display: none; }

  /* --- 3단계: 세로 라벨을 가로로 눕히고 카드 1단 --- */
  .step,
  .step--reverse {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 64px;
  }
  .step__label,
  .step--reverse .step__label {
    order: 0;
    writing-mode: horizontal-tb;
    transform: none;
    justify-self: start;
    font-size: 44px;
  }
  .step__cards { flex-direction: column; align-items: stretch; }
  /* 세로 배치에서는 flex-basis:0 이 높이 기준이 되어 카드가 찌그러지므로 auto 로 되돌린다 */
  .ba-card { flex: 0 0 auto; max-width: none; min-height: 0; }

  .step-head,
  .step-head--reverse {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 0;
    margin-top: 28px;
    white-space: normal;
  }
  .step-head--reverse .step-head__num { order: 0; text-align: left; }
  .step-head__num { width: auto; }
  .step-head__title br { display: none; }

  /* --- 브랜드 언어 카드: 1단 --- */
  .why__grid { grid-template-columns: 1fr; }
  .why-card { border-radius: 20px 20px 20px 4px; }
  .why-card__title br,
  .why__desc br { display: none; }
  .why__banner { border-radius: 12px; padding: 20px 18px; line-height: 1.5; }

  /* --- 후기 --- */
  .review-card__text br { display: none; }
  .reviews__track { animation-duration: 26s; }

  /* --- FAQ: 질문이 길어져도 아이콘이 첫 줄에 붙도록 --- */
  .faq__item { border-radius: 12px; }
  .faq__q { align-items: flex-start; gap: 12px; }
  .faq__icon { margin-top: 3px; }

  /* --- CTA --- */
  .cta__title br { display: none; }
  .cta .btn { width: 100%; max-width: 340px; }
}

/* 초소형 화면 (~360px) 여백 보정 */
@media (max-width: 360px) {
  :root { --gutter: 16px; }
  .btn { padding: 14px 20px; }
}


/* ============================================================
   20. 서브페이지 공통 — 페이지 히어로
   ============================================================ */
.page-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(340px, 31vw, 590px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: clamp(60px, 6.8vw, 130px);
  padding-bottom: clamp(60px, 6.8vw, 130px);
  background-image: url(../assets/about-bg.png);
  background-size: cover;
  background-position: center bottom;
}
.page-hero__title { margin-top: clamp(14px, 1.35vw, 26px); }

/* ============================================================
   21. 이용방법 — 3단계 코어
   ============================================================ */
.cores {
  background: var(--c-blue);
  color: #fff;
  padding-top: clamp(72px, 6.8vw, 130px);
  padding-bottom: clamp(72px, 6.8vw, 130px);
}

/* 각 단계 위 : CORE 배지 + 질문 한 줄 (모두 포인트 컬러) */
.core__head {
  text-align: center;
  margin-bottom: clamp(24px, 2.4vw, 46px);
}
.core__badge {
  display: inline-block;
  border: 1.5px solid var(--c-mint);
  border-radius: 999px;
  padding: clamp(7px, 0.52vw, 10px) clamp(18px, 1.46vw, 28px);
  font-size: clamp(13px, 0.94vw, 18px);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--c-mint);
}
.core__ask {
  margin-top: clamp(14px, 1.25vw, 24px);
  font-size: var(--fs-lead);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--c-mint);
}
.core__head + .core { margin-top: 0; }

.core {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(28px, 4.2vw, 80px);
  align-items: center;
}
.core + .core__head { margin-top: clamp(64px, 6.3vw, 120px); }

.core__no {
  font-size: clamp(30px, 2.6vw, 50px);
  font-weight: 800;
  line-height: 1;
  color: var(--c-mint);
  margin-bottom: clamp(14px, 1.25vw, 24px);
}

.core__title {
  font-size: clamp(24px, 2.19vw, 42px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.025em;
  margin-bottom: clamp(12px, 1.04vw, 20px);
}
.core__desc {
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: -0.025em;
  color: var(--c-sky-4);
}

.core__list {
  list-style: none;
  margin: clamp(20px, 1.77vw, 34px) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 0.83vw, 16px);
}
.core__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.025em;
  color: #EAF2FD;
}
.core__list li::before {
  content: "✓";
  flex: none;
  font-weight: 800;
  color: var(--c-mint);
  line-height: 1.5;
}

.core__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(22px, 1.98vw, 38px);
  padding: clamp(11px, 0.83vw, 16px) clamp(20px, 1.67vw, 32px);
  border-radius: 999px;
  background: var(--c-mint);
  color: var(--c-blue-dark);
  font-size: clamp(13px, 0.885vw, 17px);
  font-weight: 800;
  letter-spacing: -0.02em;
  transition: background-color .2s ease;
}
.core__link:hover { background: #3BFFCE; color: var(--c-blue-dark); }

/* 화면 이미지 자리 — 개발 시 실제 스크린샷으로 교체 */
.core__shot {
  background: #fff;
  border-radius: clamp(12px, 1.04vw, 20px);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  font-size: clamp(12px, 0.83vw, 16px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #93A9C6;
  overflow: hidden;
}
.core__shot--img { aspect-ratio: auto; padding: 0; background: #fff; }
.core__shot img { display: block; width: 100%; height: auto; border-radius: inherit; }

/* ============================================================
   22. 전문가 컨설팅 배너
   ============================================================ */
.expert {
  background: var(--c-mint);
  color: var(--c-blue-dark);
  text-align: center;
  padding: clamp(30px, 2.9vw, 56px) var(--gutter);
  font-size: clamp(15px, 1.15vw, 22px);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: -0.025em;
}
.expert b { font-weight: 800; }

/* ============================================================
   23. 비교표
   ============================================================ */
.compare {
  background: var(--c-bg-gray);
  padding-top: clamp(72px, 7.3vw, 140px);
  padding-bottom: clamp(72px, 7.8vw, 150px);
}
.compare__head { text-align: center; margin-bottom: clamp(40px, 3.65vw, 70px); }
.compare__title { margin-top: clamp(14px, 1.35vw, 26px); }

/* 모바일에서 표가 가로로 스크롤된다는 안내 (PC/태블릿에서는 숨김) */
.compare__hint {
  display: none;
  max-width: 1120px;
  margin: 0 auto 10px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #8FA6C4;
}

/* 좁은 화면에서는 표 자체가 가로로 스크롤된다 */
.compare__scroll {
  max-width: 1120px;
  margin: 0 auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.compare__table {
  width: 100%;
  min-width: 680px;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1.5px solid var(--c-line);
  border-radius: 16px;
  overflow: hidden;
}
.compare__table th,
.compare__table td {
  padding: clamp(9px, 0.73vw, 14px) clamp(10px, 1.04vw, 20px);
  text-align: center;
  font-size: clamp(13px, 0.94vw, 18px);
  line-height: 1.45;
  letter-spacing: -0.025em;
  border-bottom: 1px solid var(--c-line-4);
}
.compare__table tbody tr:last-child th,
.compare__table tbody tr:last-child td { border-bottom: 0; }

.compare__table thead th {
  font-size: clamp(13px, 0.94vw, 18px);
  font-weight: 800;
  color: var(--c-navy);
  background: #F1F6FC;
}
.compare__table tbody th {
  text-align: left;
  font-weight: 700;
  color: var(--c-navy);
  background: #FAFCFF;
  white-space: nowrap;
}
.compare__table td { font-weight: 500; color: var(--c-navy-sub); }
.compare__sub { display: block; margin-top: 2px; font-size: .82em; color: #8FA6C4; }

/* 마지막 열(브랜드마루) 강조 */
.compare__table th.is-ours,
.compare__table td.is-ours {
  background: rgba(21,255,194,.10);
  color: var(--c-navy);
  font-weight: 800;
  border-left: 2px solid var(--c-mint);
  border-right: 2px solid var(--c-mint);
}
.compare__table thead th.is-ours { background: var(--c-mint); border-top: 2px solid var(--c-mint); }
.compare__table tbody tr:last-child td.is-ours { border-bottom: 2px solid var(--c-mint); }

/* ============================================================
   24. 서브페이지 반응형
   ============================================================ */
@media (max-width: 1279px) {
  .core { gap: clamp(24px, 3.1vw, 40px); }
}

@media (max-width: 767px) {
  .page-hero { min-height: 0; }

  /* 3단계: 텍스트 위 · 화면 이미지 아래로 */
  .core {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .core__ask { margin-bottom: 18px; }
  .core + .core__ask { margin-top: 56px; }
  .core__link { width: 100%; justify-content: center; }
  .core__shot { aspect-ratio: 16 / 10; }
  .core__shot--img { aspect-ratio: auto; }

  .compare__hint { display: block; }
}


/* ============================================================
   25. 요금제
   ============================================================ */
.pricing {
  position: relative;
  overflow: hidden;
  padding-top: clamp(60px, 6.8vw, 130px);
  padding-bottom: clamp(70px, 7.3vw, 140px);
  background-image: url(../assets/about-bg.png);
  background-size: cover;
  background-position: center top;
}
.pricing__head { text-align: center; margin-bottom: clamp(36px, 3.65vw, 70px); }
.pricing__title { margin-top: clamp(14px, 1.35vw, 26px); }

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.46vw, 28px);
  max-width: 1240px;
  margin: 0 auto;
  align-items: stretch;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1.5px solid var(--c-line);
  border-radius: 18px;
  padding: clamp(28px, 2.19vw, 42px) clamp(20px, 1.77vw, 34px) clamp(22px, 1.77vw, 34px);
  box-shadow: 0 10px 30px rgba(11, 59, 122, .06);
}
/* 지금 이용 가능한 플랜만 포인트 테두리로 강조 */
.plan--active {
  border-color: var(--c-mint);
  border-width: 2px;
  box-shadow: 0 14px 38px rgba(21, 201, 155, .18);
}

/* 카드 상단 경계에 걸치는 배지 */
.plan__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: clamp(6px, 0.42vw, 8px) clamp(14px, 1.04vw, 20px);
  border-radius: 999px;
  font-size: clamp(11px, 0.73vw, 14px);
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.plan__badge--now  { background: var(--c-mint); color: var(--c-blue-dark); }
.plan__badge--soon { background: var(--c-navy);  color: #fff; }

.plan__name {
  font-size: clamp(18px, 1.35vw, 26px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--c-navy);
}
.plan__desc {
  margin-top: clamp(10px, 0.73vw, 14px);
  font-size: clamp(13px, 0.83vw, 16px);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: -0.025em;
  color: var(--c-navy-sub);
}

/* --- 가격 --- */
.plan__price {
  margin-top: clamp(20px, 1.77vw, 34px);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.plan__price-was {
  font-size: clamp(14px, 0.94vw, 18px);
  font-weight: 600;
  color: #9FB3CC;
  text-decoration: line-through;
}
.plan__price-num {
  font-size: clamp(30px, 2.4vw, 46px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--c-navy);
}
.plan__price-unit {
  font-size: clamp(13px, 0.83vw, 16px);
  font-weight: 700;
  color: var(--c-navy);
}
/* 오픈 전 플랜의 '준비 중' 표기 */
.plan__price-soon {
  font-size: clamp(26px, 2.08vw, 40px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #A8BACF;
}
.plan__price-note {
  margin-top: clamp(8px, 0.62vw, 12px);
  font-size: clamp(12px, 0.78vw, 15px);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: #8FA6C4;
}

/* --- 기능 목록 --- */
.plan__list {
  list-style: none;
  margin: clamp(20px, 1.67vw, 32px) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(9px, 0.73vw, 14px);
  flex: 1;
}
.plan__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: clamp(13px, 0.83vw, 16px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.025em;
  color: var(--c-navy-text);
}
.plan__list li::before {
  content: "✓";
  flex: none;
  font-weight: 800;
  color: var(--c-mint);
  line-height: 1.5;
}
/* 해당 플랜에 포함되지 않는 항목 */
.plan__list li.is-off { color: #B4C4D6; }
.plan__list li.is-off::before { color: #D6E0EA; }

/* --- 버튼 --- */
.plan__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: clamp(22px, 1.98vw, 38px);
  padding: clamp(13px, 1.04vw, 20px) 18px;
  border-radius: 12px;
  font-size: clamp(13px, 0.885vw, 17px);
  font-weight: 800;
  letter-spacing: -0.025em;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.plan__cta--primary {
  background: var(--c-mint);
  color: var(--c-blue-dark);
}
.plan__cta--primary:hover { background: #3BFFCE; color: var(--c-blue-dark); }
.plan__cta--ghost {
  background: #fff;
  border: 1.5px solid var(--c-line);
  color: var(--c-navy);
}
.plan__cta--ghost:hover { border-color: var(--c-mint); color: var(--c-navy); }

/* --- 하단 안내 --- */
.pricing__notice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 1240px;
  margin: clamp(20px, 1.77vw, 34px) auto 0;
  padding: clamp(18px, 1.35vw, 26px) clamp(18px, 1.67vw, 32px);
  background: rgba(255, 255, 255, .88);
  border: 1.5px solid var(--c-line);
  border-radius: 14px;
  font-size: clamp(13px, 0.83vw, 16px);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: -0.025em;
  color: var(--c-navy-sub);
}
.pricing__notice b { font-weight: 800; color: var(--c-navy); }
.pricing__notice-ico {
  flex: none;
  width: clamp(24px, 1.67vw, 32px);
  height: clamp(24px, 1.67vw, 32px);
  border-radius: 9px;
  background: rgba(21, 255, 194, .22);
  color: var(--c-blue-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(13px, 0.83vw, 16px);
  font-weight: 800;
}

/* ============================================================
   26. 요금제 반응형
   ============================================================ */
@media (max-width: 1023px) {
  .plans { grid-template-columns: 1fr; max-width: 560px; gap: 34px; }
  .plan__list { flex: none; }
}

@media (max-width: 767px) {
  .pricing { background-position: center top; }
  .pricing__notice { padding: 16px 16px; gap: 10px; }
}

/* ============================================================
   18. 모션 최소화 선호 사용자 대응
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track,
  .reviews__track,
  /* 레이더 형태 애니메이션은 js/main-v2.js 가 스스로 건너뛴다 */
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  [data-step] { transition: none; }
}

/* ============================================================
   19. 인쇄
   ============================================================ */
@media print {
  .header, .nav-toggle, .mobile-nav { display: none !important; }
  .hero { height: auto; }
  .hero__sticky { position: static; height: auto; padding: 60px 0; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}