/* ==========================================================================
   SHB 종합시스텍 (SHB TOTAL SYSTEC) — 공용 스타일시트
   흰검(白黑) 모노크롬. 유채색 절대 금지 (모든 색은 r=g=b).
   --------------------------------------------------------------------------
   컴포넌트 목록 (다른 페이지에서 그대로 재사용)
   [기본]     :root 토큰 / reset / 타이포(.eng = Montserrat) / .sr-only / :focus-visible
   [레이아웃] .container / .container--narrow / .section / .section--gray / .section--dark
              .section--tight / .section--flush / .grid .grid--2 .grid--3 .grid--4 / 여백 유틸 .mt-* .mb-*
              .grid--compact-sm (카드가 많은 그리드: 모바일 2열 유지 + 설명 축약) / .grid--stack-sm (≤480px 1열)
   [페이지]   body.page-home (메인: 투명 오버레이 헤더 동작) / body.page (서브: 흰 배경 고정 헤더)
   [섹션헤더] .sec-head (.sec-head__eng, .sec-head__title, .sec-head__desc)
              modifier: .sec-head--center / .sec-head--light(검정 배경용)
   [버튼]     .btn + .btn--black / .btn--outline / .btn--white / .btn--outline-white
              size: .btn--sm / .btn--lg   shape: .btn--pill   .btn__arrow
   [상단바]   .topbar (.topbar__inner, .topbar__item, .topbar__sep)
   [헤더]     .header (.header--overlay: body.page-home에서 히어로 위 투명 → .is-scrolled 반투명 흰 배경+blur)
              .header__inner / .logo (.logo__dark .logo__light) / .gnb / .gnb__list / .gnb__link
              .gnb__sub / .header__mega(메가 드롭다운 배경) / .header__cta / .hamburger
   [드로어]   .drawer / .drawer__backdrop / .drawer__head / .drawer__nav / .drawer__group
              .drawer__toggle / .drawer__sub / .drawer__cta / .drawer__contact
   [히어로]   .hero (풀스크린) / .hero__bg / .hero__overlay / .hero__content / .hero__eng
              .hero__title / .hero__desc / .hero__actions / .hero__scroll
              .page-hero (서브 페이지용 작은 히어로) / .page-hero__eng / .page-hero__title / .page-hero__desc
   [강점카드] .feature-strip (히어로 하단 겹침 스트립) / .feature-grid (독립 3열 카드, "What is SHB?" 6카드용)
              .feature (.feature__num .feature__title .feature__text)
   [카드]     .card / .card__media (+ .card__num 좌상단 번호 뱃지) / .card__body / .card__eng / .card__title / .card__text / .card__more
              modifier: .card--gray-hover(썸네일 흑백→hover 컬러) / .card--flat / .card--dark / .card--cta
              .option-card (사진+오버레이 OPTION 카드) / .option-card__label / .option-card__title
   [2단]      .split / .split--reverse / .split__media / .split__body / .split__list
   [배너]     .banner (검정) / .banner__eng / .banner__title / .banner__phone / .banner__sub / .banner__actions
   [아코디언] .acc / .acc__item / .acc__btn / .acc__num / .acc__q / .acc__icon / .acc__panel / .acc__inner / .acc__content / .acc--dark
              (JS: [data-accordion] 컨테이너, .is-open 토글, 항목은 .acc__item > .acc__btn + .acc__panel)
   [FAQ]      .faq (좌 sticky 제목+CTA / 우 아코디언) / .faq__side / .faq__cta
   [스텝]     .steps / .step / .step__num / .step__title / .step__text   (01/02… 프로세스)
              .range-card (Service Steps 범위 리스트 카드) / .range-card__list
   [B/A]      .ba / .ba__pair / .ba__item / .ba__label / .ba__caption
   [사진]     .photo-grid (.photo-grid--6) / .photo / .photo__cap / .lightbox (JS 생성)
              .snap (스크롤 스냅 슬라이더) / .snap__track / .snap__item / .snap__nav
   [필터]     .filter-bar / .filter-btn (.is-active)   (JS: [data-filter] / [data-filter-btn] / [data-filter-item])
   [폼]       .form / .form__row / .form__grid / .form__label / .input / .textarea / .select / .check / .form__note
   [표]       .info-table (연락처·회사정보용)
   [인용]     .quote (인사말 등 큰 인용문) / .signature
   [푸터]     .footer / .footer__title / .footer__cards / .footer__card / .footer__info / .footer__copy
   [퀵버튼]   .quick / .quick__btn / .quick__top (스크롤 시 표시)
   [리빌]     .reveal (.js 환경에서만 숨김, IntersectionObserver로 .is-visible) / .reveal--delay-1~3
   ========================================================================== */

/* ---------- 0. 토큰 ---------- */
:root{
  --black:#0e0e0e; --ink:#111111; --g900:#212121; --g700:#363636; --g500:#757575;
  --g300:#d5d5d5; --g200:#e6e6e6; --g100:#f4f4f4; --off:#f9f9f9; --white:#ffffff;
  --footer-bg:#dedede;
  --font:'Pretendard',-apple-system,BlinkMacSystemFont,'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --font-eng:'Montserrat','Pretendard',-apple-system,sans-serif;
  --topbar-h:36px;
  --header-h:80px;
  --container:1200px;
  --gutter:20px;
  --radius:4px;
  --radius-lg:8px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --shadow-lg:0 20px 50px rgba(0,0,0,.16);
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.35s;
}
@media (max-width:768px){
  :root{ --header-h:64px; --gutter:16px; }
}

/* ---------- 1. Reset / Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); overflow-x:hidden; overflow-x:clip; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; font-family:var(--font); font-size:16px; line-height:1.7; color:var(--ink);
  background:var(--white); -webkit-font-smoothing:antialiased; word-break:keep-all;
  overflow-x:hidden; overflow-x:clip;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
h1,h2,h3,h4{ line-height:1.3; font-weight:700; letter-spacing:-.02em; }
.eng{ font-family:var(--font-eng); letter-spacing:.06em; }
.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--black); outline-offset:3px; }
.section--dark :focus-visible,.banner :focus-visible,.hero :focus-visible,.page-hero :focus-visible{ outline-color:var(--white); }
::selection{ background:var(--black); color:var(--white); }
hr.divider{ border:0; border-top:1px solid var(--g200); margin:0; }

/* ---------- 2. 레이아웃 ---------- */
.container{ width:100%; max-width:calc(var(--container) + var(--gutter)*2); margin:0 auto; padding:0 var(--gutter); }
.container--narrow{ max-width:calc(880px + var(--gutter)*2); }
.section{ padding:110px 0; }
.section--tight{ padding:70px 0; }
.section--flush{ padding:0; }
.section--gray{ background:var(--off); }
.section--dark{ background:var(--black); color:var(--white); }
@media (max-width:1024px){ .section{ padding:90px 0; } .section--tight{ padding:60px 0; } }
@media (max-width:768px){ .section{ padding:64px 0; } .section--tight{ padding:48px 0; } }

.grid{ display:grid; gap:28px; }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1024px){
  .grid--4{ grid-template-columns:repeat(3,1fr); }
  .grid--3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px){
  .grid{ gap:18px; }
  .grid--4,.grid--3{ grid-template-columns:repeat(2,1fr); }
  .grid--2{ grid-template-columns:1fr; }
}
@media (max-width:480px){
  .grid--4.grid--stack-sm,.grid--3.grid--stack-sm{ grid-template-columns:1fr; }
}
.mt-0{margin-top:0!important}.mt-1{margin-top:12px!important}.mt-2{margin-top:24px!important}.mt-3{margin-top:40px!important}.mt-4{margin-top:64px!important}
.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:12px!important}.mb-2{margin-bottom:24px!important}.mb-3{margin-bottom:40px!important}.mb-4{margin-bottom:64px!important}
.text-center{ text-align:center; }
@media (max-width:768px){ .hide-sm{ display:none!important; } }
@media (min-width:769px){ .show-sm{ display:none!important; } }
.flex-center{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }

/* ---------- 3. 섹션 헤더 ---------- */
.sec-head{ margin-bottom:56px; max-width:760px; }
.sec-head__eng{ display:block; font-family:var(--font-eng); font-size:13px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--g500); margin-bottom:14px; }
.sec-head__title{ font-size:40px; line-height:1.25; }
.sec-head__desc{ margin-top:18px; font-size:17px; color:var(--g700); line-height:1.8; }
.sec-head--center{ margin-left:auto; margin-right:auto; text-align:center; }
.sec-head--light .sec-head__eng{ color:rgba(255,255,255,.6); }
.sec-head--light .sec-head__title{ color:var(--white); }
.sec-head--light .sec-head__desc{ color:rgba(255,255,255,.78); }
.sec-head--row{ max-width:none; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.sec-head--row > div{ max-width:760px; }
@media (max-width:1024px){ .sec-head__title{ font-size:34px; } }
@media (max-width:768px){ .sec-head{ margin-bottom:36px; } .sec-head__title{ font-size:28px; } .sec-head__desc{ font-size:15px; } }

/* ---------- 4. 버튼 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 30px; border:1.5px solid var(--black); border-radius:var(--radius);
  font-size:15px; font-weight:600; letter-spacing:-.01em; line-height:1; white-space:nowrap;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn--black{ background:var(--black); color:var(--white); }
.btn--black:hover{ background:var(--g700); border-color:var(--g700); }
.btn--outline{ background:transparent; color:var(--black); }
.btn--outline:hover{ background:var(--black); color:var(--white); }
.btn--white{ background:var(--white); color:var(--black); border-color:var(--white); }
.btn--white:hover{ background:var(--g200); border-color:var(--g200); }
.btn--outline-white{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.7); }
.btn--outline-white:hover{ background:var(--white); color:var(--black); border-color:var(--white); }
.btn--sm{ min-height:44px; padding:0 20px; font-size:14px; }
.btn--lg{ min-height:60px; padding:0 40px; font-size:17px; }
.btn--pill{ border-radius:999px; }
.btn--block{ width:100%; }
.btn__arrow{ display:inline-block; width:8px; height:8px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; transform:rotate(45deg); transition:transform var(--dur) var(--ease); }
.btn:hover .btn__arrow{ transform:rotate(45deg) translate(2px,-2px); }

/* ---------- 5. 상단 얇은 바 ---------- */
.topbar{ background:var(--black); color:var(--white); height:var(--topbar-h); font-size:13px; letter-spacing:.01em; position:relative; z-index:60; }
.topbar__inner{ height:100%; display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:nowrap; overflow:hidden; white-space:nowrap; }
.topbar__item{ display:inline-flex; align-items:center; gap:8px; color:rgba(255,255,255,.88); }
.topbar__item strong{ font-weight:700; color:var(--white); }
.topbar__item a{ color:var(--white); font-weight:600; }
.topbar__item a:hover{ text-decoration:underline; text-underline-offset:3px; }
.topbar__sep{ width:1px; height:12px; background:rgba(255,255,255,.35); }
@media (max-width:768px){
  .topbar{ font-size:12px; }
  .topbar__inner{ gap:10px; }
  .topbar__hide-sm{ display:none; }
}

/* ---------- 6. 헤더 / GNB ---------- */
.header{
  position:sticky; top:0; z-index:70; height:var(--header-h);
  background:var(--white); color:var(--ink);
  border-bottom:1px solid transparent;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.header.is-scrolled{ background:rgba(255,255,255,.96); box-shadow:0 6px 24px rgba(0,0,0,.08); border-bottom-color:var(--g200); }
@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)){
  .header.is-scrolled{ background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
}
/* 투명 오버레이 헤더: 메인(body.page-home)에서만. 서브 페이지(body.page)는 같은 마크업(header--overlay)이어도 흰 배경 고정 */
.page-home .header--overlay:not(.is-scrolled):not(.is-open){ background:transparent; color:var(--white); border-bottom-color:rgba(255,255,255,.15); }
.header__inner{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo{ display:flex; align-items:center; height:100%; flex:0 0 auto; }
.logo img{ height:52px; width:auto; }
.logo__light{ display:none; }
.page-home .header--overlay:not(.is-scrolled):not(.is-open) .logo__light{ display:block; }
.page-home .header--overlay:not(.is-scrolled):not(.is-open) .logo__dark{ display:none; }
@media (max-width:768px){ .logo img{ height:42px; } }

.gnb{ flex:1 1 auto; display:flex; justify-content:center; height:100%; }
.gnb__list{ display:flex; align-items:stretch; height:100%; gap:4px; }
.gnb__item{ position:relative; display:flex; align-items:center; }
.gnb__link{
  display:inline-flex; align-items:center; height:100%; padding:0 20px; font-size:16px; font-weight:600; letter-spacing:-.01em;
  position:relative; white-space:nowrap;
}
.gnb__link::after{ content:""; position:absolute; left:20px; right:20px; bottom:20px; height:2px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform var(--dur) var(--ease); }
.gnb__item:hover > .gnb__link::after,.gnb__item:focus-within > .gnb__link::after,.gnb__link.is-current::after{ transform:scaleX(1); }
.gnb__sub{
  position:absolute; top:100%; left:0; min-width:100%; padding:22px 20px 26px;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility 0s linear var(--dur);
}
.gnb__sub li + li{ margin-top:6px; }
.gnb__sub a{ display:block; padding:6px 0; font-size:15px; color:var(--g700); white-space:nowrap; transition:color .2s,transform .2s; }
.gnb__sub a:hover,.gnb__sub a:focus-visible,.gnb__sub a.is-current{ color:var(--black); font-weight:700; transform:translateX(4px); }
/* 메가 드롭다운: GNB 어디에 hover/focus 하든 전체 서브를 한 번에 펼침 */
.header__mega{
  position:absolute; left:0; right:0; top:100%; height:0; background:var(--white); border-top:1px solid var(--g200);
  box-shadow:0 24px 40px rgba(0,0,0,.10); overflow:hidden; transition:height var(--dur) var(--ease); z-index:-1;
}
.header.is-open{ background:var(--white); color:var(--ink); }
.header.is-open .header__mega{ height:var(--mega-h,250px); }
.header.is-open .gnb__sub{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.header__cta{ flex:0 0 auto; }
.page-home .header--overlay:not(.is-scrolled):not(.is-open) .header__cta .btn--black{ background:var(--white); color:var(--black); border-color:var(--white); }
.hamburger{ display:none; width:44px; height:44px; align-items:center; justify-content:center; flex-direction:column; gap:6px; margin-right:-8px; }
.hamburger span{ display:block; width:24px; height:2px; background:currentColor; transition:transform .3s var(--ease),opacity .3s; }
.hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
@media (max-width:1024px){
  .gnb,.header__cta{ display:none; }
  .hamburger{ display:inline-flex; }
  .header__mega{ display:none; }
}

/* ---------- 7. 모바일 드로어 ---------- */
.drawer__backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.55); opacity:0; visibility:hidden; transition:opacity var(--dur),visibility 0s linear var(--dur); z-index:90; }
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(88vw,380px); background:var(--white); color:var(--ink); z-index:95;
  transform:translateX(100%); visibility:hidden; pointer-events:none;
  transition:transform .4s var(--ease),visibility 0s linear .4s;
  display:flex; flex-direction:column; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.drawer.is-open{ transform:none; visibility:visible; pointer-events:auto; transition-delay:0s; }
.drawer__backdrop.is-open{ opacity:1; visibility:visible; transition-delay:0s; }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px 14px 20px; border-bottom:1px solid var(--g200); }
.drawer__head img{ height:40px; width:auto; }
.drawer__close{ width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; font-size:0; position:relative; }
.drawer__close::before,.drawer__close::after{ content:""; position:absolute; width:22px; height:2px; background:var(--black); transform:rotate(45deg); }
.drawer__close::after{ transform:rotate(-45deg); }
.drawer__nav{ padding:8px 0; flex:1 1 auto; }
.drawer__group{ border-bottom:1px solid var(--g100); }
.drawer__toggle,.drawer__link{ display:flex; align-items:center; justify-content:space-between; width:100%; min-height:54px; padding:0 20px; font-size:17px; font-weight:700; text-align:left; }
.drawer__toggle .acc__icon{ width:22px; height:22px; }
.drawer__sub{ background:var(--off); }
.drawer__sub a{ display:flex; align-items:center; min-height:46px; padding:0 20px 0 32px; font-size:15px; color:var(--g700); }
.drawer__sub a:hover,.drawer__sub a.is-current{ color:var(--black); font-weight:700; }
.drawer__cta{ padding:20px; }
.drawer__contact{ padding:0 20px 28px; font-size:14px; color:var(--g500); line-height:1.9; }
.drawer__contact a{ color:var(--ink); font-weight:600; }
body.drawer-open{ overflow:hidden; }

/* ---------- 8. 히어로 ---------- */
.hero{
  position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; color:var(--white);
  margin-top:calc(-1 * var(--header-h)); padding:calc(var(--header-h) + 60px) 0 140px; overflow:hidden; isolation:isolate;
}
.hero__bg{ position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.hero__overlay{ position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.5) 50%,rgba(0,0,0,.72) 100%); }
.hero__content{ max-width:820px; }
.hero__eng{ display:block; font-family:var(--font-eng); font-weight:500; font-size:15px; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.82); margin-bottom:26px; }
.hero__title{ font-size:60px; line-height:1.18; font-weight:800; letter-spacing:-.03em; }
.hero__desc{ margin-top:26px; font-size:18px; line-height:1.8; color:rgba(255,255,255,.86); max-width:620px; }
.hero__actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:40px; }
.hero__scroll{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); font-family:var(--font-eng); font-size:11px; letter-spacing:.3em; color:rgba(255,255,255,.7); display:flex; flex-direction:column; align-items:center; gap:10px; }
.hero__scroll::after{ content:""; width:1px; height:44px; background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,0)); animation:scrollline 1.8s ease-in-out infinite; }
@keyframes scrollline{ 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }
@media (max-width:1024px){ .hero__title{ font-size:48px; } }
@media (max-width:768px){
  .hero{ min-height:calc(100svh - var(--topbar-h)); padding:calc(var(--header-h) + 40px) 0 90px; }
  .hero__title{ font-size:34px; }
  .hero__desc{ font-size:15.5px; margin-top:18px; }
  .hero__eng{ font-size:12px; letter-spacing:.2em; margin-bottom:18px; }
  .hero__actions .btn{ flex:1 1 calc(50% - 6px); padding:0 16px; }
  .hero__scroll{ display:none; }
}
/* 서브 페이지 히어로 */
/* 서브 페이지 히어로: 헤더가 흰 배경 고정이므로 헤더 아래에서 시작 (.page-hero--under: 오버레이 헤더 밑으로 당겨 넣을 때만) */
.page-hero{ position:relative; padding:110px 0; min-height:380px; display:flex; align-items:center; color:var(--white); overflow:hidden; isolation:isolate; text-align:center; }
.page-hero > .container{ position:relative; }
.page-hero--under{ margin-top:calc(-1 * var(--header-h)); padding-top:calc(var(--header-h) + 110px); }
.page-hero .hero__overlay{ background:rgba(0,0,0,.66); }
.page-hero__eng{ display:block; font-family:var(--font-eng); font-size:13px; letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.75); margin-bottom:18px; }
.page-hero__title{ font-size:48px; font-weight:800; letter-spacing:-.03em; }
.page-hero__desc{ margin-top:20px; font-size:17px; color:rgba(255,255,255,.85); max-width:680px; margin-left:auto; margin-right:auto; }
@media (max-width:768px){ .page-hero{ padding:64px 0; min-height:280px; } .page-hero--under{ padding-top:calc(var(--header-h) + 64px); } .page-hero__title{ font-size:32px; } .page-hero__desc{ font-size:15px; } }

/* ---------- 9. 강점 카드 스트립 (히어로 하단) ---------- */
.feature-strip{ position:relative; z-index:2; margin-top:-90px; }
.feature-strip .grid{ gap:0; background:var(--white); box-shadow:var(--shadow-lg); border:1px solid var(--g200); }
.feature{ padding:36px 32px; border-right:1px solid var(--g200); }
.feature:last-child{ border-right:0; }
.feature__num{ font-family:var(--font-eng); font-size:12px; font-weight:700; letter-spacing:.2em; color:var(--g500); }
.feature__title{ font-size:20px; margin-top:12px; }
.feature__text{ margin-top:10px; font-size:14.5px; color:var(--g700); line-height:1.7; }
@media (max-width:1024px){
  .feature-strip{ margin-top:-70px; }
  .feature-strip .grid--4{ grid-template-columns:repeat(2,1fr); }
  .feature:nth-child(2){ border-right:0; }
  .feature:nth-child(-n+2){ border-bottom:1px solid var(--g200); }
}
@media (max-width:768px){
  .feature-strip{ margin-top:-56px; }
  .feature-strip .grid--4{ grid-template-columns:1fr; }
  .feature{ border-right:0; border-bottom:1px solid var(--g200); padding:26px 24px; }
  .feature:last-child{ border-bottom:0; }
}

/* 독립형 강점 카드 그리드 (히어로 스트립과 달리 겹침 없음. "What is SHB?" 6카드 등) */
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.feature-grid .feature{ border:1px solid var(--g200); background:var(--white); padding:34px 30px; }
.section--dark .feature-grid .feature{ background:var(--g900); border-color:var(--g700); }
.section--dark .feature-grid .feature__num{ color:rgba(255,255,255,.5); }
.section--dark .feature-grid .feature__text{ color:rgba(255,255,255,.75); }
@media (max-width:1024px){ .feature-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:768px){ .feature-grid{ gap:12px; } .feature-grid .feature{ padding:24px 20px; } }
@media (max-width:480px){ .feature-grid{ grid-template-columns:1fr; } }

/* ---------- 10. 카드 ---------- */
.card{ display:flex; flex-direction:column; background:var(--white); border:1px solid var(--g200); overflow:hidden; transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease); }
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.card__media{ position:relative; display:block; aspect-ratio:4/3; overflow:hidden; background:var(--g100); }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease),filter .6s var(--ease); }
.card:hover .card__media img{ transform:scale(1.06); }
.card--gray-hover .card__media img{ filter:grayscale(1); }
.card--gray-hover:hover .card__media img{ filter:grayscale(0); }
.card__num{ position:absolute; top:12px; left:12px; z-index:2; padding:6px 9px 5px; font-family:var(--font-eng); font-size:12px; font-weight:800; letter-spacing:.14em; line-height:1; color:var(--white); background:var(--black); }
.card__body{ padding:26px 26px 28px; display:flex; flex-direction:column; flex:1 1 auto; }
.card__eng{ font-family:var(--font-eng); font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--g500); margin-bottom:10px; }
.card__title{ font-size:21px; overflow-wrap:anywhere; }
.card__text{ margin-top:10px; font-size:14.5px; color:var(--g700); line-height:1.7; flex:1 1 auto; }
.card__more{ margin-top:18px; display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:700; color:var(--black); }
.card__more .btn__arrow{ width:7px; height:7px; }
.card__more:hover .btn__arrow{ transform:rotate(45deg) translate(2px,-2px); }
.card--flat{ border:0; background:transparent; }
.card--flat:hover{ box-shadow:none; }
.card--flat .card__body{ padding:22px 0 0; }
.card--dark{ background:var(--g900); color:var(--white); border-color:var(--g700); }
.card--dark .card__text{ color:rgba(255,255,255,.75); }
.card--dark .card__more{ color:var(--white); }
.card--cta{ background:var(--black); color:var(--white); border-color:var(--black); justify-content:center; text-align:center; }
.card--cta .card__body{ padding:40px 26px; align-items:center; justify-content:center; }
.card--cta .card__text{ color:rgba(255,255,255,.75); flex:0 0 auto; }
@media (max-width:768px){ .card__body{ padding:18px 16px 20px; } .card__title{ font-size:17px; } .card__text{ font-size:13.5px; } .card__num{ top:8px; left:8px; font-size:11px; padding:5px 7px 4px; } }
/* 카드가 많은 그리드(메인 서비스 12장 등): 모바일에서도 2열 유지, 설명은 2줄 → ≤480px 숨김 */
@media (max-width:768px){
  .grid--compact-sm{ gap:12px; }
  .grid--compact-sm .card__text{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
}
@media (max-width:480px){
  .grid--compact-sm{ gap:10px; }
  .grid--compact-sm .card__body{ padding:14px 12px 16px; }
  .grid--compact-sm .card__eng{ font-size:10px; letter-spacing:.14em; margin-bottom:6px; }
  .grid--compact-sm .card__title{ font-size:15px; line-height:1.35; }
  .grid--compact-sm .card__text{ display:none; }
  .grid--compact-sm .card__more{ margin-top:12px; font-size:13px; }
  .grid--compact-sm .card--cta .card__body{ padding:22px 12px; }
  .grid--compact-sm .card--cta .card__text{ display:block; font-size:13px; }
}

/* 사진 + 오버레이 옵션 카드 (상황별 추천 서비스 등) */
.option-card{ position:relative; display:block; aspect-ratio:3/4; overflow:hidden; background:var(--g900); color:var(--white); }
.option-card img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.option-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.75)); }
.option-card:hover img{ transform:scale(1.06); }
.option-card__body{ position:absolute; left:0; right:0; bottom:0; padding:26px; z-index:1; }
.option-card__label{ font-family:var(--font-eng); font-size:11px; letter-spacing:.24em; color:rgba(255,255,255,.75); }
.option-card__title{ font-size:22px; margin-top:8px; }

/* ---------- 11. 이미지 + 텍스트 2단 ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.split--reverse .split__media{ order:2; }
.split__media{ position:relative; }
.split__media img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.split__media--tall img{ aspect-ratio:1/1; }
.split__body .sec-head{ margin-bottom:26px; }
.split__list{ margin-top:28px; display:grid; gap:14px; }
.split__list li{ position:relative; padding-left:28px; font-size:15.5px; color:var(--g700); }
.split__list li::before{ content:""; position:absolute; left:0; top:11px; width:14px; height:2px; background:var(--black); }
.split__list strong{ color:var(--ink); }
.section--dark .split__list li{ color:rgba(255,255,255,.8); }
.section--dark .split__list li::before{ background:var(--white); }
.section--dark .split__list strong{ color:var(--white); }
.split + .split{ margin-top:110px; }
@media (max-width:1024px){ .split{ gap:44px; } .split + .split{ margin-top:80px; } }
@media (max-width:768px){
  .split{ grid-template-columns:1fr; gap:28px; }
  .split--reverse .split__media{ order:0; }
  .split + .split{ margin-top:64px; }
}

/* ---------- 12. 검정 배너 ---------- */
.banner{ background:var(--black); color:var(--white); padding:90px 0; text-align:center; position:relative; overflow:hidden; }
.banner::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.08),rgba(255,255,255,0) 60%); }
.banner > .container{ position:relative; }
.banner__eng{ display:block; font-family:var(--font-eng); font-size:13px; letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:16px; }
.banner__title{ font-size:36px; }
.banner__phone{ display:inline-block; margin-top:26px; font-family:var(--font-eng); font-size:64px; font-weight:800; letter-spacing:.02em; line-height:1.1; color:var(--white); }
.banner__phone:hover{ text-decoration:underline; text-underline-offset:10px; text-decoration-thickness:3px; }
.banner__sub{ margin-top:14px; font-size:17px; color:rgba(255,255,255,.75); }
.banner__sub a{ color:var(--white); font-weight:700; }
.banner__sub a:hover{ text-decoration:underline; text-underline-offset:4px; }
.banner__actions{ margin-top:36px; display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.banner--compact{ padding:64px 0; }
@media (max-width:768px){
  .banner{ padding:64px 0; }
  .banner__title{ font-size:26px; }
  .banner__phone{ font-size:40px; }
  .banner__sub{ font-size:15px; }
  .banner__actions .btn{ flex:1 1 calc(50% - 6px); padding:0 14px; }
}

/* ---------- 13. 아코디언 (FAQ / Check List / 드로어 서브메뉴) ---------- */
.acc{ border-top:2px solid var(--black); }
.acc__item{ border-bottom:1px solid var(--g300); }
.acc__btn{ display:flex; align-items:center; gap:18px; width:100%; min-height:72px; padding:20px 4px; text-align:left; font-size:18px; font-weight:700; transition:color .2s; }
.acc__btn:hover{ color:var(--g700); }
.acc__num{ font-family:var(--font-eng); font-size:14px; font-weight:700; letter-spacing:.1em; color:var(--g500); flex:0 0 40px; }
.acc__q{ flex:1 1 auto; }
.acc__icon{ flex:0 0 auto; width:26px; height:26px; position:relative; }
.acc__icon::before,.acc__icon::after{ content:""; position:absolute; left:50%; top:50%; width:14px; height:2px; background:currentColor; transform:translate(-50%,-50%); transition:transform .3s var(--ease); }
.acc__icon::after{ transform:translate(-50%,-50%) rotate(90deg); }
.acc__item.is-open .acc__icon::after{ transform:translate(-50%,-50%) rotate(0); }
.acc__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease); }
.acc__item.is-open .acc__panel{ grid-template-rows:1fr; }
.acc__inner{ overflow:hidden; visibility:hidden; transition:visibility 0s linear .4s; }
.acc__item.is-open .acc__inner{ visibility:visible; transition-delay:0s; }
.acc__content{ padding:0 4px 26px 62px; font-size:15.5px; color:var(--g700); line-height:1.85; }
.acc__content p + p{ margin-top:8px; }
.acc--dark{ border-top-color:var(--white); }
.acc--dark .acc__item{ border-bottom-color:rgba(255,255,255,.2); }
.acc--dark .acc__btn:hover{ color:rgba(255,255,255,.75); }
.acc--dark .acc__content{ color:rgba(255,255,255,.78); }
/* 드로어 안에서는 드로어 규격 우선 */
.drawer__nav .acc__btn{ min-height:54px; padding:0 20px; font-size:17px; gap:12px; }
.drawer__nav .acc__btn:hover{ color:var(--ink); }
.drawer__nav .acc__item{ border-bottom-color:var(--g100); }
@media (max-width:768px){
  .acc__btn{ font-size:16px; min-height:60px; padding:16px 0; gap:12px; }
  .drawer__nav .acc__btn{ min-height:54px; padding:0 20px; font-size:17px; }
  .acc__num{ flex-basis:30px; font-size:12px; }
  .acc__content{ padding:0 0 22px 42px; font-size:14.5px; }
}

/* FAQ 레이아웃: 좌측 sticky(제목+설명+CTA 박스) / 우측 아코디언. 모바일은 세로 스택 */
.faq{ display:grid; grid-template-columns:5fr 7fr; gap:clamp(40px,6vw,96px); align-items:start; }
.faq__side{ position:sticky; top:calc(var(--header-h) + 32px); }
.faq__side .sec-head{ margin-bottom:32px; }
.faq__cta{ padding:28px; border:1px solid var(--g300); background:var(--white); }
.faq__cta strong{ display:block; font-size:18px; font-weight:700; }
.faq__cta p{ margin-top:8px; font-size:14.5px; color:var(--g700); line-height:1.7; }
.faq__cta .btn{ margin-top:18px; }
.faq__cta .btn + .btn{ margin-top:10px; }
.section--dark .faq__cta{ background:var(--g900); border-color:var(--g700); }
.section--dark .faq__cta p{ color:rgba(255,255,255,.75); }
@media (max-width:900px){
  .faq{ grid-template-columns:1fr; gap:32px; }
  .faq__side{ position:static; }
  .faq__cta{ padding:22px; }
}

/* ---------- 14. 숫자 스텝 / 범위 카드 ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset:step; }
.step{ position:relative; padding:34px 28px 32px; background:var(--white); border:1px solid var(--g200); }
.section--dark .step{ background:var(--g900); border-color:var(--g700); }
.step__num{ font-family:var(--font-eng); font-size:30px; font-weight:800; letter-spacing:.02em; color:var(--g300); line-height:1; }
.section--dark .step__num{ color:var(--g500); }
.step__title{ font-size:20px; margin-top:18px; }
.step__text{ margin-top:10px; font-size:14.5px; color:var(--g700); line-height:1.7; }
.section--dark .step__text{ color:rgba(255,255,255,.75); }
.step::after{ content:""; position:absolute; top:44px; right:-13px; width:26px; height:1px; background:var(--g300); }
.step:last-child::after{ display:none; }
@media (max-width:1024px){ .steps{ grid-template-columns:repeat(2,1fr); } .step:nth-child(2n)::after{ display:none; } }
@media (max-width:768px){ .steps{ grid-template-columns:1fr; gap:14px; } .step::after{ display:none; } .step{ padding:26px 22px; } }
.range-card{ position:relative; padding:44px 40px; color:var(--white); background:var(--g900); overflow:hidden; isolation:isolate; }
.range-card__bg{ position:absolute; inset:0; z-index:-1; }
.range-card__bg img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); opacity:.35; }
.range-card__title{ font-size:22px; margin-bottom:22px; }
.range-card__list li{ display:flex; gap:14px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.15); font-size:15.5px; }
.range-card__list li span:first-child{ font-family:var(--font-eng); font-weight:700; color:rgba(255,255,255,.6); flex:0 0 28px; }
@media (max-width:768px){ .range-card{ padding:30px 22px; } }

/* ---------- 15. BEFORE / AFTER ---------- */
.ba{ display:grid; grid-template-columns:1fr 1fr; gap:36px; }
.ba__pair{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ba__item{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--g100); }
.ba__item img{ width:100%; height:100%; object-fit:cover; }
.ba__item--before img{ filter:grayscale(1) contrast(1.05); }
.ba__label{ position:absolute; top:14px; left:14px; padding:6px 12px; font-family:var(--font-eng); font-size:11px; font-weight:700; letter-spacing:.22em; background:var(--white); color:var(--black); }
.ba__item--after .ba__label{ background:var(--black); color:var(--white); }
.ba__caption{ margin-top:18px; }
.ba__caption h3{ font-size:20px; }
.ba__caption p{ margin-top:6px; font-size:14.5px; color:var(--g700); }
@media (max-width:768px){ .ba{ grid-template-columns:1fr; gap:36px; } .ba__pair{ gap:6px; } }

/* ---------- 16. 사진 그리드 / 라이트박스 / 스냅 슬라이더 ---------- */
.photo-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.photo-grid--6{ grid-template-columns:repeat(6,1fr); }
.photo-grid--3{ grid-template-columns:repeat(3,1fr); }
.photo{ position:relative; display:block; aspect-ratio:1/1; overflow:hidden; background:var(--g100); }
.photo img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.photo:hover img{ transform:scale(1.06); }
.photo::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,0); transition:background .3s; }
.photo:hover::after{ background:rgba(0,0,0,.25); }
.photo__cap{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:10px 12px; font-size:12.5px; font-weight:600; color:var(--white); background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.7)); opacity:0; transform:translateY(6px); transition:opacity .3s,transform .3s; }
.photo:hover .photo__cap,.photo:focus-visible .photo__cap{ opacity:1; transform:none; }
.photo.is-hidden{ display:none; }
@media (max-width:1024px){ .photo-grid,.photo-grid--6{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:768px){ .photo-grid,.photo-grid--6,.photo-grid--3{ grid-template-columns:repeat(2,1fr); gap:6px; } }

.lightbox{ position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.94); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .3s,visibility 0s linear .3s; }
.lightbox.is-open{ opacity:1; visibility:visible; transition-delay:0s; }
.lightbox__figure{ margin:0; max-width:min(92vw,1400px); max-height:88vh; display:flex; flex-direction:column; align-items:center; gap:14px; }
.lightbox__img{ max-width:92vw; max-height:78vh; width:auto; height:auto; object-fit:contain; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.lightbox__caption{ color:rgba(255,255,255,.8); font-size:14px; text-align:center; }
.lightbox__count{ position:absolute; top:18px; left:22px; font-family:var(--font-eng); font-size:13px; letter-spacing:.12em; color:rgba(255,255,255,.7); }
.lightbox__btn{ position:absolute; width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center; color:var(--white); border-radius:50%; background:rgba(255,255,255,.08); transition:background .2s; }
.lightbox__btn:hover{ background:rgba(255,255,255,.2); }
.lightbox__btn svg{ width:22px; height:22px; }
.lightbox__btn[hidden]{ display:none; }
.lightbox__close{ top:14px; right:16px; }
.lightbox__prev{ left:16px; top:50%; transform:translateY(-50%); }
.lightbox__next{ right:16px; top:50%; transform:translateY(-50%); }
body.lightbox-open{ overflow:hidden; }
@media (max-width:768px){ .lightbox__prev{ left:6px; } .lightbox__next{ right:6px; } .lightbox__btn{ width:44px; height:44px; } }

.snap{ position:relative; }
.snap__track{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:6px; }
.snap__track::-webkit-scrollbar{ display:none; }
.snap__item{ flex:0 0 calc((100% - 40px)/3); scroll-snap-align:start; }
.snap__nav{ display:flex; gap:8px; }
.snap__btn{ width:44px; height:44px; border:1.5px solid var(--black); display:inline-flex; align-items:center; justify-content:center; transition:background .2s,color .2s; }
.snap__btn:hover{ background:var(--black); color:var(--white); }
.snap__btn svg{ width:18px; height:18px; }
@media (max-width:1024px){ .snap__item{ flex-basis:calc((100% - 20px)/2); } }
@media (max-width:640px){ .snap__item{ flex-basis:82%; } }

/* ---------- 17. 필터 ---------- */
.filter-bar{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px; }
.filter-btn{ min-height:44px; padding:0 18px; border:1.5px solid var(--g300); border-radius:999px; font-size:14px; font-weight:600; color:var(--g700); background:var(--white); transition:all .2s; }
.filter-btn:hover{ border-color:var(--black); color:var(--black); }
.filter-btn.is-active{ background:var(--black); border-color:var(--black); color:var(--white); }
@media (max-width:768px){ .filter-bar{ gap:6px; margin-bottom:20px; } .filter-btn{ padding:0 14px; font-size:13px; } }

/* ---------- 18. 폼 ---------- */
.form{ display:grid; gap:22px; }
.form__grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.form__row{ display:grid; gap:8px; }
.form__label{ font-size:14px; font-weight:700; }
.form__label .req{ color:var(--g500); font-weight:400; margin-left:4px; font-size:12px; }
.input,.textarea,.select{ width:100%; min-height:52px; padding:12px 16px; border:1.5px solid var(--g300); border-radius:var(--radius); background:var(--white); font:inherit; font-size:15px; color:var(--ink); transition:border-color .2s,box-shadow .2s; -webkit-appearance:none; appearance:none; }
.input::placeholder,.textarea::placeholder{ color:var(--g500); }
.input:focus,.textarea:focus,.select:focus{ outline:none; border-color:var(--black); box-shadow:0 0 0 3px rgba(0,0,0,.08); }
.textarea{ min-height:180px; resize:vertical; line-height:1.7; }
.select{ background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%); background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%; background-size:6px 6px,6px 6px; background-repeat:no-repeat; padding-right:44px; }
.check{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--g700); cursor:pointer; min-height:44px; }
.check input{ width:20px; height:20px; margin:2px 0 0; accent-color:#0e0e0e; flex:0 0 auto; }
.form__note{ font-size:13px; color:var(--g500); }
.form__actions{ display:flex; gap:12px; flex-wrap:wrap; }
@media (max-width:768px){ .form__grid{ grid-template-columns:1fr; } }

/* ---------- 19. 정보 테이블 ---------- */
.info-table{ width:100%; border-collapse:collapse; border-top:2px solid var(--black); font-size:15.5px; }
.info-table th,.info-table td{ padding:18px 16px; border-bottom:1px solid var(--g300); text-align:left; vertical-align:top; }
.info-table th{ width:180px; background:var(--off); font-weight:700; white-space:nowrap; }
.info-table td a{ font-weight:600; }
.info-table td a:hover{ text-decoration:underline; text-underline-offset:3px; }
.section--dark .info-table{ border-top-color:var(--white); }
.section--dark .info-table th{ background:var(--g900); }
.section--dark .info-table th,.section--dark .info-table td{ border-bottom-color:var(--g700); }
@media (max-width:768px){ .info-table th{ width:104px; padding:14px 10px; font-size:14px; } .info-table td{ padding:14px 10px; font-size:14px; } }

/* ---------- 20. 인용 / 서명 ---------- */
.quote{ font-size:30px; font-weight:700; line-height:1.5; letter-spacing:-.02em; }
.quote--eng{ font-family:var(--font-eng); font-weight:500; font-style:italic; font-size:22px; letter-spacing:0; }
.signature{ margin-top:40px; font-size:16px; color:var(--g700); }
.signature strong{ display:block; font-size:22px; color:var(--ink); letter-spacing:.24em; margin-top:6px; }
.lead{ font-size:18px; line-height:1.9; color:var(--g700); }
.lead + .lead{ margin-top:22px; }
@media (max-width:768px){ .quote{ font-size:22px; } .lead{ font-size:15.5px; } }

/* ---------- 21. 푸터 ("Contact us.") ---------- */
.footer{ background:var(--footer-bg); color:var(--ink); padding:100px 0 48px; }
.footer__title{ font-family:var(--font-eng); font-size:56px; font-weight:800; letter-spacing:-.02em; line-height:1; }
.footer__lead{ margin-top:18px; font-size:16px; color:var(--g700); max-width:620px; }
.footer__cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; }
.footer__card{ background:var(--white); padding:34px 32px; min-height:200px; display:flex; flex-direction:column; }
.footer__card-eng{ font-family:var(--font-eng); font-size:11px; font-weight:700; letter-spacing:.24em; color:var(--g500); }
.footer__card-title{ font-size:19px; margin-top:8px; }
.footer__card-body{ margin-top:auto; padding-top:20px; font-size:15px; line-height:1.9; color:var(--g700); }
.footer__card-body a{ display:block; font-size:22px; font-weight:800; color:var(--ink); letter-spacing:.01em; line-height:1.5; }
.footer__card-body a.footer__link-sm{ font-size:16px; font-weight:700; }
.footer__card-body a:hover{ text-decoration:underline; text-underline-offset:4px; }
.footer__bottom{ margin-top:64px; padding-top:28px; border-top:1px solid rgba(0,0,0,.14); display:flex; align-items:flex-start; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.footer__logo img{ height:56px; width:auto; }
.footer__info{ font-size:13.5px; color:var(--g700); line-height:1.9; }
.footer__info span{ display:inline-block; }
.footer__info span + span::before{ content:"|"; margin:0 10px; color:var(--g500); }
.footer__info a:hover{ text-decoration:underline; text-underline-offset:3px; }
.footer__copy{ margin-top:10px; font-family:var(--font-eng); font-size:12px; letter-spacing:.06em; color:var(--g500); }
@media (max-width:1024px){ .footer__cards{ grid-template-columns:1fr; } .footer__card{ min-height:0; } }
@media (max-width:768px){
  .footer{ padding:64px 0 40px; }
  .footer__title{ font-size:40px; }
  .footer__card{ padding:26px 22px; }
  .footer__card-body a{ font-size:19px; }
  .footer__bottom{ margin-top:44px; flex-direction:column; }
  .footer__info span{ display:block; }
  .footer__info span + span::before{ display:none; }
}

/* ---------- 22. 플로팅 퀵버튼 ---------- */
.quick{ position:fixed; right:18px; bottom:18px; z-index:80; display:flex; flex-direction:column; gap:8px; }
.quick__btn{ width:52px; height:52px; border-radius:50%; background:var(--black); color:var(--white); display:inline-flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,.25); transition:transform .25s var(--ease),background .2s; }
.quick__btn:hover{ transform:translateY(-3px); background:var(--g700); }
.quick__btn svg{ width:22px; height:22px; }
.quick__top{ background:var(--white); color:var(--black); border:1.5px solid var(--black); opacity:0; visibility:hidden; transform:translateY(8px); }
.quick__top.is-visible{ opacity:1; visibility:visible; transform:none; }
@media (max-width:768px){ .quick{ right:12px; bottom:12px; } .quick__btn{ width:48px; height:48px; } }

/* ---------- 23. 리빌 애니메이션 ---------- */
.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease),transform .8s var(--ease); }
.js .reveal.is-visible{ opacity:1; transform:none; }
.js .reveal--delay-1{ transition-delay:.12s; }
.js .reveal--delay-2{ transition-delay:.24s; }
.js .reveal--delay-3{ transition-delay:.36s; }
@media (prefers-reduced-motion:reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}

/* ---------- 24. 기타 유틸 ---------- */
.badge{ display:inline-flex; align-items:center; min-height:26px; padding:0 10px; border:1px solid var(--black); font-family:var(--font-eng); font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.badge--fill{ background:var(--black); color:var(--white); }
.tel-lg{ font-family:var(--font-eng); font-weight:800; font-size:28px; letter-spacing:.02em; }
.dark-note{ color:rgba(255,255,255,.7); }
.img-frame{ overflow:hidden; background:var(--g100); }
.img-frame img{ width:100%; height:100%; object-fit:cover; }
.ratio-4x3{ aspect-ratio:4/3; } .ratio-1x1{ aspect-ratio:1/1; } .ratio-3x4{ aspect-ratio:3/4; } .ratio-16x9{ aspect-ratio:16/9; }