/* core.css — 자동 생성물. 고치지 마라.
   원본: tokens.css + base.css + layout.css + motion.css
   재생성: node bundle-css.cjs */
@layer reset, tokens, typography, layout, fluid, components, motion, dlock;

/* ===== tokens.css ===== */
/* [E-07] ============================================================ 도도앤프렌즈 —  */

:root {
  /* ---- color · locked ---- */
  --brand:        #e74947;  /* 헤드라인 강조 36:768 / 36:769 */
  --brand-cta:    #e35457;  /* 플로팅 상담 배지 36:1175 */
  --hero-bg:      #f9dfd3;  /* main visual 36:765 */
  --ink:          #000000;
  --ink-2:        #222222;  /* 게시판 제목 */
  --ink-3:        #555555;  /* 게시판 날짜 */
  --footer-bg:    #111111;
  --footer-muted: #a0a0a0;
  --line:         #dddddd;
  --white:        #ffffff;

  /* 서브 페이지 팔레트 · locked (수확된 섹션 배경) */
  --tint-pink:    #fff1f0;
  --tint-violet:  #eee6fe;
  --tint-sky:     #d4f0fe;
  --tint-amber:   #fdebbd;
  --stage-1:      #fff9e6;
  --stage-2:      #eef8f3;
  --stage-3:      #eef2fc;
  --stage-4:      #fcf2ec;
  --stage-5:      #fdf0f1;

  /* ---- geometry · locked ---- */
  --design-w:   1920;
  --container:  1600px;   /* header · footer · 대부분 섹션 */
  --container-narrow: 1400px; /* 공지사항 88:884 */
  --header-h:   120px;
  --sub-visual-h: 400px;

  /* gutter: 1920 에서 160px, 좁아지면 줄어든다 · inference */
  --gutter: clamp(20px, 8.33vw, 160px);

  /* ---- radius / shadow · locked ---- */
  --r-sm: 6px;
  --r-md: 20px;
  --r-lg: 30px;
  --r-pill: 100px;
  --shadow-card: 0 12px 12px rgba(0, 0, 0, .03);
  --shadow-float: 10px 10px 15px rgba(0, 0, 0, .15);

  /* ---- type scale ----
     시안 폭(1920)에서는 시안 값 그대로, 좁아질수록 비례 축소.
     clamp 하한은 모바일 가독 하한(inference), 상한은 시안 값(locked). */
  --fs-display: clamp(46px, 6.25vw, 120px);   /* 36:768 English, Unlocked */
  --fs-h1:      clamp(28px, 2.40vw, 46px);    /* 36:769 */
  --fs-h2:      clamp(28px, 3.13vw, 60px);    /* 섹션 헤딩 */
  --fs-h3:      clamp(22px, 1.88vw, 36px);
  --fs-h4:      clamp(19px, 1.67vw, 32px);
  --fs-lead:    clamp(16px, 1.15vw, 22px);    /* 36:770 · GNB */
  --fs-subtitle: clamp(16px, 1.25vw, 24px);   /* 36:783 · 36:838 · 섹션 부제 */
  --fs-body:    clamp(15px, 0.94vw, 18px);
  --fs-sm:      clamp(13px, 0.83vw, 16px);
  --fs-xs:      clamp(12px, 0.73vw, 14px);
  --fs-menu:    clamp(16px, 1.15vw, 22px);
  --fs-fnav:    clamp(17px, 1.25vw, 24px);

  /* Gmarket Sans ascender 시각 보정 — 위 여백을 아래보다 em 단위로 추가 (글자 크기에 비례) */
  --optical-y: 0.1875em;

  /* ---- spacing · 섹션 리듬 (시안 150 상하 패딩 기준) ---- */
  --sec-y:  clamp(56px, 7.81vw, 150px);
  --gap-xs: clamp(8px,  0.78vw, 15px);
  --gap-sm: clamp(12px, 1.04vw, 20px);
  --gap-md: clamp(20px, 1.56vw, 30px);
  --gap-lg: clamp(28px, 2.60vw, 50px);
  --gap-xl: clamp(40px, 3.65vw, 70px);

  /* ---- motion · 사용자 선택: 강도=강하게 / 재생=재진입 재생 ---- */
  --mo-fast:  .35s;
  --mo-base:  0.5s;
  --mo-slow:  0.8s;
  --mo-stagger: 0.1s;
  --mo-enter: 0.5s;           /* 서브·일반 스크롤 등장 duration */
  --mo-enter-shift: 30px;     /* reveal 규칙과 동일 이동량 */
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-enter: cubic-bezier(.33, 1, .68, 1); /* power2.out — 0.5s에 맞는 부드러운 진입 */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);      /* ease-out-back · 끝에서 살짝 넘어감 */
  --ease-in-back: cubic-bezier(.36, 0, .66, -.56);   /* ease-in-back · 시작에서 뒤로 당겼다 진행 */

  /* 강도 축 (motion-grammar 4축) — tilt·rot 등 보조 연출 */
  --mo-shift: 64px;    /* translate 진폭 */
  --mo-scale: .88;     /* scale 시작값 */
  --mo-rot:   4deg;    /* rotate 진폭 */
  --mo-blur:  10px;    /* blur 진폭 */

  --z-header: 100;
  --z-float:  90;
  --z-drawer: 200;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --mo-fast: .01ms; --mo-base: .01ms; --mo-slow: .01ms; --mo-stagger: 0ms;
    --mo-shift: 0px; --mo-scale: 1; --mo-rot: 0deg; --mo-blur: 0px;
  }
}

@media (max-width: 575px) {
  :root {
    --gutter: 30px;
  }
}

/* ===== base.css ===== */
/* ============================================================
   base — reset · 폰트 · 컨테이너 · 공용 컴포넌트
   ============================================================ */

/* [E-06] ---- 웹폰트 (자체 호스팅) ---------------------------------------- Gmarket San */
@font-face {
  font-family: 'Gmarket Sans';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/GmarketSansLight.woff2') format('woff2');
}
@font-face {
  font-family: 'Gmarket Sans';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/GmarketSansMedium.woff2') format('woff2');
}
@font-face {
  font-family: 'Gmarket Sans';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/GmarketSansBold.woff2') format('woff2');
}

:root {
  --ff-base: 'Gmarket Sans', 'Apple SD Gothic Neo', 'Malgun Gothic',
             'Noto Sans KR', 'Noto Sans CJK KR', sans-serif;
  --ff-display: 'All Round Gothic', 'Gmarket Sans', 'Noto Sans KR',
                'Noto Sans CJK KR', sans-serif;
}

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
/* ★ scroll-behavior 를 html 전역에 두지 않는다.
   전역으로 두면 `scrollIntoView()` 같은 **프로그램 스크롤**까지 애니메이션이 되어
   포커스 이동·건너뛰기 링크·검증 도구가 목표 지점에 늦게 도달한다(실측: 400ms 지연).
   앵커 이동의 부드러운 스크롤은 site.js 가 명시적으로 처리한다. */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding-top: var(--header-h);
  font-family: var(--ff-base);
  font-weight: 500;
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;          /* 장식 도형이 화면 밖으로 나가도 가로 스크롤 금지 */
  word-break: keep-all;         /* 한글 어절 단위 줄바꿈 */
  overflow-wrap: anywhere;
}

h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: #f38583;
  color: var(--white);
}
::-moz-selection {
  background: #f38583;
  color: var(--white);
}

/* ---- skip link (본문 바로가기 · 시안 36:13780 계열 관행) ---- */
.skip {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  z-index: 999; background: var(--ink); color: var(--white);
  padding: 10px 24px; border-radius: 0 0 var(--r-sm) var(--r-sm);
}
/* 포커스 전에는 화면 밖으로 밀지 않고 **크기를 없앤다** —
   조상 클리핑 상자 밖으로 나가면 "텍스트 잘림" 으로 잡힌다(F7 실측). */
.skip:not(:focus):not(:focus-within) {
  width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---- layout ---- */
/* --container 는 **콘텐츠 폭**이다(시안 1600). 거터는 그 바깥이므로
   상한은 콘텐츠 + 좌우 거터가 된다 — 1920 에서 정확히 1600 콘텐츠가 나온다. */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }
/* 시안 폭 이상으로 넓어져도 콘텐츠는 더 커지지 않는다 = 상한 + 가운데 정렬 */

.section { position: relative; padding-block: var(--sec-y); }
.section--flush { padding-block: 0; }
.section-inner { position: relative; z-index: 1; }

/* 장식 도형: 레이아웃에 영향 주지 않고 뒤에 깔린다 */
.deco {
  position: absolute; pointer-events: none; user-select: none;
  z-index: 0;
}

/* ---- typography helpers ---- */
.display { font-family: var(--ff-display); font-weight: 700;
           font-size: var(--fs-display); line-height: 1; letter-spacing: -.01em; }
.h1 { font-size: var(--fs-h1); line-height: 1.4; font-weight: 500; }
.h2 { font-size: var(--fs-h2); line-height: 1.4; font-weight: 700; }
.h3 { font-size: var(--fs-h3); line-height: 1.4; font-weight: 700; }
.h4 { font-size: var(--fs-h4); line-height: 1.4; font-weight: 700; }
.lead { font-size: var(--fs-lead); line-height: 1.6; }
.body { font-size: var(--fs-body); line-height: 1.7; }
.sm { font-size: var(--fs-sm); }
.accent { color: var(--brand); }
.center { text-align: center; }

/* 섹션 공통 타이틀 블록 (시안: h2 + 부제 · gap 30) */
.sec-title { display: flex; flex-direction: column; gap: var(--gap-md);
             align-items: center; text-align: center; }
.sec-title p { font-size: var(--fs-subtitle); color: var(--ink); }

/* ---- 버튼 (시안 36:784 / 36:1003 · w297 h64 · pill) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: var(--gap-sm);
  min-height: clamp(48px, 3.33vw, 64px);
  padding-inline: clamp(20px, 1.56vw, 30px);
  border-radius: var(--r-pill);
  border: 1px solid currentColor;
  font-size: var(--fs-body); font-weight: 500;
  background: transparent;
  transition: color var(--mo-base) var(--ease-out),
              border-color var(--mo-base) var(--ease-out),
              box-shadow var(--mo-fast) var(--ease-out);
}
.btn .ico { width: 24px; height: 24px; flex: none;
            transition: transform var(--mo-fast) var(--ease-back); }
/* Gmarket Sans — 버튼 라벨이 위로 치우친 시각 보정 */
.btn > span,
.cform__submit > span,
.fd-search__btn > span,
.fd-form__submit > span,
.fd-card__btn > span,
.icta__btn > span { padding-top: var(--optical-y); }
/* 호버는 **박스를 움직이지 않는다**(§P39) — ::before 가 왼쪽 밖에서 오른쪽으로 채운다. */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: -1;
  background: var(--brand);
  transform: translate3d(-101%, 0, 0);
  transition: transform var(--mo-base) var(--ease-out);
}
.btn:hover {
  color: var(--white);
  border-color: var(--brand);
}
.btn:hover::before { transform: translate3d(0, 0, 0); }
.btn:hover .ico { transform: scale(1.18); }
.btn--solid { background: var(--brand); border-color: var(--brand); color: var(--white); }
.btn--solid::before { background: #d13e3c; }
.btn--solid:hover {
  color: var(--white);
  background: var(--brand);
  box-shadow: 0 10px 24px rgba(231, 73, 71, .28);
}
.btn--ghost-white { color: var(--white); border-color: var(--white); }
.btn--ghost-white::before { background: var(--white); }
.btn--ghost-white:hover {
  color: var(--ink);
  border-color: var(--white);
  background: transparent;
}
.btn--ghost-white:hover .ico { transform: scale(1.18); }

/* ---- 라운드 CTA sweep hover (페이지별 버튼 · .btn 과 동일 패턴) ---- */
.cform__submit,
.fd-search__btn,
.fd-form__submit,
.fd-card__btn,
.icta__btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cform__submit::before,
.fd-search__btn::before,
.fd-form__submit::before,
.fd-card__btn::before,
.icta__btn::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: -1;
  transform: translate3d(-101%, 0, 0);
  transition: transform var(--mo-base) var(--ease-out);
}
.cform__submit::before,
.fd-search__btn::before,
.fd-form__submit::before { background: #d13e3c; }
.fd-card__btn::before,
.icta__btn::before { background: var(--brand-cta); }
.cform__submit:hover::before,
.fd-search__btn:hover::before,
.fd-form__submit:hover::before,
.fd-card__btn:hover::before,
.icta__btn:hover::before { transform: translate3d(0, 0, 0); }
.fd-card__btn:hover,
.icta__btn:hover {
  color: var(--white);
  border-color: var(--brand-cta);
  background: transparent;
}
.fd-card__btn:hover img,
.icta__btn:hover img { filter: brightness(0) invert(1); }

/* ---- 카드 공통 ---- */
.card {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--mo-base) var(--ease-out),
              box-shadow var(--mo-base) var(--ease-out);
}
.card:hover { transform: translateY(-10px); box-shadow: 0 22px 40px rgba(0,0,0,.10); }

.ratio { position: relative; overflow: hidden; }
.ratio > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ratio--contain > img { object-fit: contain; }

/* ---- forms ---- */
.field { display: flex; flex-direction: column; gap: 10px; }
.field > label { font-size: var(--fs-body); font-weight: 500; }
.control {
  height: clamp(52px, 3.13vw, 60px);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding-inline: 20px; background: var(--white); width: 100%;
  transition: border-color var(--mo-fast), box-shadow var(--mo-fast);
}
.control:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(231,73,71,.15); outline: none; }
select.control { appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; padding-right: 48px; }
textarea.control { height: auto; min-height: 160px; padding-block: 18px; resize: vertical; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- 준비 중 안내 페이지 (약관·방침) ---- */
.sub-visual--plain { background: var(--tint-pink); }
.legal .container { display: flex; flex-direction: column; gap: var(--gap-md); align-items: flex-start; }
.legal__note { padding: var(--gap-md); border-radius: var(--r-md);
               background: #fff8f8; border: 1px dashed var(--brand);
               font-size: var(--fs-body); line-height: 1.7; }

/* 강조색 (시안 #e35457) */
.c-cta { color: var(--brand-cta); }

/* 시안이 정한 줄바꿈을 좁은 폭에서 해제하는 유틸 */
@media (max-width: 1279px) { .br-lg { display: none; } }
@media (max-width: 1023px) { .br-md { display: none; } }

/* 시안이 카드별로 지정한 강조색 (sec01 36:815 / 36:820 / 36:825 / 36:830) */
.c-green  { color: #4ea100; }
.c-amber  { color: #efac00; }
.c-blue   { color: #2d80b9; }
.c-violet { color: #7c5db4; }

/* ===== layout.css ===== */
/* ============================================================
   layout — header · GNB · drawer · sub visual · footer · floating CTA
   Figma: header 36:1191 / footer 36:1192
   ============================================================ */

/* ---------- HEADER (시안 1920x120 · py30 · container 1600) ---------- */
.site-header {
  /* sticky + transform hide 는 Lenis 스크롤에서 덜컹거림 — fixed 로 분리 */
  position: fixed; top: 0; left: 0; right: 0; width: 100%;
  z-index: var(--z-header);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition:
    transform var(--mo-base) var(--ease-out),
    box-shadow var(--mo-base) var(--ease-out);
}
.site-header.is-stuck {
  box-shadow: 0 6px 24px rgba(0, 0, 0, .07);
}
/* 아래로 스크롤하면 감춤 · 위로 스크롤하면 즉시 복귀 (강한 모션 · re-enter) */
.site-header.is-hidden { transform: translate3d(0, -100%, 0); }
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}

.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap-md);
  min-height: var(--header-h);
  padding-block: clamp(14px, 1.56vw, 30px);
}

.logo { display: block; width: clamp(180px, 15.78vw, 303px); }
.logo img { width: 100%; height: auto; }

.gnb > ul { display: flex; align-items: center; gap: clamp(24px, 3.65vw, 70px); }
.gnb__item { position: relative; }
.gnb > ul > li > a {
  position: relative; display: inline-block; padding-block: 6px;
  font-size: var(--fs-menu); font-weight: 500; white-space: nowrap;
  transition: color var(--mo-fast) var(--ease-out);
}
.gnb > ul > li > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--brand); border-radius: 3px;
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--mo-fast) var(--ease-out);
}
.gnb > ul > li > a:hover,
.gnb > ul > li > a[aria-current="page"] { color: var(--brand); }
.gnb > ul > li > a:hover::after,
.gnb > ul > li > a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

/* 2뎁스 — opacity/visibility · 20px 아래에서 fade-up */
.gnb__item--has-sub::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px;
}
.gnb__sub {
  position: absolute; top: 100%; left: 50%;
  translate: -50% 20px;
  min-width: clamp(120px, 8.33vw, 160px);
  margin: 0; padding: 10px 0; list-style: none;
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .1);
  opacity: 0; visibility: hidden;
  transition:
    opacity .5s var(--ease-out),
    visibility .5s var(--ease-out),
    translate .5s var(--ease-out);
  z-index: calc(var(--z-header) + 1);
}
.gnb__item--has-sub:hover .gnb__sub,
.gnb__item--has-sub:focus-within .gnb__sub {
  opacity: 1; visibility: visible;
  translate: -50% 0;
}
.gnb__sub a {
  display: block; padding: 8px 20px;
  font-size: clamp(14px, .94vw, 16px); font-weight: 500;
  line-height: 1.4; white-space: nowrap; text-align: center;
  transition: color var(--mo-fast) var(--ease-out), background-color var(--mo-fast) var(--ease-out);
}
.gnb__sub a:hover,
.gnb__sub a[aria-current="page"] { color: var(--brand); background: rgba(227, 84, 87, .06); }
@media (prefers-reduced-motion: reduce) {
  .gnb__sub { transition: none; }
}

/* 햄버거 */
.nav-toggle { display: none; width: 44px; height: 44px; position: relative; }
.nav-toggle span {
  position: absolute; left: 10px; right: 10px; height: 2px; background: var(--ink);
  border-radius: 2px; transition: transform var(--mo-fast) var(--ease-out),
                                   opacity var(--mo-fast) var(--ease-out);
}
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 28px; }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 모바일 드로어 */
.drawer {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  background: var(--white);
  transform: translateX(100%);
  transition: transform var(--mo-base) var(--ease-in-out);
  display: flex; flex-direction: column;
  padding: 96px var(--gutter) 40px;
  overflow-y: auto;
  visibility: hidden;
}
body.nav-open .drawer { transform: none; visibility: visible; }
.drawer ul { display: flex; flex-direction: column; gap: 4px; }
.drawer__item { list-style: none; }
.drawer a {
  display: block; padding: 18px 4px; font-size: clamp(20px, 5vw, 28px); font-weight: 700;
  border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateX(28px);
  transition: opacity var(--mo-base) var(--ease-out), transform var(--mo-base) var(--ease-out);
}
.drawer__item--has-sub > a {
  position: relative;
  padding-right: 40px;
}
.drawer__item--has-sub > a::after {
  content: "";
  position: absolute; right: 4px; top: 50%;
  width: 24px; height: 24px;
  translate: 0 -50%;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1717' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  transition: rotate var(--mo-base) var(--ease-out);
  pointer-events: none;
}
.drawer__item--has-sub.is-open > a::after { rotate: 180deg; }
.drawer__sub {
  list-style: none; margin: 0; padding: 6px 0 10px 12px;
  gap: 0;
  opacity: 0; visibility: hidden; max-height: 0; overflow: hidden;
  transition:
    opacity .4s var(--ease-out),
    visibility .4s var(--ease-out),
    max-height .4s var(--ease-out);
}
.drawer__item--has-sub.is-open .drawer__sub {
  opacity: 1; visibility: visible; max-height: 240px;
  padding-top: 10px;
}
.drawer__sub a {
  font-size: clamp(17px, 4.2vw, 22px); font-weight: 500;
  line-height: 1.35;
  padding: 6px 4px 6px 8px;
  border-bottom: none;
}
.drawer__sub li:last-child a { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
body.nav-open .drawer a { opacity: 1; transform: none; }
body.nav-open .drawer > ul > .drawer__item:nth-child(1) > a { transition-delay: 80ms; }
body.nav-open .drawer > ul > .drawer__item:nth-child(2) > a { transition-delay: 140ms; }
body.nav-open .drawer > ul > .drawer__item:nth-child(3) > a { transition-delay: 200ms; }
body.nav-open .drawer > ul > .drawer__item:nth-child(4) > a { transition-delay: 260ms; }
body.nav-open .drawer > ul > .drawer__item:nth-child(5) > a { transition-delay: 320ms; }
.drawer__close { position: absolute; top: 26px; right: var(--gutter); width: 44px; height: 44px; }
body.nav-open { overflow: hidden; }

@media (max-width: 1023px) {
  :root { --header-h: 58px; }

  .gnb { display: none; }
  .nav-toggle { display: block; }

  .site-header__inner {
    min-height: var(--header-h);
    padding-block: 0;
  }

  .logo { width: clamp(132px, 38vw, 168px); }

  .nav-toggle {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }
  .nav-toggle span:nth-child(1) { top: 12px; }
  .nav-toggle span:nth-child(2) { top: 19px; }
  .nav-toggle span:nth-child(3) { top: 26px; }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .drawer { padding-top: calc(var(--header-h) + 16px); }
  .drawer__close { top: 9px; }
}
@media (min-width: 1024px) { .drawer { display: none; } }

/* ---------- SUB VISUAL (시안 1920x400) ---------- */
.sub-visual {
  position: relative; overflow: hidden;
  min-height: clamp(220px, 20.83vw, 400px);
  display: grid; place-items: center;
  background: var(--hero-bg);
}
.sub-visual__inner { position: relative; z-index: 2; text-align: center;
                     display: flex; flex-direction: column; gap: var(--gap-md); align-items: center; }
.sub-visual h1 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.3; }
.breadcrumb { display: flex; align-items: center; gap: 10px;
              font-size: var(--fs-sm); color: rgba(0, 0, 0, .6); }
.breadcrumb li + li::before { content: "›"; margin-right: 10px; opacity: .5; }
.breadcrumb li { display: flex; align-items: center; }
.sub-visual .deco { z-index: 1; }

/* ---------- FOOTER (시안 1920 · bg #111 · py100) ---------- */
/* 시안 36:1192 = 1920×454 · py 상100 / 하53 (컨테이너 100~354 · 배지 하단 401 · 454−401=53) */
.site-footer { background: var(--footer-bg); color: var(--footer-muted);
               padding-top: clamp(56px, 5.21vw, 100px);
               padding-bottom: 100px;
               position: relative; }

/* 시안 36:1192 — 1920x454 · py 100 / px 160 · container 1600x254.
   예전에는 고정 CTA 를 위해 하단에 230px 을 더 뒀는데, 그건 시안에 없는 여백이었다.
   상담 CTA 는 화면 우하단 fixed 플로팅 버튼으로 분리했다. */
.site-footer__inner { display: flex; align-items: flex-start; justify-content: space-between;
                      gap: var(--gap-xl); flex-wrap: wrap; }
/* 좌측 브랜드 열은 줄어들 수 있어야 한다 — 1000px 로 고정하면 1280 에서 우측 열이
   아래로 밀려 시안과 완전히 다른 배치가 된다(실측). */
.site-footer__brand { display: flex; flex-direction: column; gap: var(--gap-lg);
                      flex: 1 1 320px; min-width: 0; max-width: 1000px; }
.site-footer .logo { width: clamp(200px, 15.78vw, 303px); }
.biz-group {
  display: flex; flex-direction: column;
  max-width: 100%;
}
.biz {
  --biz-li-pad-x: clamp(6px, 0.640625vw, 12.3px); /* 1920 기준 12.3px */
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0; max-width: 100%; margin-inline: calc(var(--biz-li-pad-x) * -1);
  font-size: var(--fs-sm);
}
.biz li {
  position: relative;
  padding-inline: var(--biz-li-pad-x);
  font-size: inherit;
  line-height: 2;
  flex: 0 1 auto;
  max-width: 100%;
}
.biz li:not(:last-child)::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 0.9375em;
  margin-top: 0.375em;
  margin-left: var(--biz-li-pad-x);
  background: currentColor;
  opacity: .45;
}
.copyright { font-size: var(--fs-sm); line-height: 1.6; }   /* 시안 36:1125 h16 */
/* [E-01] 우측 열 = 메뉴 + 상담 배지 */
.site-footer__right { display: flex; flex-direction: column; align-items: flex-end;
                      gap: clamp(22px, 1.98vw, 38px); flex: 0 0 auto; }
.fnav {
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--gap-sm);
  padding-bottom: clamp(22px, 1.98vw, 38px);
  border-bottom: 1px solid rgba(255, 255, 255, .2);
}
.fnav a { font-size: var(--fs-fnav); line-height: 1; color: var(--white); font-weight: 500;
          text-underline-offset: 6px;
          transition: color var(--mo-fast) var(--ease-out), transform var(--mo-fast) var(--ease-out); }
.fnav a.is-brand { color: var(--brand); }
.fnav a:hover,
.fnav a.is-brand:hover { color: #fd8988; transform: translateX(-4px); }
.fnav a.is-strong { font-weight: 700; }
.fnav-admin { align-self: flex-end; }
.fnav-admin a {
  font-size: var(--fs-fnav); line-height: 1; color: var(--white); font-weight: 500;
  text-underline-offset: 6px;
  transition: color var(--mo-fast) var(--ease-out), transform var(--mo-fast) var(--ease-out);
}
.fnav-admin a:hover { color: #fd8988; transform: translateX(-4px); }

@media (max-width: 991px) {
  .biz li:not(:last-child)::after { display: none; }
}

@media (max-width: 767px) {
  .site-footer { padding-bottom: 50px; }
  /* 세로로 쌓이면 시안의 "같은 y 에서 시작" 관계가 사라진다 — 그때 --gap-xl(40) 을 그대로
     쓰면 저작권 줄과 메뉴 사이가 64px 로 벌어져 두 블록이 따로 노는 것처럼 보인다(실측).
     묶여 보이도록 24px 로 줄인다. */
  .site-footer__inner { flex-direction: column; gap: 24px; }
  /* 세로 방향이 되면 flex-basis 320px 이 **높이**로 해석돼 브랜드 블록이 실제 내용보다
     24px 길어진다(실측) — 그 24px 이 메뉴를 아래로 더 밀었다. */
  .site-footer__brand { flex: 0 0 auto; max-width: 100%; }
  .site-footer__right { align-self: stretch; align-items: flex-start; gap: 28px; padding-right: 80px; }
  .copyright { padding-right: 100px; }
  .fnav {
    align-items: flex-start; flex-direction: row; flex-wrap: wrap;
    gap: 14px var(--gap-md);
    padding-bottom: 0;
    border-bottom: none;
  }
  .fnav a { text-decoration: none; font-size: 14px; }
  .fnav a:hover,
  .fnav a.is-brand:hover { transform: none; }
  .fnav-admin { align-self: flex-start; }
  .fnav-admin a { text-decoration: none; font-size: 14px; }
}

/* ---------- 상담 CTA · 탑 버튼 플로팅 ----------
   1920 기준 inset 30px · 원 80px — --float-inset · --cta-size 공유 */
:root {
  --float-inset: clamp(16px, 1.5625vw, 30px);
  --cta-size: clamp(60px, 4.17vw, 80px);
  --float-stack-gap: 15px; /* 탑버튼 top ↔ float-cta disc bottom */
}

.top-btn {
  position: fixed;
  right: var(--float-inset);
  bottom: var(--float-inset);
  z-index: var(--z-float);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cta-size);
  height: var(--cta-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
  overflow: visible;
  isolation: isolate;
  box-shadow:
    calc(var(--cta-size) * 0.125) calc(var(--cta-size) * 0.125) calc(var(--cta-size) * 0.1875) 0
    rgba(0, 0, 0, .15);
  opacity: 0;
  visibility: hidden;
  translate: 0 20px;
  transition:
    opacity .5s var(--ease-out),
    visibility .5s var(--ease-out),
    translate .5s var(--ease-out);
}
.top-btn::before,
.float-cta__disc::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: var(--brand);
  transform: scale(0);
  transform-origin: center;
  transition: transform .45s var(--ease-out);
  z-index: 0;
}
.top-btn__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--cta-size) * 0.025);
  color: var(--ink);
  transform: translateY(calc(var(--cta-size) * -0.0125));
  transition: color .35s var(--ease-out);
}
.top-btn__icon {
  display: block;
  width: calc(var(--cta-size) * 0.275);
  height: calc(var(--cta-size) * 0.275);
  margin-bottom: 3px;
}
.top-btn__label {
  font-size: calc(var(--cta-size) * 0.15);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
}
body.is-top-btn-visible .top-btn {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}
.top-btn:hover::before,
.top-btn:focus-visible::before,
.float-cta:hover .float-cta__disc::before,
.float-cta:focus-visible .float-cta__disc::before {
  transform: scale(1);
}
.top-btn:hover .top-btn__content,
.top-btn:focus-visible .top-btn__content { color: var(--white); }
@media (prefers-reduced-motion: reduce) {
  .top-btn,
  .top-btn::before,
  .top-btn__content,
  .float-cta__disc::before { transition: none; }
}

.float-cta {
  position: fixed;
  right: var(--float-inset);
  bottom: var(--float-inset);
  z-index: var(--z-float);
  display: block;
  margin: 0;
  width: var(--cta-size);
  height: calc(var(--cta-size) * 1.3375); /* 107 / 80 */
  transform: translateY(24px) scale(.9); opacity: 0;
  transition:
    transform var(--mo-base) var(--ease-back),
    opacity var(--mo-base) var(--ease-out),
    bottom .5s var(--ease-out);
}
body.is-top-btn-visible .float-cta {
  /* top-btn bottom + height + 고정 gap — inset 이중 적용 제거 */
  bottom: calc(var(--float-inset) + var(--cta-size) + var(--float-stack-gap));
}
.float-cta.is-in { transform: none; opacity: 1; }
/* ★ 예전에는 푸터 구간에서 CTA 를 감췄다. 그러면 라벨이 히트테스트에서 사라져
   "조작할 수 없는 라벨" 이 된다(실측). 감추는 대신 **푸터에 여백을 만들어**
   어떤 텍스트도 CTA 아래에 오지 않게 한다 — 가림 0 · 라벨 항상 유효. */
.float-cta__disc {
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--cta-size);
  height: var(--cta-size);
  border-radius: 50%;
  background: var(--white);
  overflow: visible;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    calc(var(--cta-size) * 0.125) calc(var(--cta-size) * 0.125) calc(var(--cta-size) * 0.1875) 0
    rgba(0, 0, 0, .15);
}
.float-cta__disc img {
  position: relative;
  z-index: 1;
  display: block;
  width: calc(var(--cta-size) * 0.7625); /* 61 / 80 */
  height: auto;
}
.float-cta__badge {
  /* 시안 36:1173 @80 — padding 8/16 · font 16 · top -8 · right 11.19% · arrow 26/13/-5 */
  position: absolute;
  top: calc(var(--cta-size) * -0.1);
  right: 0;
  display: inline-flex; white-space: nowrap;
  padding:
    calc(var(--cta-size) * 0.1 + var(--optical-y))
    calc(var(--cta-size) * 0.2)
    calc(var(--cta-size) * 0.1);
  border-radius: calc(var(--cta-size) * 0.4);
  background: var(--brand-cta); color: var(--white);
  font-size: calc(var(--cta-size) * 0.2);
  line-height: 1; font-weight: 700;
  box-shadow: 0 0 0 0 rgba(227, 84, 87, .45);
  animation: cta-pulse 2.6s var(--ease-in-out) infinite;
  z-index: 1;
  transition: background-color var(--mo-base) var(--ease-out);
}
.float-cta__badge::after {
  content: ""; position: absolute;
  bottom: calc(var(--cta-size) * -0.0625);
  right: calc(var(--cta-size) * 0.325 + var(--cta-size) * 0.181875);
  width: calc(var(--cta-size) * 0.1625);
  height: calc(var(--cta-size) * 0.1625);
  background: var(--brand-cta); transform: rotate(45deg);
  transition: background-color var(--mo-base) var(--ease-out);
}
.float-cta:hover .float-cta__badge,
.float-cta:focus-visible .float-cta__badge { background: #ff787a; }
.float-cta:hover .float-cta__badge::after,
.float-cta:focus-visible .float-cta__badge::after { background: #ff787a; }
/* 상자를 움직이지 않는 맥동 — 라벨 위치가 고정되므로 클릭·판독이 흔들리지 않는다 */
@keyframes cta-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(227, 84, 87, .45); }
  70%  { box-shadow: 0 0 0 0.75em rgba(227, 84, 87, 0); }
  100% { box-shadow: 0 0 0 0 rgba(227, 84, 87, 0); }
}
@media (prefers-reduced-motion: reduce) { .float-cta__badge { animation: none; } }
/* 푸터 정보 링크 — 시안에는 밑줄이 없다. 정지 상태는 시안 그대로 두고
   조작 가능함은 **호버/포커스에서만** 밝기와 밑줄로 알린다(§17 상태 계약). */
.biz a { text-decoration: none; text-underline-offset: 3px;
         transition: color var(--mo-fast) var(--ease-out); }
.biz a:hover, .biz a:focus-visible { color: var(--white); text-decoration: underline; }

/* ---------- 스크롤 진행 바 (강한 모션 · 전 페이지) ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; z-index: calc(var(--z-header) + 1);
  width: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--brand), #ffb45f);
  pointer-events: none;
}



/* ---------- 서브 페이지 공용 비주얼 (.cv / .cv-sh) ----------
   class · level · consult 가 공유한다. 페이지마다 다른 값(캐릭터 폭 · 장식 좌표 ·
   배경 투명도)만 각 page-*.css 에서 `.p-<slug>` 스코프로 덮는다.
   시안: 1920x400 · bg #e35457 · 우측 pr 100 · 캐릭터 우측 정렬 ---------- */
.cv {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--brand-cta); color: var(--white);
  min-height: clamp(180px, 20.83vw, 400px);
  display: flex; align-items: center;
}
.cv__bg {
  /* 시안: absolute · left 0 · 480×500 · 세로 중앙 · opacity .70.
     세로 중앙을 transform 으로 잡으면 [data-parallax] 의 transform 이 그걸 덮는다 —
     transform 을 쓰지 않는 auto-margin 중앙 정렬로 둔다. */
  position: absolute; left: 0; top: 0; bottom: 0; margin-block: auto;
  width: clamp(160px, 25vw, 480px); height: clamp(167px, 26.04vw, 500px);
  object-fit: cover; object-position: left center;
  opacity: .7; z-index: 0; pointer-events: none;
}
.cv__inner {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap-md);
  padding-right: calc(var(--gutter) + clamp(0px, 5.21vw, 100px));
}
.cv__text { display: flex; flex-direction: column; align-items: flex-start;
            gap: var(--gap-md); min-width: 0; }
.cv__title { font-size: clamp(26px, 3.96vw, 76px); line-height: 1; font-weight: 700;
             white-space: nowrap; }
.cv__crumb ol { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cv__crumb li { display: flex; align-items: center; gap: 10px; }
.cv__crumb img { width: clamp(15px, 1.25vw, 24px); height: auto; }
.cv__sep { width: clamp(8px, .63vw, 12px) !important; }
.cv__cur {
  font-size: clamp(12px, .94vw, 18px); line-height: 1; font-weight: 500;
  text-transform: uppercase; white-space: nowrap;
  display: inline-block;
  padding-top: var(--optical-y);
  box-sizing: border-box;
  align-self: flex-end;
}
.cv__char { flex: 0 0 auto; width: clamp(96px, 11.25vw, 216px); height: auto; }

/* ---------- 웨이브 구분선 (about WHAT · class 60분 등 · 동일 규칙) ---------- */
.what__wave,
.cls-wave {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 2;
  display: block;
  width: 100%;
  height: clamp(28px, 3.54vw, 68px);
}
.what__wave img {
  display: block;
  width: 100%;
  height: 100%;
}

/* 장식 도형의 기본 모델은 이 파일 하단의 공용 블록이 정한다(.abv-sh/.cv-sh/… 통합).
   페이지 CSS 는 중심 좌표(left/top %) · --rot · --c 만 정한다. */

@media (max-width: 767px) {
  .cv__char { display: none; }
  .cv__inner { padding-right: var(--gutter); }
  .cv__title { white-space: normal; }
}

/* ---------- 공용 유틸 승격: .ptabs (원래 css/page-class.css, css/page-level.css 에 중복 정의) ---------- */
.ptabs ul { display: flex; }
.ptabs li { flex: 1 1 0; min-width: 0; }
.ptabs a { display: flex; align-items: center; justify-content: center; height: clamp(52px, 3.65vw, 70px); border-radius: var(--r-pill); font-size: clamp(15px, 1.04vw, 20px); line-height: 1; font-weight: 500; white-space: nowrap; color: var(--ink); padding-top: var(--optical-y); box-sizing: border-box; transition: background-color var(--mo-fast) var(--ease-out), color var(--mo-fast) var(--ease-out); }
.ptabs a.is-active { background: var(--brand-cta); color: var(--white); }
.ptabs a:not(.is-active):hover { color: var(--brand-cta); background: rgba(227, 84, 87, .08); }

/* ---------- 공용 유틸 승격: .form-msg (원래 css/page-consult.css, css/page-find.css 에 중복 정의) ---------- */
/* ---- 오류 메시지 자리 (시안 미정의 · 기본 숨김) ---- */ .form-msg { margin-top: -8px; font-size: clamp(12px, .8333vw, 16px); line-height: 1.5; color: var(--brand); font-weight: 500; }

/* [E-02] ====================================================================== */
.abv-sh, .cv-sh, .iv-sh, .fv-sh, .nv-sh, .sec01-sh {
  /* 시안에서 장식 도형은 텍스트·캐릭터 **다음**에 그려진다 → 위에 온다.
     z-index 2 였을 때 about 의 분홍 삼각형(36:451)이 캐릭터 뒤로 숨었다(실측). */
  position: absolute; z-index: 4; display: block; pointer-events: none;
  --sz: clamp(18px, 1.875vw, 36px);
  --rot: 0deg;
  width: var(--sz); height: var(--sz);
  margin-left: calc(var(--sz) / -2); margin-top: calc(var(--sz) / -2);
  rotate: var(--rot);
}
.abv-sh--img, .cv-sh--img, .iv-sh--img, .fv-sh--img, .nv-sh--img, .sec01-sh--img {
  --sz: clamp(30px, 3.125vw, 60px);   /* 시안 60px 상자 */
}
.abv-sh__in, .cv-sh__in, .iv-sh__in, .fv-sh__in, .nv-sh__in, .sec01-sh__in {
  display: block; position: relative; width: 100%; height: 100%;
}
.abv-sh--sq .abv-sh__in, .cv-sh--sq .cv-sh__in, .iv-sh--sq .iv-sh__in,
.fv-sh--sq .fv-sh__in, .nv-sh--sq .nv-sh__in, .sec01-sh--sq .sec01-sh__in {
  border: 2px solid var(--ink); border-radius: clamp(5px, .52vw, 10px);
  background: var(--c, var(--white));
}
.abv-sh--img img, .cv-sh--img img, .iv-sh--img img, .fv-sh--img img, .nv-sh--img img {
  position: absolute; left: 14%; top: 10%; width: 72%; height: 65%;
  object-fit: fill; max-width: none;
}
/* SVG 장식 — about·sub visual 공용 (기존 span/i 위치·% 좌표 유지) */
.abv-sh--sq .abv-sh__in:has(svg), .cv-sh--sq .cv-sh__in:has(svg),
.iv-sh--sq .iv-sh__in:has(svg), .fv-sh--sq .fv-sh__in:has(svg),
.nv-sh--sq .nv-sh__in:has(svg), .sec01-sh--sq .sec01-sh__in:has(svg) {
  border: none; background: none;
}
.abv-sh__in svg, .cv-sh__in svg, .iv-sh__in svg, .fv-sh__in svg, .nv-sh__in svg,
.sec01-sh__in svg {
  display: block; width: 100%; height: 100%;
}
.abv-sh--img:has(svg) img, .cv-sh--img:has(svg) img, .iv-sh--img:has(svg) img,
.fv-sh--img:has(svg) img, .nv-sh--img:has(svg) img, .sec01-sh--img:has(svg) img { display: none; }

/* 좁은 폭에서 장식 도형 숨김 — 페이지마다 흩어져 있던 규칙을 한곳으로 모았다(P34 중복 정의 제거).
   시안 반응형 의도: find·notice 는 768 이하, 나머지는 767 이하(마스코트/제목과 겹친다). */
@media (max-width: 768px) { .fv-sh, .nv-sh { display: none; } }
@media (max-width: 767px) { .abv-sh, .cv-sh, .iv-sh { display: none; } }

/* ===== motion.css ===== */
/* [E-03] ============================================================ motion —  */


/* 엔진이 죽으면 숨기지 않는다 — 이 한 줄이 "영구 opacity:0 갇힘"을 막는다 */
[data-mo], [data-motion] { opacity: 1; }

[data-mo] {
  --d: calc(var(--i, 0) * var(--mo-stagger));
  transition-property: opacity, transform, filter, clip-path;
  transition-duration: var(--mo-enter);
  transition-timing-function: var(--ease-enter);
  transition-delay: var(--d);
  will-change: opacity, transform;
}
html.js-motion [data-mo].is-in { opacity: 1; transform: none; filter: none; clip-path: none; }

/* ---- 기본 진입 (상·하·좌·우 fade — 0.5s · 30px) ---- */
html.js-motion [data-mo="fade"] { opacity: var(--m-o0, 0); }
html.js-motion [data-mo="up"] { opacity: var(--m-o0, 0); transform: translateY(calc(var(--mo-enter-shift) * var(--m-k, 1))); }
html.js-motion [data-mo="down"] { opacity: var(--m-o0, 0); transform: translateY(calc(var(--mo-enter-shift) * var(--m-k, 1) * -1)); }
html.js-motion [data-mo="left"] { opacity: var(--m-o0, 0); transform: translateX(calc(var(--mo-enter-shift) * var(--m-k, 1) * -1)); }
html.js-motion [data-mo="right"] { opacity: var(--m-o0, 0); transform: translateX(calc(var(--mo-enter-shift) * var(--m-k, 1))); }
html.js-motion [data-mo="zoom"] { opacity: var(--m-o0, 0); transform: scale(var(--mo-scale)); }
html.js-motion [data-mo="zoom-out"] { opacity: var(--m-o0, 0); transform: scale(calc(2 - var(--mo-scale))); }
html.js-motion [data-mo="pop"] { opacity: var(--m-o0, 0); transform: scale(var(--mo-scale)) translateY(30px);
                          transition-timing-function: var(--ease-back); }
html.js-motion [data-mo="blur"] { opacity: var(--m-o0, 0); filter: blur(var(--mo-blur)); transform: translateY(24px); }
html.js-motion [data-mo="tilt"] { opacity: var(--m-o0, 0); transform: perspective(1200px) rotateX(14deg) translateY(calc(var(--mo-shift) * var(--m-k, 1)));
                          transform-origin: 50% 100%; }
html.js-motion [data-mo="rot"] { opacity: var(--m-o0, 0); transform: rotate(calc(var(--mo-rot) * -1)) translateY(calc(var(--mo-shift) * var(--m-k, 1))) scale(var(--mo-scale)); }
html.js-motion [data-mo="swing"] { opacity: var(--m-o0, 0); transform: rotate(var(--mo-rot)) translateX(calc(var(--mo-shift) * var(--m-k, 1)));
                          transition-timing-function: var(--ease-back); }

/* ---- 클립 리빌 (강한 인상 · 히어로/이미지) ----
   clip-path 는 관찰 대상 자신이 아닌 **직계 자식**에 건다(IO 가 clip 으로 가려 막히는 사고 방지). */
html.js-motion [data-mo="clip-up"] > * {
  display: block;
  clip-path: inset(100% 0 0 0);
  transform: translateY(40px);
  transition: clip-path var(--mo-slow) var(--ease-out), transform var(--mo-enter) var(--ease-enter);
}
html.js-motion [data-mo="clip-up"].is-in > * { clip-path: none; transform: none; }
html.js-motion [data-mo="clip-down"] > * {
  display: block;
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--mo-slow) var(--ease-out);
}
html.js-motion [data-mo="clip-down"].is-in > * { clip-path: none; }
html.js-motion [data-mo="clip-left"] > * {
  display: block;
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--mo-slow) var(--ease-out);
}
html.js-motion [data-mo="clip-left"].is-in > * { clip-path: none; }
html.js-motion [data-mo="clip-right"] > * {
  display: block;
  clip-path: inset(0 0 0 100%);
  transition: clip-path var(--mo-slow) var(--ease-out);
}
html.js-motion [data-mo="clip-right"].is-in > * { clip-path: none; }
html.js-motion [data-mo="clip-circle"] > * {
  clip-path: circle(0% at 50% 50%);
  transition: clip-path var(--mo-slow) var(--ease-in-out);
}
html.js-motion [data-mo="clip-circle"].is-in > * { clip-path: circle(75% at 50% 50%); }

/* ---- 이미지 커튼 리빌: 색면이 걷히며 사진이 드러난다 ---- */
.reveal { position: relative; overflow: hidden; }
html.js-motion .reveal::after {
  content: ""; position: absolute; inset: 0; background: var(--brand);
  transform-origin: left; transform: scaleX(1);
  transition: transform var(--mo-base) var(--ease-in-out);
  transition-delay: var(--d, 0ms); z-index: 2;
}
html.js-motion .reveal.is-in::after { transform: scaleX(0); transform-origin: right; }
html.js-motion .reveal > img { transform: scale(1.08); transition: transform var(--mo-base) var(--ease-out);
                transition-delay: var(--d, 0ms); }
html.js-motion .reveal.is-in > img { transform: none; }
.reveal--ink::after   { background: var(--ink); }
.reveal--cream::after { background: var(--hero-bg); }

/* ---- 텍스트 분절 (엔진이 글자를 span 으로 쪼갠다) ---- */
.split { display: inline-block; }
html.js-motion .split .ch, html.js-motion .split .wd {
  display: inline-block; opacity: 0; transform: translateY(.6em) rotate(6deg);
  transition: opacity var(--mo-base) var(--ease-out), transform var(--mo-base) var(--ease-out);
  transition-delay: calc(var(--n, 0) * 50ms);
}
.split .wd { transform: translateY(.7em); }
html.js-motion .is-in .split .ch,
html.js-motion .is-in .split .wd,
html.js-motion .split.is-in .ch,
html.js-motion .split.is-in .wd { opacity: 1; transform: none; }
.split .sp { display: inline-block; width: .28em; }

/* ---- 밑줄이 그어지는 강조 ---- */
html.js-motion .underline-draw { position: relative; display: inline; background-image: linear-gradient(var(--brand), var(--brand));
  background-repeat: no-repeat; background-position: 0 88%; background-size: 0 8px;
  transition: background-size .9s var(--ease-out) var(--d, 0ms); }
html.js-motion .is-in .underline-draw,
html.js-motion .underline-draw.is-in { background-size: 100% 8px; }

/* ---- 카운터 ---- */
.count { font-variant-numeric: tabular-nums; }

/* ---- 패럴랙스 (엔진이 --p: -1..1 를 넣는다) ---- */
[data-parallax] { will-change: transform; transform: translate3d(0, calc(var(--p, 0) * var(--par, 60px)), 0); }
/* 배경 오브젝트는 시안이 정의한 형태를 갖는다 — 스크롤 변위는 **형태를 알아볼 수 있는 범위**로 묶는다.
   예전 24deg(±36deg 까지)은 삼각형의 각도를 시안과 다르게 보이게 만들었다. */
[data-parallax="rot"] { transform: rotate(calc(var(--p, 0) * var(--rot-amp, 9deg))); }
[data-parallax="scale"] { transform: scale(calc(1 + var(--p, 0) * .12)); }

/* ---- 무한 마퀴 ---- */
.marquee { display: flex; overflow: hidden; gap: var(--gap-lg); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: var(--gap-lg); flex: none; animation: marquee 28s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-100% - var(--gap-lg))); } }

/* ---- visual hero drift — 캐릭터·장식 공용 (about·sub visual) ---- */
.abv-drift {
  will-change: transform;
  transform-origin: center center;
  animation: abv-drift-deco var(--drift-dur, 5.6s) cubic-bezier(0.42, 0, 0.38, 1) infinite;
  animation-delay: var(--drift-delay, 0s);
}
.abv-drift--char {
  --drift-dur: 7.4s;
  --drift-delay: -2.1s;
  animation-name: abv-drift-char;
  animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
}
.abv-drift--sq1 { --drift-dur: 4.8s; --drift-delay: -0.7s; }
.abv-drift--sq2 { --drift-dur: 6.1s; --drift-delay: -2.4s; }
.abv-drift--p1  { --drift-dur: 5.3s; --drift-delay: -1.5s; }
.abv-drift--p2  { --drift-dur: 6.8s; --drift-delay: -3.8s; }
@keyframes abv-drift-char {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  18%      { transform: translate3d(5px, -9px, 0) rotate(1.4deg); }
  42%      { transform: translate3d(-4px, -20px, 0) rotate(-1deg); }
  63%      { transform: translate3d(3px, -14px, 0) rotate(0.6deg); }
  84%      { transform: translate3d(-2px, -5px, 0) rotate(-0.4deg); }
}
@keyframes abv-drift-deco {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  22%      { transform: translate3d(2px, -5px, 0) rotate(2.5deg); }
  48%      { transform: translate3d(-2px, -9px, 0) rotate(-1.8deg); }
  71%      { transform: translate3d(1px, -6px, 0) rotate(1deg); }
  90%      { transform: translate3d(-1px, -2px, 0) rotate(-0.6deg); }
}

/* ---- visual hero 캐릭터 — translate 분리 (data-mo pop transform 과 충돌 없음) ---- */
.char-float {
  will-change: translate;
  animation: char-float 5s var(--ease-in-out) infinite;
  animation-delay: -1.2s;
}
@keyframes char-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -16px; }
}

/* ---- 둥둥 뜨는 장식 (legacy · index hero 등) ---- */
.float-y { animation: floaty 5s var(--ease-in-out) infinite; }
.float-y--2 { animation-duration: 6.4s; animation-delay: -1.2s; }
.float-y--3 { animation-duration: 7.6s; animation-delay: -2.6s; }
.float-y--4 { animation-duration: 5.8s; animation-delay: -3.4s; }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-16px) rotate(2deg); } }
.spin-slow { animation: spin 22s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  [data-mo], html.js-motion [data-mo].is-in { opacity: 1 !important; transform: none !important;
                               filter: none !important; clip-path: none !important; }
  html.js-motion .reveal::after { display: none; }
  .reveal > img { transform: none; }
  .split .ch, .split .wd { opacity: 1; transform: none; }
  .underline-draw { background-size: 100% 8px !important; }
  .marquee__track, .float-y, .char-float, .abv-drift, .spin-slow { animation: none; }
  [data-parallax] { transform: none !important; }
}

/* ============================================================
   레시피 이름 문법 (data-motion) — 모션 대장이 읽는 정본 어휘.
   data-mo 는 CSS 상태 프리미티브, data-motion 은 **무엇을 하는 연출인지**의 이름이다.
   ============================================================ */
[data-motion] { will-change: opacity, transform, filter, clip-path; }

/* --- 텍스트 축 --- */
/* 줄 마스크: overflow 는 padding box 에서 잘린다. 글리프의 상하 여백(어센더·디센더)만큼
   패딩을 주고 같은 값을 음수 마진으로 되돌려 **잘림 없이** 마스크만 만든다.
   (실측 사고: line-height 1 + overflow:hidden 이 "English," 의 쉼표와 "g" 를 43px 잘랐다) */
[data-motion="line-reveal"] .ln { display: block; }
html.js-motion [data-motion="line-reveal"] .ln {
  overflow: hidden; padding-block: .32em; margin-block: -.32em;
}
html.js-motion [data-motion="line-reveal"] .ln > span {
  display: block; transform: translateY(105%);
  transition: transform var(--mo-base) var(--ease-out);
  transition-delay: calc(var(--n, 0) * var(--mo-stagger));
}
html.js-motion [data-motion="line-reveal"].is-in .ln > span { transform: none; }

html.js-motion [data-motion="word-cascade"] .wd {
  transition-duration: var(--mo-base);
  transition-timing-function: var(--ease-out);
  transition-delay: calc(var(--n, 0) * var(--mo-stagger));
}
html.js-motion [data-motion="letter-spacing-settle"] {
  letter-spacing: .34em; opacity: var(--m-o0, 0);
  transition: letter-spacing 1.1s var(--ease-out), opacity .7s var(--ease-out);
}
html.js-motion [data-motion="letter-spacing-settle"].is-in { letter-spacing: normal; opacity: 1; }

/* --- 이미지 축 --- */
/* ★ clip-path 는 **관찰 대상 자신에게 걸지 않는다.**
   자기 자신을 완전히 잘라 두면 IntersectionObserver 가 그 요소를 "보이지 않는다" 로
   판정해 진입 콜백이 영영 오지 않는다 — 히어로 이미지가 통째로 사라졌다(실측).
   관찰은 바깥(.…-frame)이 받고, 자르기는 **자식**이 한다. */
html.js-motion [data-motion="image-clip-reveal"] > * {
  clip-path: inset(0 0 0 100%);
  transition: clip-path var(--mo-base) var(--ease-in-out);
}
html.js-motion [data-motion="image-clip-reveal"].is-in > * { clip-path: inset(0 0 0 0); }

html.js-motion [data-motion="ken-burns"] { animation: ken-burns 18s var(--ease-in-out) infinite alternate; }
@keyframes ken-burns {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.07) translate3d(-1.2%, -1%, 0); }
}

html.js-motion [data-motion="parallax-y"] { /* 엔진이 --p 를 넣는다 */
  transform: translate3d(0, calc(var(--p, 0) * var(--par, 50px)), 0);
}

html.js-motion [data-motion="pop-in"] {
  opacity: var(--m-o0, 0); transform: scale(var(--mo-scale)) translateY(26px);
  transition: opacity var(--mo-base) var(--ease-out), transform var(--mo-base) var(--ease-out);
  transition-delay: var(--d, 0ms);
}
html.js-motion [data-motion="pop-in"].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-motion] { animation: none !important; transform: none !important;
                  clip-path: none !important; opacity: 1 !important; letter-spacing: normal !important; }
  html.js-motion [data-motion="line-reveal"] .ln > span { transform: none; }
}

/* ---- 완료 계약 (data-motion-done) --------------------------------------
   진입이 끝난 요소는 transform 잔여물을 남기지 않는다. 유동 그리드/플렉스에서
   남은 translate/scale 이 축소를 막아 가로 오버플로를 만드는 사고를 차단한다. */
html.js-motion [data-motion-done],
html.js-motion [data-motion-done] .ln > span,
html.js-motion [data-motion-done] .ch,
html.js-motion [data-motion-done] .wd {
  opacity: 1; translate: none; scale: none; rotate: none;
  clip-path: none; filter: none;
}

/* [E-04] ---- LCP 후보: 가리지 않는다 -------------------------------------------- `dat */
html.js-motion [data-motion-visible],
html.js-motion [data-motion-visible] img { opacity: 1 !important; }
html.js-motion [data-motion="image-clip-reveal"][data-motion-visible] > *,
html.js-motion [data-motion-visible] [data-motion="image-clip-reveal"] > * {
  clip-path: none;
}

/* [E-05] ============================================================ ★ 스크롤 연동  */
html.js-motion [data-seen] { --m-o0: .55; --m-k: .45; }
html.js-motion [data-seen] .ch,
html.js-motion [data-seen] .wd,
html.js-motion [data-seen] .ln > span { opacity: .6; }
html.js-motion [data-seen].is-in .ch,
html.js-motion [data-seen].is-in .wd,
html.js-motion [data-seen].is-in .ln > span { opacity: 1; }
html.js-motion .reveal[data-seen]::after { transform: scaleX(0); }


/* ---- 배경 장식 오브젝트 모션 (2026-08-31) -----------------------------------
   원칙: **시안이 그린 정지 상태를 바꾸지 않는다.** 회전값(--rot)·좌표·크기는 시안 그대로 두고,
   그 위에 `translate` 만 아주 작게 얹는다(회전은 rotate 속성, 변위는 translate 속성이라
   서로 덮어쓰지 않는다). 진입 모션은 안쪽 <i>(data-mo="pop") 가 계속 담당한다. */
@keyframes deco-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
html.js-motion .abv-sh, html.js-motion .cv-sh, html.js-motion .iv-sh,
html.js-motion .fv-sh,  html.js-motion .nv-sh, html.js-motion .sec01-sh {
  animation: deco-bob 8s var(--ease-in-out) infinite;
  animation-delay: calc(var(--i, 0) * -1.7s);
}
/* 폴리곤은 조금 더 느리게 — 같은 박자로 흔들리면 기계적으로 보인다 */
html.js-motion .abv-sh--img, html.js-motion .cv-sh--img, html.js-motion .iv-sh--img,
html.js-motion .fv-sh--img,  html.js-motion .nv-sh--img, html.js-motion .sec01-sh--img { animation-duration: 10.5s; }

@media (prefers-reduced-motion: reduce) {
  html.js-motion .abv-sh, html.js-motion .cv-sh, html.js-motion .iv-sh,
  html.js-motion .fv-sh,  html.js-motion .nv-sh, html.js-motion .sec01-sh { animation: none; translate: none; }
}