/* ============================================================
   STRATEGOS — GEO · SEO · AEO 전략 컨설팅
   style.css
   콘셉트 : J.P. Morgan Global 참조 — Editorial Institutional
   원칙   : 트루 보더리스 · Zero-JS · 화이트 베이스 · 플랫
   ============================================================ */

/* ─── 01. DESIGN TOKENS ─────────────────────────────────────── */
:root{
  /* 면 — 화이트 베이스, 경계는 배경 대비로만 */
  --bg:          #ffffff;
  --surface:     #eef2f4;   /* 섹션 교차 밴드 — 화이트와 대비 강화 */
  --panel:       #e6eaed;   /* 화이트 위 엘레먼츠 */
  --panel-deep:  #dce1e5;   /* 인풋 채움 · 깊은 영역 */
  --dark:        #1d3a47;   /* 다크 밴드 — 차가운 네이비-틸 계열 */
  --dark-2:      #162d38;   /* 더 깊은 다크 */
  --dark-soft:   #2c4d5c;   /* 다크 위 분할 셀 */

  /* 잉크 */
  --ink:         #213038;   /* 본문 · 제목 · 메뉴 */
  --ink-soft:    #5c656d;   /* 보조 문단 */
  /* 시그니처 액센트 — 기존 brown 자리를 밝은 블루가 승계 (변수명 유지, 값만 전환) */
  --brown:       #0f7593;   /* 흐린 텍스트 · 라벨 · 시그니처 액센트 → 밝은 블루 (흰배경 AA) */
  --brown-soft:  #6fc5dc;   /* 다크 배경 위 액센트 → 밝은 하늘블루 */

  /* 포인트 */
  --blue:        #0f7593;   /* 주 색상 — 밝은 블루 (강조·텍스트) */
  --blue-dk:     #0a5f7a;   /* 버튼 면 · 호버 · 헤더 (흰글자 AA) */
  --blue-press:  #084a5f;   /* 누른 상태 */

  /* 다크 위 텍스트 */
  --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;

  --font: 'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,
          'Apple SD Gothic Neo','Malgun Gothic','맑은 고딕',sans-serif;

  --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:#fff; }

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

.eyebrow{
  display:inline-block;
  font-size:12px; font-weight:700;
  letter-spacing:.16em; 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:#ffffff;
  -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:800;
  letter-spacing:-.022em; color:var(--ink);
  white-space:nowrap; flex-shrink:0;
}
.logo .mark{ color:var(--brown); }

.gnb{ display:flex; 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{
  background:var(--blue-dk); color:#fff;
  padding:11px 20px; font-size:13px; font-weight:600;
  transition:background var(--ease);
}
.gnb-util .util-cta:hover{ background:var(--blue-press); color:#fff; }

.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); }

/* ─── 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 (elements.html 전용) ───────────────────── */
.breadcrumb{ padding:22px 0; background:var(--surface); }
.breadcrumb ol{ display:flex; flex-wrap:wrap; align-items:center; }
.breadcrumb li{ display:flex; align-items:center; font-size:13px; }
.breadcrumb li:not(:last-child)::after{
  content:''; display:inline-block;
  width:5px; height:5px; margin:0 12px;
  border-right:1.4px solid var(--brown);
  border-top:1.4px solid var(--brown);
  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); font-weight:600; }

/* ─── 08. BUTTONS ───────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-size:14px; font-weight:600; 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:#fff; }
.btn-primary:hover{ background:var(--blue-press); }
.btn-secondary{ background:var(--blue-dk); color:#fff; }
.btn-secondary:hover{ background:var(--blue-press); }
.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:#fff; }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:var(--dark-2); }
.btn-on-dark{ background:#fff; color:var(--blue); }
.btn-on-dark:hover{ background:var(--surface); }
.btn-on-dark-line{ background:transparent; color:#fff; 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:600; color:var(--blue);
}
.arrow-link::after{
  content:''; width:15px; height:9px; flex-shrink:0;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cpath d='M0 4.5h12M8.5 1l3.5 3.5L8.5 8' fill='none' stroke='black' stroke-width='1.5'/%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 15 9'%3E%3Cpath d='M0 4.5h12M8.5 1l3.5 3.5L8.5 8' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center/contain;
  transition:transform var(--ease);
}
.arrow-link:hover::after{ transform:translateX(4px); }

/* ─── 09. HERO — 홈 (풀블리드 편집형) ───────────────────────── */
.hero-home{
  position:relative; min-height:660px;
  display:flex; align-items:center;
  background:var(--dark); color:var(--on-dark);
  overflow:hidden;
}
.hero-home .hero-media{ position:absolute; inset:0; }
.hero-home .hero-media img{ width:100%; height:100%; object-fit:cover; opacity:.55; }
.hero-home .hero-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(95deg,
    rgba(20,45,56,.88) 0%, rgba(20,45,56,.55) 52%, rgba(20,45,56,.18) 100%);
}
.hero-home .hero-content{ position:relative; z-index:1; padding:128px 0; max-width:780px; }
.hero-home .eyebrow{ color:var(--brown-soft); }
.hero-home h1{ font-size:62px; line-height:1.14; letter-spacing:-.035em; margin-bottom:26px; }
.hero-home .hero-desc{
  font-size:18px; color:var(--on-dark-soft);
  line-height:1.78; max-width:560px; margin-bottom:38px;
}
.hero-home .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* 히어로 하단 — 핵심 지표 인라인 바 */
.hero-home .hero-facts{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  background:rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.hero-facts-inner{ display:flex; }
.hero-fact{ flex:1; padding:22px 30px; }
.hero-fact:first-child{ padding-left:0; }
.hero-fact + .hero-fact{ box-shadow:inset 1px 0 0 rgba(255,255,255,.14); }
.hero-fact .hf-num{ font-size:25px; font-weight:800; letter-spacing:-.02em; color:#fff; }
.hero-fact .hf-num .u{ color:var(--brown-soft); font-size:15px; margin-left:1px; }
.hero-fact .hf-label{ font-size:12px; color:var(--on-dark-soft); margin-top:3px; }

/* 라이브러리 히어로 5종 (elements.html) */
.hero-title{ font-size:44px; font-weight:700; 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; opacity:.4; }
.hero-image .hero-bg::after,.hero-video .hero-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(95deg, rgba(20,45,56,.86), rgba(20,45,56,.4));
}
.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; }
.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; }
.hero-image .eyebrow,.hero-video .eyebrow{ color:var(--brown-soft); }
.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 #fff;
  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; opacity:.4; }
.hero-slider .slide .slide-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(95deg, rgba(20,45,56,.86), rgba(20,45,56,.4));
}
.hero-slider .slide .slide-inner{ position:relative; z-index:1; }
.hero-slider .slide h2{ font-size:34px; margin-bottom:12px; max-width:560px; }
.hero-slider .slide p{ color:var(--on-dark-soft); max-width:480px; }
#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:#fff; }

.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; }
.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:700; 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:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brown); margin-bottom:30px;
}
.manifesto .m-text{
  font-size:34px; font-weight:700; 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:800; 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:600; 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:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--brown); margin-bottom:12px;
}
.svc-card h4{ 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:800; color:var(--ink);
  letter-spacing:-.04em; line-height:1;
}
.metric .m-fig .u{ font-size:30px; font-weight:700; color:var(--brown); margin-left:5px; }
.metric .m-name{ font-size:15px; font-weight:600; color:var(--ink); margin-top:16px; }
.metric .m-desc{ font-size:13px; color:var(--ink-soft); margin-top:4px; line-height:1.6; }

/* 통계 밴드 (라이브러리) */
.stat-band{ background:var(--dark); }
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.07); }
.stat-cell{ background:var(--dark); padding:54px 30px; text-align:center; }
.stat-fig{ display:flex; align-items:baseline; justify-content:center; color:#fff; line-height:1; margin-bottom:14px; }
.stat-fig .num{ font-size:52px; font-weight:800; letter-spacing:-.03em; }
.stat-fig .unit{ font-size:22px; font-weight:700; 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:700; 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:600;
  letter-spacing:.03em; margin-bottom:10px;
}
.insight-card .ic-meta .dot{ width:3px; height:3px; background:var(--brown); border-radius:50%; }
.insight-card h4{ font-size:16px; line-height:1.5; margin-bottom:8px; }
.insight-card:hover h4{ 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:600; 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:700; 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:800; color:var(--brown);
  letter-spacing:-.03em; line-height:1; margin-bottom:20px;
}
.ph-step h5{ 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:800;
  color:var(--brown); letter-spacing:-.03em;
  line-height:1; min-width:50px; padding-top:2px;
}
.pv-step h5{ 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:800; 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 h5{ 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:800; line-height:1;
  letter-spacing:-.04em; color:var(--blue); margin-bottom:14px;
}
.pf-title{ font-size:17px; font-weight:700; 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:600; 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:600; }

.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:700; 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:600; 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:#fff; }

/* ─── 17. FAQ ───────────────────────────────────────────────── */
.faq{ width:100%; }
.faq details{ background:var(--panel); }
.surface .faq details{ background:var(--bg); }
.faq details + details{ margin-top:3px; }
.faq summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; gap:14px;
  padding:22px 26px; font-size:15px; font-weight:600; 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:600; }
.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(--surface); position:relative; }
.faq details[open]::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--brown); }
.surface .faq details[open]{ background:var(--panel); }
.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:600; 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 h4{ 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:#fff; 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:#fff; }
.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:700;
}
.chat-head .chat-name{ font-size:14px; font-weight:600; }
.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:#fff; 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:#fff; padding:0 18px; font-size:13px; font-weight:600; }

/* ─── 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:700; 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:800; 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:700; letter-spacing:.08em;
  text-transform:uppercase; color:#fff;
  background:var(--brown); padding:5px 10px; margin-bottom:14px;
}

/* ─── 22. FORMS — 트루 보더리스 ─────────────────────────────── */
.field{ margin-bottom:20px; }
.field label,.form-label{
  display:block; font-size:13px; font-weight:600;
  color:var(--ink); margin-bottom:8px;
}
.input,.textarea,.select{
  width:100%; background: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:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23936846' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; background-size:11px;
  padding-right:40px;
}
.input::placeholder,.textarea::placeholder{ color:#9aa0a6; }
.input:focus,.textarea:focus,.select:focus{ background: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 #fff; border-bottom:2px solid #fff; transform:rotate(45deg);
}
.choice input:checked + .box.round::after{
  left:50%; top:50%; width:8px; height:8px;
  background:#fff; 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:800; 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{ 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:600; }
.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:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--brown); margin-bottom:10px;
}
.callout.accent .co-label{ color:var(--brown-soft); }
.callout h4{ margin-bottom:8px; }
.callout p{ font-size:14px; color:var(--ink-soft); line-height:1.8; }
.callout.accent p{ color:var(--on-dark-soft); }

.prompt-box{ background:var(--panel); padding:32px; }
.surface .prompt-box{ background:var(--bg); }
.prompt-box .pb-q{ font-size:19px; font-weight:700; 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:600; }

/* ─── 26. 코드박스 ──────────────────────────────────────────── */
.code-box{ background:var(--dark-2); color:#e6e9eb; 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:700; 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); font-size:13px; line-height:1.75; }
.code-box pre .ln{ color:rgba(255,255,255,.3); 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:700; 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:800; 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:#9aa0a6;
}
.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 h3{ 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; opacity:.5; }
.banner-image .bi-bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(95deg,rgba(20,45,56,.8),rgba(20,45,56,.34)); }
.banner-image .bi-inner{ position:relative; z-index:1; padding:72px 0; }
.banner-image h3{ margin-bottom:10px; max-width:560px; }
.banner-image p{ font-size:14px; color:var(--on-dark-soft); max-width:480px; margin-bottom:24px; }

.cta-strip{
  background:var(--surface);
  display:flex; align-items:center; justify-content:space-between;
  gap:30px; padding:36px 40px;
}
.cta-strip .cta-text h4{ margin-bottom:5px; }
.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:700; letter-spacing:.04em;
  padding:5px 11px; background:var(--panel-deep); color:var(--ink-soft);
}
.tag.brown{ background:var(--brown); color:#fff; }
.tag.blue{ background:var(--blue-dk); color:#fff; }
.tag.dark{ background:var(--ink); color:#fff; }

.palette{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.swatch{ aspect-ratio:3/2; display:flex; flex-direction:column; justify-content:flex-end; padding:14px; }
.swatch b{ font-size:12px; font-weight:700; }
.swatch span{ font-size:12px; font-family:monospace; opacity:.8; }
.swatch.s-ink{        background:#213038; color:#fff; }
.swatch.s-dark2{      background:#162d38; color:#fff; }
.swatch.s-brown{      background:#1a8fb3; color:#fff; }
.swatch.s-blue{       background:#1a8fb3; color:#fff; }
.swatch.s-blue-dk{    background:#0a5f7a; color:#fff; }
.swatch.s-surface{    background:#eef2f4; color:#213038; }
.swatch.s-panel{      background:#e6eaed; color:#213038; }
.swatch.s-panel-deep{ background:#dce1e5; color:#213038; }

.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:#a8aeb3;
}
.expert .ex-name{ font-size:17px; font-weight:700; margin-bottom:3px; }
.expert .ex-role{ font-size:13px; font-weight:600; 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:600; }

/* ─── 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:rgba(38,43,48,.55); color:#fff;
  -webkit-backdrop-filter:saturate(140%) blur(14px); backdrop-filter:saturate(140%) blur(14px);
  transition:background var(--ease);
}
.qm-btn:hover{ background:rgba(0,80,117,.78); }
.qm-btn.accent{ background:rgba(0,80,117,.6); }
.qm-btn.accent:hover{ background:rgba(0,58,84,.82); }
.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:600; line-height:1.3; text-align:center; }
.qm-top{
  width:64px; padding:13px 6px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(35,39,44,.55); color:#fff;
  -webkit-backdrop-filter:saturate(140%) blur(14px); backdrop-filter:saturate(140%) blur(14px);
  transition:background var(--ease);
}
.qm-top:hover{ background:rgba(26,30,34,.8); }
.qm-top svg{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ─── 33. FOOTER ────────────────────────────────────────────── */
.site-footer{ background:var(--bg); }
.footer-top{ padding:76px 0 58px; }
.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:252px; margin-bottom:22px; }
.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:#fff; }
.footer-socials a svg{ width:17px; height:17px; fill:currentColor; display:block; }
.footer-col .footer-h{
  font-size:12px; font-weight:700; 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:22px 0; }
.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:#c4ccd0; 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:700; 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; }
.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:600; min-width:120px; }
.type-row .t-sample{ color:var(--ink); }
.t-h1{ font-size:42px; font-weight:700; letter-spacing:-.025em; }
.t-h2{ font-size:32px; font-weight:700; letter-spacing:-.02em; }
.t-h3{ font-size:22px; font-weight:700; letter-spacing:-.012em; }
.t-h4{ font-size:18px; font-weight:700; }
.t-h5{ font-size:16px; font-weight:700; }
.t-h6{ font-size:13px; font-weight:700; }
.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:12px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--brown); margin-bottom:11px;
}
.chart-title{ font-size:18px; font-weight:700; 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:700; }

/* ─── 36. RESPONSIVE ────────────────────────────────────────── */
@media (max-width:1180px){
  :root{ --pad:30px; }
  .hero-home h1{ font-size:50px; }
  .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; }

  /* PC 메뉴(.gnb)를 그대로 모바일 패널로 사용 — 별도 모바일 메뉴 없음 */
  .gnb{
    position:fixed; top:var(--hd); left:0; right:0; bottom:0;
    margin-left:0; display:none;
    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 96px;
  }
  .nav-toggle:checked ~ .site-header .gnb{ display:block; }
  .gnb-list{ flex-direction:column; }
  .gnb-item > a{ height:auto; padding:15px 24px; justify-content:space-between; box-shadow:none; }
  .gnb-item:hover > a{ color:var(--ink); box-shadow:none; }
  .gnb-item > a:active{ background:var(--surface); }
  /* About 서브 — hover 대신 항상 펼침 */
  .gnb-sub{
    position:static; opacity:1; visibility:visible; transform:none;
    min-width:0; box-shadow:none; padding:2px 0 6px;
  }
  .gnb-sub a{ padding:11px 24px 11px 40px; font-size:14px; }
  /* Coworker CTA — 하단 고정 바 */
  .gnb-util{
    position:fixed; left:0; right:0; bottom:0; margin-left:0;
    display:none; gap:0; z-index:1000;
    padding:14px 24px calc(14px + env(safe-area-inset-bottom));
    background:var(--bg); box-shadow:0 -1px 0 var(--panel);
  }
  .nav-toggle:checked ~ .site-header .gnb-util{ display:flex; }
  .gnb-util .util-cta{ width:100%; text-align:center; padding:14px 20px; }
  .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-home{ flex-direction:column; align-items:stretch; }
  .hero-home .hero-facts{ position:static; }
}
@media (max-width:768px){
  :root{ --pad:20px; --hd:54px; }
  .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; }
  .grid-2.split{ gap:32px; }
  .hero-home{ min-height:0; }
  .hero-home .hero-content{ padding:84px 0 56px; }
  .hero-home h1{ font-size:34px; }
  .hero-facts-inner{ flex-direction:column; }
  .hero-fact,.hero-fact:first-child{ padding:16px 0; }
  .hero-fact + .hero-fact{ box-shadow:inset 0 1px 0 rgba(255,255,255,.12); }
  .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; }
  .process-h{ grid-template-columns:1fr; }
  .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; }
  .cta-strip{ flex-direction:column; align-items:flex-start; gap:18px; }
  .review-summary{ flex-direction:column; gap:24px; align-items:flex-start; }
  .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; }
  .faq summary{ padding:18px; font-size:14px; }
  .faq .faq-answer{ padding:2px 18px 20px 54px; }
  .metric .m-fig{ justify-content:center; }
  .metric{ text-align:center; }
}
@media (max-width:480px){
  h1{ font-size:27px; }
  .hero-home h1{ font-size:29px; }
  .metrics-grid{ grid-template-columns:1fr; }
  .stat-grid{ grid-template-columns:1fr; }
  .img-grid.col-3,.img-grid.col-4,.img-grid.col-6,.icon-grid,.palette{ grid-template-columns:repeat(2,1fr); }
  .expert{ flex-direction:column; }
  .footer-legal .pipe{ margin:0 9px; }
}