/* ═══════════════════════════════════════════════════════
 * yamujinseo.css — 야무진SEO 스타일시트
 *
 * 구조:
 *   1. 최소 리셋 (Webflow 제거, 표준 리셋)
 *   2. Webflow 호환 컴포넌트 (HTML에서 사용 중인 w- 클래스)
 *   3. 커스텀 디자인
 *   4. 반응형 (태블릿 991px, 모바일 767px)
 *   5. 다크모드 / 프린트 / 접근성
 *   6. 반응형 그리드 유틸리티
 *
 * 재작성: 2026-04-11 — Webflow CSS 완전 제거 후 재작성
 * ═══════════════════════════════════════════════════════ */

/* ─── 1. 최소 리셋 ─── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img { max-width: 100%; height: auto; vertical-align: middle; display: inline-block; border: 0; }
svg:not(:root) { overflow: hidden; }
h1, h2, h3, h4, h5, h6 { margin-bottom: 10px; font-weight: bold; }
h1 { margin-top: 20px; font-size: 38px; line-height: 44px; }
h2 { margin-top: 20px; font-size: 32px; line-height: 36px; }
h3 { margin-top: 20px; font-size: 24px; line-height: 30px; }
h4 { margin-top: 10px; font-size: 18px; line-height: 24px; }
h5 { margin-top: 10px; font-size: 14px; line-height: 20px; }
h6 { margin-top: 10px; font-size: 12px; line-height: 18px; }
p { margin-top: 0; margin-bottom: 10px; }
blockquote { border-left: 5px solid #e2e2e2; margin: 0 0 10px; padding: 10px 20px; font-size: 18px; line-height: 22px; }
ul, ol { margin-top: 0; margin-bottom: 10px; padding-left: 40px; }
fieldset { border: 0; margin: 0; padding: 0; }
button, [type="button"], [type="reset"] { cursor: pointer; -webkit-appearance: button; border: 0; }
button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; }
label { margin-bottom: 5px; font-weight: bold; display: block; }
textarea { overflow: auto; }
a { background-color: transparent; }
a:active, a:hover { outline: 0; }
[hidden] { display: none; }

/* ─── 2. Webflow 호환 컴포넌트 (HTML에서 w- 클래스 사용 중) ─── */
.w-container {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}
.w-container::before, .w-container::after {
  content: " ";
  display: table;
}
.w-container::after { clear: both; }

.w-button {
  color: #fff;
  line-height: inherit;
  cursor: pointer;
  background-color: #3898ec;
  border: 0;
  border-radius: 0;
  padding: 9px 15px;
  text-decoration: none;
  display: inline-block;
}
input.w-button { -webkit-appearance: button; }

.w-form { margin: 0 0 15px; }
.w-form-done { text-align: center; background-color: #ddd; padding: 20px; display: none; }
.w-form-fail { background-color: #ffdede; margin-top: 10px; padding: 10px; display: none; }

.w-input, .w-select {
  color: #333;
  vertical-align: middle;
  background-color: #fff;
  border: 1px solid #ccc;
  width: 100%;
  height: 38px;
  margin-bottom: 10px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.42857;
  display: block;
}
.w-input::placeholder, .w-select::placeholder { color: #999; }
.w-input:focus, .w-select:focus { border-color: #3898ec; outline: 0; }
textarea.w-input, textarea.w-select { height: auto; }

.w-nav {
  background-color: #fff;
  border-bottom: 1px solid #E5E7EB;
  padding: 16px 0;
  position: relative;
  z-index: 1000;
}

/* 햄버거 아이콘 (webflow-icons 폰트 대체 → CSS로 직접 그림) */
.w-icon-nav-menu {
  width: 24px;
  height: 2px;
  background: var(--dark);
  position: relative;
  display: block;
}
.w-icon-nav-menu::before,
.w-icon-nav-menu::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 2px;
  background: var(--dark);
  left: 0;
}
.w-icon-nav-menu::before { top: -7px; }
.w-icon-nav-menu::after  { top: 7px; }

.w-webflow-badge { display: none; }

/* ─── 3. 커스텀 디자인 ─── */
:root {
  --primary:        #F97316;
  --primary-hover:  #EA6C0A;
  --primary-light:  #FFF7ED;
  --primary-1:      #F97316;
  --secondary-1:    #F8FAFC;
  --dark:           #111827;
  --dark-2:         #1F2937;
  --dark-3:         #374151;
  --gray-700:       #374151;
  --gray-600:       #4B5563;
  --gray-500:       #6B7280;
  --gray-400:       #9CA3AF;
  --gray-300:       #D1D5DB;
  --gray-200:       #E5E7EB;
  --gray-100:       #F3F4F6;
  --bg-light:       #F8FAFC;
  --bg-white:       #FFFFFF;
  --nav-color:      #334155;
  --nav-hover:      #F97316;
  --border:         #E5E7EB;
  --radius-sm:      8px;
  --radius-md:      12px;
  --radius-lg:      16px;
  --radius-xl:      20px;
}

body {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui,
    Roboto, "Helvetica Neue", "Segoe UI",
    "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  line-height: 1.6;
  letter-spacing: -0.02em;
  word-break: keep-all;
  color: var(--gray-700);
  background-color: #fff;
  font-size: 14px;
}
@font-face { font-family: 'Pretendard'; font-display: swap; }

h1, h2, h3, .hero-title, .section-title {
  color: var(--dark);
  letter-spacing: -0.03em;
  line-height: 1.25;
  word-break: keep-all;
}
p, .paragraph, .hero-description { color: var(--gray-600); }
a { color: var(--primary); text-decoration: none; }

/* 스킵 네비게이션 */
.skip-link,
.skip-to-content {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  background: #C2410C;
  color: #fff;
  padding: 12px 24px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  z-index: 10000;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: top 0.2s;
  min-height: 48px;
}
.skip-link:focus,
.skip-to-content:focus { top: 0; }

/* 헤더/네비게이션 */
.header, .w-nav {
  background-color: #fff;
  border-bottom: 1px solid #E5E7EB;
  padding: 16px 0;
  position: relative;
  z-index: 1000;
}
.container-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.nav-menu {
  display: flex;
  position: static;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  width: auto;
}
.header-navigation {
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-link, .w-nav-link {
  color: var(--nav-color);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 6px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s;
  min-height: 48px;
}
.nav-link:hover, .w-nav-link:hover,
.nav-link.w--current, .w-nav-link.w--current {
  color: var(--nav-hover);
}
.brand-header { max-width: 160px; margin-right: 24px; }
.header-logo  { width: 140px; height: auto; }
.menu-button  { display: none; }
.split-content.header-right { display: flex; align-items: center; }
.button-primary.w-button {
  background: #F97316;
  color: #111827;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}

/* 히어로 섹션 */
.section-hero {
  background: var(--dark);
  padding: 180px 24px 120px;
  text-align: center;
  position: relative;
}
.section-hero .hero-title {
  color: #fff;
  font-size: 64px;
  font-weight: 800;
}
.section-hero .hero-title span[style*="color:"] { color: var(--primary); }
.section-hero .hero-description {
  color: var(--gray-400);
  font-size: 22px;
  margin-top: 24px;
  font-weight: 400;
}
.section-hero .hero-description a { color: #FCD34D; text-decoration: underline; }
.hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 40px;
}
.hero-phone-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background-color: var(--primary);
  color: #111827;
  padding: 20px 36px;
  border-radius: var(--radius-lg);
  font-size: 28px;
  font-weight: 700;
  text-decoration: none;
  min-height: 64px;
  box-shadow: 0 8px 24px rgba(249, 115, 22, 0.3);
  animation: pulse-orange 2.5s infinite;
  margin-bottom: 16px;
  transition: all 0.3s;
}
.hero-phone-cta:hover {
  background-color: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(249, 115, 22, 0.45);
}
@keyframes pulse-orange {
  0%   { box-shadow: 0 0 0 0   rgba(249, 115, 22, 0.4); }
  70%  { box-shadow: 0 0 0 16px rgba(249, 115, 22, 0); }
  100% { box-shadow: 0 0 0 0   rgba(249, 115, 22, 0); }
}
.hero-secondary-cta {
  display: inline-flex;
  align-items: center;
  padding: 20px 32px;
  border: 2px solid #4B5563;
  color: #fff;
  background: transparent;
  border-radius: var(--radius-lg);
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  min-height: 64px;
  margin-bottom: 16px;
  transition: all 0.3s;
}
.hero-secondary-cta:hover {
  background: var(--dark-3);
  border-color: var(--dark-3);
}
.trust-badges {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 24px;
}
.trust-badge {
  background: rgba(249, 115, 22, 0.15);
  color: var(--primary);
  padding: 10px 18px;
  border-radius: 20px;
  font-size: 15px;
  font-weight: 600;
}

/* 기본 섹션 */
.section-default,
.section {
  padding: 120px 24px;
}
.section:nth-of-type(even),
.section-default:nth-of-type(even) { background-color: var(--bg-white); }
.section:nth-of-type(odd),
.section-default:nth-of-type(odd)  { background-color: var(--bg-light); }
.section-title {
  font-size: 48px;
  font-weight: 800;
  margin-bottom: 24px;
}
.section:not(.home-hero):not(.section-hero) {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

/* 히어로 타이포그래피 — 서브 페이지 */
.subtitle.hero {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--primary);
  background: #fff7ed;
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.heading {
  font-size: 48px;
  font-weight: 800;
  line-height: 1.3;
  word-break: keep-all;
}
.paragraph.home-hero {
  font-size: 18px;
  line-height: 1.6;
  color: var(--gray-600);
}
.container-default {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}

/* 버튼 */
.v4-link-button,
.button-primary {
  display: inline-flex;
  align-items: center;
  padding: 16px 28px;
  background-color: var(--primary);
  color: #111827;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  min-height: 48px;
  border: none;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.3);
  transition: all 0.3s;
}
.v4-link-button:hover,
.button-primary:hover {
  background-color: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(249, 115, 22, 0.5);
}
.v4-link-button.outline {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
  box-shadow: none;
}
.v4-link-button.outline:hover { background: var(--primary-light); }

/* Secondary 버튼 */
.button-secondary {
  display: inline-flex;
  align-items: center;
  background-color: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
  border-radius: var(--radius-md);
  padding: 14px 24px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  min-height: 48px;
  transition: all 0.3s;
}
.button-secondary:hover {
  background-color: var(--primary);
  color: #fff;
}

/* 파운더 스토리 */
.story-wrapper {
  max-width: 800px;
  margin: 0 auto;
  border-left: 4px solid var(--primary);
  padding-left: 32px;
  position: relative;
}
.quote-icon {
  font-size: 64px;
  color: rgba(249, 115, 22, 0.2);
  line-height: 1;
  position: absolute;
  top: -20px;
  left: 10px;
  font-family: serif;
}
.story-author {
  margin-top: 24px;
  font-size: 16px;
  color: var(--gray-600);
}
.story-author strong { color: var(--dark); font-size: 18px; }

/* 핵심 가치 카드 그리드 */
.core-value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.value-card {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}
.value-card:hover { transform: translateY(-5px); }
.value-icon { font-size: 40px; margin-bottom: 16px; }
.value-card h3 { font-size: 20px; font-weight: 700; margin: 0 0 12px; }

/* 비교 테이블 */
.comparison-table { width: 100%; border-collapse: collapse; margin-top: 24px; }
.comparison-table th, .comparison-table td { padding: 16px; border: 1px solid #E5E7EB; text-align: left; }
.comparison-table th { background: var(--bg-light); font-weight: bold; }
.comparison-table td:nth-child(3) { color: var(--primary); font-weight: bold; background: rgba(249, 115, 22, 0.03); }

/* CTA 밴드 */
.cta-banner {
  background: #FFF7ED;
  border: 1px solid #FFEDD5;
  border-radius: 16px;
  padding: 48px 24px;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}
.cta-buttons-wrapper {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
}

/* 가이드 페이지 가독성 개선 (SEO란, GEO란, 로컬SEO 등) */
.section-default .container-default p {
  line-height: 1.75;
  font-size: 1.05rem;
  color: #374151;
  margin-bottom: 1.25rem;
}
.section-default .container-default h2 {
  margin-top: 5rem;
  margin-bottom: 1.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid #e5e7eb;
  font-size: 2rem;
  line-height: 1.4;
  color: #111827;
}
.section-default .container-default h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.section-default .container-default ul,
.section-default .container-default ol {
  margin-top: 0.5rem;
  margin-bottom: 2.5rem;
  padding-left: 1.5rem;
}
.section-default .container-default li {
  margin-bottom: 1.125rem;
  line-height: 1.7;
  font-size: 1.05rem;
  color: #374151;
}
.definition-box {
  background-color: #fff7ed;
  border-left: 4px solid var(--primary);
  padding: 1.5rem 2rem;
  margin: 2rem 0;
  border-radius: 0.5rem;
}
.definition-box p {
  margin-bottom: 0;
  font-size: 1.1rem;
  font-weight: 500;
  color: #7c2d12;
}

/* 포트폴리오 증거 그리드 */
.evidence-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 32px 0;
}
.evidence-grid .placeholder-card {
  background-color: var(--bg-light);
  border-radius: 10px;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
  font-size: 14px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}
.evidence-grid .placeholder-card::before {
  content: "•••";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 24px;
  background-color: #E1E4E8;
  color: #A3AAB2;
  font-size: 24px;
  line-height: 12px;
  padding-left: 10px;
  letter-spacing: -2px;
  display: flex;
  align-items: center;
}
.evidence-link {
  text-decoration: none;
  color: var(--dark);
  font-weight: 600;
  font-size: 15px;
  transition: all 0.2s;
}
.evidence-link:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(249, 115, 22, 0.1);
}
.evidence-link small {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--primary);
}

/* 서비스 그리드 */
.v4-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 40px;
}

/* 프로세스 그리드 */
.v4-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 40px 0 48px;
}

/* 서비스/프로세스 카드 */
.v4-service-card,
.v4-process-step {
  background-color: var(--bg-white);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  padding: 40px 32px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  position: relative;
  overflow: hidden;
}
.v4-service-card:hover,
.v4-process-step:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  border-color: var(--primary);
}
.v4-service-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background-color: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}
.v4-service-card:hover::before { transform: scaleX(1); }
.v4-service-card h3 { font-size: 20px; font-weight: 700; margin: 0 0 12px; }
.v4-service-card p  { line-height: 1.6; margin: 0 0 16px; font-size: 15px; }
.v4-service-card a  { color: #C2410C; font-weight: 600; text-decoration: none; font-size: 15px; min-height: 48px; display: inline-flex; align-items: center; }
.v4-process-step h3 { font-size: 18px; font-weight: 700; margin: 0 0 10px; }
.v4-process-step p  { font-size: 15px; line-height: 1.6; margin: 0; }
.step-num {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  text-align: center;
  line-height: 44px;
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 16px;
  box-shadow: 0 6px 16px rgba(249, 115, 22, 0.3);
}
.process-phone-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background-color: var(--primary);
  color: #fff;
  padding: 22px 40px;
  border-radius: var(--radius-lg);
  font-size: 26px;
  font-weight: 700;
  text-decoration: none;
  min-height: 64px;
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.3);
  transition: all 0.3s;
}

/* FAQ */
.faq-item {
  background-color: var(--bg-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  margin-bottom: 16px;
  overflow: hidden;
}
.faq-item summary {
  padding: 24px 32px;
  font-size: 20px;
  font-weight: 600;
  color: #111827;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color 0.2s;
  min-height: 48px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 24px;
  color: var(--primary);
  font-weight: 600;
  margin-left: 16px;
  flex-shrink: 0;
}
.faq-item[open] summary { color: var(--primary); padding-bottom: 16px; }
.faq-item[open] summary::after { content: "−"; }
.faq-item .faq-answer {
  padding: 0 32px 24px;
  font-size: 16px;
  line-height: 1.7;
  animation: fadeInDown 0.3s ease forwards;
}
.faq-item .faq-answer a { color: #C2410C; }
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* CTA 섹션 */
.final-cta-section {
  background: var(--dark);
  padding: 140px 24px;
  text-align: center;
  color: #fff;
}
.final-cta-section h2 {
  color: #fff;
  font-size: 48px;
  font-weight: 700;
  margin: 0 0 24px;
}
.final-cta-section .lead {
  color: var(--gray-400);
  font-size: 20px;
  line-height: 1.7;
  margin: 0 0 48px;
}
.mega-phone-box {
  display: inline-block;
  background-color: var(--bg-white);
  border: 1px solid var(--border);
  border-top: 4px solid var(--primary);
  border-radius: 16px;
  padding: 20px 32px;
  margin: 0 auto 32px;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.08);
  width: auto;
  max-width: 90%;
}
.mega-phone-box .phone-icon   { display: none; }
.mega-phone-box .phone-number {
  display: block;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-decoration: none;
  color: var(--dark);
}
.mega-phone-box .phone-hours  { display: block; font-size: 15px; color: var(--gray-500); margin-top: 12px; font-weight: 500; }
.final-cta-secondary { margin-top: 16px; }
.final-cta-secondary a {
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  padding: 16px 28px;
  border-radius: var(--radius-md);
  margin: 8px;
  text-decoration: none;
  font-weight: 600;
  min-height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: background 0.2s;
}
.final-cta-secondary a:hover { background: rgba(255, 255, 255, 0.2); }
.final-cta-helper { margin-top: 40px; color: rgba(255, 255, 255, 0.85); font-size: 16px; line-height: 1.7; }
.final-cta-helper a { color: #fff; text-decoration: underline; font-weight: 600; }

/* 포트폴리오 카드 */
.pf-featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.pf-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
  text-decoration: none;
  color: inherit;
}
.pf-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px -5px rgba(0, 0, 0, 0.1);
  border-color: var(--primary);
}
.pf-img-wrapper {
  display: block;
  position: relative;
  aspect-ratio: 4/3;
  background: var(--gray-100);
  overflow: hidden;
}
.pf-img-wrapper.browser-mockup::before {
  content: "•••";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 28px;
  background: #E2E8F0;
  color: #94A3B8;
  font-size: 24px;
  line-height: 14px;
  padding-left: 12px;
  letter-spacing: -2px;
  display: flex;
  align-items: center;
  z-index: 10;
}
.pf-img-wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  margin-top: 28px;
  transition: transform 0.5s;
  aspect-ratio: 4/3;
}
.pf-card:hover .pf-img-wrapper img { transform: translateY(-10px); }
.pf-badge,
.seo-badge {
  position: static;
  background: var(--primary);
  color: #fff;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  margin-left: auto;
}
.pf-info         { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 16px; }
.pf-info h3      { display: block; font-size: 16px; font-weight: 700; margin: 0; color: var(--dark); }
.pf-info p       { display: block; font-size: 13px; color: var(--gray-500); margin: 0; width: 100%; }
.pf-link-btn     { background: var(--primary); color: #111827; }
.pf-status,
.pf-live         { display: block; font-size: 13px; color: #10B981; }

/* 브레드크럼 */
.breadcrumb,
.breadcrumb-nav {
  padding: 16px 5%;
  max-width: 1200px;
  margin: 0 auto;
  font-size: 14px;
  color: #64748b;
  border-bottom: 1px solid #F1F5F9;
}
.breadcrumb ol { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0; flex-wrap: wrap; }
.breadcrumb li::after         { content: "\203A"; margin-left: 8px; color: #94A3B8; }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a,
.breadcrumb-nav a             { color: var(--primary); text-decoration: none; transition: color 0.2s; }
.breadcrumb-nav a:hover       { color: var(--dark); }
.breadcrumb li[aria-current="page"],
.breadcrumb-nav span          { color: #64748b; margin: 0 6px; }

/* 블로그 아티클 */
.article-wrapper{max-width:720px;margin:0 auto;padding:40px 24px 60px}
.article-meta{font-size:14px;color:#64748b;margin-bottom:8px}
.article-meta a{color:var(--primary);font-weight:600}
.reading-time{font-size:13px;color:#94A3B8;margin-bottom:4px}
.last-updated{font-size:13px;color:#94A3B8;margin-bottom:24px}
.article-title{font-size:32px;line-height:1.3;font-weight:800;color:var(--dark);margin:0 0 16px;text-align:center}
.article-subtitle{font-size:17px;color:var(--gray-600);text-align:center;margin-bottom:32px;line-height:1.6}
.article-body{font-size:16px;line-height:1.8;color:var(--gray-700)}
.article-body h2{font-size:24px;margin-top:48px;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.article-body p{margin-bottom:20px}
.article-body blockquote{margin:24px 0;padding:16px 24px;background:var(--primary-light);border-left:4px solid var(--primary);border-radius:0 8px 8px 0;color:var(--gray-700);font-style:italic}
.toc{background:var(--secondary-1);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px 24px;margin:24px 0 32px}
.toc-title{font-weight:700;font-size:15px;margin:0 0 12px;color:var(--dark)}
.toc ol{margin:0;padding:0 0 0 20px}
.toc li{margin-bottom:6px;font-size:14px}
.toc a{color:var(--primary);text-decoration:none}
.toc a:hover{text-decoration:underline}
.article-cta{text-align:center;background:var(--secondary-1);border-radius:var(--radius-md);padding:40px 32px;margin:48px 0 32px}
.article-cta h3{font-size:22px;margin:0 0 8px;color:var(--dark)}
.article-cta p{color:var(--gray-600);margin-bottom:20px}
.article-cta ._2-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.related-services-box{text-align:center}
.article-meta-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 0 24px;
  font-size: 14px;
  color: #64748b;
  border-bottom: 1px solid #F1F5F9;
  margin-bottom: 24px;
}
.article-separator { color: #CBD5E1; }
.article-category  { background: #F1F5F9; padding: 2px 10px; border-radius: 12px; font-size: 13px; font-weight: 500; }
.social-share-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 0;
  margin: 32px 0;
  border-top: 1px solid #F1F5F9;
  border-bottom: 1px solid #F1F5F9;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.share-label { font-size: 14px; font-weight: 600; color: #475569; margin-right: 4px; }
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: #F1F5F9;
  color: #475569;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.share-btn:hover { background: var(--primary); color: #fff; }
.related-posts-section {
  padding: 60px 0;
  background: var(--bg-light);
  margin-top: 48px;
}
.related-posts-heading { font-size: 24px; font-weight: 700; margin: 0 0 24px; text-align: center; }
.related-posts-grid   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.related-post-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-white);
  border-radius: var(--radius-md);
  padding: 24px;
  text-decoration: none;
  border: 1px solid var(--border);
  transition: all 0.2s;
}
.related-post-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.related-post-category { font-size: 12px; font-weight: 600; color: var(--primary); text-transform: uppercase; }
.related-post-title    { font-size: 16px; font-weight: 600; color: var(--dark); line-height: 1.4; }

/* 맨 위로 버튼 */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary);
  color: #111827;
  border: none;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.back-to-top.show { opacity: 1; visibility: visible; }
.back-to-top:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(249, 115, 22, 0.4); }

/* 사이트 검색 */
.site-search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10001;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
  backdrop-filter: blur(4px);
}
.site-search-container {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  width: 90%;
  max-width: 600px;
  max-height: 70vh;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}
.site-search-header {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.site-search-input  { flex: 1; border: none; font-size: 18px; padding: 8px; outline: none; font-family: inherit; }
.site-search-close  { background: none; border: none; font-size: 28px; cursor: pointer; color: #64748b; padding: 4px 8px; }
.site-search-results { overflow-y: auto; padding: 8px; max-height: 50vh; }
.search-result-item {
  display: block;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--dark);
  transition: background 0.15s;
}
.search-result-item:hover { background: #F1F5F9; }
.search-result-item strong { display: block; font-size: 16px; margin-bottom: 2px; }
.search-result-item span  { font-size: 13px; color: #64748b; }
.search-hint   { padding: 24px; text-align: center; color: #94A3B8; font-size: 14px; }
.search-trigger { cursor: pointer; }

/* 푸터 v5 (간결) */
.site-footer-v5 {
  background-color: var(--dark);
  color: #D1D5DB;
  padding: 24px 0;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  border-top: 1px solid var(--dark-2);
}
.site-footer-v5 a { color: #D1D5DB; text-decoration: none; transition: color 0.2s; }
.site-footer-v5 a:hover { color: var(--primary); }
.site-footer-v5 .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.site-footer-v5 .footer-divider { color: var(--dark-3); margin: 0 8px; font-size: 12px; }
.site-footer-v5 .footer-desktop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.site-footer-v5 .brand-name {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin: 0;
  letter-spacing: -0.5px;
  text-decoration: none;
}
.site-footer-v5 .brand-name span { color: var(--primary); }
.site-footer-v5 .contact-info,
.site-footer-v5 .quick-links {
  display: flex;
  align-items: center;
  font-size: 14px;
  white-space: nowrap;
}
.site-footer-v5 .footer-mobile { display: none; text-align: center; font-size: 13px; line-height: 1.5; }
.site-footer-v5 .footer-mobile .m-brand {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 12px;
  letter-spacing: -0.5px;
  text-decoration: none;
  display: block;
}
.site-footer-v5 .footer-mobile .m-brand span { color: var(--primary); }
.site-footer-v5 .footer-mobile .m-row { margin-bottom: 6px; }

/* 푸터 (상세) */
.site-footer {
  background-color: var(--dark);
  color: #9CA3AF;
  padding: 60px 0 30px;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  border-top: 1px solid var(--dark-2);
}
.site-footer-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.footer-desktop-only {
  border-bottom: 1px solid #1E293B;
  padding-bottom: 40px;
  margin-bottom: 30px;
}
.footer-desktop-only .footer-grid { display: flex; justify-content: space-between; gap: 40px; }
.footer-desktop-only .footer-title { color: #F8FAFC; font-size: 16px; margin-bottom: 16px; }
.footer-desktop-only .footer-link-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.footer-desktop-only .footer-link-list a { color: #9CA3AF; text-decoration: none; transition: color 0.2s; }
.footer-desktop-only .footer-link-list a:hover { color: #F8FAFC; }
.footer-desktop-only .footer-contact-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.footer-desktop-only .footer-contact-list a { color: #9CA3AF; text-decoration: none; transition: color 0.2s; }
.footer-desktop-only .footer-contact-list a:hover { color: #F8FAFC; }
.footer-desktop-only .footer-logo { max-width: 150px; margin-bottom: 16px; }
.footer-minimal-info { text-align: center; line-height: 1.5; }
.minimal-row { margin-bottom: 8px; color: #64748b; font-size: 14px; }
.minimal-row a { color: #9CA3AF; text-decoration: none; transition: color 0.2s; }
.minimal-row a:hover { color: #F8FAFC; }
.minimal-row .divider { margin: 0 10px; color: var(--dark-3); }
.minimal-row .icon { font-size: 13px; margin-right: 4px; }
.copyright-row { margin-top: 20px; margin-bottom: 0; font-size: 13px; }
.footer-bottom-area {
  border-top: 1px solid var(--dark-2);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-copyright  { font-size: 0.875rem; color: #94A3B8; }
.footer-legal-links { display: flex; gap: 20px; }
.footer-legal-links a { color: #94A3B8; font-size: 0.875rem; text-decoration: none; }
.footer-legal-links a:hover { color: #D1D5DB; }
.site-footer p       { color: #9CA3AF; font-size: 0.95rem; line-height: 1.6; margin-bottom: 0; }
.site-footer .footer-title { color: #F8FAFC; font-size: 1.125rem; font-weight: 700; margin-bottom: 20px; }
.site-footer .footer-logo  { max-width: 150px; margin-bottom: 16px; display: block; }
.footer-link-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-link-list a { color: #9CA3AF; text-decoration: none; font-size: 0.95rem; font-weight: 500; transition: all 0.2s; display: inline-block; }
.footer-link-list a:hover { color: var(--primary); transform: translateX(4px); }
.footer-contact-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-contact-list li { font-size: 0.95rem; color: #9CA3AF; }
.footer-contact-list a { color: #9CA3AF; text-decoration: none; font-weight: 500; transition: color 0.2s; }
.footer-contact-list a:hover { color: var(--primary); }
.business-info { font-size: 0.9rem; color: #64748b; line-height: 1.8; }

/* SEO 크롤 링크 */
nav[aria-label="주요 페이지 바로가기"] ul li a:hover {
  background: var(--primary);
  color: #fff;
}

/* 기타 이미지 */
img, video { max-width: 100%; height: auto; }

/* ─── 4. 반응형 ─── */

/* 태블릿 (991px 이하) */
@media screen and (max-width: 991px) {
  .evidence-grid          { grid-template-columns: repeat(2, 1fr); }
  .v4-services-grid       { grid-template-columns: repeat(2, 1fr); }
  .v4-process-grid        { grid-template-columns: repeat(2, 1fr); }
  .related-posts-grid     { grid-template-columns: repeat(2, 1fr); }
  .pf-featured-grid       { grid-template-columns: repeat(2, 1fr); }
  .site-footer-v5 .contact-info,
  .site-footer-v5 .quick-links { font-size: 13px; }
}

/* 모바일 (767px 이하) */
@media screen and (max-width: 767px) {
  html, body { overflow-x: hidden; width: 100%; }
  p, h1, h2, h3, h4, h5, h6, span, a, div { word-break: keep-all; overflow-wrap: break-word; }
  img, video, iframe, canvas { max-width: 100%; height: auto; }

  /* 히어로 */
  .section-hero { padding: 120px 20px 80px; }
  .section-hero .hero-title { font-size: 40px; line-height: 1.3; }
  .section-hero .hero-description { font-size: 18px; }

  /* 서브 페이지 히어로 타이포 */
  .subtitle.hero { font-size: 14px; margin-bottom: 8px; }
  .heading { font-size: 32px; line-height: 1.4; }
  .paragraph.home-hero { font-size: 16px; line-height: 1.5; }

  /* 카드 그리드 모바일 */
  .core-value-grid { grid-template-columns: 1fr; }

  /* 모바일 반응형 테이블 */
  .comparison-table thead { display: none; }
  .comparison-table tbody tr { display: block; margin-bottom: 16px; border: 1px solid #E5E7EB; border-radius: 8px; overflow: hidden; }
  .comparison-table td { display: block; text-align: right; border: none; border-bottom: 1px solid #F3F4F6; position: relative; padding-left: 40%; }
  .comparison-table td:last-child { border-bottom: none; }
  .comparison-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 16px;
    width: 35%;
    text-align: left;
    font-weight: bold;
    color: var(--gray-600);
  }

  /* CTA 밴드 모바일 */
  .cta-buttons-wrapper { flex-direction: column; }
  .story-wrapper { padding-left: 20px; }

  /* 가이드 페이지 모바일 가독성 */
  .section-default .container-default h2 {
    margin-top: 3.5rem;
    padding-top: 2rem;
    font-size: 1.5rem;
  }
  .section-default .container-default p,
  .section-default .container-default li {
    font-size: 1rem;
    line-height: 1.65;
  }
  .definition-box {
    padding: 1.25rem 1.25rem;
  }

  /* 섹션 */
  .section-default,
  .section,
  .final-cta-section,
  .related-posts-section { padding: 80px 20px; }
  .section-title { font-size: 32px; }

  /* 히어로 버튼 */
  .hero-actions { flex-direction: column; }
  .hero-phone-cta,
  .hero-secondary-cta { width: 100%; justify-content: center; margin-right: 0; }

  /* 버튼 공통 모바일 */
  a.v4-link-button,
  a.hero-phone-cta,
  a.hero-secondary-cta,
  a.process-phone-cta,
  .button-primary,
  .pf-link-btn {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px 20px;
    font-size: 16px;
    text-align: center;
  }

  /* 그리드 → 1열 */
  .evidence-grid,
  .v4-services-grid,
  .v4-process-grid,
  .related-posts-grid,
  .pf-featured-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 24px; }

  /* 카드 모바일 */
  .v4-service-card,
  .v4-process-step,
  .related-post-card,
  .pf-card { padding: 24px 20px; margin: 0; }

  /* FAQ */
  .faq-item summary { min-height: 54px; padding: 16px 24px; font-size: 16px; line-height: 1.4; }

  /* 메가 전화 박스 */
  .mega-phone-box {
    padding: 24px 20px;
    width: 100%;
    max-width: 100%;
    display: block;
    box-sizing: border-box;
    border-radius: 24px;
  }
  .mega-phone-box .phone-icon   { font-size: 24px; margin-bottom: 6px; }
  .mega-phone-box .phone-number { font-size: 32px; }
  .mega-phone-box .phone-hours  { font-size: 14px; margin-top: 8px; }
  .final-cta-section h2 { font-size: 32px; }

  /* 네비게이션 — 햄버거 모드 */
  .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #E5E7EB;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    padding: 16px 20px;
    width: 100%;
    z-index: 9999;
    flex-direction: column;
  }
  .header-navigation { flex-direction: column; gap: 0; width: 100%; }
  .nav-link {
    padding: 14px 0;
    border-bottom: 1px solid #F1F5F9;
    font-size: 16px;
    width: 100%;
    border-radius: 0;
  }
  .menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    cursor: pointer;
  }
  .split-content.header-right { display: none; }

  /* 브레드크럼/소셜 */
  .breadcrumb,
  .breadcrumb-nav { padding: 12px 20px; margin: 0; }
  .breadcrumb ol  { gap: 4px 8px; font-size: 13px; line-height: 1.4; }
  .social-share-bar  { flex-wrap: wrap; justify-content: center; }
  .article-meta-bar  { justify-content: center; text-align: center; }

  /* 맨 위로 */
  .back-to-top { bottom: 16px; right: 16px; width: 40px; height: 40px; font-size: 16px; }

  /* 포트폴리오 테이블 */
  .pf-live-table th:nth-child(3),
  .pf-live-table td:nth-child(3),
  .pf-live-table th:nth-child(4),
  .pf-live-table td:nth-child(4) { display: none; }

  /* 컨테이너 */
  .container-default,
  .w-container { padding-left: 0; padding-right: 0; width: 100%; }

  /* 푸터 v5 모바일 */
  .site-footer-v5 { padding: 32px 0 24px; }
  .site-footer-v5 .footer-desktop { display: none; }
  .site-footer-v5 .footer-mobile  { display: flex; flex-direction: column; align-items: center; }
  .minimal-row {
    margin-bottom: 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    white-space: nowrap;
  }
  .minimal-row .divider { margin: 0 6px; }
  .copyright-row { margin-top: 6px; font-size: 11px; color: #475569; }

  /* 푸터 상세 모바일 */
  .site-footer { padding: 24px 0 16px; }
  .site-footer-container { padding: 0 20px; }
  .footer-bottom-area { flex-direction: column; text-align: center; gap: 16px; padding-top: 12px; margin-top: 12px; }
  .footer-legal-links { flex-wrap: wrap; justify-content: center; gap: 12px 20px; }

  /* 터치 타겟 */
  a, button, [role="button"], input, select, textarea { min-height: 44px; }
  nav[aria-label="주요 페이지 바로가기"] ul { gap: 8px; }
  nav[aria-label="주요 페이지 바로가기"] ul li a { padding: 12px 16px; font-size: 14px; }
}

/* ─── 5. 다크모드 ─── */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-light: #111827;
    --bg-white: #1F2937;
    --border:   #374151;
  }
  body { background-color: #0F172A; color: #D1D5DB; }
  h1, h2, h3, .section-title, .hero-title { color: #F9FAFB; }
  p, .paragraph, .hero-description { color: #9CA3AF; }
  .header, .w-nav { background-color: #1E1F23; border-bottom: 1px solid #2D2E33; }
  .nav-link, .w-nav-link { color: #CBD5E1; }
  .nav-link:hover, .w-nav-link:hover,
  .nav-link.w--current, .w-nav-link.w--current { color: var(--primary); }
  .section-default, .section { background-color: #0F172A; }
  .section:nth-of-type(odd),
  .section-default:nth-of-type(odd) { background-color: #111827; }
  .v4-service-card, .v4-process-step,
  .faq-item, .pf-card, .card { background-color: #1F2937; border-color: #374151; }
  .mega-phone-box { background-color: #1F2937; border-color: #374151; border-top-color: var(--primary); }
  .mega-phone-box .phone-number { color: #F9FAFB; }
  .faq-item summary { color: #E2E8F0; }
  .breadcrumb a,
  .breadcrumb-nav a { color: #93C5FD; }
  .breadcrumb li[aria-current="page"] { color: #94A3B8; }
  .site-search-container { background: #1E1F23; border: 1px solid #2D2E33; }
  .site-search-input     { background: transparent; color: #E2E8F0; }
  .search-result-item    { color: #E2E8F0; }
  .search-result-item:hover { background: #262730; }
  .pf-card               { background: #262730; border-color: #2D2E33; }
  .pf-info h3            { color: #E2E8F0; }
  .pf-img-wrapper.browser-mockup::before { background: #2D2E33; color: #64748b; }
  .evidence-link { color: #E2E8F0; }
  .input.w-input,
  .text-area.w-input { background-color: #262730; border-color: #2D2E33; color: #E2E8F0; }
  .w-icon-nav-menu,
  .w-icon-nav-menu::before,
  .w-icon-nav-menu::after { background: #E2E8F0; }
  .nav-menu .nav-link { border-color: #2D2E33; color: #E2E8F0; }
}

/* ─── 6. 프린트 ─── */
@media print {
  .header, .w-nav, .site-footer, .site-footer-v5,
  .menu-button, .skip-link, .skip-to-content,
  .breadcrumb, .breadcrumb-nav,
  .hero-phone-cta, .hero-secondary-cta,
  .mega-phone-box, .final-cta-section,
  .button-primary, .button-secondary,
  .cta-box, .service-cta, .back-to-top,
  .site-search-overlay, .social-share-bar { display: none; }
  body { font-size: 12pt; line-height: 1.5; color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 10pt; color: #666; }
  nav a[href]::after,
  .footer-link-list a[href]::after { content: none; }
  h1, h2, h3 { page-break-after: avoid; color: #000; }
  img { max-width: 100%; }
  .article-body { max-width: 100%; }
}

/* ─── 7. 접근성 ─── */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms;
    transition-duration: 0.01ms;
  }
}

/* ─── 8. 반응형 그리드 유틸리티 (인라인 style 대체) ─── */

/* 통계 카드 3열 그리드 (index.html "왜 야무진SEO인가") */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
@media (max-width: 991px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .stats-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* 연락처 2열 그리드 (contact.html) */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  max-width: 1000px;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* 프로세스 5열 그리드 (services/content.html) */
.v4-process-grid-5 {
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 991px) {
  .v4-process-grid-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .v4-process-grid-5 { grid-template-columns: 1fr; }
}