/* 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,
.price-card__detail,
.price-card__features,
.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;
}

/* 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);
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.price-card {
  container-type: inline-size;
  min-height: 264px;
  padding: 30px;
  display: grid;
  grid-template-rows: auto minmax(92px, auto) auto 0fr;
  gap: 11px;
  overflow: hidden;
  transition: grid-template-rows .28s ease, transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.price-card__label {
  color: var(--ink-600);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
}

.price-card__value {
  margin: 0;
  align-self: end;
  font-family: var(--font-display);
  font-size: clamp(34px, 24cqi, 66px);
  font-weight: 700;
  letter-spacing: -.06em;
  word-break: keep-all;
  overflow-wrap: normal;
  text-wrap: balance;
  white-space: normal;
}

html[lang="ko"] .price-card__value {
  white-space: nowrap;
}

.price-card__detail {
  margin: 0;
  color: var(--ink-600);
  font-size: 14px;
  line-height: 1.65;
}

.price-card__toggle {
  min-height: 42px;
  padding: 11px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 0;
  border-top: 1px solid rgba(34, 27, 60, .14);
  background: transparent;
  color: var(--ink-700);
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
}

.price-card__toggle-mark {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(239, 91, 167, .14);
  color: var(--pink-500);
  font-size: 17px;
  transition: transform .2s ease, background .2s ease;
}

.price-card__features {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s ease;
}

.price-card__features ul {
  margin: 6px 0 0;
  padding-left: 17px;
  color: var(--ink-700);
  font-size: 13px;
  line-height: 1.7;
}

.price-card__features li::marker {
  color: var(--pink-500);
}

.price-card[data-expanded="true"] {
  grid-template-rows: auto minmax(92px, auto) auto minmax(118px, 1fr);
  background: rgba(255, 255, 255, .22);
}

.price-card[data-expanded="true"] .price-card__features {
  opacity: 1;
  transform: translateY(0);
}

.price-card[data-expanded="true"] .price-card__toggle-mark {
  background: var(--pink-500);
  color: white;
  transform: rotate(45deg);
}

.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;
}

.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;
}

.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,
  .price-grid,
  .team-rail,
  .role-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }

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

  /* 모바일 정산은 세 장을 한 줄의 지급 타임라인으로 비교한다. 카드 폭이 좁아도
     비율과 조건을 동시에 읽을 수 있게 연결 화살표 대신 균일한 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),
  .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;
  }

  /* 정액 패키지: 한 줄에 한 패키지만 두어 겹침 없이 읽고, 기본 선택인 Basic에서
     Premium으로 바꾸면 단일 선택 아코디언으로 상세를 교체한다. */
  .fp-sec--packages .section-stage {
    overflow: visible;
    padding-bottom: 0;
  }

  .fp-sec--packages .headline-layout {
    height: 100%;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
    row-gap: 16px;
  }

  .fp-sec--packages .claim-region {
    align-self: start;
  }

  .fp-sec--packages .section-kicker {
    margin-bottom: 8px;
  }

  .fp-sec--packages .section-title {
    font-size: clamp(30px, 8.6vw, 38px);
    line-height: 1.08;
  }

  .fp-sec--packages .price-grid {
    /* Safari는 확장 카드의 minmax(0, 1fr) 내용을 grid auto row 높이에
       늦게 반영할 수 있다. 블록 흐름을 쓰면 앞 카드의 실제 높이가 다음
       카드의 위치를 항상 결정해 아코디언 전환 중에도 겹치지 않는다. */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .fp-sec--packages .price-card {
    /* Grid의 1fr 트랙은 Safari에서 접힌 카드에도 남은 높이를 배분한다.
       모바일은 단순한 수직 흐름으로만 구성해 각 상태의 실제 콘텐츠 높이를 쓴다. */
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    width: 100%;
    min-height: 116px;
    padding: 13px 15px 12px;
    gap: 0;
  }

  .fp-sec--packages .price-card__label {
    font-size: var(--font-size-min);
  }

  .fp-sec--packages .price-card__value {
    align-self: auto;
    margin-top: 4px;
    font-size: clamp(22px, 7vw, 30px);
    letter-spacing: -.055em;
  }

  .fp-sec--packages .price-card__toggle {
    min-height: 34px;
    margin-top: 6px;
    padding-top: 8px;
    gap: 6px;
    font-size: var(--font-size-min);
    line-height: 1.25;
  }

  .fp-sec--packages .price-card__toggle-mark {
    width: 20px;
    height: 20px;
    font-size: 15px;
  }

  .fp-sec--packages .price-card__features {
    flex: 0 0 0;
    block-size: 0;
    visibility: hidden;
  }

  .fp-sec--packages .price-card[data-expanded="true"] {
    min-height: 0;
    padding: 14px 16px 15px;
  }

  .fp-sec--packages .price-card[data-expanded="true"] .price-card__features {
    flex-basis: auto;
    block-size: auto;
    margin-top: 7px;
    visibility: visible;
  }

  .fp-sec--packages .price-card[data-expanded="true"] .price-card__value {
    align-self: start;
    font-size: clamp(32px, 9vw, 40px);
  }

  .fp-sec--packages .price-card[data-expanded="true"] .price-card__features ul {
    columns: 2;
    column-gap: 16px;
    margin-top: 2px;
    padding-left: 16px;
    font-size: var(--font-size-min);
    line-height: 1.42;
  }

  .fp-sec--packages .price-card[data-expanded="true"] .price-card__features li {
    break-inside: avoid;
    margin-bottom: 3px;
  }


  .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; }

.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; }
  .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,
.price-card__features,
.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;
  }
}

/* ===== 히어로: 팝아트 입술 그리드 (index 인트로) =====
   레퍼런스는 한 입술 형태를 리컬러한 구조라, 입술은 <symbol> 하나를 <use> 로 16번 참조하고
   칸 색만 CSS 변수로 바꾼다. index.html 은 인라인 style 이 계약으로 금지돼 있어 칸별 색/지연은
   전부 [data-tile] 규칙으로 둔다. 파동 지연·큐브 반지름·뒷면 오프셋은 그리드 축이 뷰포트에
   따라 뒤집히므로 런타임이 실측해 채운다. */
.hero-lips {
  /* 회전은 칸마다 위치 순서대로 좁은 창을 통과한다. 전부 동시에 돌리면 매 프레임 17장을
     다시 합성해야 해서 32ms 초과 프레임이 20% → 37% 로 뛴다(실측). 계단식으로 돌리면
     임의 시점에 실제로 변형 중인 칸이 절반 이하고, 끝난 칸과 시작 전 칸은 변형값이 그대로여서
     재래스터화가 일어나지 않는다. */
  /* 좌상단 첫 큐브는 스크롤 즉시 돌기 시작하되, 각 큐브의 회전 창을 길게 잡아
     후반에 일괄적으로 쏟아지지 않고 대각선으로 천천히 전파된다. */
  /* 페이지가 밀려 내려가는 대신 그리드가 제자리에서 흩어지고 그 뒤의 게이트가 드러난다.
     그래서 히어로는 문서 높이를 차지하지 않는 뷰포트 고정 레이어다. */
  position: fixed;
  inset: 0;
  z-index: 6;
  /* 흩어진 타일이 문서 가로 스크롤을 만들지 않도록 차단 */
  overflow: clip;
  /* 인트로 동안에는 히어로가 클릭을 받는다. 뒤의 게이트는 아직 드러나지도 않았는데
     그 위치를 누르면 보이지 않는 버튼이 눌리기 때문이다. 어디를 누르든 리빌을 끝낸다. */
  cursor: pointer;
}

/* 인트로가 끝나면 비켜선다 */
.hero-lips[data-hero-done="true"] {
  pointer-events: none;
  cursor: auto;
}

/* 인트로 구간에서는 헤더도 감춘다 — 팝아트 그리드가 화면을 온전히 차지해야 하고,
   헤더 pill 이 첫 행 타일을 가린다. 게이트보다 조금 늦게 들어와 그리드 → 게이트 →
   헤더 순으로 읽히게 한다.
   index 전용이어야 한다: 다른 페이지 헤더는 인트로 런타임의 opacity 보간 대상이 아니다. */
body[data-page="index"] .site-header {
  /* 런타임은 이 opacity만 직접 보간한다. 상위 진행도 변수를 상속시키지 않아 다른
     헤더 자손의 스타일을 프레임마다 재계산하지 않는다. */
  opacity: 0;
}

/* 리빌 스코프: hold 는 리빌 구간 동안 게이트를 제자리에 고정하고,
   spacer 가 그 구간의 스크롤 거리를 만든다. spacer 를 다 지나면 hold 가 풀려
   게이트 아래쪽 내용이 평범하게 스크롤된다. */
.hero-reveal {
  position: relative;
}

.hero-reveal__hold {
  position: sticky;
  top: 0;
  /* 게이트는 회전시키지 않는다. 예전에는 게이트 자신이 큐브와 같은 축으로 돌아 들어왔는데,
     그러면 조각 마스크가 칸 위치와 어긋나고 3D 회전이 글리프 rect 에 서브픽셀 차이를 만들어
     감사의 한국어 토큰 분리 검사를 오판시킨다. 회전은 큐브만 한다. */
  /* 실제 2섹션은 큐브들이 모두 90°에 선 뒤에만 페이드한다. 이전에는 시작 직후부터
     배경에 깔려 버튼·헤더가 큐브 조각과 서로 다른 위치로 겹쳤다. */
  opacity: 0;
  /* 조각 합체는 앞의 큐브들이 런타임 scale 보간으로 직접 틈을 메우고, 실제 게이트는
     마지막에 그 아래서 교대한다. 같은 격자를 full-viewport mask 로 한 번 더 계산하면
     매 프레임 레이어화가 반복돼 연출만 끊기므로 게이트에는 동적 마스크를 두지 않는다. */
  -webkit-mask-image: none;
  mask-image: none;
}

/* 리빌이 시작되기 전에는 변형을 걸지 않는다. 3D 회전은 글리프 client rect 에 서브픽셀
   차이를 만들어, 한 토큰의 줄 위치가 453.3/452.2 처럼 갈리고 감사의 한국어 토큰 분리
   검사가 줄바꿈으로 오판한다. 게이트가 실제로 보이기 시작하는 0.28 이후에만 걸며,
   그 지점의 opacity 는 아직 0 이라 각도가 튀어도 보이지 않는다. */
.hero-reveal__hold > * {
  transform-origin: 50% 50%;
}



.hero-reveal__spacer {
  /* 연출 전체를 볼 수 있을 만큼 스크롤 거리를 준다. 112svh 에서는 휠 몇 번에 끝나
     물결→회전→합쳐짐 세 박자가 지나가 버렸다. */
  height: 190svh;
  pointer-events: none;
}

/* 칸은 정사각형이다 — 그래야 두께를 칸 크기와 같게 줬을 때 진짜 정육면체가 된다.
   1fr 로 나누면 칸이 뷰포트 비율을 따라가 138×144(1440) · 184×172(1920) 처럼 어긋난다(실측).
   피치를 긴 축 기준(max)으로 잡아 보드가 화면을 꽉 채우게 하고, 넘치는 축은 히어로의
   overflow: clip 이 잘라낸다. 풀블리드를 지키면서 모든 칸이 정사각형이 된다. */
.hero-lips__board {
  /* 인쇄물 사이의 흰 여백을 남긴다. 타일이 맞닿으면 판화 60장이 아니라 한 장의
     과밀한 패턴으로 읽히고, 큐브의 깊이도 보이지 않는다. */
  --hero-gap: clamp(3px, .3vw, 6px);
  --hero-pitch: max(100vw / 10, 100svh / 6);
  --hero-cell: calc(var(--hero-pitch) - var(--hero-gap));
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: calc(var(--hero-pitch) * 10 - var(--hero-gap));
  height: calc(var(--hero-pitch) * 6 - var(--hero-gap));
  display: grid;
  grid-template-columns: repeat(10, var(--hero-cell));
  grid-template-rows: repeat(6, var(--hero-cell));
  gap: var(--hero-gap);
  /* 간격은 애니메이션하지 않는다. 조각이 합쳐지는 연출은 게이트 쪽 마스크가 맡는다 —
     58칸의 gap 을 매 프레임 바꾸면 그때마다 그리드 전체 레이아웃이 다시 계산된다. */
  perspective: 1400px;
}

.hero-cell {
  position: relative;
  /* 칸마다 자기 소실점을 갖는다. perspective 를 보드에만 두면 소실점이 하나로 공유돼
     같은 rotateX 가 행마다 부채처럼 다르게 전단돼 보인다. 보드의 perspective 는
     이 칸 자체의 깊이 물결(translateZ)에 쓰이고, 칸의 perspective 는 안쪽 큐브 회전에 쓰인다.
     perspective 는 자기 변형이 아니라 자손의 변형에 적용되므로 둘 다 필요하다. */
  perspective: 820px;
  /* 칸을 독립된 레이아웃 단위로 못박는다. 58칸에서는 한 칸의 변화가 나머지 전체의
     레이아웃 재계산을 부르는 비용이 커서, 이것만으로 32ms 초과가 21% → 8% 로 내려간다.
     paint 는 함께 쓰지 않는다 — 회전 중 칸 밖으로 나가는 면이 잘려 나간다(실측). */
  contain: layout;
}

/* 모든 면을 같은 크기의 정사각형으로 놓은 표준 6면체다. 이전의 옆면만 좁게 만드는
   방식은 면의 중심이 어긋나 앞면 위로 이웃 이미지가 침범했다. */
.hero-cell__cube {
  position: absolute;
  inset: 0;
  /* 3D 컨텍스트가 없으면 rotateY 가 평면 미러로 납작해지고 backface-visibility 도
     작동하지 않아 뒤집힌 글자가 그대로 보인다. */
  transform-style: preserve-3d;
  border-radius: clamp(3px, .4vw, 7px);
  /* 플립만 담당한다. 대기 기울임은 바깥 .hero-cell 이 평범한 transform 애니메이션으로
     처리해 컴포지터에 남는다. */
  /* 안내 쌍 이외의 모든 큐브를 함께 축소한다. 앞면만 줄이는 방식과 달리 측면·깊이도
     같은 비율로 줄어 큐브 형태를 잃지 않으며, 각 타일 사이에 명확한 공기층이 생긴다. */
  /* 첫 프레임부터 아주 얕은 Y/X 기울임을 준다. 이전에는 정면(0°)에서 스크롤과 함께
     처음으로 측면이 나타나 평면 타일이 갑자기 6면체로 바뀌는 듯 보였다. 이제 초기
     정육면체의 모서리·깊이가 이미 렌더된 상태에서 동일한 축으로 연속 회전한다. */
  background: rgb(var(--tile-rgb));
  box-shadow: none;
  /* 처음부터 6° 기울여 옆면과 깊이가 보인다. 스크롤 때 평면이 갑자기 큐브로
     바뀌지 않고, -90°에서 오른쪽 면이 정면이 된다. */
  /* 회전 후반에는 gap 만큼만큼 커져 오른쪽 면의 정지 이미지와 실제 게이트가
     같은 좌표에서 교체된다. */
  transform: scale(var(--cube-scale, .92)) rotateY(-6deg);
  backface-visibility: hidden;
}


/* 안내판은 한 덩어리의 직사각형이 아니라 나란한 정육면체 두 개다. 자동 안내에서는
   두 내부 드럼이 같은 X축 타이밍으로 돌아 한 문장처럼 이어지고, 리빌에서는 바깥
   정육면체들이 각자의 Y축을 돈다. */
.hero-cell--marquee {
  z-index: 3;
  width: 100%;
  height: 100%;
  place-self: center;
  --cube-scale: 1;
  --tile-rgb: 250 226 248;
  --guide-lift: clamp(16px, 2vw, 28px);
  transform: translateZ(var(--guide-lift));
  animation: none;
}

/* 보드 gap의 절반씩 중앙으로 당기고 서브픽셀 원근 틈까지 0.75px 겹친다. 큐브 자체의
   정사각형 크기와 슬롯 좌표는 그대로라 주변 타일 간격과 리빌 타일 매핑은 변하지 않는다. */
.hero-cell--marquee-left {
  grid-area: 4 / 5 / 5 / 6;
  translate: calc(var(--hero-gap) / 2 + .75px) 0;
}

.hero-cell--marquee-right {
  grid-area: 4 / 6 / 5 / 7;
  translate: calc(var(--hero-gap) / -2 - .75px) 0;
}

/* 중앙도 리빌 때는 같은 -90° 축으로 돈다. 정지 상태에서는 내부 4면 드럼이 브랜드
   메시지를 보여 주고, 스크롤을 시작하면 이 바깥 큐브의 오른쪽 면이 2섹션의 중앙 조각이 된다. */
.hero-cell--marquee .hero-cell__cube {
  /* 중앙은 정지 때 정면을 정확히 맞춘다. 6° 대기 기울임이 큰 면에서는 우측 세로선으로
     읽혔고, 회전은 스크롤이 시작될 때부터 충분히 드러난다. */
  /* 회전 면이 보일 때도 정면의 시각 중심을 유지한다. 마지막 게이트 교대에서는
     이 보정을 서서히 걷어 실제 2섹션 좌표와 완전히 겹치게 한다. */
  transform: translateX(0) scale(var(--cube-scale)) rotateY(0deg);
}

.hero-cell__plate {
  position: absolute;
  inset: 0;
  /* 페이드로 지우지 않는다. 90° 를 넘어가면 뒷면이 되어 자연히 보이지 않는다. */
  backface-visibility: hidden;
  /* 초기의 얕은 기울임은 측면을 보이게 하지만 정면을 좌하단으로 밀어낸다. 정면 판만
     반대 방향으로 보정해 첫 프레임에서는 외곽 림의 중앙에 오게 하고, 회전이 시작될수록
     보정값을 0으로 줄여 실제 3D 회전에 간섭하지 않는다. */
  /* 외부 프레임은 쓰지 않는다. 정면은 큐브의 한 면을 정확히 채운다. */
  inset: 0;
  transform: translateZ(var(--cube-d, 26px));
  display: grid;
  place-items: center;
  overflow: hidden;
  /* 판목은 각지다 — 유리처럼 둥글리지 않는다 */
  border-radius: clamp(3px, .4vw, 7px);
  /* 잉크는 완전히 덮는다. 반투명이면 시작부터 뒤에 서 있는 2섹션이 타일 너머로 비쳐,
     각 큐브가 자기 회전을 마칠 때 자기 조각이 나타나는 순서가 사라진다. */
  background: rgb(var(--tile-rgb));
  /* backdrop-filter 는 쓰지 않는다. 잉크가 .84 로 덮여 있어 채도 보정이 화면에
     남기는 차이가 없다 — 스피어 투과량이 1.09 vs 1.10 으로 동일하고, 타일 17개분의
     백드롭 읽기 비용만 든다. */
  box-shadow: none;
}

/* 사용자가 제공한 팝아트 원본 시트에서 타일을 직접 잘라 쓴다. 색을 흉내 낸 별도
   모티프가 아니라 입술·눈·향수·컴팩트의 실제 원본 질감과 팔레트다. */
.hero-lips .hero-cell:not(.hero-cell--marquee) .hero-cell__plate {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-lips .hero-cell:not(.hero-cell--marquee) .hero-cell__lip { display: none; }

/* 정육면체 — 모든 면의 중심은 같은 축에서 cube-d 만큼 떨어진다. 오른쪽 면은
   2섹션의 실제 화면을 잘라 둔 불투명 조각이라, 90°에 닿으면 '단색 옆면 → 페이지'가
   아니라 면 자체가 다음 장면으로 읽힌다. */
.hero-cube__side {
  position: absolute;
  inset: 0;
  border-radius: clamp(3px, .4vw, 7px);
  /* 옆면은 정면보다 어둡다. 같은 색이면 면이 갈리지 않아 평평해 보인다. */
  background-color: rgb(var(--tile-rgb));
  box-shadow: none;
  /* 뒤를 향한 면은 그리지 않는다. 솔리드 큐브의 올바른 거동이면서, 6면 × 17칸을
     전부 합성하는 비용을 없앤다 — 32ms 초과 프레임 18% → 11%(실측). */
  backface-visibility: hidden;
  pointer-events: none;
}

/* 180°를 돈 뒤의 면은 별도 목업이 아니다. 이 창으로 보이는 것은 바로 뒤에 놓인 실제
   2섹션이다. 따라서 '큐브 → 목업 → 페이지'의 3단계가 아니라, 옆면이 선 뒤 각 칸에서
   실제 페이지가 나타나고 마지막에 칸 사이가 이어지는 2단계 전환이 된다. */
.hero-cube__side--back {
  background: rgb(var(--tile-rgb));
  transform: rotateY(180deg) translateZ(var(--cube-d, 26px));
}

.hero-cube__side--left {
  transform: rotateY(-90deg) translateZ(var(--cube-d, 26px));
}

.hero-cube__side--right {
  transform: rotateY(90deg) translateZ(var(--cube-d, 26px));
  background-color: #eee9fb;
  background-image: var(--gate-tile);
  background-size: cover;
  background-position: center;
  /* 회전 면의 정지 조각과 실제 게이트는 같은 합체 구간에서 교대한다. 두 화면이
     동시에 100% 보이던 탓에 제목·버튼이 이중으로 보이던 현상을 막는다. */
  opacity: 1;
}

/* 중앙의 다음 섹션 면은 정지 상태에서도 큰 우측 띠로 원근 투영되므로, 회전이 실제로
   시작된 뒤에만 빠르게 세운다. 90°에 도달하기 훨씬 전에는 완전히 불투명하다. */
.hero-cell--marquee .hero-cube__side--right {
  opacity: 0;
}

.hero-cube__side--top {
  transform: rotateX(90deg) translateZ(var(--cube-d, 26px));
}

.hero-cube__side--bottom {
  transform: rotateX(-90deg) translateZ(var(--cube-d, 26px));
}

/* 원본 팝아트 타일의 색과 질감을 그대로 쓴다. 별도의 모래알·잉크 농담 레이어를
   얹으면 채도가 탁해지고 회전 중 120개의 추가 합성 레이어가 생긴다. */
.hero-cell__plate::before,
.hero-cell__plate::after {
  content: none;
  display: none;
  opacity: 0;
}

.hero-cell__lip {
  /* 벡터가 아니라 구운 비트맵이다. 큐브 회전은 매 프레임 변형을 바꾸고, 그때마다 패스
     11KB 짜리 SVG 16개가 다시 래스터화돼 p95 프레임이 39.9ms → 65.4ms 로 뛰었다.
     비트맵은 GPU 가 싸게 변형한다. 팔레트가 8쌍으로 고정이라 이미지 8장이 16칸을 덮는다.
     -27° 기울기는 아트워크에 이미 들어 있다. */
  width: 78%;
  height: auto;
  filter: drop-shadow(0 4px 8px rgb(38 10 58 / .28));
}


.hero-cell[data-color="1"] { --tile-rgb: 174 47 41; --float-delay: -730ms; }
.hero-cell[data-color="2"] { --tile-rgb: 209 115 60; --float-delay: -1460ms; }
.hero-cell[data-color="3"] { --tile-rgb: 200 165 47; --float-delay: -2190ms; }
.hero-cell[data-color="4"] { --tile-rgb: 166 182 43; --float-delay: -2920ms; }
.hero-cell[data-color="5"] { --tile-rgb: 69 211 88; --float-delay: -3650ms; }
.hero-cell[data-color="6"] { --tile-rgb: 51 207 150; --float-delay: -4380ms; }
.hero-cell[data-color="7"] { --tile-rgb: 45 187 191; --float-delay: -5110ms; }
.hero-cell[data-color="8"] { --tile-rgb: 41 129 174; --float-delay: -5840ms; }
.hero-cell[data-color="9"] { --tile-rgb: 60 90 209; --float-delay: -6570ms; }
.hero-cell[data-color="10"] { --tile-rgb: 62 47 200; --float-delay: -7300ms; }
.hero-cell[data-color="11"] { --tile-rgb: 124 43 182; --float-delay: -8030ms; }
.hero-cell[data-color="12"] { --tile-rgb: 211 69 207; --float-delay: -8760ms; }

/* 중앙 안내 쌍 — 각 타일은 독립된 정육면체이고 내부 안내 면만 이어 보인다. */
.hero-cell__plate--marquee {
  --tile-rgb: 250 226 248;
  /* 이 판은 overflow:hidden 으로 종이 외곽을 자른다. 그 상태에서 상위 셀의 3D
     컨텍스트를 preserve 하면 브라우저가 드럼을 한 평면으로 합쳐, 다음 면의 글자가
     중앙에 납작하게 겹친다. 판 자체가 새 원근 컨텍스트를 만들면 내부 네 면은 서로
     직각을 유지하면서 상·하단 모서리에서 이어지고, 외곽 클리핑도 그대로 남는다. */
  perspective: 820px;
  transform-style: flat;
  /* 인트로에서는 고정 종이판을 두지 않는다. 네 개의 .hero-drum__face 만 불투명한
     오브젝트로 남아, 큐브가 돌 때 뒤의 팝아트가 면 사이로 자연스럽게 보인다. */
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.hero-drum {
  --drum-r: 60px;
  /* 면 사이는 아주 얇은 그림자 폭만 남긴다. 큰 틈은 위·아래 보더가 어긋난 것처럼 보였다. */
  --drum-gap: 2px;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  /* 첫 면을 각 정육면체의 판 표면(z=0)에 맞춘다. */
  /* 정면은 항상 3D 공간의 중앙에 둔다. 면들은 이 공통 축 주위를 아래 방향으로 돈다. */
  /* 8°를 기본으로 기울여 첫 프레임에도 윗면·아랫면 깊이가 보인다. */
  transform: translateZ(calc(var(--drum-r) * -1)) rotateX(-8deg);
}

.hero-drum__face {
  position: absolute;
  /* 네 방향을 같은 거리만큼 안으로 넣어 정면 림이 좌우 어느 한쪽으로 쏠리지 않는다. */
  inset: calc(var(--drum-gap) / 2);
  display: block;
  padding: 0;
  overflow: hidden;
  backface-visibility: hidden;
  background: linear-gradient(145deg, rgb(255 255 255 / .82), rgb(233 214 244 / .6));
  box-shadow: inset 0 0 0 1px rgb(72 32 104 / .14);
}

/* 같은 2칸 폭 콘텐츠를 양쪽 면에 각각 그린 뒤 자기 절반만 자른다. 그래서 두 개의
   독립 정육면체를 유지하면서도 문구·로고·유도 모션은 하나의 가로 안내판으로 읽힌다. */
.hero-drum__content {
  position: absolute;
  inset: 0 auto 0 0;
  width: 200%;
  display: grid;
  place-items: center;
  padding: 8% 7%;
}

.hero-cell--marquee-right .hero-drum__content {
  left: -100%;
}

.hero-drum__face:nth-child(1) { transform: rotateX(0deg) translateZ(var(--drum-r)); }
.hero-drum__face:nth-child(2) { transform: rotateX(90deg) translateZ(var(--drum-r)); }
.hero-drum__face:nth-child(3) { transform: rotateX(180deg) translateZ(var(--drum-r)); }
.hero-drum__face:nth-child(4) { transform: rotateX(270deg) translateZ(var(--drum-r)); }

/* 90° 옆에 선 면도 DOM상에는 존재하지만, 보이지 않는 글리프의 원근 투영을 CI가
   줄바꿈으로 오인하지 않도록 실제 정면에 올 때만 렌더 트리에 보인다. */

/* 회전축과 직교하는 두 면도 유지한다. */
.hero-drum__side { display: none; }
.hero-drum__side--left { transform: rotateY(-90deg) translateZ(var(--drum-r)); }
.hero-drum__side--right { transform: rotateY(90deg) translateZ(var(--drum-r)); }

.hero-drum__line {
  font-family: var(--font-display);
  /* 중앙 드럼은 브랜드의 표식이지 게이트 제목이 아니다. 판화의 밀도를 이기지 않도록
     손편지 정도의 크기로 내리고 여백을 남긴다. */
  font-size: clamp(17px, 1.35vw, 25px);
  line-height: 1.22;
  letter-spacing: -.012em;
  color: #2A1240;
  white-space: nowrap;
  word-break: keep-all;
}

.hero-drum__logo {
  width: min(54%, 154px);
  height: auto;
}

.hero-drum__content--cue {
  /* 왼쪽 정육면체에는 제스처, 오른쪽 정육면체에는 문구가 오도록 절반씩 나눈다.
     중앙 이음새가 글자를 자르지 않으면서 두 면이 한 안내판처럼 짝을 이룬다. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  column-gap: 11px;
  row-gap: 7px;
  align-content: center;
  text-align: left;
}
.hero-drum__cue-copy { place-self: center; font: 800 clamp(13px, 1vw, 17px)/1.1 var(--font-display); color: #2A1240; letter-spacing: -.03em; white-space: nowrap; }
/* 두 입력 방식은 같은 잉크 선·리듬을 쓴다. 클릭은 점선 선택 박스가 눌리고,
   스크롤은 마우스 휠이 아래로 흐른다. */
.hero-drum__cue-icon { position: relative; place-self: center; display: block; color: #2A1240; }
.hero-drum__cue-icon--click { width: 24px; height: 24px; border: 2px dashed currentColor; border-radius: 4px; animation: hero-click-press 1.45s ease-in-out infinite; }
.hero-drum__cue-icon--click::before { content: ""; position: absolute; width: 8px; height: 8px; border: 2px solid currentColor; border-radius: 50%; left: 6px; top: 6px; background: rgb(250 226 248 / .72); }
.hero-drum__cue-icon--click::after { content: ""; position: absolute; width: 8px; height: 12px; left: 16px; top: 16px; background: currentColor; clip-path: polygon(0 0, 100% 44%, 58% 51%, 100% 100%, 76% 100%, 43% 58%, 18% 91%); transform-origin: top left; }
.hero-drum__cue-icon--scroll { width: 20px; height: 28px; margin-left: 2px; border: 2px solid currentColor; border-radius: 11px; animation: hero-cue-pulse 1.25s ease-in-out infinite; }
.hero-drum__cue-icon--scroll::before { content: ""; position: absolute; width: 3px; height: 7px; border-radius: 3px; background: currentColor; left: 7px; top: 5px; animation: hero-wheel-scroll 1.25s ease-in-out infinite; }
.hero-drum__cue-icon--scroll::after { content: "↓"; position: absolute; right: -12px; bottom: -10px; width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; background: currentColor; color: #fff; font: 900 12px/1 sans-serif; }

.hero-lips__cue {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 3vh, 40px);
  width: 26px;
  height: 26px;
  margin-left: -13px;
  border-right: 2px solid rgb(255 255 255 / .85);
  border-bottom: 2px solid rgb(255 255 255 / .85);
  border-radius: 3px;
  transform: rotate(45deg);
  opacity: 1;
  filter: drop-shadow(0 2px 6px rgb(40 12 60 / .45));
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {


  .hero-cell:not(.hero-cell--marquee) {
    animation: hero-cell-wave 3.5s ease-in-out infinite;
    animation-delay: var(--wave-delay, 0ms);
  }

  .hero-cell__lip {
    animation: hero-lip-parallax 9s ease-in-out infinite;
    animation-delay: var(--float-delay, 0ms);
  }

  .hero-drum {
    animation: hero-drum-turn 13s cubic-bezier(.66, 0, .2, 1) infinite;
  }


  .hero-lips__cue {
    animation: hero-cue-bob 2.1s ease-in-out infinite;
  }
}

/* 감소 모션에서는 로고 면을 정면으로 고정한다 */
@media (prefers-reduced-motion: reduce) {
  .hero-drum { transform: translateZ(calc(var(--drum-r) * -1)) rotateX(-188deg); }
}

/* X축과 Y축으로 번갈아 살짝 기울였다가 매번 정면으로 돌아온다.
   연속 드리프트보다 각 기울기가 또렷하게 읽힌다. */
/* 리빌이 시작되면 드리프트를 멈춘다. 타일이 화면 밖으로 날아가는 동안 미세한 기울임은
   보이지 않는데, 3D 회전이 입술 SVG 를 계속 재래스터화해 흩어짐 자체를 끊기게 만든다. */
.hero-lips[data-hero-revealing="true"] .hero-cell {
  /* 클릭 뒤에도 물결이 남아 있으면 회전한 조각이 계속 흔들려 전환이 끝나지 않은
     것처럼 보인다. 리빌의 변형은 큐브 회전 하나만 남긴다. */
  animation: none;
  transform: none;
}

.hero-lips[data-hero-revealing="true"] .hero-cell__lip,
.hero-lips[data-hero-revealing="true"] .hero-drum {
  animation-play-state: paused;
}

.hero-lips[data-hero-guide-turning="true"] .hero-cell--marquee .hero-drum {
  /* 내부 X축 드럼은 인트로 안내 전용이다. 바깥 두 큐브가 Y축 전환될 때는
     숨겨 두어 내부 면의 경계선이 외곽 보더를 가르지 않게 한다. */
  opacity: 0;
  visibility: hidden;
}

/* 스크롤 전환에서는 내부 드럼이 사라진 자리를 두 바깥 큐브의 정면이 맡는다.
   이때만 불투명하게 세워 뒤의 2섹션이 회전보다 먼저 새는 것을 막는다. */
.hero-lips[data-hero-guide-turning="true"] .hero-cell__plate--marquee {
  background:
    linear-gradient(150deg, rgb(255 255 255 / .5) 0%, rgb(255 255 255 / .16) 40%, rgb(255 255 255 / .04) 72%),
    rgb(var(--tile-rgb));
}

/* 파동은 리빌 중에도 계속 돈다. 멈추면 그 자세로 굳어 회전이 부자연스럽게 이어진다.
   컴포지터에 남는 평범한 transform 이라 비용도 크지 않다. */

/* 인트로가 끝나면 타일 17개의 애니메이션을 멈춘다 — 보이지도 않는 레이어를
   계속 합성할 이유가 없다. */
.hero-lips[data-hero-done="true"] .hero-cell__plate,
.hero-lips[data-hero-done="true"] .hero-cell__lip,
.hero-lips[data-hero-done="true"] .hero-drum {
  animation-play-state: paused;
}

/* 인트로가 끝나면 렌더링 자체를 접는다. 애니메이션만 멈추면 결·농담의 multiply
   레이어 34겹이 계속 합성된다. */
.hero-lips[data-hero-done="true"] {
  visibility: hidden;
}

/* 깊이 물결 — 보드의 perspective 안에서 칸이 물러났다 돌아온다.
   z-index 는 애니메이션되지 않고 칸들은 gap 으로 겹치지도 않아 쌓임 순서로는
   보이는 변화가 없다. 요구의 실체는 깊이다. */
/* 깊이 물결과 기울임을 하나의 평범한 transform 애니메이션으로 돌린다.
   등록된 커스텀 프로퍼티(@property)를 애니메이션하면 컴포지터로 넘어가지 못하고
   매 프레임 메인 스레드 스타일 재계산이 걸린다 — 58칸에서는 그 비용이 지배적이다. */
/* 3.5초에 한 번, 가볍게 훑고 지나간다. 파동이 지나는 구간은 앞쪽 22% 뿐이고 나머지는
   제자리에 멈춰 있어 "계속 꿀렁거리는" 느낌이 나지 않는다. */
@keyframes hero-cell-wave {
  0%, 22%, 100% { transform: translateZ(0) rotateX(0deg) rotateY(0deg); }
  7% { transform: translateZ(-30px) rotateX(1.6deg) rotateY(-2.4deg); }
  14% { transform: translateZ(-16px) rotateX(-1deg) rotateY(1.6deg); }
}

/* 입술은 유리면보다 작게, 반대 위상으로 움직여 안쪽에 놓인 것처럼 보이게 한다 */
@keyframes hero-lip-parallax {
  0%, 100% { translate: 0 0; }
  22% { translate: 2px 3px; }
  48% { translate: -3px -2px; }
  74% { translate: -2px 2px; }
}

/* 정반사가 표면을 가로지른다 */

@keyframes hero-drum-turn {
  /* 정지 1초 → 회전 1초 → 정지 1초 → 회전 1초 → 정지 2초 → 회전 1초 →
     4번째 면 정지 5초 → 처음 면으로 회전 1초. 총 13초다. */
  0%, 7.692% { transform: translateZ(calc(var(--drum-r) * -1)) rotateX(-8deg); }
  15.385%, 23.077% { transform: translateZ(calc(var(--drum-r) * -1)) rotateX(-98deg); }
  30.769%, 46.154% { transform: translateZ(calc(var(--drum-r) * -1)) rotateX(-188deg); }
  53.846%, 92.308% { transform: translateZ(calc(var(--drum-r) * -1)) rotateX(-278deg); }
  100% { transform: translateZ(calc(var(--drum-r) * -1)) rotateX(-368deg); }
}

@keyframes hero-cue-pulse { 0%, 100% { translate: 0 0; } 50% { translate: 0 4px; } }
@keyframes hero-wheel-scroll { 0%, 100% { translate: 0 0; opacity: 1; } 65% { translate: 0 8px; opacity: 0; } }
@keyframes hero-click-press { 0%, 35%, 100% { scale: 1; } 50% { scale: .86; } 64% { scale: 1.08; } }

@keyframes hero-cue-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 7px; }
}

/* 좁은 화면: 축을 뒤집어 6행 3열 — 칸이 거의 정사각(375px에서 125x135)이 된다 */
@media (max-width: 860px) {
  /* 6열 × 10행 — 슬롯 60개로 데스크톱(10×6)과 같아 칸 개수가 그대로 맞고, 열이 짝수라
     2칸 안내 쌍이 정확히 가운데에 온다. 5열이면 2칸 폭 블록이 10% 왼쪽으로 치우친다. */
  .hero-lips__board {
    --hero-pitch: max(100vw / 6, 100svh / 10);
    width: calc(var(--hero-pitch) * 6 - var(--hero-gap));
    height: calc(var(--hero-pitch) * 10 - var(--hero-gap));
    grid-template-columns: repeat(6, var(--hero-cell));
    grid-template-rows: repeat(10, var(--hero-cell));
  }

  .hero-cell--marquee {
    --guide-lift: clamp(12px, 4vw, 20px);
  }

  .hero-cell--marquee-left { grid-area: 6 / 3 / 7 / 4; }
  .hero-cell--marquee-right { grid-area: 6 / 4 / 7 / 5; }


  .hero-cell__plate::before {
    --grain-opacity: .22;
  }

  .hero-drum__line {
    font-size: clamp(15px, 4vw, 19px);
  }

  .hero-drum__content--cue {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-inline: 0;
  }

  .hero-drum__cue-copy {
    font-size: 12px;
    line-height: 1.05;
    letter-spacing: -.055em;
    white-space: nowrap;
    text-align: center;
  }

  .hero-drum__cue-copy:last-child {
    transform: scaleX(.72);
  }

  /* 모바일: 클릭 대신 손가락으로 스크롤 제스처를 알린다. */
  .hero-drum__cue-icon--scroll { border: 0; width: 25px; }
  .hero-drum__cue-icon--scroll::before { content: "☝"; width: auto; height: auto; background: none; left: 0; top: 0; font-size: 28px; line-height: 1; animation: none; }
  .hero-drum__cue-icon--scroll::after { content: "↑"; right: -8px; bottom: -7px; }
}