@charset "UTF-8";
/* =========================================================
   WANTS Renewal - Common Style
   - 폰트: Noto Sans KR
   - 이미지 영역은 임시 단색(무채색) 박스로 구현 (추후 background-image 교체)
   ========================================================= */

/* ---------- Web Font ---------- */
@font-face {
  font-family: 'KIMM_Bold';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/KIMM_Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Variables ---------- */
:root {
  --c-blue: #00a8ec;
  --c-green: #2fd37f;
  --c-black: #000;
  --c-dark: #0a0a0a;
  --c-text: #222;
  --c-gray: #666;
  --c-line: #e1e1e1;
  --c-card: #05081a;
  --c-card-line: #121a4a;
  --c-cta: #064766;
  --c-footer: #1b1b1b;

  /* 임시 이미지 영역 (어두운 무채색) */
  --ph-1: #1e1e1e;
  --ph-2: #2b2b2b;
  --ph-3: #383838;
  --ph-4: #454545;

  --inner: 1480px;
  --header-h: 100px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-text);
  background: #fff;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; }
.blind { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.inner { width: 100%; max-width: var(--inner); margin: 0 auto; padding: 0 40px; }
.t-blue { color: var(--c-blue); }
.t-green { color: var(--c-green); }

/* ---------- Common : Section Title ---------- */
.sec-label { display: block; font-size: 17px; font-weight: 700; letter-spacing: .01em; margin-bottom: 14px; }
.sec-title { font-size: 56px; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; }
.sec-desc { margin-top: 22px; font-size: 17px; color: var(--c-gray); line-height: 1.7; }
.center { text-align: center; }

/* ---------- Common : Buttons ---------- */
.btn-line {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 30px;
  border: 1.5px solid currentColor; border-radius: 50px;
  font-size: 17px; font-weight: 700; line-height: 1;
  padding-bottom: 2px; /* Noto Sans KR 글리프가 아래로 치우쳐 보이는 것 보정 */
  transition: background .3s, color .3s, border-color .3s;
}
.btn-line.white { color: #fff; }
.btn-line.white:hover { background: #fff; color: #000; border-color: #fff; }
.btn-line.dark { color: #222; }
.btn-line.dark:hover { background: #222; color: #fff; border-color: #222; }
.btn-fill {
  display: inline-flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 28px;
  background: #fff; color: #222; border-radius: 50px;
  font-size: 18px; font-weight: 700;
  transition: background .3s, color .3s;
}
.btn-fill:hover { background: var(--c-blue); color: #fff; }
.arr { display: inline-block; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); margin-left: 2px; }

/* ---------- Header ---------- */
#header {
  position: fixed; top: 0; left: 0; z-index: 100;
  width: 100%; height: var(--header-h);
  transition: height .4s var(--ease);
  /* 테마 색상 (js/main.js 가 아래 섹션 배경 밝기에 따라 .is-light 토글) */
  --hd-text: #fff;
  --hd-glass: rgba(10, 12, 20, .55);
  --hd-line: rgba(255, 255, 255, .08);
}
#header.is-light {
  --hd-text: #111;
  --hd-glass: rgba(255, 255, 255, .72);
  --hd-line: rgba(0, 0, 0, .06);
}
/* 유리(Glassmorphism) 배경 레이어 : 스크롤 시 은은하게 나타남
   - 헤더 자체가 아닌 ::before 에 blur 적용 (모바일 전체화면 메뉴(position: fixed)가 헤더 안에 갇히지 않도록) */
#header::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--hd-glass);
  border-bottom: 1px solid var(--hd-line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  opacity: 0;
  transition: opacity .45s var(--ease), background-color .45s, border-color .45s;
}
#header.scrolled { height: 72px; }
#header.scrolled::before { opacity: 1; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #header { --hd-glass: rgba(10, 12, 20, .92); }
  #header.is-light { --hd-glass: rgba(255, 255, 255, .95); }
}
#header .inner { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.logo { position: relative; z-index: 110; } /* 모바일 전체화면 메뉴 위에도 로고 표시 */
.logo a { display: flex; align-items: flex-end; gap: 6px; color: var(--c-blue); }
.logo .logo-sub { font-size: 8px; font-weight: 700; letter-spacing: .25em; padding-bottom: 8px; }
.logo .logo-main { font-size: 40px; font-weight: 900; font-style: italic; letter-spacing: -.04em; line-height: 1; }
.logo img { width: 220px; height: auto; transition: width .35s var(--ease); }
#header.scrolled .logo img { width: 180px; }
.gnb ul { display: flex; gap: 42px; }
.gnb a { position: relative; color: var(--hd-text); transition: color .45s; font-family: 'Inter', 'Noto Sans KR', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .01em; }
.gnb a::after {
  content: ''; position: absolute; left: 0; bottom: -6px;
  width: 0; height: 2px; background: var(--c-blue); transition: width .3s var(--ease);
}
.gnb a:hover::after, .gnb a.on::after { width: 100%; }

/* ---------- Sub : 메뉴 바 (PC · 마우스를 올리면 메뉴 펼침)
   - 색상은 #header 테마 변수 사용 → 아래 섹션 배경(밝음/어두움)에 맞춰 자동 전환 (js/main.js) ---------- */
.menu-bar-btn { display: none; }
@media (min-width: 1025px) {
  body.sub #header::before { display: none; } /* 서브페이지는 전체 폭 유리 배경 대신 메뉴 바만 떠 있음 */
  .menu-bar {
    display: flex; align-items: center;
    height: 50px; padding: 0 20px 0 26px; border-radius: 50px;
    background: var(--hd-glass); border: 1px solid var(--hd-line);
    box-shadow: 0 8px 26px rgba(0, 0, 0, .1);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    transition: background-color .45s, border-color .45s, box-shadow .35s;
  }
  .menu-bar:hover, .menu-bar:focus-within, .menu-bar.open { box-shadow: 0 12px 34px rgba(0, 0, 0, .16); }
  .menu-bar .gnb {
    order: -1; /* 화면에서는 버튼 왼쪽 (키보드 Tab 은 버튼 → 메뉴 순서) */
    max-width: 0; overflow: hidden; opacity: 0; visibility: hidden;
    transition: max-width .55s var(--ease), opacity .2s, visibility 0s .55s;
  }
  .menu-bar .gnb ul { gap: 32px; padding: 8px 32px 8px 0; white-space: nowrap; }
  .menu-bar:hover .gnb, .menu-bar:focus-within .gnb, .menu-bar.open .gnb {
    max-width: 640px; opacity: 1; visibility: visible;
    transition: max-width .55s var(--ease), opacity .4s .12s, visibility 0s;
  }
  .menu-bar-btn {
    display: flex; align-items: center; gap: 12px; height: 40px;
    color: var(--hd-text); transition: color .45s;
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .16em; line-height: 1;
  }
  .menu-bar-ico { position: relative; width: 22px; height: 12px; }
  .menu-bar-ico i {
    position: absolute; right: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor;
    transition: width .35s var(--ease), transform .35s var(--ease);
  }
  .menu-bar-ico i:nth-child(1) { top: 0; }
  .menu-bar-ico i:nth-child(2) { top: 5px; width: 65%; }
  .menu-bar-ico i:nth-child(3) { top: 10px; width: 35%; }
  /* 펼침 : 아이콘 줄이 같은 길이로 정렬 */
  .menu-bar:hover .menu-bar-ico i, .menu-bar:focus-within .menu-bar-ico i, .menu-bar.open .menu-bar-ico i { width: 100%; }
}
@media (max-width: 1024px) {
  .menu-bar { display: contents; } /* 모바일은 기존 전체화면 메뉴 그대로 */
}
.btn-menu { display: none; position: relative; width: 30px; height: 22px; z-index: 110; }
.btn-menu span { position: absolute; left: 0; width: 100%; height: 2px; background: var(--hd-text); transition: transform .3s, opacity .3s, top .3s, background-color .45s; }
.btn-menu.active span { background: #fff; } /* 메뉴 열림(검정 전체화면) 시 항상 흰색 */
.btn-menu span:nth-child(1) { top: 0; }
.btn-menu span:nth-child(2) { top: 10px; }
.btn-menu span:nth-child(3) { top: 20px; }
.btn-menu.active span:nth-child(1) { top: 10px; transform: rotate(45deg); }
.btn-menu.active span:nth-child(2) { opacity: 0; }
.btn-menu.active span:nth-child(3) { top: 10px; transform: rotate(-45deg); }

/* =========================================================
   MAIN
   ========================================================= */

/* ---------- Section 1 : Hero ---------- */
.main-hero {
  /* min-height/max-height 고정값 제거 : 사용자 해상도(뷰포트 높이)에 맞춰 섹션이 항상 화면에 꽉 차도록 함 */
  position: relative; display: flex; align-items: center;
  height: 100vh;
  background-color: #020202;
  color: #fff; overflow: hidden;
}
/* 배경 이미지 레이어 : 페이지 진입 시 작게 시작해 커지며 튀어나오는 인트로 */
.main-hero .hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: url('../img/main_hero_bg.jpg');
  background-size: cover; background-position: center;
  animation: heroBgIntro 1.8s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes heroBgIntro {
  0%   { transform: scale(.6); opacity: 0; }
  20%  { opacity: 1; }
  70%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.main-hero .inner { position: relative; z-index: 2; padding-top: 60px; transform: translateY(20%); }
.hero-label { font-size: 19px; font-weight: 700; margin-bottom: 18px; }
.hero-title { font-size: 65px; font-weight: 700; line-height: 1.2; letter-spacing: -.03em; }
.hero-desc { margin-top: 26px; font-size: 18px; line-height: 1.65; color: rgba(255,255,255,.88); }
.hero-btns { display: flex; gap: 12px; margin-top: 36px; }
.hero-btns .btn-line { min-width: 150px; }

/* ---------- Section 2 : About ---------- */
.main-about {
  /* 화면 전체 높이 확보 + 내용 세로 중앙 : 고정(Pin) 시 섹션 전체가 보인 상태로 섹션 3이 덮음 */
  position: relative; display: flex; align-items: center;
  min-height: 100vh; padding: 180px 0 160px;
  background-color: #fff;
  background-image: url('../img/main_about_bg.jpg');
  background-size: cover; background-position: center;
  overflow: hidden;
}
.main-about .about-visual {
  /* 임시 오브젝트 영역 (시안의 3D 링 이미지 자리) - 배경 이미지가 있으면 JS가 숨김 */
  position: absolute; top: 110px; right: -80px;
  width: 640px; height: 800px; border-radius: 50%;
  background: var(--ph-3);
}
.main-about .inner { position: relative; z-index: 1; padding-left: 200px; }
.about-box-wrap { display: flex; align-items: center; gap: 50px; margin-top: 46px; }
.about-box {
  width: 668px; max-width: 100%;
  padding: 36px 56px 38px;
  border: 2px solid var(--c-line); border-radius: 16px; background: #fff;
}
.about-box strong { display: block; font-size: 30px; font-weight: 700; line-height: 1.32; letter-spacing: -.02em; }
.about-box p { margin-top: 10px; font-size: 14px; color: var(--c-gray); line-height: 1.5; }
.btn-circle {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex-shrink: 0; width: 118px; height: 118px;
  border: 2px solid var(--c-line); border-radius: 50%; background: #fff;
  font-size: 18px; font-weight: 700; line-height: 1.3; text-align: center;
  transition: background .3s, color .3s, border-color .3s;
}
.btn-circle small { font-size: 13px; color: var(--c-gray); margin-top: 2px; transition: color .3s; }
.btn-circle:hover { background: #222; color: #fff; border-color: #222; animation-play-state: paused; }
/* 부양 효과 : 제자리에서 위아래 ±5px, hover 시 정지 */
.btn-circle { animation: btnFloat 2s ease-in-out infinite; }
@keyframes btnFloat {
  0%, 100% { transform: translateY(-5px); }
  50%      { transform: translateY(5px); }
}
.btn-circle:hover small { color: #ccc; }

/* ---------- Section 3 : Services ---------- */
.main-service {
  /* 화면 높이에 맞춤 + 세로 중앙 : 고정(Pin) 시 제목부터 카드까지 한 화면에 */
  position: relative; display: flex; align-items: center;
  min-height: 100vh; padding: 120px 0 90px;
  background-color: #020202;
  color: #fff; overflow: hidden;
}
/* 배경 이미지 레이어 : 스크롤 진입 시 제자리에서 서서히 나타남 (js/scroll.js) */
.main-service::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: url('../img/main_service_bg.jpg');
  background-size: cover; background-position: center;
  opacity: var(--bg-op, 1);
  animation: serviceBgFloat 4s ease-in-out infinite; /* 부양 효과 : 위아래 ±10px */
}
@keyframes serviceBgFloat {
  0%, 100% { transform: translateY(-10px); }
  50%      { transform: translateY(10px); }
}
.main-service .service-visual {
  /* 임시 오브젝트 영역 (시안의 구체 이미지 자리) - 배경 이미지가 있으면 JS가 숨김 */
  position: absolute; top: 150px; right: 12%;
  width: 620px; aspect-ratio: 1 / 1; border-radius: 50%;
  background: var(--ph-2);
}
.main-service .inner { position: relative; z-index: 1; }
.bg-loaded .ph-visual { display: none; }
.main-service .sec-desc { color: #fff; margin-top: 18px; }
.main-service .btn-fill { margin-top: 28px; }
.service-list { display: grid; grid-template-columns: repeat(4, 240px); gap: 16px 21px; margin-top: 30px; }
.service-list li a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 176px; padding: 20px;
  background: var(--c-card); border: 1px solid var(--c-card-line); border-radius: 8px;
  text-align: center; transition: background .35s, color .35s, transform .35s var(--ease);
}
.service-list .num { font-family: 'KIMM_Bold', 'Noto Sans KR', sans-serif; font-size: 20px; font-weight: 700; color: var(--c-green); letter-spacing: .04em; line-height: 1; }
.service-list strong { margin-top: 10px; font-size: 18px; font-weight: 700; }
.service-list p { margin-top: 12px; font-size: 12px; line-height: 1.6; color: rgba(255,255,255,.85); }
.service-list li a:hover, .service-list li.on a { background: #fff; color: #222; }
.service-list li a:hover .num, .service-list li.on a .num { color: var(--c-blue); }
.service-list li a:hover p, .service-list li.on a p { color: var(--c-gray); }

/* ---------- Section 4 : Portfolio ---------- */
.main-portfolio { position: relative; z-index: 2; padding: 140px 0 100px; background: #fff; overflow: hidden; } /* 배경·z-index 지정 : 고정(pin)된 섹션 3 위를 덮을 때 비치지 않도록 */
.main-portfolio .btn-line { margin-top: 34px; height: 40px; padding: 0 26px 2px; }
/* 작업 목록 : 한 줄 = 번호 / 작업명 / 태그 / 화살표 · PC 는 줄에 올리면 사진이 커서를 따라옴 (js/scroll.js) */
.pf-list { max-width: 1212px; margin: 70px auto 0; border-top: 1px solid #222; }
.pf-list > li { border-bottom: 1px solid var(--c-line); }
.pf-row {
  display: grid; grid-template-columns: 64px 1fr auto 32px; align-items: center; gap: 24px;
  width: 100%; padding: 28px 0; text-align: left; transition: opacity .4s var(--ease), padding .5s var(--ease);
}
.pf-num { font-size: 13px; font-weight: 500; color: var(--c-gray); letter-spacing: .04em; }
.pf-thumb { display: none; } /* PC : 미리보기(.pf-preview)는 .pf-works 작업 이미지 중 랜덤 (js/scroll.js) */
.pf-name { font-size: clamp(20px, 1.5vw, 28px); font-weight: 700; letter-spacing: -.03em; line-height: 1.3; }
.pf-tags { font-size: 13px; color: var(--c-gray); }
.pf-row .arr { justify-self: end; width: 9px; height: 9px; margin: 0 6px 0 0; transition: transform .4s var(--ease); }
/* 마우스 사용 PC : 올린 줄만 또렷하게 + 왼쪽 여백이 늘어나며 살짝 밀림 (키보드 포커스도 동일) */
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
  .pf-list:hover .pf-row, .pf-list:has(.pf-row:focus-visible) .pf-row { opacity: .3; }
  .pf-list .pf-row:hover, .pf-list .pf-row:focus-visible { opacity: 1; padding-left: 24px; }
  .pf-row:hover .arr, .pf-row:focus-visible .arr { transform: translateX(6px) rotate(45deg); }
}
/* 커서를 따라오는 미리보기 (js/scroll.js 에서 body 에 생성) */
.pf-preview {
  position: fixed; top: 0; left: 0; z-index: 50;
  width: 380px; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden;
  background-color: var(--ph-2); pointer-events: none; will-change: transform, opacity;
}
.pf-preview-track { height: 100%; will-change: transform; }
.pf-preview-track img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; } /* 긴 홈페이지 캡처도 첫 화면이 보이게 */
.pf-hovering .cursor.show { opacity: 0; } /* 미리보기가 보이는 동안 커스텀 커서 숨김 */
/* 모바일·태블릿 (터치 환경 포함) : 미리보기 없이 썸네일 + 작업명 / 태그 2줄 */
@media (hover: none), (max-width: 1024px) {
  .pf-list { margin-top: 50px; }
  .pf-row { grid-template-columns: 88px 1fr; column-gap: 16px; row-gap: 4px; padding: 16px 0; }
  .pf-num, .pf-row .arr { display: none; }
  .pf-thumb { display: block; grid-column: 1; grid-row: 1 / 3; width: 88px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background-color: var(--ph-2); }
  .pf-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; } /* 긴 홈페이지 캡처도 첫 화면이 보이게 */
  .pf-name { grid-column: 2; grid-row: 1; align-self: end; font-size: 17px; }
  .pf-tags { grid-column: 2; grid-row: 2; align-self: start; font-size: 13px; }
}
/* 포트폴리오 상세 모달 (js/main.js) : 왼쪽 대표 이미지 / 오른쪽 업체·프로젝트 형식·설명·링크 */
.pf-modal {
  position: fixed; inset: 0; z-index: 250; display: flex; align-items: center; justify-content: center; padding: 40px;
  visibility: hidden; opacity: 0; transition: opacity .4s var(--ease), visibility .4s;
}
.pf-modal.is-open { visibility: visible; opacity: 1; transition: opacity .4s var(--ease), visibility 0s; } /* 열릴 때 즉시 보이게 (닫기 버튼 포커스 가능) */
.pf-modal-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); }
.pf-modal-box {
  position: relative; display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: minmax(0, 1fr);
  width: 100%; max-width: 1120px; height: 85vh; max-height: 760px; overflow: hidden; overscroll-behavior: contain;
  background: #fff; border-radius: 20px;
  transform: translateY(40px) scale(.97); transition: transform .5s var(--ease);
}
.pf-modal.is-open .pf-modal-box { transform: none; }
.pf-modal-box:focus { outline: none; }
/* 프로젝트 이동 시 내용 교체 페이드 (.2s) */
.pf-modal-media, .pf-modal-info { transition: opacity .2s ease; }
.pf-modal-box.is-swapping .pf-modal-media, .pf-modal-box.is-swapping .pf-modal-info { opacity: 0; }

/* 왼쪽 미디어 : 안에서만 세로 스크롤 (.pf-media-scroll) + 하단 스크롤 안내 (.pf-scroll-hint) */
.pf-modal-media { position: relative; min-height: 0; overflow: hidden; background-color: var(--ph-2); }
.pf-media-scroll {
  position: relative; display: flex; flex-direction: column; height: 100%; overflow-y: auto; overscroll-behavior: contain; outline: none;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent;
}
.pf-media-scroll > * { flex: none; }
.pf-media-scroll:focus-visible { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); }
.pf-media-scroll::-webkit-scrollbar { width: 6px; }
.pf-media-scroll::-webkit-scrollbar-track { background: transparent; }
.pf-media-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); border-radius: 6px; }
/* 브라우저 상단 바 (sticky) : 가운데 작업 url 도메인 */
.pf-media-head { position: sticky; top: 0; z-index: 2; background: #383838; }
.pf-browser-bar { position: relative; display: flex; align-items: center; height: 30px; padding: 0 12px; }
.pf-browser-dots { display: flex; gap: 6px; }
.pf-browser-dots i { width: 9px; height: 9px; border-radius: 50%; background: #5c5c5c; }
.pf-browser-url {
  position: absolute; top: 50%; left: 50%; max-width: calc(100% - 140px); transform: translate(-50%, -50%);
  font-size: 11px; color: rgba(255, 255, 255, .5); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 메인 페이지 캡처 1장 : 원본 비율 그대로 (로딩 전에는 배경색으로 자리만) */
.pf-media-item { margin: auto 0; min-height: 240px; background-color: var(--ph-2); } /* 영역보다 짧으면 세로 가운데, 길면 위에서부터 스크롤 */
.pf-media-item.is-loaded, .pf-media-item.is-error { min-height: 0; }
.pf-media-item img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
.pf-media-item.is-fit { padding: 32px; } /* 영역 안에 다 들어가는 이미지 : 여백 32px 안 최대 크기 가운데 (크기는 js/main.js 에서 계산) */
.pf-media-item.is-fit img { margin: 0 auto; }
.pf-media-ph {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3;
  background: #333; font-size: 14px; color: rgba(255, 255, 255, .4); letter-spacing: .02em;
}
.pf-scroll-hint {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 80px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; padding-bottom: 14px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .55));
  font-size: 11px; font-weight: 500; color: #fff; letter-spacing: .2em;
  pointer-events: none; opacity: 0; transition: opacity .4s var(--ease);
}
.pf-scroll-hint.is-show { opacity: 1; }
.pf-scroll-hint i { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); animation: pfHintArrow 1.4s var(--ease) infinite; }
@keyframes pfHintArrow { 0%, 100% { translate: 0 -2px; } 50% { translate: 0 3px; } }
/* 영상 프로젝트 : 브라우저 바·스크롤 없이 가운데 16:9 */
.pf-modal-media.is-video { display: flex; align-items: center; }
.pf-media-video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.pf-media-video iframe, .pf-media-video video { display: block; width: 100%; height: 100%; border: 0; }
.pf-media-video .pf-media-ph { height: 100%; aspect-ratio: auto; }
/* 썸네일(poster) + 재생 버튼 / 영상이 없으면 '영상 준비 중' */
.pf-video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pf-video-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .45); font-size: 15px; color: #fff; letter-spacing: .02em; }
.pf-video-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .15); transition: background-color .3s; }
.pf-video-play i { position: relative; width: 76px; height: 76px; border-radius: 50%; background: rgba(255, 255, 255, .92); transition: transform .3s var(--ease); }
.pf-video-play i::before { content: ''; position: absolute; top: 50%; left: 50%; margin: -11px 0 0 -6px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #222; }
.pf-video-play:hover { background: rgba(0, 0, 0, .3); }
.pf-video-play:hover i { transform: scale(1.08); }
.pf-video-play:focus-visible i { outline: 2px solid #fff; outline-offset: 4px; }

/* 오른쪽 정보 : 번호~바로가기 묶음을 닫기 버튼 아래 ~ 넘김 컨트롤 위(없으면 패널 전체)의 세로 가운데에
   - .pf-modal-num 위 · .pf-modal-body 아래 auto 여백으로 가운데 정렬, 넘김 컨트롤은 하단 고정
   - 내용이 패널보다 길면 auto 여백이 0 이 되어 위에서부터 배치 + 패널 안 스크롤 (잘리지 않음) */
.pf-modal-info { display: flex; flex-direction: column; min-height: 0; padding: 64px 48px 40px; overflow-y: auto; overscroll-behavior: contain; }
.pf-modal-info:has(> .pf-modal-pager[hidden]) { padding-bottom: 64px; } /* 넘김 컨트롤이 없으면 위아래 여백을 같게 → 패널 전체 가운데 */
.pf-modal-num { margin-top: auto; font-size: 13px; font-weight: 500; color: var(--c-gray); letter-spacing: .04em; }
.pf-modal-title { margin-top: 10px; font-size: 28px; font-weight: 700; letter-spacing: -.03em; line-height: 1.3; text-wrap: balance; } /* 두 줄이 되면 줄 길이를 고르게 */
.pf-modal-body { display: flex; flex-direction: column; margin-top: 30px; margin-bottom: auto; }
.pf-modal-body .pf-detail-info { display: grid; grid-template-columns: 80px 1fr; gap: 16px 20px; padding: 24px 0; border-top: 1px solid #222; border-bottom: 1px solid var(--c-line); }
.pf-modal-body dt { padding-top: 5px; font-size: 13px; font-weight: 700; color: var(--c-gray); letter-spacing: .04em; }
.pf-modal-body dd { font-size: 16px; font-weight: 500; line-height: 1.6; }
.pf-type { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-type li { padding: 4px 14px 5px; border: 1px solid var(--c-line); border-radius: 40px; font-size: 14px; }
.pf-modal-body .pf-detail-desc { margin-top: 24px; font-size: 15px; line-height: 1.7; color: var(--c-gray); }
.pf-modal-body .pf-detail-link { align-self: flex-start; margin-top: 28px; height: 44px; padding: 0 24px 2px; font-size: 15px; }
.pf-modal-body .pf-detail-desc + .pf-detail-link { margin-top: 32px; }
.pf-modal-close {
  position: absolute; top: 18px; right: 18px; z-index: 1; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, .9); transition: transform .4s var(--ease);
}
.pf-modal-close::before, .pf-modal-close::after { content: ''; position: absolute; top: 50%; left: 50%; width: 18px; height: 2px; margin: -1px 0 0 -9px; background: #222; transform: rotate(45deg); }
.pf-modal-close::after { transform: rotate(-45deg); }
.pf-modal-close:hover { transform: rotate(90deg); }
/* 같은 카테고리 안 작업 넘김 : 왼쪽 1 / 3 · 오른쪽 이전·다음 원형 버튼 */
.pf-modal-pager { display: flex; align-items: center; justify-content: space-between; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--c-line); }
.pf-modal-pager[hidden] { display: none; }
.pf-pager-count { font-size: 14px; color: var(--c-gray); letter-spacing: .04em; }
.pf-pager-count b { font-weight: 700; color: var(--c-text); }
.pf-pager-btns { display: flex; gap: 8px; }
.pf-pager-btn {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--c-line); border-radius: 50%;
  transition: border-color .3s, background-color .3s, color .3s, opacity .25s;
}
.pf-pager-btn .arr { width: 8px; height: 8px; margin: 0 0 0 -3px; }
.pf-pager-btn.prev .arr { margin: 0 -3px 0 0; transform: rotate(-135deg); }
.pf-pager-btn:not(:disabled):hover { border-color: #222; background: #222; color: #fff; }
.pf-pager-btn:disabled { opacity: .3; cursor: default; }
.pf-modal-open .pf-preview { display: none; } /* 모달이 열려 있는 동안 커서 미리보기 숨김 */
.pf-modal-open .cursor.show { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .pf-scroll-hint i { animation: none; }
}
/* 태블릿·모바일 : 위 미디어 / 아래 정보로 쌓고 모달 전체 스크롤 (미디어는 60vh 안에서 내부 스크롤) */
@media (max-width: 1024px) {
  .pf-modal-box { display: block; max-width: 640px; height: auto; max-height: calc(100vh - 80px); overflow-y: auto; }
  .pf-modal-media.is-video { display: block; }
  .pf-media-scroll { height: auto; max-height: 60vh; }
  .pf-modal-info, .pf-modal-info:has(> .pf-modal-pager[hidden]) { padding: 32px 28px 36px; overflow: visible; }
  .pf-modal-num, .pf-modal-body { margin-top: 0; margin-bottom: 0; } /* 쌓는 구조에서는 가운데 정렬 없이 위에서부터 */
  .pf-modal-body { margin-top: 30px; }
  /* 닫기 버튼 : 스크롤해도 미디어 위 오른쪽 상단에 고정 (흰 아이콘 + 반투명 원) */
  .pf-modal-close { position: sticky; top: 12px; z-index: 3; display: block; margin: 12px 12px -56px auto; background: rgba(0, 0, 0, .45); }
  .pf-modal-close::before, .pf-modal-close::after { background: #fff; }
  .pf-modal-box .pf-browser-bar { padding-right: 64px; } /* 닫기 버튼과 겹치지 않게 */
}
@media (max-width: 768px) {
  .pf-modal { padding: 16px; }
  .pf-modal-box { max-height: calc(100vh - 32px); border-radius: 16px; }
  .pf-modal-pager { margin-top: 28px; }
  .pf-modal-info, .pf-modal-info:has(> .pf-modal-pager[hidden]) { padding: 26px 20px 28px; }
  .pf-modal-title { font-size: 22px; }
  .pf-modal-body { margin-top: 22px; }
  .pf-modal-body .pf-detail-info { grid-template-columns: 66px 1fr; gap: 12px 14px; padding: 18px 0; }
  .pf-modal-body dd { font-size: 15px; }
  .pf-type li { font-size: 13px; padding: 3px 12px 4px; }
  .pf-modal-close { width: 40px; height: 40px; margin-bottom: -52px; }
}
/* 스크롤 바 : 회색 점선 위로 그라데이션 막대가 이동 (SERVICES 갤러리 바 .svc-gallery-bar 에서 사용) */
.pf-bar {
  position: relative; width: 260px; max-width: 100%; height: 5px; margin: 32px auto 0;
  background: radial-gradient(circle, #b3b3b3 2px, transparent 2.5px) 0 50% / 15px 5px repeat-x; /* 점선 트랙 */
  cursor: pointer; touch-action: none;
}
.pf-bar::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; } /* 클릭·드래그 영역 확장 */
.pf-bar-thumb {
  position: absolute; left: 0; top: 0; height: 100%; width: 40%; /* 참고 시안 비율 */
  background: var(--c-blue); border-radius: 5px; /* 포인트 컬러 */
  transition: transform .6s var(--ease); will-change: transform;
}
.pf-bar.is-dragging .pf-bar-thumb { transition: none; } /* 드래그 연동 시 즉시 반영 */

/* ---------- Section 5 : Content ---------- */
.main-content { padding: 220px 0 180px; background: #fff; }
.content-wrap { display: flex; gap: 20px; max-width: 1016px; margin: 110px auto 0; }
.insta-box { flex: 0 0 632px; padding: 18px 12px 12px; border: 1.5px solid var(--c-line); border-radius: 16px; }
.insta-box h3 { font-size: 16px; font-weight: 700; text-align: center; margin-bottom: 2px; }
.insta-account { display: block; width: fit-content; margin: 0 auto 12px; font-size: 12px; color: var(--c-gray); letter-spacing: .02em; transition: color .3s; }
.insta-account:hover { color: var(--c-blue); }
.insta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px 10px; }
/* 썸네일 칸 : data/instagram.json 의 썸네일로 채움 (js/main.js) · 기본값은 로고 이미지 */
.insta-grid a { position: relative; display: block; aspect-ratio: 1 / 0.98; overflow: hidden; background-color: var(--ph-2); }
.insta-grid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 게시물 종류 아이콘 (오른쪽 위) : 릴스·영상 = 재생 / 여러 장 = 겹친 사각형 */
.insta-type { position: absolute; top: 8px; right: 8px; z-index: 1; width: 18px; height: 18px; background: center / contain no-repeat; filter: drop-shadow(0 0 1px rgba(0, 0, 0, .5)) drop-shadow(0 1px 3px rgba(0, 0, 0, .5)); pointer-events: none; } /* 밝은 이미지 위에서도 보이게 */
.insta-type.is-video { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l12.5-7.5z' fill='white'/%3E%3C/svg%3E"); }
.insta-type.is-carousel { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='13' height='13' rx='2' fill='none' stroke='white' stroke-width='2'/%3E%3Crect x='8' y='8' width='13' height='13' rx='2' fill='white'/%3E%3C/svg%3E"); }
/* 마우스를 올리면 살짝 어두워지며 가운데 인스타그램 아이콘 */
.insta-grid a::before, .insta-grid a::after { content: ''; position: absolute; z-index: 2; opacity: 0; transition: opacity .3s var(--ease), transform .3s var(--ease); pointer-events: none; }
.insta-grid a::before { inset: 0; background: rgba(0, 0, 0, .35); }
.insta-grid a::after {
  top: 50%; left: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; transform: scale(.85);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='.6' fill='white'/%3E%3C/svg%3E") center / contain no-repeat;
}
.insta-grid a:hover::before, .insta-grid a:focus-visible::before, .insta-grid a:hover::after, .insta-grid a:focus-visible::after { opacity: 1; }
.insta-grid a:hover::after, .insta-grid a:focus-visible::after { transform: none; }
/* 썸네일 위에서는 커스텀 커서 숨김 (색 반전 효과 때문에 흰 인스타그램 아이콘이 검게 보이지 않도록 · .pf-hovering 과 같은 방식) */
html:has(.insta-grid a:hover) .cursor.show { opacity: 0; }
.blog-list { flex: 1; display: flex; flex-direction: column; gap: 22px; }
.blog-list li { flex: 1; }
.blog-list a {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  height: 100%; min-height: 138px; padding: 24px 28px;
  border: 1.5px solid var(--c-line); border-radius: 16px;
  transition: border-color .3s, box-shadow .3s;
}
.blog-list a:hover { border-color: var(--c-blue); box-shadow: 0 10px 24px rgba(0,0,0,.06); }
.blog-list .tag { align-self: flex-start; padding: 0 12px; background: #e3e3e3; border-radius: 20px; font-size: 11px; color: #777; line-height: 18px; }
.blog-list p { margin-top: 6px; font-size: 15px; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } /* 긴 제목은 두 줄까지 + 말줄임 */
.blog-list .ico-blog {
  position: absolute; top: 16px; right: 18px;
  padding: 2px 5px; background: #2db400; border-radius: 3px;
  font-size: 10px; font-weight: 700; color: #fff; line-height: 1.3;
}

/* ---------- Section 6 : CTA ---------- */
.main-cta { position: relative; padding: 100px 0 90px; background: var(--c-cta); color: #fff; text-align: center; overflow: hidden; }
/* 배경 동영상 + 가독성용 반투명 막 */
.main-cta .cta-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.main-cta.has-video::before { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(4, 40, 60, .72); }
.main-cta .inner { position: relative; z-index: 2; }
.main-cta h2 { font-size: 40px; font-weight: 700; line-height: 1.4; letter-spacing: -.02em; }
.main-cta p { margin-top: 14px; font-size: 15px; color: rgba(255,255,255,.9); }
.main-cta .btn-line { margin-top: 30px; width: 362px; max-width: 100%; height: 50px; font-size: 19px; }

/* =========================================================
   SUB PAGE (공통 뼈대)
   ========================================================= */
.sub-visual {
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  height: 480px; padding-top: var(--header-h);
  background-color: var(--ph-1); /* TODO: background-image 교체 */
  background-size: cover; background-position: center;
  color: #fff; text-align: center;
}
.sub-visual .sec-label { color: var(--c-blue); }
.sub-visual h2 { font-size: 52px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; }
.sub-visual p { margin-top: 14px; font-size: 17px; color: rgba(255,255,255,.8); }
.sub-sec { padding: 140px 0; }
.sub-sec.gray { background: #f6f6f6; }
.sub-sec.dark { background: var(--c-dark); color: #fff; }
.sub-sec.dark .sec-desc { color: rgba(255,255,255,.7); }
.sub-sec .sec-title { font-size: 44px; }
.ph-box { /* 임시 이미지 박스 */
  background-color: var(--ph-2); background-size: cover; background-position: center;
  border-radius: 8px;
}

/* sub : 2단 레이아웃 */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; margin-top: 70px; }
.split .ph-box { aspect-ratio: 4 / 3; }
.split h3 { font-size: 30px; font-weight: 700; line-height: 1.4; }
.split p { margin-top: 18px; color: var(--c-gray); }

/* sub : 카드 그리드 */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 70px; }
.card-grid.col4 { grid-template-columns: repeat(4, 1fr); }
.card { padding: 40px 34px; border: 1.5px solid var(--c-line); border-radius: 12px; background: #fff; transition: border-color .3s, transform .3s var(--ease); }
.card:hover { border-color: var(--c-blue); transform: translateY(-6px); }
.card .num { font-size: 20px; font-weight: 700; color: var(--c-green); }
.card h3 { margin-top: 10px; font-size: 22px; font-weight: 700; }
.card p { margin-top: 12px; font-size: 15px; color: var(--c-gray); }
.sub-sec.dark .card { background: var(--c-card); border-color: var(--c-card-line); }
.sub-sec.dark .card p { color: rgba(255,255,255,.7); }

/* sub : 숫자 지표 */
.stat-list { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 70px; border-top: 2px solid #222; }
.stat-list li { padding: 40px 20px; text-align: center; border-right: 1px solid var(--c-line); }
.stat-list li:last-child { border-right: 0; }
.stat-list strong { display: block; font-size: 48px; font-weight: 700; color: var(--c-blue); line-height: 1.2; }
.stat-list span { font-size: 15px; color: var(--c-gray); }

/* sub : 서비스 상세 */
.svc-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; padding: 80px 0; border-bottom: 1px solid var(--c-line); }
.svc-detail:last-child { border-bottom: 0; }
.svc-detail:nth-child(even) .ph-box { order: 2; }
.svc-detail .ph-box { aspect-ratio: 16 / 10; }
.svc-detail .num { font-size: 20px; font-weight: 700; color: var(--c-green); }
.svc-detail h3 { margin-top: 8px; font-size: 34px; font-weight: 700; }
.svc-detail p { margin-top: 16px; color: var(--c-gray); }
.svc-detail ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.svc-detail ul li { padding: 4px 14px; background: #f1f1f1; border-radius: 20px; font-size: 13px; color: #555; }

/* sub : 프로세스 */
.process-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 70px; counter-reset: step; }
.process-list li { padding: 34px 22px; border: 1px solid var(--c-card-line); border-radius: 12px; background: var(--c-card); text-align: center; }
.process-list li::before { counter-increment: step; content: 'STEP 0' counter(step); display: block; font-size: 13px; font-weight: 700; color: var(--c-green); }
.process-list strong { display: block; margin-top: 8px; font-size: 19px; }
.process-list p { margin-top: 8px; font-size: 13px; color: rgba(255,255,255,.7); }

/* ---------- SERVICES 페이지 (틀 : 세부 디자인은 추후 조정) ---------- */
/* 섹션 1 : 메인 섹션1처럼 해상도(뷰포트 높이)에 맞춰 화면에 꽉 차게. 밝은 이미지라 어두운 글자 사용 */
.sub-visual.svc-visual {
  position: relative; overflow: hidden;
  height: 100vh; min-height: 640px; padding: var(--header-h) 0 0;
  background-color: #eef0f2; /* 헤더 테마 감지용(밝은 배경 → 어두운 헤더 글자) · 이미지 로드 전 바탕 */
  background-image: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)), url('../img/services_hero_bg.jpg'); /* 이미지 위 흰색 레이어 : 글자 가독성 */
  color: #222;
}
.svc-visual h2 { font-size: 36px; font-weight: 600; line-height: 1.45; color: #222; }
.svc-visual h2 > * { display: block; }
.svc-visual h2 strong { font-size: calc(58px * var(--big, 1)); font-weight: 700; line-height: 1.3; color: var(--c-blue); } /* --big : 스크롤 연출 확대 배율 (js/services.js) */
/* 스크롤 연출 초기 상태 (html.svc-anim · js/services.js 가 순서대로 등장시킴) */
.svc-anim .svc-visual h2 > *, .svc-anim .svc-visual p { opacity: 0; }
.svc-anim .svc-visual h2 strong { color: #222; } /* 축소된 뒤 포인트 색상으로 바뀜 */
.svc-anim .svc-visual .ab-scroll { display: block; }
.svc-visual p { margin-top: 30px; font-size: 16px; line-height: 1.8; color: #444; }
/* 섹션 2 : 서비스 탭 + 선택한 서비스 소개 (가운데 정렬) */
.svc-tabs-sec { position: relative; z-index: 1; padding: 120px 0 130px; background: #fff; }
/* 섹션 2 배경 동영상 : 흰 배경 위로 옅게 → 타이틀·카드 가독성 확보 */
.svc-tabs-bg {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: url('../video/services_tabs_bg_poster.jpg') center / cover no-repeat; /* 동영상 재생 전 포스터 */
  opacity: .04;
}
.svc-tabs-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc-tabs-sec > .inner { position: relative; z-index: 1; }
/* 섹션 2 → 3 → 4 전환 : 고정된 섹션 위로 다음 섹션이 덮는 동안 어두워짐 (--dim · js/services.js) */
.svc-output { position: relative; z-index: 2; }
.svc-process, .svc-cta { position: relative; z-index: 3; }
.svc-tabs-sec::after, .svc-output::after {
  content: ''; position: absolute; inset: 0; z-index: 30;
  background: #000; opacity: var(--dim, 0); pointer-events: none;
}
/* 탭 : 배경 띠 없이 버튼만 반투명 유리 질감으로 표시
   js/services.js 가 화면 위에 띄워(.is-float) 원래 자리를 따라가다 헤더 아래에 머물고, CTA 섹션 전까지 유지 */
.svc-tabs {
  position: sticky; top: var(--header-h); z-index: 20; /* 스크립트 미동작 시 기본 동작 */
  display: flex; justify-content: center; gap: 10px; padding: 14px 0;
}
.svc-tabs.is-float {
  position: fixed; left: 0; top: 0; z-index: 80; width: 100%; margin: 0;
  transition: opacity .35s var(--ease), visibility .35s;
}
.svc-tabs.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } /* CTA 섹션 도달 시 */
.svc-tabs.is-band { /* 섹션 2 를 지나는 동안 : 섹션 배경색 띠(헤더 아래 ~ 버튼 줄)로 아래 내용이 비치지 않게 (js/services.js) */
  background: var(--band, #fff); box-shadow: 0 0 0 100vmax var(--band, #fff); clip-path: inset(calc(-1 * var(--header-h)) -100vmax 0);
}
.svc-tab {
  flex: none; height: 45px; padding: 0 22px; border: 1px solid rgba(0, 0, 0, .1); border-radius: 40px; /* 섹션 2 요소 크기 0.9 배 */
  font-size: 14.5px; font-weight: 700; color: #444;
  background: rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .06); transition: all .3s;
}
.svc-tab:hover { border-color: #222; color: #222; background: rgba(255, 255, 255, .85); }
.svc-tab.on { background: rgba(34, 34, 34, .88); border-color: transparent; color: #fff; }
/* 어두운 섹션(섹션 3·4) 위 : 흰 글자 유리 버튼 + 선택 탭은 흰색 (js/services.js 가 .is-dark 토글) */
.svc-tabs.is-dark .svc-tab { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .9); box-shadow: 0 4px 16px rgba(0, 0, 0, .25); }
.svc-tabs.is-dark .svc-tab:hover { border-color: #fff; background: rgba(255, 255, 255, .2); color: #fff; }
.svc-tabs.is-dark .svc-tab.on { border-color: #fff; background: #fff; color: #111; }
.svc-pane { padding-top: 117px; text-align: center; }
/* 탭 전환 : 공통 틀(섹션 2 패널 · 섹션 3 산출물 목록)의 문구를 바꾸는 동안 잠깐 흐려졌다 나타남 (js/services.js SWITCH_MS 와 같은 시간) */
.svc-pane, .svc-deliver { transition: opacity .28s ease, transform .28s ease; }
.svc-pane.is-switching, .svc-deliver.is-switching { opacity: 0; transform: translateY(12px); }
.svc-headline .sec-label { margin-bottom: 18px; color: #222; font-size: 16px; letter-spacing: 0; }
.svc-headline h3 { font-size: 52px; font-weight: 700; line-height: 1.55; letter-spacing: -.03em; color: #222; }
.svc-summary {
  max-width: 743px; margin: 65px auto 0; padding: 50px 36px;
  border: 2px solid #e3e3ec; border-radius: 16px; background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .06); /* 옅은 회색 그림자 */
}
.svc-summary strong { display: block; font-size: 24px; font-weight: 700; line-height: 1.45; color: #222; }
.svc-summary p { max-width: 486px; margin: 13px auto 0; font-size: 14.5px; line-height: 1.5; color: var(--c-gray); }
/* 플러스 기호 */
.svc-plus { position: relative; display: block; width: 47px; height: 47px; margin: 63px auto 0; }
.svc-plus::before, .svc-plus::after { content: ''; position: absolute; left: 50%; top: 50%; background: #222; transform: translate(-50%, -50%); }
.svc-plus::before { width: 100%; height: 8px; }
.svc-plus::after { width: 8px; height: 100%; }
.svc-block { margin-top: 63px; }
.svc-block-title { display: block; margin-bottom: 16px; font-size: 14px; font-weight: 700; letter-spacing: .08em; color: var(--c-blue); }
.svc-block-focus .svc-block-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* 시안에 없는 제목 : 화면에서만 숨김 */
.svc-focus { display: grid; grid-template-columns: repeat(3, 284px); justify-content: center; gap: 27px; }
.svc-focus li {
  display: flex; flex-direction: column; justify-content: center; min-height: 218px; padding: 27px 25px;
  border: 2px solid #dcdcdc; border-radius: 22px; background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .06); /* 옅은 회색 그림자 */
}
.svc-focus strong { display: block; font-size: 23px; font-weight: 700; color: #222; }
.svc-focus p { margin-top: 16px; font-size: 13.5px; line-height: 1.5; color: var(--c-gray); }
.svc-connect {
  max-width: 1008px; margin: 0 auto; padding: 28px 30px;
  border: 1px solid #dce9e3; border-radius: 16px; background: linear-gradient(115deg, #edf9f3, #eef4ff);
}
.svc-connect strong { display: block; font-size: 17px; font-weight: 700; color: #222; }
.svc-connect p { margin-top: 8px; font-size: 15px; line-height: 1.75; color: #5d6875; }

/* 섹션 3 : 실행 산출물 (어두운 배경) + 이미지 카드 슬라이더 */
.svc-output { background-color: #000; color: #fff; overflow: hidden; }
.svc-output-top {
  position: relative; z-index: 3; color: #fff; /* 고정 중 body 로 옮겨져도(js/services.js pinReparent) 같은 모습 유지 */
  padding: 190px 0 220px; text-align: center;
  background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), url('../img/services_output_bg.jpg') center / cover no-repeat #1a1d1f; /* 이미지 위 20% 어두운 레이어 : 가독성 · #1a1d1f : 이미지 로드 전 바탕 */
}
.svc-output-title { font-size: 40px; font-weight: 700; line-height: 1.5; letter-spacing: -.02em; }
.svc-output-desc { margin-top: 22px; font-size: 16px; color: rgba(255, 255, 255, .85); }
.svc-deliver { /* 박스 크기 0.9 배 */
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 27px;
  max-width: 1222px; margin: 63px auto 0;
}
.svc-deliver li {
  display: flex; flex-direction: column; justify-content: center; min-height: 176px; padding: 27px;
  border: 1px solid rgba(70, 90, 210, .35); border-radius: 13px; background: rgba(0, 17, 54, .79); /* #001136 · 79% */
}
.svc-deliver strong { display: block; font-size: 27px; font-weight: 700; }
.svc-deliver span { display: block; margin-top: 18px; font-size: 13.5px; color: rgba(255, 255, 255, .8); }
/* 강조 : 마우스를 올리거나 스크롤 순서에 맞춰 .on (메인 섹션 3 서비스 카드와 같은 방식 · js/services.js) */
.svc-deliver li { transition: background-color .4s, border-color .4s, color .4s; }
.svc-deliver span { transition: color .4s; }
.svc-deliver li:hover, .svc-deliver li.on { background-color: #fff; border-color: #fff; color: #222; }
.svc-deliver li:hover span, .svc-deliver li.on span { color: var(--c-gray); }
/* 카드 : 추후 이미지가 들어갈 회색 박스 · 스크롤에 따라 가로 이동 (js/services.js) */
.svc-gallery { position: relative; margin-top: -64px; padding-bottom: 90px; }
.svc-gallery-track { display: flex; gap: 24px; width: max-content; will-change: transform; }
.svc-gallery-item { flex: none; width: clamp(220px, 20.4vw, 392px); aspect-ratio: 392 / 553; background: #d9d9d9; }
/* 스크롤 바 : 메인 포트폴리오 바 형식 · 어두운 배경에 맞춘 차분한 색 */
.svc-gallery-bar { margin-top: 32px; background-image: radial-gradient(circle, rgba(255, 255, 255, .25) 2px, transparent 2.5px); }
.svc-gallery-bar .pf-bar-thumb { background: rgba(255, 255, 255, .75); transition: none; }

/* 섹션 4 : 진행 과정 (화면 고정 연출 · js/services.js) */
.svc-process { position: relative; height: 100vh; min-height: 700px; background-color: #000; color: #fff; overflow: hidden; }
.svc-proc-bg {
  position: absolute; inset: 0;
  background: linear-gradient(rgba(0, 0, 0, .85), rgba(0, 0, 0, .85)), url('../img/services_process_bg.jpg') center / cover no-repeat #05090b; /* 이미지 위 85% 어두운 레이어 : 가독성 · #05090b : 이미지 로드 전 바탕 */
}
.svc-proc-inner {
  position: relative; z-index: 1; height: 100%; max-width: 1300px;
  display: grid; grid-template-columns: 1fr 640px; align-items: center; align-content: center; align-content: safe center; gap: 60px; /* safe : 내용이 화면보다 길면 위(탭 버튼 줄 아래)부터 배치 */
  /* 헤더·탭 버튼 줄(약 73px) 아래 남은 영역 가운데에 배치 → 버튼 줄에 가리지 않음 */
  padding-top: calc(var(--header-h) + 93px); padding-bottom: 20px;
}
@media (min-width: 769px) {
  /* PC · 태블릿 : 아래 여백도 위 여백과 같게 → 섹션 높이의 가운데에 배치
     화면 높이가 860px 보다 낮으면 그만큼 아래 여백을 줄여, 가운데에 가깝게 두되 탭 버튼 줄에는 가리지 않도록 */
  .svc-proc-inner { padding-bottom: clamp(20px, calc(var(--header-h) + 93px - 860px + 100vh), calc(var(--header-h) + 93px)); }
}
.svc-proc-head { position: relative; display: flex; align-items: center; justify-content: center; }
/* 입체 일러스트 (투명 배경 WebP) */
.svc-proc-graphic { display: flex; align-items: center; justify-content: center; width: 440px; max-width: 100%; aspect-ratio: 1; }
.svc-proc-graphic img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .45)); }
.svc-proc-title { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; }
.svc-proc-title .sec-label { margin-bottom: 10px; color: #fff; font-size: 20px; letter-spacing: 0; }
.svc-proc-title h2 { font-size: 40px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.svc-steps { display: flex; flex-direction: column; gap: 35px; } /* 박스 간격 35px (모든 화면 크기) */
.svc-steps li { /* 가로형 슬림 카드 : [STEP 배지] [제목] | [설명] 을 고정 폭으로 묶어 박스 가운데에 배치 (모든 박스에서 칸 위치가 맞음) */
  display: flex; align-items: center; justify-content: center; height: 64px; padding: 0 20px; line-height: 1.2;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; background: linear-gradient(90deg, rgba(24, 24, 26, .94), rgba(10, 10, 11, .94)); /* 무채색 : 흰색 14% 테두리 · 짙은 회색 → 검정 */
}
.svc-step-no {
  flex: none; width: 76px; padding: 7px 0; border-radius: 9px; background: rgba(255, 255, 255, .1); text-align: center;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .06em;
}
.svc-steps strong { flex: none; width: 150px; margin-left: 22px; white-space: nowrap; font-size: 21px; font-weight: 700; color: var(--c-green); }
.svc-steps p {
  flex: 0 1 232px; min-width: 0; padding-left: 22px; /* 고정 폭(좁은 화면에서는 줄어듦) */ border-left: 1px solid rgba(255, 255, 255, .16);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; color: rgba(255, 255, 255, .78);
}

/* 섹션 5 : CTA 배너 */
.svc-cta { padding: 130px 0 140px; background-color: #010303; } /* 섹션 4 배경(이미지 + 85% 어두운 레이어)의 가장 어두운 부분과 같은 색 */
.svc-cta-box { /* 펼쳐지며 등장 : js/services.js */
  display: flex; align-items: center; justify-content: space-between; gap: 48px;
  max-width: 1000px; margin: 0 auto; padding: 56px 64px; border-radius: 20px;
  background: linear-gradient(90deg, #172438 0%, #142a2c 55%, #123726 100%); color: #fff;
  clip-path: inset(var(--unfold, 0%) 0% round 20px); /* --unfold : 위아래에서 가려지는 비율 (0% = 다 펼쳐짐) */
}
.svc-cta-box h2 { font-size: 30px; font-weight: 700; line-height: 1.45; letter-spacing: -.03em; }
.svc-cta-box p { margin-top: 16px; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .7); }
.svc-cta-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 0 32px;
  border-radius: 40px; background: #fff; font-size: 15px; font-weight: 700; color: #111;
  transition: background .3s, color .3s, transform .35s var(--ease), box-shadow .35s;
}
.svc-cta-btn:hover { background: var(--c-green); color: #fff; transform: translateY(-3px); box-shadow: 0 10px 26px rgba(47, 211, 127, .3); }

@media (max-width: 1400px) {
  .svc-proc-inner { grid-template-columns: 1fr 560px; }
  .svc-steps li { height: 58px; }
  .svc-step-no { width: 70px; font-size: 12px; }
  .svc-steps strong { width: 132px; margin-left: 18px; font-size: 19px; }
  .svc-steps p { flex-basis: 208px; padding-left: 18px; font-size: 15px; }
  .svc-proc-graphic { width: 380px; }
}
@media (max-width: 1024px) {
  .svc-visual h2 { font-size: 30px; }
  .svc-visual h2 strong { font-size: calc(48px * var(--big, 1)); }
  .svc-tabs-sec { padding: 80px 0 100px; }
  .svc-tabs { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin: 0 -40px; padding-left: 40px; padding-right: 40px; }
  .svc-tabs.is-float { margin: 0; }
  .svc-tabs::-webkit-scrollbar { display: none; }
  .svc-pane { padding-top: 72px; }
  .svc-headline h3 { font-size: 38px; }
  .svc-summary { margin-top: 45px; padding: 36px 27px; }
  .svc-summary strong { font-size: 21px; }
  .svc-focus { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .svc-focus li { min-height: 189px; padding: 23px 18px; }
  .svc-focus strong { font-size: 20px; }
  .svc-output-top { padding: 120px 0 180px; }
  .svc-output-title { font-size: 34px; }
  .svc-deliver { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .svc-deliver li { min-height: 135px; }
  .svc-deliver strong { font-size: 22px; }
  .svc-deliver span { margin-top: 11px; }
  .svc-proc-inner { grid-template-columns: 1fr; gap: 36px; max-width: 640px; }
  .svc-proc-graphic { width: 260px; }
  .svc-proc-title h2 { font-size: 32px; }
  .svc-steps li { height: 56px; }
  .svc-cta { padding: 110px 0 120px; }
  .svc-cta-box { gap: 36px; padding: 46px 44px; }
  .svc-cta-box h2 { font-size: 26px; }
}
@media (max-width: 768px) {
  .sub-visual.svc-visual { min-height: 560px; }
  .svc-visual h2 { font-size: 20px; }
  .svc-visual h2 strong { font-size: calc(30px * var(--big, 1)); }
  .svc-visual p { margin-top: 20px; font-size: 14px; }
  .svc-tabs-sec { padding: 40px 0 90px; }
  .svc-tabs { margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
  .svc-tab { height: 40px; padding: 0 16px; font-size: 14px; }
  .svc-pane { padding-top: 50px; }
  .svc-headline .sec-label { margin-bottom: 12px; font-size: 14px; }
  .svc-headline h3 { font-size: 28px; }
  .svc-summary { margin-top: 36px; padding: 28px 20px; }
  .svc-summary strong { font-size: 18px; }
  .svc-summary p { font-size: 14px; }
  .svc-plus { width: 36px; height: 36px; margin-top: 40px; }
  .svc-plus::before { height: 6px; }
  .svc-plus::after { width: 6px; }
  .svc-block { margin-top: 40px; }
  .svc-focus { grid-template-columns: 1fr; gap: 12px; }
  .svc-focus li { min-height: 0; padding: 26px 20px; }
  .svc-focus strong { font-size: 20px; }
  .svc-focus p { margin-top: 10px; font-size: 14px; }
  .svc-output-top { padding: 90px 0 150px; }
  .svc-output-title { font-size: 24px; }
  .svc-output-desc { font-size: 14px; }
  .svc-deliver { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 40px; }
  .svc-deliver li { min-height: 110px; padding: 20px 12px; }
  .svc-deliver strong { font-size: 16px; }
  .svc-deliver span { margin-top: 8px; font-size: 12px; }
  .svc-gallery { margin-top: -50px; padding-bottom: 60px; }
  .svc-gallery-track { gap: 12px; }
  .svc-gallery-item { width: 58vw; }
  .svc-gallery-bar { width: 200px; }
  .svc-process { min-height: 600px; }
  .svc-proc-inner { gap: 24px; padding-top: calc(var(--header-h) + 84px); } /* 모바일 탭 버튼 줄 약 68px */
  .svc-steps { gap: 20px; } /* 모바일 : 35px 이면 화면 높이를 넘어 탭 버튼 줄에 가려지므로 좁게 */
  .svc-proc-graphic { width: 180px; }
  .svc-proc-title .sec-label { font-size: 14px; }
  .svc-proc-title h2 { font-size: 24px; }
  .svc-steps li { height: 48px; padding: 0 8px; border-radius: 11px; }
  .svc-step-no { width: 54px; padding: 5px 0; border-radius: 7px; font-size: 10px; letter-spacing: .04em; }
  .svc-steps strong { width: 92px; margin-left: 12px; font-size: 14.5px; }
  .svc-steps p { flex-basis: 152px; padding-left: 12px; font-size: 12px; }
  .svc-cta { padding: 80px 0 90px; }
  .svc-cta-box { flex-direction: column; align-items: flex-start; gap: 26px; padding: 36px 26px; }
  .svc-cta-box h2 { font-size: 21px; }
  .svc-cta-box p { margin-top: 12px; font-size: 13px; }
  .svc-cta-btn { height: 46px; padding: 0 26px; font-size: 14px; }
}

/* sub : 포트폴리오 */
.pf-filter { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 50px; }
.pf-filter button { height: 42px; padding: 0 22px; border: 1.5px solid var(--c-line); border-radius: 40px; font-size: 15px; font-weight: 500; transition: all .3s; }
.pf-filter button:hover, .pf-filter button.on { background: #222; border-color: #222; color: #fff; }
.pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px 24px; margin-top: 50px; }
.pf-grid li.hide { display: none; }
.pf-grid .ph-box { aspect-ratio: 1 / 0.94; transition: transform .4s var(--ease); }
.pf-grid li:nth-child(2n) .ph-box { background-color: var(--ph-3); }
.pf-grid a:hover .ph-box { transform: translateY(-6px); }
.pf-grid strong { display: block; margin-top: 16px; font-size: 19px; font-weight: 700; }
.pf-grid span { display: block; margin-top: 4px; font-size: 14px; color: var(--c-gray); }

/* sub : FAQ */
/* 섹션 1 : 인트로 · 왼쪽 텍스트 + 오른쪽 이미지 자리 (화면 높이에 맞춰 꽉 차게) */
.faq-visual {
  position: relative; display: flex; align-items: center; overflow: hidden;
  height: 100vh; min-height: 640px; padding-top: var(--header-h);
  background-color: #fff; /* 헤더 테마 감지용(밝은 배경 → 어두운 헤더 글자) · 이미지 왼쪽 흰색과 같은 색 */
}
.faq-visual-img { /* 이미지 왼쪽이 흰색으로 옅어지므로 화면 전체에 깔고 오른쪽 기준으로 배치 (텍스트는 흰 영역 위) */
  position: absolute; inset: 0; opacity: .45; /* 텍스트 가독성을 위해 옅게 */
  background: url('../img/faq_hero_bg.jpg') right center / cover no-repeat #fff;
}
.faq-visual-img::before { /* 화면이 넓어 이미지가 잘려도 왼쪽 텍스트 쪽이 자연스럽게 흰색으로 섞이도록 */
  content: ''; position: absolute; inset: 0 auto 0 0; width: 30%;
  background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0));
}
.faq-visual .inner { position: relative; z-index: 1; color: #222; }
.faq-visual-title { font-family: 'Inter', sans-serif; font-size: 170px; font-weight: 700; line-height: .8; letter-spacing: -.03em; }
.faq-visual-sub { margin-top: 70px; font-size: 54px; font-weight: 700; line-height: 1.28; letter-spacing: -.03em; }
.faq-visual-desc { margin-top: 36px; font-size: 19px; line-height: 1.6; color: #555; }
/* 섹션 1 → 2 전환 : 섹션 1 고정 후 섹션 2 가 덮으며 어두워짐 (메인 섹션 2 → 3 과 동일 · js/scroll.js stackOver 가 --dim 조절) */
.faq-visual::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: #000; opacity: var(--dim, 0); pointer-events: none;
}
.faq-sec { position: relative; z-index: 2; }

/* 섹션 2 : 선 중심 리스트 */
.faq-sec { padding: 120px 0 130px; background: #fff; }
.faq-head, .faq-list { max-width: 1100px; margin: 0 auto; }
.faq-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 32px; }
.faq-head-title { font-family: 'Inter', sans-serif; font-size: 44px; font-weight: 500; line-height: 1.05; letter-spacing: -.02em; color: #16161a; }
.faq-filter { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.faq-filter button {
  height: 36px; padding: 0 16px; border: 1px solid #16161a; border-radius: 40px;
  font-size: 13px; font-weight: 500; color: #16161a; transition: background .3s, color .3s;
}
.faq-filter button:hover, .faq-filter button.on { background: #16161a; color: #fff; }
.faq-item { border-top: 1px solid #16161a; }
.faq-item:last-child { border-bottom: 1px solid #16161a; }
.faq-item.hide { display: none; }
.faq-q {
  display: grid; grid-template-columns: 170px 1fr 34px; align-items: center; gap: 20px;
  width: 100%; padding: 20px 0; text-align: left; color: #16161a;
}
.faq-cate { font-size: 13px; color: #555; }
.faq-q-txt { font-size: 19px; font-weight: 500; line-height: 1.5; letter-spacing: -.02em; transition: color .3s; }
.faq-q:hover .faq-q-txt, .faq-item.open .faq-q-txt { color: var(--c-blue); }
.faq-item.open .faq-q-txt { font-weight: 700; } /* 펼친 질문은 더 굵게 */
/* 펼침 아이콘 : + → − */
.faq-icon { position: relative; width: 34px; height: 34px; border: 1px solid rgba(22, 22, 26, .3); border-radius: 50%; transition: background .3s, border-color .3s; }
.faq-icon::before, .faq-icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: #16161a; transform: translate(-50%, -50%); transition: transform .35s var(--ease), background .3s; }
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-q:hover .faq-icon { border-color: #16161a; }
.faq-item.open .faq-icon { background: #16161a; border-color: #16161a; }
.faq-item.open .faq-icon::before, .faq-item.open .faq-icon::after { background: #fff; }
.faq-item.open .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
/* 답변 : 높이 0 → 내용만큼 부드럽게 펼침 (질문 열 위치에 맞춰 정렬) */
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.faq-a > div { overflow: hidden; }
.faq-a p {
  max-width: 700px; margin-left: 190px; padding: 0 0 24px;
  font-size: 15px; line-height: 1.8; color: #555;
  opacity: 0; transform: translateY(-8px); transition: opacity .35s, transform .45s var(--ease);
}
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-item.open .faq-a p { opacity: 1; transform: none; transition-delay: .1s; }
@media (max-width: 1024px) {
  .faq-visual-title { font-size: 120px; }
  .faq-visual-sub { margin-top: 44px; font-size: 40px; }
  .faq-visual-desc { font-size: 16px; }
  .faq-visual-img { background-position: 70% center; } /* 작은 화면 : 건물이 보이도록 */
  .faq-sec { padding: 96px 0 104px; }
  .faq-head { flex-direction: column; align-items: flex-start; }
  .faq-filter { justify-content: flex-start; }
  .faq-q { grid-template-columns: 130px 1fr 34px; }
  .faq-a p { margin-left: 150px; }
}
@media (max-width: 768px) {
  .faq-visual { min-height: 560px; }
  .faq-visual-title { font-size: 76px; }
  .faq-visual-sub { margin-top: 28px; font-size: 28px; }
  .faq-visual-desc { margin-top: 20px; font-size: 14px; line-height: 1.44; }
  .faq-sec { padding: 64px 0 72px; }
  .faq-head { margin-bottom: 24px; }
  .faq-head-title { font-size: 32px; }
  .faq-filter button { height: 32px; padding: 0 12px; font-size: 12px; }
  .faq-q { grid-template-columns: 1fr 30px; gap: 6px 14px; padding: 16px 0; }
  .faq-cate { grid-column: 1 / -1; font-size: 12px; }
  .faq-q-txt { font-size: 16px; }
  .faq-icon { width: 30px; height: 30px; }
  .faq-icon::before, .faq-icon::after { width: 11px; }
  .faq-a p { margin-left: 0; padding-bottom: 20px; font-size: 14px; }
}

/* sub : CONTACT */
.contact-wrap { display: grid; grid-template-columns: 380px 1fr; gap: 80px; margin-top: 70px; }
.contact-info li { padding: 24px 0; border-bottom: 1px solid var(--c-line); }
.contact-info li:first-child { border-top: 2px solid #222; }
.contact-info dt { font-size: 14px; font-weight: 700; color: var(--c-blue); }
.contact-info dd { margin-top: 6px; font-size: 17px; }
.contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contact-form .field { margin-bottom: 22px; }
.contact-form fieldset { border: 0; }
.contact-form label, .contact-form legend { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 700; }
.contact-form label em { color: var(--c-blue); font-style: normal; }
.contact-form input[type="text"], .contact-form input[type="tel"], .contact-form input[type="email"], .contact-form select, .contact-form textarea {
  width: 100%; height: 54px; padding: 0 18px;
  border: 1.5px solid var(--c-line); border-radius: 6px; background: #fff; outline: none; transition: border-color .3s;
}
.contact-form textarea { height: 180px; padding: 16px 18px; resize: vertical; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--c-blue); }
.chk-group { display: flex; flex-wrap: wrap; gap: 10px; }
.chk-group label { margin: 0; }
.chk-group input { position: absolute; opacity: 0; }
.chk-group span { display: inline-block; height: 40px; padding: 0 18px; border: 1.5px solid var(--c-line); border-radius: 40px; line-height: 37px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all .3s; }
.chk-group input:checked + span { background: #222; border-color: #222; color: #fff; }
.chk-group input:focus-visible + span { outline: 2px solid var(--c-blue); outline-offset: 2px; }
.agree { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--c-gray); }
.contact-form .btn-submit { width: 100%; height: 60px; margin-top: 26px; background: #222; color: #fff; border-radius: 6px; font-size: 18px; font-weight: 700; transition: background .3s; }
.contact-form .btn-submit:hover { background: var(--c-blue); }
.map-box { height: 420px; margin-top: 70px; }

/* ---------- CONTACT 페이지 (밝은 화면 · 왼쪽 비주얼 카드 + 오른쪽 폼) ---------- */
.ct-page { /* 배경 이미지(흰 바탕 + 가는 선) 위 85% 흰 레이어(이미지 15% 노출) : 선이 폼 뒤에서 튀지 않게 은은하게 · #fff : 이미지 로드 전 바탕 (헤더 밝기 감지 기준 · js/main.js) */
  background: linear-gradient(rgba(255, 255, 255, .85), rgba(255, 255, 255, .85)), url('../img/contact_bg_mesh.jpg') center / cover no-repeat #fff; color: #111;
}
.ct-hero { padding: calc(var(--header-h) + 50px) 0 0; } /* 아래 여백 없음 : 진단신청 → 정보 박스 간격은 .ct-info 위 여백(30px)으로만 */
.ct-hero-inner { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 620px); justify-content: space-between; align-items: center; gap: 60px; max-width: 1240px; }
/* 비주얼 카드 */
.ct-card {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  aspect-ratio: 520 / 660; padding: 26px 30px 32px; border: 1px solid rgba(0, 0, 0, .08); border-radius: 26px; overflow: hidden;
}
.ct-card-bg { /* 비주얼 이미지 (카드 비율 520:660 · 2배 해상도로 잘라 저장) · #2a2620 : 이미지 로드 전 바탕 */
  position: absolute; inset: 0; z-index: 0;
  background: url('../img/contact_visual.jpg') center / cover no-repeat #2a2620;
}
/* 폼 */
.ct-form-wrap { text-align: center; }
.ct-kicker { display: block; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .2em; color: var(--c-blue); }
.ct-form-title { font-size: 32px; font-weight: 600; line-height: 1.4; letter-spacing: -.02em; white-space: nowrap; } /* 한 줄 유지 (모바일은 줄바꿈 허용) */
.ct-form-desc { margin: 14px auto 0; font-size: 14px; line-height: 1.7; color: rgba(0, 0, 0, .55); }
.ct-form { margin-top: 34px; text-align: left; }
.ct-form .row { gap: 12px; }
.ct-form .field { margin-bottom: 14px; }
.ct-form label, .ct-form legend { margin-bottom: 6px; font-size: 13px; font-weight: 500; color: rgba(0, 0, 0, .6); }
.ct-form input[type="text"], .ct-form input[type="tel"], .ct-form input[type="email"], .ct-form select, .ct-form textarea {
  height: 50px; padding: 0 16px; border: 2px solid #dcdce0; border-radius: 10px;
  background: #fff; color: #111; font-size: 15px;
}
.ct-form textarea { height: 120px; padding: 14px 16px; }
.ct-form ::placeholder { color: rgba(0, 0, 0, .35); }
.ct-form select { /* 기본 화살표 대신 직접 그린 화살표 : 오른쪽 여백을 글자 왼쪽 여백(16px)과 동일하게 */
  -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23555' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 16px center / 12px 8px no-repeat;
}
.ct-form select option { background: #fff; }
.ct-form input:focus, .ct-form select:focus, .ct-form textarea:focus { border-color: var(--c-blue); }
/* 업종 선택 : 기본 select 팝업 대신 페이지 디자인에 맞춘 드롭다운 (js/main.js 가 select 를 숨기고 생성 · JS 미동작 시 기본 select 사용) */
.ct-select { position: relative; }
.ct-select select { position: absolute; inset: 0; opacity: 0; pointer-events: none; } /* 값 전송 · 초기화용으로만 유지 */
.ct-form .ct-select-btn {
  display: flex; align-items: center; width: 100%; height: 50px; padding: 0 44px 0 16px; border: 2px solid #dcdce0; border-radius: 10px;
  background: #fff; color: #111; font-size: 15px; text-align: left; cursor: pointer; transition: border-color .2s;
}
.ct-select-btn.is-empty { color: rgba(0, 0, 0, .35); } /* 선택 전 : 입력칸 placeholder 와 같은 색 */
.ct-select-btn::after { /* 화살표 : 오른쪽 여백을 글자 왼쪽 여백(16px)과 동일하게 · 열리면 위로 회전 */
  content: ''; position: absolute; right: 16px; top: 50%; width: 12px; height: 8px; margin-top: -4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23555' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 8px no-repeat;
  transition: transform .3s var(--ease);
}
.ct-form .ct-select-btn:focus-visible, .ct-select.is-open .ct-select-btn { border-color: var(--c-blue); outline: none; }
.ct-select.is-open .ct-select-btn::after { transform: rotate(180deg); }
.ct-select-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; padding: 6px;
  border: 1px solid rgba(0, 0, 0, .08); border-radius: 12px; background: #fff; box-shadow: 0 18px 44px rgba(0, 0, 0, .12);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .25s var(--ease), transform .3s var(--ease), visibility 0s .3s;
}
.ct-select.is-open .ct-select-list { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .25s var(--ease), transform .3s var(--ease), visibility 0s; }
.ct-select-list li {
  position: relative; padding: 11px 36px 11px 12px; border-radius: 8px; font-size: 15px; color: #111; cursor: pointer; transition: background .2s;
}
.ct-select-list li.is-active { background: #f4f4f6; } /* 마우스 · 키보드로 가리킨 항목 */
.ct-select-list li[aria-selected="true"] { color: var(--c-blue); font-weight: 600; }
.ct-select-list li[aria-selected="true"]::after { /* 선택된 항목 체크 표시 */
  content: ''; position: absolute; right: 16px; top: 50%; width: 4px; height: 8px; margin-top: -6px;
  border: solid var(--c-blue); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg);
}
.ct-form .chk-group { gap: 8px; }
.ct-form .chk-group span { height: 36px; padding: 0 14px; line-height: 34px; border: 1px solid rgba(0, 0, 0, .1); background: #f4f4f6; font-size: 13px; color: rgba(0, 0, 0, .75); }
.ct-form .chk-group input:checked + span { background: #111; border-color: #111; color: #fff; }
/* 스팸 방지 허니팟 (사람에게는 보이지 않음 · js/main.js) */
.ct-form .ct-botcheck { display: none; }
/* 개인정보 수집·이용 안내 (동의 체크박스 위) */
.ct-privacy {
  margin: 2px 0 14px; padding: 14px 16px; border-radius: 8px; background: #f5f6f8;
  font-size: 12px; line-height: 1.6; color: rgba(0, 0, 0, .6); text-align: left;
}
.ct-privacy-title { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: rgba(0, 0, 0, .75); }
.ct-privacy dl { display: grid; grid-template-columns: 58px 1fr; gap: 3px 10px; }
.ct-privacy dt { font-weight: 700; color: rgba(0, 0, 0, .7); }
.ct-privacy p { margin-top: 8px; }
.ct-privacy a { color: var(--c-blue); text-decoration: underline; text-underline-offset: 2px; }
/* 하단 : 개인정보 동의(왼쪽) + 진단신청 버튼(오른쪽)을 한 줄에 세로 가운데 정렬 · 문의 내용 입력칸에 가깝게 */
.ct-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: -4px; } /* -4px : .field 아래 여백(14px)을 줄여 입력칸에 붙임 */
/* 전송 상태 : 전송 중 · 완료 · 실패 (js/main.js) */
.ct-form-status { margin-top: 14px; padding: 12px 16px; border-radius: 8px; font-size: 14px; line-height: 1.6; text-align: left; }
.ct-form-status[hidden] { display: none; }
.ct-form-status.is-sending { background: #f5f6f8; color: rgba(0, 0, 0, .6); }
.ct-form-status.is-success { background: #e8f6fd; color: #035a80; }
.ct-form-status.is-error { background: #fdeeee; color: #b42318; }
.ct-form-status a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.ct-form .agree { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 500; line-height: 1.5; color: rgba(0, 0, 0, .5); cursor: pointer; }
/* 체크박스 : 기본 모양 대신 직접 그려 글자 높이(약 13px)에 맞춤 */
.ct-form .agree input {
  flex: none; position: relative; width: 14px; height: 14px; margin: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none; border: 1.5px solid rgba(0, 0, 0, .35); border-radius: 3px; background: transparent;
  transition: background .2s, border-color .2s;
}
.ct-form .agree input:checked { border-color: var(--c-blue); background: var(--c-blue); }
.ct-form .agree input:checked::after { /* 체크 표시 */
  content: ''; position: absolute; left: 3.5px; top: .5px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.ct-form .agree input:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }
/* 진단신청 : 파란색 단일 버튼 · 필수 입력 + 개인정보 동의가 모두 채워졌을 때만 활성화 (js/main.js) · hover 효과 없음 */
.ct-form .btn-submit {
  flex: none; display: block; width: 221px; height: 49px; margin: 0; border-radius: 999px; /* 기존 246 × 54 의 0.9 */
  background: var(--c-blue); color: #fff; font-size: 18px; font-weight: 700;
  transition: background .3s, color .3s;
}
.ct-form .btn-submit:hover { background: var(--c-blue); }
.ct-form .btn-submit:disabled { background: #e4e4e7; color: rgba(0, 0, 0, .35); cursor: not-allowed; }

/* 문의 내용 Tip : 마우스를 올리면 오른쪽 위로 안내 카드가 페이드인 (js/main.js 가 .is-show 토글 · 화면 밖으로 나가면 --tip-shift 로 안쪽으로 당김) */
.ct-msg-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 6px; }
.ct-form .ct-msg-head label { margin-bottom: 0; }
.ct-tip { position: relative; }
.ct-form .ct-msg-head label, .ct-tip-btn { font-size: 13px; line-height: 1.5; } /* 문의 내용 · Tip 글자 크기와 행간 통일 */
.ct-tip-btn { display: flex; align-items: center; gap: 6px; color: rgba(0, 0, 0, .75); cursor: help; transition: color .3s; }
.ct-tip-btn:hover, .ct-tip.is-show .ct-tip-btn { color: #111; }
.ct-tip-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border: 1.5px solid currentColor; border-radius: 50%; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; font-style: normal; line-height: 1;
}
.ct-tip-card {
  position: absolute; left: calc(100% - 16px); bottom: calc(100% + 12px); z-index: 20;
  width: 420px; max-width: calc(100vw - 32px); padding: 28px 28px 26px; border-radius: 20px; text-align: left;
  border: 1px solid rgba(0, 0, 0, .08); background: rgba(255, 255, 255, .72); /* 라이트 글래스 : 약한 반투명 + 블러 */
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .6);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(var(--tip-shift, 0px), 10px);
  transition: opacity .35s var(--ease), transform .45s var(--ease), visibility 0s .45s;
}
.ct-tip.is-show .ct-tip-card { opacity: 1; visibility: visible; transform: translate(var(--tip-shift, 0px), 0); transition: opacity .35s var(--ease), transform .45s var(--ease), visibility 0s; }
.ct-tip-card strong { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: #111; }
.ct-tip-card p { margin-top: 8px; font-size: 13px; line-height: 1.6; color: rgba(0, 0, 0, .6); }
.ct-tip-card ul { display: grid; gap: 8px; margin-top: 20px; }
.ct-tip-card li { padding: 13px 16px; border-radius: 10px; background: rgba(0, 0, 0, .05); font-size: 14px; font-weight: 500; color: rgba(0, 0, 0, .85); }
/* 섹션 2 : 안내 + 연락처 */
.ct-info { padding: 30px 0; } /* 진단신청 → 정보 박스 30px · 정보 박스 → 푸터 30px */
.ct-info .inner { max-width: 1240px; }
.ct-meta { display: grid; grid-template-columns: 1fr 1.6fr 1.6fr; gap: 20px; padding: 30px 0; border-top: 1px solid rgba(0, 0, 0, .1); border-bottom: 1px solid rgba(0, 0, 0, .1); }
.ct-meta dt { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .15em; color: var(--c-blue); }
.ct-meta dd { margin-top: 8px; font-size: 14px; line-height: 1.6; color: rgba(0, 0, 0, .75); }
.ct-meta a:hover { color: var(--c-blue); }
.ct-map { height: 360px; margin-top: 40px; border-radius: 22px; background: #f4f4f6; }
@media (max-width: 1024px) {
  .ct-hero-inner { grid-template-columns: 1fr; max-width: 720px; gap: 50px; }
  .ct-card { aspect-ratio: auto; min-height: 520px; }
  .ct-meta { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 768px) {
  .ct-hero { padding: calc(var(--header-h) + 24px) 0 0; }
  .ct-card { min-height: 440px; padding: 22px 22px 26px; border-radius: 20px; }
  .ct-form-title { font-size: 24px; white-space: normal; }
  .ct-form-foot { flex-direction: column; align-items: stretch; gap: 16px; }
  .ct-privacy dl { grid-template-columns: 1fr; gap: 0; }
  .ct-privacy dd + dt { margin-top: 4px; }
  .ct-form .btn-submit { width: 100%; font-size: 16px; }
  .ct-tip-card { padding: 22px 20px 20px; }
  .ct-tip-card strong { font-size: 18px; }
  .ct-tip-card li { padding: 11px 14px; font-size: 13px; }
  .ct-map { height: 260px; }
}


/* =========================================================
   FOOTER
   ========================================================= */
#footer { padding: 80px 0 60px; background: var(--c-footer); color: rgba(255,255,255,.6); font-size: 14px; }
.ft-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.12); }
.ft-logo .logo-main { color: var(--c-blue); font-size: 34px; font-weight: 900; font-style: italic; letter-spacing: -.04em; }
.ft-logo img { display: block; width: 200px; height: auto; }
.ft-logo p { margin-top: 10px; color: rgba(255,255,255,.75); font-size: 15px; }
.ft-menu { display: flex; gap: 32px; }
.ft-menu a { color: #fff; font-weight: 700; font-size: 15px; transition: color .3s; }
.ft-menu a:hover { color: var(--c-blue); }
.ft-mid { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; padding-top: 36px; }
.ft-info p { line-height: 2; }
.ft-info span { display: inline-block; margin-right: 18px; }
.ft-info span b { color: rgba(255,255,255,.85); font-weight: 500; margin-right: 6px; }
.ft-copy { margin-top: 20px; font-size: 13px; color: rgba(255,255,255,.4); }
.ft-right { text-align: right; flex-shrink: 0; }
.ft-cs strong { display: block; color: #fff; font-size: 30px; font-weight: 700; line-height: 1.2; }
.ft-cs span { font-size: 13px; }
.ft-sns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.ft-sns a {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%;
  font-size: 11px; font-weight: 700; color: #fff; transition: background .3s, border-color .3s;
}
.ft-sns a:hover { background: var(--c-blue); border-color: var(--c-blue); }
.ft-policy { display: flex; gap: 20px; margin-top: 14px; justify-content: flex-end; }
.ft-policy a { font-size: 13px; transition: color .3s; }
.ft-policy a:hover, .ft-policy a.bold { color: #fff; }

/* Top 버튼 */
.btn-top {
  position: fixed; right: 30px; bottom: 30px; z-index: 90;
  width: 52px; height: 52px; border-radius: 50%; background: var(--c-blue); color: #fff;
  font-size: 12px; font-weight: 700;
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .35s;
}
.btn-top.show { opacity: 1; visibility: visible; transform: none; }

/* Scroll Reveal */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .1s; }
.reveal.d2 { transition-delay: .2s; }
.reveal.d3 { transition-delay: .3s; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1400px) {
  .main-about .inner { padding-left: 40px; }
  .main-about .about-visual { width: 480px; height: 640px; right: -160px; }
  .main-service .service-visual { right: -100px; }
}
@media (max-width: 1200px) {
  .hero-title { font-size: 56px; }
  .sec-title { font-size: 46px; }
  .service-list { grid-template-columns: repeat(3, 1fr); max-width: 760px; }
  .content-wrap { flex-direction: column; max-width: 680px; }
  .insta-box { flex: none; }
  .card-grid.col4 { grid-template-columns: repeat(2, 1fr); }
  .process-list { grid-template-columns: repeat(3, 1fr); }
  .ft-top, .ft-mid { flex-direction: column; align-items: flex-start; }
  .ft-right { text-align: left; }
  .ft-sns, .ft-policy { justify-content: flex-start; }
}
@media (max-width: 1024px) {
  :root { --header-h: 76px; }
  .btn-menu { display: block; }
  .gnb {
    position: fixed; top: 0; right: 0; width: 100%; height: 100vh;
    background: rgba(5, 6, 10, .88);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    backdrop-filter: blur(24px) saturate(140%); /* 뒤 페이지를 흐리게 : 헤더와 같은 유리 질감 */
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
  }
  .gnb.open { opacity: 1; visibility: visible; }
  .gnb ul { flex-direction: column; align-items: center; gap: 34px; }
  .gnb a { font-size: 30px; color: #fff; } /* 전체화면 메뉴는 항상 검정 배경 + 흰 글자 */
  .main-hero .hero-bg { background-position: 62% center; }
  .main-about .about-visual { opacity: .35; }
  .split, .svc-detail, .contact-wrap { grid-template-columns: 1fr; gap: 40px; }
  .svc-detail:nth-child(even) .ph-box { order: 0; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .pf-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  body { font-size: 15px; }
  .inner { padding: 0 20px; }
  .logo .logo-main { font-size: 32px; }
  .logo .logo-sub { display: none; }
  .logo img, #header.scrolled .logo img { width: 150px; }
  .main-hero { min-height: 640px; }
  .main-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, .5); }
  .hero-label { font-size: 14px; }
  .hero-title { font-size: 38px; }
  .hero-desc { font-size: 15px; }
  .hero-desc br { display: none; }
  .hero-btns .btn-line { min-width: 0; height: 44px; font-size: 15px; padding: 0 20px 2px; }
  .sec-label { font-size: 14px; }
  .sec-title, .sub-sec .sec-title { font-size: 30px; }
  .sec-desc { font-size: 15px; }
  .sec-desc br { display: none; }
  .main-about { padding: 120px 0; }
  .about-box-wrap { flex-direction: column; align-items: flex-start; gap: 24px; }
  .about-box { padding: 26px 24px; }
  .about-box strong { font-size: 21px; }
  .main-service { padding: 110px 0; }
  .main-service .service-visual { width: 360px; top: 60px; right: -140px; opacity: .5; }
  .service-list { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .service-list li a { height: 180px; padding: 16px 12px; }
  .service-list strong { font-size: 16px; }
  .main-portfolio { padding: 100px 0 80px; }
  .main-content { padding: 110px 0; }
  .content-wrap { margin-top: 50px; }
  .main-cta { padding: 80px 0; }
  .main-cta h2 { font-size: 24px; }
  .main-cta p br { display: none; }
  .sub-visual { height: 340px; }
  .sub-visual h2 { font-size: 32px; }
  .sub-sec { padding: 90px 0; }
  .card-grid, .card-grid.col4, .pf-grid { grid-template-columns: 1fr; }
  .stat-list { grid-template-columns: repeat(2, 1fr); }
  .stat-list li:nth-child(2) { border-right: 0; }
  .stat-list strong { font-size: 34px; }
  .process-list { grid-template-columns: 1fr; }
  .svc-detail h3 { font-size: 26px; }
  .contact-form .row { grid-template-columns: 1fr; gap: 0; }
  .ft-menu { flex-wrap: wrap; gap: 14px 24px; }
  .ft-info span { display: block; }
  .btn-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .main-hero .hero-bg, .btn-circle, .main-service::before { animation: none; }
}

/* =========================================================
   SCROLL INTERACTION (js/scroll.js 와 연동)
   ========================================================= */

/* Lenis 스무스 스크롤 기본 설정 */
html.lenis, html.lenis body { height: auto; }
main { overflow-x: clip; } /* 애니메이션 요소의 가로 넘침 방지 (body는 모바일에서 무시됨) */
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* 스크롤 진행 바 */
.scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 200;
  width: 100%; height: 3px; background: var(--c-blue);
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}

/* 섹션 1, 2 : 고정 후 다음 섹션이 덮으며 어두워짐 */
.main-hero::after, .main-about::after, .main-service::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: #000; opacity: var(--dim, 0); pointer-events: none;
}
.main-about::after, .main-service::after { z-index: 0; } /* 섹션 텍스트(.inner, z-index 1) 아래 */
.main-hero ~ section { position: relative; z-index: 2; }

/* 섹션 타이틀 줄 단위 마스크 */
.sec-title .line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.sec-title .line-inner { display: inline-block; will-change: transform; }

/* CTA 펼침 전환 */
.gsap-on .main-cta { will-change: clip-path; }

/* 커스텀 커서 (마우스 환경) */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 300;
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: #fff; mix-blend-mode: difference;
  pointer-events: none; opacity: 0;
  transition: opacity .3s, width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease);
}
.cursor.show { opacity: 1; }
/* 커스텀 커서 사용 시 기본 마우스 커서 숨김 (마우스 환경 + 스크립트 정상 로드 시에만 적용)
   메인 페이지만 숨김 · 서브 페이지(body.sub)는 사용성을 위해 기본 커서도 함께 표시 */
.has-cursor body:not(.sub), .has-cursor body:not(.sub) * { cursor: none !important; }
.cursor.hover { width: 56px; height: 56px; margin: -28px 0 0 -28px; }

/* 타이포그래피 / 여백 밸런스 */
.sec-title { letter-spacing: -.035em; line-height: 1.28; }
.sec-desc { letter-spacing: -.01em; }
.sec-label { letter-spacing: .08em; }
.service-list p br { display: none; }
@media (min-width: 769px) { .service-list li a { padding: 20px 24px; } }

/* 섹션 2 타이틀 타이핑 효과 (js/scroll.js) */
.sec-title .char { visibility: hidden; }
.sec-title .char.on { visibility: visible; }
.type-caret { display: inline-block; position: relative; width: 0; height: 1em; vertical-align: -.12em; }
.type-caret::after {
  content: ''; position: absolute; left: 3px; top: 0;
  width: 3px; height: 100%; background: currentColor;
  animation: caretBlink .8s steps(1) infinite;
}
.type-caret.done { opacity: 0; transition: opacity .4s; }
@keyframes caretBlink { 50% { opacity: 0; } }

/* =========================================================
   SCROLLBAR : 페이지 우측 스크롤바 숨김 (스크롤 기능은 유지)
   - 현재 위치는 상단 스크롤 진행 바(.scroll-progress)로 표시
   ========================================================= */
html {
  scrollbar-width: none;      /* Firefox · Chrome 121+ */
  -ms-overflow-style: none;   /* 구형 Edge · IE */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar { display: none; width: 0; height: 0; } /* Chrome · Edge · Safari */

/* =========================================================
   SUB : ABOUT (about.html 전용 · 스크롤 시나리오는 js/about.js)
   - 기본 스타일은 '완성된 상태' 기준 (스크립트가 없거나 모션 최소화 설정이어도 내용이 모두 보임)
   - html.ab-anim : 스크립트 실행 전 깜빡임 방지용 초기 상태
   ========================================================= */

/* ---------- 섹션 1 : 인트로 ---------- */
.ab-hero { position: relative; height: 100vh; min-height: 640px; background: #fff; overflow: hidden; }
.ab-hero-bg { position: absolute; inset: 0; overflow: hidden; background-color: var(--ph-2); }
.ab-hero-img {
  position: absolute; inset: 0;
  background: url('../video/about_hero_bg_poster.jpg') center / cover no-repeat; /* 동영상 재생 전 포스터 */
  will-change: transform;
}
.ab-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ab-hero-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .3); }
.ab-hero .inner { position: relative; z-index: 2; height: 100%; color: #fff; pointer-events: none; } /* 헤더 테마 감지가 배경을 읽도록 */
.ab-hero-title {
  position: absolute; left: 40px; top: 27%;
  font-family: 'Inter', 'Noto Sans KR', sans-serif; font-size: 80px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em;
}
.ab-hero-copy {
  position: absolute; right: 40px; top: 48%;
  font-size: 58px; font-weight: 700; line-height: 1.28; letter-spacing: -.03em; text-align: right;
}
.ab-hero-desc { position: absolute; left: 40px; bottom: 15%; font-size: 21px; line-height: 1.9; color: rgba(255, 255, 255, .92); }
.ab-hero-title, .ab-hero-copy, .ab-hero-desc { text-shadow: 0 2px 20px rgba(0, 0, 0, .25); }
.ab-scroll {
  position: absolute; left: 50%; bottom: 34px; z-index: 2; transform: translateX(-50%);
  display: none;
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .3em; color: #999;
}
.ab-scroll::after {
  content: ''; display: block; width: 1px; height: 40px; margin: 10px auto 0; background: currentColor;
  animation: abScroll 1.8s var(--ease) infinite;
}
@keyframes abScroll {
  0% { transform: scaleY(0); transform-origin: 50% 0; }
  50% { transform: scaleY(1); transform-origin: 50% 0; }
  51% { transform: scaleY(1); transform-origin: 50% 100%; }
  100% { transform: scaleY(0); transform-origin: 50% 100%; }
}
.ab-anim .ab-scroll { display: block; }
/* SCROLL 안내 공통 : about · services 섹션 1 과 메인 히어로가 같은 디자인 사용
   .is-link (메인 히어로) : 스크롤을 시작하면 사라지고, 누르면 다음 섹션으로 이동 (js/main.js) */
.main-hero .ab-scroll { display: block; }
.ab-scroll.is-link { transition: opacity .4s var(--ease), visibility .4s; }
.ab-scroll.is-link.is-hidden { opacity: 0; visibility: hidden; }
.main-hero .ab-scroll.is-cramped { display: none; } /* 화면 높이가 낮아 문구·버튼과 겹칠 때 (js/main.js) */
@media (prefers-reduced-motion: reduce) {
  .main-hero .ab-scroll::after { animation: none; } /* 모션 최소화 : 세로선 정지 상태로 표시 */
}
/* 서브 문구 타이핑 효과 (js/about.js · 커서는 공통 .type-caret 사용) */
.ab-hero-desc .char { visibility: hidden; }
.ab-hero-desc .char.on { visibility: visible; }
/* 섹션 2 타이틀 타이핑 효과 (js/about.js · 커서는 공통 .type-caret 사용)
   PC(1025px 이상)에서만 타이핑 애니메이션이 동작하므로, 그 외 화면에서는 글자를 바로 전부 보여줌 */
@media (min-width: 1025px) {
  .pb-title .char { visibility: hidden; }
  .pb-title .char.on { visibility: visible; }
}
/* 스크립트 실행 전 : 원형 마스크 + 텍스트 숨김 */
.ab-anim .ab-hero-bg { clip-path: circle(max(110px, min(12.3vw, 25vh)) at 50% 50%); }
.ab-anim .ab-hero-dim,
.ab-anim .ab-hero-title, .ab-anim .ab-hero-copy, .ab-anim .ab-hero-desc { opacity: 0; }

/* ---------- 섹션 2 : 문제 제기 ---------- */
.ab-problem { position: relative; z-index: 2; background: #fff; } /* 고정된 섹션 1 위로 올라와 덮음 */
/* 섹션 1 → 2 전환 : 덮이는 동안 어두워짐 (js/about.js 가 --dim 조절) */
.ab-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 3;
  background: #000; opacity: var(--dim, 0); pointer-events: none;
}
/* 배경 동영상 (흰 바탕 네트워크 라인) : 섹션 고정 중 스크롤 연출 뒤에 깔림 */
.pb-bg {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: url('../video/about_problem_bg_poster.jpg') center / cover no-repeat; /* 동영상 재생 전 포스터 */
  opacity: .35; /* 흰 섹션 배경 위로 옅게 → 타이틀·문구 가독성 확보 */
}
.pb-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pb-stage {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 39% 1fr; gap: 44px; align-items: start; align-content: center;
  min-height: 100vh; padding-top: calc(var(--header-h) + 30px); padding-bottom: 60px;
}
.pb-head { padding: 54px 48px 50px; border-radius: 20px; background: #0d1124; color: #fff; }
.pb-title { font-size: 33px; font-weight: 700; line-height: 1.36; letter-spacing: -.03em; }
.pb-title .ln { display: block; width: fit-content; white-space: nowrap; }
.pb-title em { font-style: normal; color: var(--c-green); }
.pb-sub { margin-top: 16px; font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, .78); }
.pb-intro-sub { display: none; }
.pb-list li {
  display: flex; gap: 22px;
  padding: 46px 56px 50px 68px; border: 1px solid #dcdcdc; border-radius: 22px; background: #fff;
}
.pb-list li + li { margin-top: 34px; }
.pb-list .num {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; border-radius: 50%; background: var(--c-green); color: #fff;
  font-family: 'KIMM_Bold', 'Inter', sans-serif; font-size: 17px; line-height: 1;
}
.pb-list h3 { margin-top: 6px; font-size: 26px; font-weight: 700; line-height: 1.4; letter-spacing: -.03em; color: #222; }
.pb-list p { margin-top: 18px; font-size: 15px; line-height: 1.5; color: #555; text-wrap: balance; } /* 해상도별 줄바꿈이 고르게 : 수동 <br> 대신 자동 밸런스 */

/* ---------- 섹션 3 : 핵심 가치 ---------- */
.ab-value { position: relative; background: #fff; overflow: hidden; }
.vl-stage {
  position: relative;
  display: flex; align-items: center; gap: 40px;
  min-height: 100vh; padding-top: calc(var(--header-h) + 20px); padding-bottom: 60px;
}
.vl-head { flex: none; width: 430px; }
.vl-title { position: relative; z-index: 2; font-size: 50px; font-weight: 700; line-height: 1.34; letter-spacing: -.035em; color: #222; }
.vl-title .ln { display: block; width: fit-content; white-space: nowrap; }
.vl-desc { margin-top: 26px; font-size: 16px; line-height: 1.75; color: #777; }
.vl-thumb { display: none; }
/* 카드 4장이 항상 화면 안에 모두 보이도록 :
   - 오른쪽은 .inner 바깥 여백까지 써서 화면 끝 40px 까지 확장 (음수 margin)
   - 기본은 시안 폭(266 / 318px), 공간이 모자랄 때만 같은 비율로 줄어듦 (묶음 폭 = 카드 합계 → JS 이미지 펼침과 일치) */
.vl-cards {
  position: relative; flex: 0 1 auto; min-width: 0; display: flex; gap: 20px;
  margin-right: calc(-1 * max(0px, (100vw - var(--inner)) / 2));
}
.vl-cards li {
  position: relative; overflow: hidden; flex: 0 1 auto; min-width: 0; border-radius: 10px;
  width: 318px; height: min(608px, 64vh); min-height: 420px;
  background-color: var(--ph-2);
}
.vl-cards li:first-child { width: 266px; }
/* 4장의 카드가 하나의 사진을 나눠 보여주도록 (js/about.js 가 --off, --sw 지정) */
.vl-img, .vl-thumb {
  background: var(--ph-2) url('../img/about_value_bg.jpg') center / cover no-repeat; /* 이미지를 넣으면 자동 적용 */
}
.vl-img { position: absolute; top: 0; bottom: 0; left: calc(var(--off, 0px) * -1); width: var(--sw, 100%); }
.vl-cards li::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .42); }
.vl-txt {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  padding: 0 10px; color: #fff; text-align: center;
}
.vl-txt strong {
  font-size: 44px; font-weight: 700; line-height: 1.2; letter-spacing: -.03em;
  /* 마지막 카드(2줄)와 서브 문구 높이를 맞추도록 모든 카드에 2줄 높이 확보 → 한 줄 문구는 아래쪽에 붙임 */
  display: flex; flex-direction: column; justify-content: flex-end; min-height: 2.4em;
}
.vl-txt span {
  padding: 9px 20px 10px; border-radius: 30px; background: #fff;
  font-size: 15px; font-weight: 700; line-height: 1.2; color: #222; white-space: nowrap; /* 시안처럼 한 줄 유지 */
}

/* ---------- 섹션 4 : CTA ---------- */
.ab-cta { padding: 40px 0 140px; background: #fff; }
.ab-cta-box {
  padding: 92px 40px 90px; border-radius: 30px; color: #fff; text-align: center;
  background: linear-gradient(90deg, #023d57 0%, #04445f 50%, #0289c2 100%);
}
.ab-cta-box h2 { font-size: 40px; font-weight: 700; line-height: 1.42; letter-spacing: -.03em; }
.ab-cta-box p { margin-top: 14px; font-size: 15px; color: rgba(255, 255, 255, .9); }
.ab-cta-box .btn-line {
  margin-top: 40px; width: 362px; max-width: 100%; height: 50px; font-size: 19px;
  transition: background .3s, color .3s, border-color .3s, transform .35s var(--ease), box-shadow .35s;
}
.ab-cta-box .btn-line:hover { color: #04445f; transform: scale(1.04); box-shadow: 0 10px 30px rgba(0, 0, 0, .2); }

/* ---------- PC 스크롤 연출용 요소 ---------- */
@media (min-width: 1025px) {
  .ab-anim .pb-intro-sub {
    display: block; position: absolute; left: 0; right: 0; top: calc(50% + 30px);
    font-size: 18px; line-height: 1.7; color: #666; text-align: center; pointer-events: none;
  }
  .ab-anim .pb-intro-sub .last { margin-top: 1.7em; }
  .ab-anim .pb-bg { opacity: 0; } /* 배경 동영상은 스크롤 연출 중 등장 (js/about.js) */
  .ab-anim .vl-thumb { display: block; position: absolute; left: 0; top: 0; z-index: 0; visibility: hidden; }
  .ab-anim .vl-cards { z-index: 1; }
}
/* 화면 높이가 낮은 PC : 카드 여백 축소 */
@media (min-width: 1025px) and (max-height: 900px) {
  .pb-head { padding: 40px 40px 38px; }
  .pb-list li { padding: 30px 44px 32px 50px; }
  .pb-list li + li { margin-top: 18px; }
  .pb-list h3 { font-size: 23px; }
  .pb-list p { margin-top: 10px; font-size: 14px; }
}
/* 섹션 3 : 좁은 PC 에서도 카드 4장이 모두 보이고 문구가 한 줄로 들어가도록 단계별 축소 */
@media (min-width: 1025px) and (max-width: 1540px) {
  .vl-head { width: 360px; }
  .vl-title { font-size: 42px; }
  .vl-cards { gap: 16px; }
  .vl-cards li:first-child { width: 318px; } /* 좁은 화면에서는 4장 동일 폭 */
  .vl-txt strong { font-size: 36px; }
  .vl-txt span { font-size: 13px; padding: 8px 14px 9px; }
}

/* ---------- 반응형 ---------- */
@media (max-width: 1400px) {
  .ab-hero-title { font-size: 68px; }
  .ab-hero-copy { font-size: 48px; }
  .pb-head { padding-left: 36px; padding-right: 36px; }
  .pb-title { font-size: 27px; }
  .pb-list li { padding-left: 44px; padding-right: 40px; }
  .vl-head { width: 360px; }
  .vl-title { font-size: 42px; }
  .vl-txt strong { font-size: 36px; }
  .vl-txt span { font-size: 13px; padding: 8px 14px 9px; }
}
/* 섹션 3 : 1300px 이하 PC (위 1400px 규칙보다 뒤에 있어야 적용됨) */
@media (min-width: 1025px) and (max-width: 1300px) {
  .vl-stage { gap: 24px; }
  .vl-head { width: 270px; }
  .vl-title { font-size: 32px; }
  .vl-desc { margin-top: 18px; font-size: 14px; }
  .vl-cards { gap: 10px; margin-right: -20px; }
  .vl-txt { gap: 18px; padding: 0 6px; }
  .vl-txt strong { font-size: 26px; }
  .vl-txt span { font-size: 11.5px; padding: 7px 8px 8px; }
}
@media (max-width: 1024px) {
  .ab-hero-title { font-size: 56px; }
  .ab-hero-copy { font-size: 38px; }
  .ab-hero-desc { font-size: 17px; }
  .pb-stage { grid-template-columns: 1fr; gap: 24px; min-height: 0; padding-top: 120px; padding-bottom: 100px; }
  .vl-stage { flex-direction: column; align-items: flex-start; gap: 40px; min-height: 0; padding-top: 60px; padding-bottom: 60px; }
  .vl-head { width: auto; }
  .vl-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: 100%; }
  .vl-cards li, .vl-cards li:first-child { width: auto; max-width: none; height: 340px; min-height: 0; }
}
@media (max-width: 768px) {
  .ab-hero { min-height: 560px; }
  .ab-hero-title { left: 20px; top: 22%; font-size: 40px; }
  .ab-hero-copy { right: 20px; top: 42%; font-size: 27px; }
  .ab-hero-desc { left: 20px; right: 20px; bottom: 12%; font-size: 14px; line-height: 1.75; }
  .ab-hero-desc br { display: none; }
  .ab-hero-dim { background: rgba(0, 0, 0, .45); }
  .pb-stage { padding-top: 100px; padding-bottom: 80px; }
  .pb-head { padding: 34px 26px; border-radius: 16px; }
  .pb-title { font-size: 23px; }
  .pb-title .ln { white-space: normal; }
  .pb-sub { font-size: 13.5px; }
  .pb-sub br { display: none; }
  .pb-list li { flex-direction: column; gap: 14px; padding: 28px 24px; border-radius: 16px; }
  .pb-list li + li { margin-top: 14px; }
  .pb-list .num { width: 42px; height: 42px; font-size: 15px; }
  .pb-list h3 { margin-top: 0; font-size: 19px; }
  .pb-list p { margin-top: 10px; font-size: 14px; }
  .vl-title { font-size: 30px; }
  .vl-desc { margin-top: 16px; font-size: 14px; }
  .vl-desc br { display: none; }
  .vl-cards li, .vl-cards li:first-child { height: 230px; }
  .vl-txt { gap: 16px; }
  .vl-txt strong { font-size: 26px; }
  .vl-txt span { font-size: 11.5px; padding: 7px 10px 8px; white-space: normal; }
  .ab-cta { padding: 20px 0 90px; }
  .ab-cta-box { padding: 60px 22px; border-radius: 20px; }
  .ab-cta-box h2 { font-size: 22px; }
  .ab-cta-box p { font-size: 13.5px; }
  .ab-cta-box .btn-line { width: 100%; height: 46px; font-size: 16px; margin-top: 28px; }
}

/* =========================================================
   SUB : PRIVACY (privacy.html · 개인정보처리방침)
   ========================================================= */
.policy-sec { padding: calc(var(--header-h) + 80px) 0 140px; background: #fff; }
.policy-sec .inner { max-width: 900px; }
.policy-head .sec-label { color: var(--c-blue); }
.policy-title { margin-top: 10px; font-size: 44px; font-weight: 700; letter-spacing: -.03em; }
.policy-lead { margin-top: 20px; font-size: 16px; line-height: 1.8; color: var(--c-gray); }
.policy-toc { margin-top: 44px; padding: 26px 30px; border-radius: 12px; background: #f5f6f8; }
.policy-toc ol { columns: 2; column-gap: 40px; list-style: decimal; padding-left: 20px; font-size: 14px; line-height: 2; color: #444; }
.policy-toc a:hover { color: var(--c-blue); }
.policy-body section { padding-top: 56px; scroll-margin-top: calc(var(--header-h) + 20px); }
.policy-body h3 { padding-bottom: 14px; border-bottom: 1px solid #222; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.policy-body p, .policy-body li { font-size: 15px; line-height: 1.85; color: #444; }
.policy-body p { margin-top: 16px; }
.policy-body ul, .policy-body ol { margin-top: 12px; padding-left: 20px; }
.policy-body ul { list-style: disc; }
.policy-body ol { list-style: decimal; }
.policy-body li + li { margin-top: 4px; }
.policy-table { margin-top: 18px; overflow-x: auto; }
.policy-table table { width: 100%; min-width: 520px; border-collapse: collapse; border-top: 1px solid #222; font-size: 14px; line-height: 1.7; }
.policy-table th, .policy-table td { padding: 12px 16px; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; color: #444; }
.policy-table th { width: 180px; background: #f8f9fa; font-weight: 700; color: #222; }
.policy-table thead th { width: auto; }
.policy-table thead + tbody td:first-child { white-space: nowrap; } /* 구분 칸(필수 · 선택 · 자동 수집) 한 줄 유지 */
@media (max-width: 768px) {
  .policy-sec { padding: calc(var(--header-h) + 40px) 0 90px; }
  .policy-title { font-size: 30px; }
  .policy-lead { font-size: 14px; }
  .policy-toc { padding: 20px; }
  .policy-toc ol { columns: 1; font-size: 13px; }
  .policy-body section { padding-top: 44px; }
  .policy-body h3 { font-size: 17px; }
  .policy-body p, .policy-body li { font-size: 14px; }
  .policy-table th { width: 120px; }
}