/* ONE Mobile 본문체는 읽는 문장, Title은 헤드라인을 맡는다. 기본 라틴과
   베트남어·태국어는 각 언어 글리프를 가진 다음 폴백으로 넘겨 판독성을 유지한다. */
@font-face {
  font-family: "ONE-Mobile-Regular";
  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7AF, U+D7B0-D7FF;
}

@font-face {
  font-family: "ONE-Mobile-Title";
  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-Title.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7AF, U+D7B0-D7FF;
}

:root {
  --font-cta: "ONE-Mobile-Title", "Be Vietnam Pro", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --ink-950: #171329;
  --ink-900: #221b3c;
  --ink-700: #4d446b;
  --ink-600: #5d5378; /* 2026-07-22 대비 보정: 옅은 블러(9px) 유리+핑크 구체 실측 배경(226,208,252) 대비 4.93:1 (구 #665c82는 4.14:1로 AA 미달) */
  --ink-400: #9289aa;
  --paper: #fbfaff;
  --paper-soft: rgba(251, 250, 255, .72);
  --lavender-100: #efeaff;
  --lavender-300: #c7b9ff;
  --lavender-500: #856ae3;
  --lavender-700: #5f45c1;
  --pink-500: #ef5ba7;
  --cta-blossom: #ffb1d5;
  --cta-pink: #f25ca8;
  --cta-lavender: #c88af4;
  --cta-glass-white: #fbfaff;
  --cta-plum: #8a3fb2;
  --cyan-400: #42c6e8;
  --success: #287b65;
  --danger: #b43b5e;
  --content-max: 1280px;
  --section-nav-reserve: 220px;
  --section-nav-compact-reserve: 120px;
  --section-nav-compact-width: 108px;
  --header-height: 72px;
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 14px;
  --shadow-soft: 0 24px 70px rgba(43, 31, 91, .14);
  --font-size-min: 12px;
  --font-display: "ONE-Mobile-Title", "Be Vietnam Pro", "Avenir Next", "Apple SD Gothic Neo", "Noto Sans CJK KR", "Noto Sans KR", sans-serif;
  --font-body: "ONE-Mobile-Regular", "Be Vietnam Pro", "Apple SD Gothic Neo", "Noto Sans CJK KR", "Noto Sans KR", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  background: #d8c9fa;
  interpolate-size: allow-keywords;
}

body {
  margin: 0;
  color: var(--ink-950);
  background: transparent;
  font-family: var(--font-body);
  font-size: 16px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

body[data-page="index"] {
  overflow: auto;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
video {
  display: block;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid var(--pink-500);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--ink-950);
  color: white;
  transform: translateY(-160%);
  transition: transform .2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.page-shell {
  position: relative;
  min-height: 100svh;
  isolation: isolate;
}

.ambient-background {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  /* isolate the sphere multiply-blend and promote to its own GPU layer so the
     animated fixed background never re-renders when .page-scroller scrolls */
  isolation: isolate;
  transform: translateZ(0);
  background: linear-gradient(135deg, #d9cdf8 0%, #f6efff 48%, #dcebf8 100%);
}

.ambient-background::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .38), transparent 45%),
    linear-gradient(0deg, rgba(246, 243, 255, .26), rgba(246, 243, 255, .04));
  pointer-events: none;
}

/* ===== 배경: 드리프트하는 컬러 스피어 필드 (WebGL 유체 대체) ===== */
.sphere-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.sphere {
  position: absolute;
  display: block;
  width: clamp(480px, 54vw, 900px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .66;
  mix-blend-mode: multiply;
  will-change: transform;
}

.sphere--lavender {
  top: 4vh;
  left: 22vw;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .62), transparent 20%), radial-gradient(circle at 65% 70%, rgba(95, 69, 193, .48), rgba(133, 106, 227, .18) 58%, transparent 74%);
  animation: sphere-drift-lavender 22s ease-in-out infinite alternate;
}

.sphere--pink {
  top: 28vh;
  left: 45vw;
  width: clamp(405px, 45vw, 720px);
  background: radial-gradient(circle at 36% 27%, rgba(255, 255, 255, .56), transparent 19%), radial-gradient(circle at 60% 68%, rgba(239, 91, 167, .5), rgba(239, 91, 167, .14) 60%, transparent 76%);
  animation: sphere-drift-pink 27s ease-in-out -7s infinite alternate;
}

.sphere--cyan {
  top: 43vh;
  left: 18vw;
  width: clamp(330px, 37.5vw, 600px);
  background: radial-gradient(circle at 34% 25%, rgba(255, 255, 255, .5), transparent 18%), radial-gradient(circle at 62% 70%, rgba(66, 198, 232, .46), rgba(66, 198, 232, .12) 60%, transparent 78%);
  animation: sphere-drift-cyan 30s ease-in-out -13s infinite alternate;
}

@keyframes sphere-drift-lavender {
  from { transform: translate3d(-12vw, -6vh, 0) scale(.95); }
  to { transform: translate3d(14vw, 12vh, 0) scale(1.07); }
}

@keyframes sphere-drift-pink {
  from { transform: translate3d(10vw, 8vh, 0) scale(.93); }
  to { transform: translate3d(-12vw, -14vh, 0) scale(1.07); }
}

@keyframes sphere-drift-cyan {
  from { transform: translate3d(-10vw, 12vh, 0) scale(1.06); }
  to { transform: translate3d(12vw, -12vh, 0) scale(.91); }
}

@media (max-width: 860px) {
  .sphere--lavender { top: 10vh; left: 31vw; width: 510px; }
  .sphere--pink { top: 39vh; left: 48vw; width: 405px; }
  .sphere--cyan { top: 50vh; left: 20vw; width: 330px; }
}

@media (prefers-reduced-motion: reduce) {
  .sphere { animation: none !important; }
}

.page-scroller {
  position: relative;
  z-index: 1;
  height: 100svh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(34, 27, 60, .3) transparent;
}

.site-header {
  position: fixed;
  z-index: 30;
  top: 16px;
  left: 32px;
  right: 32px;
  height: 56px;
  pointer-events: none;
}

/* 데스크톱: header-cluster는 투명 패스스루 — 로고/역할/언어 pill이 그대로 뜬다 */
.header-cluster {
  display: contents;
}

.site-header__home,
.site-header__roles,
.site-header .language-picker {
  position: absolute;
  top: 0;
  min-height: 56px;
  display: flex;
  align-items: center;
  border-radius: 18px;
  background: rgba(255, 255, 255, .58);
  box-shadow: 0 14px 45px rgba(51, 35, 110, .09);
  pointer-events: auto;
}

.site-header__home {
  left: 0;
  padding: 8px 10px 8px 16px;
}

.site-header__roles {
  left: 50%;
  padding: 8px 10px;
  transform: translateX(-50%);
}

.site-header .language-picker {
  right: 0;
  padding: 8px;
}

.site-header__divider {
  width: 1px;
  height: 22px;
  margin: 0 3px 0 12px;
  background: rgba(34, 27, 60, .15);
}

/* 메인 페이지 데스크톱 헤더: [로고 | 페이지리스트] ——— [다국어]
   (기본은 역할 nav를 화면 중앙에 절대배치하지만, index에서는 로고 옆으로 붙이고
    다국어를 우측 끝으로 밀어 사이를 투명 공백으로 둔다) */
@media (min-width: 861px) {
  body[data-page="index"] .site-header {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  body[data-page="index"] .site-header__home,
  body[data-page="index"] .site-header__roles,
  body[data-page="index"] .site-header .language-picker {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
  }

  body[data-page="index"] .site-header .language-picker {
    position: relative;
    margin-left: auto;
  }
}

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.brand-link__mark {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.brand-link__word {
  width: 92px;
  height: auto;
}

.site-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.site-link {
  min-height: 40px;
  padding: 10px 13px;
  display: inline-flex;
  align-items: center;
  border-radius: 11px;
  color: var(--ink-700);
  font-size: 14px;
  font-weight: 700;
  transition: background .18s ease, color .18s ease;
}

.site-link:hover {
  color: var(--ink-950);
  background: rgba(255, 255, 255, .62);
}

/* 선택된 페이지 표시는 핑크 CTA 버튼 스타일로 */
.site-link[aria-current="page"] {
  color: #fff;
  background: linear-gradient(135deg, rgba(226, 60, 150, .84) 0%, rgba(210, 22, 120, .9) 100%);
  box-shadow: 0 8px 20px rgba(210, 22, 120, .28), inset 0 1px 0 rgba(255, 255, 255, .4);
  text-shadow: 0 1px 2px rgba(120, 10, 70, .28);
}

.language-picker {
  position: relative;
  flex: 0 0 auto;
}

.language-toggle {
  min-width: 46px;
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--ink-950);
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.language-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 9px);
  width: 205px;
  padding: 8px;
  display: grid;
  gap: 3px;
  border-radius: 15px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow-soft);
}

.language-option {
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.language-option:hover,
.language-option[aria-checked="true"] {
  background: var(--lavender-100);
}

/* 페이지 셀렉박스 (소개/브랜드/인플루언서) — 모바일 전용, 데스크톱 숨김 */
.page-picker {
  display: none;
  position: relative;
}

.page-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 40px;
  padding: 8px 10px 8px 12px;
  border: 0;
  border-radius: 11px;
  /* 현재 페이지 = CTA 핑크 글래스(핑크 배경 + 흰 글씨) */
  background: linear-gradient(135deg, rgba(226, 60, 150, .84) 0%, rgba(210, 22, 120, .9) 100%);
  color: #fff;
  box-shadow: 0 10px 22px rgba(210, 22, 120, .22), inset 0 1px 0 rgba(255, 255, 255, .4);
  text-shadow: 0 1px 2px rgba(120, 10, 70, .28);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  word-break: keep-all;
}

.page-toggle__chevron {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  color: rgba(255, 255, 255, .82);
  transition: transform .2s ease;
}

.page-picker.is-open .page-toggle__chevron {
  transform: rotate(180deg);
}

.page-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 9px);
  width: 160px;
  padding: 7px;
  display: grid;
  gap: 2px;
  z-index: 40;
  border-radius: 14px;
  background: rgba(255, 255, 255, .97);
  box-shadow: var(--shadow-soft);
}

.page-option {
  min-height: 40px;
  padding: 9px 11px;
  display: flex;
  align-items: center;
  border-radius: 9px;
  color: var(--ink-700);
  font-size: 14px;
  font-weight: 700;
  word-break: keep-all;
}

.page-option:hover {
  background: var(--lavender-100);
  color: var(--ink-950);
}

.page-option[aria-current="page"] {
  color: #fff;
  background: linear-gradient(135deg, rgba(226, 60, 150, .84) 0%, rgba(210, 22, 120, .9) 100%);
}

.fp-sec {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 720px;
  padding-top: calc(var(--header-height) + 62px);
  padding-right: max(var(--section-nav-reserve), calc((100vw - var(--content-max)) / 2));
  padding-bottom: 60px;
  padding-left: max(40px, calc((100vw - 1560px) / 2));
  display: grid;
  align-items: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.section-stage {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}

.section-stage--narrow {
  max-width: 1120px;
}

.section-kicker {
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--ink-700);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.section-kicker::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--pink-500);
}

.display-title {
  margin: 0;
  max-width: 12ch;
  font-family: var(--font-display);
  font-size: clamp(48px, 6.4vw, 94px);
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: .99;
}

.section-title {
  margin: 0;
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: clamp(38px, 4.6vw, 66px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.05;
}

.section-title--compact {
  font-size: clamp(34px, 4vw, 58px);
}

.gate-title,
.display-title,
.section-title,
.mission-statement,
.analysis-card h2,
.analysis-intro h2,
.role-card h2 {
  word-break: keep-all;
  overflow-wrap: normal;
  text-wrap: balance;
}

.gate-description,
.lede,
.small-copy,
.hero-aside__copy,
.metric-line__copy,
.workflow-step,
.pain-card,
.claim-points,
.package-flow__step,
.creator-profile-card,
.settlement-step__copy,
.support-item,
.team-card__bio,
.faq-item,
.form-note {
  word-break: keep-all;
  overflow-wrap: break-word;
}

.accent-text {
  color: var(--lavender-700);
}

.accent {
  color: var(--lavender-700);
}

.no-break {
  white-space: nowrap;
}

.display,
.lite {
  font-family: var(--font-display);
}

.lede {
  max-width: 62ch;
  margin: 24px 0 0;
  color: var(--ink-700);
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.72;
  word-break: keep-all;
}

.small-copy {
  margin: 0;
  color: var(--ink-600);
  font-size: 14px;
  line-height: 1.7;
}

.claim-region {
  grid-area: claim;
  min-width: 0;
}

.proof-region {
  grid-area: proof;
  min-width: 0;
}

.hero-layout {
  display: grid;
  grid-template-areas: "claim proof";
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, .55fr);
  gap: clamp(48px, 8vw, 128px);
  align-items: end;
}

.split-layout,
.system-layout {
  display: grid;
  grid-template-areas: "claim proof";
  grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr);
  gap: clamp(48px, 7vw, 112px);
  align-items: center;
}

.split-layout--reverse,
.system-layout--reverse {
  grid-template-areas: "proof claim";
  grid-template-columns: minmax(360px, 5fr) minmax(0, 7fr);
}

.faq-layout {
  display: grid;
  grid-template-areas: "claim proof";
  grid-template-columns: .75fr 1.25fr;
  gap: clamp(34px, 6vw, 86px);
  align-items: start;
}

/* ===== 0720 피드백: 중앙 헤드라인 + 하단 요소 스택 =====
   헤드라인만으로 커뮤니케이션 — claim(헤드라인) 중앙, proof(보조 요소) 하단.
   우측 공간은 section-nav 레일만 사용한다. */
.headline-layout {
  display: grid;
  grid-template-areas: "claim" "proof";
  justify-items: center;
  align-content: center;
  row-gap: clamp(22px, 4vh, 44px);
}

.headline-layout--solo {
  grid-template-areas: "claim";
}

.headline-layout .claim-region {
  display: grid;
  justify-items: center;
  text-align: center;
}

.headline-layout .proof-region {
  width: 100%;
  min-width: 0;
}

.headline-layout .display-title,
.headline-layout .section-title {
  max-width: none;
}

/* 헤드라인 내부 두 문단 사이 간격 */
.headline-gap {
  display: block;
  height: .55em;
}

/* "1. 리뷰 영상" 류 소제목 스텝 */
.headline-step {
  display: block;
  margin-bottom: .5em;
  font-size: max(var(--font-size-min), .58em);
  letter-spacing: -.02em;
}

/* 히어로 두 번째 문단 헤드라인 */
.headline-follow {
  margin-top: clamp(18px, 3.2vh, 34px);
}

.action-row--center {
  justify-content: center;
}

/* 0904 개선안: 헤드라인 아래 문제 카드 3분할 (Problem 1) */
.pain-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.pain-card {
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-align: left;
}

.pain-card strong {
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -.02em;
}

.pain-card span {
  color: var(--ink-600);
  font-size: 14.5px;
  line-height: 1.6;
}

/* 0904 개선안: 헤드라인을 받치는 근거 리스트 */
.claim-points {
  /* 가운데 정렬된 헤드라인 아래에서 리스트 자체는 본문 폭에 맞춰 가운데 놓고,
     문장은 왼쪽 정렬로 읽는다. */
  width: fit-content;
  max-width: min(100%, 78ch);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
  text-align: left;
}

/* 정산 트랙처럼 앞선 근거 블록이 있으면 붙지 않게 띄운다 */
.proof-region > .claim-points:not(:first-child) {
  margin-top: clamp(18px, 2.8vh, 32px);
}

.claim-points li {
  position: relative;
  padding-left: 24px;
  color: var(--ink-700);
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.65;
}

.claim-points li::before {
  content: "";
  position: absolute;
  top: .74em;
  left: 0;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--pink-500);
}

.claim-points strong {
  color: var(--ink-900);
  font-weight: 700;
}

.claim-points--stacked strong {
  display: block;
  margin-bottom: 3px;
}

.claim-points--stacked span {
  color: var(--ink-600);
  font-size: max(var(--font-size-min), .86em);
  line-height: 1.6;
}

/* 게이트 서브카피 — 중앙 정렬 변형에서 제목과 한 덩어리로 읽히게 좁힌다 */
.gate-stage--centered .gate-intro {
  gap: clamp(14px, 2.2vh, 24px);
}

.gate-stage--centered .gate-description {
  max-width: 82ch;
}

/* AI 뱃지 + 검수 게이트 (AI AUTO Workflow) */
.workflow-rail .workflow-step {
  position: relative;
}

.workflow-step__ai {
  position: absolute;
  top: -11px;
  left: 16px;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(226, 60, 150, .9), rgba(210, 22, 120, .95));
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--font-size-min);
  font-weight: 800;
  letter-spacing: .09em;
}

.workflow-gate {
  align-self: center;
  justify-self: center;
  display: grid;
  justify-items: center;
  gap: 7px;
  color: var(--pink-500);
}

.flow-arrow__svg {
  width: 48px;
  height: 28px;
  display: block;
  filter: drop-shadow(0 3px 6px rgba(210, 22, 120, .25));
}

.workflow-gate__label {
  padding: 7px 12px;
  border-radius: 11px;
  border: 1px solid rgba(95, 69, 193, .3);
  background: rgba(95, 69, 193, .12);
  color: var(--lavender-700);
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .06em;
  white-space: nowrap;
}

/* 사진 스크롤 스트립 (현지 인프라 · Our Career) */
.photo-strip {
  margin: 0;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  border-radius: 22px;
}

.photo-strip::-webkit-scrollbar {
  display: none;
}

.photo-strip li {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.photo-strip img {
  display: block;
  width: auto;
  height: clamp(150px, 24vh, 224px);
  border-radius: 14px;
  object-fit: cover;
}

/* Our Career — [스틸 스크롤 | 쇼릴] */
.career-media {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
  gap: 16px;
  align-items: stretch;
}

.career-media > * {
  min-width: 0;
  min-height: 0;
}

.career-media .showreel-frame {
  aspect-ratio: auto;
}

/* 게이트(홈) 중앙 정렬 변형 */
.gate-stage--centered .gate-intro {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}

.gate-stage--centered .gate-title {
  max-width: none;
  font-size: clamp(38px, 5vw, 74px);
  line-height: 1.12;
}

.gate-stage--centered .role-grid {
  width: min(100%, 920px);
  margin: 0 auto;
}

.gate-stage--centered .role-card h2 {
  font-size: clamp(17px, 1.7vw, 24px);
  line-height: 1.38;
}

.gate-stage--centered .role-card__arrow {
  padding: 9px 19px;
  border-radius: 999px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .12) 44%, transparent 62%),
    linear-gradient(135deg, rgba(226, 60, 150, .92) 0%, rgba(210, 22, 120, .95) 100%);
  box-shadow: 0 8px 18px rgba(210, 22, 120, .3), inset 0 1px 0 rgba(255, 255, 255, .42);
  color: #fff;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .14em;
}

.text-link--button {
  padding: 13px 40px;
  border: 1px solid rgba(34, 27, 60, .32);
  border-radius: 999px;
}

.text-link--button::after {
  display: none;
}

.hero-aside {
  align-self: end;
  padding: 26px;
}

.hero-aside__label {
  margin: 0 0 20px;
  color: var(--ink-600);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hero-aside__metric {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(46px, 5vw, 72px);
  font-weight: 700;
  letter-spacing: -.06em;
  line-height: 1;
}

.hero-aside__copy {
  margin: 14px 0 0;
  color: var(--ink-700);
  font-size: 14px;
  line-height: 1.65;
}

.action-row {
  margin-top: 32px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.cta {
  position: relative;
  isolation: isolate;
  min-height: 54px;
  padding: 15px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 16px;
  color: var(--ink-950);
  cursor: pointer;
  font-family: var(--font-cta);
  font-size: clamp(16px, 1.2vw, 18px);
  font-weight: 700;
  letter-spacing: -.012em;
  line-height: 1.15;
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.cta::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: 15px;
  background: linear-gradient(112deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 44%);
  pointer-events: none;
  transition: opacity .2s ease;
}

.cta:not(:disabled):hover { transform: translateY(-3px); filter: saturate(108%); }
.cta:not(:disabled):active { transform: translateY(-1px); filter: saturate(102%); }

/* 핑크 글래스 — 글래스 카드처럼 투명도를 준 핑크 배경 + 흰색 ONE Mobile 텍스트.
   흰 텍스트가 AA 대비를 넘도록 진한 마젠타를 쓰되 알파(.84~.9)로 투명감을 남긴다. */
.cta--primary {
  background: linear-gradient(135deg, rgba(226, 60, 150, .84) 0%, rgba(210, 22, 120, .9) 100%);
  color: #fff;
  border-color: rgba(255, 255, 255, .42);
  box-shadow: 0 16px 34px rgba(210, 22, 120, .26), inset 0 1px 0 rgba(255, 255, 255, .4);
  text-shadow: 0 1px 2px rgba(120, 10, 70, .28);
}

.cta--primary:not(:disabled):hover { background: linear-gradient(135deg, rgba(230, 70, 158, .9) 0%, rgba(214, 26, 126, .95) 100%); box-shadow: 0 21px 42px rgba(210, 22, 120, .32), inset 0 1px 0 rgba(255, 255, 255, .45); }
.cta--primary:not(:disabled):active { box-shadow: 0 10px 22px rgba(210, 22, 120, .24), inset 0 1px 0 rgba(255, 255, 255, .38); }

.cta--secondary {
  background: linear-gradient(135deg, rgba(251, 250, 255, .72), rgba(255, 177, 213, .28) 55%, rgba(251, 250, 255, .46));
  box-shadow: 0 14px 30px rgba(89, 62, 142, .14), inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -9px 18px rgba(138, 63, 178, .08);
}

.cta--secondary:not(:disabled):hover { box-shadow: 0 19px 38px rgba(89, 62, 142, .2), inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -9px 18px rgba(138, 63, 178, .08); }

.cta:disabled {
  cursor: not-allowed;
  opacity: .62;
  filter: saturate(65%);
  transform: none;
  box-shadow: 0 8px 20px rgba(89, 62, 142, .1), inset 0 1px 0 rgba(255, 255, 255, .62), inset 0 -8px 16px rgba(138, 63, 178, .08);
}

.cta:disabled::before { opacity: .45; }
.cta--wide { width: 100%; }

.text-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-700);
  font-weight: 800;
}

.text-link::after {
  content: "↗";
  font-size: 18px;
}

.glass-surface {
  border: 0;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, .15);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, .84);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
}

.glass-surface--strong {
  background: rgba(255, 255, 255, .24);
}

.glass-surface--interactive {
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.glass-surface--interactive:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, .22);
}

.section-nav {
  position: fixed;
  z-index: 25;
  right: 22px;
  top: 50%;
  width: 182px;
  display: grid;
  gap: 3px;
  transform: translateY(-50%);
  pointer-events: auto;
}

.section-nav__button {
  min-height: 44px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  grid-template-areas: "number label";
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: rgba(34, 27, 60, .56);
  cursor: pointer;
  text-align: left;
}

.section-nav__button:hover {
  color: var(--ink-950);
  background: rgba(255, 255, 255, .62);
  box-shadow: 0 9px 26px rgba(43, 31, 91, .09);
}

/* 활성 섹션 = CTA 핑크 글래스(핑크 배경 + 흰 글씨) */
.section-nav__button[aria-current="true"] {
  color: #fff;
  background: linear-gradient(135deg, rgba(226, 60, 150, .84) 0%, rgba(210, 22, 120, .9) 100%);
  box-shadow: 0 9px 26px rgba(210, 22, 120, .24);
  text-shadow: 0 1px 2px rgba(120, 10, 70, .26);
}

.section-nav__number {
  grid-area: number;
  font-family: var(--font-display);
  font-size: var(--font-size-min);
  font-weight: 800;
  letter-spacing: .08em;
}

.section-nav__label {
  grid-area: label;
  overflow: hidden;
  font-size: 13px;
  font-weight: 800;
  word-break: keep-all;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 861px) {
  body[data-page="about"] .fp-sec,
  body[data-page="brand"] .fp-sec,
  body[data-page="creator"] .fp-sec {
    padding-inline: max(40px, calc((100vw - var(--content-max)) / 2));
  }
}

body:is([data-page="about"], [data-page="brand"], [data-page="creator"]) .section-nav {
  right: 22px;
  width: 44px;
}

body:is([data-page="about"], [data-page="brand"], [data-page="creator"]) .section-nav__button {
  position: relative;
  width: 44px;
  min-height: 44px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "number";
  place-items: center;
}

body:is([data-page="about"], [data-page="brand"], [data-page="creator"]) .section-nav__label {
  position: absolute;
  top: 50%;
  right: calc(100% + 8px);
  width: max-content;
  max-width: min(260px, calc(100vw - 88px));
  padding: 8px 11px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 9px 26px rgba(43, 31, 91, .09);
  opacity: 0;
  pointer-events: none;
  transform: translate(8px, -50%);
  transition: opacity .18s ease, transform .18s ease;
  white-space: nowrap;
}

body:is([data-page="about"], [data-page="brand"], [data-page="creator"]) .section-nav__button:hover .section-nav__label,
body:is([data-page="about"], [data-page="brand"], [data-page="creator"]) .section-nav__button:focus-visible .section-nav__label {
  opacity: 1;
  transform: translate(0, -50%);
}


.metric-list {
  display: grid;
  gap: 0;
}

.pain-layout {
  display: grid;
  grid-template-areas: "claim proof";
  grid-template-columns: minmax(0, .92fr) minmax(440px, 1.05fr);
  align-items: center;
  gap: clamp(38px, 5vw, 74px);
}

.pain-copy .lede {
  margin-top: 16px;
}

/* 각 문제 행을 개별 글래스 카드 + 전용 인포그래픽으로 */
.metric-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.metric-line {
  padding: 16px 20px;
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  grid-template-areas: "viz value" "viz copy";
  align-items: center;
  column-gap: 20px;
  row-gap: 4px;
}

.metric-line__viz {
  grid-area: viz;
  margin: 0;
  align-self: center;
}

.metric-line__viz svg {
  width: 108px;
  height: auto;
  display: block;
}

.metric-line__value {
  grid-area: value;
  align-self: end;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.04em;
}

.metric-line__copy {
  grid-area: copy;
  align-self: start;
}

.metric-line__copy strong,
.rail-card strong,
.support-item strong {
  display: block;
  margin-bottom: 5px;
  font-size: 15.5px;
}

/* 0723 지침4: 서포트 카드 타이포 확대 */
.support-item strong {
  font-size: 18px;
}

.support-item span {
  font-size: 14.5px;
}

.metric-line__copy span,
.rail-card span,
.support-item span {
  color: var(--ink-600);
  font-size: 13.5px;
  line-height: 1.55;
  word-break: keep-all;
}

.rail-card span {
  word-break: keep-all;
  overflow-wrap: break-word;
}

.workflow-rail {
  margin-top: 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px;
}

.workflow-step {
  position: relative;
  min-height: 210px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.workflow-step:nth-child(1) { z-index: 4; }
.workflow-step:nth-child(2) { z-index: 3; }
.workflow-step:nth-child(3) { z-index: 2; }
.workflow-step:nth-child(4) { z-index: 1; }

.workflow-step__arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: -23px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--pink-500);
  font-size: 21px;
  line-height: 1;
  transform: translateY(-50%);
}

.workflow-step__no {
  color: var(--ink-400);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
}

.workflow-step strong {
  font-family: var(--font-display);
  font-size: 25px;
}

.workflow-step span:last-child {
  max-width: 21ch;
  color: var(--ink-600);
  font-size: 14px;
  line-height: 1.5;
}

.analysis-card {
  padding: clamp(28px, 4vw, 56px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 38px;
  align-items: end;
}

.analysis-scene {
  display: grid;
  grid-template-areas: "claim" "proof";
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.analysis-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 36px;
  align-items: end;
}

.analysis-card__eyebrow {
  color: var(--lavender-700);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.analysis-card h2,
.analysis-intro h2 {
  margin: 14px 0 0;
  max-width: 16ch;
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 68px);
  letter-spacing: -.05em;
  line-height: 1.02;
}

.package-flow {
  position: relative;
  padding: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  overflow: hidden;
}

.package-flow__step {
  min-width: 0;
  min-height: 156px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 19px;
  background: rgba(255, 255, 255, .2);
}

.package-flow__no {
  color: var(--pink-500);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
}

.package-flow__viz {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 12px 0;
}

.package-flow__viz svg {
  width: 86px;
  height: auto;
}

.package-flow__step strong {
  margin-top: auto;
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: -.025em;
  word-break: keep-all;
}

.package-flow__connector {
  align-self: center;
  color: var(--pink-500);
  font-size: 18px;
  font-weight: 800;
}

.fp-sec.is-active .package-flow__step {
  animation: packageFlowPulse 5.6s ease-in-out infinite;
}

.fp-sec.is-active .package-flow__step:nth-of-type(2) { animation-delay: 1.1s; }
.fp-sec.is-active .package-flow__step:nth-of-type(3) { animation-delay: 2.2s; }
.fp-sec.is-active .package-flow__step:nth-of-type(4) { animation-delay: 3.3s; }

@keyframes packageFlowPulse {
  0%, 15%, 100% {
    background: rgba(255, 255, 255, .2);
    box-shadow: none;
    transform: translateY(0);
  }
  6%, 10% {
    background: rgba(255, 255, 255, .36);
    box-shadow: 0 18px 44px rgba(95, 69, 193, .16), inset 0 0 0 1px rgba(239, 91, 167, .28);
    transform: translateY(-4px);
  }
}

.package-layout {
  display: grid;
  grid-template-areas: "claim proof";
  grid-template-columns: minmax(0, .82fr) minmax(560px, 1.18fr);
  gap: clamp(38px, 5vw, 72px);
  align-items: start;
}

/* 카드가 호버로 아래로 펼쳐질 때 좌측 컬럼(제목)의 Y 위치가 흔들리지 않도록
   패키지 섹션 스테이지를 상단에 고정한다(섹션 기본 center 정렬 오버라이드). */
.fp-sec:has(.package-layout) {
  align-items: start;
}
.fp-sec:has(.package-layout) .section-stage {
  margin-top: clamp(12px, 4vh, 46px);
}

.settlement-track {
  margin-top: 38px;
  display: grid;
  grid-template-columns: 30fr auto 40fr auto 30fr;
  gap: 7px;
  align-items: center;
}

.settlement-connector {
  display: grid;
  place-items: center;
  padding: 0 3px;
  color: var(--pink-500);
}

.settlement-step {
  min-height: 176px;
  padding: 23px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 18px;
}

.settlement-step__percent {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 700;
}

.settlement-step__copy {
  color: var(--ink-700);
  font-size: 14px;
  line-height: 1.55;
}

.profile-rail {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
}

.creator-profile-card {
  min-width: 0;
  padding: 10px;
  display: grid;
  grid-template-rows: minmax(104px, 13vh) auto auto;
  gap: 9px;
  overflow: hidden;
}

/* 캠페인 패널을 펼치면 콘텐츠가 늘어난다(번역 시 더 길어짐). KOC 섹션은 상단 고정 +
   auto 높이로 두어 펼침 시 자연스럽게 늘어나고 스크롤로 마지막 행까지 볼 수 있게 한다. */
.fp-sec:has(.profile-rail) {
  align-items: start;
  height: auto;
  min-height: 100svh;
  padding-bottom: 40px;
}
.fp-sec:has(.profile-rail) .section-stage {
  margin-top: clamp(8px, 3vh, 32px);
}

.creator-profile-card__media {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: calc(var(--radius-xl) - 9px);
}

.creator-profile-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}

.creator-profile-card:hover .creator-profile-card__media img {
  transform: scale(1.035);
}

.creator-profile-card__fit {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(23, 19, 41, .74);
  color: white;
  font-size: var(--font-size-min);
  font-weight: 800;
  letter-spacing: .06em;
}

.creator-profile-card__identity {
  padding: 0 7px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
}

.creator-profile-card__identity strong,
.creator-profile-card__identity span {
  display: block;
}

.creator-profile-card__identity strong {
  font-size: 15px;
}

.creator-profile-card__identity div > span {
  margin-top: 3px;
  color: var(--ink-600);
  font-size: var(--font-size-min);
}

.creator-profile-card__region {
  color: var(--pink-500);
  font-size: var(--font-size-min);
  font-weight: 800;
  letter-spacing: .08em;
}

.creator-profile-card__stats {
  margin: 0;
  padding: 11px 7px 5px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(34, 27, 60, .12);
}

.creator-profile-card__stats div {
  min-width: 0;
}

.creator-profile-card__stats dt {
  color: var(--ink-600);
  font-size: var(--font-size-min);
  word-break: keep-all;
}

.creator-profile-card__stats dd {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
}

.profile-disclosure {
  margin: 12px 0 0;
  color: var(--ink-600);
  font-size: var(--font-size-min);
  text-align: right;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* KOC 캠페인 예시 컬랩스 (§5 정액패키지와 동일한 확장 컴포넌트 재사용) */
.campaign-collapse {
  margin-top: 14px;
  padding: 4px 22px;
  display: grid;
  grid-template-rows: auto 0fr;
  transition: grid-template-rows .32s cubic-bezier(.22, 1, .36, 1), background .2s ease;
}

.campaign-collapse__toggle {
  min-height: 44px;
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 0;
  background: transparent;
  color: var(--ink-800, var(--ink-900));
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  text-align: left;
  word-break: keep-all;
}

.campaign-collapse__mark {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(239, 91, 167, .14);
  color: var(--pink-500);
  font-size: 18px;
  transition: transform .22s ease, background .22s ease, color .22s ease;
}

.campaign-collapse__body {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .24s ease, transform .24s ease;
}

.campaign-collapse[data-expanded="true"] {
  grid-template-rows: auto 1fr;
  background: rgba(255, 255, 255, .26);
}

.campaign-collapse[data-expanded="true"] .campaign-collapse__body {
  opacity: 1;
  transform: translateY(0);
}

.campaign-collapse[data-expanded="true"] .campaign-collapse__mark {
  background: var(--pink-500);
  color: #fff;
  transform: rotate(45deg);
}

/* hover 프리뷰는 hover 기기에서만 — 터치에서는 data-expanded만 제어 */
@media (hover: hover) {
  .campaign-collapse:hover,
  .campaign-collapse:focus-within {
    grid-template-rows: auto 1fr;
    background: rgba(255, 255, 255, .26);
  }
  .campaign-collapse:hover .campaign-collapse__body,
  .campaign-collapse:focus-within .campaign-collapse__body {
    opacity: 1;
    transform: translateY(0);
  }
  .campaign-collapse:hover .campaign-collapse__mark {
    background: var(--pink-500);
    color: #fff;
    transform: rotate(45deg);
  }
}

.campaign-list {
  margin: 0;
  padding: 2px 0 12px;
  list-style: none;
  display: grid;
  gap: 9px;
}

.campaign-row {
  padding: 9px 13px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-template-areas: "thumb head" "thumb desc";
  align-items: center;
  column-gap: 14px;
  row-gap: 3px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .32);
  border: 1px solid rgba(255, 255, 255, .5);
}

.campaign-row__thumb {
  grid-area: thumb;
  align-self: center;
}

.campaign-row__thumb svg {
  width: 46px;
  height: auto;
  display: block;
}

.campaign-row__head {
  grid-area: head;
  align-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.campaign-row__head strong {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: -.02em;
  word-break: keep-all;
}

.campaign-badge {
  padding: 4px 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(226, 60, 150, .16), rgba(210, 22, 120, .2));
  color: var(--pink-600, #d9127e);
  font-family: var(--font-display);
  font-size: var(--font-size-min);
  font-weight: 800;
  white-space: nowrap;
}

.campaign-row__desc {
  grid-area: desc;
  align-self: start;
  margin: 0;
  color: var(--ink-600);
  font-size: 13px;
  line-height: 1.55;
  word-break: keep-all;
}

@media (prefers-reduced-motion: reduce) {
  .campaign-collapse,
  .campaign-collapse__body { transition: none; }
}

.faq-list {
  display: grid;
  gap: 0;
}

.accordion {
  padding: 10px 18px;
}

.accordion-item + .accordion-item {
  border-top: 1px solid rgba(34, 27, 60, .13);
}

.accordion-item summary {
  min-height: 66px;
  padding: 15px 2px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  gap: 10px;
  align-items: center;
  list-style: none;
  cursor: pointer;
  font-weight: 800;
}

.accordion-item summary::-webkit-details-marker {
  display: none;
}

.accordion-item__no {
  color: var(--pink-500);
  font-family: var(--font-display);
  font-size: var(--font-size-min);
  letter-spacing: .08em;
}

.accordion-item__indicator {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(95, 69, 193, .1);
  color: var(--lavender-700);
  font-size: 17px;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}

.accordion-item[open] .accordion-item__indicator {
  background: var(--pink-500);
  color: white;
  transform: rotate(45deg);
}

.accordion-item__content {
  overflow: hidden;
}

.accordion-item__content p {
  word-break: keep-all;
}

/* <details> 를 부드럽게 열고 닫는다.
   ::details-content 높이를 auto 로 보간(interpolate-size)해 스무스 애니메이션.
   미지원 브라우저는 즉시 토글로 자연 폴백된다. */
.accordion-item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .34s cubic-bezier(.22, 1, .36, 1), content-visibility .34s allow-discrete;
}

.accordion-item[open]::details-content {
  block-size: auto;
}

@media (prefers-reduced-motion: reduce) {
  .accordion-item::details-content { transition: none; }
}

.accordion-item p {
  margin: 0;
  padding: 0 38px 18px;
  color: var(--ink-700);
  font-size: 14px;
  line-height: 1.7;
}

.form-card {
  padding: 26px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.field {
  display: grid;
  gap: 7px;
}

.field--full {
  grid-column: 1 / -1;
}

.field span {
  color: var(--ink-700);
  font-size: 13px;
  font-weight: 800;
}

.input {
  width: 100%;
  min-height: 46px;
  padding: 12px 13px;
  border: 1px solid rgba(34, 27, 60, .14);
  border-radius: 11px;
  background: rgba(255, 255, 255, .56);
  color: var(--ink-950);
}

textarea.input {
  min-height: 92px;
  resize: vertical;
}

.input:focus {
  border-color: var(--lavender-700);
  outline: 2px solid rgba(95, 69, 193, .16);
}

/* Native select popovers can lose their anchor inside a mobile overflow
   scroller. Keep the real control in the form for semantics and submission,
   while the visible trigger/listbox stays in the same glass surface. */
.select-control {
  position: relative;
  min-width: 0;
}

.select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.select-trigger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  text-align: left;
}

.select-trigger::after {
  content: "";
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  margin: -4px 4px 0 0;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg);
}

.select-control[data-open="true"] .select-trigger {
  border-color: var(--lavender-700);
  outline: 2px solid rgba(95, 69, 193, .16);
}

.select-control[data-open="true"] .select-trigger::after {
  margin-top: 4px;
  transform: rotate(225deg);
}

.select-menu {
  position: absolute;
  z-index: 80;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  display: grid;
  gap: 3px;
  max-height: 220px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(238, 228, 255, .8));
  box-shadow: 0 16px 34px rgba(43, 31, 91, .2), inset 0 1px 0 rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.select-control[data-open-direction="up"] .select-menu {
  top: auto;
  bottom: calc(100% + 6px);
}

.select-option {
  width: 100%;
  min-height: 36px;
  padding: 8px 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-700);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.select-option:hover,
.select-option:focus-visible,
.select-option[aria-selected="true"] {
  color: var(--ink-950);
  background: rgba(255, 255, 255, .68);
}

.select-option[aria-selected="true"] {
  box-shadow: inset 3px 0 0 var(--pink-500);
  font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
  .select-menu { scroll-behavior: auto; }
}

.form-actions {
  margin-top: 16px;
  display: grid;
  gap: 9px;
}

.form-note,
.form-feedback {
  margin: 0;
  color: var(--ink-600);
  font-size: 13px;
  line-height: 1.55;
}

.form-feedback[data-state="error"] {
  color: var(--danger);
}

.form-feedback[data-state="success"] {
  color: var(--success);
}

.form-feedback[data-state="warning"] {
  color: #8a5b18;
}

.honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.creator-terms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.rail-card {
  min-height: 145px;
  padding: 22px;
}

.share-comparison {
  padding: 30px;
}

.share-row {
  display: grid;
  grid-template-columns: 180px 1fr 70px;
  gap: 18px;
  align-items: center;
  padding: 14px 0;
}

.share-row__bar {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(34, 27, 60, .09);
}

.share-row__fill {
  width: 60%;
  height: 100%;
  border-radius: inherit;
  background: var(--pink-500);
}

.share-row--mcn .share-row__fill {
  width: 30%;
  background: var(--ink-400);
}

.support-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.support-item {
  min-height: 236px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
}

.support-item__viz {
  display: block;
  height: 56px;
  margin-bottom: 20px;
}

.support-item__viz svg {
  display: block;
  height: 100%;
  width: auto;
}

.support-item strong {
  margin-top: auto;
}

.mission-statement {
  max-width: 17ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(46px, 6.5vw, 88px);
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: 1.02;
}

.showreel-frame {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  padding: 9px;
}

.showreel-frame video {
  width: 100%;
  height: 100%;
  border-radius: 22px;
  object-fit: cover;
}

.team-rail {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 176px 230px;
  gap: 14px;
}

.team-card {
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(150px, .62fr) minmax(0, 1.38fr);
  grid-template-rows: 1fr;
}

.team-card--lead {
  grid-column: 1 / -1;
  grid-template-columns: 270px minmax(0, 1fr);
}

.team-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 24%;
}

.team-card__body {
  padding: 22px;
}

.team-card__role {
  color: var(--lavender-700);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
}

.team-card__name {
  margin: 8px 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
}

.team-card__bio {
  margin: 0;
  color: var(--ink-600);
  font-size: 13px;
  line-height: 1.62;
}

.gate-scroller {
  min-height: 100svh;
  /* clip 은 hidden 과 달리 스크롤 컨테이너를 만들지 않는다 — hidden 이면 안쪽 sticky 가
     문서가 아니라 이 요소를 기준으로 삼아 영영 고정되지 않는다. */
  overflow-x: clip;
}

.gate-stage {
  width: min(var(--content-max), calc(100vw - 96px));
  min-height: 100svh;
  margin: 0 auto;
  padding: 132px 0 60px;
  display: grid;
  align-content: center;
  gap: 36px;
}

.gate-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, .45fr);
  gap: 60px;
  align-items: end;
}

.gate-title {
  margin: 0;
  max-width: 13ch;
  font-family: var(--font-display);
  font-size: clamp(52px, 7vw, 100px);
  font-weight: 700;
  letter-spacing: -.06em;
  line-height: .96;
}

.gate-description {
  margin: 0;
  color: var(--ink-700);
  font-size: 16px;
  line-height: 1.75;
}

.role-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.role-card {
  min-height: 210px;
  padding: 25px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
}

.role-card--creator {
  grid-template-rows: auto minmax(0, 1fr);
  align-items: stretch;
}

.creator-country-picker {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 5px;
}

.creator-country-button {
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .24);
  cursor: pointer;
}

.creator-country-button[aria-pressed="true"] {
  background: var(--ink-950);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .8);
}

.role-card__cta {
  grid-column: 1 / -1;
  align-self: end;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px;
}

.role-card__no {
  grid-column: 1 / -1;
  align-self: start;
  color: var(--ink-600);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .11em;
}

.role-card h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.05;
}

.role-card__arrow {
  font-size: 34px;
}

.about-row {
  display: flex;
  justify-content: center;
  /* 링크가 셋이 되면 375px 에서 마지막 항목이 글자 단위로 쪼개진다 — flex 기본값이
     콘텐츠 폭 아래로 줄이기 때문이다(2026-09-21 레이아웃 감사 실측: 「개인정보처리방침」
     이 8줄). 줄바꿈을 허용하면 좁을 때만 아래로 내려가고 넓을 때 배치는 그대로다. */
  flex-wrap: wrap;
  gap: .25rem;
}

/* 한 낱말로 읽혀야 하는 링크. 줄 안에서 쪼개지면 레이아웃 감사가 토큰 분리로 잡는다. */
.text-link--nowrap {
  white-space: nowrap;
}

.modal-shell {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100svh - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-xl);
  background: transparent;
  overflow: visible;
}

.modal-shell::backdrop {
  background: rgba(23, 19, 41, .42);
}

.completion-dialog {
  width: min(620px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: var(--radius-xl);
  background: transparent;
  overflow: visible;
}

.completion-dialog::backdrop {
  background: rgba(23, 19, 41, .5);
}

.completion-card {
  padding: clamp(28px, 5vw, 52px);
}

.completion-card__type {
  margin: 0 0 18px;
  color: var(--lavender-700);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.completion-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 54px);
  letter-spacing: -.045em;
  line-height: 1.02;
  outline: none;
}

.completion-card__title:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--pink-500);
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
}

.completion-card__message {
  margin: 20px 0 0;
  color: var(--ink-600);
  font-size: 16px;
  line-height: 1.7;
}

.completion-card__next {
  margin: 28px 0;
  padding: 18px 0;
  border-top: 1px solid rgba(34, 27, 60, .13);
  border-bottom: 1px solid rgba(34, 27, 60, .13);
}

.completion-card__next span {
  color: var(--ink-600);
  font-family: var(--font-display);
  font-size: var(--font-size-min);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.completion-card__next p {
  margin: 8px 0 0;
  line-height: 1.65;
}

.modal-content {
  max-height: calc(100svh - 32px);
  padding: 28px;
  overflow-y: auto;
}

/* 30초 패키지 분석 모달: 글래스 투명도(24%) 때문에 배경이 비쳐 글씨가 안 보임 →
   이 모달만 불투명 배경으로. (0,2,0) 특이도로 공용 glass-surface--strong 및
   ≤860 재정의(rgba .24)까지 이겨 전 뷰포트에서 불투명 유지. */
.modal-shell .modal-content {
  background: #fbfaff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.modal-header {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.modal-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px;
}

.icon-button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(34, 27, 60, .08);
  cursor: pointer;
  font-size: 22px;
}

.analysis-input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px;
}

.analysis-status {
  margin: 18px 0 0;
  color: var(--ink-700);
  font-size: 14px;
  line-height: 1.6;
}

/* 분석 진행 표시 — 서버가 진행률을 주지 않으므로 막대는 90%에 점근하고
   완료는 실제 응답이 왔을 때만 채운다. 다 찬 막대를 세워두고 기다리게 하지 않는다. */
.analysis-progress {
  margin-top: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.analysis-progress__track {
  height: 6px;
  border-radius: 999px;
  background: rgba(34, 27, 60, .1);
  overflow: hidden;
}

.analysis-progress__fill {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(126, 92, 214, .9) 0%, rgba(226, 60, 150, .9) 100%);
  transition: width .35s ease-out;
}

.analysis-progress__time {
  min-width: 5ch;
  color: var(--ink-600);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

@media (prefers-reduced-motion: reduce) {
  .analysis-progress__fill { transition: none; }
}

.analysis-result {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(34, 27, 60, .12);
}

.analysis-result__package {
  margin: 4px 0 10px;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.2vw, 42px);
  font-weight: 700;
}

/* 캠페인까지 붙으면 결과가 뷰포트를 넘는다 — 상담 버튼은 스크롤과 무관하게 잡히도록
   모달 하단에 고정한다. 넘치지 않을 때는 평소와 같은 자리에 그대로 앉는다. */
.analysis-result__actions {
  position: sticky;
  z-index: 1;
  bottom: -28px;
  margin-bottom: -28px;
  padding: 10px 0 28px;
  background: linear-gradient(180deg, rgba(251, 250, 255, 0) 0%, #fbfaff 18%);
}

/* 30초 분석 — 화장품이 아니거나 읽지 못했을 때의 유도 화면.
   추천을 감추되 상담 경로는 남긴다(비화장품 문의도 리드다). */
.analysis-reject {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(34, 27, 60, .12);
}

.analysis-reject__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 700;
  word-break: keep-all;
  overflow-wrap: normal;
}

.analysis-reject__body {
  margin: 10px 0 0;
  color: var(--ink-700);
  font-size: 15px;
  line-height: 1.65;
  word-break: keep-all;
  overflow-wrap: normal;
}

.analysis-reject__link {
  margin-top: 16px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--lavender-700);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* 제품 요약 */
.analysis-product {
  margin-bottom: 16px;
}

.analysis-product__name {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  line-height: 1.25;
  word-break: keep-all;
  overflow-wrap: normal;
}

.analysis-product__meta {
  margin: 6px 0 0;
  color: var(--ink-700);
  font-size: 14px;
  line-height: 1.6;
}

.analysis-features {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.analysis-features li {
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(34, 27, 60, .06);
  color: var(--ink-900);
  font-size: 13px;
  line-height: 1.4;
}

/* 캠페인 제안 카드 — 포맷 배지와 제목은 한 줄에 둔다(세로 공간 절약) */
.analysis-campaigns {
  margin-bottom: 16px;
}

.analysis-campaign-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.analysis-campaign {
  padding: 13px 14px;
  border: 1px solid rgba(34, 27, 60, .1);
  border-radius: 16px;
  background: rgba(255, 255, 255, .6);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: 9px;
  row-gap: 5px;
}

.analysis-campaign__format {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(126, 92, 214, .12);
  color: var(--lavender-700);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  white-space: nowrap;
}

.analysis-campaign__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  word-break: keep-all;
  overflow-wrap: normal;
}

.analysis-campaign__desc,
.analysis-campaign__creator,
.analysis-campaign__why {
  grid-column: 1 / -1;
}

.analysis-campaign__desc {
  margin: 0;
  color: var(--ink-700);
  font-size: 14px;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: normal;
}

.analysis-campaign__creator {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.analysis-campaign__handle {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
}

.analysis-campaign__why {
  margin: 0;
  color: var(--ink-700);
  font-size: 13px;
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: normal;
}

/* 좁은 화면에서는 제목 칸이 배지에 밀려 두세 글자로 쪼개진다 — 배지를 위로 올린다. */
@media (max-width: 520px) {
  .analysis-campaign {
    grid-template-columns: minmax(0, 1fr);
  }

  .analysis-campaign__format {
    justify-self: start;
  }
}

.toast {
  position: fixed;
  z-index: 80;
  left: 50%;
  bottom: 26px;
  width: min(460px, calc(100vw - 32px));
  padding: 16px 18px;
  transform: translateX(-50%);
  border-radius: 14px;
  background: var(--ink-950);
  color: white;
  box-shadow: 0 20px 55px rgba(23, 19, 41, .27);
  font-size: 14px;
  text-align: center;
}

@media (min-width: 861px) and (max-width: 1180px) {
  .site-header {
    left: 24px;
    right: 24px;
  }

  .split-layout,
  .split-layout--reverse,
  .system-layout,
  .system-layout--reverse,
  .package-layout {
    grid-template-areas: "claim" "proof";
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
  }

  .split-layout > .proof-region,
  .system-layout > .proof-region {
    width: min(100%, 760px);
  }

  .mission-statement {
    max-width: 15ch;
    font-size: clamp(48px, 7vw, 68px);
  }

  .section-title,
  .section-title--compact {
    max-width: 21ch;
    font-size: clamp(38px, 5.6vw, 58px);
  }

  .profile-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .creator-profile-card {
    grid-template-rows: 150px auto auto;
  }
}

@media (max-width: 860px) {
  body,
  body[data-page="index"] {
    overflow: auto;
  }

  html[lang="zh-TW"] body[data-page="creator"] .display-title,
  html[lang="id"] body[data-page="creator"] .display-title {
    word-break: normal;
    overflow-wrap: anywhere;
  }

  html[lang="fil"] body[data-page="creator"] .section-title {
    word-break: normal;
    overflow-wrap: anywhere;
  }

  .glass-surface,
  .glass-surface--strong,
  .glass-surface--interactive:hover {
    background: rgba(255, 255, 255, .24);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .cta {
    min-height: 52px;
    padding: 14px 20px;
    font-size: 16px;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .cta--primary {
    background: linear-gradient(135deg, rgba(230, 66, 154, .9) 0%, rgba(212, 24, 124, .95) 100%);
  }

  .cta--secondary {
    background: linear-gradient(135deg, rgba(251, 250, 255, .86), rgba(255, 177, 213, .38) 55%, rgba(251, 250, 255, .66));
  }

  .page-scroller {
    height: auto;
    min-height: 100svh;
    overflow: visible;
    scroll-behavior: auto;
    scroll-snap-type: none;
  }

  .site-header {
    top: 10px;
    left: 12px;
    right: 12px;
    width: auto;
    min-height: 54px;
    height: 54px;
    padding: 6px 7px 6px 10px;
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px;
    border-radius: 17px;
    background: rgba(255, 255, 255, .64);
    box-shadow: 0 14px 40px rgba(51, 35, 110, .11);
    pointer-events: auto;
  }

  .site-header__home,
  .site-header__roles,
  .site-header .language-picker {
    position: static;
    min-height: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  /* 언어 메뉴(absolute)가 토글 바로 아래에 앵커되도록 picker를 positioned로 유지 */
  .site-header .language-picker {
    position: relative;
  }

  /* 소개·브랜드·인플루언서 ≤860: KO 토글이 좌측 클러스터에 있어, 메뉴를
     우측정렬(right:0)하면 좁은 폰에서 좌측으로 넘침 → 오른쪽으로 열리게 */
  body:is([data-page="about"], [data-page="brand"], [data-page="creator"]) .language-menu {
    left: 0;
    right: auto;
  }

  .site-header__roles {
    justify-self: center;
  }

  .brand-link__word {
    width: 76px;
  }

  .site-links {
    gap: 0;
  }

  .site-link {
    padding: 9px 8px;
    font-size: 12px;
  }

  .language-toggle {
    min-width: 40px;
    padding: 7px;
  }

  /* ===== 소개·브랜드·인플루언서: 2-컨테이너 헤더 =====
     pill 1 = [로고 · 페이지 셀렉박스 · 다국어] / pill 2 = [섹션 캐러셀]
     (index 페이지는 원래 단일 헤더 유지) */
  body:is([data-page="about"], [data-page="brand"], [data-page="creator"]) .site-header {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    grid-template-columns: none;
    gap: 8px;
    height: auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }

  /* pill 1 — 로고 · 페이지 셀렉박스 · 다국어 (내용만큼만; 늘리지 않음) */
  body:is([data-page="about"], [data-page="brand"], [data-page="creator"]) .header-cluster {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-width: 0;
    padding: 6px 8px 6px 10px;
    border-radius: 17px;
    background: rgba(255, 255, 255, .64);
    box-shadow: 0 14px 40px rgba(51, 35, 110, .11);
  }

  body:is([data-page="about"], [data-page="brand"], [data-page="creator"]) .header-cluster .site-header__home,
  body:is([data-page="about"], [data-page="brand"], [data-page="creator"]) .header-cluster .language-picker {
    flex: 0 0 auto;
  }

  body:is([data-page="about"], [data-page="brand"], [data-page="creator"]) .site-header__home .site-header__divider,
  body:is([data-page="about"], [data-page="brand"], [data-page="creator"]) .site-header__home .site-link--about,
  body:is([data-page="about"], [data-page="brand"], [data-page="creator"]) .site-header__roles {
    display: none;
  }

  body:is([data-page="about"], [data-page="brand"], [data-page="creator"]) .page-picker {
    display: block;
    flex: 0 0 auto;
  }

  /* pill 2 — 섹션 캐러셀 (별도 컨테이너)
     — 데스크톱 레일 규칙(body:is(brand,creator) .section-nav__*, 특이도 0,2,1)을
     이기려면 같은 특이도 프리픽스 + 나중 소스 순서가 필요하다. */
  body:is([data-page="about"], [data-page="brand"], [data-page="creator"]) .section-nav {
    position: static;
    z-index: auto;
    top: auto;
    right: auto;
    min-width: 0;
    flex: 0 1 auto;
    flex: 1 1 auto;
    width: auto;
    min-width: 96px;
    max-width: min(62%, 340px);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    padding: 6px;
    display: flex;
    align-items: center;
    gap: 3px;
    overflow-x: auto;
    transform: none;
    border-radius: 17px;
    background: rgba(255, 255, 255, .64);
    box-shadow: 0 14px 40px rgba(51, 35, 110, .11);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  body:is([data-page="about"], [data-page="brand"], [data-page="creator"]) .section-nav::-webkit-scrollbar {
    display: none;
  }

  body:is([data-page="about"], [data-page="brand"], [data-page="creator"]) .section-nav::before,
  body:is([data-page="about"], [data-page="brand"], [data-page="creator"]) .section-nav::after {
    content: "";
    flex: 0 0 50%;
  }

  body:is([data-page="about"], [data-page="brand"], [data-page="creator"]) .section-nav__button {
    flex: 0 0 auto;
    width: auto;
    min-height: 40px;
    padding: 6px 10px;
    display: grid;
    grid-template-columns: auto minmax(0, auto);
    grid-template-areas: "number label";
    gap: 6px;
    scroll-snap-align: center;
  }

  body:is([data-page="about"], [data-page="brand"], [data-page="creator"]) .section-nav__number {
    grid-area: number;
  }

  body:is([data-page="about"], [data-page="brand"], [data-page="creator"]) .section-nav__label {
    position: static;
    grid-area: label;
    width: auto;
    max-width: none;
    padding: 0;
    overflow: visible;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    transform: none;
    text-overflow: clip;
    white-space: nowrap;
  }

  body:is([data-page="about"], [data-page="brand"], [data-page="creator"]) .section-nav__button:hover .section-nav__label,
  body:is([data-page="about"], [data-page="brand"], [data-page="creator"]) .section-nav__button:focus-visible .section-nav__label {
    opacity: 1;
    transform: none;
  }

  /* ===== 모바일 콘텐츠 흐름 =====
     짧은 섹션은 화면 중앙에 두되, 긴 콘텐츠를 뷰포트 안에 강제로 가두지 않는다.
     섹션이 화면보다 길어지면 문서가 자연스럽게 늘어나며 한 번의 스크롤로 내용을
     끝까지 읽을 수 있다. */
  body:is([data-page="about"], [data-page="brand"], [data-page="creator"]) {
    /* 데스크톱용 긴 블러는 모바일 가장자리에서 잘린 인상을 준다. 카드가 가진
       글로시 깊이는 유지하되, 화면 안쪽에서 자연스럽게 사라지는 밀도의 그림자로
       바꾼다. */
    --shadow-soft: 0 18px 38px rgba(43, 31, 91, .13);
    overflow-x: hidden;
    overflow-y: hidden;
  }
  body:is([data-page="about"], [data-page="brand"], [data-page="creator"]) .page-scroller {
    height: 100svh;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-snap-type: y mandatory;
  }
  body:is([data-page="about"], [data-page="brand"], [data-page="creator"]) .fp-sec {
    height: auto;
    min-height: 100svh;
    padding: 88px 28px max(72px, calc(44px + env(safe-area-inset-bottom)));
    display: flex;
    align-items: center;
    overflow: visible;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    justify-content: center;
  }
  body:is([data-page="about"], [data-page="brand"], [data-page="creator"]) .fp-sec + .fp-sec {
    padding-top: 88px;
  }
  body:is([data-page="about"], [data-page="brand"], [data-page="creator"]) .section-stage {
    /* 콘텐츠 폭은 유지하고, 카드 그림자만 좌우로 숨 쉴 수 있는 투명 여백을 준다. */
    width: calc(100% + 24px);
    max-block-size: none;
    min-block-size: 0;
    margin: 0 -12px;
    padding: 0 12px;
    overflow: visible;
    overscroll-behavior-y: auto;
  }

  .hero-layout,
  .split-layout,
  .split-layout--reverse,
  .system-layout,
  .system-layout--reverse,
  .faq-layout,
  .pain-layout,
  .package-layout {
    grid-template-areas: "claim" "proof";
  }

  .hero-layout,
  .split-layout,
  .split-layout--reverse,
  .system-layout,
  .system-layout--reverse,
  .faq-layout,
  .pain-layout,
  .package-layout,
  .gate-intro {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .display-title,
  .section-title,
  .mission-statement {
    max-width: 100%;
  }

  .headline-layout {
    row-gap: 22px;
  }

  .career-media {
    grid-template-columns: 1fr;
  }

  .photo-strip img {
    height: clamp(118px, 24vw, 170px);
  }

  .workflow-gate .flow-arrow__svg {
    transform: rotate(90deg);
  }

  .display-title {
    font-size: clamp(44px, 14vw, 66px);
  }

  .section-title,
  .section-title--compact {
    font-size: clamp(35px, 10vw, 52px);
  }

  .hero-aside {
    padding: 22px;
  }

  .support-item {
    min-height: 172px;
  }

  .support-item__viz {
    height: 46px;
    margin-bottom: 14px;
  }

  .workflow-rail,
  .team-rail,
  .role-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }

  /* ===== 개선3: 카드가 여러 개인 섹션은 2열 그리드로 한 뷰포트에 담기 ===== */
  .creator-terms,
  .support-grid,
  .pain-grid,
  .package-flow,
  .metric-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .pain-card {
    padding: 16px 15px;
    gap: 6px;
  }

  .pain-card strong {
    font-size: 15.5px;
  }

  .pain-card span {
    font-size: var(--font-size-min);
    line-height: 1.5;
  }

  .claim-points {
    gap: 9px;
  }

  .claim-points li {
    padding-left: 18px;
    font-size: 14.5px;
    line-height: 1.55;
  }

  .claim-points li::before {
    width: 9px;
    top: .68em;
  }

  /* 모바일 정산은 세 장을 한 줄의 지급 타임라인으로 비교한다. 카드 폭이 좁아도
     비율과 조건을 동시에 읽을 수 있게 연결 화살표 대신 균일한 3열 리듬을 쓴다. */
  .settlement-track {
    --settlement-gap: clamp(7px, 2vw, 14px);
    --settlement-connector-offset: clamp(1.17px, .3334vw, 2.34px);
    position: relative;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--settlement-gap);
    align-items: stretch;
    margin-top: 28px;
  }

  .settlement-connector {
    position: absolute;
    z-index: 2;
    /* 지급 비율과 조건 사이의 여백에 놓아 카드 상단선·본문과 겹치지 않게 한다. */
    top: 41%;
    display: grid;
    width: clamp(28px, 5vw, 48px);
    height: 28px;
    padding: 0;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--pink-500);
    pointer-events: none;
    transform: translate(-50%, -50%);
  }

  .settlement-connector:nth-of-type(1) {
    left: calc(33.3333% - var(--settlement-connector-offset));
  }

  .settlement-connector:nth-of-type(2) {
    left: calc(66.6667% + var(--settlement-connector-offset));
  }

  .settlement-connector .flow-arrow__svg {
    width: 100%;
    height: auto;
  }

  .settlement-step {
    min-width: 0;
    min-height: 142px;
    padding: 15px 12px 14px;
    border-radius: 16px;
  }

  .settlement-step__percent {
    font-size: clamp(28px, 8vw, 42px);
    line-height: 1;
    letter-spacing: -.055em;
  }

  .settlement-step__copy {
    font-size: var(--font-size-min);
    line-height: 1.45;
  }

  /* 홀수 카드(3개)는 마지막을 전체 폭으로 */
  .support-grid > :last-child:nth-child(odd),
  .pain-grid > :last-child:nth-child(odd),
  .metric-list > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* 2열 그리드에서는 스텝 사이 연결선/화살표를 숨긴다 */
  .package-flow__connector {
    display: none;
  }

  .workflow-rail {
    border: 0;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: minmax(128px, auto) auto minmax(128px, auto);
    column-gap: 8px;
    row-gap: 10px;
    align-items: stretch;
  }

  .workflow-rail .workflow-step {
    min-height: 128px;
    padding: 17px 14px;
  }

  .workflow-rail .workflow-step strong {
    font-size: clamp(20px, 5.4vw, 24px);
    line-height: 1.08;
  }

  .workflow-rail .workflow-step span:last-child {
    font-size: var(--font-size-min);
    line-height: 1.45;
  }

  /* 모바일 AI 워크플로: 1 → 2, 2 ↓ 3, 3 → 4의 지그재그 경로.
     가운데 열은 양 옆 카드 사이의 검수 게이트 전용 레일로 남긴다. */
  .workflow-rail > .workflow-step:nth-child(1) { grid-column: 1; grid-row: 1; }
  .workflow-rail > .workflow-gate:nth-child(2) { grid-column: 2; grid-row: 1; }
  .workflow-rail > .workflow-step:nth-child(3) { grid-column: 3; grid-row: 1; }
  .workflow-rail > .workflow-gate:nth-child(4) { grid-column: 3; grid-row: 2; }
  .workflow-rail > .workflow-step:nth-child(5) { grid-column: 3; grid-row: 3; }
  .workflow-rail > .workflow-gate:nth-child(6) { grid-column: 2; grid-row: 3; }
  .workflow-rail > .workflow-step:nth-child(7) { grid-column: 1; grid-row: 3; }

  .workflow-rail > .workflow-gate .flow-arrow__svg { transform: none; }
  .workflow-rail > .workflow-gate:nth-child(4) .flow-arrow__svg { transform: rotate(90deg); }
  .workflow-rail > .workflow-gate:nth-child(6) .flow-arrow__svg { transform: scaleX(-1); }

  .workflow-rail > .workflow-gate:nth-child(4) {
    min-height: 46px;
  }

  .workflow-step__arrow {
    top: auto;
    right: 50%;
    bottom: -24px;
    transform: translateX(50%) rotate(90deg);
  }

  .analysis-card,
  .analysis-intro {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .fp-sec.is-active .package-flow__step {
    animation: none;
  }

  .pain-infographic {
    min-height: 340px;
  }

  .pain-infographic img {
    min-height: 320px;
  }

  .profile-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .creator-profile-card {
    grid-template-rows: 210px auto auto;
  }

  .share-row {
    grid-template-columns: 1fr 56px;
  }

  .share-row__bar {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .team-card {
    min-height: 0;
    grid-template-columns: 120px minmax(0, 1fr);
    grid-template-rows: minmax(210px, auto);
  }

  .team-card--lead {
    grid-column: auto;
    grid-template-columns: 120px minmax(0, 1fr);
  }

  .gate-stage {
    width: calc(100vw - 36px);
    padding: 96px 0 32px;
    gap: 20px;
  }

  .gate-intro {
    gap: 20px;
  }

  .gate-title {
    font-size: clamp(46px, 14vw, 66px);
  }

  .role-card {
    min-height: 160px;
  }
}

@media (max-width: 560px) {
  .creator-country-picker {
    gap: 4px;
  }

  .creator-country-button {
    width: 32px;
    height: 32px;
  }

  .site-link[data-compact-hide] {
    display: none;
  }

  .brand-link__word {
    display: none;
  }

  .site-header__divider {
    margin-left: 7px;
  }

  .fp-sec {
    padding-left: 18px;
    padding-right: 18px;
  }


  .profile-rail {
    grid-template-columns: 1fr;
  }

  .creator-profile-card {
    grid-template-rows: 330px auto auto;
  }

  .pain-infographic figcaption {
    left: 20px;
    right: 20px;
    bottom: 18px;
  }

  .analysis-input-row {
    grid-template-columns: 1fr;
  }

  .modal-content {
    padding: 22px;
  }
}

/* 헤드라인 스태거는 뷰포트를 가리지 않는다. 이 요소들은 섹션 스테이지의 마지막 자식이
   아니어서, 진입 오프셋이 .section-stage 의 스크롤 높이를 늘리지 않는다. */
@media (prefers-reduced-motion: no-preference) {
  .scene-motion-ready .fp-sec .section-kicker,
  .scene-motion-ready .fp-sec .display-title,
  .scene-motion-ready .fp-sec .section-title,
  .scene-motion-ready .fp-sec .mission-statement {
    opacity: .18;
    transform: translateY(18px);
    transition-property: opacity, transform;
    transition-duration: 360ms, 420ms;
    transition-timing-function: ease, cubic-bezier(.2, .7, .2, 1);
  }

  .scene-motion-ready .fp-sec .section-kicker {
    transition-delay: 0ms;
  }

  .scene-motion-ready .fp-sec .display-title,
  .scene-motion-ready .fp-sec .section-title,
  .scene-motion-ready .fp-sec .mission-statement {
    transition-delay: 70ms;
  }

  .scene-motion-ready .fp-sec.is-active .section-kicker,
  .scene-motion-ready .fp-sec.is-active .display-title,
  .scene-motion-ready .fp-sec.is-active .section-title,
  .scene-motion-ready .fp-sec.is-active .mission-statement {
    opacity: 1;
    transform: none;
  }
}

/* proof 블록은 데스크톱에만 둔다. 모바일에서 이 블록은 스테이지의 마지막 자식이라
   진입 오프셋이 .section-stage 의 scrollHeight 를 24px 늘린다(감사의 "package content
   expands with its section" 위반). 더 중요하게는, 뷰포트보다 큰 모바일 섹션은
   intersectionRatio 경쟁에서 짧은 섹션을 이기지 못해 is-active 를 못 받는 경우가 있고,
   그러면 가격 카드 전체가 opacity .18 로 고착된다. 헤드라인은 스테이지 상단이라
   두 문제 모두에서 자유롭다. */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  .scene-motion-ready .fp-sec .proof-region {
    opacity: .18;
    transform: translateY(24px);
    transition-property: opacity, transform;
    transition-duration: 360ms, 420ms;
    transition-timing-function: ease, cubic-bezier(.2, .7, .2, 1);
    transition-delay: 150ms;
  }

  .scene-motion-ready .fp-sec.is-active .proof-region {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }

  body:is([data-page="about"], [data-page="brand"], [data-page="creator"]) .section-nav {
    scroll-behavior: auto;
  }

  body:is([data-page="about"], [data-page="brand"], [data-page="creator"]) .section-nav__label {
    transition: none;
  }

  .cta,
  .cta:not(:disabled):hover,
  .cta:not(:disabled):active {
    transform: none;
  }

  .cta,
  .cta::before {
    transition: none;
  }
}

/* ===== About 팀 선택 카드(선택 시 확대 연출) — codex/landing-fluid-ambient b2f918b 복원 ===== */
/* 선택 인터랙션 JS(initTeamProfilePicker)는 이미 landing.js 에 존재 */
.team-profile__summary,
.team-profile__detail {
  word-break: keep-all;
  overflow-wrap: break-word;
}

.team-selector {
  position: relative;
  height: clamp(360px, 54vh, 460px);
  min-height: 0;
  margin-top: 18px;
  padding: 10px;
  overflow: hidden;
}

.team-selector__tabs {
  position: absolute;
  z-index: 3;
  top: 22px;
  right: 26px;
  display: flex;
  align-items: start;
  gap: 10px;
}

/* Brand KOC 인플루언서 셀렉터: 탭 4개 + 진행 캠페인 카드 (About 3탭 레이아웃은 불변) */
body[data-page="brand"] .team-selector__tabs { gap: 8px; }
body[data-page="brand"] .team-selector__tab { width: 54px; }
body[data-page="brand"] .team-profile__heading { padding-right: 250px; }

/* Brand KOC: 초상 영역 확대 + 캠페인 3행 (1440×900 섹션 정합성 안에서 최대 높이) */
body[data-page="brand"] .team-selector { height: clamp(420px, 55vh, 512px); }
body[data-page="brand"] .team-profile { grid-template-columns: minmax(240px, 1fr) minmax(0, 1.62fr); }
body[data-page="brand"] .team-profile__summary li { font-size: var(--font-size-min); padding: 5px 9px; }

/* 넓은 뷰포트에서는 인플루언서 초상을 더 크게 (콘텐츠엔 세로 여유가 있음) */
@media (min-width: 1181px) {
  body[data-page="brand"] .team-profile { grid-template-columns: minmax(320px, 1fr) minmax(0, 1.25fr); }
}

/* 진행 캠페인 예시: 항목당 1행 = [이미지][설명 + 성과 뱃지] */
.team-profile__detail .koc-campaigns {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.team-profile__detail .koc-campaign-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding: 7px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .32);
}

.koc-campaign-row__img {
  width: 62px;
  height: 62px;
  border-radius: 9px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(33, 25, 62, .16);
}

.koc-campaign-row__body {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.koc-campaign-row__desc {
  margin: 0;
  color: var(--ink-700);
  font-size: var(--font-size-min);
  line-height: 1.45;
  word-break: keep-all;
}

.koc-campaign-row__desc strong {
  color: var(--ink-950);
  font-family: var(--font-display);
  font-size: 12.5px;
  letter-spacing: -.01em;
}

.koc-campaign-row__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* 성과 뱃지 = CTA 핑크 글래스(핑크 배경 + 흰 글씨) */
.perf-badge {
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(226, 60, 150, .84) 0%, rgba(210, 22, 120, .9) 100%);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--font-size-min);
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(120, 10, 70, .25);
}

.team-selector__tab {
  width: 58px;
  padding: 0;
  display: grid;
  gap: 5px;
  justify-items: center;
  border: 0;
  background: transparent;
  color: var(--ink-700);
  cursor: pointer;
  font-size: var(--font-size-min);
  font-weight: 800;
  line-height: 1.1;
}

.team-selector__tab img {
  width: 44px;
  height: 44px;
  border: 2px solid rgba(255, 255, 255, .78);
  border-radius: 50%;
  object-fit: cover;
  object-position: center 28%;
  box-shadow: 0 5px 15px rgba(33, 25, 62, .12);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.team-selector__tab[aria-selected="true"] img {
  border-color: var(--pink-500);
  box-shadow: 0 0 0 3px rgba(255, 91, 173, .18), 0 8px 18px rgba(33, 25, 62, .2);
  transform: translateY(-2px);
}

.team-selector__tab:focus-visible { outline: 2px solid var(--pink-500); outline-offset: 5px; border-radius: 8px; }

.team-profile {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(230px, .78fr) minmax(0, 2.22fr);
  overflow: hidden;
  border-radius: inherit;
}

.team-profile[hidden] { display: none; }

/* About 팀 카드는 데스크톱에서도 초상과 정보 영역의 경계를 명시적으로 유지한다. */
body[data-page="about"] .team-profile {
  grid-template-columns: minmax(230px, .78fr) minmax(0, 2.22fr);
  grid-template-rows: auto minmax(0, 1fr);
}

body[data-page="about"] .team-profile__portrait {
  grid-column: 1;
  grid-row: 1 / -1;
}

body[data-page="about"] .team-profile__identity {
  grid-column: 2;
  grid-row: 1;
  min-height: 0;
  padding: 26px 28px 12px;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
}

body[data-page="about"] .team-profile > .team-profile__detail {
  grid-column: 2;
  grid-row: 2;
  margin: 0 28px 20px;
}

.team-profile__portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
}

.team-profile__content {
  min-width: 0;
  min-height: 0;
  padding: 26px 28px 20px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
}

.team-profile__heading {
  min-height: 54px;
  padding-right: 204px;
}

.team-profile__role,
.team-profile__detail-kicker {
  color: var(--lavender-700);
  font-family: var(--font-display);
  font-size: var(--font-size-min);
  font-weight: 800;
  letter-spacing: .11em;
}

.team-profile__heading h3 {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: 27px;
  letter-spacing: -.035em;
  line-height: 1;
}

.team-profile__summary {
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 14px;
  background: rgba(255, 255, 255, .14);
}

.team-profile__summary p {
  margin: 0;
  color: var(--ink-700);
  font-size: 12px;
  line-height: 1.6;
  word-break: keep-all;
}

.team-profile__summary ul {
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
}

.team-profile__summary li {
  padding: 5px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .25);
  color: var(--ink-700);
  font-family: var(--font-display);
  font-size: var(--font-size-min);
  font-weight: 800;
  letter-spacing: .025em;
}

.team-profile__detail {
  min-height: 0;
  padding: 14px 16px;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, .68);
  border-radius: 14px;
  background: rgba(241, 238, 255, .22);
}

.team-profile__detail-kicker { margin: 0 0 9px; }

.team-profile__detail > div { word-break: keep-all; overflow-wrap: normal; }

.team-profile__detail ul {
  margin: 0;
  padding-left: 17px;
  display: grid;
  gap: 6px;
}

.team-profile__detail li {
  color: var(--ink-700);
  font-size: var(--font-size-min);
  line-height: 1.5;
}

@media (min-width: 861px) and (max-height: 800px) {
  .team-selector {
    margin-top: 12px;
    height: clamp(340px, 54vh, 410px);
  }

  .team-profile__content {
    padding: 20px 22px 16px;
    gap: 9px;
  }

  .team-selector__tabs {
    top: 17px;
    right: 20px;
  }

  .team-profile__heading {
    min-height: 42px;
    padding-right: 184px;
  }

  .team-profile__heading h3 {
    font-size: 24px;
  }

  .team-profile__summary,
  .team-profile__detail {
    padding: 11px 13px;
  }

  .team-profile__summary p,
  .team-profile__detail li {
    font-size: var(--font-size-min);
  }
}

@media (max-width: 860px) {
  .team-selector {
    height: 480px;
    margin-top: 16px;
    padding: 8px;
  }

  .team-selector__tabs {
    top: 16px;
    right: 14px;
    gap: 7px;
  }

  .team-selector__tab {
    width: 50px;
    gap: 3px;
    border-radius: 8px;
    font-size: var(--font-size-min);
  }

  .team-selector__tab img {
    width: 34px;
    height: 34px;
    box-shadow: 0 3px 10px rgba(33, 25, 62, .12);
  }

  .team-profile {
    grid-template-columns: 200px minmax(0, 1fr);
  }

  .team-profile__portrait {
    border-radius: 15px 0 0 15px;
    object-position: center 45%;
  }

  .team-profile__content {
    min-height: 0;
    padding: 16px 13px 14px;
    overflow: hidden;
    border-radius: 0 15px 15px 0;
    gap: 8px;
  }

  .team-profile__heading {
    min-height: 46px;
    padding-right: 122px;
    overflow: hidden;
  }

  .team-profile__heading h3 {
    margin-top: 4px;
    font-size: 22px;
    white-space: nowrap;
  }

  .team-profile__role { font-size: var(--font-size-min); letter-spacing: .08em; }

  /* Brand KOC(탭 4개): 탭 줄이 콘텐츠와 겹치지 않게 헤딩을 탭 아래로 */
  body[data-page="brand"] .team-selector { height: 544px; }
  body[data-page="brand"] .team-selector__tabs { top: 14px; right: 12px; gap: 6px; }
  body[data-page="brand"] .team-selector__tab { width: 46px; }
  body[data-page="brand"] .team-profile__heading {
    min-height: 0;
    padding-right: 0;
    padding-top: 60px;
  }
  /* 스탯 뱃지: 모바일에서도 한 줄에 여러 개 (grid 단일열 → flex wrap) */
  body[data-page="brand"] .team-profile__summary ul { display: flex; flex-wrap: wrap; gap: 5px; }
  body[data-page="brand"] .team-profile__summary li { font-size: var(--font-size-min); padding: 4px 7px; }
  /* 캠페인 3행: 모바일 축소 — 이미지 상단 정렬 + 설명 2줄 클램프 */
  body[data-page="brand"] .team-profile__detail .koc-campaign-row { grid-template-columns: 46px minmax(0, 1fr); gap: 8px; padding: 6px; align-items: start; }
  body[data-page="brand"] .team-profile__detail .koc-campaign-row__img { width: 46px; height: 46px; }
  body[data-page="brand"] .koc-campaign-row__body { gap: 5px; }
  body[data-page="brand"] .koc-campaign-row__desc { font-size: var(--font-size-min); line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  body[data-page="brand"] .koc-campaign-row__desc strong { font-size: var(--font-size-min); }
  body[data-page="brand"] .perf-badge { font-size: var(--font-size-min); padding: 2px 6px; }
  /* 모바일은 데스크톱 초상 확대 그리드를 쓰지 않고 소형 초상 2열 유지 */
  body[data-page="brand"] .team-profile { grid-template-columns: 112px minmax(0, 1fr); }

  .team-profile__summary,
  .team-profile__detail {
    min-width: 0;
    padding: 11px 12px;
    border-radius: 12px;
  }

  .team-profile__summary {
    overflow: hidden;
    background: rgba(255, 255, 255, .16);
  }

  .team-profile__summary p { font-size: var(--font-size-min); line-height: 1.55; }

  .team-profile__summary ul {
    margin-top: 7px;
    display: grid;
    gap: 4px;
  }

  .team-profile__summary li {
    width: fit-content;
    max-width: 100%;
    padding: 4px 5px;
    font-size: var(--font-size-min);
  }

  .team-profile__detail {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(241, 238, 255, .3);
    scrollbar-width: thin;
    scrollbar-color: rgba(64, 51, 112, .26) transparent;
  }

  .team-profile__detail::-webkit-scrollbar { width: 5px; }
  .team-profile__detail::-webkit-scrollbar-thumb { background: rgba(64, 51, 112, .26); border-radius: 999px; }
  .team-profile__detail::-webkit-scrollbar-track { background: transparent; }

  .team-profile__detail-kicker {
    margin-bottom: 7px;
    font-size: var(--font-size-min);
  }

  .team-profile__detail ul {
    margin-bottom: 2px;
    padding-left: 14px;
    gap: 5px;
  }

  .team-profile__detail li {
    padding-bottom: 2px;
    font-size: var(--font-size-min);
    line-height: 1.47;
  }

  /* About: 사진 → 소개 → 상세 경력의 1열 3행. 선택 탭은 사진의 우상단에 겹친다. */
  body[data-page="about"] .team-selector {
    height: clamp(680px, 182vw, 740px);
  }

  body[data-page="about"] .team-profile {
    grid-template-columns: 1fr;
    grid-template-rows: clamp(190px, 55vw, 260px) auto minmax(120px, 1fr);
  }

  body[data-page="about"] .team-profile__portrait {
    grid-column: 1;
    grid-row: 1;
    border-radius: 15px 15px 0 0;
    object-position: center 38%;
  }

  body[data-page="about"] .team-profile__identity {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    padding: 16px 13px 10px;
    overflow: visible;
    border-radius: 0;
    grid-template-rows: auto auto;
    gap: 8px;
  }

  body[data-page="about"] .team-profile__identity .team-profile__heading {
    min-height: 0;
    padding-right: 0;
    overflow: visible;
  }

  body[data-page="about"] .team-profile > .team-profile__detail {
    grid-column: 1;
    grid-row: 3;
    margin: 0 13px 14px;
  }

  /* 사진과 구체 배경 위에서도 인물 이름을 즉시 읽을 수 있도록, About의 모바일
     선택 라벨은 얇은 림 라이트를 가진 작은 글로시 네임플레이트로 분리한다. */
  body[data-page="about"] .team-selector__tab span {
    min-width: 52px;
    min-height: 24px;
    padding: 3px 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .82), rgba(244, 235, 255, .52));
    box-shadow:
      0 3px 9px rgba(47, 29, 89, .13),
      inset 0 1px 1px rgba(255, 255, 255, .8),
      inset 0 -1px 1px rgba(105, 77, 160, .12);
    color: var(--ink-900);
    font-size: var(--font-size-min);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.035em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .78);
    white-space: nowrap;
  }

  body[data-page="about"] .team-selector__tab[aria-selected="true"] span {
    border-color: rgba(239, 91, 167, .68);
    background: linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(255, 183, 220, .72));
    box-shadow:
      0 4px 12px rgba(205, 33, 122, .2),
      inset 0 1px 1px rgba(255, 255, 255, .86),
      inset 0 -1px 1px rgba(195, 38, 125, .16);
    color: var(--ink-950);
    font-weight: 900;
  }

  /* 번역된 영문·동남아권 이름은 가로 폭이 달라 서로 닿기 쉬우므로, 초상 우측의
     세로 레일로 전환한다. 바깥쪽에는 초상을, 안쪽에는 기존 글로시 네임칩을 둔다. */
  html:not([lang="ko"]) body[data-page="about"] .team-selector__tabs {
    top: 12px;
    right: 10px;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
  }

  html:not([lang="ko"]) body[data-page="about"] .team-selector__tab {
    width: auto;
    grid-template-columns: max-content 30px;
    grid-template-rows: 30px;
    column-gap: 6px;
    align-items: center;
    justify-items: center;
  }

  html:not([lang="ko"]) body[data-page="about"] .team-selector__tab img {
    grid-column: 2;
    grid-row: 1;
    width: 30px;
    height: 30px;
  }

  html:not([lang="ko"]) body[data-page="about"] .team-selector__tab span {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    min-height: 30px;
    padding: 4px 7px;
  }

  .team-selector__tab:focus-visible { outline-offset: 3px; }
  .team-selector__tab span { white-space: nowrap; }
  .team-selector__tab[aria-selected="true"] img { transform: translateY(-1px); }
}

/* ===== 베트남 촬영현장 갤러리 캐러셀 (큰 메인 + 썸네일 스트립 + 좌우 화살표) ===== */
.field-layout {
  display: grid;
  grid-template-areas: "claim proof";
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.12fr);
  gap: clamp(26px, 3.5vw, 60px);
  align-items: center;
}

.field-layout .claim-region { align-self: center; }

.field-gallery {
  display: grid;
  gap: 14px;
}

@media (max-width: 860px) {
  .field-layout { grid-template-areas: "claim" "proof"; grid-template-columns: 1fr; gap: clamp(18px, 3vh, 28px); }
}

.field-gallery__stage {
  position: relative;
  /* min-width:100% beats the max-width that aspect-ratio transfers from max-height,
     so the stage fills its cell instead of shrinking (and left-aligning) when the
     height cap bites at wide/short viewports. Aspect shape is kept when uncapped. */
  min-width: 100%;
  aspect-ratio: 16 / 10;
  max-height: min(46vh, 430px);
  padding: 8px;
  overflow: hidden;
}

.field-gallery__main {
  width: 100%;
  height: 100%;
  border-radius: calc(var(--radius-xl) - 8px);
  object-fit: cover;
  object-position: center;
  transition: opacity .3s ease;
}

.field-gallery__caption {
  position: absolute;
  left: 22px;
  bottom: 20px;
  right: 22px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(23, 19, 41, .52);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  pointer-events: none;
}

.field-gallery__caption strong {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: -.01em;
}

.field-gallery__caption span {
  font-size: 12.5px;
  color: rgba(255, 255, 255, .82);
  word-break: keep-all;
}

.field-gallery__nav {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.field-gallery__arrow {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 50%;
  background: rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--ink-900);
  cursor: pointer;
  font-size: 17px;
  transition: transform .18s ease, background .18s ease;
}

.field-gallery__arrow:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .5); }
.field-gallery__arrow:active { transform: scale(.94); }

.field-gallery__track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 4px;
}
.field-gallery__track::-webkit-scrollbar { display: none; }

.field-gallery__thumb {
  flex: 0 0 auto;
  width: clamp(72px, 12vw, 116px);
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 12px;
  overflow: hidden;
  background: none;
  cursor: pointer;
  opacity: .62;
  transition: opacity .2s ease, border-color .2s ease, transform .2s ease;
}

.field-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.field-gallery__thumb:hover { opacity: .85; }

.field-gallery__thumb[aria-current="true"] {
  opacity: 1;
  border-color: var(--pink-500);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(239, 91, 167, .28);
}

.field-gallery__thumb:focus-visible { outline: 2px solid var(--pink-500); outline-offset: 2px; }

@media (max-width: 860px) {
  .field-gallery__stage { aspect-ratio: 3 / 2; }
  .field-gallery__arrow { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .field-gallery__main, .field-gallery__thumb, .field-gallery__arrow { transition: none; }
  .field-gallery__track { scroll-behavior: auto; }
}

/* ===== 채널톡형 우측하단 플로팅 상담 위젯 ===== */
.consult-widget {
  position: fixed;
  right: clamp(16px, 3vw, 30px);
  bottom: clamp(16px, 3vh, 28px);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  pointer-events: none;
}

.consult-fab {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 54px;
  padding: 0 22px 0 18px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #e23c96 0%, #d21678 100%);
  color: #fff;
  font-family: var(--font-cta);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  cursor: pointer;
  box-shadow: 0 16px 38px rgba(210, 22, 120, .38);
  transition: transform .2s ease, box-shadow .2s ease;
}

.consult-fab:hover { transform: translateY(-2px); box-shadow: 0 20px 46px rgba(210, 22, 120, .46); }
.consult-fab:active { transform: scale(.97); }
.consult-fab:focus-visible { outline: 3px solid rgba(239, 91, 167, .5); outline-offset: 3px; }

.consult-fab__icon { width: 22px; height: 22px; flex: 0 0 auto; }
.consult-fab__label { white-space: nowrap; word-break: keep-all; }

/* 30초 분석 FAB 은 상담 FAB 과 나란히 선다. 둘 다 .consult-fab 이라 모양은 그대로 상속받고,
   패널이 열리면(상담 FAB 이 X 로 바뀌면) 분석 FAB 은 접는다 — X 옆에 라벨 없는 알약이
   남으면 무슨 버튼인지 읽히지 않는다. */
.consult-widget__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}

.consult-widget.is-open .consult-fab--analysis { display: none; }

.consult-widget.is-open .consult-fab__icon--chat { display: none; }
.consult-fab__icon--close { display: none; }
.consult-widget.is-open .consult-fab__icon--close { display: block; }
.consult-widget.is-open .consult-fab__label { display: none; }
.consult-widget.is-open .consult-fab { padding: 0 16px; }

.consult-widget__panel {
  pointer-events: auto;
  width: min(360px, calc(100vw - 32px));
  max-height: min(72vh, 620px);
  overflow-y: auto;
  border-radius: var(--radius-lg);
  padding: 20px 20px 18px;
  background: rgba(251, 250, 255, .92);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 30px 80px rgba(43, 31, 91, .28);
  transform-origin: bottom right;
  opacity: 0;
  transform: translateY(12px) scale(.97);
  transition: opacity .22s ease, transform .22s ease;
}

.consult-widget.is-open .consult-widget__panel { opacity: 1; transform: translateY(0) scale(1); }

.consult-widget__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.consult-widget__title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-950);
  letter-spacing: -.01em;
}

.consult-widget__sub {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--ink-600);
  word-break: keep-all;
}

.consult-widget__close {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(43, 31, 91, .08);
  color: var(--ink-700);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease;
}
.consult-widget__close:hover { background: rgba(43, 31, 91, .16); }

.consult-widget__form { display: grid; gap: 11px; }
.consult-widget__form .field { display: grid; gap: 5px; }
.consult-widget__form .field > span { font-size: 12.5px; font-weight: 600; color: var(--ink-700); }
.consult-widget__form .input { min-height: 44px; }
.consult-widget__form textarea.input { min-height: 62px; resize: vertical; }

.consult-widget__submit {
  margin-top: 3px;
  min-height: 50px;
  border: 0;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #e23c96 0%, #d21678 100%);
  color: #fff;
  font-family: var(--font-cta);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.consult-widget__submit:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(210, 22, 120, .34); }
.consult-widget__submit:disabled { opacity: .6; cursor: default; }

.consult-widget__note {
  min-height: 1em;
  font-size: 12px;
  color: var(--ink-600);
  word-break: keep-all;
}
.consult-widget__note[data-state="error"] { color: #d21678; }
.consult-widget__note[data-state="success"] { color: #1f9d63; }
.consult-widget__note[data-state="warning"] { color: #c67a12; }

@media (max-width: 560px) {
  .consult-widget { left: 0; right: 0; bottom: 0; align-items: stretch; gap: 0; }
  .consult-fab { align-self: flex-end; margin: 0 16px 16px; }
  /* 위 여백은 FAB 하나만 있을 때(크리에이터 페이지) 기준이다. 두 개가 한 줄에 서면
     버튼마다 좌우 16px 이 붙어 사이가 42px 로 벌어진다 — 여백을 줄로 올린다. */
  .consult-widget__actions { align-self: flex-end; margin: 0 16px 16px; }
  .consult-widget__actions .consult-fab { margin: 0; }
  .consult-widget.is-open .consult-fab { display: none; }
  .consult-widget__panel {
    width: 100%;
    max-height: 82vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform-origin: bottom center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .consult-fab, .consult-widget__panel, .consult-widget__submit, .consult-widget__close { transition: none; }
}

/* ===== 0720 피드백: 헤드라인 외 작은 글씨 행간·자간 축소 ===== */
.small-copy,
.accordion-item p,
.settlement-step__copy,
.support-item span,
.workflow-step span:last-child,
.form-note,
.team-profile__summary p,
.team-profile__detail li {
  line-height: 1.5;
  letter-spacing: -.01em;
}

.accordion-item p {
  padding-bottom: 14px;
}

/* 미션 아코디언 등 faq-item 클래스가 없는 아코디언도 한글 어절 단위로만 줄바꿈 */
.accordion-item summary,
.accordion-item p {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ===== 0720 피드백: About 팀 소개 PC 가독성 확대 (본문 서체 통일 유지) ===== */
.team-profile__summary p {
  font-size: 14px;
}

.team-profile__detail li {
  font-size: 13.5px;
  line-height: 1.55;
}

.team-profile__summary li {
  font-size: var(--font-size-min);
}

/* Mission 아코디언 — 중앙 스택에서 읽기 좋은 폭 */
.mission-accordion {
  width: min(100%, 880px);
  margin: 0 auto;
}

/* ===== 포토 스트립 라이트박스 + 커리어 미디어 라벨 ===== */
.photo-strip__thumb {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 14px;
  cursor: zoom-in;
}

.photo-strip__thumb:hover img {
  opacity: .88;
}

.photo-strip__thumb:focus-visible {
  outline: 2px solid var(--pink-500);
  outline-offset: 3px;
}

.career-media__item {
  margin: 0;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 9px;
}

.career-media__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--ink-600);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.career-media__label::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--pink-500);
}

.lightbox {
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.lightbox::backdrop {
  background: rgba(23, 19, 41, .74);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.lightbox__figure {
  margin: 0;
  display: grid;
  gap: 12px;
  justify-items: center;
}

.lightbox__img {
  display: block;
  max-width: min(90vw, 1240px);
  max-height: 80vh;
  width: auto;
  height: auto;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}

.lightbox__caption {
  color: rgba(255, 255, 255, .92);
  font-size: 13px;
  letter-spacing: -.01em;
  word-break: keep-all;
}

.lightbox__close,
.lightbox__nav {
  position: fixed;
  z-index: 2;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  line-height: 1;
  cursor: pointer;
}

.lightbox__close {
  top: 18px;
  right: 22px;
  width: 44px;
  height: 44px;
  font-size: 26px;
}

.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  font-size: 30px;
}

.lightbox__nav--prev { left: 22px; }
.lightbox__nav--next { right: 22px; }

.lightbox__close:hover,
.lightbox__nav:hover {
  background: rgba(255, 255, 255, .32);
}

.lightbox__close:focus-visible,
.lightbox__nav:focus-visible {
  outline: 2px solid var(--pink-500);
  outline-offset: 3px;
}

@media (max-width: 860px) {
  .lightbox__img { max-width: 94vw; max-height: 72vh; }
  .lightbox__nav { width: 40px; height: 40px; }
  .lightbox__nav--prev { left: 10px; }
  .lightbox__nav--next { right: 10px; }
  .lightbox__close { top: 10px; right: 10px; }
}

/* ===== P3: Liquid Glass — macOS Tahoe 방향 =====
   원리(레퍼런스 킷): gloss = blur(산란)가 아니라 정반사 — 림 라이트 + sheen.
   계약 불변: glass 배경 알파(.15/.22/.24), CTA 그라디언트·타이포, 모바일 blur 예산. */

/* 유리 표면 — 4방향 림(위가 가장 밝게) + 유리 두께 링 + 마젠타 틴트 섀도 + 대각 sheen */
.glass-surface {
  position: relative;
  isolation: isolate;
  box-shadow:
    0 14px 40px rgba(140, 90, 180, .13),
    0 4px 14px rgba(226, 60, 150, .07),
    inset 0 0 0 1px rgba(255, 255, 255, .5),
    inset 0 1px 1px rgba(255, 255, 255, .62),
    inset 0 -1px 1px rgba(150, 120, 180, .12);
}

.glass-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, .06) 30%, transparent 60%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* 데스크톱: 유리 뒤 파스텔 구체가 비쳐 보이도록 채도 굴절 강화 (모바일은 blur 예산상 제외)
   블러는 옅게(9px) — 타호의 '중앙은 맑은 유리' 문법: frost를 줄이고 굴절·림이 유리감을 담당 */
@media (min-width: 861px) {
  .glass-surface {
    -webkit-backdrop-filter: blur(9px) saturate(170%);
    backdrop-filter: blur(9px) saturate(170%);
  }

  /* 헤더 필 → 타호 플로팅 유리 툴바 */
  .site-header__home,
  .site-header__roles,
  .site-header .language-picker {
    border-radius: 999px;
    background: rgba(255, 252, 254, .5);
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    backdrop-filter: blur(16px) saturate(170%);
    box-shadow:
      0 14px 45px rgba(51, 35, 110, .1),
      inset 0 0 0 1px rgba(255, 255, 255, .45),
      inset 0 1px 1px rgba(255, 255, 255, .7);
  }
}

/* CTA — 상단에 빛이 맺힌 캔디 캡 (그라디언트·섀도 계약은 불변, 리플렉션 레이어만 강화) */
.cta::before {
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .14) 44%, transparent 62%),
    linear-gradient(112deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, 0) 46%);
}

/* ===== P3.1: 광원 반응 굴절 — 유리 위 빛맺힘(glint)이 광원을 따라 이동 =====
   PC: 마우스 포인터 = 해 위치 · 터치: 스크롤 진행도에 따라 해가 하늘을 지나듯 이동.
   JS(initGlassLight)가 --glint-x/y/o만 갱신 — 입력 이벤트 구동(상시 루프 없음), reduced-motion 제외. */
@media (prefers-reduced-motion: no-preference) {
  .glass-surface::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    opacity: var(--glint-o, 0);
    transition: opacity .45s ease;
    background:
      radial-gradient(circle clamp(70px, 9vw, 120px) at var(--glint-x, 50%) var(--glint-y, -40%), rgba(255, 255, 255, .6), rgba(255, 255, 255, .18) 55%, transparent 78%),
      radial-gradient(circle clamp(200px, 32vw, 360px) at var(--glint-x, 50%) var(--glint-y, -40%), rgba(255, 255, 255, .55), rgba(255, 255, 255, .15) 48%, transparent 76%);
    mix-blend-mode: screen;
  }
}

/* ===== FAQ 타이틀-아코디언 여백 ===== */
.faq-layout .claim-region .accordion {
  margin-top: clamp(20px, 3.2vh, 38px);
}

/* ===== 상담 섹션 도달 시 플로팅 상담 버튼 페이드아웃 (패널이 열려 있으면 유지) ===== */
.consult-widget {
  transition: opacity .35s ease, visibility 0s linear 0s;
}

.consult-widget--dock:not(.is-open) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s ease, visibility 0s linear .35s;
}

@media (prefers-reduced-motion: reduce) {
  .consult-widget,
  .consult-widget--dock:not(.is-open) {
    transition: none;
  }
}

/* CTA 버튼 광원 반응 — 포인터/스크롤 광원이 버튼 위를 지나며 빛맺힘 */
@media (prefers-reduced-motion: no-preference) {
  .cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    opacity: calc(var(--glint-o, 0) * .9);
    transition: opacity .45s ease;
    background: radial-gradient(circle 130px at var(--glint-x, 50%) var(--glint-y, -60%), rgba(255, 255, 255, .55), rgba(255, 255, 255, .14) 52%, transparent 76%);
    mix-blend-mode: screen;
  }

  .cta:disabled::after {
    opacity: 0;
  }
}

/* 액티브 섹션 네비 호버 라벨 — 버튼과 동일한 액티베이션 배경 (흰 글자/흰 필 겹침 방지) */
@media (min-width: 861px) {
  body:is([data-page="about"], [data-page="brand"], [data-page="creator"]) .section-nav__button[aria-current="true"] .section-nav__label {
    background: linear-gradient(135deg, rgba(226, 60, 150, .84) 0%, rgba(210, 22, 120, .9) 100%);
    box-shadow: 0 9px 26px rgba(210, 22, 120, .24);
  }
}

/* ===== 폼 필드 필수/선택 배지 ===== */
.field__label {
  display: flex;
  align-items: center;
  gap: 7px;
}

.field__tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(34, 27, 60, .07);
  color: var(--ink-600);
  font-size: var(--font-size-min);
  font-weight: 700;
  font-style: normal;
  letter-spacing: .02em;
  white-space: nowrap;
}

.field__tag--req {
  background: rgba(226, 60, 150, .13);
  color: #c2166f;
}

/* zh-TW: keep-all이 한자 연속열을 통짜 어절로 묶어 좁은 폭에서 넘침 — 표의문자 사이 줄바꿈 허용 */
html[lang="zh-TW"] .section-title,
html[lang="zh-TW"] .gate-title {
  word-break: normal;
  overflow-wrap: anywhere;
}

/* ===== PC 타이포그래피·호버 피드백 튜닝 =====
   데스크톱에서는 헤드라인이 섹션을 압도하지 않도록 기존 스케일의 80%를 사용하고,
   줄 사이에는 숨 쉴 여유를 조금 더 둔다. 모바일의 뷰포트 맞춤 규칙은 그대로 유지한다. */
@media (min-width: 861px) {
  .display-title {
    font-size: clamp(38px, 5.12vw, 75px);
    line-height: 1.06;
  }

  .section-title {
    font-size: clamp(30px, 3.68vw, 53px);
    line-height: 1.10;
  }

  .section-title--compact {
    font-size: clamp(27px, 3.2vw, 46px);
  }

  .mission-statement {
    font-size: clamp(37px, 5.2vw, 70px);
    line-height: 1.08;
  }

  .gate-stage--centered .gate-title {
    font-size: clamp(30px, 4vw, 59px);
    line-height: 1.12;
  }

  .gate-title {
    font-size: clamp(42px, 5.6vw, 80px);
    line-height: 1.04;
  }

  .analysis-card h2,
  .analysis-intro h2 {
    font-size: clamp(30px, 4vw, 54px);
    line-height: 1.08;
  }
}

/* PC 포인터 환경에서는 글로시 유리 표면의 반사광과 핑크 림 라이트를 한 단계 강화한다. */
@media (min-width: 861px) and (hover: hover) and (pointer: fine) {
  .glass-surface--interactive:hover {
    transform: translateY(-7px);
    background: rgba(255, 255, 255, .24);
    box-shadow:
      0 26px 58px rgba(140, 90, 180, .24),
      0 0 0 1px rgba(255, 255, 255, .58),
      0 0 34px rgba(239, 91, 167, .24),
      inset 0 0 0 1px rgba(255, 255, 255, .72),
      inset 0 1px 1px rgba(255, 255, 255, .78);
  }

  .cta:not(:disabled):hover {
    box-shadow:
      0 26px 52px rgba(210, 22, 120, .44),
      0 0 26px rgba(239, 91, 167, .34),
      inset 0 1px 0 rgba(255, 255, 255, .58);
  }

  .section-nav__button:hover {
    box-shadow: 0 10px 30px rgba(43, 31, 91, .14), 0 0 18px rgba(239, 91, 167, .24);
  }

  .field-gallery__thumb:hover {
    opacity: 1;
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(239, 91, 167, .36);
  }
}

/* 페이지 전환(@view-transition navigation: auto)은 제거됨.
   문서 간 전환을 켜면 도착 문서의 렌더링이 영구 정지한다 — rAF가 한 번도 발화하지
   않고 프레임 자체가 생성되지 않아, 실제 Chrome 150 창에서도 페이지가 얼어붙는다.
   ::view-transition-* 애니메이션 제거, view-transition-name 제거, reduced-motion
   어느 것으로도 회피되지 않았고 오직 opt-in 제거만이 렌더링을 복구했다.
   전환 연출이 다시 필요하면 initRouteWashTransition 의 JS 경로로 되살릴 것. */

/* ===== Motion POC: glass-origin route, press ripple, elastic type ===== */
.route-wash {
  --route-wash-x: 50%;
  --route-wash-y: 50%;
  position: fixed;
  z-index: 80;
  left: var(--route-wash-x);
  top: var(--route-wash-y);
  width: clamp(30px, 4vmin, 54px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .92), rgba(255, 255, 255, .34) 24%, rgba(220, 203, 255, .74) 55%, rgba(166, 128, 224, .84));
  box-shadow: 0 0 56px rgba(207, 126, 211, .48), inset 0 1px 1px rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(7px) saturate(145%);
  backdrop-filter: blur(7px) saturate(145%);
}

.route-wash--departing.is-revealing {
  animation: linkona-route-wash-depart 440ms cubic-bezier(.2, .82, .22, 1) both;
}

.route-wash--arriving.is-revealing {
  animation: linkona-route-wash-arrive 300ms cubic-bezier(.2, .82, .22, 1) both;
}

.is-route-expanding {
  transform: translateY(-2px) scale(1.035) !important;
}

@keyframes linkona-route-wash-depart {
  0% {
    opacity: .74;
    transform: translate(-50%, -50%) scale(0);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(75);
  }
}

@keyframes linkona-route-wash-arrive {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(75);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(80);
  }
}

.has-press-ripple {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.press-ripple {
  --ripple-x: 50%;
  --ripple-y: 50%;
  position: absolute;
  z-index: 0;
  left: var(--ripple-x);
  top: var(--ripple-y);
  width: max(180%, 15rem);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.08);
  background: radial-gradient(circle, rgba(255, 255, 255, .58) 0 2%, rgba(255, 217, 242, .32) 26%, rgba(210, 154, 240, .16) 48%, rgba(255, 255, 255, 0) 70%);
  mix-blend-mode: screen;
}

.has-press-ripple > :not(.press-ripple) {
  position: relative;
  z-index: 1;
}

.has-press-ripple.is-rippling .press-ripple {
  animation: linkona-press-ripple 560ms cubic-bezier(.16, .84, .25, 1) both;
}

@keyframes linkona-press-ripple {
  0% {
    opacity: .86;
    transform: translate(-50%, -50%) scale(.08);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
}

.elastic-headline__word {
  display: inline-block;
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  .elastic-headline .elastic-headline__word {
    opacity: 0;
    transform: translateY(.48em) scaleY(.76);
    transform-origin: 50% 100%;
  }

  .elastic-headline.is-elastic-visible .elastic-headline__word {
    animation: linkona-elastic-word 680ms cubic-bezier(.2, 1.28, .36, 1) both;
    animation-delay: min(calc(var(--elastic-index) * 38ms), 420ms);
  }
}

@keyframes linkona-elastic-word {
  0% {
    opacity: 0;
    transform: translateY(.48em) scaleY(.76);
  }
  62% {
    opacity: 1;
    transform: translateY(-.045em) scaleY(1.045);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

/* Creator page: the current section fades one real local-production image in as a
   restrained page backdrop. */
.creator-scene-backdrop {
  display: none;
}

@media (min-width: 1181px) and (prefers-reduced-motion: no-preference) {
  .creator-scene-backdrop {
    position: fixed;
    z-index: 0;
    inset: 0;
    display: block;
    overflow: hidden;
    pointer-events: none;
  }

  .creator-scene-backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(249, 247, 255, .93) 0%, rgba(249, 247, 255, .71) 56%, rgba(249, 247, 255, .49) 100%);
  }

  .creator-scene-backdrop__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    filter: saturate(.72) contrast(.92);
    transition: opacity 760ms cubic-bezier(.22, 1, .36, 1);
  }


  body[data-creator-scene-step="0"] .creator-scene-backdrop__image--1,
  body[data-creator-scene-step="1"] .creator-scene-backdrop__image--2,
  body[data-creator-scene-step="2"] .creator-scene-backdrop__image--3,
  body[data-creator-scene-step="3"] .creator-scene-backdrop__image--4,
  body[data-creator-scene-step="4"] .creator-scene-backdrop__image--5,
  body[data-creator-scene-step="5"] .creator-scene-backdrop__image--6 {
    opacity: .17;
  }
}

@media (prefers-reduced-motion: reduce) {
  .route-wash,
  .press-ripple,
  .elastic-headline__word {
    animation: none !important;
    transition: none !important;
  }
}

/* ---- 법적 고지 문서 (개인정보처리방침 등) ----
   본문 가독성만 책임지는 최소 스타일이다. 섹션 스테이지 문법(grid-template-areas·
   section-stage)을 쓰지 않는 이유는 그 문법이 레이아웃 감사의 대상이고, 이 페이지는
   스크롤되는 긴 글이라 같은 규칙으로 잴 대상이 아니기 때문이다. */
.legal-doc {
  max-width: 760px;
  margin: 0 auto 4rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: 24px;
  color: var(--ink-900);
  line-height: 1.75;
}

.legal-doc__title {
  font-family: var(--font-cta);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  margin: 0 0 .75rem;
}

.legal-doc__meta {
  color: var(--ink-600);
  font-size: .9rem;
  margin: 0 0 .35rem;
}

.legal-doc h2 {
  font-size: 1.05rem;
  margin: 2.25rem 0 .6rem;
  color: var(--ink-950);
}

.legal-doc p,
.legal-doc li {
  color: var(--ink-700);
  font-size: .95rem;
}

.legal-doc ul {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
}

.legal-doc li { margin-bottom: .4rem; }

.legal-doc__back {
  margin-top: 2.5rem;
}

/* ---- 최신 인사이트 ------------------------------------------------------ */
/* 글이 없거나 조회가 실패하면 컨테이너가 비고, 비면 자리를 차지하지 않는다 —
   게이트는 한 화면에 담겨야 하므로 이 블록이 높이를 만들면 안 된다. */
[data-insight-feed]:empty { display: none; }
[data-insight-feed][hidden] { display: none; }

.insight-strip {
  margin: 18px auto 0;
  max-width: 560px;
  width: 100%;
  text-align: left;
}
.insight-strip__title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .62;
}
.insight-compact { list-style: none; margin: 0; padding: 0; }
.insight-compact__item + .insight-compact__item { margin-top: 2px; }
.insight-compact__link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0;
  text-decoration: none;
  color: inherit;
  font-size: 13.5px;
  line-height: 1.45;
}
.insight-compact__link:hover .insight-compact__title { text-decoration: underline; }
.insight-compact__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.insight-compact__date { flex: 0 0 auto; font-size: 12px; opacity: .55; font-variant-numeric: tabular-nums; }

/* brand 페이지의 카드 그리드 */
/* auto-fill 은 빈 트랙을 남기므로 글이 하나여도 카드가 섹션 전체로 늘어나지 않는다.
   최대 폭을 함께 고정하는 이유는 넓은 화면에서 트랙이 과하게 벌어지면 썸네일
   높이(1200:630)가 같이 커져 본문이 화면 밖으로 밀리기 때문이다 — 2026-09-23 실측. */
.insight-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 288px));
  justify-content: start;
  gap: 14px;
  width: 100%;
}
.insight-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
}
.insight-card__thumb {
  display: block;
  aspect-ratio: 1200 / 630;
  overflow: hidden;
  background: rgba(127, 127, 127, .12);
}
.insight-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.insight-card__thumb--empty { display: flex; align-items: center; justify-content: center; }
.insight-card__fallback {
  font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; opacity: .5;
  padding: 0 12px; text-align: center;
}
.insight-card__body { display: block; padding: 12px 14px 14px; }
.insight-card__series {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; opacity: .6; margin-bottom: 4px;
}
.insight-card__title {
  display: block; font-size: 15px; font-weight: 700; line-height: 1.4; margin-bottom: 6px;
}
/* 요약은 카드 높이를 균일하게 두 줄로 자른다 — 길이가 제각각이면 그리드가 들쭉날쭉해진다. */
.insight-card__summary {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.6;
  opacity: .72;
  margin-bottom: 8px;
}
.insight-card__date { display: block; font-size: 12px; opacity: .5; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .insight-cards { grid-template-columns: 1fr; }
  .insight-strip { margin-top: 14px; }
}