/* the MAGNET — 회사 홈페이지 공통 디자인 시스템
   에디토리얼 프리미엄 톤: 따뜻한 크림 배경 + 그린 포인트 컬러 + 카드형 섹션 + 우측 플로팅 CTA
   (AITOOL 제품의 다크/네온 톤과는 별개의 브랜드 — 절대 혼용 금지) */

:root {
  --header-green: #00704a;
  --green-deep: #0f3d2e;
  --green: #1a5c43;
  --green-mid: #237a56;
  --green-bright: #2f9e6f;
  --green-soft: #e6f3ec;
  /* 웜그린(footer-green) 배경 위에서 4.5:1 이상 대비를 만족하는 그린 포인트 — 데이터/넘버링 모티프 전용 */
  --green-mint: #5fc79a;
  --footer-green: #0f2a1f;
  --navy: #16273f;
  --navy-deep: #0d1a2b;
  --ink: #282828;
  --gray: #6b6b6b;
  --gray-light: #999999;
  --line: #e2e8e4;
  --paper: #ffffff;
  --cream: #faf8f2;
  --paper-2: #f3efe4;

  --sans: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Nanum Gothic', 'Noto Sans', sans-serif;

  --container: 1400px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 14px;

  /* ---------- 헤더/푸터/드로어/홈 전용 토큰 ----------
     2026-08 개정: 이 --hf-* 변수들은 이제 값을 직접 갖지 않고 전부 --ds-*(브랜드 디자인
     시스템 v1.0) 토큰을 참조한다 — 서브페이지 롤아웃 때 만든 시스템에 헤더/드로어/푸터/홈도
     편입시키는 것이라 새 토큰을 또 만들지 않고 --ds-* 값을 그대로 재매핑한다. 이름은 유지
     (다른 곳에서 --hf-* 이름으로 참조 중이라 변수명 자체를 지우면 깨짐), 값만 --ds-*로 위임.
     라운드/그림자 예외(헤더 필 모양)도 이번에 폐기 — 전부 radius:0 + hairline border. */
  --hf-primary-green: var(--ds-primary);
  --hf-primary-green-hover: var(--ds-green-600);
  --hf-green-soft: var(--ds-green-600);
  --hf-deep-green: var(--ds-primary);
  --hf-amber: var(--ds-amber);
  --hf-amber-hover: var(--ds-amber-deep);
  --hf-amber-text: var(--ds-amber-deep);
  --hf-brown: var(--ds-amber-deep);
  --hf-cream: var(--ds-surface);
  --hf-white: var(--ds-base);
  --hf-ink: var(--ds-ink);
  --hf-font: var(--ds-font-kr);
  --hf-font-en: var(--ds-font-en);

  --hf-radius: var(--ds-radius);
  --hf-radius-sm: var(--ds-radius);
  --hf-shadow: none;
  --hf-border: var(--ds-border);

  /* ---------- 브랜드 디자인 시스템 v1.0 (--ds- 네임스페이스) ----------
     홈(/)·헤더·푸터는 제외, 나머지 서브페이지 전용. 기존 --hf- 접두사 변수와 값이 겹치더라도
     완전히 별개 네임스페이스로 유지한다(서로 참조하지 않음 — 추후 두 시스템이 다시
     갈라져도 안전하도록). 라운드는 전부 0(아바타 원형 이미지만 --ds-radius-avatar 예외),
     그림자는 전면 금지 → --ds-border(헤어라인)로 대체. Amber Deep(#A8620A)은 흰 배경
     위 텍스트로 쓸 때만 AA 통과(4.75:1) — Surface(#FDF3E3) 위에서는 4.33:1로 AA 미달이니
     Surface 카드 위 텍스트에는 쓰지 않는다(대신 --ds-ink/--ds-primary 사용). */
  --ds-primary: #0E3B2C;
  --ds-green-600: #256B50;
  --ds-amber: #F5A524;      /* 면(배경) 전용 */
  --ds-amber-deep: #A8620A; /* 흰 배경 위 글자/아이콘 전용 — Surface 배경엔 사용 금지 */
  --ds-surface: #FDF3E3;
  --ds-base: #FFFFFF;
  --ds-ink: #0D0D0D;

  --ds-font-en: 'Archivo', var(--sans);
  --ds-font-kr: var(--sans);

  --ds-radius: 0;
  --ds-radius-avatar: 999px;
  --ds-border: 1px solid rgba(13,13,13,.14);

  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 16px;
  --ds-space-4: 24px;
  --ds-space-5: 32px;
  --ds-space-6: 48px;
  --ds-space-7: 64px;
  --ds-space-8: 96px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Header (floating card nav) ---------- */
.hf-header {
  position: fixed;
  top: 16px;
  left: 16px;
  right: 16px;
  z-index: 150;
  font-family: var(--hf-font);
}
@media (min-width: 640px) {
  .hf-header { top: 24px; left: 24px; right: 24px; }
}

.hf-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 60px;
  padding: 0 0.75rem 0 1.4rem;
  border-radius: var(--hf-radius);
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--hf-border);
  box-shadow: none;
  transition: height 0.25s ease, padding 0.25s ease;
}
@media (min-width: 640px) {
  .hf-bar { height: 72px; padding: 0 1rem 0 1.75rem; }
}
.hf-header.is-scrolled .hf-bar { height: 56px; }

.hf-logo { display: block; flex-shrink: 0; }
.hf-logo img {
  display: block;
  height: 35px;
  width: auto;
  transition: height 0.25s ease;
}
@media (min-width: 640px) { .hf-logo img { height: 46px; } }
.hf-header.is-scrolled .hf-logo img { height: 38px; }

/* ---------- 헤더 중앙 빈 공간 — 자석 인력 파티클 (2026-08-12, 전체 폭 확대) ----------
   로고~우측 메뉴 사이가 넓게 비는 와이드 데스크톱(1024px+)에서만 노출. 절대 위치 대신
   flex:1 스페이서로 만들어서 로고~메뉴 사이 빈 공간 전체 폭에 맞춰 자동으로 늘어나게 한다
   (뷰포트 폭이 달라져도 하드코딩 없이 항상 전체 구간을 커버). pointer-events:none이라
   클릭도 안 먹고, 다른 flex 아이템(로고/내비/CTA) 정렬에도 영향 없다. */
.hf-particles {
  display: none;
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
  pointer-events: none;
  z-index: 1;
}
@media (min-width: 1024px) {
  .hf-particles { display: block; }
}
.hf-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  opacity: 0;
  animation: hf-particle-fly 7s ease-in infinite;
}
.hf-particle:nth-child(1)  { top: 14%; left: 2%;   width: 2px; height: 2px; background: var(--hf-amber-text);   animation-delay: 0s;    --fly-x: -50px;  --peak-o: 0.22; }
.hf-particle:nth-child(2)  { top: 62%; left: 9%;   width: 6px; height: 6px; background: var(--hf-primary-green); animation-delay: 0.5s;  --fly-x: -60px;  --peak-o: 0.32; }
.hf-particle:nth-child(3)  { top: 38%; left: 16%;  width: 3px; height: 3px; background: var(--hf-amber);        animation-delay: 1s;    --fly-x: -80px;  --peak-o: 0.18; }
.hf-particle:nth-child(4)  { top: 82%; left: 24%;  width: 5px; height: 5px; background: var(--hf-amber-text);   animation-delay: 1.5s;  --fly-x: -100px; --peak-o: 0.3; }
.hf-particle:nth-child(5)  { top: 10%; left: 32%;  width: 2px; height: 2px; background: var(--hf-primary-green); animation-delay: 2s;    --fly-x: -120px; --peak-o: 0.4; }
.hf-particle:nth-child(6)  { top: 55%; left: 39%;  width: 7px; height: 7px; background: var(--hf-amber);        animation-delay: 2.5s;  --fly-x: -140px; --peak-o: 0.2; }
.hf-particle:nth-child(7)  { top: 30%; left: 47%;  width: 3px; height: 3px; background: var(--hf-amber-text);   animation-delay: 3s;    --fly-x: -160px; --peak-o: 0.35; }
.hf-particle:nth-child(8)  { top: 75%; left: 54%;  width: 4px; height: 4px; background: var(--hf-primary-green); animation-delay: 3.5s;  --fly-x: -180px; --peak-o: 0.24; }
.hf-particle:nth-child(9)  { top: 18%; left: 61%;  width: 2px; height: 2px; background: var(--hf-amber);        animation-delay: 4s;    --fly-x: -195px; --peak-o: 0.38; }
.hf-particle:nth-child(10) { top: 45%; left: 69%;  width: 6px; height: 6px; background: var(--hf-amber-text);   animation-delay: 4.5s;  --fly-x: -210px; --peak-o: 0.2; }
.hf-particle:nth-child(11) { top: 85%; left: 76%;  width: 3px; height: 3px; background: var(--hf-primary-green); animation-delay: 5s;    --fly-x: -225px; --peak-o: 0.3; }
.hf-particle:nth-child(12) { top: 25%; left: 84%;  width: 5px; height: 5px; background: var(--hf-amber);        animation-delay: 5.5s;  --fly-x: -240px; --peak-o: 0.16; }
.hf-particle:nth-child(13) { top: 65%; left: 91%;  width: 4px; height: 4px; background: var(--hf-amber-text);   animation-delay: 6s;    --fly-x: -255px; --peak-o: 0.34; }
.hf-particle:nth-child(14) { top: 8%;  left: 97%;  width: 2px; height: 2px; background: var(--hf-primary-green); animation-delay: 6.5s;  --fly-x: -270px; --peak-o: 0.4; }

@keyframes hf-particle-fly {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  8%   { opacity: var(--peak-o, 0.3); }
  65%  { transform: translate(calc(var(--fly-x, -100px) * 0.55), -2px) scale(0.85); opacity: var(--peak-o, 0.3); }
  88%  { transform: translate(calc(var(--fly-x, -100px) * 0.9), -4px) scale(0.4); opacity: calc(var(--peak-o, 0.3) * 1.5); }
  100% { transform: translate(var(--fly-x, -100px), -4px) scale(0.15); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hf-particle { animation: none; opacity: 0; }
}

.hf-bar-actions { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }

/* 상단 고정바 상시 노출 링크(Consulting/Marketing) — 드로어를 열지 않아도 바로 보이는
   텍스트 링크. 좁은 화면(태블릿 이하)은 자리가 부족해 숨기고 드로어로만 접근(드로어에는
   최상위 행으로 이미 승격되어 있어 모바일에서도 노출 유지됨). */
.hf-bar-nav {
  display: none;
  align-items: center;
  gap: 1.5rem;
  margin-right: 0.5rem;
}
@media (min-width: 900px) {
  .hf-bar-nav { display: flex; }
}
.hf-bar-nav a {
  font-family: var(--hf-font-en);
  font-weight: 700;
  font-size: 16px;
  color: var(--hf-ink);
  white-space: nowrap;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.hf-bar-nav a:hover { color: var(--hf-primary-green); }
.hf-bar-nav a.active { color: var(--hf-primary-green); border-bottom-color: var(--hf-amber); }

.hf-cta {
  display: inline-flex;
  align-items: center;
  background: var(--hf-amber);
  color: var(--hf-primary-green);
  font-family: var(--hf-font-en);
  font-weight: 700;
  font-size: 13px;
  padding: 9px 16px;
  border-radius: var(--hf-radius);
  white-space: nowrap;
  transition: background 0.2s ease;
}
.hf-cta:hover { background: var(--hf-amber-hover); }
@media (min-width: 640px) { .hf-cta { font-size: 15px; padding: 12px 28px; } }

.hf-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--hf-radius);
  background: var(--hf-cream);
  border: var(--hf-border);
  flex-shrink: 0;
}
.hf-trigger-icon { position: relative; width: 18px; height: 13px; display: block; }
.hf-trigger-icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--hf-ink);
  border-radius: 1px;
  transition: transform 0.25s ease, top 0.25s ease;
}
.hf-trigger-icon span:first-child { top: 0; }
.hf-trigger-icon span:last-child { top: 100%; margin-top: -1.5px; }
.hf-trigger[aria-expanded="true"] .hf-trigger-icon span:first-child {
  top: 50%; transform: translateY(-50%) rotate(45deg);
}
.hf-trigger[aria-expanded="true"] .hf-trigger-icon span:last-child {
  top: 50%; margin-top: -0.75px; transform: translateY(-50%) rotate(-45deg);
}

/* ---------- 우측 슬라이드 드로어 — 헤더보다 상위의 완전 독립 불투명 오버레이 ----------
   드로어가 열리면 배경(backdrop, z-index 155)이 헤더(150)를 포함한 페이지 전체를 어둡게 덮고,
   드로어 본체(z-index 160)는 그 위에서 완전 불투명하게 렌더링된다. 헤더는 그냥 아래에 가려질
   뿐이므로 "헤더와 드로어 배경이 같은 색으로 겹쳐 보이는" 문제 자체가 구조적으로 생기지 않는다.
   드로어는 로고/Contact/닫기까지 자체 포함해 헤더에 의존하지 않는다. */
.hf-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 155;
  background: rgba(13,13,13,.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s cubic-bezier(.2,.8,.2,1), visibility 0.35s;
}
.hf-drawer-backdrop.open { opacity: 1; visibility: visible; }

.hf-drawer {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 160;
  height: 100vh;
  width: 88vw;
  max-width: 440px;
  background: var(--hf-white);
  border-left: var(--hf-border);
  box-shadow: none;
  border-radius: 0;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1);
  font-family: var(--hf-font);
  display: flex;
  flex-direction: column;
}
@media (min-width: 640px) {
  .hf-drawer { width: 440px; }
}
@media (max-width: 700px) {
  .hf-drawer { height: 100svh; }
}
.hf-drawer.open { transform: translateX(0); }

.hf-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.25rem 1.25rem 0;
  flex-shrink: 0;
}
.hf-drawer-logo { display: block; flex-shrink: 0; }
.hf-drawer-logo img { display: block; height: 20px; width: auto; }
.hf-drawer-head-actions { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.hf-drawer-close {
  width: 40px;
  height: 40px;
  border-radius: var(--hf-radius);
  background: var(--hf-cream);
  border: var(--hf-border);
  color: var(--hf-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hf-drawer-list { flex: 1; padding: 0.5rem 1.5rem 1.5rem; }

.hf-drawer-group { border-bottom: 1px solid rgba(13,13,13,.1); }
.hf-drawer-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 20px 4px;
  font-size: 21px;
  font-weight: 700;
  color: var(--hf-ink);
  font-family: var(--hf-font-en);
  transition: background 0.15s ease;
}
.hf-drawer-toggle:hover { background: var(--hf-cream); }
.hf-chevron { transition: transform 0.25s ease; flex-shrink: 0; color: var(--hf-ink); }
.hf-drawer-toggle[aria-expanded="true"] .hf-chevron { transform: rotate(180deg); }

.hf-drawer-sub {
  display: flex;
  flex-direction: column;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding-left: 1rem;
  transition: max-height 0.3s ease, opacity 0.25s ease, padding-bottom 0.3s ease;
}
.hf-drawer-sub.open { max-height: 400px; opacity: 1; padding-bottom: 12px; }
.hf-drawer-sub a {
  padding: 0.6rem 0.25rem;
  font-size: 16px;
  font-weight: 400;
  color: var(--hf-ink);
  opacity: 0.72;
}
.hf-drawer-sub a:hover { opacity: 1; color: var(--hf-primary-green); }
.hf-drawer-sub a.active { opacity: 1; color: var(--hf-amber-text); font-weight: 500; }

.hf-drawer-row {
  display: flex;
  align-items: center;
  padding: 20px 4px;
  font-size: 21px;
  font-weight: 700;
  font-family: var(--hf-font-en);
  color: var(--hf-ink);
  border-bottom: 1px solid rgba(13,13,13,.1);
  transition: background 0.15s ease;
}
.hf-drawer-row:hover { background: var(--hf-cream); }
.hf-drawer-row.active { color: var(--hf-amber-text); }
.hf-drawer-row-contact { color: var(--hf-amber-text); }

.hf-drawer-footer {
  flex-shrink: 0;
  padding: 1.25rem 1.5rem 1.75rem;
  display: flex;
  justify-content: flex-start;
}
.hf-login-link {
  background: none;
  border: none;
  font-size: 13px;
  color: var(--gray);
  font-family: inherit;
}
.hf-login-link:hover { color: var(--hf-primary-green); }
.hf-admin-links { display: flex; gap: 1.25rem; font-size: 13px; align-items: center; }
.hf-admin-links a { color: var(--gray); }
.hf-admin-links a:hover { color: var(--hf-primary-green); }
.hf-logout-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--gray);
  cursor: pointer;
}
.hf-logout-btn:hover { color: var(--hf-primary-green); }

@media (prefers-reduced-motion: reduce) {
  .hf-header, .hf-bar, .hf-logo, .hf-drawer, .hf-drawer-backdrop, .hf-trigger-icon span, .hf-chevron, .hf-drawer-sub { transition: none; }
}

/* 키보드 포커스 표시 — 접근성(ESC/Tab 트랩 대응), Amber로 항상 페이지 배경과 구분되도록 */
.hf-header *:focus-visible, .hf-footer *:focus-visible, .hf-drawer *:focus-visible {
  outline: 2px solid var(--hf-amber-hover);
  outline-offset: 2px;
}

/* ---------- Floating CTA — vertical side tabs ---------- */
.floating-cta {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
.cta-tab {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 33px 9px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ds-base);
  border-radius: var(--ds-radius);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: none;
  white-space: nowrap;
  transition: filter 0.15s ease;
}
.cta-tab:hover { filter: brightness(1.08); }
.cta-tab-diagnosis { background: var(--ds-green-600); }
.cta-tab-contact { background: var(--ds-primary); }

/* ---------- Generic sections ---------- */
.section {
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
}
.section-alt { background: var(--paper); }
.section-dark { background: var(--green-deep); color: #fff; }

.eyebrow {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--header-green);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.section-dark .eyebrow { color: var(--green-mint); }

h1, h2, h3 { font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.section-dark h1, .section-dark h2, .section-dark h3 { color: #fff; }

h2.section-title {
  font-size: clamp(1.85rem, 3.4vw, 2.7rem);
  line-height: 1.35;
  margin-bottom: 1rem;
}
.section-lead {
  font-size: 1.3rem;
  color: var(--gray);
  line-height: 1.75;
  max-width: 680px;
}
.section-dark .section-lead { color: rgba(255,255,255,0.78); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, rgba(15,61,46,0.86), rgba(13,26,43,0.82)), var(--green-deep) center/cover no-repeat;
  color: #fff;
  overflow: hidden;
}
.hero.has-image { background-image: linear-gradient(180deg, rgba(15,61,46,0.72), rgba(13,26,43,0.78)), var(--hero-image); background-size: cover; background-position: center; }
.hero-inner { position: relative; z-index: 2; padding: 5rem 0; }
.hero-kicker {
  font-family: 'Pretendard';
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--green-bright);
  margin-bottom: 1.25rem;
}
.hero h1 {
  color: #fff;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.28;
  max-width: 760px;
  margin-bottom: 1.5rem;
}
.hero p {
  color: rgba(255,255,255,0.86);
  font-size: 1.08rem;
  max-width: 560px;
  line-height: 1.75;
}
.hero-actions { display: flex; gap: 0.9rem; margin-top: 2.25rem; flex-wrap: wrap; }

/* ---------- Home hero: 4장 크로스페이드 + Ken Burns, 100vh 풀블리드 ---------- */
.hero-home {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 100vh;
  background: var(--green-deep);
}
@media (max-width: 700px) {
  .hero-home { min-height: 100svh; }
}
.hero-home .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-home .hero-bg-layer {
  position: absolute;
  inset: 0;
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center;
  transform-origin: center center;
  opacity: 0;
  animation: hero-crossfade-cycle 36s linear infinite;
  /* 홈 히어로는 컬러 사진으로 복원(흑백+amber 처리는 서브페이지 히어로/카드에만 적용) */
}
.hero-home .hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(22,38,31,0) 0%, rgba(22,38,31,.75) 100%);
}
/* 헤더가 hero-home 위에 fixed로 떠 있어 문서 흐름상 공간을 차지하지 않으므로, 뷰포트가
   낮은 화면(예: 1366x768 노트북)에서 중앙 정렬된 히어로 타이틀이 헤더와 겹칠 수 있다.
   전체 뷰포트 중앙 정렬 대신 헤더 높이(+24px 여유) 만큼 padding-top을 확보한 나머지
   영역 안에서만 수직 중앙 정렬한다. */
.hero-home .hero-inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(16px + 60px + 24px);
  padding-bottom: 1.25rem;
  box-sizing: border-box;
}
@media (min-width: 640px) {
  .hero-home .hero-inner {
    padding-top: calc(24px + 72px + 24px);
  }
}
.hero-home .hero-kicker,
.hero-home .hero-title,
.hero-home .hero-subtext {
  max-width: min(1100px, 90vw);
}
.hero-home .hero-kicker {
  color: var(--hf-cream, #F3EFE6);
  font-size: 14px;
  letter-spacing: 0.05em;
  margin-bottom: 1.25rem;
}
.hero-home .hero-title {
  font-family: var(--hf-font, var(--sans));
  font-weight: 700;
  font-size: clamp(3.2rem, 6.5vw, 6.5rem);
  line-height: 1.12;
  color: #fff;
  /* 좁은 화면에서 자동 줄바꿈이 추가로 걸려도 단어/조사 중간에서 끊기지 않도록 */
  word-break: keep-all;
  overflow-wrap: normal;
}
.hero-home .hero-subtext {
  font-size: clamp(1.1rem, 1.5vw, 1.375rem);
  color: rgba(243, 239, 230, 0.85);
  margin-top: 1.25rem;
}
.hero-home .hero-logos {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  padding: clamp(2rem, 4vw, 3.25rem) 0 clamp(2.5rem, 5vw, 4rem);
}
/* 4장 크로스페이드 순환 — 이미지당 9s 슬롯(페이드인 1.25s + 노출 6.5s + 페이드아웃 1.25s) × 4장 = 36s 전체 루프.
   레이어마다 animation-delay를 +9s씩 밀어서(1번째 레이어부터 순서대로 0/9/18/27s에 시작) 같은
   키프레임을 다른 위상에서 재생한다. 2레이어(대칭, D/2)와 달리 4레이어는 비대칭이라 음수 delay를
   쓰면 순서가 뒤바뀌므로(예: -9s와 -27s가 서로 swap) 반드시 양수 delay를 써야 한다.
   Ken Burns(scale 1.0→1.06)는 스펙대로 "노출 구간"(fade 제외, 3.47%~21.53%)에서만 진행. */
@keyframes hero-crossfade-cycle {
  0%      { opacity: 0; transform: scale(1); }
  3.47%   { opacity: 1; transform: scale(1); }
  21.53%  { opacity: 1; transform: scale(1.06); }
  25%     { opacity: 0; transform: scale(1.06); }
  100%    { opacity: 0; transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-home .hero-bg-layer {
    animation: none;
    opacity: 0;
  }
  .hero-home .hero-bg-layer:first-child { opacity: 1; }
}

/* ---------- 하단 스크롤 유도 아이콘 — 마지막에 fade-in 후 바운스 루프 시작 ---------- */
.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 3vw, 32px);
  z-index: 2;
  transform: translateX(-50%);
  width: 26px;
  height: 42px;
  border: 1.5px solid rgba(243,239,230,0.55);
  border-radius: 999px;
  pointer-events: none;
}
.js .hero-home .hero-scroll-cue {
  opacity: 0;
  transition: opacity 0.5s ease;
  transition-delay: 0.9s;
}
.hero-home.is-ready .hero-scroll-cue { opacity: 1; }
.hero-scroll-cue::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--hf-cream, #F3EFE6);
  transform: translateX(-50%);
  opacity: 0;
}
.hero-home.is-ready .hero-scroll-cue::before {
  animation: hero-scroll-cue-move 1.8s ease-in-out 1.4s infinite;
}
@keyframes hero-scroll-cue-move {
  0%   { opacity: 0; top: 8px; }
  30%  { opacity: 1; }
  80%  { opacity: 0; top: 24px; }
  100% { opacity: 0; top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .hero-home .hero-scroll-cue { opacity: 1; transition: none; }
  .hero-scroll-cue::before { animation: none; top: 8px; opacity: 1; }
}

/* ---------- Hero text sequence (home hero only) ----------
   eyebrow: 고정, 페이지 로드 시 1회 fade-in 후 계속 노출(.hero-reveal, .is-ready 트리거).
   타이틀: 4개 문구 로테이션(JS가 innerHTML을 교체하며 .is-visible을 토글) — 1~3번은
   fade-in 1.2s→유지 2.5s→fade-out 1.2s 후 다음 문구, 4번(최종)은 fade-in 후 유지.
   서브카피/CTA: 타이틀이 4번째 문구로 fade-in을 마친 "직후"에 JS가 순서대로 .is-visible을
   붙여준다(고정 delay가 아니라 로테이션 종료 시점에 종속되므로 CSS delay로 표현 불가 → JS 구동). */
.js .hero-home .hero-reveal {
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.js .hero-home .hero-reveal-up { transform: translateY(30px); }
.hero-home.is-ready .hero-reveal { opacity: 1; transform: none; }
.hero-home .hero-kicker.hero-reveal { transition-duration: 0.4s; transition-delay: 0s; }

/* 타이틀 로테이션 — fade in/out 둘 다 1.2s로 대칭이라 transition 하나로 양방향 처리 */
.js .hero-home .hero-title { opacity: 0; transition: opacity 1.2s ease; }
.hero-home .hero-title.is-visible { opacity: 1; }

/* 서브카피(translateX -20px+fade)/CTA(scale 0.9→1+fade) — JS가 로테이션 종료 후 .is-visible을 붙임 */
.js .hero-home .hero-rotate-reveal { opacity: 0; transition: opacity 0.5s ease, transform 0.5s ease; }
.js .hero-home .hero-rotate-left { transform: translateX(-20px); }
.js .hero-home .hero-rotate-scale { transition-duration: 0.4s; transform: scale(0.9); }
.hero-home .hero-rotate-reveal.is-visible { opacity: 1; transform: none; }

/* 18s 안에 JS가 못 붙었을 때 대비한 CSS 전용 안전망(fallback) — 반드시 보여야 하는 텍스트라서 건다 */
.js .hero-home .hero-reveal,
.js .hero-home .hero-title,
.js .hero-home .hero-rotate-reveal { animation: hero-reveal-fallback 0.01s 18s forwards; }
.hero-home.is-ready .hero-reveal,
.hero-home .hero-title.is-visible,
.hero-home .hero-rotate-reveal.is-visible { animation: none; }
@keyframes hero-reveal-fallback { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js .hero-home .hero-reveal,
  .js .hero-home .hero-title,
  .js .hero-home .hero-rotate-reveal {
    opacity: 1; transform: none; transition: none; animation: none;
  }
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 1.6rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn-primary { background: var(--green-bright); color: #fff; }
.btn-secondary { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.4); }
.btn-navy { background: var(--navy); color: #fff; }
.btn:hover { transform: translateY(-2px); }

/* ---------- 신규 버튼 시스템(브랜드 가이드) — 채움/아웃라인, radius 0~12px.
   기존 .btn-primary/.btn-secondary(그린 필/화이트 아웃라인)는 다른 서브페이지가 계속 쓰므로
   그대로 두고 건드리지 않는다. 이번 턴 대상(헤더 Contact/드로어/홈 히어로·하단)에서만 사용. */
.btn-fill-amber {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 1.6rem;
  border-radius: var(--hf-radius);
  font-weight: 700;
  font-size: 0.95rem;
  background: var(--hf-amber);
  color: var(--hf-primary-green);
  border: none;
  transition: background 0.15s ease, transform 0.15s ease;
}
.btn-fill-amber:hover { background: var(--hf-amber-hover); transform: translateY(-2px); }

.btn-outline-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(0.95rem - 2px) calc(1.6rem - 2px);
  border-radius: var(--hf-radius);
  font-weight: 700;
  font-size: 0.95rem;
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--hf-primary-green);
  border: 2px solid var(--hf-primary-green);
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.btn-outline-dark:hover { background: #FFFFFF; color: #0E3B2C; transform: translateY(-2px); }

/* ---------- Cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
/* Marketing 페이지 "세부 실행 서비스" 카드 6개 3×2 그리드(2026-08-12) — .card-grid는
   여러 페이지가 공유하는 auto-fit 베이스라 이 섹션만 modifier로 3열 고정한다. */
.marketing-service-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) {
  .marketing-service-grid { grid-template-columns: 1fr; }
}
.card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.6rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(15,61,46,0.1);
  border-color: var(--green-soft);
}
.card-num {
  display: inline-flex;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green-deep);
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: 1.1rem;
}
.card h3 { font-size: 1.6rem; margin-bottom: 0.6rem; }
.card p { color: var(--gray); font-size: 1.15rem; line-height: 1.7; }

/* ---------- Marketing "판매 채널" 4카드 — 아이콘 + 호버 인터랙션(2026-08-14) ----------
   .card는 여러 페이지가 공유하는 베이스 클래스라(호버 lift는 이미 .card:hover에 있어
   재사용됨) 아이콘 전용 스타일만 .channel-grid로 스코프해서 추가한다. */
.channel-grid .card-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green-deep);
  margin-bottom: 1.1rem;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, color 0.3s ease;
}
.channel-grid .card-icon svg { width: 22px; height: 22px; }
.channel-grid .card:hover .card-icon {
  transform: scale(1.15) rotate(-6deg);
  background: var(--green-deep);
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .channel-grid .card-icon { transition: none; }
}

/* ---------- AX/DX 페이지 — "대표가 직접 설계하는 AX·DX 컨설팅" 표 → 아이콘 카드
   리스트(2026-08-14). 기존 <table class="profile-table">는 다른 페이지(about_team,
   ax_academy, case_*)도 공유하는 클래스라 손대지 않고, 이 섹션만 완전히 새 마크업/
   클래스로 교체했다. 카드 6개는 .container 직계 자식의 grandchildren으로 sitewide
   reveal-up 스윕에 자동으로 걸려(호버 인터랙션이 없어 지연 버그와 무관) 별도 JS 없이
   "순서대로 살짝 등장"이 재사용된다. */
.signal-card-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
  align-items: start;
}
.signal-card {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
}
.signal-card-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green-deep);
  display: flex;
  align-items: center;
  justify-content: center;
}
.signal-card-icon svg { width: 22px; height: 22px; }
.signal-card-label { font-weight: 800; font-size: 1.05rem; color: var(--ink); margin-bottom: 0.35rem; }
.signal-card-value { color: var(--gray); font-size: 1.02rem; line-height: 1.6; }
@media (max-width: 700px) {
  .signal-card-list { grid-template-columns: 1fr; }
}

/* ---------- AX/DX 페이지 — DX/AX 정의 2단 비교 카드(2026-08-14) ---------- */
.dxax-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.4rem;
  align-items: center;
  max-width: 780px;
}
.dxax-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem 1.6rem;
}
.dxax-card-tag {
  font-family: var(--hf-font-en, 'Archivo', sans-serif);
  font-weight: 800;
  font-size: 2rem;
  color: var(--hf-amber-text, #A8620A);
  margin-bottom: 0.2rem;
  line-height: 1;
}
.dxax-card-ax .dxax-card-tag { color: var(--green-deep); }
.dxax-card-en { font-size: 0.85rem; color: var(--gray); letter-spacing: 0.02em; margin-bottom: 0.9rem; }
.dxax-card-desc { font-size: 1.05rem; line-height: 1.65; color: var(--ink); margin: 0; }
.dxax-connector {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--green-bright);
  text-align: center;
}
@media (max-width: 700px) {
  .dxax-compare { grid-template-columns: 1fr; }
}

/* ---------- Why the MAGNET 5카드 — 계단식(지그재그) 배치(2026-08-14, Consulting 전용) ----------
   기존 .card-grid(auto-fit)는 5개 항목에서 뷰포트에 따라 4열까지만 잡히는 경우가 있어
   5번째 카드가 다음 줄에 혼자 남는 문제가 실측 확인됨(1280px 폭에서 재현: 4열 그리드가
   만들어지고 카드5가 왼쪽 정렬로 고립). flex-wrap + justify-content:center로 바꾸면
   폭에 관계없이 마지막 줄의 잔여 카드가 항상 가운데 정렬되어 이 문제가 근본적으로
   사라진다. 계단식 오프셋은 margin-top으로만 줘서(transform 아님) sitewide reveal-up의
   translateY 애니메이션과 겹치지 않게 한다. */
.whymagnet-zigzag {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}
.whymagnet-zigzag .card { flex: 0 1 calc(33.333% - 1rem); min-width: 240px; }
.whymagnet-zigzag .card:nth-child(3n+2) { margin-top: 28px; }
.whymagnet-zigzag .card:nth-child(3n+3) { margin-top: 56px; }
.whymagnet-zigzag .card-num {
  width: 64px;
  height: 64px;
  font-size: 1.5rem;
  color: #fff;
}
/* 카드별 색상 구분(2026-08-14 보완) — 전략 Framework 카드와 같은 방식(옅은 틴트 배경 +
   진한 포인트색 숫자 뱃지)을 5색으로 확장. 본문은 어두운 --ink 그대로라 가독성 유지. */
.whymagnet-zigzag .card-color-1 { background: #FBF1E3; border-color: rgba(168,98,10,0.2); }
.whymagnet-zigzag .card-color-1 .card-num { background: var(--ds-amber-deep, #A8620A); }
.whymagnet-zigzag .card-color-2 { background: #EEF0F1; border-color: rgba(40,40,40,0.16); }
.whymagnet-zigzag .card-color-2 .card-num { background: var(--ink, #282828); }
.whymagnet-zigzag .card-color-3 { background: #E7F3EC; border-color: rgba(10,10,10,0.14); }
.whymagnet-zigzag .card-color-3 .card-num { background: #0a0a0a; }
.whymagnet-zigzag .card-color-4 { background: #FBEAEA; border-color: rgba(179,38,30,0.2); }
.whymagnet-zigzag .card-color-4 .card-num { background: #B3261E; }
.whymagnet-zigzag .card-color-5 { background: #E5F0EA; border-color: rgba(15,61,46,0.22); }
.whymagnet-zigzag .card-color-5 .card-num { background: var(--green-deep); }
/* 2026-08-19 — About 페이지 Principles(M-A-G-N-E-T, 6개 항목) 카드형 전환에 6번째 색상
   필요해 추가. 사이트 다른 6색 카드 그리드(.marketing-service-grid card-color-6)와
   동일한 블루 톤으로 팔레트 통일. */
.whymagnet-zigzag .card-color-6 { background: #E8EEF7; border-color: rgba(27,58,107,0.2); }
.whymagnet-zigzag .card-color-6 .card-num { background: #1B3A6B; }
/* Principles 카드 안의 M-A-G-N-E-T 이니셜 강조 — 원래 텍스트 리스트 시절의 드롭캡
   느낌을 유지하되, 카드 h3(1.6rem) 안에 맞게 상대(em) 크기로 축소했다. */
.whymagnet-zigzag .card h3 .principles-letter {
  font-size: 1.4em;
  margin-right: 0.03em;
}
@media (max-width: 860px) {
  .whymagnet-zigzag .card { flex-basis: calc(50% - 0.75rem); }
}
@media (max-width: 560px) {
  .whymagnet-zigzag .card { flex-basis: 100%; margin-top: 0; }
}

/* Detailed service cards with bullet lists */
.service-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem;
}
.service-card h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.service-card > p { color: var(--gray); margin-bottom: 1.1rem; }
.service-card ul { display: flex; flex-direction: column; gap: 0.55rem; }
.service-card li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 1.15rem;
  color: var(--ink);
}
.service-card li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green-bright);
}
/* Marketing 세부 실행 서비스 6카드 — 카드별 색상(2026-08-14 보완). 계단식 배치가 아니라
   기존 3×2 고정 그리드(.marketing-service-grid) 구조는 그대로 두고 Consulting Why the
   MAGNET과 같은 톤(옅은 틴트 배경 + 진한 포인트색)만 카드마다 다르게 적용한다. */
.marketing-service-grid .service-card-color-1 { background: #FBF1E3; border-color: rgba(168,98,10,0.2); }
.marketing-service-grid .service-card-color-1 li::before { background: var(--ds-amber-deep, #A8620A); }
.marketing-service-grid .service-card-color-2 { background: #EEF0F1; border-color: rgba(40,40,40,0.16); }
.marketing-service-grid .service-card-color-2 li::before { background: var(--ink, #282828); }
.marketing-service-grid .service-card-color-3 { background: #E7F3EC; border-color: rgba(10,10,10,0.14); }
.marketing-service-grid .service-card-color-3 li::before { background: #0a0a0a; }
.marketing-service-grid .service-card-color-4 { background: #FBEAEA; border-color: rgba(179,38,30,0.2); }
.marketing-service-grid .service-card-color-4 li::before { background: #B3261E; }
.marketing-service-grid .service-card-color-5 { background: #E5F0EA; border-color: rgba(15,61,46,0.22); }
.marketing-service-grid .service-card-color-5 li::before { background: var(--green-deep); }
.marketing-service-grid .service-card-color-6 { background: #E8EEF7; border-color: rgba(27,58,107,0.2); }
.marketing-service-grid .service-card-color-6 li::before { background: #1B3A6B; }

/* ---------- Process steps — 세로 타임라인(2026-08-14 전면 개편) ----------
   왼쪽 세로선 + 원형 숫자 노드. 스크롤 위치에 따라 main.js initProcessTimeline()이
   .process-timeline-fill의 height%를 갱신하고, 뷰포트 중앙 부근을 지나는 항목에
   .is-active를 토글해 노드를 강조한다. .process-list/.process-item은 이 페이지에서만
   쓰던 클래스라(다른 페이지 미참조) 공유 클래스 부담 없이 구조 자체를 새 클래스로 교체. */
.process-timeline { position: relative; margin-top: 2.5rem; }
.process-timeline-track {
  position: absolute;
  left: 27px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--line);
}
.process-timeline-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0%;
  background: var(--green-bright);
}
.process-timeline-list { display: flex; flex-direction: column; gap: 2.2rem; }
.process-timeline-item {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1.6rem;
  align-items: start;
}
.process-timeline-node {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cream);
  border: 2px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Pretendard';
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--green-deep);
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.process-timeline-item.is-active .process-timeline-node {
  background: var(--green-deep);
  border-color: var(--green-deep);
  color: #fff;
  transform: scale(1.08);
}
.process-timeline-body h3 { font-size: 1.3rem; margin-bottom: 0.4rem; }
.process-timeline-body p { color: var(--gray); font-size: 1.05rem; }
@media (prefers-reduced-motion: reduce) {
  .process-timeline-node { transition: none; }
}
@media (max-width: 640px) {
  .process-timeline-track { left: 21px; }
  .process-timeline-item { grid-template-columns: 44px 1fr; gap: 1.1rem; }
  .process-timeline-node { width: 44px; height: 44px; font-size: 0.95rem; }
}
.draft-note {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--green-mid);
  background: var(--green-soft);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}

/* ---------- Concern quotes (고민 공감 섹션 — 텍스트 중심, 이미지 없음) ---------- */
.concern-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
.concern-quote {
  margin: 0;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.8rem 1.8rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}
.concern-quote::before {
  content: '\201C';
  display: block;
  font-family: Georgia, serif;
  font-size: 4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--green-bright);
  opacity: 0.4;
  margin-bottom: 0.8rem;
}
@media (max-width: 760px) {
  .concern-quotes { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .concern-quote { font-size: 1.25rem; }
  .concern-quote br.concern-break-desktop { display: none; }
}

/* ---------- Concern 카드 낙하 등장 애니메이션(2026-08-14, Consulting 전용) ----------
   홈 SOLUTIONS 섹션의 "확대+블러 → 축소+선명, 살짝 튕기며 안착" 패턴과 동일한 시각 효과를
   재사용한다. 검증된 .solution-card-pre/in/settled(main.css)는 그대로 두고, 별도 클래스로
   복제해서 홈 쪽 코드에 영향을 주지 않는다. */
.concern-quote-cell { overflow: hidden; }
.concern-quote-pre { opacity: 0; transform: scale(2.4); filter: blur(14px); }
.concern-quote-in { animation: concernQuoteReveal 1.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.concern-quote-settled { opacity: 1; transform: none; filter: none; }
@keyframes concernQuoteReveal {
  0% { opacity: 0; transform: scale(2.4); filter: blur(14px); }
  55% { opacity: 1; filter: blur(0); }
  72% { transform: scale(0.94); }
  86% { transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .concern-quote-pre, .concern-quote-in { opacity: 1; transform: none; filter: none; animation: none; }
}
.concern-lead-emphasis {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.5;
}
.concern-lead-quote {
  font-family: Georgia, serif;
  font-weight: 800;
  color: var(--green-bright);
  opacity: 0.5;
  margin-right: 0.2rem;
}
.concern-lead-highlight { color: var(--header-green); }

/* ---------- CEO section ---------- */
.ceo-section { display: grid; grid-template-columns: 480px 1fr; gap: 3rem; align-items: start; }
.ceo-photo {
  width: 100%;
  aspect-ratio: 4/5;
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--green-soft);
}
.ceo-name { font-size: 1.3rem; font-weight: 800; margin-bottom: 0.3rem; }
.ceo-role { color: var(--green-mid); font-weight: 600; margin-bottom: 1.4rem; }
.ceo-bio p { color: var(--gray); margin-bottom: 1rem; line-height: 1.8; }
.ceo-quote {
  font-size: 1.05rem;
  color: var(--ink);
  border-left: 3px solid var(--green-bright);
  padding-left: 1.1rem;
  margin: 1.5rem 0;
}

/* ---------- Directions (오시는 길) ---------- */
.ceo-split { display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: 3rem; align-items: center; }
.ceo-split img { width: 100%; height: 100%; border-radius: var(--radius); object-fit: cover; aspect-ratio: 4 / 5; }
/* About us CEO 섹션 — 블록을 페이지 중앙에 배치(2026-08-14). .ceo-split은 about_books.html도
   공유하는 클래스라 베이스 규칙은 그대로 두고 about.html 전용 모디파이어로 폭을 제한 +
   가운데 정렬한다. 문단 텍스트 자체는 서술형이라 좌측 정렬 유지(juno 확인 대기중 —
   전체 text-align:center가 맞으면 재수정 예정). */
.ceo-split-centered { max-width: 1040px; margin-left: auto; margin-right: auto; }
.ceo-split-quote {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 700;
  font-style: italic;
  color: var(--green-deep);
  border-left: 4px solid var(--green-bright);
  padding-left: 1.2rem;
  margin: 1.6rem 0;
  line-height: 1.55;
}
@media (max-width: 860px) { .ceo-split { grid-template-columns: 1fr; } }

.directions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
.directions-info dt { font-weight: 700; color: var(--green-deep); font-size: 0.85rem; margin-top: 1.1rem; }
.directions-info dd { color: var(--gray); font-size: 0.98rem; }
.directions-map {
  width: 100%;
  min-height: 280px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

/* ---------- Footer (card cluster) ---------- */
.hf-footer {
  position: relative;
  overflow: hidden;
  background: var(--hf-white);
  padding: 48px 0;
  font-family: var(--hf-font);
}
@media (min-width: 640px) {
  .hf-footer { padding: 80px 0; }
}
/* 좌상단/우하단 대각선 대칭 배치되는 가는 라인 그리드 장식(2026-08-12) — 텍스트 위에 올라오지
   않도록 z-index:0으로 깔고, .hf-footer-inner에 z-index:1을 줘서 항상 위에 오게 한다. */
.hf-footer::before,
.hf-footer::after {
  content: '';
  position: absolute;
  width: 240px;
  height: 240px;
  background-image:
    repeating-linear-gradient(to bottom, rgba(14,59,44,0.08) 0, rgba(14,59,44,0.08) 1px, transparent 1px, transparent 30px),
    repeating-linear-gradient(to right, rgba(14,59,44,0.08) 0, rgba(14,59,44,0.08) 1px, transparent 1px, transparent 30px);
  pointer-events: none;
  z-index: 0;
}
.hf-footer::before {
  top: 0;
  left: 0;
  -webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 70%);
  mask-image: linear-gradient(135deg, #000 0%, transparent 70%);
}
.hf-footer::after {
  bottom: 0;
  right: 0;
  -webkit-mask-image: linear-gradient(-45deg, #000 0%, transparent 70%);
  mask-image: linear-gradient(-45deg, #000 0%, transparent 70%);
}
.hf-footer-inner { position: relative; z-index: 1; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

.hf-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 900px) {
  .hf-footer-grid { grid-template-columns: 1.3fr 1.3fr 1fr; align-items: stretch; }
}

.hf-fcard { border-radius: var(--hf-radius); padding: 2rem; }

.hf-fcard-brand {
  background: var(--hf-deep-green);
  color: var(--hf-cream);
  border: 1px solid rgba(255,255,255,.14);
}
.hf-footer-logo { display: inline-block; margin-bottom: 1.4rem; }
/* 심플한 텍스트형 워드마크 — 이미지 로고 대신 텍스트/링크 위주로 정리 */
.hf-footer-logo-text {
  font-family: var(--hf-font-en);
  font-size: 20px;
  font-weight: 500;
  color: var(--hf-white);
}
.hf-footer-logo-text strong { font-weight: 800; }
.hf-footer-tagline { font-size: 14px; font-weight: 500; margin-bottom: 1.6rem; opacity: 0.92; }
.hf-footer-contact p { font-size: 13px; line-height: 1.8; opacity: 0.78; }

.hf-fcard-sitemap {
  background: var(--hf-cream);
  border: var(--hf-border);
  box-shadow: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.hf-fcol-title { font-size: 13px; font-weight: 700; font-family: var(--hf-font-en); color: var(--hf-primary-green); margin-bottom: 0.9rem; }
.hf-fcol a { display: block; font-size: 14px; font-weight: 400; color: var(--hf-ink); opacity: 0.75; padding: 0.35rem 0; }
.hf-fcol a:hover { opacity: 1; color: var(--hf-primary-green); }

.hf-fcard-social {
  background: var(--hf-cream);
  border: var(--hf-border);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
}
.hf-social-icons { display: flex; gap: 0.6rem; }
.hf-social-icons a {
  width: 36px;
  height: 36px;
  border-radius: var(--hf-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hf-white);
  color: var(--hf-ink);
  border: var(--hf-border);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.hf-social-icons a:hover { color: var(--hf-primary-green); border-color: var(--hf-primary-green); }
.hf-social-cta { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.hf-outline-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.2rem;
  border-radius: var(--hf-radius);
  border: 1px solid var(--hf-primary-green);
  color: var(--hf-primary-green);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.hf-outline-btn:hover { background: var(--hf-primary-green); color: var(--hf-white); }

.hf-footer-legal { margin-top: 24px; }
.hf-footer-legal p { font-size: 12px; color: var(--gray); line-height: 1.7; }

@media (max-width: 700px) {
  .hf-fcard-sitemap { grid-template-columns: 1fr; }
}

/* ---------- 전 사이트 푸터 심플화(2026-08-11) — 메뉴 링크 컬럼 제거, 4줄 구성만 유지.
   내비게이션은 헤더 드로어 메뉴가 전 페이지를 이미 커버하므로 접근 불가 페이지는 없다. ---------- */
.hf-footer-simple-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.6rem;
}
.hf-footer-simple-logo {
  font-family: var(--hf-font-en);
  font-size: 20px;
  font-weight: 500;
  color: var(--hf-ink);
}
.hf-footer-simple-logo strong { font-weight: 800; }
.hf-footer-simple-line { font-size: 13px; color: var(--gray); line-height: 1.9; }
.hf-footer-simple-copyright { font-size: 12px; color: var(--gray); line-height: 1.7; margin-top: 20px; }
@media (max-width: 600px) {
  .hf-footer-simple-line { line-height: 1.7; }
}

/* Books 페이지 — 톨스토이 인용구 블록 폰트 확대(2026-08-11). .ceo-split/.ceo-bio는
   about.html/index.html과 공유하는 베이스 클래스라 .books-quote-block으로 스코프해서
   이 페이지에만 적용한다. */
.ceo-bio.books-quote-block .ceo-split-quote { font-size: 25px; }
.ceo-bio.books-quote-block p { font-size: 20px; }
.ceo-bio.books-quote-block p.books-quote-cite { font-size: 17.5px; color: var(--gray); }

/* ---------- Contact — centered card over photo background ---------- */
/* 100vh: 헤더가 sticky(문서 흐름 점유)에서 fixed(플로팅 오버레이)로 바뀌어 더 이상 상단 높이를 뺄 필요가 없다 */
.contact-hero-full { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.contact-card-wrap { width: 100%; padding: clamp(2rem, 5vw, 4rem) var(--gutter); display: flex; justify-content: center; }
.contact-card {
  width: 100%;
  max-width: 860px;
  background: rgba(250, 248, 242, 0.95);
  border-radius: var(--radius);
  box-shadow: 0 30px 70px rgba(0,0,0,0.3);
  padding: clamp(2rem, 5vw, 3.5rem);
}
.contact-card h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0.6rem 0 1rem; }
.contact-card-lead { color: var(--gray); line-height: 1.8; font-size: 0.98rem; margin-bottom: 2rem; max-width: 560px; }

.contact-info-list { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 2rem; }
/* 2026-08-14 — 이모지 아이콘(📍✉️☎️) → 라인 SVG 아이콘 원형 배지로 교체(사이트 톤 통일,
   .signal-card-icon/.channel-grid .card-icon와 동일 패턴 재사용). li 전체를 <a>로 감싸
   클릭 가능하게(주소: 지도 새 탭, 이메일: mailto:, 전화: tel:). */
.contact-info-list li { display: block; }
.contact-info-link {
  display: flex; align-items: center; gap: 0.85rem;
  font-size: 0.95rem; color: var(--ink);
  text-decoration: none;
  padding: 0.4rem 0.5rem;
  margin: 0 -0.5rem;
  border-radius: var(--radius);
  transition: background 0.25s ease;
}
.contact-info-link:hover { background: var(--green-soft); }
.contact-info-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green-deep);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, color 0.3s ease;
}
.contact-info-icon svg { width: 19px; height: 19px; }
.contact-info-link:hover .contact-info-icon {
  background: var(--green-deep);
  color: #fff;
  transform: scale(1.1);
}
@media (prefers-reduced-motion: reduce) {
  .contact-info-icon, .contact-info-link:hover .contact-info-icon { transition: none; transform: none; }
}

.contact-nudge-card { background: var(--green-soft); border-radius: var(--radius); padding: 1.4rem 1.5rem; margin-bottom: 2rem; }
.contact-nudge-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--ds-base, #fff);
  color: var(--green-deep);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.8rem;
}
.contact-nudge-icon svg { width: 19px; height: 19px; }
.contact-nudge-title { color: var(--green-deep); font-weight: 700; margin-bottom: 0.4rem; font-size: 0.96rem; }
.contact-nudge-desc { color: var(--green-mid); font-size: 0.87rem; line-height: 1.6; margin-bottom: 1.1rem; }
.contact-nudge-btn { width: 100%; }

.contact-card-divider { border: none; border-top: 1px solid var(--line); margin-bottom: 2rem; }

@media (max-width: 700px) {
  .contact-hero-full { min-height: 0; }
  .contact-card-wrap { padding: 2rem var(--gutter); }
  .contact-card { padding: 1.75rem 1.4rem; }
}

.contact-form { display: flex; flex-direction: column; gap: 1.3rem; }
.form-group label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.5rem; }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 0.95rem;
  background: var(--paper-2);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--green-bright);
  background: #fff;
}
.form-group textarea { min-height: 160px; resize: vertical; }
.privacy-box {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  max-height: 220px;
  overflow-y: auto;
  background: var(--paper-2);
  font-size: 0.82rem;
  color: var(--gray);
  line-height: 1.7;
  white-space: pre-line;
}
.privacy-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.92rem;
  font-weight: 600;
}
.privacy-check input { width: auto; margin-top: 0.2rem; }
.form-messages { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.5rem; }
.form-message { padding: 0.8rem 1rem; border-radius: 8px; font-size: 0.9rem; }
.form-message.error { background: #fdeceb; color: #a4372a; }
.form-message.success { background: var(--green-soft); color: var(--green-deep); }
.submit-btn {
  align-self: flex-start;
  background: var(--green-deep);
  color: #fff;
  border: none;
  padding: 0.95rem 2.2rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.98rem;
}
.submit-btn:hover { background: var(--green); }

/* ---------- Brand check — progress + question list ---------- */
.check-progress {
  position: sticky;
  /* 88px: 새 플로팅 헤더(최대 높이 72px + 상단 inset 24px)와 겹치지 않는 여유값으로 보정 */
  top: 88px;
  z-index: 10;
  background: var(--paper);
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
}
/* 2026-08-14 — 단일 얇은 바 → 6세그먼트로 교체(문항 수와 1:1 매칭, sticky 상태에서도
   존재감 있게). 2026-08-14 보완: 스크롤로 지나치기만 해도 완료로 표시되던 문제를 고쳐
   실제 응답 여부 기준으로만 갱신하도록 변경. 2026-08-14 재보완: Q3/Q4가 선택 항목이라고
   해서 응답 없이도 "완료"로 계산되던 것도 부정확한 표시라 제거 — 선택/필수 구분은
   제출 차단 여부에만 쓰고, 진행바 자체는 6문항 전부 "실제로 답했는가"만 기준으로 삼는다
   (JS가 .is-done만 토글, 미응답이면 필수/선택 관계없이 옅은 기본 상태 유지). */
.check-progress-segs { display: flex; gap: 6px; }
.check-progress-seg {
  flex: 1;
  height: 6px;
  background: var(--line);
  border-radius: 999px;
  transition: background 0.25s ease;
}
.check-progress-seg.is-done { background: var(--header-green); }
@media (prefers-reduced-motion: reduce) {
  .check-progress-seg { transition: none; }
}
.check-progress-label { font-size: 0.78rem; color: var(--gray); margin-top: 0.6rem; }
.check-progress-label .current { color: var(--header-green); font-weight: 700; }

/* 좌측 진단 진행률 게이지 레일 + 본문(폼) 컬럼. 넓은 화면에서만 레일 노출,
   1200px 미만은 1열로 접힌다(레일 숨김). */
.check-body-container {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 200px minmax(0, 900px);
  gap: 3rem;
  align-items: start;
}
.check-gauge { display: block; }
.check-gauge-sticky {
  position: sticky;
  top: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.check-gauge-ring { width: 116px; height: 116px; transform: rotate(-90deg); }
.check-gauge-track { fill: none; stroke: var(--line); stroke-width: 6; }
.check-gauge-fill {
  fill: none;
  stroke: var(--header-green);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 263.9;
  stroke-dashoffset: 263.9;
  transition: stroke-dashoffset 0.4s ease;
}
.check-gauge-pct { font-size: 1.4rem; font-weight: 800; color: var(--header-green); }
.check-gauge-caption { font-size: 0.78rem; color: var(--gray); text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .check-gauge-fill { transition: none; }
}
@media (max-width: 1199px) {
  .check-body-container { grid-template-columns: 1fr; max-width: 900px; gap: 0; }
  .check-gauge { display: none; }
}

.check-form { display: flex; flex-direction: column; }
.check-q {
  padding: 2.75rem 0;
  border-bottom: 1px solid var(--line);
  /* 2026-08-31 — 모바일 공통 이슈 1차: 고정 헤더(.hf-header, position:fixed) +
     스티키 진행바(.check-progress, position:sticky top:88px)가 항상 화면 상단을 차지하는데,
     문항으로 스크롤 이동(제출 시 미응답 문항 자동 스크롤 등)하면 이 문항의 제목/첫 항목이
     그 뒤로 가려지는 순간이 있었다. scroll-margin-top으로 "스크롤 도착 지점 위에 이만큼
     공간을 남겨라"를 지정하면 브라우저가 알아서 고정 요소 아래로 스크롤을 멈춰준다 —
     레이아웃에는 영향이 없어(스크롤 동작에만 관여) 데스크톱에서도 안전하게 항상 적용. */
  scroll-margin-top: 170px;
}
.check-q:first-child { padding-top: 2.5rem; }
.check-q-head { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.6rem; }
.check-q-icon {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green-deep);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.check-q-icon svg { width: 18px; height: 18px; }
.check-q-num { color: var(--header-green); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.04em; margin-bottom: 0; }
.check-q-title { font-size: 1.15rem; margin-bottom: 1.5rem; line-height: 1.5; }
.check-q input[type="text"].check-q-input {
  width: 100%;
  max-width: 480px;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 0.95rem;
  background: var(--paper-2);
}
.check-q input[type="text"].check-q-input:focus { outline: none; border-color: var(--green-bright); background: #fff; }

.check-options { display: flex; flex-direction: column; gap: 0.6rem; max-width: 560px; }
/* 2026-08-14 — 문항 수가 많고(Q1 13개) 옵션 문구가 상대적으로 짧은 Q1/Q3/Q5에 한해
   2열 그리드 적용(사용자 지시로 지정된 문항만, Q2는 기존 1열 유지). 본문 컬럼이
   900px로 넓어졌으므로 grid 변형은 max-width를 풀어 그 폭을 그대로 쓴다. */
.check-options-grid { max-width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem 0.9rem; }
@media (max-width: 700px) {
  .check-options-grid { grid-template-columns: 1fr; }
}
.check-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  background: #fff;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.check-option:hover { border-color: var(--green-bright); }
.check-option:has(input:checked) { border-color: var(--header-green); background: var(--green-soft); transform: scale(1.02); }
.check-option:has(input:checked) span { color: var(--header-green); font-weight: 700; }
.check-option input { accent-color: var(--header-green); width: 18px; height: 18px; flex-shrink: 0; }
.check-option span { font-size: 0.94rem; line-height: 1.4; transition: color 0.15s ease; }
@media (prefers-reduced-motion: reduce) {
  .check-option { transition: none; }
  .check-option:has(input:checked) { transform: none; }
}
.check-option-etc { flex-wrap: wrap; }
.check-option-etc .etc-input {
  flex: 1;
  min-width: 120px;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 0.3rem 0;
  font-family: var(--sans);
  font-size: 0.9rem;
  background: transparent;
}
.check-option-etc .etc-input:focus { outline: none; border-color: var(--header-green); }

.check-intro { padding: clamp(2.5rem, 5vw, 3.5rem) 0 0; }
.check-intro-list { display: flex; flex-direction: column; gap: 0.6rem; color: var(--gray); font-size: 1.05rem; line-height: 1.7; margin: 0 0 1.5rem; }
.check-intro-note { font-size: 0.92rem; color: var(--gray); line-height: 1.8; }

/* 2026-08-14 — Q6(연락처, 전환 단계) 시각적 차별화 */
.check-q-final {
  background: var(--green-soft);
  border: 1px solid var(--header-green);
  border-bottom: none;
  padding: 2.5rem 2rem;
  margin-top: 0.5rem;
}
.check-q-final-note {
  display: inline-block;
  color: var(--header-green);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  background: #fff;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 0.9rem;
}
@media (max-width: 700px) {
  .check-q-final { padding: 2rem 1.4rem; }
}

/* 2026-08-14 — 필수 문항 미응답 시 제출 차단 안내 문구. .form-message.error와 동일 톤. */
.check-q-warning {
  display: none;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  padding: 0.7rem 1rem;
  background: #fdeceb;
  color: #a4372a;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 8px;
}
.check-q-warning.is-visible { display: flex; }

/* ---------- Photo background hero (dark green overlay, 선명하게 — blur 금지) ---------- */
.photo-bg-hero { position: relative; overflow: hidden; }
.photo-bg-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.photo-bg-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(15, 42, 31, 0.78);
  z-index: 1;
}
.photo-bg-hero > .container,
.photo-bg-hero > .contact-card-wrap { position: relative; z-index: 2; }

/* 사진 배경으로 전환한 텍스트 섹션 공용 유틸리티(텍스트 컨테이너 연속배치 방지용, 배치 규칙 감사 대응) —
   카드(.card/.service-card 등)는 배경과 무관하게 흰 배경을 유지하므로 손대지 않는다 */
.photo-bg-hero-text .eyebrow { color: var(--green-mint); }
.photo-bg-hero-text .section-title { color: #fff; }
.photo-bg-hero-text .section-lead { color: rgba(255,255,255,0.85); }

/* ---------- Marketing 하단 CTA — 화살표 배경 그래픽 은은한 움직임(2026-08-14) ----------
   growth-skyline.webp 사진 자체에 성장 화살표가 그려져 있어(우상단으로 꺾어 오르는
   형태), 화살표 궤적을 픽셀 단위로 트레이싱하는 대신 같은 대각선 방향(좌하단→우상단)
   으로 입자가 은은하게 떠오르고 화살표 끝(꼭짓점) 부근에 맥동하는 글로우를 얹어
   "성장"의 움직임을 암시한다. z-index:2로 .container와 같은 층에 두되 DOM 순서상
   앞에 둬서 텍스트보다 아래, 어두운 오버레이(z-index:1)보다는 위에 그려지게 한다. */
.cta-arrow-fx { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.cta-arrow-glow {
  position: absolute;
  top: 26%;
  left: 66%;
  width: 160px;
  height: 160px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,165,36,0.4) 0%, rgba(245,165,36,0) 70%);
  animation: ctaArrowPulse 3.6s ease-in-out infinite;
}
@keyframes ctaArrowPulse {
  0%, 100% { opacity: 0.35; transform: translate(-50%, -50%) scale(0.85); }
  50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.2); }
}
.cta-particle {
  position: absolute;
  bottom: 8%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 0 6px 2px rgba(245,165,36,0.5);
  opacity: 0;
  animation: ctaParticleRise 6s ease-in-out infinite;
}
@keyframes ctaParticleRise {
  0% { transform: translate(0, 0); opacity: 0; }
  12% { opacity: 0.85; }
  78% { opacity: 0.45; }
  100% { transform: translate(var(--drift, 50px), -300px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-arrow-glow, .cta-particle { animation: none; opacity: 0; }
}

/* ---------- Brand Philosophy 섹션 — 북극성 반짝임 + 줄별 순차 페이드인(2026-08-14,
   Consulting 전용). .philosophy-hero로 스코프해서 다른 페이지의 .photo-bg-hero-text(홈
   Marketing Solutions, about_team 등)는 그대로 기존 sitewide reveal-up 동작을 유지한다. */
.philosophy-hero .ph-line {
  display: block;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.philosophy-hero .ph-line.ph-line-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .philosophy-hero .ph-line { opacity: 1; transform: none; transition: none; }
}
/* 반짝임 위치 보완(2026-08-14) — 원래 "북극성" 글자 바로 옆에 붙여뒀더니 텍스트와
   겹쳐 가독성이 떨어진다는 피드백. 텍스트에 붙는 방식을 버리고, 텍스트 블록(가운데
   정렬, 최대 760px)과 겹치지 않는 섹션 좌우 여백에 독립적인 점 3개를 배치한다.
   .philosophy-hero(.photo-bg-hero)가 이미 position:relative라 여기 기준으로 절대배치. */
.ph-sparkle {
  position: absolute;
  z-index: 2;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 2px rgba(255,255,255,0.85), 0 0 16px 5px rgba(245,165,36,0.55);
  animation: northstarTwinkle 2.4s ease-in-out infinite;
  pointer-events: none;
}
.ph-sparkle-sm { width: 4px; height: 4px; animation-delay: 0.8s; }
.ph-sparkle-lg { width: 8px; height: 8px; animation-delay: 1.4s; }
@keyframes northstarTwinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.7); }
  50% { opacity: 1; transform: scale(1.2); }
}
@media (max-width: 760px) {
  /* 좁은 화면에서는 좌우 여백이 거의 없어 텍스트와 다시 겹칠 수 있어 숨긴다 */
  .ph-sparkle { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ph-sparkle { animation: none; opacity: 0.7; }
}

/* 오시는 길 — 교통 정보 섹션 사진 배경 전환(2026-08-12). .card는 다른 페이지와 공유하는
   베이스 클래스라 .location-transport로 스코프해서 사진 배경 위 카드 가독성만 보강한다. */
.location-transport .card { border-color: rgba(255,255,255,0.55); box-shadow: 0 12px 32px rgba(9,26,20,0.35); }
/* 2026-08-12 컨테이너 확대(1400px) 후 카드 2개짜리 그리드가 과하게 성기게 늘어나는 문제
   방지 — 이 섹션 카드 그리드만 폭 상한을 둔다. */
.location-transport .card-grid { max-width: 760px; }

.check-done { text-align: center; padding: clamp(3rem, 8vw, 5rem) 0; }
.check-done-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--green-soft); color: var(--header-green); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin: 0 auto 1.5rem; }
.check-done h1 { font-size: 1.6rem; margin-bottom: 0.8rem; }
.check-done p { color: var(--gray); font-size: 1rem; line-height: 1.8; max-width: 480px; margin: 0 auto; }
.check-done .hero-actions { justify-content: center; margin-top: 2rem; }

@media (max-width: 700px) {
  .check-q { padding: 2rem 0; }
}

/* ---------- Client logo marquee ---------- */
.client-marquee-title { text-align: center; color: rgba(255,255,255,0.75); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 2rem; }
.client-marquee-track {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 1.75rem);
  width: max-content;
  animation: client-marquee-scroll 32s linear infinite;
}
.client-marquee-track .client-logo-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: var(--ds-radius, 0);
  border: var(--ds-border);
  padding: 0.8rem 1.6rem;
  height: 40px;
}
.client-marquee-track img {
  height: 24px;
  width: auto;
}
/* 로고 24개(실제 12 + 복제 12)를 그룹 wrapper 없이 하나의 flat flex 리스트로 두고
   -50% 지점으로 스크롤한다. flat 리스트라 -50%가 정확히 12번째 로고 뒤와 일치하므로
   JS로 폭을 실측할 필요가 없다(이전에는 그룹 wrapper의 padding-right가 track의 gap:0과
   섞여 루프 경계에서만 간격이 달라지는 버그가 있었다). */
@keyframes client-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Scroll keyword ticker(2026-08-14) — 흰 배경 섹션이 2개 이상 연속되는
   지점에 삽입하는 구분 밴드. 위 client-marquee와 같은 "그룹 wrapper 없는 flat 리스트 +
   -50% 지점으로 스크롤" 기법을 그대로 재사용한다(그룹 wrapper를 쓰면 padding과 track의
   gap이 섞여 루프 이음새에서만 간격이 달라지는 버그가 로고 마퀴 개발 때 있었음).
   전 대문자·넓은 자간의 eyebrow 톤, 로고 마퀴(32s)보다 느린 속도로 좌측 이동. */
.scroll-ticker {
  overflow: hidden;
  background: var(--green-deep);
  padding: 1rem 0;
}
.scroll-ticker-track {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  width: max-content;
  animation: scroll-ticker-scroll 90s linear infinite;
}
.scroll-ticker-item {
  font-family: var(--hf-font-en, 'Archivo', sans-serif);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  white-space: nowrap;
}
.scroll-ticker-sep {
  color: var(--green-mint);
  font-size: 0.85rem;
}
@keyframes scroll-ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-ticker-track { animation: none; }
  .scroll-ticker { overflow-x: auto; }
}

/* ---------- Sitewide scroll reveal ---------- */
.reveal-up {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.reveal-up.reveal-up-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-up { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 960px) {
  .ceo-section { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .directions-grid { grid-template-columns: 1fr; }
  .cta-tab { padding: 27px 8px; font-size: 18px; }
}
@media (max-width: 480px) {
  /* 확대된 세로탭 CTA가 좁은 화면에서 본문 텍스트와 겹치지 않도록 우측 여백 확보 */
  .container { padding-right: calc(var(--gutter) + 50px); }
}
/* 2026-08-31 — 모바일 공통 이슈 1차: 플로팅 CTA("무료진단"/"문의하기")가 375px 폭에서
   본문 텍스트(히어로 설명, 홈 인용구 등) 위에 그대로 겹쳐 글자가 가려지던 문제.
   860px 단계에서 이미 한 번 줄어든 크기(27px/8px, 18px)를 모바일에서 한 단계 더
   줄여 버튼 자체의 가로 폭을 좁힌다 — 우측 고정 위치(right:0)는 그대로 유지해
   화면 밖으로 나가지 않게 하면서, 폭을 줄여 겹침 영역 자체를 최소화하는 방향. */
@media (max-width: 760px) {
  .cta-tab { padding: 16px 6px; font-size: 13px; }
}

/* ---------- Phase band (3-Phase process) ---------- */
.phase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
  position: relative;
}
.phase-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.7rem;
  position: relative;
}
.phase-card-label {
  font-family: 'Pretendard';
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  color: var(--header-green);
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.phase-card h3 { font-size: 1.4rem; margin-bottom: 1.1rem; line-height: 1.4; }
.phase-card ul { display: flex; flex-direction: column; gap: 0.55rem; }
.phase-card li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 1.02rem;
  color: var(--gray);
  line-height: 1.6;
}
.phase-card li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green-bright);
}
.phase-card:not(:last-child)::after {
  content: '→';
  position: absolute;
  right: -1.9rem; top: 50%;
  transform: translateY(-50%);
  color: var(--green-soft);
  font-size: 1.4rem;
  font-weight: 800;
  z-index: 1;
}
@media (max-width: 860px) {
  .phase-grid { grid-template-columns: 1fr; }
  .phase-card:not(:last-child)::after { display: none; }
}

/* ---------- What We Do — 홈 PROCESS 섹션 폐기 후 대체(2026-08-11). 4개 카드 + 하단 솔루션 바.
   .phase-card는 consulting.html 등 다른 페이지가 계속 쓰므로 손대지 않고 새 클래스로 분리. ---------- */
.whatwedo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.whatwedo-grid-3 { grid-template-columns: repeat(3, 1fr); }
.whatwedo-card {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem 1.5rem;
  transition: border-color 0.3s ease;
}
/* 호버 시 배경 이미지로 페이드인 — background-image는 트랜지션이 안 되므로 ::before를
   이미지 레이어로 별도로 두고 opacity만 애니메이션한다. 카드별 이미지는 마크업의
   style 속성의 --card-image 커스텀 프로퍼티로 주입(2026-08-13). */
.whatwedo-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--card-image);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 0;
}
.whatwedo-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,61,46,0.88), rgba(15,61,46,0.94));
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 1;
}
.whatwedo-card:hover::before,
.whatwedo-card:hover::after { opacity: 1; }
.whatwedo-card:hover { border-color: rgba(15,61,46,0.4); }
.whatwedo-card > * { position: relative; z-index: 2; }
.whatwedo-num {
  font-family: var(--hf-font-en, 'Archivo', sans-serif);
  font-weight: 800;
  font-size: 30px;
  color: var(--hf-amber-text, #A8620A);
  margin-bottom: 0.9rem;
  transition: color 0.3s ease;
}
.whatwedo-card:hover .whatwedo-num { color: var(--hf-amber, #F5A524); }
.whatwedo-card h3 { font-size: 25px; margin-bottom: 1rem; line-height: 1.4; transition: color 0.3s ease; }
.whatwedo-card:hover h3 { color: #fff; }
.whatwedo-card ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.whatwedo-card:hover ul { opacity: 1; }
.whatwedo-card li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 1.1rem;
  color: var(--gray);
  line-height: 1.6;
  transition: color 0.3s ease;
}
.whatwedo-card:hover li { color: #fff; }
.whatwedo-card li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green-bright);
  transition: background 0.3s ease;
}
.whatwedo-card:hover li::before { background: var(--green-mint); }
@media (prefers-reduced-motion: reduce) {
  .whatwedo-card, .whatwedo-card::before, .whatwedo-card::after,
  .whatwedo-num, .whatwedo-card h3, .whatwedo-card ul, .whatwedo-card li, .whatwedo-card li::before {
    transition: none;
  }
}

/* ---------- Consulting "세부 서비스" 3카드(2026-08-14 보완) ----------
   원래 홈 .whatwedo-card(배경 이미지 호버 전환)를 재사용했었는데, 리스트가 opacity:0
   상태로도 레이아웃 높이를 차지해 기본 상태에 빈 공간이 크게 보이는 문제가 Case Study와
   동일하게 나타났다. .whatwedo-card는 홈이 "자리를 유지한 채 opacity 전환"으로 명시적으로
   요청한 디자인이라 그대로 두고(홈 동작 유지), 이 섹션은 Case Study와 같은 전략(기본 상태에
   짧은 한 줄 요약 + 장식 마크 노출)에 Framework 카드와 같은 absolute overlay 리스트를 쓰는
   새 전용 클래스로 분리했다. */
.service-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.service-summary-card {
  position: relative;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem 1.6rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.service-summary-card:hover {
  border-color: rgba(15,61,46,0.35);
  box-shadow: 0 14px 30px rgba(15,61,46,0.14);
  transform: translateY(-4px);
  /* transform은 그 자체로 새 스태킹 컨텍스트를 만든다 — 카드에 z-index를 안 주면
     absolute overlay 자식(.service-summary-list, z-index:5)의 z-index가 카드 안에
     갇혀서, 뒤에 오는 이미지 밴드 섹션(.image-break-zoom, DOM 순서상 나중)에 가려지는
     문제가 실측 확인됐다(2026-08-14). 카드 자체를 명시적으로 끌어올려 바깥 스태킹
     컨텍스트에서 이미지 밴드보다 위에 오도록 한다. */
  z-index: 20;
}
.service-summary-num {
  font-family: var(--hf-font-en, 'Archivo', sans-serif);
  font-weight: 800;
  font-size: 30px;
  color: var(--hf-amber-text, #A8620A);
  margin-bottom: 0.6rem;
}
.service-summary-card h3 { font-size: 1.4rem; margin-bottom: 0.6rem; line-height: 1.4; }
.service-summary-mark {
  position: absolute;
  top: 1.7rem;
  right: 1.5rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--green-bright);
  opacity: 0.3;
  line-height: 1;
}
.service-summary-line { color: var(--gray); font-size: 1.02rem; line-height: 1.6; }
/* 전체 리스트는 Framework 카드와 동일한 absolute overlay 패턴 — 문서 흐름 밖이라
   호버해도 하단 섹션(이미지 밴드)이 밀리지 않는다. */
.service-summary-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 5;
  margin-top: 0.6rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
  box-shadow: 0 18px 34px rgba(15,13,10,0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}
.service-summary-card:hover .service-summary-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0s;
}
.service-summary-list ul { display: flex; flex-direction: column; gap: 0.55rem; }
.service-summary-list li { position: relative; padding-left: 1.1rem; font-size: 1.02rem; color: var(--ink); }
.service-summary-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-bright);
}
@media (hover: none) {
  .service-summary-list {
    position: static;
    margin-top: 0.9rem;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .service-summary-card, .service-summary-list { transition: none; }
}
@media (max-width: 760px) { .service-summary-grid { grid-template-columns: 1fr; } }

.whatwedo-bar {
  margin-top: 1.5rem;
  background: var(--paper-2);
  border-radius: var(--radius);
  padding: 1.2rem 1.8rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.7rem;
}
.whatwedo-bar-label {
  font-size: 20px;
  font-weight: 800;
  color: var(--hf-amber-text, #A8620A);
  white-space: nowrap;
}
.whatwedo-bar-items {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.home-content .whatwedo-section .container .section-lead { font-size: 25px; line-height: 1.6; }
@media (max-width: 960px) { .whatwedo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .whatwedo-grid { grid-template-columns: 1fr; } }
/* Consulting "세부 서비스"(3카드, 2026-08-14) — .whatwedo-grid는 홈이 4카드 기준으로 쓰므로
   3카드용 모디파이어로 분리(.marketing-service-grid와 동일한 관례). 위 base breakpoint들보다
   소스 순서상 뒤에 둬서 960px 구간에서 2열로 눌리지 않고 3열을 유지하게 한다. */
@media (max-width: 960px) { .whatwedo-grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .whatwedo-grid-3 { grid-template-columns: 1fr; } }

/* ---------- Why the MAGNET — 서브텍스트 확대 + 카드 진입 강조 문구 + 카드 3개 색상 구분
   (2026-08-11, 레퍼런스 이미지 기준. 정확한 색상은 이미지 확인이 불가해 브랜드 톤 내에서
   근사 지정 — 필요시 juno 재조정). ---------- */
.home-content .whymagnet-section .container .section-lead { font-size: 25px; line-height: 1.6; }
.whymagnet-card-en {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  margin-top: 0.2rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* 카드 01 — 밝은 회백색 + 앰버/골드 */
.whymagnet-card-1 { background: #F6F5F1; border-color: rgba(168,98,10,0.18); }
.home-content .whymagnet-card-1 .card-num,
.whymagnet-card-1 .whymagnet-card-en { color: var(--hf-amber-text, #A8620A); }
/* 카드 02 — 크림/베이지(포인트 카드) + 진네이비 */
.whymagnet-card-2 { background: #F1E4C8; border-color: rgba(27,42,74,0.18); }
.home-content .whymagnet-card-2 .card-num,
.whymagnet-card-2 .whymagnet-card-en,
.whymagnet-card-2 h3 { color: #1B2A4A; }
/* 카드 03 — 밝은 회색 + 올리브/골드, 본문 핵심 문구 밑줄 강조 */
.whymagnet-card-3 { background: #ECEBE6; border-color: rgba(107,107,53,0.2); }
.home-content .whymagnet-card-3 .card-num,
.whymagnet-card-3 .whymagnet-card-en { color: #6B6B35; }
.whymagnet-card-3 .whymagnet-highlight {
  color: #6B6B35;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
}

/* ---------- Drucker 인용구 밴드 — 기존 작은 카드(.process-quote)를 폐기하고 이미지띠
   (.impact-band)로 이동(2026-08-11). 기본 .impact-band는 진한 다크그린 오버레이+흰 텍스트지만,
   이 변형은 검정 텍스트가 보여야 해서 밝은 크림톤 오버레이로 덮는다. ---------- */
.impact-band-light::before { background: rgba(243, 239, 228, 0.45); }
.impact-band-light .impact-band-text {
  text-align: left;
  max-width: 700px;
}
.process-quote-main {
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  font-weight: 800;
  line-height: 1.5;
  color: var(--ink);
  text-shadow: 0 1px 4px rgba(253, 250, 244, 0.9), 0 0 22px rgba(253, 250, 244, 0.85);
}
.impact-band-light .ceo-split-quote {
  margin: 1.2rem 0 0;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  text-shadow: 0 1px 4px rgba(253, 250, 244, 0.9), 0 0 22px rgba(253, 250, 244, 0.85);
}

/* ---------- Marketing Solutions — 원형 배지(2026-08-11 보완).
   지름을 기존 사각 카드 실측 가로폭(339px)에 맞추고, 호버 시 설명 문단이 원 바깥이 아니라
   원 안쪽에서 크로스페이드로 나타나도록 두 레이어(.mktsol-circle-default/-desc)를 절대배치
   후 opacity 전환. 세리프 폰트(한글 Noto Serif KR / 영문 Playfair Display)는 index.html의
   extra_css에서 CDN 로드. hover 불가 환경(터치)에서는 설명을 상시 노출로 대체. ---------- */
.mktsol-grid {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}
.mktsol-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.mktsol-circle {
  position: relative;
  width: 339px;
  height: 339px;
  border-radius: 50%;
  background: #1B2A4A;
  color: #fff;
  overflow: hidden;
  transition: transform 0.25s ease;
}
.mktsol-item:hover .mktsol-circle,
.mktsol-item:focus-within .mktsol-circle { transform: scale(1.03); }
.mktsol-circle-default,
.mktsol-circle-desc {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 2.6rem;
  text-align: center;
  transition: opacity 0.35s ease;
}
.mktsol-circle-default { opacity: 1; }
.mktsol-item:hover .mktsol-circle-default,
.mktsol-item:focus-within .mktsol-circle-default { opacity: 0; }
.mktsol-circle-category {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.8);
  line-height: 1.4;
}
.mktsol-circle-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3;
}
.mktsol-circle-desc { opacity: 0; }
.mktsol-item:hover .mktsol-circle-desc,
.mktsol-item:focus-within .mktsol-circle-desc { opacity: 1; }
.mktsol-circle-desc p {
  font-family: 'Noto Serif KR', serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(255,255,255,0.95);
  line-height: 1.6;
  max-width: 240px;
}
@media (hover: none) {
  .mktsol-circle-default { opacity: 0; }
  .mktsol-circle-desc { opacity: 1; }
}

/* ---------- CEO 섹션 본문 전면 교체(2026-08-11) — 상단 큰 타이틀 삭제, 우측 컬럼 재작성.
   .home-content .section p:not(.eyebrow){19px}보다 확실히 이기도록 4클래스 선택자 사용
   (지난 특이도 버그 재발 방지). ---------- */
.home-content .container .ceo-bio-v2 p.ceo2-label {
  font-size: 17px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--hf-amber-text, #8A5008);
  line-height: 1.5;
  margin-bottom: 1.2rem;
}
.home-content .container .ceo-bio-v2 p.ceo2-subhead {
  font-size: 25px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.4;
  margin-bottom: 1.4rem;
}
.home-content .container .ceo-bio-v2 p.ceo2-body {
  font-size: 18.5px;
  font-weight: 400;
  color: var(--gray);
  line-height: 1.7;
  margin-bottom: 1.2rem;
}
.home-content .container .ceo-bio-v2 p.ceo2-emphasis {
  font-size: 21px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.6;
  margin-bottom: 1.2rem;
}
.home-content .container .ceo-bio-v2 ul.ceo2-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0 0 1.2rem;
}
.home-content .container .ceo-bio-v2 ul.ceo2-list li {
  position: relative;
  padding-left: 1.2rem;
  font-size: 18.5px;
  color: var(--gray);
  line-height: 1.7;
}
.ceo-bio-v2 ul.ceo2-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.6em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green-bright);
}

/* ---------- Solution grid (2x2) ---------- */
.solution-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
/* 카드 등장 애니메이션이 scale(2.4)에서 시작하는데, transform은 문서 흐름과 무관하게
   렌더링되어 형제 카드 위로 그대로 번져 보인다(특히 1열로 쌓이는 모바일에서 다음 카드
   자리를 다 가려버림). .solution-card 자체의 overflow:hidden은 카드 "안쪽" 콘텐츠만
   가릴 뿐 카드 자신의 확대된 렌더링은 못 가리므로, 그리드 셀 크기로 고정된 별도 래퍼에
   overflow:hidden을 둬서 확대 렌더링을 셀 경계 안에서만 보이게 자른다(2026-08-13). */
.solution-card-cell {
  overflow: hidden;
}
/* 카드가 착지를 마치면 main.js가 붙여준다 — hover 시 box-shadow/translateY(-4px)
   리프트가 다시 자유롭게 보이도록 클리핑을 해제한다. */
.solution-card-cell.solution-card-cell-settled {
  overflow: visible;
}
.solution-card {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.2rem;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.solution-card-thumb {
  margin: -2.2rem -2.2rem 1.6rem;
  height: clamp(160px, 18vw, 200px);
  overflow: hidden;
}
.solution-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.solution-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(15,61,46,0.1);
  border-color: var(--green-soft);
}

/* ---------- SOLUTIONS 카드 등장 애니메이션(2026-08-13) ----------
   사이트 공통 .reveal-up 인프라(main.js initRevealAnimations)는 .solution-grid를
   EXCLUDE_ANCESTOR_SELECTOR로 제외했다 — 그 인프라가 자식별로 부여하는 inline
   transitionDelay가 .solution-card의 hover 트랜지션(transform/box-shadow/border-color)에도
   그대로 적용되면서 hover 반응이 최대 0.32s 늦게 시작되는 버그가 있었다. 대신 이 카드는
   main.js initSolutionCardsReveal()이 별도 IntersectionObserver + setTimeout 스태거로
   .solution-card-pre → .solution-card-in → .solution-card-settled 순으로 클래스만
   갈아끼우고, hover transition-delay는 전혀 건드리지 않는다(-settled 상태의 .solution-card는
   순수 베이스 스타일이라 hover 시 즉시 반응). */
.solution-card-pre {
  opacity: 0;
  transform: scale(2.4);
  filter: blur(14px);
}
.solution-card-in {
  animation: solutionCardReveal 1.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.solution-card-settled {
  opacity: 1;
  transform: none;
  filter: none;
}
@keyframes solutionCardReveal {
  0% { opacity: 0; transform: scale(2.4); filter: blur(14px); }
  55% { opacity: 1; filter: blur(0); }
  72% { transform: scale(0.94); }
  86% { transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .solution-card-pre, .solution-card-in {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }
}
.solution-card-num {
  font-family: 'Pretendard';
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--header-green);
  margin-bottom: 0.8rem;
}
.solution-card h3 { font-size: 1.35rem; margin-bottom: 0.4rem; }
.solution-card-en {
  display: block;
  font-size: 0.92rem;
  color: var(--gray-light);
  margin-bottom: 0.9rem;
}
.solution-card p { color: var(--gray); font-size: 1.05rem; line-height: 1.65; }
.solution-card-arrow { display: inline-block; margin-top: 1rem; color: var(--green-mid); font-weight: 700; font-size: 0.85rem; }
@media (max-width: 700px) { .solution-grid { grid-template-columns: 1fr; } }

/* ---------- Reference highlight cards ---------- */
.reference-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.reference-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.reference-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(15,61,46,0.1); }
.reference-card-img { width: 100%; height: 200px; object-fit: cover; display: block; }
.reference-card-body { padding: 1.5rem 1.6rem 1.8rem; }
.reference-card-tag { font-size: 0.78rem; font-weight: 700; color: var(--green-mid); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.4rem; }
.reference-card h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.reference-card p { color: var(--gray); font-size: 1.05rem; line-height: 1.6; }
.reference-more { margin-top: 2.5rem; text-align: center; }

/* ---------- Reference 카드 — 홈 REFERENCE 섹션 전용 세로 스택(이미지 좌/텍스트 우) 변형.
   .reference-grid/.reference-card 기본형(3열, 이미지 상단)은 consulting.html/marketing.html이
   계속 쓰므로 손대지 않고 모디파이어 클래스로 분리(2026-08-11). ---------- */
.reference-grid.reference-grid-stacked {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  grid-template-columns: none;
}
.reference-grid-stacked .reference-card {
  display: grid;
  grid-template-columns: 280px 1fr;
}
.reference-grid-stacked .reference-card-img { height: 100%; aspect-ratio: 4 / 3; }
.reference-grid-stacked .reference-card-body {
  padding: 1.8rem 2.2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 700px) {
  .reference-grid-stacked .reference-card { grid-template-columns: 1fr; }
  .reference-grid-stacked .reference-card-img { aspect-ratio: 16 / 9; }
}
@media (max-width: 900px) { .reference-grid { grid-template-columns: 1fr; } }

/* ---------- Reference 카드 — Consulting Case Study 전용 호버 오버레이 변형(2026-08-14).
   홈 REFERENCE 콜라주와 같은 "평소엔 사진만, 호버시 다크그린 오버레이+텍스트" 톤을 재사용.
   marketing.html이 쓰는 기본형(.reference-grid/.reference-card, 이미지 상단+본문 상시노출)은
   그대로 두고 모디파이어 클래스로 분리. ---------- */
.reference-grid-hover .reference-card { position: relative; aspect-ratio: 4 / 5; }
.reference-grid-hover .reference-card-img {
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}
.reference-grid-hover .reference-card:hover .reference-card-img { transform: scale(1.05); }
/* 기본 상태 보완(2026-08-14) — 예전엔 body 전체가 opacity:0이라 호버 전엔 사진 아래가
   완전히 빈 공간이었다. 이제 은은한 그라디언트+마크+태그(짧은 요약)는 항상 보이게 하고,
   h3/제목·p/설명만 max-height:0로 접어뒀다가 호버시 펼친다(요소를 그대로 두되 opacity만
   쓰면 h3/p가 안 보여도 레이아웃 높이를 차지해 태그가 바닥에 붙지 못하는 문제가 있어
   max-height 트릭으로 실제 높이 자체를 접는다). */
.reference-grid-hover .reference-card-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.6rem 1.7rem;
  background: linear-gradient(to top, rgba(15,61,46,0.85) 0%, rgba(15,61,46,0.4) 45%, rgba(15,61,46,0) 100%);
  transition: background 0.35s ease;
}
.reference-grid-hover .reference-card:hover .reference-card-body {
  background: linear-gradient(to top, rgba(15,61,46,0.94) 0%, rgba(15,61,46,0.6) 55%, rgba(15,61,46,0) 100%);
}
.reference-grid-hover .reference-card-mark {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--hf-amber, #F5A524);
  opacity: 0.75;
  margin-bottom: 0.3rem;
}
.reference-grid-hover .reference-card-tag { color: var(--hf-amber, #F5A524); text-transform: lowercase; letter-spacing: 0.08em; }
.reference-grid-hover .reference-card h3,
.reference-grid-hover .reference-card p:not(.reference-card-tag) {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(14px);
  transition: opacity 0.35s ease, transform 0.35s ease, max-height 0.35s ease;
}
.reference-grid-hover .reference-card:hover h3,
.reference-grid-hover .reference-card:hover p {
  opacity: 1;
  max-height: 220px;
  transform: translateY(0);
}
.reference-grid-hover .reference-card h3 { color: #fff; margin-top: 0.5rem; transition-delay: 0.04s; }
.reference-grid-hover .reference-card p:not(.reference-card-tag) { color: var(--green-mint); font-size: 0.95rem; margin-top: 0.6rem; transition-delay: 0.08s; }
@media (hover: none) {
  .reference-grid-hover .reference-card h3,
  .reference-grid-hover .reference-card p:not(.reference-card-tag) { opacity: 1; max-height: 220px; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reference-grid-hover .reference-card-img,
  .reference-grid-hover .reference-card-body,
  .reference-grid-hover .reference-card h3,
  .reference-grid-hover .reference-card p:not(.reference-card-tag) { transition: none; }
}

/* ---------- 홈 REFERENCE 섹션 — 비대칭 사진 콜라주(2026-08-13). 왼쪽 큰 세로 1장 +
   오른쪽 위/아래 2장. 평소엔 사진만, 호버 시 다크그린 오버레이 위로 텍스트가 아래에서
   위로 페이드인. .reference-grid-stacked를 대체(위 블록은 다른 곳에서 안 쓰여 그대로 둠). */
.reference-collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1rem;
  margin-top: 2.5rem;
  height: clamp(440px, 52vw, 680px);
}
.reference-collage-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}
.reference-collage-item:first-child { grid-row: 1 / 3; }
.reference-collage-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.reference-collage-item:hover .reference-collage-img { transform: scale(1.04); }
.reference-collage-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.8rem 2rem;
  background: linear-gradient(to top, rgba(15,61,46,0.92) 0%, rgba(15,61,46,0.6) 50%, rgba(15,61,46,0) 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.reference-collage-item:hover .reference-collage-overlay { opacity: 1; }
.reference-collage-tag,
.reference-collage-title,
.reference-collage-desc {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.reference-collage-item:hover .reference-collage-tag,
.reference-collage-item:hover .reference-collage-title,
.reference-collage-item:hover .reference-collage-desc {
  opacity: 1;
  transform: translateY(0);
}
.reference-collage-tag {
  font-family: var(--hf-font-en, 'Archivo', sans-serif);
  text-transform: lowercase;
  letter-spacing: 0.1em;
  color: var(--hf-amber, #F5A524);
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  transition-delay: 0.02s;
}
.reference-collage-title {
  color: #fff;
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.4;
  transition-delay: 0.06s;
}
.reference-collage-desc {
  color: var(--green-mint);
  font-size: 0.95rem;
  line-height: 1.65;
  margin-top: 0.7rem;
  transition-delay: 0.1s;
}
@media (max-width: 700px) {
  .reference-collage { grid-template-columns: 1fr; grid-template-rows: none; height: auto; }
  .reference-collage-item:first-child { grid-row: auto; }
  .reference-collage-item { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  .reference-collage-img,
  .reference-collage-overlay,
  .reference-collage-tag,
  .reference-collage-title,
  .reference-collage-desc {
    transition: none;
  }
}
/* 카드 2개만 남는 경우(/services/marketing/ 대표 마케팅 사례) — 3열 대신 2열로 중앙 정렬, 카드 자체가 커 보이도록 */
.reference-grid-2 { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin-left: auto; margin-right: auto; }
@media (max-width: 700px) { .reference-grid-2 { grid-template-columns: 1fr; } }

/* ---------- Portfolio page ---------- */
.pf-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.pf-hero-stat-value { font-family: 'Pretendard'; font-weight: 800; font-size: 2rem; color: var(--header-green); line-height: 1; }
.pf-hero-stat-label { font-size: 0.82rem; color: var(--gray); margin-top: 0.5rem; }

.pf-filters { display: flex; flex-wrap: wrap; gap: 0.9rem 1.5rem; align-items: center; margin-bottom: 1.5rem; }
.filter-label { font-size: 0.78rem; font-weight: 700; color: var(--gray); text-transform: uppercase; letter-spacing: 0.05em; margin-right: 0.6rem; }
.filter-group { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; }
.filter-chip {
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gray);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.filter-chip:hover { border-color: var(--header-green); color: var(--header-green); }
.filter-chip.active { background: var(--header-green); border-color: var(--header-green); color: #fff; }
.filter-search { flex: 1; min-width: 220px; }
.filter-search input {
  width: 100%;
  padding: 0.6rem 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 0.88rem;
  background: #fff;
}
.filter-search input:focus { outline: none; border-color: var(--header-green); }

.pf-result-meta { font-size: 0.85rem; color: var(--gray); margin-bottom: 1.75rem; }
.pf-result-meta .count { color: var(--header-green); font-weight: 700; }
.pf-empty { text-align: center; padding: 4rem 1rem; color: var(--gray); line-height: 1.8; }

.pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.pf-card {
  position: relative;
  display: block;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.pf-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(15,61,46,0.1); border-color: var(--green-soft); }
.pf-card-visual { width: 100%; height: 190px; overflow: hidden; background: var(--paper-2); }
.pf-card-visual img, .pf-card-visual svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-card-body { padding: 1.4rem 1.5rem 1.6rem; }
.pf-card-tag { font-size: 0.76rem; font-weight: 700; color: var(--green-mid); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.4rem; }
.pf-card-client { font-size: 0.82rem; color: var(--gray); margin-bottom: 0.25rem; }
.pf-card-name { font-size: 1.1rem; margin-bottom: 0.55rem; line-height: 1.4; }
.pf-card-result { color: var(--gray); font-size: 0.88rem; line-height: 1.6; }
.pf-card-arrow {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  color: var(--header-green);
  font-size: 0.95rem;
  transition: transform 0.18s ease;
}
.pf-card:hover .pf-card-arrow { transform: translate(3px, -3px); }
@media (max-width: 1024px) { .pf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .pf-grid { grid-template-columns: 1fr; } }
/* 목록 필터(static/js/portfolio.js)가 hidden 속성으로 카드를 숨긴다 — .pf-card의 display:block이
   UA의 [hidden]보다 우선하므로 명시(2026-09-14). */
.pf-card[hidden] { display: none; }

.accent { color: var(--header-green); }

/* Portfolio detail view */
.pf-detail-back { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--gray); font-size: 0.88rem; margin-bottom: 2rem; font-weight: 600; }
.pf-detail-back:hover { color: var(--header-green); }
.pf-detail-client { color: var(--gray); font-weight: 700; margin-bottom: 0.5rem; }
.pf-detail-title { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin-bottom: 0.85rem; }
.pf-detail-subtitle { color: var(--gray); font-size: 1.02rem; max-width: 640px; line-height: 1.7; margin-bottom: 2.5rem; }
.pf-detail-visual { border-radius: var(--radius); overflow: hidden; margin-bottom: 3rem; background: var(--paper-2); aspect-ratio: 1 / 1; }
.pf-detail-visual img, .pf-detail-visual svg { width: 100%; height: 100%; object-fit: cover; display: block; }

.pf-outcome { background: var(--paper-2); border-radius: var(--radius); padding: 2rem clamp(1.5rem, 4vw, 2.5rem); margin-bottom: 2.5rem; }
.pf-outcome-label { color: var(--green-mid); font-weight: 700; font-size: 0.85rem; margin-bottom: 0.75rem; }
.pf-outcome-headline { font-size: clamp(1.25rem, 2.2vw, 1.65rem); line-height: 1.45; margin-bottom: 0.9rem; }
.pf-outcome-detail { color: var(--gray); line-height: 1.75; }

.pf-psr { margin-bottom: 2.75rem; }
.pf-psr-row { display: grid; grid-template-columns: 160px 1fr; gap: 1.5rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.pf-psr-row:first-child { border-top: 1px solid var(--line); }
.pf-psr-label { display: flex; align-items: center; gap: 0.7rem; }
.pf-psr-marker {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green-deep);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.9rem; flex-shrink: 0;
}
.pf-psr-name { font-weight: 700; font-size: 0.92rem; }
.pf-psr-content { color: var(--gray); line-height: 1.75; font-size: 0.95rem; }
@media (max-width: 640px) { .pf-psr-row { grid-template-columns: 1fr; gap: 0.6rem; } }

.pf-detail-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1.5rem; padding: 2rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 3.5rem; }
.pf-detail-meta-label { font-size: 0.76rem; color: var(--gray); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.35rem; }
.pf-detail-meta-value { font-weight: 700; font-size: 0.95rem; }

.pf-related-label { color: var(--green-mid); font-weight: 700; font-size: 0.85rem; margin-bottom: 0.5rem; }
.pf-related-title { font-size: 1.35rem; margin-bottom: 1.6rem; }
.pf-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 900px) { .pf-related-grid { grid-template-columns: 1fr; } }

/* 케이스 상세 추가 이미지(2026-09-14) — 관리화면에서 올린 순서대로, 본문(메타) 다음에
   원본 비율 그대로 세로로 나열한다. 첫 이미지(썸네일)는 위의 .pf-detail-visual. */
.pf-gallery { display: grid; gap: 1.5rem; margin-bottom: 3.5rem; }
.pf-gallery-item { margin: 0; }
.pf-gallery-item img { width: 100%; height: auto; display: block; background: var(--paper-2); }
.pf-gallery-item figcaption { margin-top: 0.6rem; font-size: 0.85rem; color: var(--gray); line-height: 1.6; }

@media (max-width: 700px) {
  .pf-filters { flex-direction: column; align-items: stretch; }
  .filter-search { min-width: 0; }
}

/* ---------- Data source grid (5 sources) ---------- */
.datasource-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.2rem;
  margin-top: 2.5rem;
}
/* 카드를 잇는 타임라인 연결선(2026-08-14) — 카드 자체(불투명 배경)가 위에 덮이므로
   카드 사이 gap에서만 점선이 드러나 순서/흐름이 있는 프로세스처럼 보인다. */
.datasource-grid::before {
  content: '';
  position: absolute;
  left: 1.3rem;
  right: 1.3rem;
  top: 2.8rem;
  height: 2px;
  background: repeating-linear-gradient(to right, #cfe8dc 0 10px, transparent 10px 18px);
  z-index: 0;
}
.datasource-card {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.3rem;
  text-align: center;
}
/* 숫자를 큰 워터마크로(2026-08-14) — 카드 배경에 옅게 깔려 시각적 흐름을 강조한다. */
.datasource-icon {
  position: absolute;
  top: -0.4rem;
  right: 0.1rem;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  font-family: var(--hf-font-en, 'Archivo', sans-serif);
  font-size: 3.6rem;
  font-weight: 800;
  line-height: 1;
  color: rgba(15,61,46,0.1);
  margin: 0;
  z-index: 0;
  pointer-events: none;
}
.datasource-card h3, .datasource-card ul { position: relative; z-index: 1; }
.datasource-card h3 { font-size: 1rem; margin-top: 1.7rem; margin-bottom: 0.7rem; }
.datasource-card ul { display: flex; flex-direction: column; gap: 0.35rem; }
.datasource-card li { font-size: 1rem; color: var(--gray); line-height: 1.5; }
@media (max-width: 900px) { .datasource-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .datasource-grid { grid-template-columns: 1fr; } }

/* ---------- Framework title bar (셰브론/화살표 연결 배너, 2026-08-12 — 카드 헤더에서 분리) ----------
   카드 그리드와 동일한 grid-template-columns/gap을 써서 두 행의 컬럼 경계가 픽셀 단위로 일치하게
   한다. 각 바의 왼쪽 끝은 절대 옮기지 않고(카드와의 세로 정렬 보장) 마지막 바를 제외한 바들만
   오른쪽으로 (gap + 화살촉 깊이)만큼 폭을 넓혀 다음 칸까지 침범하게 해서 화살표가 맞물리는
   효과를 낸다 — 뒤 바가 DOM 순서상 나중이라 항상 위에 그려지므로 노치가 앞 바의 화살촉을
   정확히 드러낸다. */
.framework-titles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  margin-top: 2.5rem;
}
.framework-title-bar {
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1.9rem;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.3;
  color: #fff;
  position: relative;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%, 20px 50%);
}
.framework-title-bar:first-child {
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%);
}
.framework-title-bar:last-child {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 20px 50%);
}
.framework-title-bar:not(:last-child) {
  width: calc(100% + 1.4rem + 20px);
  justify-content: flex-start;
  text-align: left;
}
.framework-title-bar-gold { background: var(--ds-amber-deep, #A8620A); }
.framework-title-bar-gray { background: var(--ink, #282828); }
.framework-title-bar-black { background: #0a0a0a; }
.framework-title-bar-red { background: #B3261E; }
/* 스크롤 진입시 좌→우 순차 슬라이드인(2026-08-14). .framework-titles는 다른 페이지가
   쓰지 않는 Consulting 전용 클래스라 sitewide reveal-up 스윕에서 통째로 제외하고
   (main.js EXCLUDE_ANCESTOR_SELECTOR) 여기서 독립적으로 처리한다. */
.framework-title-bar {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.framework-title-bar.bar-in { opacity: 1; transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .framework-title-bar { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 900px) {
  .framework-titles { grid-template-columns: repeat(2, 1fr); }
  .framework-title-bar,
  .framework-title-bar:first-child,
  .framework-title-bar:last-child {
    clip-path: none;
    height: auto;
    min-height: 64px;
    padding: 1rem 1.4rem;
  }
  .framework-title-bar:not(:last-child) {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}
@media (max-width: 520px) { .framework-titles { grid-template-columns: 1fr; } }

/* ---------- Framework cards (4-card, 이미지+불릿, 2026-08-12 카드형 재구성 — 상단 컬러 헤더는
   위 .framework-titles 화살표 배너로 이전, 카드 자체엔 색상 중복 없음) ---------- */
.framework-table {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  margin-top: 1.4rem;
  align-items: start;
}
/* 리스트를 absolute overlay로 전환(2026-08-14 보완) — 기존엔 ul이 opacity:0이어도
   레이아웃 높이를 그대로 차지해서(display:none이 아니므로) 카드 기본 상태에 빈 공간이
   크게 보였다. .framework-card는 위치 기준(position:relative)만 맡고, 실제 카드
   외형(테두리/배경/모서리)은 사진만 감싸는 .framework-card-media로 옮겨서 카드의
   보이는 높이 = 사진 높이만 되게 한다. 리스트 패널은 문서 흐름 밖(position:absolute)이라
   호버해도 하단 섹션이 밀리지 않는다. */
.framework-card { position: relative; }
.framework-card-media {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
/* 화살표 바 호버 → 매칭 카드 강조(2026-08-14, main.js initFrameworkBarSync가 인덱스로 연결) */
.framework-card.framework-card-highlight .framework-card-media { transform: translateY(-4px); }
.framework-card-gold.framework-card-highlight .framework-card-media { border-color: var(--ds-amber-deep, #A8620A); box-shadow: 0 14px 30px rgba(168,98,10,0.22); }
.framework-card-gray.framework-card-highlight .framework-card-media { border-color: var(--ink, #282828); box-shadow: 0 14px 30px rgba(40,40,40,0.18); }
.framework-card-black.framework-card-highlight .framework-card-media { border-color: #0a0a0a; box-shadow: 0 14px 30px rgba(0,0,0,0.22); }
.framework-card-red.framework-card-highlight .framework-card-media { border-color: #B3261E; box-shadow: 0 14px 30px rgba(179,38,30,0.22); }
@media (prefers-reduced-motion: reduce) {
  .framework-card-media { transition: none; }
}
.framework-card-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform 0.45s ease; }
.framework-card:hover .framework-card-img { transform: scale(1.06); }
.framework-card-body {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 5;
  margin-top: 0.6rem;
  padding: 1.4rem 1.3rem;
  border-radius: var(--radius);
  box-shadow: 0 18px 34px rgba(15,13,10,0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}
.framework-card:hover .framework-card-body {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0s;
}
.framework-card-body-gold { background: #FBF1E3; }
.framework-card-body-gray { background: #EEF0F1; }
.framework-card-body-black { background: #E7F3EC; }
.framework-card-body-red { background: #FBEAEA; }
.framework-card-body ul { display: flex; flex-direction: column; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.framework-card-body li {
  position: relative;
  padding-left: 1rem;
  font-size: 1.02rem;
  color: var(--gray);
  line-height: 1.5;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.framework-card-body li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green-bright);
}
/* 호버시 불릿을 순서대로 하나씩 스태거 리빌(2026-08-14) */
.framework-card:hover .framework-card-body li { opacity: 1; transform: translateX(0); }
.framework-card-body li:nth-child(1) { transition-delay: 0s; }
.framework-card-body li:nth-child(2) { transition-delay: 0.06s; }
.framework-card-body li:nth-child(3) { transition-delay: 0.12s; }
.framework-card-body li:nth-child(4) { transition-delay: 0.18s; }
.framework-card-body li:nth-child(5) { transition-delay: 0.24s; }
.framework-card-body li:nth-child(6) { transition-delay: 0.3s; }
.framework-card-body li:nth-child(7) { transition-delay: 0.36s; }
.framework-card-body li:nth-child(8) { transition-delay: 0.4s; }
.framework-card-body li:nth-child(9) { transition-delay: 0.4s; }
@media (hover: none) {
  /* 터치 환경은 호버가 없어 패널이 영영 안 열리므로 상시 노출(일반 문서 흐름)로 대체 —
     mktsol-circle에 이미 쓰인 것과 동일한 sitewide 관례. */
  .framework-card-body {
    position: static;
    margin-top: 0.6rem;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
  }
  .framework-card-body li { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .framework-card-body, .framework-card-body li { transition: none; }
}
@media (max-width: 900px) { .framework-table { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .framework-table { grid-template-columns: 1fr; } }

/* ---------- Career timeline ---------- */
.timeline-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-top: 2.5rem;
}
.timeline-card { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.7rem 1.4rem; border-top: 3px solid var(--green-bright); }
.timeline-year { font-weight: 800; color: var(--header-green); font-size: 0.95rem; margin-bottom: 0.6rem; }
.timeline-card h3 { font-size: 1.02rem; margin-bottom: 0.9rem; line-height: 1.4; }
.timeline-card ul { display: flex; flex-direction: column; gap: 0.4rem; }
.timeline-card li { font-size: 1rem; color: var(--gray); line-height: 1.5; position: relative; padding-left: 0.9rem; }
.timeline-card li::before { content: '·'; position: absolute; left: 0; font-weight: 800; color: var(--green-bright); }
@media (max-width: 900px) { .timeline-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .timeline-grid { grid-template-columns: 1fr; } }

/* ---------- Digital marketing 3-stage funnel ---------- */
/* 퍼널 흐름 그래픽(2026-08-14) — 카드 사이에 아래로 향하는 커넥터를 넣어 "인지→전환"
   단계가 이어진다는 느낌을 준다. 커넥터가 카드 간격을 전담하도록 리스트 자체 gap은
   없애고 커넥터의 padding으로 원래 밀도(1.2rem 선)를 맞춘다. 카드 자체는
   initFunnelReveal()이 스크롤 진입시 순서대로 슬라이드인 시키므로 .funnel-list는
   sitewide reveal-up에서 제외한다(main.js EXCLUDE_ANCESTOR_SELECTOR). */
.funnel-list { position: relative; display: flex; flex-direction: column; margin-top: 2.5rem; }
.funnel-connector {
  display: flex;
  justify-content: center;
  padding: 0.6rem 0;
}
.funnel-connector::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 11px solid var(--green-bright);
  opacity: 0.55;
}
.funnel-item {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 1.6rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem;
  align-items: start;
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.funnel-item.funnel-item-visible { opacity: 1; transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .funnel-item { opacity: 1; transform: none; transition: none; }
}
.funnel-step-num { position: relative; z-index: 1; font-weight: 800; font-size: 2.25rem; color: rgba(0,112,74,0.18); line-height: 1; }
.funnel-item h3 { position: relative; z-index: 1; font-size: 1.4rem; margin-bottom: 0.9rem; }
.funnel-item h3 span { color: var(--green-mid); font-weight: 700; font-size: 1.05rem; display: block; margin-top: 0.3rem; }
.funnel-item ul { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0.5rem; max-width: 62%; }
.funnel-item li { position: relative; padding-left: 1.1rem; font-size: 1.15rem; color: var(--gray); }
.funnel-item li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--green-bright); }
/* 카드 오른쪽 끝 이미지 — 왼쪽은 블러+투명으로 카드 배경에 녹아들고, 오른쪽으로 갈수록
   선명·진해진다. 흐린 레이어(-blur)와 또렷한 레이어(-sharp)를 각각 반대 방향 마스크로
   겹쳐서, 흐린 레이어가 비치는 좌측 끝은 부드럽게, 또렷한 레이어가 드러나는 우측은
   사진 그대로 보이게 한다. */
.funnel-visual { position: absolute; top: 0; right: 0; bottom: 0; width: 54%; pointer-events: none; z-index: 0; }
.funnel-visual-blur,
.funnel-visual-sharp {
  position: absolute;
  inset: 0;
  background-image: var(--funnel-image);
  background-size: cover;
  background-position: center;
}
/* 왼쪽 경계선 보완(2026-08-14) — 기존엔 블러 레이어의 마스크가 0px 지점부터 이미
   불투명(black 0%)이라, 카드 배경(투명)과 블러 레이어(불투명) 사이에 뚜렷한 하드컷이
   생겼다. 두 레이어 모두 0px에서 완전 투명으로 시작해서 120px 구간에 걸쳐 rgba
   알파값을 촘촘한 stop으로 서서히 올리는 방식으로 바꿔, 경계 자체가 없이 "빈 공간에서
   서서히 짙어지며 나타나는" 느낌으로 재조정했다. 블러 레이어는 40px 부근에서 옅게
   피크를 찍고 다시 가라앉아 또렷한 레이어에 자리를 넘겨주는 안개(haze) 역할만 한다. */
.funnel-visual-blur {
  filter: blur(18px);
  transform: scale(1.15);
  mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0.08) 15px,
    rgba(0,0,0,0.22) 30px,
    rgba(0,0,0,0.38) 45px,
    rgba(0,0,0,0.46) 60px,
    rgba(0,0,0,0.4) 75px,
    rgba(0,0,0,0.26) 90px,
    rgba(0,0,0,0.12) 105px,
    rgba(0,0,0,0) 120px);
  -webkit-mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0.08) 15px,
    rgba(0,0,0,0.22) 30px,
    rgba(0,0,0,0.38) 45px,
    rgba(0,0,0,0.46) 60px,
    rgba(0,0,0,0.4) 75px,
    rgba(0,0,0,0.26) 90px,
    rgba(0,0,0,0.12) 105px,
    rgba(0,0,0,0) 120px);
}
.funnel-visual-sharp {
  mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0.02) 10px,
    rgba(0,0,0,0.05) 20px,
    rgba(0,0,0,0.1) 32px,
    rgba(0,0,0,0.18) 44px,
    rgba(0,0,0,0.29) 56px,
    rgba(0,0,0,0.43) 68px,
    rgba(0,0,0,0.58) 80px,
    rgba(0,0,0,0.73) 92px,
    rgba(0,0,0,0.86) 104px,
    rgba(0,0,0,0.95) 114px,
    rgba(0,0,0,1) 124px);
  -webkit-mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0.02) 10px,
    rgba(0,0,0,0.05) 20px,
    rgba(0,0,0,0.1) 32px,
    rgba(0,0,0,0.18) 44px,
    rgba(0,0,0,0.29) 56px,
    rgba(0,0,0,0.43) 68px,
    rgba(0,0,0,0.58) 80px,
    rgba(0,0,0,0.73) 92px,
    rgba(0,0,0,0.86) 104px,
    rgba(0,0,0,0.95) 114px,
    rgba(0,0,0,1) 124px);
}
@media (max-width: 900px) {
  .funnel-item ul { max-width: 100%; }
  .funnel-visual { display: none; }
}
@media (max-width: 700px) { .funnel-item { grid-template-columns: 1fr; } }

/* ---------- Full-bleed pull-quote / image break ---------- */
.pullquote {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: center;
  color: #fff;
  overflow: hidden;
}
.pullquote::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,61,46,0.6), rgba(13,26,43,0.75));
}
.pullquote-inner { position: relative; z-index: 2; max-width: 1000px; padding: 4rem var(--gutter); }
.pullquote-text {
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.55;
  margin-bottom: 1.5rem;
}
.pullquote-attribution { font-size: 0.92rem; opacity: 0.85; font-weight: 600; }

/* ---------- Impact band (full-bleed stat statement between sections) ---------- */
.impact-band {
  position: relative;
  min-height: clamp(400px, 40vw, 480px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.impact-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(15, 42, 31, 0.55);
}
.impact-band-text {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.45;
  max-width: 820px;
  padding: 0 var(--gutter);
  word-break: keep-all;
  overflow-wrap: break-word;
}
/* 2026-08-31 — 모바일 공통 이슈 1차: 홈 하단 인용구("물건이 팔리지 않고...") 등 가운데
   정렬 인용구 텍스트가 폭이 넓은 줄에서 우측 플로팅 CTA에 그대로 겹쳐 글자가 가려지던
   문제. 좌우 여백을 더 키워 실제 줄 길이 자체를 CTA 존(зона) 밖으로 짧게 만든다(가운데
   정렬은 유지되므로 대칭으로 처리) — 출처 문구(.quote-band-cite)도 같은 폭 제약을 받는다. */
@media (max-width: 760px) {
  .impact-band-text {
    font-size: clamp(1.25rem, 6vw, 1.7rem);
    padding: 0 calc(var(--gutter) + 40px);
  }
}
.impact-band-text .accent { color: var(--green-mint); }
/* Consulting 페이지 전용 이미지 밴드 줌 모션(2026-08-14) — 서브페이지 히어로(.ds-hero-v2)와
   같은 계열의 완만한 확대 애니메이션. .impact-band/.image-break는 다른 페이지도 공유하는
   클래스라 베이스 규칙은 그대로 두고, 사진 레이어를 ::after로 새로 추가하는 모디파이어
   클래스로 스코프한다(기존 ::before 그라디언트 오버레이는 건드리지 않음). */
.impact-band-zoom::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  transform-origin: center center;
  animation: ds-hero-bg-zoom 20s ease-in-out infinite alternate;
}
.impact-band-zoom::before { z-index: 1; }
.impact-band-zoom .impact-band-text { z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .impact-band-zoom::after { animation: none; }
}
/* ---------- the MAGNET Principles (M-A-G-N-E-T 애크로스틱, /about/team) ---------- */
.principles-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-top: 2.5rem; }
@media (max-width: 800px) { .principles-cols { grid-template-columns: 1fr; gap: 0.5rem; } }
.principles-col-title { font-size: 1.05rem; font-weight: 800; margin-bottom: 1.2rem; color: var(--hf-primary-green, #0E3B2C); }
.principles-list { display: flex; flex-direction: column; }
.principles-item { padding: 1.1rem 0; border-bottom: 1px solid rgba(13,13,13,.12); }
.principles-item-head { font-family: var(--hf-font-en); font-weight: 800; font-size: 1rem; margin-bottom: 0.4rem; letter-spacing: -0.01em; }
.principles-initial { color: var(--hf-amber-text, #8A5008); font-size: 1.35rem; margin-right: 0.1rem; }
.principles-item-body { color: var(--gray); font-size: 1.05rem; line-height: 1.65; }

.mission-taglines { display: flex; flex-direction: column; gap: 0.6rem; max-width: 720px; margin: 0 auto; }
.mission-taglines p { font-size: clamp(0.95rem, 1.3vw, 1.15rem); color: rgba(255,255,255,0.82); line-height: 1.6; }
.mission-taglines .accent { color: var(--green-mint); font-weight: 700; }

/* About 페이지 — CAREER 섹션을 대체한 Principles 섹션(2026-08-11).
   카드 톤은 .whatwedo-card(흰 배경 + 얇은 테두리)와 동일하게 맞췄다.
   각 열의 카드 6개 영문 문구 첫 글자를 세로로 읽으면 M-A-G-N-E-T가 되는
   구조라 첫 글자만 크게 강조한다(드롭캡 스타일). */
.principles-title {
  font-family: 'Playfair Display', var(--serif, serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(3rem, 6vw, 4.5rem);
  text-align: center;
  margin: 0.2rem 0 3rem;
}
.principles-col-label {
  display: inline-block;
  background: var(--ds-primary, #0E3B2C);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 0.5rem 1.2rem;
  border-radius: 999px;
  margin-bottom: 1.5rem;
}
.principles-letter {
  font-size: 2.15rem;
  font-weight: 900;
  color: var(--hf-amber-text, #A8620A);
  margin-right: 0.05em;
}
.quote-band-cite {
  display: block;
  margin-top: 1.5rem;
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.7;
  color: rgba(255,255,255,0.82);
}

/* ---------- Solutions — photo background variant ---------- */
.solutions-hero .eyebrow { color: var(--green-mint); }
.solutions-hero .section-title { color: #fff; }
.solutions-hero .solution-card { background: rgba(250, 248, 242, 0.92); border-color: rgba(255,255,255,0.3); }

/* ---------- Image break (full-bleed photo + short line) ---------- */
.image-break {
  position: relative;
  min-height: 280px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.image-break::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(13,26,43,0.75), rgba(13,26,43,0.05) 60%);
}
/* Consulting 전용 이미지 밴드 줌 모션 — 위 .impact-band-zoom과 동일한 패턴(::after에
   사진+애니메이션, 기존 ::before 그라디언트는 유지). */
.image-break-zoom::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  transform-origin: center center;
  animation: ds-hero-bg-zoom 20s ease-in-out infinite alternate;
}
.image-break-zoom::before { z-index: 1; }
.image-break-zoom .image-break-caption { z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .image-break-zoom::after { animation: none; }
}
.image-break-caption {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 2rem var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
  width: 100%;
}

/* ---------- Photo case card (image-first, for cases without long copy) ---------- */
.photo-card { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.photo-card img { width: 100%; height: 200px; object-fit: cover; display: block; }
.photo-card-body { padding: 1.3rem 1.4rem 1.6rem; }
.photo-card-tag { font-size: 0.78rem; font-weight: 700; color: var(--green-mid); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.4rem; }
.photo-card h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.photo-card p { color: var(--gray); font-size: 0.88rem; line-height: 1.6; }

/* ---------- Blog list — 슬림 타이틀 바 (2026-08-12, 헤더와 필터바 사이 톤 구분용) ---------- */
.blog-title-bar {
  position: relative;
  overflow: hidden;
  background: var(--header-green, var(--green-deep));
  margin-top: 6.5rem;
  padding: 1.7rem 0;
}
@media (min-width: 640px) {
  .blog-title-bar { margin-top: 7.5rem; }
}
.blog-title-bar .container { position: relative; z-index: 1; }
.blog-title-bar-decor {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(46vw, 420px);
  z-index: 0;
  pointer-events: none;
}
.blog-title-bar-decor svg { display: block; width: 100%; height: 100%; }

/* ---------- 코너 워터마크 무늬(2026-08-14) — 브랜드 무료진단/Contact 좌우 여백 채움용.
   .blog-title-bar-decor와 동일 SVG를 훨씬 크게 재사용. 부모는 position:relative +
   overflow:hidden 필수(다음 섹션으로 안 새게). 콘텐츠보다 아래(z-index:0)에 깐다. */
.corner-decor {
  position: absolute;
  width: min(52vw, 720px);
  height: min(34vw, 440px);
  z-index: 0;
  pointer-events: none;
}
.corner-decor svg { display: block; width: 100%; height: 100%; }
.corner-decor-tl { top: -30px; left: -30px; }
.corner-decor-br { bottom: -30px; right: -30px; }
@media (max-width: 900px) {
  .corner-decor { width: min(70vw, 480px); height: min(45vw, 300px); }
}
.contact-hero-decor { position: relative; overflow: hidden; }
.contact-hero-decor .ds-hero-inner { position: relative; z-index: 1; }
.check-body-decor { position: relative; overflow: hidden; }
.check-body-decor .check-body-container { position: relative; z-index: 1; }

.blog-title-bar-text {
  margin: 0;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* ---------- Blog list — 카테고리/시리즈 드롭다운 + 해시태그 내비게이션 바 (2026-08-12) ---------- */
.blog-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1rem;
  padding: 1.1rem 1.4rem;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 2.2rem;
}
.blog-filter-select {
  appearance: none;
  -webkit-appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236b6b6b' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E") no-repeat right 0.85rem center / 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.5rem 2.3rem 0.5rem 1.1rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}
.blog-filter-select:hover { border-color: var(--header-green); }
.blog-filter-divider { width: 1px; align-self: stretch; background: var(--line); }
.blog-filter-tags { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; }

/* ---------- Blog list — 가로형 카드(썸네일 정사각형 크롭 + 텍스트) ---------- */
.post-list { display: flex; flex-direction: column; }
.post-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 1.8rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--line);
}
.post-row:first-child { padding-top: 0; }
.post-row-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-2);
}
.post-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-row-category {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--green-mid);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}
.post-row-title {
  font-size: 1.3rem;
  line-height: 1.4;
  margin-bottom: 0.6rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-row-title a { color: var(--ink); }
.post-row-title a:hover { color: var(--green-deep); }
.post-row-excerpt {
  color: var(--gray);
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 0.9rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-row-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.7rem; }
.post-row-tag { font-size: 0.85rem; font-weight: 600; color: var(--green-mid); }
.post-row-tag:hover { color: var(--green-deep); text-decoration: underline; }
.post-row-meta { font-size: 0.85rem; color: var(--gray-light); }
@media (max-width: 640px) {
  .post-row { grid-template-columns: 100px 1fr; gap: 1rem; padding: 1.4rem 0; }
  .post-row-title { font-size: 1.05rem; }
  .post-row-excerpt { -webkit-line-clamp: 2; font-size: 0.92rem; }
}

/* ---------- Blog pagination ---------- */
.pagination { display: flex; gap: 0.6rem; justify-content: center; align-items: center; margin-top: 2.5rem; }
.pagination a {
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--ink);
  transition: border-color 0.18s ease, color 0.18s ease;
}
.pagination a:hover { border-color: var(--green-bright); color: var(--green-deep); }
.pagination-status { color: var(--gray); font-size: 0.88rem; }

/* ---------- Blog post detail ---------- */
.post-detail-meta { color: var(--gray); font-size: 0.9rem; margin-bottom: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.post-detail-thumb { width: 100%; max-height: 460px; object-fit: cover; border-radius: var(--radius); margin-bottom: 2.5rem; }
.post-detail-content { font-size: 1.02rem; line-height: 1.9; color: var(--ink); }
.post-detail-content p { margin-bottom: 1.4rem; }
/* HTML 직접 입력 글 — sandbox iframe (높이는 js/post_html_frame.js) */
.post-html-frame { display: block; width: 100%; height: 600px; border: 0; background: transparent; }
/* 본문 편집기(Quill)로 작성한 HTML 요소 */
.post-detail-content h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.45; margin: 2.8rem 0 1.1rem; }
.post-detail-content h3 { font-size: 1.22rem; font-weight: 700; line-height: 1.5; margin: 2.2rem 0 0.9rem; }
.post-detail-content h2:first-child, .post-detail-content h3:first-child { margin-top: 0; }
.post-detail-content strong { font-weight: 700; }
.post-detail-content a { color: var(--green-mid); text-decoration: underline; text-underline-offset: 3px; }
.post-detail-content ul, .post-detail-content ol { margin: 0 0 1.4rem; padding-left: 1.5rem; }
.post-detail-content ul { list-style: disc; }
.post-detail-content ol { list-style: decimal; }
.post-detail-content li { margin-bottom: 0.35rem; }
.post-detail-content li > ul, .post-detail-content li > ol { margin: 0.35rem 0 0; }
.post-detail-content blockquote { margin: 0 0 1.4rem; padding: 0.3rem 0 0.3rem 1.2rem; border-left: 3px solid var(--green-mid); color: var(--gray); }
.post-detail-content img { height: auto; margin: 0.5rem auto; border-radius: var(--radius); }
.post-detail-content iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; margin: 0 0 1.4rem; border-radius: var(--radius); }
.post-detail-content pre { margin: 0 0 1.4rem; padding: 1rem 1.2rem; background: #f4f6f5; border-radius: var(--radius); overflow-x: auto; font-size: 0.9rem; line-height: 1.6; }
.post-detail-content .ql-align-center { text-align: center; }
.post-detail-content .ql-align-right { text-align: right; }
.post-detail-content .ql-align-justify { text-align: justify; }
.post-detail-tags { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 2rem; }

/* 공유 버튼 + 복사 완료 토스트 */
.post-detail-share { display: inline-flex; align-items: center; gap: 0.6rem; position: relative; }
.post-detail-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.post-detail-share-btn:hover { border-color: var(--header-green); color: var(--header-green); }
.post-detail-toast {
  position: absolute;
  left: 0;
  top: calc(100% + 0.5rem);
  padding: 0.5rem 0.9rem;
  background: var(--ink);
  color: #fff;
  font-size: 0.8rem;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 5;
}
.post-detail-toast.show { opacity: 1; transform: translateY(0); }

/* ---------- Blog 관련 글 (post detail 하단) ---------- */
.related-posts { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
.related-posts-title { font-size: 1.05rem; color: var(--ink); margin-bottom: 1.3rem; }
.related-posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.related-post-card { display: block; color: inherit; }
.related-post-thumb { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--paper-2); margin-bottom: 0.7rem; }
.related-post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.related-post-title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.related-post-card:hover .related-post-title { color: var(--green-deep); }
@media (max-width: 700px) {
  .related-posts-grid { grid-template-columns: 1fr; }
}

/* ---------- Track record band ---------- */
.trackrecord-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
.trackrecord-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius); padding: 1.8rem; }
.trackrecord-card h3 { font-size: 1.05rem; margin-bottom: 0.9rem; color: #fff; font-style: normal; }
.trackrecord-card p { color: rgba(255,255,255,0.72); font-size: 0.88rem; line-height: 1.6; }
@media (max-width: 900px) { .trackrecord-grid { grid-template-columns: 1fr; } }

/* ---------- Login modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 26, 20, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s;
}
.modal-overlay.open { opacity: 1; visibility: visible; }
body.modal-open, body.drawer-open { overflow: hidden; }
.modal-box {
  background: #fff;
  border-radius: var(--radius);
  padding: 2.2rem 1.8rem 1.8rem;
  width: 100%;
  max-width: 380px;
  position: relative;
  box-shadow: 0 24px 60px rgba(0,0,0,0.25);
}
.modal-close {
  position: absolute;
  top: 0.8rem;
  right: 0.9rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gray);
  padding: 0.4rem;
}
.modal-close:hover { color: var(--ink); }
.modal-title { font-size: 1.35rem; margin-bottom: 1.3rem; color: var(--ink); }

/* ---------- Admin table (user management) ---------- */
.admin-page-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 1.5rem;
}
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.admin-table th, .admin-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}
.admin-table th { color: var(--green-deep); font-weight: 700; background: var(--paper-2); }
.admin-table td.admin-table-actions { display: flex; gap: 0.5rem; align-items: center; }
.role-badge {
  display: inline-block;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}
.role-badge-admin { background: var(--green-deep); color: #fff; }
.role-badge-author { background: var(--green-soft); color: var(--green-deep); }
.btn-sm {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}
.btn-sm:hover { border-color: var(--green-bright); color: var(--green-deep); }
.btn-sm-danger { color: #a4372a; border-color: #f0d4d0; }
.btn-sm-danger:hover { background: #fdeceb; border-color: #a4372a; color: #a4372a; }

/* ---------- Track record — client name text list (GEO: 텍스트로 노출) ---------- */
.client-name-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
  max-width: 820px;
}
.client-name-list li { display: inline-flex; align-items: center; }
.client-name-list li:not(:last-child)::after {
  content: '·';
  margin: 0 0.55rem;
  color: var(--gray-light);
  font-weight: 400;
}
.client-name-list-label {
  margin-top: 2.2rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--green-mid);
}
.exec-divider {
  border: none;
  border-top: 1px solid var(--line);
  margin: 2.6rem 0;
}
.exec-block + .exec-block { margin-top: 2.6rem; }

/* ---------- Profile page — 경력 표 · 강의/자문 리스트 (/about/team) ---------- */
.profile-table-wrap { overflow-x: auto; margin-top: 1.6rem; }
.profile-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; max-width: 820px; }
.profile-table th, .profile-table td {
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.profile-table th { color: var(--green-deep); font-weight: 700; background: var(--paper-2); }
.profile-table td:first-child { white-space: nowrap; color: var(--gray); font-variant-numeric: tabular-nums; }
.profile-block { margin-top: 1.6rem; max-width: 820px; }
.profile-block h3,
.profile-block-title {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--green-mid);
  margin: 0 0 0.6rem;
}
.profile-block p { margin: 0 0 0.5rem; line-height: 1.7; }
.profile-book { margin-bottom: 0.7rem; }
.profile-book-title { font-weight: 700; }
.profile-book-meta { color: var(--gray); font-size: 0.9rem; }

/* ---------- 텍스트-이미지 좌우 분할 (레퍼런스 상세 섹션에서 이미지 밴드 연속 배치 방지용) ---------- */
.pb-split { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; max-width: 1080px; }
.pb-split-text p { margin: 0 0 0.7rem; line-height: 1.75; }
.pb-split-media img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: var(--ds-border); }
.pb-split-reverse .pb-split-media { order: -1; }
@media (max-width: 760px) {
  .pb-split { grid-template-columns: 1fr; gap: 1.2rem; }
  .pb-split-reverse .pb-split-media { order: 0; }
}

/* ---------- Marketing REFERENCE(PEACE & BLESS) — 세로 타임라인 개편(2026-08-14) ----------
   Consulting Process 구간의 .process-timeline(세로선+원형 노드+스크롤 진행바, main.js
   initProcessTimeline()이 두 페이지 모두 처리)을 그대로 재사용하고, 이 섹션 전용 보완만
   .reference-timeline으로 스코프한다. 캡션을 소제목 크기로 키우고, 단계 사이 간격을
   Consulting(2.2rem)보다 타이트하게 좁혀 사진+텍스트가 하나의 흐름으로 읽히게 한다. */
.reference-timeline .process-timeline-list { gap: 1.5rem; }
.reference-timeline .process-timeline-body h3 {
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: 0.7rem;
  color: var(--ink);
}
.reference-timeline .process-timeline-body p {
  color: var(--gray);
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 1.2rem;
}
.reference-timeline-media img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--hf-radius, 0);
}
.reference-timeline-media-2,
.reference-timeline-media-3 { display: grid; gap: 1rem; }
.reference-timeline-media-2 { grid-template-columns: repeat(2, 1fr); }
.reference-timeline-media-3 { grid-template-columns: repeat(3, 1fr); }
.reference-timeline-media-2 img,
.reference-timeline-media-3 img { aspect-ratio: 3 / 2; }
@media (max-width: 640px) {
  .reference-timeline-media-2,
  .reference-timeline-media-3 { grid-template-columns: 1fr; }
}

/* ---------- Books page (/about/books) ---------- */
.book-section + .book-section { margin-top: 1rem; }
/* 이미지 띠 2개를 삭제한 자리(책1-책2 사이, 책2-페이지 끝 사이) 대체용 — 화려하지 않게
   얇은 반투명 라인 하나로만 구분(2026-08-19). 좌우 끝까지 닿지 않고 가운데만 짧게
   떠 있는 형태로 요청받아 폭을 제한하고 margin:auto로 중앙 정렬했다. */
.book-divider-wrap { padding: 3rem 0; }
.book-divider {
  width: min(1120px, 90%);
  height: 6px;
  margin: 0 auto;
  border: none;
  background: var(--line);
}
.book-title-en { font-style: normal; }
.book-feature-meta { color: var(--gray); font-size: 0.95rem; margin: 0.3rem 0 1.6rem; }
.book-feature-img { display: block; max-width: 420px; width: 100%; margin: 0 0 1.8rem; border-radius: var(--hf-radius,0); }
.book-feature-img-large { max-width: 600px; margin-left: auto; margin-right: auto; }
.profile-block.book-feature-body-large p { font-size: 1.15rem; line-height: 1.8; }

/* ---------- "아마존을 넘어서다" 본문을 흰색 카드로 감싸기 (2026-08-12).
   제목/저자 정보와 이미지+구매버튼은 카드 처리 대상이 아니라 배경 위에 그대로 둔다.
   --ds-radius/--ds-border는 :root 전역 토큰(0/헤어라인)이라 .ds-page 안이든 밖이든
   Consulting 페이지의 .framework-card/.timeline-card와 항상 동일한 톤으로 렌더링된다. */
.book-feature-card {
  background: var(--cream);
  border: var(--ds-border);
  border-radius: var(--ds-radius);
  padding: 2.4rem 2.2rem;
}
@media (max-width: 640px) {
  .book-feature-card { padding: 1.6rem 1.3rem; }
}

/* ---------- "아마존을 넘어서다" 본문 — 카드 배경 제거, 흰 배경 위에 텍스트만
   (2026-08-19). 문단 내부는 자동 줄바꿈만(강제 br 없음), 문단 사이는 줄간격의 2배로
   벌려 문단 구분을 표시한다 — line-height가 1.8em이므로 margin-bottom: 3.6em(=1.8em×2). */
.book-feature-plain { background: none; border: none; border-radius: 0; padding: 0; }
.book-feature-plain p { margin-bottom: 3.6em; }
.book-feature-plain p:last-child { margin-bottom: 0; }

/* ---------- "아마존을 넘어서다" 좌(이미지+구매버튼)/우(본문) 2단 카드 (2026-08-12) ---------- */
.book-feature-split {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 2.8rem;
  align-items: start;
  margin-top: 1.6rem;
}
.book-feature-split-img { display: block; width: 100%; border-radius: var(--hf-radius,0); margin-bottom: 1.4rem; }
.book-feature-split-media .hero-actions { margin-top: 0; }
.book-feature-split-text { margin-top: 0; }
@media (max-width: 860px) {
  .book-feature-split { grid-template-columns: 1fr; gap: 1.6rem; }
  .book-feature-split-img { max-width: 420px; margin-left: auto; margin-right: auto; }
  .book-feature-split-media .hero-actions { max-width: 420px; margin-left: auto; margin-right: auto; }
}
.book-feature-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 420px;
  width: 100%;
  aspect-ratio: 3 / 4;
  margin: 0 0 1.8rem;
  border: 1px dashed var(--line);
  border-radius: var(--hf-radius,0);
  background: var(--paper-2);
  color: var(--gray-light);
  font-size: 0.85rem;
}
.toc-block { max-width: 760px; margin-top: 1.6rem; font-size: 1.02rem; line-height: 1.9; }
.toc-part { margin-top: 1.4rem; font-weight: 700; color: var(--green-deep); }
.toc-part:first-child { margin-top: 0; }
.toc-item { padding-left: 1.2rem; color: var(--ink); }
.toc-item-num { color: var(--green-mid); font-weight: 700; margin-right: 0.4rem; }
.purchase-list { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.4rem; list-style: none; padding: 0; }
.purchase-list a, .purchase-list span {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}
.purchase-list a { text-decoration: none; }
.purchase-list a:hover { border-color: var(--green-bright); color: var(--green-deep); }
.purchase-list span { color: var(--gray-light); }
.purchase-note { margin-top: 0.7rem; font-size: 0.82rem; color: var(--gray-light); }

/* ---------- Media page (/about/media) ---------- */
.media-year-group { margin-top: 2.2rem; }
.media-year-group:first-child { margin-top: 1.6rem; }
.media-year-label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--green-mid);
  margin-bottom: 0.9rem;
}
.media-list { list-style: none; margin: 0; padding: 0; max-width: 820px; }
.media-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.8rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
}
.media-outlet {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--green-deep);
  font-size: 0.88rem;
  min-width: 88px;
}
.media-headline { flex: 1 1 320px; color: var(--ink); }
.media-headline a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.media-headline a:hover { color: var(--green-deep); border-color: var(--green-bright); }
.media-date { flex: 0 0 auto; font-size: 0.82rem; color: var(--gray-light); }
.media-pending { font-size: 0.82rem; color: var(--gray-light); font-style: italic; }

.video-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.6rem; margin-top: 1.6rem; max-width: 940px; }
.video-card { display: block; text-decoration: none; color: inherit; }
.video-card-thumb { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/9; background: var(--paper-2); }
.video-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-card-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(15,26,43,0.25);
}
.video-card-play::before {
  content: '▶';
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.92); color: var(--green-deep);
  font-size: 0.85rem; padding-left: 3px;
}
.video-card-body { padding-top: 0.7rem; }
.video-card-outlet { font-size: 0.8rem; font-weight: 700; color: var(--green-mid); }
.video-card-title { font-size: 0.92rem; font-weight: 600; margin-top: 0.2rem; line-height: 1.5; }
.video-card-title a { color: var(--ink); text-decoration: none; }
.video-card-title a:hover { color: var(--green-deep); }
.video-card-sub { font-size: 0.82rem; color: var(--gray); margin-top: 0.3rem; }
.video-card-body-wrap { display: block; }

/* ---------- Profile intro anchor — CEO 발표 사진, About 페이지 .ceo-split과 비슷한 비중으로 배치.
   원본이 600×400(3:2) 저해상도라 4:5 세로 크롭 대신 원본 비율 그대로(3:2) 키워서
   업스케일/크롭 열화 없이 표시한다. ---------- */
.profile-intro-anchor {
  display: grid;
  grid-template-columns: minmax(320px, 440px) 1fr;
  gap: 2.4rem;
  align-items: center;
  margin-bottom: 1.6rem;
}
.profile-intro-anchor img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
}
.profile-intro-anchor h2 { margin-bottom: 0.6rem; }
.profile-intro-anchor p { margin: 0; }
@media (max-width: 860px) {
  .profile-intro-anchor { grid-template-columns: 1fr; gap: 1.2rem; }
}

/* ---------- FAQ accordion (native <details>/<summary>) — /faq, /services/ax-academy ---------- */
.faq-list { max-width: 820px; margin-top: 1.6rem; }
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 1.1rem 0;
}
.faq-item summary {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  cursor: pointer;
  font-weight: 700;
  color: var(--ink);
  font-size: 1rem;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  margin-left: auto;
  color: var(--green-mid);
  font-weight: 700;
  font-size: 1.2rem;
  flex: 0 0 auto;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item summary .faq-q-mark { color: var(--green-mid); flex: 0 0 auto; }
.faq-answer { margin-top: 0.9rem; color: var(--gray); line-height: 1.8; font-size: 1.05rem; }
.faq-answer p + p { margin-top: 0.9rem; }

/* ---------- Status badge — 진행 중 표기 (Cases 상세) ---------- */
.status-badge {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--green-soft);
  color: var(--green-deep);
  margin-left: 0.6rem;
  vertical-align: middle;
}

/* ---------- Case detail pages (/cases/{slug}) ---------- */
.case-meta-note {
  margin-top: 2rem;
  padding: 1.1rem 1.3rem;
  border-left: 3px solid var(--green-mid);
  background: var(--paper-2);
  color: var(--gray);
  font-size: 0.9rem;
  line-height: 1.7;
}

/* ================================================================
   홈 하단 섹션 — 브랜드 가이드 톤 재구성 (2026-08)
   .home-content 안에서만 적용되는 스코프 오버라이드. .section/.eyebrow/.card 등은
   about/services/contact 등 다른 모든 페이지가 그대로 쓰고 있으므로 그 공용 규칙 자체는
   건드리지 않고, 홈페이지 전용 래퍼(index.html)에만 새 스타일을 얹는다.
   콘텐츠(카피/수치/고객사명)는 그대로 — 여기는 전부 시각 스타일만. ================================ */

/* 배경은 항상 흰색, 섹션 구분은 색 대신 얇은 보더로 */
.home-content {
  background: var(--hf-white, #FFFFFF);
  --line: rgba(13,13,13,.14);
}
.home-content .section-alt { background: var(--hf-white, #FFFFFF); }
.home-content .section,
.home-content .impact-band,
.home-content .pullquote {
  border-top: 1px solid rgba(13,13,13,.14);
}

/* eyebrow — 전부 영문 라벨(Positioning/Track Record/...)이라 Archivo 적용.
   2026-08-11: POSITIONING 섹션에만 있던 31px/32px 크기를 juno 지시로 홈 전 섹션(eyebrow+H2)에
   통일 — 기본값 자체를 바꿔서 섹션별 개별 오버라이드를 없앴다(아래 .positioning-block 전용
   규칙은 그래서 제거됨, POSITIONING의 h2 인라인 style도 함께 정리). */
.home-content .eyebrow {
  font-family: var(--hf-font-en);
  font-size: 31px;
  font-weight: 700;
  letter-spacing: 0.18em;
  /* 리터럴 Amber(#F5A524/#E0940F)는 흰 배경 텍스트로 쓰면 AA 대비(2~2.5:1) 미달이라
     --ds-amber-deep(4.75:1, --hf-amber-text로 재매핑됨)을 대신 사용 */
  color: var(--hf-amber-text, #8A5008);
}
.home-content .solutions-hero .eyebrow { color: var(--hf-amber-text, #8A5008); }

.home-content h2.section-title {
  font-size: 32px;
  line-height: 1.2;
}

.home-content .section-lead,
.home-content .section p:not(.eyebrow) {
  font-size: 19px;
  line-height: 1.75;
}
.home-content .card p,
.home-content .solution-card p,
.home-content .reference-card p {
  font-size: 17px;
  line-height: 1.75;
}

/* POSITIONING 섹션 — pptx slide 6과 문장 단위로 대조해 juno가 직접 지정한 스펙(2026-08-11).
   위 .home-content .section p(19px)보다 더 구체적인 선택자로 이 섹션 안에서만 이긴다.
   본문 색은 사이트 기본 --ink(#282828)/--gray(#6b6b6b) 두 톤이 섞여 있던 걸 rgb(13,13,13)
   하나로 통일 — eyebrow의 amber(--hf-amber-text)만 예외로 유지. */
.home-content .positioning-block.section p:not(.eyebrow) {
  font-size: 23px;
  line-height: 1.5;
  color: rgb(13, 13, 13);
}
.positioning-block h2.section-title { color: rgb(13, 13, 13); }
/* 2026-08-19 — 대표님 pptx 피드백(slide 1): 9줄이 전부 개별 줄로 넓게 떨어져 보이던 것을
   4줄+5줄 두 문단으로 재구성. 문단 내부는 br로만 줄바꿈해 위 line-height(1.5)를 그대로 타게
   해서 균일하게 타이트하고, 문단 사이만 margin-top으로 확실히 띄운다("네모박스 하나" 정도). */
.positioning-block .positioning-para { margin-bottom: 0; }
.positioning-block .positioning-para-2 { margin-top: 5.5rem; }

/* ---------- 최상단 회사 소개 문구 — 브랜드 각인용 인용구 처리(2026-08-13).
   위 .positioning-block p 공통 규칙(23px/rgb(13,13,13))보다 이겨야 하므로 동일한
   접두 체인(.home-content .positioning-block.section p)에 클래스만 추가해 specificity를
   맞추고 소스 순서로 확실히 이기게 한다. 타이핑 애니메이션은 main.js의
   initHomeIntroTyping()이 담당(스크롤 진입 시 1회, prefers-reduced-motion에서는 생략하고
   서버 렌더된 전체 텍스트를 그대로 노출). */
.home-content .positioning-block.section p.home-intro-quote {
  font-size: clamp(28px, 3.3vw, 38px);
  line-height: 1.5;
  font-weight: 600;
  color: var(--gray);
  margin-bottom: 0;
}
.home-intro-quote-mark {
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--gray-light);
}
/* 타이핑 도중엔 닫는 따옴표가 문장 중간에 먼저 나타나 보이면 어색하므로, 타이핑이
   끝나 .is-typing이 빠질 때까지 숨겨둔다(닫는 따옴표는 별도 static span이라 타이핑
   진행률과 무관하게 항상 렌더링되어 있었음 — 2026-08-13 확인). */
.home-intro-quote-mark-close {
  transition: opacity 0.3s ease;
}
.home-intro-quote-text.is-typing ~ .home-intro-quote-mark-close {
  opacity: 0;
}
.home-intro-quote-text.is-typing::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 0.9em;
  margin-left: 3px;
  background: var(--gray-light);
  vertical-align: -0.1em;
  animation: homeIntroCaretBlink 0.9s steps(1) infinite;
}
@keyframes homeIntroCaretBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .home-intro-quote-text.is-typing::after { animation: none; opacity: 0; }
}

/* 카드형 콘텐츠 — radius:0 + hairline border, 그림자 전면 금지(hover 포함) */
.home-content .card,
.home-content .phase-card,
.home-content .solution-card,
.home-content .reference-card {
  border-radius: var(--hf-radius, 0);
  box-shadow: none;
  border: var(--hf-border);
}
.home-content .card:hover,
.home-content .solution-card:hover,
.home-content .reference-card:hover {
  box-shadow: none;
  border-color: var(--hf-primary-green);
}

/* 숫자 넘버링 — 큰 볼드 스타일(브랜드 가이드의 01~06 리스트 패턴 참고, 실측 불가로 근사) */
.home-content .card-num {
  width: auto;
  height: auto;
  min-width: 0;
  border-radius: 0;
  background: none;
  color: var(--hf-primary-green, #0E3B2C);
  font-size: 2.25rem;
  font-weight: 800;
  font-family: var(--hf-font-en);
  margin-bottom: 0.75rem;
}
.home-content .solution-card-num,
.home-content .phase-card-label {
  color: var(--hf-amber-text, #8A5008);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--hf-font-en);
}

/* CEO 인용구 섹션 — 사진 배경 대신 Primary Green 솔리드 + 흰 텍스트 + 은은한 라인아트 텍스처 */
.home-content .pullquote {
  background-image: none;
  background-color: var(--hf-primary-green, #0E3B2C);
}
.home-content .pullquote::before {
  /* 은은한 라인아트 텍스처 — 성장을 상징하는 가는 상승 곡선 3줄(브랜드 가이드 STATEMENT
     섹션 참고, 파일 미첨부라 절제된 자체 해석). 배경색 없이 SVG만 얹어 Primary Green이
     그대로 비치게 한다 */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 400' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='white' stroke-opacity='0.07' stroke-width='1.5'%3E%3Cpath d='M0 320 C 200 320 250 200 450 200 S 650 80 800 80'/%3E%3Cpath d='M0 360 C 220 360 270 260 470 260 S 660 150 800 150'/%3E%3Cpath d='M0 260 C 180 260 230 120 430 120 S 640 20 800 20'/%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat;
}
.home-content .pullquote-attribution { color: rgba(255,255,255,0.78); }

/* 카드 내부 이미지도 카드와 같은 radius로 통일(overflow:hidden 부모가 이미 처리) */
.home-content .reference-card-img { border-radius: 0; }

/* 전역 .btn(다른 미전환 페이지가 여전히 참조 — blog 상세 등)은 그대로 두고, 홈 안에서만
   radius:0으로 스코프 오버라이드 */
.home-content .btn { border-radius: var(--ds-radius, 0); }

/* =========================================================================
   브랜드 디자인 시스템 v1.0 — 서브페이지 전용(홈 "/"·헤더·푸터 제외)
   적용 대상 전 페이지는 본문을 <div class="ds-page">로 감싸서 이 블록의 스코프
   안에 들어오게 한다. --ds-* 토큰은 위 :root 참고. 기존 .card/.pf-card/
   .reference-card 등은 클래스명을 유지한 채(마크업 재사용) --radius/--line을
   .ds-page 안에서 재정의해 라운드 0 + 헤어라인 보더를 자동으로 물려받게 하고,
   하드코딩된 hover box-shadow만 별도로 제거한다. 버튼만 예외 — 전역
   .btn-primary/.btn-secondary는 그대로 두고(다른 페이지가 계속 참조) 이번
   대상 페이지에는 신규 .ds-btn-* 클래스를 마크업에 직접 사용한다.
   ========================================================================= */

.ds-page {
  --radius: 0;
  --hf-radius: 0;
  --hf-radius-sm: 0;
  --line: rgba(13,13,13,.14);
  /* 레거시 그린 변수를 --ds-* 값으로 재정의 — .eyebrow/.card-num/.status-badge/
     .filter-chip.active 등 기존 클래스가 참조하는 색이 마크업 수정 없이 새 브랜드
     팔레트로 자동 치환된다(카드/버튼 색은 별도로 신규 클래스 사용) */
  --header-green: var(--ds-primary);
  --green-deep: var(--ds-primary);
  --green-mid: var(--ds-green-600);
  --green-bright: var(--ds-green-600);
  --green-soft: var(--ds-surface);
  letter-spacing: -0.01em;
}
.ds-page p,
.ds-page li,
.ds-page .section-lead,
.ds-page .faq-answer {
  line-height: 1.75;
}

/* 그림자 전면 금지 — 카드/버튼 hover 등 하드코딩된 box-shadow 제거 */
.ds-page .card:hover,
.ds-page .service-card:hover,
.ds-page .solution-card:hover,
.ds-page .reference-card:hover,
.ds-page .pf-card:hover,
.ds-page .contact-card,
.ds-page .contact-nudge-card,
.ds-page .form-message {
  box-shadow: none;
}
.ds-page .contact-card { background: var(--ds-base); border: var(--ds-border); }

/* 라운드 0 하드코딩(변수 미사용) 지점 — 필터칩/뱃지/폼 인풋/제출버튼 */
.ds-page .filter-chip,
.ds-page .status-badge,
.ds-page .form-group input,
.ds-page .form-group select,
.ds-page .form-group textarea,
.ds-page .privacy-box,
.ds-page .form-message,
.ds-page .submit-btn,
.ds-page .check-option,
.ds-page .check-q-input,
.ds-page .check-progress-seg,
.ds-page .check-q-warning,
.ds-page .check-done-icon {
  border-radius: 0;
}
.ds-page .check-option input { accent-color: var(--ds-primary); }
.ds-page .filter-chip.active { background: var(--ds-primary); border-color: var(--ds-primary); }
.ds-page .filter-chip:hover { border-color: var(--ds-primary); color: var(--ds-primary); }

/* 폼(Contact) — input radius 0(위 처리), 체크박스는 진그린 채움 */
.ds-page .privacy-check input[type="checkbox"] { accent-color: var(--ds-primary); width: 16px; height: 16px; }
.ds-page .form-group input:focus,
.ds-page .form-group select:focus,
.ds-page .form-group textarea:focus { border-color: var(--ds-primary); }
.ds-page .submit-btn {
  background: var(--ds-primary);
  color: var(--ds-base);
  font-family: var(--ds-font-en);
  font-weight: 800;
}
.ds-page .submit-btn:hover { background: var(--ds-green-600); }

/* 이미지는 항상 컬러로 유지 — 흑백/그레이스케일 필터 금지(전사 확정 원칙) */

/* 종횡비 — 21:9(풀블리드)·3:2(케이스/인물)·1:1(인사이트/블로그 썸네일)만 사용.
   2026-08-19 — Cases 그리드 썸네일(.pf-card-visual)은 완전 정사각형 요청으로 3:2에서 분리. */
.ds-page .pf-card-visual {
  aspect-ratio: 1 / 1;
  height: auto;
}
.ds-page .reference-card-img,
.ds-page .solution-card-thumb {
  aspect-ratio: 3 / 2;
  height: auto;
}
.ds-page .photo-card img {
  aspect-ratio: 1 / 1;
  height: auto;
}

/* ---------- 서브페이지 히어로 — 흰 배경, 좌우 2단 분할 (templates/homepage/_page_hero.html) ---------- */
.ds-hero {
  background: var(--ds-base);
  border-bottom: var(--ds-border);
}
.ds-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ds-space-7);
  align-items: center;
  padding: var(--ds-space-8) 0;
}
.ds-hero-eyebrow {
  font-family: var(--ds-font-en);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-amber-deep);
  margin-bottom: var(--ds-space-3);
}
.ds-hero-title {
  font-family: var(--ds-font-kr);
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  line-height: 1.32;
  color: var(--ds-ink);
  margin-bottom: var(--ds-space-3);
}
.ds-hero-desc {
  font-family: var(--ds-font-kr);
  letter-spacing: -0.01em;
  line-height: 1.75;
  font-size: 1.05rem;
  color: var(--ds-ink);
  opacity: 0.72;
  max-width: 520px;
  margin-bottom: var(--ds-space-5);
}
.ds-hero-right { position: relative; }
.ds-hero-photo {
  aspect-ratio: 3 / 2;
  background-image: var(--ds-hero-image);
  background-size: cover;
  background-position: center;
}
.ds-hero-photo-pending {
  aspect-ratio: 3 / 2;
  background: var(--ds-surface);
  border: var(--ds-border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ds-hero-photo-pending::after {
  content: '이미지 준비 중';
  font-family: var(--ds-font-kr);
  font-size: 0.85rem;
  color: var(--ds-ink);
  opacity: 0.4;
}
.ds-page .ds-photo-pending {
  aspect-ratio: 3 / 2;
  background: var(--ds-surface);
  border: var(--ds-border);
}
.ds-hero-stat-card {
  background: var(--ds-primary);
  color: var(--ds-base);
  padding: var(--ds-space-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ds-space-5);
}
.ds-hero-stat-value {
  font-family: var(--ds-font-en);
  font-weight: 900;
  font-size: clamp(1.9rem, 2.6vw, 2.5rem);
  line-height: 1;
}
.ds-hero-stat-label {
  font-family: var(--ds-font-kr);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.78);
  margin-top: var(--ds-space-2);
}

@media (max-width: 860px) {
  .ds-hero-inner { grid-template-columns: 1fr; gap: var(--ds-space-5); padding: var(--ds-space-6) 0; }
  .ds-hero-right { order: -1; }
  /* Contact 페이지의 우측은 사진/통계가 아니라 폼이라 이미지 우선 순서가 맞지 않는다 —
     모바일에서도 안내 텍스트를 먼저 읽고 폼을 채우도록 원래 순서 유지 */
  .ds-hero-right-form { order: 0; }
}
/* 2026-08-31 — 모바일 공통 이슈 1차: 이 v1 히어로는 Contact 페이지 전용(.ds-hero-v2가
   아닌 기본 .ds-hero-inner를 직접 사용). 위 860px 규칙과 동일하게 padding 좌우가 0으로
   비어 있어 텍스트가 화면 가장자리에 붙고, 안내 문단이 플로팅 CTA와 겹치던 문제 수정. */
@media (max-width: 760px) {
  .ds-hero-inner {
    padding-left: var(--gutter);
    padding-right: calc(var(--gutter) + 40px);
  }
  .ds-hero-title { word-break: keep-all; overflow-wrap: break-word; }
  .ds-hero-desc { word-break: keep-all; overflow-wrap: break-word; }
}

/* ---------- 서브페이지 히어로 v2 — 전체 배경 사진 + 흰 타이틀 (templates/homepage/_page_hero.html 전용).
   Contact 페이지는 위 v1(.ds-hero-inner 좌우 2단, 흰 배경)을 그대로 쓰므로 이 블록의 영향을 받지 않는다. ---------- */
.ds-hero-v2 {
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: none;
  background: var(--ds-primary);
  color: #fff;
}
.ds-hero-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--ds-hero-bg-image);
  background-size: cover;
  background-position: var(--ds-hero-bg-position, center);
  transform-origin: center center;
  z-index: 0;
  /* 서브페이지 히어로는 사진이 1장뿐이라 홈처럼 크로스페이드로 scale을 리셋할 수 없다.
     대신 scale(1)~scale(1.07) 사이를 alternate로 왕복해 같은 "천천히 확대되는" 느낌을 낸다
     (2026-08-14). .ds-hero-v2에 이미 overflow:hidden이 있어 확대분은 그 안에서만 클리핑된다. */
  animation: ds-hero-bg-zoom 13s ease-in-out infinite alternate;
}
@keyframes ds-hero-bg-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
  .ds-hero-v2::before { animation: none; }
}
.ds-hero-v2::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(15, 42, 31, 0.6);
  z-index: 1;
}
.ds-hero-v2 .ds-hero-decor {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(46vw, 460px);
  z-index: 1;
  pointer-events: none;
}
.ds-hero-v2 .ds-hero-decor svg { display: block; width: 100%; height: auto; }
.ds-hero-v2 .ds-hero-inner {
  position: relative;
  z-index: 2;
  display: block;
  padding: var(--ds-space-8) 0;
}
/* 2026-08-11 재확대 — eyebrow 2배 이상, 설명문단 2배(36px 근처) + 컨테이너를 사이트 표준
   --container까지 넓혀서(기존 520px/680px 병목 제거) 단어 중간 줄바꿈 방지.
   About 전용 서브타이틀 오버라이드(23px)는 새 공통값(36px)보다 작아져 제거 — 공통값 사용.
   2026-08-12 — 전사 컨테이너 확대(1160→1400px)에 맞춰 히어로 컨텐츠 폭도 함께 확대. */
.ds-hero-v2 .ds-hero-content { max-width: 1400px; }
.ds-hero-v2 .ds-hero-eyebrow { color: var(--ds-amber); font-size: 27px; }
.ds-hero-v2 .ds-hero-title { color: #fff; font-size: clamp(2.75rem, 4.4vw, 4rem); }
.ds-hero-v2 .ds-hero-desc { color: rgba(255, 255, 255, 0.86); opacity: 1; font-size: 38px; max-width: 1300px; }
.ds-hero-v2 .ds-hero-stat-row {
  display: flex;
  gap: var(--ds-space-6);
  flex-wrap: wrap;
  margin-top: var(--ds-space-5);
}
.ds-hero-v2 .ds-hero-stat-inline .ds-hero-stat-value {
  font-family: var(--ds-font-en);
  font-weight: 900;
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  color: #fff;
  line-height: 1;
}
.ds-hero-v2 .ds-hero-stat-inline .ds-hero-stat-label {
  font-family: var(--ds-font-kr);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 4px;
}
.ds-hero-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: var(--ds-space-2); }
.ds-hero-v2 .ds-btn-outline { color: var(--ds-base); border-color: var(--ds-base); }
.ds-hero-v2 .ds-btn-outline:hover { background: var(--ds-base); color: var(--ds-primary); }

@media (max-width: 860px) {
  .ds-hero-v2 { padding: var(--ds-space-6) 0; }
  .ds-hero-v2 .ds-hero-decor { width: 70vw; opacity: 0.7; }
}
/* 2026-08-31 — 모바일 공통 이슈 1차: 서브페이지 히어로(.ds-hero-v2, Consulting·Marketing·
   About 계열·브랜드무료진단 등 _page_hero.html을 쓰는 모든 페이지가 공유)에서 제목이
   데스크톱 clamp 최저값(44px)까지만 줄어들고, 설명문은 아예 고정 38px라 모바일 폭에서
   전혀 줄어들지 않아 글자가 화면 밖으로 흘러넘치던 문제. 좌우 패딩도 .ds-hero-inner의
   `padding: var(--ds-space-8) 0`가 가로 방향을 0으로 만들어버려 텍스트가 뷰포트 가장자리에
   그대로 붙어있었다 — longhand로 좌우만 별도로 채워 세로 패딩은 건드리지 않는다.
   우측은 플로팅 CTA(위에서 폭을 줄여둔 상태)와 안 겹치도록 여유를 더 둠. */
@media (max-width: 760px) {
  .ds-hero-v2 .ds-hero-inner {
    padding-left: var(--gutter);
    padding-right: calc(var(--gutter) + 40px);
  }
  .ds-hero-v2 .ds-hero-title {
    font-size: clamp(1.6rem, 7vw, 2.2rem);
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  .ds-hero-v2 .ds-hero-desc {
    font-size: 1rem;
    line-height: 1.6;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
}

/* About 히어로 전용 — 텍스트가 위쪽에 붙어 아래 여백이 붕 떠 보이던 것을 세로 중앙
   정렬로 수정, 가로도 text-align:center 처리(2026-08-19, pptx slide 18). 다른 서브페이지
   (.ds-hero-v2 공통)는 기존 상단 정렬 그대로 두기 위해 about-hero 클래스로만 스코프. */
.about-hero { align-items: stretch; }
.about-hero .ds-hero-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  text-align: center;
}
.about-hero .ds-hero-content { text-align: center; }

/* 미디어 페이지 히어로 — "미디어" 한 단어만 남기고 가로 중앙 정렬(2026-08-19). */
.media-hero-centered .ds-hero-content { text-align: center; margin: 0 auto; }

/* 오시는 길 히어로 — "오시는 길" 한 단어만 가로 중앙 정렬 + 배경 노출 기준점을 하단으로
   (2026-08-19, 사무실 간판/창문이 잘려 콘크리트 벽만 보이던 문제). hero_position으로
   background-position은 이미 처리되지만, .ds-hero-v2::before의 확대 애니메이션은
   transform-origin:center center 고정이라 그대로 두면 줌 도중 하단 기준점이 위아래로
   흔들린다 — 이 페이지만 transform-origin을 bottom으로 맞춰 하단 앵커를 유지한다. */
.location-hero-centered .ds-hero-content { text-align: center; margin: 0 auto; }
.location-hero-centered::before { transform-origin: center 82%; }

/* Cases 페이지 히어로 — "Our Work" 한 단어만 가로 중앙 정렬(2026-08-19). 배경 이미지는
   변경 없음. */
.cases-hero-centered .ds-hero-content { text-align: center; margin: 0 auto; }

/* ---------- 버튼 — 이번 대상 페이지 전용(전역 .btn-primary/.btn-secondary는 건드리지 않음) ---------- */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  padding: 0 var(--ds-space-5);
  border-radius: var(--ds-radius);
  font-family: var(--ds-font-kr);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  border: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ds-btn-primary { background: var(--ds-amber); color: var(--ds-primary); }
.ds-btn-primary:hover { background: var(--ds-amber-deep); color: var(--ds-base); }
.ds-btn-secondary { background: var(--ds-primary); color: var(--ds-base); }
.ds-btn-secondary:hover { background: var(--ds-green-600); }
.ds-btn-outline { background: transparent; color: var(--ds-primary); border: 1px solid var(--ds-primary); }
.ds-btn-outline:hover { background: var(--ds-primary); color: var(--ds-base); }
/* 진그린 배경(.section-dark) 위에서는 Outline/Secondary 둘 다 배경색과 겹쳐 보이지 않으므로
   흰 테두리/텍스트로 반전 — 새 변형 클래스가 아니라 문맥에 따른 색만 조정 */
.ds-page .section-dark .ds-btn-outline { color: var(--ds-base); border-color: var(--ds-base); }
.ds-page .section-dark .ds-btn-outline:hover { background: var(--ds-base); color: var(--ds-primary); }

@media (prefers-reduced-motion: reduce) {
  .ds-btn { transition: none; }
}

/* =====================================================================
   About 5페이지(회사소개/대표 프로필/저서/미디어/오시는 길) 디자인 개선(2026-08-14)
   ===================================================================== */

/* ---------- 0. 공통 크로스 내비게이션 ---------- */
.about-crossnav { background: var(--ds-primary, #0E3B2C); }
.about-crossnav-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.2rem);
  padding: 0.9rem 0;
}
.about-crossnav-tab {
  color: rgba(255,255,255,0.6);
  font-weight: 600;
  font-size: 0.95rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease;
}
.about-crossnav-tab:hover { color: rgba(255,255,255,0.88); }
.about-crossnav-tab.is-active {
  color: #fff;
  font-weight: 800;
  border-bottom-color: var(--hf-amber, #F5A524);
}
/* 2026-08-31 — 모바일 공통 이슈 2차: 히어로가 짧은 About 계열 페이지(회사소개/저서/미디어/
   오시는 길)에서 이 탭 바가 화면 오른쪽 플로팅 CTA와 같은 높이에 걸려, 가운데 정렬된
   탭 그룹의 마지막 탭("오시는 길")이 CTA 뒤에 가려 잘려 보이던 문제. 대표 프로필만 히어로가
   길어 우연히 안 겹쳤을 뿐 — 페이지별 히어로 높이에 기대지 않고, 탭 그룹 자체가 CTA 폭만큼
   오른쪽을 비우고 그 안에서 가운데 정렬되도록 고정한다(1차 수정의 히어로/인용구와 동일한
   padding-right 기법). 5개 탭이 이 폭 안에 안 들어가는 경우를 대비해 줄바꿈(flex-wrap:wrap,
   기존 유지)도 안전망으로 남겨둔다. */
@media (max-width: 760px) {
  .about-crossnav-inner { padding-right: calc(var(--gutter) + 40px); }
}

/* ---------- 1-2. 대표 프로필 — 강의 이력 그룹별 pill 태그(2026-08-14 보완, 2차 정정) ----------
   기존엔 사진 배경 위 흰 박스(rgba(255,255,255,0.94))에 태그가 빽빽하게 갇혀 있었다.
   박스만 제거하고 사진 배경(.photo-bg-hero-text)은 그대로 유지 — 태그 하나하나는
   불투명 크림 배경이라 그 자체로 작은 카드처럼 사진 위에서도 항상 또렷하게 읽힌다.
   그룹 라벨은 텍스트만 놓이므로 사진 배경용 흰색으로 별도 지정(아래 .photo-bg-hero-text
   스코프). 그룹 사이 여백은 넉넉하게(2.8rem), 라벨은 amber 좌측 세로바 + 아이콘. */
.lecture-groups { display: flex; flex-direction: column; gap: 2.8rem; margin-top: 2.5rem; }
.lecture-group-label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 800;
  font-size: 1rem;
  color: var(--ink);
  padding-left: 0.9rem;
  border-left: 3px solid var(--hf-amber, #F5A524);
  margin-bottom: 1.1rem;
}
.lecture-group-label svg { width: 18px; height: 18px; color: var(--green-deep); flex-shrink: 0; }
.photo-bg-hero-text .lecture-group-label { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.35); }
.photo-bg-hero-text .lecture-group-label svg { color: var(--green-mint); }
/* 2026-08-19 — "자문"은 "강의"와 동급 항목인데 다른 그룹 라벨(대학/기업/기관/주요 강의
   주제)과 같은 작은 크기로 표시되면 강의의 하위 분류처럼 보인다는 피드백 반영.
   구조(같은 .lecture-groups 안에 나열)는 그대로 두고, 라벨 글자만 "강의" h2와 동일한
   폰트 크기/굵기로 키워 동급임을 표현한다. */
.lecture-group-label-lg {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  padding-left: 0;
  border-left: none;
}
.pill-tags { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.pill-tag {
  display: inline-block;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  font-size: 0.9rem;
  color: var(--ink);
}

/* ---------- 1-3. 대표 프로필 — MAGNET PRINCIPLES 이니셜 카드 그리드 ---------- */
.principles-init-group:not(:first-child) { margin-top: 2.5rem; }
.principles-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
  margin-top: 1.2rem;
}
.principles-init-card {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.7rem 1.4rem;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.principles-init-card:hover {
  transform: translateY(-4px);
  border-color: var(--hf-amber-text, #A8620A);
  box-shadow: 0 14px 30px rgba(168,98,10,0.14);
}
.principles-init-watermark {
  position: absolute;
  top: -0.6rem;
  right: 0.2rem;
  font-family: 'Playfair Display', var(--serif, serif);
  font-style: italic;
  font-weight: 700;
  font-size: 4.6rem;
  color: rgba(168,98,10,0.1);
  line-height: 1;
  z-index: 0;
  pointer-events: none;
}
.principles-init-title { position: relative; z-index: 1; font-weight: 800; font-size: 1.04rem; margin-bottom: 0.6rem; }
.principles-init-desc { position: relative; z-index: 1; color: var(--gray); font-size: 0.95rem; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) {
  .principles-init-card { transition: none; }
}
@media (max-width: 900px) { .principles-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .principles-card-grid { grid-template-columns: 1fr; } }

/* ---------- 2-1. 저서 — 첫 책 표지 목업(실제 이미지 미확보, 플레이스홀더 대체) ----------
   기존 .book-feature-img-placeholder(점선 테두리 + "이미지 준비 중" 텍스트)를
   둘째 책과 같은 프레임 비율(3/4, max-width 420px)의 다크그린 그라디언트 목업
   커버로 교체 — 실제 스캔 이미지처럼 보이려 하지 않고 "디자인된 목업"임을
   의도적으로 드러낸다. */
.book-cover-mockup {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 420px;
  width: 100%;
  aspect-ratio: 3 / 4;
  margin: 0 0 1.8rem;
  padding: 2.2rem 1.8rem;
  border-radius: var(--hf-radius, 0);
  background: linear-gradient(160deg, var(--green-deep) 0%, #0a2419 100%);
  color: #fff;
  box-shadow: 0 20px 40px rgba(15,61,46,0.22);
}
.book-cover-mockup-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}
.book-cover-mockup-title {
  font-size: clamp(1.5rem, 3.6vw, 2.2rem);
  font-weight: 800;
  line-height: 1.35;
  margin: 1rem 0;
}
.book-cover-mockup-imprint {
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 0.8rem;
}

/* ---------- 2-2. 저서 — 출간연도·출판사 메타 배지 ---------- */
.book-meta-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0 0.9rem; }
.book-badge {
  display: inline-block;
  background: var(--green-soft);
  color: var(--green-deep);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
}

/* ---------- 3-1. 미디어 — 언론보도 카드 그리드(2026-08-14 썸네일 보완) ----------
   실제 기사 썸네일은 외부 뉴스사 소유라 확보 불가 — 대신 좌상단 매체명 워드마크(단색
   배경) + 우하단 범용 이미지(사이트 미사용 스톡 이미지)를 대각선으로 배치한다.
   clip-path는 경계가 항상 칼같이 갈라져서, Marketing FRAMEWORK 카드와 같은 원리로
   mask-image의 대각선 linear-gradient에 stop을 촘촘히 넣어 하드컷 없이 자연스럽게
   섞이게 했다(수평 대신 각도만 125deg로 바꾼 것). */
.press-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.press-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.press-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(15,61,46,0.12); }
.press-card a { display: block; color: inherit; text-decoration: none; }
.press-card-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--green-deep);
}
.press-card-thumb-img {
  position: absolute;
  inset: 0;
  background-image: var(--press-image);
  background-size: cover;
  background-position: center;
}
.press-card-body { padding: 1.2rem 1.3rem 1.4rem; }
.press-card-outlet { font-size: 0.8rem; font-weight: 700; color: var(--green-mid); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.5rem; }
.press-card-title { font-size: 1rem; font-weight: 700; line-height: 1.5; margin-bottom: 0.9rem; color: var(--ink); }
.press-card-date { font-size: 0.8rem; color: var(--gray); text-align: right; }
@media (prefers-reduced-motion: reduce) {
  .press-card { transition: none; }
}
@media (max-width: 900px) { .press-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .press-grid { grid-template-columns: 1fr; } }

/* ---------- 3-2. 미디어 — 방송·영상 카드를 press-card와 같은 톤으로 ----------
   .video-card/.video-card-body-wrap은 about_media.html 전용(marketing.html은
   video-card-grid/-outlet만 인라인 스타일로 따로 씀 — 겹치지 않음). */
.video-card,
.video-card-body-wrap {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.video-card:hover,
.video-card-body-wrap:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(15,61,46,0.12); }
.video-card-thumb { border-radius: 0; }
.video-card-body { padding: 1.1rem 1.2rem 1.3rem; }
.video-card-body-wrap .video-card-body { padding-top: 1.1rem; }
@media (prefers-reduced-motion: reduce) {
  .video-card, .video-card-body-wrap { transition: none; }
}

/* ---------- 4-1. 오시는 길 — 사무실 사진 갤러리 ---------- */
.office-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
}
.office-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--hf-radius, 0);
  display: block;
}
.office-gallery-item:first-child { grid-row: 1 / 3; }
.office-gallery-item:first-child img { height: 100%; aspect-ratio: auto; }
@media (max-width: 700px) {
  .office-gallery { grid-template-columns: repeat(2, 1fr); }
  .office-gallery-item:first-child { grid-row: auto; grid-column: 1 / 3; }
  .office-gallery-item:first-child img { aspect-ratio: 16 / 9; }
}

/* ---------- 4-2. 오시는 길 — 교통정보 카드 아이콘 ----------
   카드 자체(2열 그리드)는 이미 .card-grid/.card라 새로 만들 필요 없고, 아이콘만
   .location-transport로 스코프해서 추가한다(다른 페이지의 .card는 영향 없음). */
.location-transport .card-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green-deep);
  margin-bottom: 1.1rem;
}
.location-transport .card-icon svg { width: 22px; height: 22px; }