/* ============================================================
   counsell — SEO · GEO · AEO Consulting
   style.css — index.html · elements.html 공용
   톤     : 에디토리얼·기관형 · 딥 그레이블루 단일 액센트(채도 절제)
   원칙   : 트루 보더리스 · Zero-JS(차트 제외) · 화이트 베이스 · 플랫
   색상   : 모든 색은 :root 토큰만 참조 — 반투명 색도 color-mix()로 토큰에서 파생
   ============================================================ */

/* ─── 01. DESIGN TOKENS ─────────────────────────────────────── */
:root{
  /* 면 — 화이트 베이스, 경계는 배경 대비로만 */
  --bg:          #ffffff;
  --surface:     #f4f5f6;   /* 섹션 교차 밴드 — 뉴트럴 라이트 그레이 */
  --panel:       #ebedee;   /* 화이트 위 엘레먼츠 */
  --panel-deep:  #dfe2e4;   /* 인풋 채움 · 깊은 영역 */
  --dark:        #2a3237;   /* 다크 밴드 — 딥 차콜-그레이 */
  --dark-2:      #20262a;   /* 더 깊은 다크 */
  --dark-soft:   #3a444a;   /* 다크 위 분할 셀 */

  /* 잉크 */
  --ink:         #24292c;   /* 본문 · 제목 · 메뉴 */
  --ink-soft:    #5c646a;   /* 보조 문단 */
  /* 시그니처 액센트 — 딥 그레이블루 하나로 통일 (채도 절제) */
  --brown:       #4c5f68;   /* 흐린 텍스트 · 라벨 · 시그니처 액센트 → 딥 그레이블루 (흰배경 AA) */
  --brown-soft:  #9aabb2;   /* 다크 배경 위 액센트 → 밝은 그레이블루 */

  /* 포인트 */
  --blue:        #4c5f68;   /* 주 색상 — 딥 그레이블루 (강조·텍스트) */
  --blue-dk:     #38464d;   /* 버튼 면 · 호버 · 헤더 (흰글자 AA) */
  --blue-press:  #2b363b;   /* 누른 상태 */

  /* 다크 위 텍스트 */
  --on-dark:       #ffffff;
  --on-dark-soft:  rgba(255,255,255,.72);
  --on-dark-faint: rgba(255,255,255,.42);

  /* 치수 */
  --maxw:  1320px;
  --pad:   40px;
  --hd:    74px;

  /* 영문(라틴 문자)은 Source Serif 4로, 한글은 자동으로 Pretendard로 폴백 —
     페이지 전체에서 영문 서체가 단 하나로 통일되도록 전역 스택에 둠 */
  --font: 'Source Serif 4','Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,
          'Apple SD Gothic Neo','Malgun Gothic','맑은 고딕',sans-serif;
  /* 코드·토큰 표기 전용 고정폭 */
  --font-mono: Consolas,'SF Mono',SFMono-Regular,Menlo,'Liberation Mono',ui-monospace,'Pretendard Variable','Pretendard',monospace;

  --shadow-pop:  0 8px 28px rgba(30,35,40,.12);
  --shadow-lift: 0 16px 36px rgba(30,35,40,.11);

  --ease: 200ms cubic-bezier(.4,0,.2,1);
}

/* ─── 02. RESET & BASE ──────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
/* 모바일 메뉴는 body 강제 고정 없이, 햄버거 메뉴 자체에서 흔들림 방지 */
body{
  font-family:var(--font);
  font-size:15px; line-height:1.72;
  color:var(--ink); background:var(--bg);
  word-break:keep-all; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul,ol{ list-style:none; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
input,select,textarea{ font-family:inherit; font-size:inherit; color:inherit; border:none; outline:none; -webkit-appearance:none; appearance:none; }
table{ border-collapse:collapse; width:100%; }
address{ font-style:normal; }
::selection{ background:var(--blue-dk); color:var(--on-dark); }

/* ─── 03. TYPOGRAPHY ────────────────────────────────────────── */
h1{ font-size:42px; font-weight:600; line-height:1.22; letter-spacing:-.025em; }
h2{ font-size:32px; font-weight:600; line-height:1.26; letter-spacing:-.02em; }
h3{ font-size:22px; font-weight:600; line-height:1.4;  letter-spacing:-.012em; }
h4{ font-size:18px; font-weight:600; line-height:1.45; }
h5{ font-size:16px; font-weight:600; line-height:1.5; }
h6{ font-size:13px; font-weight:600; line-height:1.5; }
p{ font-size:15px; }
strong{ font-weight:600; }

.eyebrow{
  display:inline-block;
  font-size:13px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--brown); margin-bottom:18px;
}
.lead{ font-size:17px; color:var(--ink-soft); line-height:1.85; }

/* ─── 04. LAYOUT ────────────────────────────────────────────── */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.wrap.narrow{ max-width:880px; }
.section{ padding:108px 0; }
.section.tight{ padding:76px 0; }
.surface{ background:var(--surface); }
.band-dark{ background:var(--dark); color:var(--on-dark); }

/* .section-head{ max-width:680px; margin-bottom:56px; } */
.section-head{ margin-bottom:56px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ margin-bottom:16px; }
.section-head p{ color:var(--ink-soft); font-size:16px; line-height:1.8; }
.section-head.flush{ margin-bottom:0; }

.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-2.split{ gap:60px; align-items:center; }

.row{ display:flex; }
.row.wrap-on{ flex-wrap:wrap; }
.row.mid{ align-items:center; }
.row.between{ justify-content:space-between; }
.row.center{ justify-content:center; }
.gap-10{ gap:10px; } .gap-14{ gap:14px; } .gap-24{ gap:24px; }
.mt-20{ margin-top:20px; } .mt-28{ margin-top:28px; } .mt-56{ margin-top:56px; }
.mb-16{ margin-bottom:16px; } .mb-28{ margin-bottom:28px; }
.head-row{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:48px;
}
.page-main{ padding-top:var(--hd); }

/* ─── 05. HEADER / GNB ──────────────────────────────────────── */
.site-header{
  position:fixed; inset:0 0 auto 0;
  height:var(--hd);
  background:var(--bg);
  -webkit-backdrop-filter:blur(0px); backdrop-filter:blur(0px);
  box-shadow:0 1px 0 var(--panel);
  z-index:1000;
  /* 스크롤 시 반투명 프로스트 (Zero-JS, scroll-driven) */
  animation:header-frost linear both;
  animation-timeline:scroll(root);
  animation-range:20px 150px;
}
@keyframes header-frost{
  to{
    background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:saturate(140%) blur(18px);
            backdrop-filter:saturate(140%) blur(18px);
    box-shadow:0 6px 28px rgba(30,35,40,.12);
  }
}
.header-bar{ height:var(--hd); display:flex; align-items:center; }

.logo{
  display:flex; align-items:baseline; gap:1px;
  font-size:23px; font-weight:500;
  letter-spacing:-.005em; color:var(--ink);
  white-space:nowrap; flex-shrink:0;
}
.logo .mark{ color:var(--brown); }

.gnb{ display:flex; align-items:center; flex:1; margin-left:54px; }
.gnb-list{ display:flex; }
.gnb-item{ position:relative; }
.gnb-item > a{
  display:flex; align-items:center; gap:7px;
  height:var(--hd); padding:0 21px;
  font-size:15px; font-weight:500; color:var(--ink);
  white-space:nowrap;
  box-shadow:inset 0 -2px 0 transparent;
  transition:box-shadow var(--ease),color var(--ease);
}
.gnb-item > a .caret{
  width:6px; height:6px;
  border-right:1.6px solid var(--ink-soft);
  border-bottom:1.6px solid var(--ink-soft);
  transform:translateY(-2px) rotate(45deg);
  transition:transform var(--ease);
}
.gnb-item:hover > a{ color:var(--blue); box-shadow:inset 0 -2px 0 var(--blue); }
.gnb-item:hover > a .caret{ transform:translateY(0) rotate(-135deg); border-color:var(--blue); }

.gnb-sub{
  position:absolute; top:100%; left:13px;
  min-width:218px; background:var(--bg);
  box-shadow:var(--shadow-pop); padding:10px 0;
  opacity:0; visibility:hidden; transform:translateY(7px);
  transition:opacity var(--ease),transform var(--ease),visibility var(--ease);
}
.gnb-item:hover .gnb-sub{ opacity:1; visibility:visible; transform:translateY(0); }
.gnb-sub a{
  display:block; padding:11px 24px;
  font-size:14px; color:var(--ink-soft);
  transition:color var(--ease),background var(--ease);
}
.gnb-sub a:hover{ color:var(--blue); background:var(--surface); }

.gnb-util{ margin-left:auto; display:flex; align-items:center; gap:24px; flex-shrink:0; }
.gnb-util > a{ font-size:13px; font-weight:500; color:var(--ink-soft); transition:color var(--ease); }
.gnb-util > a:hover{ color:var(--blue); }
.gnb-util .util-cta{
  color:var(--ink); font-size:13px; font-weight:500;
  padding-bottom:3px; box-shadow:inset 0 -1px 0 var(--ink);
  transition:color var(--ease),box-shadow var(--ease);
}
.gnb-util .util-cta:hover{ color:var(--blue); box-shadow:inset 0 -1px 0 var(--blue); }

.nav-toggle{ display:none; }
.hamburger{ display:none; margin-left:auto; flex-direction:column; gap:5px; padding:10px; }
.hamburger span{
  display:block; width:24px; height:2px; background:var(--ink);
  transition:transform var(--ease),opacity var(--ease);
}
.nav-toggle:checked ~ .site-header .hamburger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle:checked ~ .site-header .hamburger span:nth-child(2){ opacity:0; }
.nav-toggle:checked ~ .site-header .hamburger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* 모바일 내비 — .site-header의 backdrop-filter가 만드는 containing block 밖에 두기 위해
   헤더의 형제 요소로 존재. 절대 .site-header 내부로 옮기지 말 것(옮기면 fixed 포지셔닝이
   헤더 박스 기준으로 다시 갇혀서 패널이 화면을 못 채우는 문제가 재발함). */
.m-nav{
  display:none; position:fixed;
  top:var(--hd); left:0;
  width:100%; max-width:100vw;
  height:calc(100vh - var(--hd));
  height:calc(100dvh - var(--hd));
  background:var(--bg); z-index:999;
  overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  padding:8px 0 64px;
}
.m-nav .btn-block{ width:auto; }
.m-group{ padding:8px 0; }
.m-group + .m-group{ box-shadow:inset 0 1px 0 var(--panel); }
.m-head{
  display:block; padding:16px 24px 8px;
  font-size:13px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--brown);
}
.m-link{ display:block; padding:12px 24px; font-size:15px; color:var(--ink); }
.m-link.solo{ font-weight:500; padding-top:18px; padding-bottom:18px; }
.m-link:active{ background:var(--surface); }
.m-cta{ display:flex; width:auto; margin:18px 24px 0; }

/* ─── 06. 스크롤 프로그레스 (맥킨지식) ──────────────────────── */
.scroll-progress{
  position:absolute; left:0; bottom:-3px;
  width:100%; height:3px;
  background:var(--panel); overflow:hidden;
}
.scroll-progress::after{
  content:''; display:block; height:100%; width:100%;
  background:var(--blue);
  transform-origin:0 50%; transform:scaleX(0);
  animation:progress-grow linear both;
  animation-timeline:scroll(root);
}
@keyframes progress-grow{ to{ transform:scaleX(1); } }

/* ─── 07. BREADCRUMB (index.html 제외 모든 실제 페이지) — 우상단, 배경/경계 없이 조용하게 ── */
.breadcrumb{ padding:14px 0; background:none; }
.breadcrumb ol{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; }
.breadcrumb li{ display:flex; align-items:center; font-size:12px; }
.breadcrumb li:not(:last-child)::after{
  content:''; display:inline-block;
  width:4px; height:4px; margin:0 9px;
  border-right:1.2px solid var(--panel-deep);
  border-top:1.2px solid var(--panel-deep);
  transform:rotate(45deg);
}
.breadcrumb a{ color:var(--ink-soft); transition:color var(--ease); }
.breadcrumb a:hover{ color:var(--blue); }
.breadcrumb li[aria-current]{ color:var(--ink-soft); }

/* ─── 08. BUTTONS ───────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-size:14px; font-weight:500; line-height:1;
  padding:16px 30px; white-space:nowrap;
  transition:background var(--ease),color var(--ease),box-shadow var(--ease),transform var(--ease);
}
.btn-primary{ background:var(--blue-dk); color:var(--on-dark); }
.btn-primary:hover{ background:var(--blue-press); }
.btn-secondary{ background:var(--blue); color:var(--on-dark); }
.btn-secondary:hover{ background:var(--blue-dk); }
.btn-ghost{ background:var(--panel); color:var(--blue); }
.btn-ghost:hover{ background:var(--panel-deep); }
.btn-line{ background:transparent; color:var(--blue); box-shadow:inset 0 0 0 1.5px var(--blue); }
.btn-line:hover{ background:var(--blue-dk); color:var(--on-dark); }
.btn-dark{ background:var(--ink); color:var(--on-dark); }
.btn-dark:hover{ background:var(--dark-2); }
.btn-on-dark{ background:var(--bg); color:var(--blue); }
.btn-on-dark:hover{ background:var(--surface); }
.btn-on-dark-line{ background:transparent; color:var(--on-dark); box-shadow:inset 0 0 0 1.5px var(--on-dark-faint); }
.btn-on-dark-line:hover{ background:rgba(255,255,255,.1); }
.btn-sm{ padding:11px 18px; font-size:13px; }
.btn-lg{ padding:19px 40px; font-size:15px; }
.btn-block{ width:100%; }

.arrow-link{
  display:inline-flex; align-items:center; gap:9px;
  font-size:14px; font-weight:500; color:var(--blue);
}
.arrow-link::after{
  content:''; width:8px; height:10px; flex-shrink:0;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M0 0l8 5-8 5z'/%3E%3C/svg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M0 0l8 5-8 5z'/%3E%3C/svg%3E") no-repeat center/contain;
  transition:transform var(--ease);
}
.arrow-link:hover::after{ transform:translateX(4px); }

/* ─── 07-B. NAV SCRIM (모바일 메뉴 딤 처리, 기본 숨김) ──────────── */
.nav-scrim{ display:none; }

/* ─── 09. HERO — 홈 (좌우 분할형) ───────────────────────────── */
.hero-split{ background:var(--bg); }
.hero-split-inner{ display:flex; align-items:stretch; }
.hero-split-text{
  flex:1 1 50%; display:flex; flex-direction:column; justify-content:center;
  padding:88px 64px 88px 0;
}
.hero-split-text .eyebrow{ color:var(--brown); }
.hero-split-text :is(h1,.hero-title){ font-size:48px; line-height:1.22; letter-spacing:-.03em; margin-bottom:22px; }
.hero-split-text .hero-desc{
  font-size:17px; color:var(--ink-soft);
  line-height:1.85; max-width:520px; margin-bottom:34px;
}
.hero-split-text .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-split-media{ position:relative; flex:1 1 50%; aspect-ratio:4/3; overflow:hidden; background:var(--panel); }
.hero-split-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }

/* 라이브러리 히어로 (elements.html) */
.hero-title{ font-size:44px; font-weight:600; line-height:1.2; letter-spacing:-.03em; }
.hero-text{ padding:104px var(--pad); text-align:center; background:var(--surface); }
.hero-text .hero-title{ max-width:780px; margin:0 auto 18px; }
.hero-text .hero-desc{ font-size:17px; color:var(--ink-soft); max-width:560px; margin:0 auto 32px; line-height:1.8; }
.hero-text .hero-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

.hero-image,.hero-video{
  position:relative; min-height:480px;
  display:flex; align-items:center;
  background:var(--dark); color:var(--on-dark); overflow:hidden;
}
.hero-image .hero-bg,.hero-video .hero-bg{ position:absolute; inset:0; }
.hero-image .hero-bg img,.hero-video .hero-bg img{ width:100%; height:100%; object-fit:cover; }
.hero-image .hero-inner,.hero-video .hero-inner{ position:relative; z-index:1; }
.hero-image .hero-title,.hero-video .hero-title{ max-width:660px; margin-bottom:16px; text-shadow:0 2px 18px color-mix(in srgb,var(--dark) 75%,transparent); }
.hero-image .hero-desc,.hero-video .hero-desc{ font-size:16px; color:var(--on-dark-soft); max-width:520px; margin-bottom:30px; line-height:1.8; text-shadow:0 1px 12px color-mix(in srgb,var(--dark) 65%,transparent); }
.hero-image .eyebrow,.hero-video .eyebrow{ color:var(--on-dark); text-shadow:0 1px 10px color-mix(in srgb,var(--dark) 65%,transparent); }
.hero-video .play-btn{
  width:58px; height:58px; border-radius:50%;
  background:rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center; margin-bottom:26px;
}
.hero-video .play-btn::after{
  content:''; width:0; height:0; margin-left:4px;
  border-left:14px solid var(--on-dark);
  border-top:9px solid transparent; border-bottom:9px solid transparent;
}

.hero-slider{ position:relative; background:var(--dark); overflow:hidden; }
.hero-slider .slide-input{ display:none; }
.hero-slider .slides{ display:grid; }
.hero-slider .slide{
  grid-area:1/1; min-height:460px;
  display:flex; align-items:center; color:var(--on-dark);
  position:relative; opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease);
}
.hero-slider .slide .slide-bg{ position:absolute; inset:0; }
.hero-slider .slide .slide-bg img{ width:100%; height:100%; object-fit:cover; }
.hero-slider .slide .slide-inner{ position:relative; z-index:1; }
.hero-slider .slide h2{ font-size:34px; margin-bottom:12px; max-width:560px; text-shadow:0 2px 18px color-mix(in srgb,var(--dark) 75%,transparent); }
.hero-slider .slide p{ color:var(--on-dark-soft); max-width:480px; text-shadow:0 1px 12px color-mix(in srgb,var(--dark) 65%,transparent); }
#hs1:checked ~ .slides .slide:nth-child(1),
#hs2:checked ~ .slides .slide:nth-child(2),
#hs3:checked ~ .slides .slide:nth-child(3){ opacity:1; visibility:visible; }
.hero-slider .slide-dots{
  position:absolute; left:0; right:0; bottom:28px; z-index:2;
  display:flex; gap:10px; justify-content:center;
}
.hero-slider .slide-dots label{
  width:32px; height:4px; background:rgba(255,255,255,.32);
  cursor:pointer; transition:background var(--ease);
}
.hero-slider .slide-dots label:hover{ background:rgba(255,255,255,.6); }
#hs1:checked ~ .slide-dots label:nth-child(1),
#hs2:checked ~ .slide-dots label:nth-child(2),
#hs3:checked ~ .slide-dots label:nth-child(3){ background:var(--on-dark); }

.hero-cta{ padding:96px var(--pad); text-align:center; background:var(--blue-dk); color:var(--on-dark); }
.hero-cta .hero-title{ font-size:36px; margin-bottom:14px; color:var(--on-dark); }
.hero-cta p{ font-size:16px; color:var(--on-dark-soft); margin-bottom:30px; }
.hero-cta .hero-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ─── 10. 브리프 스트립 (히어로 하단 인사이트) ──────────────── */
.brief-strip{ background:var(--surface); }
.brief-grid{ display:grid; grid-template-columns:repeat(3,1fr); }
.brief-cell{
  display:block; padding:34px 36px;
  transition:background var(--ease);
}
.brief-cell:not(:last-child){ box-shadow:1px 0 0 var(--panel-deep); }
.brief-cell:hover{ background:var(--bg); }
.brief-cell .bc-cat{
  font-size:12px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--brown); margin-bottom:9px;
}
.brief-cell .bc-title{
  font-size:15px; font-weight:500; color:var(--ink); line-height:1.55;
}
.brief-cell:hover .bc-title{ color:var(--blue); }

/* ─── 11. 매니페스토 (대형 편집 문구) ───────────────────────── */
.manifesto{ padding:112px 0; background:var(--bg); }
.manifesto .m-label{
  font-size:12px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brown); margin-bottom:30px;
}
.manifesto .m-text{
  font-size:34px; font-weight:600; line-height:1.46;
  letter-spacing:-.022em; color:var(--ink); max-width:1000px;
}
.manifesto .m-text .hl{ color:var(--brown); }

/* ─── 12. 서비스 — 편집형 행 ────────────────────────────────── */
.svc-list{ display:flex; flex-direction:column; gap:2px; }
.svc-row{
  display:grid; grid-template-columns:96px 1fr 220px;
  gap:32px; align-items:center;
  background:var(--panel); padding:38px 36px;
  transition:background var(--ease),transform var(--ease);
}
.surface .svc-row{ background:var(--bg); }
.svc-row:hover{ background:var(--surface); }
.surface .svc-row:hover{ background:var(--panel); }
.svc-row .sr-no{
  font-size:32px; font-weight:700; color:var(--brown);
  letter-spacing:-.04em; line-height:1;
}
.svc-row .sr-main h3{ font-size:22px; margin-bottom:8px; }
.svc-row .sr-main p{ font-size:14px; color:var(--ink-soft); line-height:1.72; max-width:560px; }
.svc-row .sr-keys{ display:flex; flex-wrap:wrap; gap:7px; }
.svc-row .sr-keys span{
  font-size:12px; font-weight:500; color:var(--ink-soft);
  background:var(--panel-deep); padding:5px 10px;
}
.surface .svc-row .sr-keys span{ background:var(--panel); }

/* 서비스 카드 (라이브러리) */
.svc-card{
  background:var(--panel); padding:34px 30px 30px;
  transition:transform var(--ease),box-shadow var(--ease);
}
.surface .svc-card{ background:var(--bg); }
.svc-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.svc-card .svc-cat{
  font-size:12px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--brown); margin-bottom:12px;
}
.svc-card h3{ font-size:18px; margin-bottom:10px; }
.svc-card p{ font-size:14px; color:var(--ink-soft); line-height:1.78; margin-bottom:18px; }

/* ─── 13. 지표 — 편집형 대형 숫자 ───────────────────────────── */
.metrics-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:36px; }
.metric .m-fig{
  display:flex; align-items:baseline;
  font-size:64px; font-weight:700; color:var(--ink);
  letter-spacing:-.04em; line-height:1;
}
.metric .m-fig .u{ font-size:30px; font-weight:600; color:var(--brown); margin-left:5px; }
.metric .m-name{ font-size:15px; font-weight:500; color:var(--ink); margin-top:16px; }
.metric .m-desc{ font-size:13px; color:var(--ink-soft); margin-top:4px; line-height:1.6; }

/* 통계 밴드 (라이브러리) — 4칸 배경을 기존 다크 팔레트 톤으로 서로 다르게 구성 */
.stat-band{ background:var(--dark-2); }
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:color-mix(in srgb,var(--on-dark) 7%,transparent); }
.stat-cell{ background:var(--dark-soft); padding:54px 30px; text-align:center; }
.stat-cell:nth-child(1){ background:var(--dark-2); }
.stat-cell:nth-child(2){ background:var(--blue-press); }
.stat-cell:nth-child(3){ background:var(--dark); }
.stat-cell:nth-child(4){ background:var(--blue-dk); }
.stat-cell .stat-fig{ display:flex; align-items:baseline; justify-content:center; color:var(--on-dark); line-height:1; margin-bottom:14px; }
.stat-fig .num{ font-size:52px; font-weight:700; letter-spacing:-.03em; }
.stat-fig .unit{ font-size:22px; font-weight:600; color:var(--brown-soft); margin-left:8px; }
.stat-cell p{ font-size:13px; color:var(--on-dark-soft); }

/* ─── 14. CARDS ─────────────────────────────────────────────── */
.card{
  background:var(--panel); padding:32px 30px;
  transition:transform var(--ease),box-shadow var(--ease);
}
.surface .card{ background:var(--bg); }
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.card .card-kicker{
  font-size:12px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--brown); margin-bottom:14px;
}
.card h3{ font-size:19px; margin-bottom:10px; }
.card h4{ font-size:17px; margin-bottom:10px; }
.card p{ font-size:14px; color:var(--ink-soft); line-height:1.78; }
.card .arrow-link{ margin-top:18px; }

/* 인사이트 카드 */
.insight-card{ background:var(--bg); transition:transform var(--ease),box-shadow var(--ease); }
.insight-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.insight-card .ic-thumb{ aspect-ratio:16/10; overflow:hidden; background:var(--panel-deep); }
.insight-card .ic-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease); }
.insight-card:hover .ic-thumb img{ transform:scale(1.045); }
.insight-card .ic-body{ padding:22px 22px 26px; }
.insight-card .ic-meta{
  display:flex; gap:10px; align-items:center;
  font-size:12px; color:var(--brown); font-weight:500;
  letter-spacing:.03em; margin-bottom:10px;
}
.insight-card .ic-meta .dot{ width:3px; height:3px; background:var(--brown); border-radius:50%; }
.insight-card h3{ font-size:16px; line-height:1.5; margin-bottom:8px; }
.insight-card:hover h3{ color:var(--blue); }
.insight-card p{ font-size:13px; color:var(--ink-soft); line-height:1.7; }

/* 인사이트 — 피처 + 리스트 (홈) */
.insights-feature{ display:grid; grid-template-columns:1.25fr 1fr; gap:48px; }
.if-main{ background:var(--bg); transition:transform var(--ease),box-shadow var(--ease); }
.surface .if-main{ background:var(--bg); }
.if-main:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.if-main .ifm-thumb{ aspect-ratio:16/9; overflow:hidden; background:var(--panel-deep); }
.if-main .ifm-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease); }
.if-main:hover .ifm-thumb img{ transform:scale(1.04); }
.if-main .ifm-body{ padding:30px 32px 34px; }
.if-main .ifm-meta{ font-size:12px; font-weight:500; color:var(--brown); letter-spacing:.04em; margin-bottom:12px; }
.if-main .ifm-body h3{ font-size:24px; line-height:1.34; margin-bottom:12px; }
.if-main:hover .ifm-body h3{ color:var(--blue); }
.if-main .ifm-body p{ font-size:14px; color:var(--ink-soft); line-height:1.75; }
.if-side{ display:flex; flex-direction:column; gap:2px; }
.if-row{
  display:flex; flex-direction:column; gap:6px;
  background:var(--bg); padding:24px 26px; flex:1; justify-content:center;
  transition:background var(--ease);
}
.surface .if-row{ background:var(--bg); }
.if-row:hover{ background:var(--surface); }
.surface .if-row:hover{ background:var(--panel); }
.if-row .ifr-meta{ font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--brown); }
.if-row h4{ font-size:16px; line-height:1.48; }
.if-row:hover h4{ color:var(--blue); }

/* ─── 15. PROCESS ───────────────────────────────────────────── */
/* A. 가로형 */
.process-h{
  display:grid; gap:2px;
  grid-template-columns:repeat(var(--cols,4),1fr);
  background:var(--panel-deep);
}
.ph-step{ background:var(--panel); padding:36px 28px 32px; transition:background var(--ease); }
.surface .ph-step{ background:var(--bg); }
.ph-step:hover{ background:var(--surface); }
.surface .ph-step:hover{ background:var(--panel); }
.ph-step .ph-no{
  font-size:34px; font-weight:700; color:var(--brown);
  letter-spacing:-.03em; line-height:1; margin-bottom:20px;
}
.ph-step h3{ font-size:16px; margin-bottom:9px; }
.ph-step p{ font-size:13px; color:var(--ink-soft); line-height:1.7; }

/* B. 세로형 */
.process-v{ display:flex; flex-direction:column; gap:3px; }
.pv-step{
  display:flex; gap:26px; align-items:flex-start;
  background:var(--panel); padding:28px 30px;
  transition:background var(--ease);
}
.surface .pv-step{ background:var(--bg); }
.pv-step:hover{ background:var(--surface); }
.surface .pv-step:hover{ background:var(--panel); }
.pv-step .pv-no{
  flex-shrink:0; font-size:28px; font-weight:700;
  color:var(--brown); letter-spacing:-.03em;
  line-height:1; min-width:50px; padding-top:2px;
}
.pv-step h3{ font-size:16px; margin-bottom:6px; }
.pv-step p{ font-size:14px; color:var(--ink-soft); line-height:1.75; }

/* C. 타임라인 — 선·노드 정확 정렬 */
.timeline{ display:flex; flex-direction:column; }
.tl-item{ display:flex; gap:24px; }
.tl-year{
  flex-shrink:0; width:54px; text-align:right;
  font-size:16px; font-weight:700; color:var(--blue);
  letter-spacing:-.01em; padding-top:13px;
}
.tl-rail{ position:relative; flex-shrink:0; width:16px; }
.tl-rail::before{
  content:''; position:absolute;
  left:50%; transform:translateX(-50%);
  top:0; bottom:0; width:2px; background:var(--panel-deep);
}
.tl-item:first-child .tl-rail::before{ top:21px; }
.tl-item:last-child  .tl-rail::before{ bottom:auto; height:21px; }
.tl-node{
  position:absolute; left:50%; top:14px;
  transform:translateX(-50%);
  width:14px; height:14px; border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 0 4px var(--bg);
  z-index:1;
}
.surface .tl-node{ box-shadow:0 0 0 4px var(--surface); }
.tl-body{ flex:1; padding:7px 0 34px; }
.tl-item:last-child .tl-body{ padding-bottom:6px; }
.tl-body h3{ font-size:16px; margin-bottom:5px; }
.tl-body p{ font-size:14px; color:var(--ink-soft); line-height:1.7; }

/* D. 진행 플로우 — 연결형 (가로 트랙 + 인덱스) */
.process-flow{
  display:grid;
  grid-template-columns:repeat(var(--steps,4),1fr);
  column-gap:30px;
}
.pf-step{ position:relative; padding-top:38px; }
/* 노드를 가로지르는 연결선 */
.pf-step::before{
  content:''; position:absolute;
  left:0; top:6px; right:-30px; height:2px;
  background:var(--panel-deep); z-index:0;
}
.pf-step:last-child::before{ display:none; }
/* 트랙 노드 */
.pf-dot{
  position:absolute; left:0; top:0; z-index:1;
  width:14px; height:14px; border-radius:50%;
  background:var(--blue-dk);
  box-shadow:0 0 0 4px var(--bg);
}
.surface .pf-dot{ box-shadow:0 0 0 4px var(--surface); }
.pf-step:first-child .pf-dot{ width:16px; height:16px; top:-1px; }
/* 인덱스 번호 */
.pf-no{
  font-size:44px; font-weight:700; line-height:1;
  letter-spacing:-.04em; color:var(--blue); margin-bottom:14px;
}
.pf-title{ font-size:17px; font-weight:600; margin-bottom:8px; }
.pf-desc{ font-size:14px; color:var(--ink-soft); line-height:1.74; }

/* ─── 16. TABLES ────────────────────────────────────────────── */
.table-wrap{ width:100%; overflow-x:auto; }
.data-table th,.data-table td{ text-align:left; padding:15px 18px; font-size:14px; }
.data-table thead th{
  background:var(--panel-deep); color:var(--ink);
  font-size:13px; font-weight:500; letter-spacing:.02em;
}
.data-table tbody tr{ background:var(--bg); }
.data-table tbody tr:nth-child(even){ background:var(--panel); }
.surface .data-table tbody tr{ background:var(--bg); }
.surface .data-table tbody tr:nth-child(even){ background:var(--surface); }
.data-table tbody td{ color:var(--ink-soft); }
.data-table tbody td:first-child{ color:var(--ink); font-weight:500; }

.list-table td{ padding:16px 18px; font-size:14px; }
.list-table tbody tr{ background:var(--bg); transition:background var(--ease); }
.list-table tbody tr:hover{ background:var(--panel); }
.surface .list-table tbody tr:hover{ background:var(--surface); }
.list-table .lt-no{ width:64px; color:var(--brown); font-weight:600; font-size:13px; }
.list-table .lt-title{ color:var(--ink); font-weight:500; }
.list-table .lt-title:hover{ color:var(--blue); }
.list-table .lt-date{ width:120px; color:var(--ink-soft); font-size:13px; text-align:right; }

.pagination{ display:flex; gap:4px; justify-content:center; margin-top:30px; }
.pagination a{
  min-width:38px; height:38px; padding:0 8px;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:500; color:var(--ink-soft);
  background:var(--panel); transition:background var(--ease),color var(--ease);
}
.surface .pagination a{ background:var(--bg); }
.pagination a:hover{ background:var(--panel-deep); color:var(--ink); }
.pagination a.current{ background:var(--blue-dk); color:var(--on-dark); }

/* ─── 17. FAQ ───────────────────────────────────────────────── */
.faq{ width:100%; }
.faq details{ background:var(--bg); box-shadow:0 1px 2px rgba(30,35,40,.06); }
.faq details + details{ margin-top:2px; }
.faq summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; gap:14px;
  padding:22px 26px; font-size:15px; font-weight:500; color:var(--ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .q-badge{ display:none; }
.faq summary .q-text{ flex:1; line-height:1.55; padding-top:1px; font-size:16px; font-weight:500; }
.faq summary .q-toggle{ flex-shrink:0; position:relative; width:14px; height:14px; margin-top:5px; }
.faq summary .q-toggle::before,
.faq summary .q-toggle::after{ content:''; position:absolute; background:var(--brown); transition:transform var(--ease); }
.faq summary .q-toggle::before{ top:6px; left:0; width:14px; height:2px; }
.faq summary .q-toggle::after{ top:0; left:6px; width:2px; height:14px; }
.faq details[open] summary .q-toggle::after{ transform:scaleY(0); }
.faq details[open]{ background:var(--bg); box-shadow:var(--shadow-pop); position:relative; }
.faq details[open]::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--brown); }
.faq .faq-answer{ padding:4px 26px 26px 26px; font-size:14px; color:var(--ink-soft); line-height:1.8; }

/* ─── 18. TABS ──────────────────────────────────────────────── */
.tabs .tab-input{ display:none; }
.tab-bar{ display:flex; overflow-x:auto; background:var(--panel); scrollbar-width:none; }
/* tab 컬러는 모든 섹션에서 동일 — 선택=밝음(bg), 비선택=어둠(panel) */
.tab-bar::-webkit-scrollbar{ display:none; }
.tab-bar label{
  flex:0 0 auto; padding:16px 26px;
  font-size:14px; font-weight:500; color:var(--ink-soft);
  white-space:nowrap; cursor:pointer;
  box-shadow:inset 0 -2px 0 transparent;
  transition:color var(--ease),box-shadow var(--ease),background var(--ease);
}
.tab-bar label:hover{ color:var(--ink); }
.tab-panel{ display:none; padding:34px 30px; background:var(--bg); }
.tab-panel h3{ font-size:19px; margin-bottom:10px; }
.tab-panel p{ font-size:14px; color:var(--ink-soft); line-height:1.8; }
#tab1:checked ~ .tab-bar label[for=tab1],
#tab2:checked ~ .tab-bar label[for=tab2],
#tab3:checked ~ .tab-bar label[for=tab3]{
  color:var(--blue); background:var(--bg);
  box-shadow:inset 0 -2px 0 var(--blue);
}
/* surface 변형 제거 — 선택 탭은 항상 bg(흰색)으로 가장 밝게 */
#tab1:checked ~ .tab-panels .tab-panel:nth-child(1),
#tab2:checked ~ .tab-panels .tab-panel:nth-child(2),
#tab3:checked ~ .tab-panels .tab-panel:nth-child(3){ display:block; }

/* ─── 19. SWITCH ────────────────────────────────────────────── */
.switch{ display:inline-flex; align-items:center; gap:12px; cursor:pointer; }
.switch input{ display:none; }
.switch .track{
  width:46px; height:26px; background:var(--panel-deep);
  border-radius:13px; position:relative; transition:background var(--ease);
}
.switch .track::after{
  content:''; position:absolute; top:3px; left:3px;
  width:20px; height:20px; background:var(--bg); border-radius:50%;
  box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform var(--ease);
}
.switch input:checked + .track{ background:var(--blue); }
.switch input:checked + .track::after{ transform:translateX(20px); }
.switch .switch-label{ font-size:14px; color:var(--ink); }

/* ─── 20. 채팅 UI ───────────────────────────────────────────── */
.chat-window{ max-width:420px; background:var(--panel); overflow:hidden; }
.surface .chat-window{ background:var(--bg); }
.chat-head{ display:flex; align-items:center; gap:12px; padding:16px 20px; background:var(--dark); color:var(--on-dark); }
.chat-head .avatar{
  width:36px; height:36px; border-radius:50%;
  background:var(--blue-dk); display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:600;
}
.chat-head .chat-name{ font-size:14px; font-weight:500; }
.chat-head .chat-status{ font-size:12px; color:var(--on-dark-soft); }
.chat-body{ padding:22px 20px; display:flex; flex-direction:column; gap:14px; }
.bubble{ max-width:78%; padding:12px 16px; font-size:13px; line-height:1.65; }
.bubble.them{ align-self:flex-start; background:var(--bg); border-radius:2px 14px 14px 14px; }
.surface .bubble.them{ background:var(--panel); }
.bubble.me{ align-self:flex-end; background:var(--blue-dk); color:var(--on-dark); border-radius:14px 2px 14px 14px; }
.chat-time{ font-size:12px; color:var(--brown); margin-top:3px; }
.chat-input-row{ display:flex; gap:8px; padding:14px 16px; background:var(--panel-deep); }
.chat-input-row input{ flex:1; background:var(--bg); padding:11px 14px; font-size:13px; }
.chat-input-row button{ background:var(--blue-dk); color:var(--on-dark); padding:0 18px; font-size:13px; font-weight:500; }

/* ─── 21. 가격표 ────────────────────────────────────────────── */
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.price-card{ background:var(--panel); padding:36px 30px; display:flex; flex-direction:column; }
.surface .price-card{ background:var(--bg); }
.price-card.featured{ background:var(--blue-dk); color:var(--on-dark); }
.price-card .pc-name{
  font-size:13px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--brown); margin-bottom:14px;
}
.price-card.featured .pc-name{ color:var(--brown-soft); }
.price-card .pc-price{ display:flex; align-items:baseline; gap:4px; margin-bottom:6px; }
.price-card .pc-price .amount{ font-size:38px; font-weight:700; letter-spacing:-.02em; }
.price-card .pc-price .period{ font-size:14px; color:var(--ink-soft); }
.price-card.featured .pc-price .period{ color:var(--on-dark-soft); }
.price-card .pc-desc{ font-size:13px; color:var(--ink-soft); margin-bottom:24px; }
.price-card.featured .pc-desc{ color:var(--on-dark-soft); }
.price-card .pc-feats{ display:flex; flex-direction:column; gap:11px; margin-bottom:28px; flex:1; }
.price-card .pc-feats li{ display:flex; gap:10px; font-size:13px; color:var(--ink-soft); line-height:1.5; }
.price-card.featured .pc-feats li{ color:var(--on-dark-soft); }
.price-card .pc-feats li::before{
  content:''; flex-shrink:0; width:16px; height:16px; margin-top:1px;
  background:var(--blue);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8l3.5 3.5L13 5' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8l3.5 3.5L13 5' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat center/contain;
}
.price-card.featured .pc-feats li::before{ background:var(--brown-soft); }
.price-card .pc-badge{
  display:inline-block; align-self:flex-start;
  font-size:12px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--dark-2);
  background:var(--brown-soft); padding:5px 10px; margin-bottom:14px;
}

/* ─── 22. FORMS — 트루 보더리스 ─────────────────────────────── */
.field{ margin-bottom:20px; }
.field label,.form-label{
  display:block; font-size:13px; font-weight:500;
  color:var(--ink); margin-bottom:8px;
}
.input,.textarea,.select{
  width:100%; background-color:var(--surface);
  padding:13px 16px; font-size:14px; color:var(--ink);
  transition:background var(--ease);
}
.textarea{ min-height:128px; resize:vertical; line-height:1.7; }
.select{
  background-image:linear-gradient(45deg,transparent 50%,var(--brown) 50%),
                   linear-gradient(135deg,var(--brown) 50%,transparent 50%);
  background-position:calc(100% - 22px) 50%,calc(100% - 17px) 50%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
  padding-right:40px;
}
.input::placeholder,.textarea::placeholder{ color:var(--ink-soft); }
.surface .input,.surface .textarea,.surface .select{ background-color:var(--bg); }
.input:focus,.textarea:focus,.select:focus{ background-color:var(--panel); }

.choice{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; font-size:14px; }
.choice input{ display:none; }
.choice .box{
  width:20px; height:20px; flex-shrink:0;
  background:var(--panel); position:relative; transition:background var(--ease);
}
.choice .box.round{ border-radius:50%; }
.choice input:checked + .box{ background:var(--blue); }
.choice input:checked + .box::after{ content:''; position:absolute; }
.choice input:checked + .box:not(.round)::after{
  left:6px; top:2px; width:6px; height:11px;
  border-right:2px solid var(--on-dark); border-bottom:2px solid var(--on-dark); transform:rotate(45deg);
}
.choice input:checked + .box.round::after{
  left:50%; top:50%; width:8px; height:8px;
  background:var(--on-dark); border-radius:50%; transform:translate(-50%,-50%);
}

/* ─── 23. 후기 / 별점 ───────────────────────────────────────── */
.review-summary{ display:flex; align-items:center; gap:36px; background:var(--panel); padding:32px 36px; }
.surface .review-summary{ background:var(--bg); }
.rs-score{ text-align:center; }
.rs-score .score{ font-size:48px; font-weight:700; line-height:1; letter-spacing:-.03em; }
.rs-score .of{ font-size:14px; color:var(--ink-soft); }
.rs-bars{ flex:1; display:flex; flex-direction:column; gap:7px; }
.rs-bar{ display:flex; align-items:center; gap:12px; font-size:12px; color:var(--ink-soft); }
.rs-bar .bar-track{ flex:1; height:6px; background:var(--panel-deep); }
.rs-bar .bar-fill{ display:block; height:100%; background:var(--brown); }
.rs-bar .bar-fill.w82{ width:82%; }
.rs-bar .bar-fill.w13{ width:13%; }
.rs-bar .bar-fill.w4{  width:4%; }
.rs-bar .bar-fill.w1{  width:1%; }
/* 별점 — 정상 5각별 path */
.stars{ display:inline-flex; gap:3px; }
.stars i{
  width:16px; height:16px; display:block; flex-shrink:0;
  background:var(--panel-deep);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.stars i.on{ background:var(--brown); }
.review-item{ background:var(--panel); padding:24px 26px; }
.surface .review-item{ background:var(--bg); }
.review-item + .review-item{ margin-top:3px; }
.review-item .ri-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.review-item .ri-name{ font-size:14px; font-weight:500; }
.review-item .ri-date{ font-size:12px; color:var(--brown); }
.review-item .ri-text{ font-size:13px; color:var(--ink-soft); line-height:1.75; margin-top:8px; }

/* ─── 24. 박스 / 프롬프트 ───────────────────────────────────── */
.callout{ background:var(--panel); padding:30px 32px; }
.surface .callout{ background:var(--bg); }
.callout.accent{ background:var(--dark); color:var(--on-dark); }
.callout .co-label{
  font-size:12px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--brown); margin-bottom:10px;
}
.callout h3{ font-size:19px; margin-bottom:8px; }
.callout p{ font-size:14px; color:var(--ink-soft); line-height:1.8; }
.callout.accent p{ color:var(--on-dark-soft); }
.callout.accent p.co-label{ color:var(--brown-soft); }

.prompt-box{ background:var(--panel); padding:32px; }
.surface .prompt-box{ background:var(--bg); }
.prompt-box .pb-q{ font-size:19px; font-weight:600; color:var(--ink); line-height:1.5; margin-bottom:12px; }
.prompt-box .pb-q::before{ content:'“'; color:var(--brown); margin-right:2px; }
.prompt-box .pb-q::after{ content:'”'; color:var(--brown); }
.prompt-box p{ font-size:14px; color:var(--ink-soft); line-height:1.8; }

/* ─── 25. 블록쿼트 ──────────────────────────────────────────── */
.blockquote{ padding:8px 0 8px 28px; position:relative; }
.blockquote::before{ content:''; position:absolute; left:0; top:6px; bottom:6px; width:3px; background:var(--brown); }
.blockquote p{ font-size:19px; line-height:1.6; color:var(--ink); font-weight:500; margin-bottom:14px; }
.blockquote cite{ font-style:normal; font-size:13px; color:var(--brown); font-weight:500; }

/* ─── 26. 코드박스 ──────────────────────────────────────────── */
.code-box{ background:var(--dark-2); color:var(--on-dark-soft); overflow:hidden; }
.code-box .cb-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px; background:rgba(255,255,255,.05);
}
.code-box .cb-lang{ font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--brown-soft); }
.code-box .cb-copy{ font-size:12px; color:var(--on-dark-soft); }
.code-box pre{ padding:20px 18px; overflow-x:auto; font-family:var(--font-mono); font-size:13px; line-height:1.75; }
.code-box pre .ln{ color:var(--on-dark-faint); margin-right:16px; }

/* ─── 27. 리스트 ────────────────────────────────────────────── */
.list-ul li{ display:flex; gap:12px; padding:8px 0; font-size:14px; color:var(--ink-soft); line-height:1.7; }
.list-ul li::before{ content:''; flex-shrink:0; margin-top:8px; width:6px; height:6px; background:var(--blue); }
.list-ol{ counter-reset:item; }
.list-ol li{ display:flex; gap:14px; padding:8px 0; font-size:14px; color:var(--ink-soft); line-height:1.7; }
.list-ol li::before{
  counter-increment:item; content:counter(item,decimal-leading-zero);
  flex-shrink:0; width:26px; font-size:13px; font-weight:600; color:var(--brown);
}
.list-alt li{ display:flex; align-items:center; gap:18px; padding:14px 20px; font-size:14px; color:var(--ink); }
.list-alt li:nth-child(odd){ background:var(--panel); }
.list-alt li:nth-child(even){ background:var(--panel-deep); }
.surface .list-alt li:nth-child(odd){ background:var(--bg); }
.surface .list-alt li:nth-child(even){ background:var(--surface); }
.list-alt .alt-no{ font-size:16px; font-weight:700; color:var(--brown); min-width:30px; }

/* ─── 28. 이미지 그리드 ─────────────────────────────────────── */
.img-grid{ display:grid; gap:6px; }
.img-grid.col-2{ grid-template-columns:repeat(2,1fr); }
.img-grid.col-3{ grid-template-columns:repeat(3,1fr); }
.img-grid.col-4{ grid-template-columns:repeat(4,1fr); }
.img-grid.col-6{ grid-template-columns:repeat(6,1fr); }
.img-ph{
  aspect-ratio:1/1; background:var(--panel-deep);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; color:var(--ink-soft);
}
.img-ph.wide{ aspect-ratio:16/6; }
.img-text{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.img-text .it-img{ aspect-ratio:4/3; background:var(--panel-deep); overflow:hidden; }
.img-text .it-img img{ width:100%; height:100%; object-fit:cover; }
.img-text.flip .it-img{ order:2; }

/* ─── 29. 배너 / CTA ────────────────────────────────────────── */
.banner-dark{ background:var(--dark); color:var(--on-dark); }
.banner-dark .bd-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:36px; padding:52px 0;
}
.banner-dark h2{ font-size:26px; margin-bottom:8px; }
.banner-dark p{ font-size:14px; color:var(--on-dark-soft); }

.banner-image{ position:relative; overflow:hidden; background:var(--dark); color:var(--on-dark); }
.banner-image .bi-bg{ position:absolute; inset:0; }
.banner-image .bi-bg img{ width:100%; height:100%; object-fit:cover; }
.banner-image .bi-inner{ position:relative; z-index:1; padding:72px 0; }
.banner-image .eyebrow{ color:var(--on-dark); text-shadow:0 1px 10px color-mix(in srgb,var(--dark) 65%,transparent); }
.banner-image h2{ margin-bottom:12px; max-width:620px; text-shadow:0 2px 18px color-mix(in srgb,var(--dark) 75%,transparent); }
.banner-image p{ font-size:14px; color:var(--on-dark-soft); max-width:480px; margin-bottom:24px; text-shadow:0 1px 12px color-mix(in srgb,var(--dark) 65%,transparent); }

.cta-strip{
  background:var(--surface);
  display:flex; align-items:center; justify-content:space-between;
  gap:30px; padding:36px 40px;
}
.cta-strip .cta-text h3{ font-size:19px; margin-bottom:6px; }
.cta-strip .cta-text p{ font-size:13px; color:var(--ink-soft); }

.banner-final{ background:var(--blue-dk); color:var(--on-dark); text-align:center; }
.banner-final .bf-inner{ padding:96px 0; }
.banner-final h2{ margin-bottom:12px; }
.banner-final p{ font-size:16px; color:var(--on-dark-soft); margin-bottom:32px; }
.banner-final .bf-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ─── 30. 태그 / 팔레트 / 아이콘 ────────────────────────────── */
.tag{
  display:inline-block;
  font-size:12px; font-weight:600; letter-spacing:.04em;
  padding:5px 11px; background:var(--panel-deep); color:var(--ink-soft);
}
.tag.brown{ background:var(--brown); color:var(--on-dark); }
.tag.blue{ background:var(--blue-dk); color:var(--on-dark); }
.tag.dark{ background:var(--ink); color:var(--on-dark); }

.palette{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
/* 스와치는 값을 적지 않고 토큰을 그대로 칠함 — :root가 바뀌면 데모도 자동으로 따라감 */
.swatch{
  aspect-ratio:3/2; display:flex; flex-direction:column; justify-content:flex-end; padding:14px;
  box-shadow:0 1px 2px rgba(30,35,40,.08);
}
.swatch b{ font-size:12px; font-weight:600; }
.swatch span{ font-size:12px; font-family:var(--font-mono); opacity:.8; }
.swatch.s-ink{        background:var(--ink);        color:var(--on-dark); }
.swatch.s-ink-soft{   background:var(--ink-soft);   color:var(--on-dark); }
.swatch.s-blue{       background:var(--blue);       color:var(--on-dark); }
.swatch.s-blue-dk{    background:var(--blue-dk);    color:var(--on-dark); }
.swatch.s-dark{       background:var(--dark);       color:var(--on-dark); }
.swatch.s-surface{    background:var(--surface);    color:var(--ink); }
.swatch.s-panel{      background:var(--panel);      color:var(--ink); }
.swatch.s-panel-deep{ background:var(--panel-deep); color:var(--ink); }

.icon-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }
.icon-cell{
  background:var(--panel); aspect-ratio:1/1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:11px;
}
.surface .icon-cell{ background:var(--bg); }
.icon-cell .ico{ width:26px; height:26px; color:var(--blue); }
.icon-cell .ico svg{
  width:100%; height:100%; display:block;
  fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.icon-cell .ico-name{ font-size:12px; color:var(--ink-soft); }

/* ─── 31. E-E-A-T 전문가 / 문서 정보 ────────────────────────── */
.expert-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:3px; }
.expert{ display:flex; gap:22px; background:var(--panel); padding:30px; }
.surface .expert{ background:var(--bg); }
.expert .ex-photo{
  width:84px; height:84px; flex-shrink:0;
  background:var(--panel-deep);
  display:flex; align-items:center; justify-content:center;
  font-size:26px; color:var(--brown-soft);
}
.expert .ex-name{ font-size:17px; font-weight:600; margin-bottom:3px; }
.expert .ex-role{ font-size:13px; font-weight:500; color:var(--blue); margin-bottom:12px; }
.expert .ex-bio{ font-size:13px; color:var(--ink-soft); line-height:1.75; margin-bottom:14px; }
.expert .ex-creds{ display:flex; flex-wrap:wrap; gap:7px; }

.doc-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:18px;
  padding:18px 22px; background:var(--surface);
  font-size:12px; color:var(--ink-soft);
}
.surface .doc-meta{ background:var(--panel); }
.doc-meta .dm-item{ display:flex; align-items:center; gap:7px; }
.doc-meta .dm-item::before{ content:''; width:4px; height:4px; border-radius:50%; background:var(--brown); }
.doc-meta strong{ color:var(--ink); font-weight:500; }

/* ─── 32. 퀵메뉴 (반투명 플로팅) ────────────────────────────── */
.quick-menu{
  position:fixed; right:22px; top:50%;
  transform:translateY(-50%); z-index:900;
  display:flex; flex-direction:column; gap:2px;
}
.qm-btn{
  width:64px; padding:14px 6px;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  background:color-mix(in srgb,var(--dark) 55%,transparent); color:var(--on-dark);
  -webkit-backdrop-filter:saturate(140%) blur(14px); backdrop-filter:saturate(140%) blur(14px);
  transition:background var(--ease);
}
.qm-btn:hover{ background:color-mix(in srgb,var(--blue-dk) 82%,transparent); }
.qm-btn.accent{ background:color-mix(in srgb,var(--blue-dk) 62%,transparent); }
.qm-btn.accent:hover{ background:color-mix(in srgb,var(--blue-press) 85%,transparent); }
.qm-btn .qm-ico{ width:19px; height:19px; }
.qm-btn .qm-ico svg{
  width:100%; height:100%; display:block;
  fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.qm-btn .qm-text{ font-size:12px; font-weight:500; line-height:1.3; text-align:center; }
.qm-top{
  width:64px; padding:13px 6px;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb,var(--dark) 55%,transparent); color:var(--on-dark);
  -webkit-backdrop-filter:saturate(140%) blur(14px); backdrop-filter:saturate(140%) blur(14px);
  transition:background var(--ease);
}
.qm-top:hover{ background:color-mix(in srgb,var(--dark-2) 80%,transparent); }
.qm-top svg{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ─── 33. FOOTER ────────────────────────────────────────────── */
.site-footer{ background:var(--bg); box-shadow:inset 0 1px 0 var(--panel); }
.footer-flat{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:20px 40px; padding-top:64px; padding-bottom:48px;
}
.footer-meta{ display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.footer-meta .footer-legal{ justify-content:flex-end; }
/* 아래 .footer-top ~ .footer-global-inner, .footer-socials, .footer-col은 구형 4열 푸터용(다른 하위 페이지 호환) —
   index.html·elements.html은 .footer-flat만 사용 */
.footer-top{ padding:64px 0 40px; }
.footer-inner{ display:grid; grid-template-columns:1.5fr repeat(4,1fr); gap:40px; }
.footer-brand .logo{ font-size:21px; margin-bottom:16px; }
.footer-brand p{ font-size:13px; color:var(--ink-soft); line-height:1.75; max-width:420px; }
.footer-socials{ display:flex; gap:8px; }
.footer-socials a{
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); color:var(--ink-soft);
  transition:background var(--ease),color var(--ease);
}
.footer-socials a:hover{ background:var(--blue-dk); color:var(--on-dark); }
.footer-socials a svg{ width:17px; height:17px; fill:currentColor; display:block; }
.footer-col .footer-h{
  font-size:12px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink); margin-bottom:18px;
}
.footer-col ul li{ margin-bottom:2px; }
.footer-col ul li a{ font-size:14px; color:var(--ink-soft); transition:color var(--ease); }
.footer-col ul li a:hover{ color:var(--blue); }

.footer-global{ background:var(--surface); padding:16px 0; text-align:center; }
.footer-global-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.footer-legal{ display:flex; align-items:center; flex-wrap:wrap; }
.footer-legal a{ font-size:13px; color:var(--ink-soft); transition:color var(--ease); }
.footer-legal a:hover{ color:var(--blue); }
.footer-legal .pipe{ color:var(--brown-soft); margin:0 14px; font-size:12px; }
.footer-copy{ font-size:13px; color:var(--ink-soft); line-height:1.6; }

/* ─── 34. ELEMENTS 쇼케이스 헬퍼 ────────────────────────────── */
.demo{ margin-bottom:48px; }
.demo:last-child{ margin-bottom:0; }
.demo-label{ display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:16px; }
.demo-label .sub{ font-weight:400; color:var(--brown); margin-left:8px; }
.demo-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.demo-split{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:48px; }
.demo-split:last-child{ margin-bottom:0; }
.demo-split > .demo{ margin-bottom:0; }
.spec-note{ font-size:13px; color:var(--ink-soft); margin-top:14px; line-height:1.7; }
.type-row{ display:flex; align-items:baseline; gap:20px; padding:14px 0; }
.type-row .t-meta{ font-size:12px; color:var(--brown); font-weight:500; min-width:120px; }
.type-row .t-sample{ color:var(--ink); }
.t-h1{ font-size:42px; font-weight:600; letter-spacing:-.025em; }
.t-h2{ font-size:32px; font-weight:600; letter-spacing:-.02em; }
.t-h3{ font-size:22px; font-weight:600; letter-spacing:-.012em; }
.t-h4{ font-size:18px; font-weight:600; }
.t-h5{ font-size:16px; font-weight:600; }
.t-h6{ font-size:13px; font-weight:600; }
.t-body{ font-size:15px; }

/* ─── 35. CHARTS — 그래프 (Chart.js 연동, 트루 보더리스) ──────── */
.chart-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.chart-grid.single{ grid-template-columns:1fr; }
.chart-card{ background:var(--panel); padding:30px 30px 26px; min-width:0; }
.surface .chart-card{ background:var(--bg); }
.chart-head{ margin-bottom:24px; }
.chart-head .chart-kicker{
  display:block; font-size:13px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--brown); margin-bottom:11px;
}
.chart-title{ font-size:18px; font-weight:600; color:var(--ink); letter-spacing:-.012em; }
.chart-sub{ font-size:13px; color:var(--ink-soft); margin-top:6px; line-height:1.65; }
.chart-box{ position:relative; width:100%; height:300px; }
.chart-box.tall{ height:360px; }
.chart-box.compact{ height:260px; }
.chart-note{ font-size:12px; color:var(--ink-soft); margin-top:20px; line-height:1.65; }
.chart-note strong{ color:var(--brown); font-weight:600; }

/* ─── 36. RESPONSIVE ────────────────────────────────────────── */
@media (max-width:1180px){
  :root{ --pad:30px; }
  .hero-split-text :is(h1,.hero-title){ font-size:42px; }
  .footer-inner{ grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
  .footer-brand{ grid-column:1/-1; }
  .footer-brand p{ max-width:none; }
  .insights-feature{ grid-template-columns:1fr; gap:24px; }
  .svc-row{ grid-template-columns:72px 1fr; }
  .svc-row .sr-keys{ grid-column:2; }
}
@media (max-width:1024px){
  .hamburger{ display:flex; }
  /* 데스크탑 GNB를 그대로 모바일 패널로 재사용 — 별도 모바일 전용 마크업 없음.
     .site-header가 fixed+backdrop-filter라 position:fixed 자손은 갇히므로,
     .gnb는 absolute로 헤더 바로 아래에 앵커링(체크 상태여도 1024px 넘어가면
     자동으로 닫히도록 이 미디어쿼리 안에 가둬둠). */
  .gnb{
    display:none; position:absolute; top:100%; right:16px;
    flex-direction:column; align-items:stretch;
    width:min(300px, calc(100vw - 32px)); margin-left:0;
    max-height:calc(100vh - var(--hd) - 16px); max-height:calc(100dvh - var(--hd) - 16px);
    background:var(--bg); box-shadow:var(--shadow-lift);
    overflow-y:auto; overflow-x:hidden;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
    padding:0;
  }
  .nav-toggle:checked ~ .site-header .gnb{ display:flex; }
  /* 메뉴 뒤 화면을 딤 처리 — 헤더의 fixed+backdrop-filter가 만드는 containing block
     밖에서 진짜 뷰포트 기준 fixed로 덮어야 하므로 헤더의 형제 요소로 존재.
     같은 체크박스에 연결된 label이라 바깥을 탭하면 메뉴가 닫힘(Zero-JS). */
  .nav-toggle:checked ~ .nav-scrim{
    display:block; position:fixed; inset:var(--hd) 0 0 0; z-index:998;
    background:color-mix(in srgb,var(--dark) 45%,transparent);
  }
  .gnb-list{ display:block; }
  .gnb-item + .gnb-item{ box-shadow:inset 0 1px 0 var(--panel); }
  .gnb-item > a{ height:auto; padding:14px 22px; font-size:14px; box-shadow:none; }
  .gnb-item:hover > a{ box-shadow:none; color:var(--ink); }
  .gnb-item > a .caret{ display:none; }
  .gnb-sub{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; padding:0 0 4px; min-width:0; background:none;
  }
  .gnb-sub a{ padding:9px 22px 9px 34px; }
  /* CTA도 다른 행과 같은 padding 규칙을 그대로 써서 상/하단이 구조적으로 대칭됨
     (컨테이너 여백 숫자를 맞추는 방식이 아니라, 행 자체를 통일) */
  .gnb-util{ display:block; margin-left:0; box-shadow:inset 0 1px 0 var(--panel); }
  .gnb-util .util-cta{
    display:block; width:100%; padding:14px 22px;
    color:var(--blue); font-size:14px; font-weight:600; box-shadow:none;
  }
  .gnb-util .util-cta:hover{ color:var(--blue-dk); box-shadow:none; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .metrics-grid{ grid-template-columns:repeat(2,1fr); gap:40px 28px; }
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
  .expert-grid{ grid-template-columns:1fr; }
  .hero-split-inner{ flex-direction:column; }
  .hero-split-text{ padding:64px 0 40px; }
  .hero-split-media{
    height:320px;
    margin-left:calc(var(--pad) * -1); margin-right:calc(var(--pad) * -1);
    width:calc(100% + var(--pad) * 2);
  }
}
@media (max-width:768px){
  :root{ --pad:20px; --hd:54px; }
  .breadcrumb ol{ justify-content:flex-start; }
  .logo{ font-size:20px; }
  h1{ font-size:30px; }
  h2{ font-size:25px; }
  h3{ font-size:20px; }
  .section{ padding:68px 0; }
  .section.tight{ padding:52px 0; }
  .section-head{ margin-bottom:38px; text-align:center; margin-left:auto; margin-right:auto; }
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .chart-grid{ grid-template-columns:1fr; gap:20px; }
  .chart-card{ padding:22px 18px 18px; }
  .chart-box{ height:240px; min-height:200px; }
  .chart-box.tall{ height:280px; }
  .chart-box.compact{ height:220px; }
  .demo-split{ grid-template-columns:1fr; gap:40px; }
  .demo-label .sub{ display:block; margin:4px 0 0; }
  .palette{ grid-template-columns:repeat(2,1fr); }
  .type-row{ flex-direction:column; gap:4px; padding:12px 0; }
  .t-h1{ font-size:30px; } .t-h2{ font-size:25px; } .t-h3{ font-size:20px; }
  .grid-2.split{ gap:32px; }
  .hero-split-text{ padding:48px 0 32px; }
  .hero-split-text :is(h1,.hero-title){ font-size:32px; }
  .hero-split-media{ height:240px; }
  .hero-title{ font-size:30px; }
  .hero-text{ padding:64px var(--pad); }
  .hero-image,.hero-video,.hero-slider .slide{ min-height:400px; }
  .hero-slider .slide h2{ font-size:25px; }
  .hero-cta{ padding:64px var(--pad); }
  .hero-cta .hero-title{ font-size:26px; }
  .brief-grid{ grid-template-columns:1fr; }
  .brief-cell:not(:last-child){ box-shadow:inset 0 -1px 0 var(--panel-deep); }
  .manifesto{ padding:64px 0; }
  .manifesto .m-text{ font-size:23px; }
  .svc-row{ grid-template-columns:1fr; gap:14px; padding:30px 24px; }
  .svc-row .sr-no{ font-size:26px; }
  .metrics-grid{ grid-template-columns:1fr 1fr; }
  .metric .m-fig{ font-size:48px; }
  .stat-cell{ padding:40px 16px; }
  .stat-fig .num{ font-size:40px; }
  .stat-fig .unit{ font-size:18px; }
  .process-h{ grid-template-columns:1fr; }
  .pv-step{ gap:18px; padding:22px 20px; }
  .process-flow{ grid-template-columns:1fr; }
  .process-flow .pf-step{ padding:0 0 28px 38px; }
  .process-flow .pf-step:last-child{ padding-bottom:0; }
  .process-flow .pf-step::before{ left:7px; top:7px; right:auto; width:2px; height:100%; }
  .process-flow .pf-dot{ top:1px; }
  .process-flow .pf-no{ font-size:34px; margin-bottom:6px; }
  .price-grid{ grid-template-columns:1fr; }
  .img-text,.img-text.flip{ grid-template-columns:1fr; gap:24px; }
  .img-text.flip .it-img{ order:0; }
  .img-grid.col-4,.img-grid.col-6{ grid-template-columns:repeat(2,1fr); }
  .timeline .tl-year{ width:46px; font-size:15px; }
  .banner-dark .bd-inner{ flex-direction:column; align-items:flex-start; gap:20px; }
  .banner-dark h2{ font-size:22px; }
  .banner-image .bi-inner{ padding:56px 0; }
  .banner-final .bf-inner{ padding:64px 0; }
  .cta-strip{ flex-direction:column; align-items:flex-start; gap:18px; padding:28px 24px; }
  .callout,.prompt-box{ padding:24px 22px; }
  .tab-panel{ padding:26px 20px; }
  .data-table th,.data-table td{ padding:13px 14px; white-space:nowrap; }
  .list-table td{ padding:14px 12px; }
  .list-table .lt-no{ width:48px; }
  .list-table .lt-date{ width:96px; }
  .review-summary{ flex-direction:column; gap:24px; align-items:flex-start; padding:26px 22px; }
  .rs-bars{ width:100%; }
  .expert{ padding:24px 22px; }
  .quick-menu{ display:none; }
  .footer-inner{ grid-template-columns:1fr 1fr; gap:30px 24px; text-align:center; }
  .footer-brand{ text-align:center; }
  .footer-brand p{ margin-left:auto; margin-right:auto; }
  .footer-socials{ justify-content:center; }
  .footer-global-inner{ flex-direction:column; gap:14px; text-align:center; }
  .footer-legal{ justify-content:center; gap:6px 18px; }
  .footer-flat{ flex-direction:column; align-items:center; text-align:center; gap:24px; padding-top:48px; padding-bottom:32px; }
  .footer-flat .footer-brand{ text-align:left; align-self:flex-start; }
  .footer-flat .footer-brand p{ margin-left:0; margin-right:0; }
  .footer-meta{ align-items:center; }
  .footer-meta .footer-legal{ justify-content:center; }
  .footer-legal .pipe{ display:none; }
  .faq summary{ padding:18px; font-size:14px; }
  .faq .faq-answer{ padding:2px 18px 20px 18px; }
  .metric .m-fig{ justify-content:center; }
  .metric{ text-align:center; }
}
@media (max-width:480px){
  h1{ font-size:27px; }
  .hero-split-text :is(h1,.hero-title){ font-size:27px; }
  .hero-split-media{ height:200px; }
  .hero-title{ font-size:26px; }
  .metrics-grid{ grid-template-columns:1fr; }
  .stat-grid{ grid-template-columns:1fr; }
  .img-grid.col-3,.img-grid.col-4,.img-grid.col-6{ grid-template-columns:repeat(2,1fr); }
  .icon-grid{ grid-template-columns:repeat(3,1fr); }
  .expert{ flex-direction:column; }
}