/* ============================================================
   Best Bridge — recreation
   Palette:  metallic silver (logo tone) · black #000 · gray #CBCBCB
   Fonts:    Pretendard (body/headings) · Montserrat (English labels)
   ============================================================ */

:root {
  --silver-dark: #5c626b;
  --silver-mid: #9aa1a9;
  --silver-light: #eef1f4;
  --black: #000;
  --white: #fff;
  --gray: #cbcbcb;
  --gray-dark: #8a8a8a;
  /* 로고와 같은 메탈릭 실버 (밝은 하이라이트 + 어두운 밴딩 → 흑/백 배경 모두에서 읽힘) */
  --grad: linear-gradient(135deg,
    #8d949c 0%, #f4f6f8 12%, #6a707a 26%, #d4d9df 40%,
    #5b616a 54%, #e9edf1 68%, #7a818a 82%, #c3c9d0 100%);
  --grad-2: linear-gradient(135deg,
    #6f767e 0%, #dfe4e9 34%, #838a92 62%, #f1f4f6 100%);
  /* 섹션 라벨(.eyebrow) 전용 — 작은 글자에서도 읽히게 대비를 키운 메탈릭.
     밝은 배경용(기본)과 어두운 배경용 두 벌 */
  --grad-label: linear-gradient(100deg,
    #3d434b 0%, #9aa1a9 38%, #2b3037 62%, #767d86 100%);
  --grad-label-on-dark: linear-gradient(100deg,
    #f2f5f8 0%, #969da5 38%, #ffffff 62%, #b9bfc6 100%);
  --pretendard: "Pretendard", "Apple SD Gothic Neo", system-ui, sans-serif;
  /* Per request: Pretendard for everything — these aliases keep one font family */
  --montserrat: var(--pretendard);
  --mono: var(--pretendard);
  --maxw: 1200px;
  /* 섹션 머리말 공용 여백 — 사이트 전체가 같은 리듬을 쓰도록 한곳에서 관리한다 */
  --gap-label: 26px;                    /* 라벨(Philosophy 등) → 제목 */
  --gap-lead: 30px;                     /* 제목 → 본문 */
  --gap-block: clamp(56px, 8vh, 96px);  /* 머리말 → 아래 콘텐츠 */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  font-family: var(--pretendard);
  background: #fefefe;
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

/* ---------- shared text helpers ---------- */
.gradient-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* 섹션 라벨 — 크게 키운 그라데이션 글자는 흐려 보여서,
   작게 줄이고 자간을 넓힌 대문자 라벨로 간다 */
.eyebrow {
  display: inline-block;
  font-family: "Montserrat", var(--pretendard);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  /* 자간이 마지막 글자 뒤에도 붙어 가운데 정렬이 왼쪽으로 밀린다 */
  text-indent: 0.3em;
  margin-bottom: var(--gap-label);
  background-image: var(--grad-label);
}
/* 어두운 배경 섹션 */
.process .eyebrow,
.d-panel-body .eyebrow {
  background-image: var(--grad-label-on-dark);
}

.display-heading {
  font-family: var(--pretendard);
  font-weight: 600; /* semibold */
  font-size: clamp(34px, 5.4vw, 70px);
  line-height: 1.24;
  letter-spacing: -0.01em;
  word-break: keep-all;
}

.lead {
  font-weight: 300;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.62;
  letter-spacing: -0.01em;
}

/* ---------- pill button ---------- */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  color: var(--black);
  font-weight: 700;
  font-size: 16px;
  padding: 20px 46px;
  border-radius: 300px;
  transition: transform .3s ease, box-shadow .3s ease, color .3s ease;
  will-change: transform;
}
.btn-pill:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
}
.btn-pill-lg { padding: 22px 58px; font-size: 17px; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 40px;
  transition: transform .38s ease, top .4s ease, left .4s ease, right .4s ease,
              background .4s ease, padding .4s ease, border-radius .4s ease,
              box-shadow .4s ease, backdrop-filter .4s ease;
}
/* 스크롤을 내리는 동안에는 위로 접혀 사라진다 (올리면 다시 — script.js 1) */
.site-header.hidden { transform: translateY(-100%); }
.site-header.scrolled {
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(10px);
  padding: 16px 40px;
}

/* Content page: on scroll the header becomes a full-width white bar
   pinned to the top (menu turns dark for contrast). */
.page-content .site-header.scrolled {
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 0;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 6px 24px rgba(0, 0, 0, .06);
  padding: 16px 40px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* 흰 바 위에서는 은색이 묻히므로 검정~회색 그라데이션으로 눌러준다
   (명암을 벌린 뒤 전체를 어둡게 — 금속 질감은 그대로 남는다) */
.page-content .site-header.scrolled .logo img {
  filter: grayscale(1) contrast(2.2) brightness(.45);
}
.page-content .site-header.scrolled .main-nav a { color: #2b2b2b; }
.page-content .site-header.scrolled .main-nav a:hover {
  color: #3f444b;
  text-shadow: 0 0 14px rgba(120, 128, 138, .45),
               0 0 26px rgba(120, 128, 138, .22);
}
.page-content .site-header.scrolled .header-cta {
  color: #000;
  border-color: rgba(0, 0, 0, .3);
}
.page-content .site-header.scrolled .header-cta:hover {
  background: #000; color: #fff; border-color: #000;
}
.page-content .site-header.scrolled .nav-toggle span { background: #111; }
/* Content pages (blind-date.html): header always has a solid backdrop so the
   light logo + Contact stay legible over the white Philosophy section. */
.page-solid-header .site-header {
  background: rgba(0, 0, 0, .72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 16px 40px;
}
/* 게이트(메인) 헤더: 로고만 중앙에 */
.page-gate .site-header { justify-content: center; }

.logo img { height: 34px; width: auto; display: block; }
.header-cta {
  font-family: var(--montserrat);
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .5);
  padding: 9px 22px;
  border-radius: 300px;
  transition: background .3s, color .3s, border-color .3s;
}
.header-cta:hover { background: #fff; color: #000; border-color: #fff; }

/* ---------- header nav menu ---------- */
.main-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);   /* 헤더 중앙 정렬 */
  display: flex;
  align-items: center;
  gap: 38px;
  margin: 0;
}
.main-nav a {
  position: relative;
  font-family: "Montserrat", var(--pretendard);
  font-weight: 500;              /* medium */
  font-size: 15px;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, .82);
  padding: 6px 4px;
  transform-origin: center;
  transition: transform .35s cubic-bezier(.2,.7,.2,1),
              color .3s ease, text-shadow .35s ease;
}
/* 호버: 밑줄 대신 살짝 확대 + 은은한 빛 */
.main-nav a:hover {
  color: #fff;
  transform: scale(1.14);
  text-shadow: 0 0 12px rgba(255, 255, 255, .7),
               0 0 26px rgba(255, 255, 255, .4);
}

/* hamburger (hidden on desktop) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: #fff;
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO (split screen)
   ============================================================ */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  /* 홀수 폭에서 두 칸 사이에 생기는 서브픽셀 틈으로 흰 body 배경이 비치지 않게 */
  background: var(--black);
}
.hero-half {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 100vh;
  cursor: pointer;
}
/* 게이트 히어로 버튼: Different 섹션과 동일한 스타일(검정 + 도는 빛 테두리) */
.hero-more {
  margin-top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-width: 168px;
  padding: 17px 34px;
  font-weight: 700;
  font-size: 16px;
  transition: transform .3s ease;
}
/* Whole half is a link — lift its button on hover for affordance */
.hero-half:hover .hero-more { transform: translateY(-3px); }
.hero-right:hover { background: #0a0a0a; }
.hero-right { background: var(--black); }

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.15) 40%, rgba(0,0,0,.55) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 40px;
}
.hero-sub {
  font-weight: 300;
  font-size: clamp(14px, 1.3vw, 18px);
  color: #fff;
  margin-bottom: 22px;
  letter-spacing: -0.01em;
  line-height: 1.6;
  word-break: keep-all;
}
.hero-right .hero-sub { color: #fff; }
.hero-title {
  color: #fff;
  font-family: var(--montserrat);
  font-weight: 700;
  font-size: clamp(40px, 5.2vw, 76px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 42px;
}

/* ============================================================
   GATE INTRO — 메인(게이트) 진입 애니메이션
   커튼이 반대 방향으로 갈라짐 → 영상 푸시인 →
   로고 · 텍스트가 블러에서 풀리며 순차 등장
   ============================================================ */
.gate-curtain {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: 1fr 1fr;
  pointer-events: none;
}
.gate-curtain span { display: block; background: #000; }
/* 두 패널을 1px 겹쳐 서브픽셀 틈이 보이지 않게 (패널과 함께 움직인다) */
.gate-curtain span:first-child { margin-right: -1px; }
/* 왼쪽은 위로, 오른쪽은 아래로 — 어긋나는 방향이 속도감을 만든다 */
.gate-curtain span:first-child { animation: curtain-up 1s cubic-bezier(.76,0,.24,1) .12s forwards; }
.gate-curtain span:last-child  { animation: curtain-down 1s cubic-bezier(.76,0,.24,1) .24s forwards; }
@keyframes curtain-up   { to { transform: translateY(-101%); } }
@keyframes curtain-down { to { transform: translateY(101%); } }

/* 커튼이 열리는 동안 영상이 천천히 밀고 들어온다 */
.page-gate .hero-video { animation: gate-push 2.6s cubic-bezier(.16,.84,.3,1) .45s backwards; }
@keyframes gate-push { from { transform: scale(1.22); } }

/* 로고는 커튼이 걷힌 직후 위에서 내려온다 */
.page-gate .site-header .logo { animation: gate-drop .9s cubic-bezier(.2,.7,.2,1) .95s backwards; }
@keyframes gate-drop { from { opacity: 0; transform: translateY(-16px); } }

/* 카피는 블러가 풀리며 차례로 올라온다 (fill: backwards → hover transform 보존) */
.page-gate .hero-sub,
.page-gate .hero-title,
.page-gate .hero-more { animation: gate-rise 1s cubic-bezier(.2,.7,.2,1) backwards; }
.page-gate .hero-left  .hero-sub   { animation-delay: 1.02s; }
.page-gate .hero-left  .hero-title { animation-delay: 1.15s; }
.page-gate .hero-left  .hero-more  { animation-delay: 1.31s; }
.page-gate .hero-right .hero-sub   { animation-delay: 1.14s; }
.page-gate .hero-right .hero-title { animation-delay: 1.27s; }
.page-gate .hero-right .hero-more  { animation-delay: 1.43s; }
@keyframes gate-rise {
  from { opacity: 0; transform: translateY(30px); filter: blur(12px); }
}

/* 모바일에선 두 화면이 세로로 쌓이므로 커튼도 가로로 나눠 연다 */
@media (max-width: 900px) {
  .gate-curtain {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
  /* 가로로 나뉘므로 겹치는 방향도 아래쪽으로 바꾼다 */
  .gate-curtain span:first-child {
    margin-right: 0;
    margin-bottom: -1px;
    animation-name: curtain-left;
  }
  .gate-curtain span:last-child { animation-name: curtain-right; }
}
@keyframes curtain-left  { to { transform: translateX(-101%); } }
@keyframes curtain-right { to { transform: translateX(101%); } }

@media (prefers-reduced-motion: reduce) {
  .gate-curtain { display: none; }
  .page-gate .hero-video,
  .page-gate .site-header .logo,
  .page-gate .hero-sub,
  .page-gate .hero-title,
  .page-gate .hero-more { animation: none; }
}

/* ============================================================
   HERO BANNER (blind-date.html top) — wide video
   ============================================================ */
.hero-banner {
  position: relative;
  width: auto;                /* shrinks as scroll-driven margins grow */
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: flex-end;      /* bottom */
  justify-content: flex-start;/* left */
  border-radius: 0;
  /* 스크롤을 따라 조금씩 줄지 않고, 스크롤이 시작되면 한 번에 접힌다 (script.js 1c) */
  transition: margin .85s cubic-bezier(.22, .9, .24, 1),
              border-radius .85s cubic-bezier(.22, .9, .24, 1);
  will-change: margin, border-radius;
}
.hero-banner.shrunk {
  margin: 40px 40px 40px;
  border-radius: 18px;
}
.hero-banner-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 와이드 모니터에서 16:9 영상이 100vh 박스보다 세로로 넘쳐 위아래가 잘린다.
     인물 머리 쪽 여백을 남기려고 잘리는 지점을 위로 올린다. */
  object-position: center 30%;
  z-index: 0;
}
.hero-banner-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.2) 38%, rgba(0,0,0,.65) 100%);
}
.hero-banner-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  max-width: 900px;
  padding: 0 40px clamp(104px, 17vh, 210px) clamp(40px, 6vw, 96px);
}
.hero-banner-title {
  font-family: var(--pretendard);
  font-weight: 600; /* semibold */
  /* 첫 줄이 약 11.8em이라 이 상한까지는 <br> 줄바꿈 위치가 유지된다 */
  font-size: clamp(26px, 4vw, 54px);
  line-height: 1.26;
  letter-spacing: -0.01em;
  word-break: keep-all;
  color: #fff;
  filter: drop-shadow(0 3px 22px rgba(0, 0, 0, .6));
}
@media (max-width: 700px) {
  /* 모바일 히어로는 100vh 풀블리드 대신 영상 원본과 같은 4:5 박스.
     business 페이지의 1:1 영상은 좌우가 잘리므로 가운데를 남긴다 */
  .hero-banner {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 5;
  }
  .hero-banner-video { object-position: center center; }
  .hero-banner-content { padding: 0 24px clamp(48px, 9vw, 76px) 24px; }
  .hero-banner-btn { margin-top: 22px; padding: 15px 34px; }
}
.hero-banner-tag {
  max-width: 42em;
  margin: 26px auto 0;
  font-weight: 300;
  font-size: clamp(14px, 1.4vw, 18px);
  line-height: 1.85;
  color: rgba(255, 255, 255, .9);
  letter-spacing: -0.01em;
  word-break: keep-all;
  text-shadow: 0 1px 16px rgba(0, 0, 0, .45);
}
.hero-banner-btn {
  margin-top: 30px;
  border-radius: 2px;   /* 직각 느낌 */
  padding: 17px 42px;
}

/* ---------- 모서리를 자른 검정 버튼 — 은색 선이 테두리를 돈다 ----------
   ::before 가 테두리(은색 원형 그라데이션), ::after 가 안쪽 검정 면이다.
   두 겹 다 부모의 clip-path 로 잘려 팔각형 윤곽을 그대로 따른다. */
@property --cut-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.btn-cut {
  /* 다른 클래스 없이 홀로 써도 모양이 잡히도록 배치 속성을 스스로 갖는다 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  --cut: clamp(11px, 1.1vw, 15px);          /* 잘라낸 모서리 크기 */
  --edge: 0.8px;                            /* 은색 선 두께 */
  --cutin: calc(var(--cut) - var(--edge) * 0.586);   /* 안쪽 면의 모서리 */
  position: relative;
  isolation: isolate;
  gap: 16px;
  background: transparent;
  color: #fff;
  border-radius: 0;
  clip-path: polygon(
    0 var(--cut), var(--cut) 0,
    calc(100% - var(--cut)) 0, 100% var(--cut),
    100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%,
    var(--cut) 100%, 0 calc(100% - var(--cut))
  );
}
/* 테두리 — 밝은 은색 점 하나가 테두리를 따라 계속 돈다 */
.btn-cut::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: conic-gradient(from var(--cut-angle),
    rgba(206, 212, 220, .38) 0deg,
    rgba(206, 212, 220, .38) 170deg,
    rgba(236, 240, 246, .85) 250deg,
    #ffffff 292deg,
    rgba(236, 240, 246, .85) 332deg,
    rgba(206, 212, 220, .38) 360deg);
  animation: cut-rotate 3.6s linear infinite;
  pointer-events: none;
}
/* 안쪽 검정 면 — 테두리 두께만 남기고 덮는다 */
.btn-cut::after {
  content: "";
  position: absolute;
  inset: var(--edge);
  z-index: -1;
  background: #0b0b0b;
  clip-path: polygon(
    0 var(--cutin), var(--cutin) 0,
    calc(100% - var(--cutin)) 0, 100% var(--cutin),
    100% calc(100% - var(--cutin)), calc(100% - var(--cutin)) 100%,
    var(--cutin) 100%, 0 calc(100% - var(--cutin))
  );
  pointer-events: none;
}
@keyframes cut-rotate { to { --cut-angle: 360deg; } }
/* 잘린 모서리 밖으로는 그림자가 보이지 않으므로 띄우는 움직임만 남긴다 */
.btn-cut:hover { box-shadow: none; }
.btn-cut-arrow {
  width: 0;
  height: 0;
  border-left: 7px solid currentColor;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  opacity: .92;
  transition: transform .3s ease;
}
.btn-cut:hover .btn-cut-arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .btn-cut::before { animation: none; }
}

/* scroll-down cue */
.scroll-cue {
  display: block;
  width: 26px;
  height: 42px;
  margin: 40px auto 0;
  border: 2px solid rgba(255, 255, 255, .7);
  border-radius: 16px;
  position: relative;
}
.scroll-cue span {
  position: absolute;
  left: 50%;
  top: 9px;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: #fff;
  animation: scroll-cue 1.7s ease-in-out infinite;
}
@keyframes scroll-cue {
  0% { opacity: 0; transform: translateY(0); }
  30% { opacity: 1; }
  70% { opacity: 1; transform: translateY(12px); }
  100% { opacity: 0; transform: translateY(14px); }
}

/* ============================================================
   SECTION base
   ============================================================ */
.section { position: relative; padding: clamp(90px, 12vh, 160px) 0; }

/* ---------- PHILOSOPHY (off-white) ---------- */
.philosophy { background: #fefefe; color: var(--black); padding-bottom: 0; overflow: hidden; }
/* 섹션 머리말 — 가운데 정렬 컬럼 대신 화면 왼쪽에서 일정한 거리에 붙인다.
   (1200px 컬럼을 가운데 두면 넓은 화면에서 글자가 한참 안쪽으로 밀려 보인다)
   Different 패널 안 문구와 같은 들여쓰기를 써서 아래위가 한 줄로 맞는다 */
.philosophy-inner,
.different-full .different-head {
  max-width: none;
  margin-left: 0;
  margin-right: auto;
  padding-left: clamp(24px, 7vw, 130px);
  padding-right: clamp(24px, 7vw, 130px);
}
.philosophy-inner { text-align: center; }
.page-main .philosophy {
  padding-bottom: clamp(90px, 12vh, 160px);
  /* overflow: hidden 이 있으면 안쪽 sticky(다이얼)가 고정되지 않는다 */
  overflow: visible;
}

/* ---------- Philosophy 다이얼 ----------
   흰 바탕에 부채꼴 눈금을 깔고, 가운데 위에 문구를 얹는다 */
/* 연출이 스크롤을 따라가지 않으므로 구간을 길게 잡을 필요가 없다 — 한 화면 */
.ph-pin {
  position: relative;
  height: 100vh;
  height: 100svh;
}
/* 제목과 다이얼이 한 덩어리로 화면에 머문다 — 제목은 위, 다이얼은 아래 */
.ph-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* 원을 크게 두기 위해 제목 위 여백을 줄였다 */
  padding-top: clamp(84px, 11vh, 150px);
  /* overflow:hidden 이면 원 밖으로 번진 빛의 아래가 잘린다 — 이제 클리핑이 필요 없다 */
  overflow: visible;
}
/* ---------- 눈금 원 + 좌우 문구 ----------
   원은 가만히 있고, 눈금 위의 점이 12시에서 9시·3시로 갈라진다.
   점이 갈라지는 동안 양옆 문구가 따라 나타난다 (위치·진행도는 script.js 5c) */
.ph-orbit {
  flex: 1;                       /* 제목 아래 남은 높이를 다 쓰고 그 안에서 가운데 */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  align-content: center;
  gap: clamp(18px, 2.6vw, 56px);
  width: 100%;
  padding: 0 clamp(24px, 4vw, 90px);
}
.ph-ring {
  position: relative;
  /* 화면 높이도 함께 본다 — 낮은 노트북에서 원이 화면 아래에 닿지 않게.
     점이 도는 반지름도 이 값에서 계산한다 */
  --ring: min(clamp(300px, 38vw, 620px), 52vh);
  width: var(--ring);
  aspect-ratio: 1 / 1;
}
.ph-ring-svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* 눈금 원은 스크롤과 무관하게 늘 천천히 돈다 (원 전체가 눈금이라 끊겨 보이지 않는다) */
.ph-dial-ticks {
  will-change: transform;
  transform-box: view-box;
  /* viewBox(1586×1586) 의 정중앙 — 눈금 원의 중심과 같다 */
  transform-origin: 793px 793px;
  animation: ph-spin 90s linear infinite;
}
@keyframes ph-spin { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ph-dial-ticks { animation: none; }
  .ph-dot,
  .ph-side,
  .ph-stem,
  .ph-ring-glow,
  .ph-fade .pi,
  .hero-banner,
  .d-grow-frame { transition: none; }
}
.ph-dial-ticks line {
  stroke: #cdcdcd;
  /* 큰 viewBox 를 작게 줄여 그리므로 굵기를 올려야 눈금이 보인다 (≈1px) */
  stroke-width: 4;
  /* 눈금 400개가 픽셀 격자와 어긋나 어떤 구간은 사라져 보인다 — 정밀 렌더로 고르게 */
  shape-rendering: geometricPrecision;
}
/* 원 안에 번지는 빛 — 원을 거의 가득 채우고 눈금 밖으로 조금 삐져나온다.
   (원보다 큰 상자로 두고, 색이 눈금 지름 근처에서 0 이 되게 잡았다) */
.ph-ring-glow {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  /* 레퍼런스처럼 위쪽 핑크·코랄 → 아래쪽 라벤더·퍼플로 번진다 */
  background:
    radial-gradient(closest-side at 50% 30%, rgba(243, 205, 205, .95), rgba(243, 205, 205, 0) 80%),
    radial-gradient(closest-side at 58% 40%, rgba(233, 197, 208, .70), rgba(233, 197, 208, 0) 78%),
    radial-gradient(closest-side at 50% 70%, rgba(181, 166, 224, .92), rgba(181, 166, 224, 0) 82%),
    radial-gradient(closest-side at 40% 62%, rgba(198, 184, 231, .68), rgba(198, 184, 231, 0) 80%),
    radial-gradient(closest-side at 50% 50%, rgba(224, 206, 226, .82), rgba(224, 206, 226, 0) 92%);
  filter: blur(50px);
  opacity: .5;
  transition: opacity 1.2s ease .15s;
  pointer-events: none;
}
.ph-orbit.in .ph-ring-glow { opacity: 1; }
/* 원 가운데 브랜드 이름 */
.ph-ring-name {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-family: "Montserrat", var(--pretendard);
  font-weight: 500;
  font-size: clamp(17px, 1.9vw, 30px);
  letter-spacing: .14em;
  background: var(--grad-label);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* 눈금 위를 도는 점 — 처음엔 둘이 12시에 겹쳐 있다가 .in 이 붙으면 갈라진다.
   회전값만 바뀌므로 브라우저가 눈금을 따라 호를 그리며 옮겨 준다 */
.ph-dot {
  --deg: 0deg;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 11px;
  border: 2.5px solid #111;
  border-radius: 50%;
  background: #fefefe;
  transform: translate(-50%, -50%) rotate(var(--deg))
             translateY(calc(var(--ring) * -0.4959));
  transition: transform 1.15s cubic-bezier(.22, .9, .24, 1);
  will-change: transform;
  pointer-events: none;
}
.ph-orbit.in .ph-dot-l { --deg: -90deg; }   /* 9시 */
.ph-orbit.in .ph-dot-r { --deg: 90deg; }    /* 3시 */
/* 좌우 문구 — 나타나는 진하기·위치는 script.js 가 넣는다.
   두 덩어리를 원 양옆에 같은 간격으로 붙인다 (왼쪽은 오른끝 정렬로 거울처럼) */
.ph-side {
  position: relative;
  z-index: 2;              /* 원 밖으로 번진 빛 위에 글자가 오도록 */
  opacity: 0;
  max-width: 24em;
  transition: opacity .9s ease, transform .9s cubic-bezier(.22, .9, .24, 1);
  will-change: opacity, transform;
}
/* 점이 갈라지기 시작한 뒤에 따라 나온다 (오른쪽이 조금 늦게) */
.ph-side-l {
  justify-self: end;
  text-align: right;
  transform: translateX(-20px);
  transition-delay: .42s;
}
.ph-side-r {
  justify-self: start;
  text-align: left;
  transform: translateX(20px);
  transition-delay: .58s;
}
.ph-orbit.in .ph-side { opacity: 1; transform: none; }
.ph-side-title {
  font-family: "Montserrat", var(--pretendard);
  font-weight: 700;
  font-size: clamp(20px, 2.1vw, 34px);
  letter-spacing: .01em;
  color: #111;
  margin-bottom: 18px;
}
.ph-side-desc {
  font-weight: 500;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.82;
  letter-spacing: -0.01em;
  color: #3c3c3c;
  word-break: keep-all;
}
/* 스크롤 마지막 구간에서 길어지는 세로선 — 원 아래에서 Different 바로 앞까지 내려온다.
   .ph-stage 는 overflow 로 잘리므로 선은 핀(.ph-pin) 위에 직접 얹는다.
   위치·길이는 script.js 5c 가 매 프레임 넣는다 */
.ph-stem {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1.4px;
  height: 0;
  margin-left: -0.7px;
  background: #111;
  pointer-events: none;
  /* 없다가 아래로 쭉 내려간다 — 목표 길이(--len)는 script.js 가 재서 넣는다.
     스크롤로 지나가는 사이 다 자라도록 전환을 앞당긴다 */
  transition: height 1.05s cubic-bezier(.22, .9, .24, 1) .2s;
  /* 다음 섹션(Different)도 position:relative 라 흰 배경이 선을 덮는다.
     같은 쌓임 맥락(.page-body) 안에서 한 칸 위로 올려 선이 살아남게 한다 */
  z-index: 1;
}
.ph-pin.stem-in .ph-stem { height: var(--len, 0px); }

/* 좁은 화면 — 좌·우 대신 위·아래로 편다. 문구가 원의 위와 아래에 놓이고
   점도 12시·6시로 갈라진다 (script.js 5c 의 VERT_MAX) */
@media (max-width: 900px) {
  .ph-orbit {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;   /* 위 문구 · 원 · 아래 문구 */
    justify-items: center;
    gap: clamp(14px, 2vh, 26px);
    padding: 0 24px;
  }
  .ph-ring { --ring: min(72vw, 400px, 36vh); }
  .ph-orbit.in .ph-dot-l { --deg: 0deg; }     /* 12시에 그대로 */
  .ph-orbit.in .ph-dot-r { --deg: 180deg; }   /* 6시 */
  .ph-side { max-width: 26em; }
  .ph-side-l { transform: translateY(-20px); }
  .ph-side-r { transform: translateY(20px); }
  /* 위·아래로 펼치는 배치에서는 두 덩어리 모두 가운데 */
  .ph-side-l,
  .ph-side-r { justify-self: center; text-align: center; }
  .ph-side-title { margin-bottom: 10px; }
}
@media (max-width: 700px) {
  .page-main .philosophy {
    /* 히어로와 PHILOSOPHY 사이가 멀어 40px 줄인다 */
    padding-top: calc(clamp(90px, 12vh, 160px) - 40px);
    /* CURATION 문구와 Different 사이를 벌린다 — 그만큼 세로선이 길어진다 */
    padding-bottom: calc(clamp(90px, 12vh, 160px) + 110px);
  }
  .ph-stage { padding-top: clamp(88px, 13vh, 140px); }
  .ph-ring { --ring: min(76vw, 360px, 34vh); }
  .ph-side-title { font-size: 19px; }
  .ph-side-desc { font-size: 14px; line-height: 1.74; }
}

/* 화면에 들어오면 제목이 옅은 회색에서 검정으로 한 번에 진해진다 (script.js 5b) */
.ph-fade .pi {
  color: rgba(17, 17, 17, .16);
  transition: color .95s ease;
}
.ph-fade .pi:nth-child(2) { transition-delay: .16s; }
.ph-fade.in .pi { color: #111; }

/* Philosophy text — staggered blur-in on scroll */
[data-textreveal] .pi {
  opacity: 0;
  transform: translateY(32px);
  filter: blur(12px);
  transition: opacity 1s cubic-bezier(.2,.7,.2,1),
              transform 1s cubic-bezier(.2,.7,.2,1),
              filter 1s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform, filter;
}
.display-heading .pi { display: block; }
[data-textreveal].in .pi { opacity: 1; transform: none; filter: blur(0); }
/* 등장 후에도 버튼 호버 리프트는 유지 */
[data-textreveal].in .btn-pill:hover { transform: translateY(-3px); }

/* 본문 줄바꿈 — 데스크톱은 <br> 기준 두 줄, 모바일은 .ln 마다 끊어 네 줄 */
.lead-split .ln { display: inline; }
.philosophy .eyebrow { margin-bottom: var(--gap-label); }
.philosophy .display-heading { color: #000; margin-bottom: var(--gap-lead); }
.philosophy .lead { color: #333; }

/* 비즈니스 페이지: 영상을 위로 올리고 아래 흰 여백을 줄인다 */
.page-business .philosophy-crowd { margin-top: 0; }
/* 비즈니스 페이지: 영상 하단 페이드(흐림) 처리 없이 그대로 보이게 */
.page-business .philosophy-crowd video {
  -webkit-mask-image: none;
  mask-image: none;
}

@media (max-width: 700px) {
  /* 본문을 네 줄로 고정 (데스크톱은 두 줄 그대로) */
  .lead-split .ln { display: block; }
  .lead-split br { display: none; }
  /* 모바일 영상 위쪽 빈 여백을 잘라 간격을 좁힌다 (아래 기준 정렬).
     재생 중 인물 머리 위치는 프레임 상단에서 42%~62% 사이 — 42%에 여유를 더해 64vw */
  .page-business .philosophy-crowd video {
    height: 64vw;
    object-fit: cover;
    object-position: center bottom;
  }
}
/* 아주 좁은 기기(SE 등)에서 가장 긴 줄이 넘치지 않도록 */
@media (max-width: 360px) {
  .lead-split { font-size: 15px; }
}
.page-business .different { padding-top: 90px; }

.philosophy-crowd {
  margin-top: clamp(30px, 5vw, 60px);
  display: flex;
  justify-content: center;
}
.philosophy-crowd img,
.philosophy-crowd video {
  width: 100%;
  max-width: 1150px;
  height: auto;
  display: block;
  border-radius: 16px;
}
/* 하단이 뚝 끊기지 않도록 아래로 갈수록 흐려지게 페이드아웃
   (선형 대신 다단계 S커브로 훨씬 자연스럽게 사라짐) */
.philosophy-crowd video {
  --fade: linear-gradient(to bottom,
    #000 0%,
    #000 38%,
    rgba(0, 0, 0, .97) 48%,
    rgba(0, 0, 0, .90) 56%,
    rgba(0, 0, 0, .78) 64%,
    rgba(0, 0, 0, .62) 71%,
    rgba(0, 0, 0, .44) 78%,
    rgba(0, 0, 0, .27) 85%,
    rgba(0, 0, 0, .13) 91%,
    rgba(0, 0, 0, .05) 96%,
    rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: var(--fade);
  mask-image: var(--fade);
}

/* ---------- DIFFERENT — rounded-card carousel (white) ---------- */
.different { background: #fff; overflow: hidden; padding-top: 200px; }
.different .different-head { text-align: center; margin-bottom: var(--gap-block); }
.different .different-head .display-heading { color: #111; margin: 0 0 var(--gap-lead); }
.different .different-head .lead { color: #333; margin-left: auto; margin-right: auto; max-width: 40em; }

.d-carousel { position: relative; padding: 0; }
.d-viewport { overflow: hidden; }
.d-track {
  display: flex;
  gap: 56px;
  transition: transform .65s cubic-bezier(.4, 0, .1, 1);
  will-change: transform;
}
.d-slide {
  position: relative;
  flex: 0 0 62%;
  aspect-ratio: 2.3 / 1;      /* 레퍼런스형 와이드 비율 */
  border-radius: 28px;
  overflow: hidden;
  background: #111;
}
.d-slide-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.d-slide-shade {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.45) 38%, rgba(0,0,0,.08) 68%, rgba(0,0,0,0) 100%);
}
.d-slide-body {
  position: absolute; z-index: 2;
  top: 50%; left: clamp(28px, 5%, 84px);
  transform: translateY(-50%);
  max-width: 460px;
  color: #fff;
}
.d-num {
  font-family: "Montserrat", var(--pretendard);
  font-weight: 700; font-size: 16px;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .72);
}
.d-title {
  font-family: var(--pretendard);
  font-weight: 600;
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1.24;
  letter-spacing: -0.01em;
  word-break: keep-all;
  margin: 16px 0 20px;
}
.d-desc {
  font-weight: 300;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.72;
  color: rgba(255, 255, 255, .86);
  letter-spacing: -0.01em;
  word-break: keep-all;
}
/* pill 테두리를 도는 빛줄기 (conic gradient + ring mask) */
@property --pill-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.d-pill {
  position: relative;
  isolation: isolate;
  display: inline-block;
  margin-top: 32px;
  background: #000;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  padding: 15px 30px;
  border-radius: 16px;
}
.d-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;                 /* 테두리 두께 */
  background: conic-gradient(from var(--pill-angle),
    rgba(255, 255, 255, .16) 0deg,
    rgba(255, 255, 255, .16) 200deg,
    rgba(255, 255, 255, .45) 280deg,
    #ffffff 320deg,
    rgba(255, 255, 255, .45) 344deg,
    rgba(255, 255, 255, .16) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: pill-rotate 3.2s linear infinite;
  pointer-events: none;
}
@keyframes pill-rotate { to { --pill-angle: 360deg; } }

.d-controls {
  position: absolute;
  bottom: 30px;
  right: calc(19% + 32px);   /* 중앙 카드의 우하단 안쪽 */
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 18px;
}
.d-dots { display: flex; align-items: center; gap: 8px; }
.d-dot {
  width: 8px; height: 8px;
  padding: 0; border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  cursor: pointer;
  transition: width .35s ease, background .35s ease, border-radius .35s ease;
}
.d-dot.active { width: 28px; border-radius: 5px; background: #fff; }
.d-arrows { display: flex; gap: 10px; }
.d-arrow {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 22px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .3s, color .3s, border-color .3s, transform .3s;
}
.d-arrow:hover { background: #fff; color: #111; border-color: #fff; transform: translateY(-2px); }

@media (max-width: 700px) {
  .d-slide { flex-basis: 86%; aspect-ratio: auto; height: 420px; }
  .d-slide-body { max-width: 82%; }
  /* 모바일: 카드 오른쪽 밖으로 삐져나오지 않게 화면 중앙 정렬 */
  .d-controls {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    bottom: 22px;
  }
  /* 모바일: 캐러셀과 Showcase 사이 간격을 50px 줄인다
     (.different-full 인 비즈니스 페이지는 제외 — 거기는 패딩이 0) */
  .different:not(.different-full) {
    padding-bottom: max(24px, calc(clamp(90px, 12vh, 160px) - 80px));
  }
}

/* ---------- DIFFERENT — 풀스크린 패널 (비즈니스 페이지) ---------- */
/* overflow는 두지 않는다 — 스크롤 스냅이 뷰포트(html)에 걸려야 하기 때문 */
.different-full { background: #000; padding: 0; overflow: visible; }
.page-business .different-full { padding-top: 0; }
/* main 은 둥근 사각형이 흰 바탕 위에서 커진다 */
.page-main .different-full { background: #fff; }
/* 마지막 패널 아래쪽을 검정으로 녹여, 이어지는 Showcase(검정)와 경계가 지지 않게 한다
   (z-index 1 — 사진 위, 문구 아래) */
.page-main .different-full .d-panel:last-child::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(140px, 24vh, 280px);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 52%, #000 100%);
  pointer-events: none;
  z-index: 1;
}

/* 패널 위에 얹히는 머리말 — 검은 패널과 대비되도록 흰 배경을 유지한다 */
.different-full .different-head {
  background: #fff;
  /* 다른 섹션 머리말과 같은 왼쪽 들여쓰기 */
  width: 100%;
  max-width: none;
  margin: 0;
  /* 아래 여백 — 문구가 사진에 거의 붙어 보여 30px 더 띄웠다 */
  padding: clamp(170px, 24vh, 250px) clamp(24px, 7vw, 130px)
           calc(clamp(16px, 2.5vh, 32px) + 30px);
}

/* 한 장면씩 '뚝-뚝' 넘어가는 스크롤 스냅 (패널에만 적용) */
html.page-snap { scroll-snap-type: y proximity; }
/* main 은 장면 이동을 script.js 가 직접 하므로 브라우저 스냅은 끈다.
   (켜 두면 마지막 패널에서 아래로 내릴 때 브라우저가 위로 되당긴다) */
html.snap-desktop-only { scroll-snap-type: none; }
html.page-snap .d-panel:not(.d-grow) {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  scroll-margin-top: -80px;   /* html의 scroll-padding-top(80px) 상쇄 → 화면에 정확히 꽉 참 */
}

.d-panel {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.d-panel-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.d-panel-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.d-panel-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.12) 72%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.35) 100%);
}
.d-panel-body {
  position: relative; z-index: 2;
  color: #fff;
  /* 좌우 패딩이 border-box로 포함되므로 넉넉히 — 타이틀이 한 줄씩 유지되게 */
  width: 100%;
  max-width: 960px;
  padding: 0 clamp(24px, 7vw, 130px);
}
.d-panel-body .eyebrow { margin-bottom: 22px; }
.d-panel-title {
  font-family: var(--pretendard);
  font-weight: 600;
  font-size: clamp(32px, 4.4vw, 60px);
  line-height: 1.22;
  letter-spacing: -0.02em;
  word-break: keep-all;
  margin: 0 0 24px;
}
/* 각 span이 곧 한 줄 — 절대 접히지 않게 */
.d-panel-title .pi { display: block; white-space: nowrap; }
/* PC — 영문과 국문의 계층을 모바일처럼 확실히 벌린다.
   (둘이 같은 크기면 무엇이 제목인지 모호해진다)
   영문은 크게 Montserrat, 국문은 한 단계 물러난 작은 회색 */
@media (min-width: 701px) {
  .page-main .d-panel-title .d-en {
    font-family: "Montserrat", var(--pretendard);
    font-weight: 500;
    font-size: clamp(52px, 5.4vw, 84px);
    line-height: 1.04;
    letter-spacing: -0.02em;
    color: #fff;
    /* 영문 글자는 자체 왼쪽 여백이 커서 국문보다 안쪽에서 시작한다 — 그만큼 당긴다 */
    margin-left: -0.045em;
  }
  .page-main .d-panel-title .d-ko {
    font-size: clamp(16px, 1.25vw, 20px);
    font-weight: 600;
    letter-spacing: .01em;
    color: rgba(255, 255, 255, .55);
    margin-top: 12px;
  }
}
/* 설명 줄 나눔 — 데스크톱은 이어 붙고, 모바일은 한 줄씩 끊긴다 */
.d-panel-desc .dl { display: inline; }
.d-panel-desc {
  font-weight: 300;
  font-size: clamp(16px, 1.45vw, 21px);
  line-height: 1.78;
  color: rgba(255, 255, 255, .88);
  letter-spacing: -0.01em;
  word-break: keep-all;
}

/* ---------- main Different — 둥근 사각형이 스크롤에 따라 화면을 채운다 ----------
   .d-grow 는 스크롤 구간(트랙)이고, 그 안의 stage 가 화면에 고정된 채
   frame 의 크기·모서리를 script.js 가 진행도에 맞춰 바꾼다. */
/* 데스크톱에서는 슬라이더 래퍼가 없는 것처럼 동작한다 */
.d-slider,
.d-slider-stage,
.d-slider-track { display: contents; }
.d-slider-ui { display: none; }

.d-grow {
  /* 확대가 스크롤을 따라가지 않으므로 여분 구간이 필요 없다 — 한 화면 */
  height: 100vh;
  min-height: 0;
  display: block;
  overflow: visible;
}
.d-grow-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 확대가 끝나갈 때 문구가 올라온다 */
.d-grow [data-textreveal] .pi {
  transition-duration: .5s;
  transition-delay: calc(.6s + var(--d, 0s) * .45);
}
.d-grow-frame {
  position: relative;
  width: var(--gw, 62%);
  height: var(--gh, 58%);
  border-radius: var(--gr, 32px);
  overflow: hidden;
  display: flex;
  align-items: center;
  /* 스크롤을 따라 커지지 않고, 화면에 들어오면 한 번에 꽉 찬다 (script.js 7c) */
  transition: width 1.05s cubic-bezier(.22, .9, .24, 1),
              height 1.05s cubic-bezier(.22, .9, .24, 1),
              border-radius 1.05s cubic-bezier(.22, .9, .24, 1);
  will-change: width, height, border-radius;
}
.page-main .d-grow-frame { --gw: 70%; --gh: 82%; --gr: 20px; }
.d-grow-frame.grown { --gw: 100%; --gh: 100%; --gr: 0px; }

@media (max-width: 700px) {
  .d-grow { height: 125vh; }
  .d-grow-frame { align-items: flex-end; }
  .page-main .d-grow-frame { --gw: 88%; --gh: 78%; --gr: 16px; }
}

@media (max-width: 700px) {
  /* 스와이프로 장면을 넘기는 동안 글자가 선택되지 않게 */
  .d-panel { min-height: 520px; align-items: flex-end; -webkit-user-select: none; user-select: none; }
  .d-panel-shade {
    background:
      linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.15) 35%, rgba(0,0,0,.72) 78%, rgba(0,0,0,.88) 100%);
  }
  .d-panel-body { max-width: 100%; padding: 0 24px clamp(66px, 13vh, 110px); }
  /* 모바일에서 텍스트를 키운다 — 화면 폭에 비례하되 한 줄을 넘지 않는 선까지 */
  .d-panel-body .eyebrow { margin-bottom: 16px; }
  .d-panel-title { font-size: clamp(36px, 12.4vw, 52px); margin-bottom: 28px; }
  .d-panel-desc { font-size: clamp(16px, 5vw, 21px); line-height: 1.72; }

  /* main 페이지 제목은 비즈니스보다 길어 한 줄에 안 들어간다 — 접히도록 풀어준다 */
  .page-main .d-panel-title { font-size: clamp(32px, 9.4vw, 46px); }
  .page-main .d-panel-title .pi { white-space: normal; }
  /* 설명은 한 단계 작게 — 기본보다 약 5px 낮춘다 */
  .page-main .d-panel-desc { font-size: clamp(17px, 4.4vw, 18px); }
  /* main 은 문구를 화면 가운데에 둔다 (아래 여백을 없애 정확히 중앙) */
  .page-main .d-panel { align-items: center; }
  .page-main .d-grow-frame { align-items: center; }
  .page-main .d-panel-body { padding: 0 24px; }
  /* 가운데에서도 글자가 읽히도록 어둡기를 위아래 고르게 편다 */
  .page-main .d-panel-shade {
    background:
      linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.34) 22%, rgba(0,0,0,.52) 50%, rgba(0,0,0,.68) 78%, rgba(0,0,0,.78) 100%);
  }
  /* 위 여백은 데스크톱보다 좁게, 아래는 첫 장면과 붙지 않을 만큼 */
  .different-full .different-head {
    padding-top: clamp(120px, 18vh, 200px);
    /* 카드가 바로 이어지는 자리라 공용 여백보다 한 단계 좁게 */
    padding-bottom: clamp(38px, 5.4vh, 58px);
  }
  /* 좁은 화면에서는 줄이 더 붙어야 한 문단으로 읽힌다 */
  .lead { line-height: 1.45; }

  /* ---- 모바일 Different — 세로로 쌓이는 카드 ----
     데스크톱은 그대로 풀스크린 패널이고, 좁은 화면에서만 카드 스택이 된다 */
  .page-main .d-slider { display: block; }
  .page-main .d-slider-stage {
    display: block;
    position: static;
    height: auto;
    overflow: visible;
  }
  .page-main .d-slider-track {
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* 마지막 카드가 다음 섹션에 붙지 않도록 아래 여백을 둔다 */
    padding: 0 20px 120px;
    transform: none;
    transition: none;
  }
  .page-main .d-slider-ui { display: none; }   /* 카드 스택에는 인디케이터가 필요 없다 */

  .page-main .d-slider-track .d-panel {
    display: block;
    width: auto;
    height: auto;
    min-height: 0;
    aspect-ratio: 3 / 4;
    border-radius: 14px;
    overflow: hidden;
  }
  /* 확대 연출용 껍데기는 카드 안을 그대로 채운다 */
  .page-main .d-slider-track .d-grow,
  .page-main .d-slider-track .d-grow-stage { height: 100%; position: static; }
  .page-main .d-slider-track .d-grow-frame {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    display: block;
  }
  /* 사진은 어둡게 눌러 글자를 살린다 */
  .page-main .d-slider-track .d-panel-shade {
    background: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.44) 42%, rgba(0,0,0,.72) 100%);
  }

  /* 위에 번호·영문·국문, 아래에 설명 */
  .page-main .d-slider-track .d-panel-body {
    position: absolute;
    inset: 0;
    max-width: none;
    display: flex;
    flex-direction: column;
    /* 번호·영문·국문은 위에 붙고, 설명만 아래로 밀어낸다
       (space-between 이면 영문이 카드 가운데로 떠버린다) */
    justify-content: flex-start;
    padding: 30px 26px;
  }
  .page-main .d-slider-track .d-panel-body .eyebrow {
    font-size: 12px;
    letter-spacing: .22em;
    /* 자간 보정용 들여쓰기가 왼쪽 정렬에서는 번호를 밀어낸다 */
    text-indent: 0;
    margin-bottom: 12px;
    filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .5));
  }
  .page-main .d-slider-track .d-panel-desc { margin-top: auto; }
  /* 설명은 세 줄로 끊어 읽히게 */
  .page-main .d-slider-track .d-panel-desc .dl { display: block; }
  .page-main .d-slider-track .d-panel-desc br { display: none; }
  .page-main .d-slider-track .d-panel-title { margin: 0; }
  .page-main .d-slider-track .d-panel-title .d-en {
    font-family: "Montserrat", var(--pretendard);
    font-weight: 500;
    font-size: clamp(53px, 15.6vw, 81px);
    line-height: 1;
    letter-spacing: -0.02em;
    color: #fff;
    /* 영문 글자는 자체 왼쪽 여백이 커서 번호·국문보다 안쪽에서 시작한다.
       그만큼 끌어당겨 세 줄의 시작점을 눈으로도 맞춘다 */
    margin-left: -0.1em;
  }
  /* 번호·국문은 한 단계 물러난 회색으로 */
  .page-main .d-slider-track .d-panel-title .d-ko {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
    color: rgba(255, 255, 255, .55);
    margin-top: 10px;
  }
  .page-main .d-slider-track .d-panel-body .eyebrow {
    background-image: none;
    -webkit-text-fill-color: rgba(255, 255, 255, .55);
    color: rgba(255, 255, 255, .55);
  }
}

/* ---------- SHOWCASE — 검은 바탕에서 한 줄이 오른쪽→왼쪽으로 끝없이 흐른다 ---------- */
/* ---------- RECORD — 결과를 숫자로 ----------
   레퍼런스처럼 제목은 좌상단, 설명·버튼은 우상단, 숫자는 아래로 넓게 편다.
   배경은 점과 선이 천천히 흐르는 캔버스 (script.js 6b) */
/* Record 와 Process 를 함께 덮는 검정 바탕 — 빛 덩어리가 여기에 산다.
   섹션 안에 두면 경계에서 잘려 뚝 끊겨 보인다 */
.rc-field {
  --rc-dark: 0;                   /* Record 가 검정이 될 때 1 로 바뀐다 */
  position: relative;
  background: #000;
  overflow: hidden;
}
.rc-field.is-dark { --rc-dark: 1; }

.record {
  /* 흰 배경으로 시작해, 숫자 카드에 닿으면 검정으로 바뀐다 (script.js 6b) */
  --rc-fg: #111;
  --rc-card-bg: rgba(0, 0, 0, .03);
  --rc-card-line: rgba(0, 0, 0, .09);
  --rc-desc: rgba(0, 0, 0, .5);
  --rc-dark: 0;                   /* 검정일 때 1 — 빛과 눌림이 이 값을 따른다 */
  position: relative;
  background: #fefefe;
  color: var(--rc-fg);
  overflow: hidden;
  transition: background-color .55s ease, color .55s ease;
  padding: clamp(84px, 12vh, 140px) 0 clamp(76px, 10vh, 130px);
  min-height: clamp(440px, 66vh, 700px);
  display: flex;
  align-items: stretch;
}
.record.is-dark {
  --rc-fg: #fff;
  --rc-card-bg: rgba(255, 255, 255, .035);
  --rc-card-line: rgba(255, 255, 255, .07);
  --rc-desc: rgba(255, 255, 255, .5);
  --rc-dark: 1;
  background: transparent;        /* 아래 바탕의 빛이 비쳐 올라온다 */
}
/* 라벨은 배경에 맞춰 밝은 메탈릭으로 갈아탄다 */
.record .eyebrow { background-image: var(--grad-label); }
.record.is-dark .eyebrow { background-image: var(--grad-label-on-dark); }
/* 배경 — 검정 위에 빛 덩어리 몇 개가 아주 천천히 흐른다 */
.rc-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  /* 흰 구간에서는 감췄다가 검정이 될 때 배어 나온다 (script.js 6b 가 --rc-dark 를 준다) */
  opacity: var(--rc-dark, 1);
  transition: opacity .55s ease;
}
.rc-glow {
  position: absolute;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  /* 크게 흐려 테두리가 보이지 않게 — 원 두 개가 아니라 번지는 빛으로 읽혀야 한다 */
  filter: blur(96px);
  will-change: transform, opacity;
}
/* 색은 Philosophy 원 안의 빛과 같은 계열 — 왼쪽은 핑크, 오른쪽은 라벤더.
   덩어리를 크게 키우고 짙게 흐려 '원' 이 아니라 번지는 빛으로 보이게 한다.
   초당 20px 안팎으로 아주 느리게 오가고, 두 주기를 어긋나게 잡아
   같은 그림이 반복돼 보이지 않는다 */
/* 둘의 크기를 비슷하게 맞추고, 각자 심지가 화면 안에 들어오도록 자리를 잡는다.
   왼쪽 위에 코랄, 오른쪽 아래에 라벤더 — 서로 반대 방향으로 오간다 */
.rc-glow-1 {
  width: 66%; left: -8%; top: -10%;
  background: radial-gradient(closest-side, rgba(255, 138, 128, .58), rgba(255, 138, 128, 0) 72%);
  animation: rc-drift-1 33s ease-in-out infinite;
}
.rc-glow-2 {
  width: 62%; right: -8%; top: 20%;
  background: radial-gradient(closest-side, rgba(146, 104, 240, .55), rgba(146, 104, 240, 0) 72%);
  animation: rc-drift-2 42s ease-in-out infinite;
}
@keyframes rc-drift-1 {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: .92; }
  27%  { transform: translate3d(30%, 19%, 0) scale(1.14); opacity: .74; }
  54%  { transform: translate3d(46%, -11%, 0) scale(.93); opacity: 1; }
  79%  { transform: translate3d(16%, -21%, 0) scale(1.17); opacity: .82; }
  100% { transform: translate3d(0, 0, 0) scale(1); opacity: .92; }
}
@keyframes rc-drift-2 {
  0%   { transform: translate3d(0, 0, 0) scale(1.05); opacity: 1; }
  24%  { transform: translate3d(-35%, -21%, 0) scale(.94); opacity: .76; }
  52%  { transform: translate3d(-13%, -42%, 0) scale(1.16); opacity: .95; }
  78%  { transform: translate3d(-43%, -9%, 0) scale(1); opacity: .82; }
  100% { transform: translate3d(0, 0, 0) scale(1.05); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .rc-glow { animation: none; }
}
/* 빛 위에서도 글자가 또렷하도록 위·아래를 눌러준다 */
.rc-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--rc-dark);
  transition: opacity .55s ease;
  background:
    radial-gradient(135% 95% at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,.42) 82%),
    /* 위·아래 끝은 완전한 검정으로 — 빛이 앞뒤 섹션으로 새지 않게 한다 */
    linear-gradient(180deg,
      #000 0%, rgba(0,0,0,.3) 8%, rgba(0,0,0,0) 26%,
      rgba(0,0,0,0) 62%, rgba(0,0,0,.55) 86%, #000 100%);
}
.rc-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(34px, 5.5vh, 66px);
  width: 100%;
}
/* 머리말 — 한 줄짜리 제목을 가운데에 둔다 */
.rc-head { text-align: center; }
.rc-title { color: var(--rc-fg); margin: 0; }
.rc-title .pi { white-space: nowrap; }
/* 기준 — 카드 세 장. 위에 낱말, 아래에 항목명 */
.rc-figs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 26px);
}
.rc-fig {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(40px, 7vh, 76px);
  min-height: clamp(170px, 22vh, 240px);
  padding: clamp(24px, 2.4vw, 38px);
  background: var(--rc-card-bg);
  border: 1px solid var(--rc-card-line);
  border-radius: 4px;
  /* 빈 카드만 먼저 떠 있으면 이상하다 — 낱말과 함께 나타난다 */
  opacity: 0;
  transition: background-color .55s ease, border-color .55s ease, opacity .5s ease;
}
.rc-fig.in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .rc-fig { opacity: 1; }
}
/* 카드 아래쪽 — 항목명과 그 아래 한 줄 설명 */
.rc-foot { display: flex; flex-direction: column; gap: 9px; }
.rc-cap {
  font-weight: 500;
  font-size: clamp(12px, 1vw, 14px);
  letter-spacing: .01em;
  color: #cbb994;                 /* Philosophy 의 빛과 같은 샴페인 톤 */
}
.rc-desc {
  font-weight: 300;
  font-size: clamp(12px, .95vw, 13.5px);
  line-height: 1.62;
  letter-spacing: -0.01em;
  color: var(--rc-desc);
  word-break: keep-all;
}
/* 낱말이 아래에서 솟아오르도록 넘치는 부분을 잘라 둔다 */
.rc-keywrap {
  display: block;
  overflow: hidden;
  padding-bottom: .08em;        /* 밑으로 삐죽한 획이 잘리지 않게 */
}
.rc-key {
  display: inline-block;
  font-family: var(--pretendard);
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--rc-fg);
  white-space: nowrap;
  transform: translateY(115%);
  opacity: 0;
  transition: transform .85s cubic-bezier(.16, .84, .28, 1), opacity .5s ease;
  will-change: transform;
}
.rc-fig.in .rc-key { transform: none; opacity: 1; }
/* 왼쪽부터 차례로 — 한꺼번에 올라오면 밋밋하다 */
.rc-fig:nth-child(2) .rc-key { transition-delay: .12s; }
.rc-fig:nth-child(3) .rc-key { transition-delay: .24s; }
/* 항목명·설명도 살짝 먼저 뜬다 */
.rc-foot {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.16, .84, .28, 1);
}
.rc-fig.in .rc-foot { opacity: 1; transform: none; }
.rc-fig:nth-child(2) .rc-foot { transition-delay: .12s; }
.rc-fig:nth-child(3) .rc-foot { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .rc-key, .rc-foot { transition: none; transform: none; opacity: 1; }
}

@media (max-width: 700px) {
  .record { min-height: 0; padding: clamp(76px, 11vh, 120px) 0 clamp(70px, 10vh, 110px); }
  /* 좁은 화면에서는 바탕이 세로로 아주 길어져(카드가 세로로 쌓인다) 빛이 성기게 놓인다.
     화면 폭의 두 배로 키우고, 코랄은 기준 카드 위·라벤더는 Process 머리말 쪽에 앉힌다 */
  .rc-glow-1 {
    width: 200%; left: -55%; top: 2%;
    background: radial-gradient(closest-side, rgba(255, 138, 128, .66), rgba(255, 138, 128, 0) 72%);
  }
  .rc-glow-2 {
    width: 185%; right: -60%; top: 30%;
    background: radial-gradient(closest-side, rgba(146, 104, 240, .62), rgba(146, 104, 240, 0) 72%);
  }

  .rc-figs { grid-template-columns: 1fr; gap: 12px; }
  .rc-fig {
    min-height: 0;
    gap: 26px;
    padding: 22px 20px;
  }
  .rc-key { font-size: clamp(32px, 9.4vw, 44px); }
  /* 좁은 화면에서는 vw 기준으로 계산된 크기가 너무 작아진다 — 읽히는 크기로 올린다 */
  .rc-cap { font-size: 15px; }
  .rc-desc { font-size: 14.5px; line-height: 1.7; }

  /* 모바일 머리말 — 가운데 정렬, 들여쓰기는 카드 좌우 여백과 같게
     (.wrap { padding: 0 22px } 이 뒤에 오므로 선택자를 한 단계 높인다) */
  .philosophy .philosophy-inner,
  .different-full .different-head {
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
  }
  .process { padding-top: 26px; }
}

/* ---------- PROCESS (black) ---------- */
.process { background: transparent; overflow: hidden; padding-top: clamp(40px, 6vh, 108px); }
.process-bg { display: none; }   /* 섹션 경계에 색 띠가 생겨 제거 */
.process .wrap { position: relative; z-index: 1; }
.process-head { text-align: center; margin-bottom: var(--gap-block); }
.process-head .eyebrow { margin-bottom: var(--gap-label); }
.process-head .display-heading { color: #fff; }
.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  counter-reset: step;
}
/* 카드 테두리를 따라 은색 선이 은은하게 도는 효과 (호버 없음) */
@property --step-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.step {
  position: relative;
  isolation: isolate;
  padding: 40px 26px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .03);
  border: 0;
}
.step::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;                       /* 선 두께 */
  background: conic-gradient(from var(--step-angle),
    rgba(255, 255, 255, .09) 0deg,
    rgba(255, 255, 255, .09) 180deg,
    rgba(190, 198, 208, .38) 270deg,
    rgba(226, 232, 238, .85) 318deg,
    rgba(190, 198, 208, .38) 348deg,
    rgba(255, 255, 255, .09) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: step-rotate 9s linear infinite;
  pointer-events: none;
}
/* 카드마다 시작 시점을 달리해 자연스럽게 */
.step:nth-child(2)::before { animation-delay: -2.2s; }
.step:nth-child(3)::before { animation-delay: -4.4s; }
.step:nth-child(4)::before { animation-delay: -6.6s; }
@keyframes step-rotate { to { --step-angle: 360deg; } }
.step-num {
  display: block;
  font-family: var(--pretendard);
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  margin-bottom: 22px;
  background: var(--grad-2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.step-title {
  font-weight: 600;
  font-size: 21px;
  color: #fff;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.step-desc {
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  color: var(--gray);
  letter-spacing: -0.01em;
}

/* ---------- ACCESSION — 문의 폼 (black) ---------- */
.accession { background: #000; color: #fff; }
.accession-inner { width: 100%; padding: 0; overflow: hidden; }
/* 화면 폭을 정확히 꽉 채우는 타이틀 (크기는 JS가 계산) */
.ac-title {
  font-family: var(--pretendard);
  font-weight: 600;
  font-size: 12vw;            /* JS 로드 전 대략치 */
  line-height: 0.92;
  letter-spacing: -0.045em;
  text-align: center;
  white-space: nowrap;
  color: #fff;
}
/* 그라데이션은 '글자를 가진 요소'에 직접 적용해야 한다.
   (부모에 걸면 자식의 filter 때문에 클리핑된 배경이 보이지 않음)
   또한 실제 글자 폭을 재려면 inline-block 이어야 한다. */
.ac-title .pi {
  display: inline-block;
  background: var(--grad);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: label-shimmer 5.5s ease-in-out infinite;
}
@keyframes label-shimmer {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

.ac-form { margin-top: clamp(56px, 8vh, 96px); max-width: 1000px; }
.ac-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 4vw, 56px) clamp(28px, 4vw, 64px);
}
.ac-span { grid-column: 1 / -1; }

.ac-field { display: flex; flex-direction: column; }
.ac-field label {
  font-weight: 400;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, .55);
  margin-bottom: 14px;
}
.ac-field label span { color: #fff; }
.ac-field input,
.ac-field select,
.ac-field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .32);
  border-radius: 0;
  padding: 0 0 12px;
  font-family: var(--pretendard);
  font-weight: 400;
  font-size: 17px;
  color: #fff;
  letter-spacing: -0.01em;
  transition: border-color .3s ease;
  appearance: none;
  -webkit-appearance: none;
}
.ac-field select {
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.6) 50%),
                    linear-gradient(135deg, rgba(255,255,255,.6) 50%, transparent 50%);
  background-position: right 8px center, right 2px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.ac-field select option { background: #111; color: #fff; }
.ac-field input::placeholder,
.ac-field textarea::placeholder { color: rgba(255, 255, 255, .28); }
.ac-field textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.7;
  padding-top: 4px;
}
.ac-field input:focus,
.ac-field select:focus,
.ac-field textarea:focus { outline: none; border-bottom-color: #fff; }
.ac-field.invalid input,
.ac-field.invalid select,
.ac-field.invalid textarea { border-bottom-color: #e0567a; }

.ac-block { margin-top: clamp(46px, 6vh, 76px); }
.ac-q {
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 22px;
}
/* ---- 성별 — 아래 항목이 이 선택에 따라 갈리므로 폼 맨 위에 둔다 (script.js 8) ---- */
.ac-gender { margin-bottom: clamp(30px, 4vw, 56px); }
.ac-gender-opts { display: flex; gap: 12px; }
.ac-gender-opts .ac-chip {
  flex: 0 1 200px;
  padding: 17px 22px;
  font-size: 16px;
  text-align: center;
}
/* 고른 성별에 해당하는 부분만 남긴다 */
.ac-form [data-only] { display: none; }
.ac-form[data-sex="male"] [data-only="male"],
.ac-form[data-sex="female"] [data-only="female"] { display: flex; }
.ac-form[data-sex="male"] .ac-block[data-only="male"],
.ac-form[data-sex="female"] .ac-block[data-only="female"] { display: block; }
/* 성별을 고르기 전에는 아래가 잠겨 있다 — 먼저 고르라는 신호 */
.ac-rest { transition: opacity .3s ease, filter .3s ease; }
.ac-form:not([data-sex]) .ac-rest {
  opacity: .3;
  filter: grayscale(1);
  pointer-events: none;
}

.ac-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.ac-chip {
  font-family: var(--pretendard);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, .82);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 4px;
  padding: 15px 22px;      /* 8개가 한 줄에 들어가도록 좌우 여백을 줄임 */
  flex: 1 1 auto;          /* 남는 공간을 나눠 가져 줄 끝(입력칸 밑줄)까지 채움 */
  white-space: nowrap;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.ac-chip:hover { background: rgba(255, 255, 255, .14); }
.ac-chip.on { background: #fff; color: #000; border-color: #fff; }

/* ---- 개인정보 수집·이용 동의 — 보내기 전에 반드시 한 번 눌러야 하는 자리 ---- */
.ac-agree {
  margin-top: clamp(40px, 5vh, 64px);
  padding: 22px 24px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 6px;
  transition: border-color .25s ease;
}
/* 동의하지 않고 보내려 하면 테두리로 짚어 준다 */
.ac-agree.is-bad { border-color: #e0567a; }
/* 평소에는 체크 한 줄만 보이고, '내용 보기' 를 눌러야 아래가 펼쳐진다 */
.ac-agree-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ac-agree-check {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fff;
  cursor: pointer;
  user-select: none;
}
/* 기본 체크박스는 검은 배경에서 흰 네모로 튄다. 직접 칠해 가라앉힌다 */
.ac-agree-check input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, .45);
  border-radius: 4px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.ac-agree-check input:hover { border-color: #fff; }
.ac-agree-check input:checked {
  background-color: #fff;
  border-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5,8.4 6.4,11.3 12.5,5'/%3E%3C/svg%3E");
}
.ac-agree-check input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ac-agree-check b { font-weight: 700; }
/* 조용한 글자 단추. 동의 체크와 헷갈리지 않게 오른쪽 끝에 둔다 */
.ac-agree-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--pretendard);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, .55);
  cursor: pointer;
  transition: color .25s ease;
}
.ac-agree-more:hover { color: #fff; }
.ac-agree-more svg {
  width: 15px;
  height: 15px;
  transition: transform .25s ease;
}
/* 펼쳐져 있으면 화살표가 위를 본다 */
.ac-agree-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.ac-agree-terms[hidden] { display: none; }
.ac-agree-terms {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, .55);
}
.ac-agree-terms b {
  display: inline-block;
  min-width: 68px;
  margin-right: 6px;
  font-weight: 600;
  color: rgba(255, 255, 255, .8);
}
@media (max-width: 700px) {
  .ac-agree { padding: 18px 18px; }
  /* 좁은 화면에서는 '내용 보기' 가 아래로 내려가 두 줄이 된다 */
  .ac-agree-row { flex-wrap: wrap; gap: 10px 16px; }
  .ac-agree-check { font-size: 15px; }
  .ac-agree-more { font-size: 13px; }
  .ac-agree-terms { font-size: 13px; }
  .ac-agree-terms b { display: block; }
}

.ac-actions {
  margin-top: clamp(48px, 6vh, 80px);
  min-height: 214px;              /* 원으로 커져도 레이아웃이 흔들리지 않게 */
  display: flex;
  flex-direction: column;
  align-items: center;            /* 버튼 중앙 정렬 */
  justify-content: center;
  gap: 18px;
}
.ac-submit {
  font-family: var(--pretendard);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #000;
  background: #fff;
  border: 0;
  padding: 0;
  width: 230px;
  height: 64px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: width .45s cubic-bezier(.2,.8,.2,1),
              height .45s cubic-bezier(.2,.8,.2,1),
              border-radius .45s cubic-bezier(.2,.8,.2,1),
              background-color .35s ease,
              color .35s ease,
              box-shadow .35s ease;
}
/* 호버하면 둥근 사각형이 '반전된 검정 원'으로 변한다 */
.ac-submit:hover {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #000;
  color: #fff;
  box-shadow: inset 0 0 0 1.5px #fff;   /* 흰 테두리 (크기 변화 없음) */
}
/* 접수 안내 문구 — 검은 배경에서 묻히지 않도록 흰색으로 또렷하게 */
.ac-note {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
  min-height: 22px;
}
.ac-note.is-wait { font-weight: 500; color: rgba(255, 255, 255, .7); }
.ac-note.is-warn { color: #ff9b9b; }

/* 모바일: Let's 는 왼쪽, Connect 는 오른쪽에 붙여 두 줄로 */
@media (max-width: 700px) {
  .ac-title { white-space: normal; }
  .ac-title .pi { display: block; width: 100%; }
  .ac-word { display: block; }
  .ac-word:first-child { text-align: left; }
  .ac-word:last-child { text-align: right; }
}

@media (max-width: 720px) {
  .ac-grid { grid-template-columns: 1fr; }
  .ac-chip { padding: 13px 22px; font-size: 14px; }
  .ac-gender-opts .ac-chip { flex: 1 1 0; padding: 15px 18px; font-size: 15px; }
}

/* ---------- FOOTER — 스크롤하면 아래에서 드러나는 고정 푸터 ---------- */
/* 본문은 푸터 위에 얹혀 스크롤되고, 다 지나가면 푸터가 드러난다 */
.page-body {
  position: relative;
  z-index: 1;
  background: #fefefe;
  /* 아래 곡선 장식이 화면 밖으로 6%씩 튀어나와 좌우 스크롤이 생기던 것을 막는다
     (clip 은 세로 방향은 그대로 보여주므로 곡선은 살아 있다) */
  overflow-x: clip;
}
/* 마지막 섹션 아래쪽을 곡선으로 파내어 푸터 경계가 휘어 보이게 */
.page-body::after {
  content: "";
  position: absolute;
  left: -6%;
  bottom: -70px;
  width: 112%;
  height: 150px;
  background: #000;              /* 마지막 섹션(Accession)과 같은 색 */
  border-radius: 0 0 50% 50%;
  pointer-events: none;
}

.site-footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 0;
  background: #f2f2f0;
  color: #111;
  display: flex;
  align-items: flex-end;
  padding: clamp(70px, 12vh, 150px) clamp(20px, 4vw, 64px) clamp(24px, 3vh, 40px);
}
.foot-inner { width: 100%; }

.foot-lead {
  display: inline-flex;
  align-items: flex-end;
  gap: clamp(14px, 1.6vw, 28px);
  color: #111;
}
.foot-lead-text {
  font-family: var(--pretendard);
  font-weight: 500;
  font-size: clamp(30px, 5.4vw, 88px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.foot-tagline {
  margin-top: clamp(34px, 6vh, 70px);
  text-align: right;
  font-weight: 700;
  font-size: clamp(15px, 1.5vw, 22px);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #111;
}

.foot-bottom {
  margin-top: clamp(26px, 4vh, 48px);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 18px;
}
.foot-biz {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-weight: 600;
  font-size: clamp(12px, .95vw, 15px);
  color: #333;
  letter-spacing: -0.01em;
}
.foot-addr {
  margin-top: 6px;
  font-weight: 600;
  font-size: clamp(12px, .95vw, 15px);
  color: #333;
  letter-spacing: -0.01em;
}
.foot-copy {
  font-family: "Montserrat", var(--pretendard);
  font-weight: 500;
  font-size: clamp(12px, .95vw, 15px);
  color: #444;
  text-align: center;
}

@media (max-width: 760px) {
  .foot-tagline { text-align: left; }
  .foot-bottom { grid-template-columns: 1fr; gap: 14px; }
  .foot-copy { text-align: left; }
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.reveal.in { opacity: 1; transform: none; }
.cards .card.reveal { transition-delay: var(--d, 0s); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  [data-textreveal] .pi { opacity: 1; transform: none; filter: none; transition: none; }
  .d-pill::before { animation: none; }
  .step::before { animation: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Collapse the header menu into a slide-in panel */
@media (max-width: 1024px) {
  .logo img { height: 26px; }
  .nav-toggle { display: flex; }
  .main-nav {
    position: fixed;
    top: 0; right: 0; left: auto;
    height: 100vh;
    width: min(82vw, 340px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 30px;
    margin: 0;
    padding: 40px 44px;
    background: #fff;
    box-shadow: -18px 0 44px rgba(0, 0, 0, .22);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transform: translateX(100%);
    transition: transform .4s cubic-bezier(.2,.7,.2,1);
    z-index: 90;
  }
  .main-nav.open { transform: translateX(0); }
  .main-nav a { font-size: 24px; font-weight: 500; color: #1a1a1a; }
  /* 흰 패널 위에서는 흰색 글로우 대신 어두운 강조로 바꾼다 */
  .main-nav a:hover,
  .main-nav a:active {
    color: #000;
    text-shadow: none;
  }
  /* 패널과 형제 노드라 z-index 90 에 가려진다. 닫기 X 를 패널 위로 올린다 */
  .nav-toggle { position: relative; z-index: 95; }
  .nav-toggle[aria-expanded="true"] span { background: #111; }
}

@media (max-width: 900px) {
  /* 정사각 두 칸을 위로 붙인다. 남는 높이가 칸 사이 틈으로 벌어지지 않게 start 정렬 */
  .hero { grid-template-columns: 1fr; align-content: start; }
  /* 세로로 쌓이는 게이트는 각 칸을 1:1 정사각으로 */
  .hero-half { min-height: 0; aspect-ratio: 1 / 1; }
  /* 좁은 화면에서는 버튼을 제목 쪽으로 당긴다
     (제목 아래 여백 + 버튼 자체의 위 여백이 겹쳐 벌어져 있었다) */
  .hero-title { margin-bottom: 22px; }
  .hero-more { margin-top: 12px; }
  .philosophy-grid { grid-template-columns: 1fr; }
  .philosophy-media { order: -1; }
  .philo-video { width: 70%; }
  .cards { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .showcase-gallery { grid-template-columns: 1fr; }
  /* 모바일 헤더는 위·아래로 6px씩 낮춘다 (기본/스크롤 상태 모두) */
  .site-header { padding: 12px 22px; }
  .site-header.scrolled,
  .page-solid-header .site-header { padding: 10px 40px; }
  .page-content .site-header.scrolled { padding: 10px 22px; }
  .wrap { padding: 0 22px; }
}

@media (max-width: 520px) {
  .logo img { height: 22px; }
  .btn-pill { padding: 16px 40px; font-size: 15px; }
  .header-cta { display: none; }
  /* 폭을 400px 로 묶어두면 Record 카드보다 좁아져 두 섹션이 어긋난다 —
     좌우 여백은 아래에서 두 섹션에 같은 값으로 준다 */
  .steps { grid-template-columns: 1fr; }
  /* 카드가 화면 끝에 너무 붙지 않도록 좌우를 조금 더 들인다 (두 섹션 같은 값) */
  .record .rc-inner,
  .process .wrap { padding-left: 32px; padding-right: 32px; }
}