@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

/* ═══════════════════════════════════════════════════════════════════════════
   Pltt 서브페이지 공용 CSS
   ─────────────────────────────────────────────────────────────────────────
   이 파일은 메인 index.html 인라인 <style> 의 공용 컴포넌트를 그대로 미러링.
   서브페이지에서는 sub.css 를 로드하고, 페이지 전용 스타일만 인라인에 둔다.

   원칙 (spec §5.2):
   - "메인이 하드코딩이면 하드코딩으로 간다." → 값·규칙 자체는 메인과 동일.
   - 컴포넌트 정의를 새로 만들지 않는다. 메인의 스코프 셀렉터(.next .svc-cta,
     .result-cta .door 등) 때문에 서브페이지에서 직접 재사용이 불가한 규칙은
     스코프만 해제해서 여기에 다시 적는다(값·명칭 불변).

   출처 라인은 각 블록 상단에 index.html:N 으로 표기.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ════════ VARIABLES (index.html:26–46) ════════ */
:root {
  --bg:#FFFCF8;
  --ink:#000000;         /* 전 페이지 텍스트 블랙 통일 (Palogue 제외) */
  --ink-message:#000000; /* 통일 — 헤드라인/본문 강조 */
  --ink-display:#000000; /* 통일 — 디스플레이 위계 */
  --ink-soft:#9a9a9a;    /* 회색 (라벨·캡션) — 유지 */
  --ink-faint:#cfcecb;   /* 연회색 (보조·언더라인) — 유지 */
  --purple:#5b17e0;
  --purple-2:#8b3df0;
  --coral:#ff5436;
  --accent:var(--purple);

  --surface-dark:#000000;   /* 통일 — 다크 서페이스 (배경 · .door:hover color) */
  --creative:#ffff00;
  --agent:#670fdf;

  /* 서브페이지 스테이트먼트 공용 (About .manifest / Agent #s2·#s3·#s3b / Creative #s2·#s3·#s4).
     stmt-lh : 스택 line-height 값. 영상 높이 계산의 pitch 단위이기도 함 (N × stmt-lh × 1em).
     stmt-gap: 스택 그룹 간 간격 pitch 배수 (gap = stmt-gap × stmt-lh × 1em). */
  --stmt-lh:  1.4;
  --stmt-gap: 1.5;

  --fs-giant:clamp(4rem,21vw,17rem);
  --fs-display:clamp(2.6rem,8.6vw,7.4rem);
  --fs-message:clamp(1.9rem,5.6vw,4.4rem);
  --fs-label:clamp(13px,1.3vw,17px);
  --fs-eyebrow:clamp(11px,1vw,13px);
  --fs-sub:clamp(13px,1.3vw,16px);
  --fs-caption:13px;
  --fs-micro:11px;

  --w-black:900; --w-bold:800; --w-semi:600; --w-med:500; --w-reg:400;

  --ls-giant:-.045em; --ls-display:-.03em; --ls-message:-.022em;
  --ls-eyebrow:.22em; --ls-label:.02em;

  --edge:clamp(14px,3vw,48px);
  --ease:cubic-bezier(.22,.61,.36,1);

  /* ---- size ---- */
  --fz-display: clamp(2.8rem, 8vw, 7.5rem);        /* 최대 120px  */
  --fz-h:       clamp(1.75rem, 4.2vw, 4rem);       /* 최대 64px   */
  --fz-hero:    clamp(1.8rem, 3.7vw, 3.4rem);      /* 최대 54.4px */
  --fz-label:   clamp(1.8rem, 4vw, 3.4rem);        /* 최대 54.4px */
  --fz-state:   clamp(1.4rem, 2.6vw, 2.4rem);      /* 최대 38.4px */
  --fz-lead:    clamp(1.15rem, 2vw, 1.8rem);       /* 최대 28.8px */
  --fz-q:       clamp(1.05rem, 1.9vw, 1.6rem);     /* 최대 25.6px */
  --fz-body:    clamp(1.05rem, 1.5vw, 1.4rem);     /* 최대 22.4px */
  --fz-btn:     clamp(.9375rem, 1.5vw, 1.125rem);  /* 최대 18px   */
  --fz-mini:    clamp(.8rem, 1vw, .95rem);         /* 최대 15.2px */

  /* ---- weight ---- */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-extra:   800;
}

/* ════════ TABLET (769-1279px) — iPad Air 가로 (1180×820), iPad Pro 11 (1194) ════════
   폰트 최대값을 하향 (2.6vw → 2.0vw) 하여 그리드 컨테이너 폭 대비 텍스트 여유 확보.
   목적: PC 시안 라인 브레이크 최대한 유지, 좁은 태블릿에서 강제 wrap 방지.
   min/max 클램프는 유지 (min 1.4rem / max 2.4rem). */
@media (min-width:769px) and (max-width:1279px) {
  :root {
    --fz-state: clamp(1.4rem, 2.0vw, 2.4rem);
  }
}

/* ════════ RESET / DOC (index.html:62–93) ════════ */
* { margin:0; padding:0; box-sizing:border-box; }
html { min-height:100%; scrollbar-gutter:stable; overflow-x:clip; }
html, body { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) {
  html, body { scroll-behavior:auto; }
}
body {
  font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,
              'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
a { color:inherit; text-decoration:none; }
::selection { background:var(--ink); color:#fffcf8; }

/* menu/modal 열림 시 배경 스크롤 잠금 (index.html:236–238) */
body.modal-open { overflow:hidden; }
html:has(body.modal-open) { overflow:hidden; }
body.menu-open { overflow:hidden; }
html:has(body.menu-open) { overflow:hidden; }

/* Phase 14: 커스텀 커서 + 소프 캔버스 CSS 전량 제거.
   - #cursor / .cbody / .ring / .glyph 규칙
   - body.cursor-on/hidden/hover/black 상태 규칙 (cursor:none 포함)
   - #soap 캔버스 CSS
   - @keyframes curBreath
   브라우저 기본 커서로 복귀. --cur-color 는 전역 선언 없어 미참조. */

/* ════════ TOPBAR / HAM / LOGO / LANG (index.html:149–175) ════════
   Phase 15: 전 페이지 통일 헤더. 스크롤 전/후 상태 차이 없음, 하단선 없음.
   background 그라데이션 (상단 불투명 → 하단 투명) + ::before backdrop-filter (mask 로 페이드).
   --hdr-tint-* 는 라이트 기본값. 다크 페이지 (think) 는 :root 에서 오버라이드. */
.topbar {
  position:fixed; inset:0 0 auto 0;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px var(--edge); z-index:60;
  border-bottom: 0;
  box-shadow: none;
  background: linear-gradient(to bottom,
              var(--hdr-tint-1, rgba(255,252,248,.92)) 0%,
              var(--hdr-tint-2, rgba(255,252,248,.70)) 55%,
              var(--hdr-tint-0, rgba(255,252,248,0)) 100%);
}
.topbar::before {
  content:''; position:absolute; inset:0; z-index:-1;
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  pointer-events: none;
}
/* Phase L-6: body.menu-open 에서 .topbar/.ham 재선언 전부 삭제.
   헤더는 평상시와 100% 동일하게 동작. 스크림이 헤더 위(z:61)로 올라가 화면 전체를 덮음. */
.ham {
  display:flex; flex-direction:column; gap:5px;
  background:none; border:0; cursor:pointer; padding:6px;
}
.ham span {
  width:26px; height:1.5px; background:var(--ink);
  transition:.35s var(--ease);
}
body.menu-open .ham span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
body.menu-open .ham span:nth-child(2) { opacity:0; }
body.menu-open .ham span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

.logo {
  transform:translateX(-.5ch);
  background:none; border:0; padding:0; cursor:pointer; font:inherit; color:inherit;
}
.logo img {
  height:clamp(20px,2.2vw,28px); width:auto; display:block;
  filter:invert(1);
  transition:opacity .35s var(--ease), transform .35s var(--ease), filter .35s var(--ease);
}
.logo:hover img { opacity:.55; transform:scale(.97); }
/* Main 검색 결과 다크 배경 상태 — 흰 로고(원본) 노출 (main → sub 이관, main 전용 상태) */
body.searching .logo img { filter:none; }

.lang {
  display:flex; gap:10px;
  font-size:var(--fs-caption); font-weight:var(--w-semi); letter-spacing:.04em;
}
.lang button {
  background:none; border:0; cursor:pointer; font:inherit;
  color:var(--ink-soft); transition:.3s;
}
.lang button.on { color:var(--ink); }

/* ════════ DRAWER / SCRIM (index.html:177–196) ════════ */
.drawer {
  position:fixed; inset:0 auto 0 0; width:min(86vw,420px);
  background:var(--bg); z-index:62;
  transform:translateX(-101%); transition:transform .55s var(--ease);
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--edge); box-shadow:1px 0 0 var(--ink-faint);
}
body.menu-open .drawer { transform:none; }
.drawer .m-eyebrow {
  font-size:var(--fs-eyebrow); letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:30px;
}
.drawer nav { display:flex; flex-direction:column; gap:4px; }
.m-link {
  font-size:clamp(1.7rem,4.4vw,2.6rem); font-weight:var(--w-bold);
  letter-spacing:var(--ls-message); color:var(--ink-message);
  padding:10px 0; width:fit-content; position:relative; cursor:pointer;
}
.m-link span { position:relative; display:inline-block; transition:transform .4s var(--ease); }
.m-link::after {
  content:""; position:absolute; left:0; bottom:8px;
  width:0; height:2px; background:var(--ink); transition:width .4s var(--ease);
}
.m-link:hover span { transform:translateX(14px); }
.m-link:hover::after { width:26px; }
.m-link small {
  font-size:var(--fs-caption); font-weight:var(--w-med);
  color:var(--ink-soft); letter-spacing:0;
  margin-left:14px; vertical-align:middle;
}
.drawer .dig {
  margin-top:42px; font-size:var(--fs-caption);
  color:var(--coral); font-weight:var(--w-semi); letter-spacing:.06em;
}
.scrim {
  position:fixed; inset:0; background:rgba(20,18,16,.32);
  opacity:0; visibility:hidden; transition:.45s; z-index:61;
}
body.menu-open .scrim { opacity:1; visibility:visible; }

/* ════════ CONTACT MODAL (index.html:198–242) ════════ */
.modal {
  position:fixed; inset:0; z-index:70;
  opacity:0; visibility:hidden; pointer-events:none;
  display:grid; place-items:center;
  padding:24px; box-sizing:border-box;
  transition:opacity .3s var(--ease), visibility .3s;
}
body.modal-open .modal { opacity:1; visibility:visible; pointer-events:auto; }
.modal-scrim {
  position:absolute; inset:0; background:rgba(20,18,16,.44); cursor:pointer;
}
.modal-panel {
  position:relative; background:var(--bg); border:1px solid var(--ink-faint);
  border-radius:20px; width:min(560px,92vw); margin:0;
  max-height:calc(100svh - 48px); overflow:auto;
  padding:clamp(36px,4.6vw,56px);
  box-shadow:0 24px 72px -18px rgba(14,14,14,.24);
  transform:translateY(12px) scale(.985); opacity:0;
  transition:transform .35s var(--ease), opacity .35s var(--ease);
}
body.modal-open .modal-panel { transform:none; opacity:1; }
.modal-close {
  position:absolute; top:16px; right:16px;
  width:38px; height:38px; background:transparent;
  border:1px solid var(--ink-faint); border-radius:50%;
  cursor:pointer; color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .25s var(--ease), border-color .25s, color .25s;
}
.modal-close:hover { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.modal-close svg { width:16px; height:16px; display:block; }
.modal-eyebrow {
  font-size:var(--fs-eyebrow); letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase; color:var(--ink-soft); font-weight:var(--w-semi);
  margin-bottom:clamp(18px,2.8vh,30px);
}
.modal-mail {
  display:flex; align-items:baseline; flex-wrap:wrap; gap:14px; margin-bottom:16px;
}
.modal-mail-link {
  font-size:clamp(1.4rem,3.2vw,2.2rem); font-weight:var(--w-bold);
  letter-spacing:-.014em; color:var(--ink);
  border-bottom:2px solid transparent; padding-bottom:2px;
  transition:border-color .25s var(--ease);
}
.modal-mail-link:hover { border-bottom-color:var(--ink); }
.modal-copy {
  position:relative; background:transparent; border:1px solid var(--ink);
  color:var(--ink); border-radius:999px; padding:8px 18px;
  cursor:pointer; font:inherit;
  font-size:var(--fs-caption); font-weight:var(--w-semi); letter-spacing:.02em;
  min-width:88px; transition:background .25s var(--ease), color .25s;
}
.modal-copy:hover { background:var(--ink); color:var(--bg); }
.modal-copy .copy-done {
  position:absolute; inset:0;
  display:inline-flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .2s var(--ease);
}
.modal-copy.done .copy-txt { opacity:0; }
.modal-copy.done .copy-done { opacity:1; }
.modal-hint {
  font-size:var(--fs-caption); color:var(--ink-soft);
  letter-spacing:.01em; font-weight:var(--w-med);
}
@media (prefers-reduced-motion:reduce) {
  .modal, .modal-panel { transition:none; }
  .modal-panel { transform:none; }
}

/* ════════ FOOTER (index.html:413–429) ════════ */
.footer {
  position:relative; z-index:5;
  background:var(--bg);
  padding:clamp(56px,9vh,116px) var(--edge) 38px;
}
/* 2컬럼 (좌: eyebrow+mail+corp / 우: nav+sns) + 하단바 (copyright + 개인정보)
   align-items:flex-end 로 좌우 컬럼 하단 정렬 (SNS 하단 = 회사정보 마지막 줄 하단) */
.foot-top {
  display:flex; justify-content:space-between; align-items:flex-start;   /* Phase 28b: 좌우 컬럼 상단 정렬 (SNS 이동 후) */
  gap:clamp(32px, 5vw, 72px); flex-wrap:wrap;
}
.foot-left {
  flex:1 1 auto; min-width:min(100%, 320px);
  display:flex; flex-direction:column;
  gap:clamp(4px, 0.6vh, 10px);   /* Phase 28b: 상단 블록 간격 축소 (원 clamp(28,4vh,48) → 하향) */
}
.foot-right {
  display:flex; flex-direction:column;
  align-items:flex-end;
  gap:clamp(24px, 4vh, 48px);   /* 내비와 SNS 사이 확실한 여백 */
  text-align:right;
}
.foot-eyebrow {
  font-size:var(--fz-mini); font-weight:var(--fw-medium);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 .8em;
}
.foot-mail {
  align-self:flex-start;   /* flex-column 안에서 텍스트 폭만큼만 (border-bottom 이 전체 폭 확장 방지) */
  font-size:clamp(1.28rem, 1.6vw, 1.52rem);   /* Phase 28: 정보줄(--fz-mini) × 1.6 */
  font-weight:var(--fw-extra);
  letter-spacing:-.02em; line-height:1;
  color:var(--ink-message); background:none; border:0; padding:0;
  border-bottom:1.5px solid transparent; padding-bottom:1px;   /* Phase 28c: 두께 2→1.5, 텍스트에 더 붙임 3→1 */
  cursor:pointer; font-family:inherit;
  transition:border-color .3s var(--ease);
  display:inline-flex; align-items:center; min-height:44px;   /* Phase 28: 클릭 영역 최소 44 */
}
.foot-mail:hover { border-color:color-mix(in srgb, var(--ink) 40%, transparent); }   /* Phase 28c: 진한 검정 → 40% 투명 (color-mix · 하드코딩 회색 회피) */
/* 회사정보 — 라벨과 값이 한 줄로 이어짐, 라벨·값 동일 색·weight */
.foot-corp {
  margin:0; font-style:normal;
  display:flex; flex-direction:column; gap:.35em;
}
.foot-corp p {
  margin:0;
  font-size:var(--fz-mini); font-weight:var(--fw-regular);
  color:var(--ink); opacity:.72; line-height:1.27;   /* Phase 28: 1.55 × 0.82 (정보줄 간격 축소) */
}
.foot-nav {
  display:flex; flex-direction:column; gap:.35em;   /* Phase 28e: 좌측 .foot-corp 와 동일 gap */
}
.foot-nav a {
  font-size:var(--fz-mini); font-weight:var(--fw-regular);   /* medium → regular : 회사정보와 동일 톤 */
  color:var(--ink); opacity:.72; line-height:1.27;   /* Phase 28e: 좌측 .foot-corp p 와 동일 line-height (pitch 매치) */
  transition:opacity .3s;
}
.foot-nav a:hover { opacity:1; }
/* Phase 28e: 데스크톱에서 우측 컬럼(nav) 을 foot-top 하단으로 정렬 → Contact 하단 = Tel 하단.
   좌측 컬럼(GET IN TOUCH ~ Tel) 이 더 길어 foot-top 높이는 좌측 기준.
   .foot-right { align-self: flex-end } 로 우측만 하단 스냅 (좌측 상단 유지).
   좌우 pitch 는 동일 (.foot-corp 와 .foot-nav 모두 .35em + line-height 1.27) 이므로
   하단 정렬 시 Contact top ≈ Tel top 자동 매치.
   모바일 (≤560) 에서는 foot-top { flex-direction: column } 스택 → 반대축 개념 변화 · 데스크톱 스코프에만 적용. */
@media (min-width:769px) {
  .foot-right { align-self:flex-end; }
}
/* SNS — 우측 내비 아래 독립 블록, 이전보다 뚜렷하게 (A안: 아이콘만, 배경 없음) */
.foot-sns {
  list-style:none; margin:0; padding:0;
  display:flex; gap:clamp(12px, 1.5vw, 20px); justify-content:flex-end;
}
.foot-sns a {
  display:inline-flex; align-items:center; justify-content:center;
  width:clamp(28px, 3vw, 40px);
  height:clamp(28px, 3vw, 40px);
  color:var(--ink); opacity:.62;
  transition:opacity .3s;
}
.foot-sns a:hover { opacity:1; }
.foot-sns svg {
  width:clamp(18px, 2vw, 24px);
  height:clamp(18px, 2vw, 24px);
  fill:currentColor; display:block;
}
.foot-base {
  display:flex; justify-content:space-between; gap:clamp(24px, 3vw, 48px); flex-wrap:wrap;   /* Phase 28b: SNS 이동으로 좌(legal)·우(SNS) 배치 */
  align-items:center;
  margin-top:clamp(28px, 4vh, 48px);
  padding-top:22px;
  border-top:1px solid var(--ink-faint);
  font-size:var(--fz-mini); font-weight:var(--fw-regular);
  letter-spacing:.04em; color:var(--ink); opacity:.55;
}
.foot-legal {
  background:none; border:0; padding:0; cursor:pointer; font:inherit;
  font-size:var(--fz-mini); font-weight:var(--fw-regular);
  color:inherit;
  border-bottom:1px solid transparent;
  transition:border-color .3s;
}
.foot-legal:hover { border-bottom-color:currentColor; }
/* 푸터 스냅 지점 (about/contact 인라인에서 이관, agent/creative .deck > .footer 는 별도 규칙 아래) */
body > .footer { scroll-snap-align:end; }
@media (max-width:560px) {
  .foot-top { flex-direction:column; align-items:stretch; }   /* 세로 스택 시 하단정렬 무의미 → stretch 로 원복 */
  .foot-right { align-items:flex-start; text-align:left; }
  .foot-nav { align-items:flex-start; }
  /* Phase 28d: 하단바는 모바일에서도 한 줄 유지 (좌 legal · 우 SNS).
     .foot-base 데스크톱 규칙 (space-between + flex-wrap:wrap · line 374) 상속.
     .foot-sns 데스크톱 규칙 (justify-content:flex-end) 상속 → 4 아이콘 우측 정렬.
     375/320 폭 계산 fit (완료 보고 참조). 폭 초과 시 flex-wrap 이 안전망. */
}

/* ════════ CTA — .door / .svc-cta 스코프 해제 미러링 ════════
   메인의 원본 규칙:
     .result-cta .door        (index.html:496–499)
     .result-cta .door:hover  (index.html:503)
     .next .svc-cta           (index.html:404–411)
     .next .svc-cta:hover     (index.html:410)
     @media (min-width:769px) .next .svc-cta (index.html:570–573)
   메인 규칙은 부모 스코프에 고정되어 서브페이지에서 직접 재사용 불가.
   값·명칭·행동 규칙은 그대로 유지하며 스코프만 해제. 컴포넌트 정의 변경 아님.
   ─────────────────────────────────────────────────────────────────────── */

/* .door — 결과화면 CTA (pill outline, 굵은 텍스트, ↗) */
.door {
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font-size:clamp(15px,1.35vw,18px); font-weight:var(--w-bold); letter-spacing:.01em;
  color:var(--ink); background:transparent;
  border:1px solid var(--ink); border-radius:999px;
  padding:14px 30px;
  transition:background .3s var(--ease), color .3s var(--ease), gap .3s var(--ease);
}
.door:hover { background:var(--ink-message); color:var(--surface-dark); gap:16px; }
.door .door-arr { width:18px; height:18px; display:block; flex:0 0 auto; }

/* .svc-cta — 섹션 CTA (pill outline, 볼드, ↗) */
.svc-cta {
  display:inline-flex; align-items:center; gap:10px;
  background:transparent; border:1px solid var(--ink); color:var(--ink);
  font:inherit; font-size:var(--fs-sub); font-weight:var(--w-bold); letter-spacing:.01em;
  padding:12px 22px; border-radius:999px; cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease), gap .3s var(--ease);
}
.svc-cta:hover { background:var(--ink); color:var(--bg); gap:14px; }
.svc-cta .cta-arr { width:16px; height:16px; display:block; flex:0 0 auto; }
@media (min-width:769px) {
  .svc-cta {
    font-size:clamp(17px,1.5vw,22px); padding:16px 30px;
  }
  .svc-cta .cta-arr { width:22px; height:22px; }
}

/* .cta-btn — 히어로/엔딩 CTA 공용 앵커 (agent/creative 인라인 정의를 이관 · M-3).
   Agent 히어로 "What we do" / Creative 히어로 "Portfolio" / Creative "View more"·"Show less"
   / Agent·Creative·About·Main 엔딩 CTA 섹션에서 공용 사용. 정의 하나로 3+ 페이지 통일. */
.cta-btn {
  display:inline-flex; align-items:center; gap:.7em;
  font-size:var(--fz-btn); font-weight:var(--fw-semi); letter-spacing:-.01em;
  color:var(--ink); text-decoration:none;
  padding:.85em 1.6em;
  border:1.5px solid var(--ink); border-radius:999px;
  transition:background .4s var(--ease), color .4s var(--ease), padding .4s var(--ease);
}
.cta-btn__arrow { transition:transform .4s var(--ease); }
@media (hover:hover) {
  .cta-btn:hover { background:var(--ink); color:#fffcf8; }
  .cta-btn:hover .cta-btn__arrow { transform:translate(3px,-3px); }
}

/* ════════ REDUCE MOTION 공용 (index.html:365–368) ════════ */
@media (prefers-reduced-motion:reduce) {
  * { animation-duration:.001ms !important; transition-duration:.001ms !important; }
  body { cursor:auto; }
}

/* ════════ PAGE OVERRIDES ════════
   페이지별 미세 조정은 이 블록에서만. :root 토큰은 수정 금지 */
.page-about{ }
.page-agent{ }
.page-creative{ }
.page-contact{ }

/* 히어로 안의 <b>/<strong> — 브라우저 기본 font-weight:bolder 상속 차단.
   부모 굵기(--fw-extra 800)에서 900 으로 자동 승격되는 것을 예방. */
.hero-h b, .hero-h strong,
.hero .fill b, .hero .fill strong,
.hero h1 b, .hero h1 strong,
.hero2 .statement b, .hero2 .statement strong {
  font-weight: inherit;
}

/* ════════ PRIVACY MODAL (재사용 · Contact / Main 푸터 공유) ════════
   본문은 /assets/legal/privacy-policy.html 에서 fetch 로 주입.
   /assets/js/privacy-modal.js 가 오픈/클로즈/캐시 처리. */
.pp-modal {
  position:fixed; inset:0; z-index:71;
  opacity:0; visibility:hidden; pointer-events:none;
  display:grid; place-items:center;
  padding:24px; box-sizing:border-box;
  transition:opacity .3s var(--ease), visibility .3s;
}
body.pp-open .pp-modal { opacity:1; visibility:visible; pointer-events:auto; }
.pp-modal-scrim {
  position:absolute; inset:0; background:rgba(20,18,16,.44); cursor:pointer;
}
.pp-modal-panel {
  position:relative; background:var(--bg); border:1px solid var(--ink-faint);
  border-radius:20px; width:min(760px, 92vw); max-height:min(82svh, 720px);
  display:flex; flex-direction:column;
  box-shadow:0 24px 72px -18px rgba(14,14,14,.24);
  transform:translateY(12px) scale(.985); opacity:0;
  transition:transform .35s var(--ease), opacity .35s var(--ease);
  overflow:hidden;
}
body.pp-open .pp-modal-panel { transform:none; opacity:1; }
.pp-modal-close {
  position:absolute; top:16px; right:16px;
  width:38px; height:38px; background:transparent;
  border:1px solid var(--ink-faint); border-radius:50%;
  cursor:pointer; color:var(--ink); z-index:2;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .25s var(--ease), border-color .25s, color .25s;
}
.pp-modal-close:hover { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.pp-modal-close svg { width:16px; height:16px; display:block; }
.pp-doc {
  padding:clamp(56px,7vh,88px) clamp(24px,4vw,40px) clamp(32px,4vh,48px);
  overflow-y:auto;
  scrollbar-gutter:stable;
  flex:1;
}
.pp-doc header { margin-bottom:clamp(24px,3vh,36px); }
.pp-doc h2 {
  margin:0 0 .4em; font-size:var(--fs-sub); font-weight:var(--w-bold);
  color:var(--ink-message); letter-spacing:-.02em; line-height:1.2;
}
.pp-doc .pp-meta {
  margin:0; font-size:var(--fs-caption); color:var(--ink-soft);
}
.pp-doc h3 {
  margin:1.8em 0 .6em; font-size:var(--fs-caption); font-weight:var(--w-semi);
  color:var(--ink-message); letter-spacing:.02em; text-transform:uppercase;
}
.pp-doc h4 {
  margin:1.4em 0 .5em; font-size:var(--fs-sub); font-weight:var(--w-semi);
  color:var(--ink-message); letter-spacing:-.01em;
}
.pp-doc p, .pp-doc li, .pp-doc td, .pp-doc th, .pp-doc dd, .pp-doc dt {
  font-size:var(--fs-caption); font-weight:var(--w-reg);
  line-height:1.8; color:var(--ink);
}
.pp-doc p { margin:.4em 0 .8em; }
.pp-doc ul, .pp-doc ol { margin:.2em 0 .8em; padding-left:1.2em; }
.pp-doc li { margin-bottom:.3em; }
.pp-doc dl { margin:.4em 0 .8em; }
.pp-doc dt { font-weight:var(--w-semi); margin-top:.5em; }
.pp-doc dd { margin:0 0 .4em; }
.pp-doc strong, .pp-doc b { font-weight:var(--w-semi); color:var(--ink-message); }
/* 수집 항목 표 — 가로 스크롤 */
.pp-doc .pp-table-wrap { overflow-x:auto; margin:.8em 0; -webkit-overflow-scrolling:touch; }
.pp-doc table {
  width:100%; min-width:520px;
  border-collapse:collapse; font-size:var(--fs-micro);
}
.pp-doc th, .pp-doc td {
  border:1px solid var(--ink-faint); padding:.6em .8em;
  text-align:left; vertical-align:top;
}
.pp-doc th { background:color-mix(in srgb, var(--ink) 3%, var(--bg)); font-weight:var(--w-semi); }
.pp-doc .pp-loading { padding:2em 0; color:var(--ink-soft); text-align:center; }
@media (max-width:560px){
  .pp-modal-panel { max-height:92svh; border-radius:16px; }
  .pp-doc { padding:56px 20px 28px; }
}
@media (prefers-reduced-motion:reduce){
  .pp-modal, .pp-modal-panel { transition:none; }
  .pp-modal-panel { transform:none; }
}