/* 프리미엄 웹 폰트 로컬 서브셋 최적화 로드 */
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Noto Sans KR Regular'), local('NotoSansKR-Regular'),
       url('/assets/fonts/NotoSansKR-Regular-subset.woff2') format('woff2');
}
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Noto Sans KR Regular'), local('NotoSansKR-Regular'),
       url('/assets/fonts/NotoSansKR-Regular-subset.woff2') format('woff2');
}
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Noto Sans KR Medium'), local('NotoSansKR-Medium'),
       url('/assets/fonts/NotoSansKR-Regular-subset.woff2') format('woff2');
}
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Noto Sans KR Bold'), local('NotoSansKR-Bold'),
       url('/assets/fonts/NotoSansKR-Bold-subset.woff2') format('woff2');
}

/* 프리미엄 웜 라이트 (Alabaster White & Slate Navy) 테마 정의 */
:root {
  color-scheme: only light; /* 브라우저 자동 다크 테마의 색 반전 방지 (사이트는 라이트 전용 디자인) */
  --bg-base: hsl(210, 20%, 98%); /* 부드러운 미색 (Alabaster White) */
  --bg-surface: hsl(0, 0%, 100%); /* 깨끗한 순백색 */
  --bg-surface-elevated: hsl(210, 15%, 94%);
  
  --primary: hsl(38, 48%, 42%); /* 밝은 배경에서 가독성이 확보된 진중한 브론즈 골드 */
  --primary-hover: hsl(38, 48%, 34%);
  --primary-glow: hsla(38, 48%, 42%, 0.08);
  
  --text-primary: hsl(220, 45%, 15%); /* 지적이고 깊이 있는 슬레이트 딥 네이비 */
  --text-secondary: hsl(220, 15%, 40%); /* 차분하고 정갈한 Slate 차콜 */
  --text-muted: hsl(220, 12%, 46%); /* 텍스트 대비 WCAG AA 충족을 위한 명도 하향 보정 */
  
  /* 상태 색상 — 웜 알라바스터 팔레트에 맞춰 채도를 낮춘 값 (기존 하드코딩 Open Color 대체) */
  --danger: hsl(0, 55%, 40%);
  --success: hsl(145, 50%, 26%);

  --border-color: hsl(210, 15%, 90%); /* 얇고 미세한 소프트 실버 보더 */
  --border-color-hover: hsl(210, 15%, 80%);
  --input-border-color: hsl(210, 12%, 72%); /* 입력 폼 전용 - 흰 배경에서 또렷하게 구분되는 보더 */
  
  --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --font-serif: 'Noto Sans KR', sans-serif;
  --font-sans: 'Noto Sans KR', sans-serif;
  
  --max-width: 1200px;
}

/* 기본 레이아웃 및 리셋 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-sans);
  background-color: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* 터치 기반 모바일 기기에서의 관성 물리 스크롤 충돌 방지를 위해 마우스 기반 데스크톱만 smooth scroll 조건부 적용 */
@media (prefers-reduced-motion: no-preference) {
  @media (hover: hover) {
    html {
      scroll-behavior: smooth;
    }
  }
}

/* 전역 한글 타이포그래피 단어 끊김 영구 차단 */
h1, h2, h3, h4, h5, h6, p, span, a, label {
  word-break: keep-all;
  overflow-wrap: break-word;
}

body {
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-smooth);
}

/* :where()로 특이도를 (0,0,1)로 낮춰 페이지별 입력 폼 규칙(.pi-field input 등)이 리셋을 이기도록 한다 */
button, input:where(:not([type="checkbox"]):not([type="radio"])), textarea, select {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* 컨테이너 */
.container {
  width: 90%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1rem;
}

/* 헤더 & 네비게이션 */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: hsla(210, 20%, 98%, 0.8);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color);
  transition: var(--transition-smooth);
}

.site-header.scrolled {
  background-color: hsla(0, 0%, 100%, 0.95);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-family: 'Noto Serif KR', serif;
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-primary);
  text-transform: none;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.logo-link span {
  color: var(--text-primary);
}

.logo-link span.logo-dot {
  color: var(--primary);
  margin-left: -0.1em;
}

.logo-link:hover {
  transform: translateX(2px);
  color: var(--primary);
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 1.75rem; /* 신청자 포털 버튼 추가로 항목이 3개가 되어 간격 축소 */
}

.nav-link {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-secondary);
  position: relative;
  padding: 0.5rem 0;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--primary);
  transition: var(--transition-smooth);
}

.nav-link:hover {
  color: var(--primary);
}

.nav-link:hover::after {
  width: 100%;
}

.nav-cta-btn {
  background-color: var(--primary);
  color: var(--bg-base);
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: var(--transition-smooth);
}

.nav-cta-btn:hover {
  background-color: var(--primary-hover);
  box-shadow: 0 4px 20px var(--primary-glow);
  transform: translateY(-2px);
}

/* 신청자 포털 바로가기 (아웃라인 강조형 — 골드 채움 CTA와 위계 구분) */
.nav-portal-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--primary-glow);
  color: var(--primary);
  border: 1px solid hsla(38, 48%, 42%, 0.45);
  padding: 0.7rem 1.25rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: var(--transition-smooth);
}

.nav-portal-btn::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--primary);
  flex-shrink: 0;
  animation: portalDotPulse 2.4s ease-out infinite;
}

@keyframes portalDotPulse {
  0% { box-shadow: 0 0 0 0 hsla(38, 48%, 42%, 0.5); }
  70% { box-shadow: 0 0 0 7px hsla(38, 48%, 42%, 0); }
  100% { box-shadow: 0 0 0 0 hsla(38, 48%, 42%, 0); }
}

.nav-portal-btn:hover {
  background-color: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 4px 20px var(--primary-glow);
  transform: translateY(-2px);
}

.nav-portal-btn:hover::before {
  background-color: #fff;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .nav-portal-btn::before { animation: none; }
}

/* 모바일 햄버거 메뉴 */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  z-index: 1001;
  padding: 12px; /* 모바일 터치 대상 면적(44px) 충족을 위한 내부 여백 확장 */
  margin: -12px; /* 아웃라인 침범 방지를 위한 네거티브 마진 상쇄 */
}

.menu-toggle span {
  width: 25px;
  height: 2px;
  background-color: var(--text-primary);
  transition: var(--transition-smooth);
}

/* 히어로 섹션 */
.hero-section {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 150px;
  padding-bottom: 40px;
  overflow: hidden;
  background: radial-gradient(circle at 85% 20%, hsla(38, 48%, 42%, 0.05) 0%, transparent 60%),
              radial-gradient(circle at 10% 80%, hsla(210, 20%, 94%, 0.7) 0%, transparent 60%);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 3rem;
  align-items: center;
  width: 100%;
  z-index: 10;
}

.hero-content-left {
  text-align: left;
  z-index: 10;
}

.hero-ticker-right {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  z-index: 10;
}

/* 실시간 현황판 글래스모피즘 카드 */
.status-ticker-card {
  width: 100%;
  max-width: 480px;
  background: hsla(210, 20%, 98%, 0.45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(184, 134, 11, 0.12);
  border-radius: 8px;
  box-shadow: 0 30px 60px -20px rgba(38, 48, 42, 0.04),
              0 0 1px 1px rgba(255, 255, 255, 0.9) inset;
  padding: 1.75rem;
  transition: border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.status-ticker-card:hover {
  border-color: rgba(184, 134, 11, 0.25);
}

.ticker-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(184, 134, 11, 0.08);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.pulse-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background-color: hsl(140, 60%, 45%);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7);
  animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.5);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(46, 204, 113, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
  }
}

.pulse-text {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.ticker-update-time {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
}

.ticker-table-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.ticker-table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 1rem;
  border-radius: 4px;
  background-color: hsla(210, 15%, 94%, 0.4);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  border: 1px solid transparent; /* 행 테두리로 인한 2px 어긋남 완벽 상쇄 */
}

.th-company { width: 20%; text-align: left; }
.th-date { width: 18%; text-align: center; }
.th-service { width: 32%; text-align: left; }
.th-count { width: 15%; text-align: center; }
.th-status { width: 15%; text-align: right; }

.ticker-scroll-window {
  height: 280px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

/* 셰이더 오버레이 - 스크롤 위아래 경계를 부드럽게 가려주는 페이드 효과 */
.ticker-scroll-window::before, .ticker-scroll-window::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 25px;
  z-index: 2;
  pointer-events: none;
}

.ticker-scroll-window::before {
  top: 0;
  background: linear-gradient(to bottom, hsla(210, 20%, 98%, 0.8) 0%, transparent 100%);
}

.ticker-scroll-window::after {
  bottom: 0;
  background: linear-gradient(to top, hsla(210, 20%, 98%, 0.8) 0%, transparent 100%);
}

.ticker-scroll-track {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  animation: vertical-ticker 24s linear infinite;
}

.ticker-scroll-track:hover {
  animation-play-state: paused;
}

@keyframes vertical-ticker {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%); /* 정확히 절반을 지날 때 부드럽게 무한 루프 */
  }
}

.ticker-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  font-size: 0.85rem;
  color: var(--text-primary);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.ticker-row:hover {
  transform: scale(1.01);
  border-color: rgba(184, 134, 11, 0.2);
}

.td-company {
  width: 20%;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
}

.td-date {
  width: 18%;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.td-service {
  width: 32%;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 500;
}

.td-count {
  width: 15%;
  text-align: center;
  font-weight: 600;
  color: var(--text-primary);
}

.td-status {
  width: 15%;
  text-align: right;
  display: flex;
  justify-content: flex-end;
}

/* 실시간 현황 배지 스타일 */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}

.badge-completed {
  background-color: hsla(140, 50%, 45%, 0.1);
  color: hsl(140, 50%, 35%);
}

.badge-processing {
  background-color: hsla(210, 50%, 45%, 0.1);
  color: hsl(210, 50%, 35%);
}

.badge-consulting {
  background-color: hsla(38, 48%, 42%, 0.1);
  color: var(--primary);
}

.badge-review {
  background-color: hsla(260, 40%, 45%, 0.1);
  color: hsl(260, 40%, 35%);
}

.hero-subtitle {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  letter-spacing: 0.15em;
  color: var(--primary);
  text-transform: uppercase;
  margin-bottom: 1rem;
  display: inline-block;
  border-bottom: 1px solid var(--primary);
  padding-bottom: 0.25rem;
}

.hero-title {
  font-family: var(--font-serif);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.hero-title-line {
  display: block;
  white-space: nowrap;
}

.hero-title-line.accent {
  color: var(--primary);
  margin-top: 0.3rem;
}

.hero-description {
  font-size: 1.05rem;
  color: var(--text-secondary);
  margin-bottom: 2rem;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  justify-content: flex-start;
  gap: 1.5rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2.25rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 1rem;
  transition: var(--transition-smooth);
}

.btn-primary {
  background-color: var(--primary);
  color: var(--bg-base);
  border: 1px solid var(--primary);
}

.btn-primary:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
  box-shadow: 0 8px 30px var(--primary-glow);
  transform: translateY(-3px);
}

.btn-secondary {
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

.btn-secondary:hover {
  border-color: var(--primary);
  color: var(--primary);
  background-color: hsla(38, 48%, 56%, 0.03);
  transform: translateY(-3px);
}

/* 주요 장점 섹션 */
.section {
  padding: 8rem 0;
  border-bottom: 1px solid var(--border-color);
}

.section-tag {
  font-family: var(--font-serif);
  font-size: 0.9rem;
  color: var(--primary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  display: block;
}

.section-title {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  letter-spacing: -0.01em;
}

.section-desc {
  color: var(--text-secondary);
  max-width: 600px;
  margin-bottom: 4rem;
}

/* 변호사 원팀 소개 카드 */
.advantage-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
  align-items: center;
}

.advantage-visual {
  position: relative;
  border: 1px solid var(--border-color);
  background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-base) 100%);
  padding: 3.5rem;
  border-radius: 8px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.03);
}

.advantage-visual::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
}

.visual-badge {
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--primary);
  margin-bottom: 1.5rem;
}

.visual-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.visual-text {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.7;
}

.advantage-features {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.feature-item {
  display: flex;
  gap: 1.5rem;
}

.feature-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 4px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}

.feature-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.feature-desc {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* 주요 업무 카드 그리드 */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
}

.service-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  padding: 3rem 2rem;
  border-radius: 6px;
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.service-card:hover {
  transform: translateY(-8px);
  border-color: var(--primary);
  box-shadow: 0 16px 36px rgba(38, 48, 42, 0.08);
}

.service-icon {
  width: 56px;
  height: 56px;
  border-radius: 4px;
  background-color: var(--bg-base);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 1.5rem;
  margin-bottom: 2rem;
  transition: var(--transition-smooth);
}

.service-card:hover .service-icon {
  background-color: var(--primary);
  color: var(--bg-base);
  border-color: var(--primary);
}

.service-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.service-desc {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.7;
  flex-grow: 1;
  margin-bottom: 2rem;
}

.service-link {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.service-link span {
  transition: var(--transition-smooth);
}

.service-card:hover .service-link span {
  transform: translateX(5px);
}

/* 서비스 카드 - 잠정 중단(비활성) 상태
   뒤쪽 글래스모피즘 리팩토링 블록(.service-card / .service-card:hover)이
   border·background·box-shadow·transform 을 !important 로 선언하고 있어,
   클래스를 겹쳐 특이도를 올리고 동일하게 !important 로 맞춘다. */
.service-card.service-card--suspended {
  background: var(--bg-base) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px dashed var(--border-color-hover) !important;
  box-shadow: none !important;
  cursor: default;
}

.service-card.service-card--suspended:hover {
  transform: none !important;
  border-color: var(--border-color-hover) !important;
  box-shadow: none !important;
}

.service-card--suspended .service-icon,
.service-card--suspended .service-title,
.service-card--suspended .service-desc {
  opacity: 0.55;
}

/* 뒤쪽에 선언된 .service-card:hover 규칙(아이콘 반전)을 확실히 무력화하기 위해
   클래스를 겹쳐 특이도를 한 단계 올린다. */
.service-card.service-card--suspended:hover .service-icon {
  background-color: var(--bg-base);
  color: var(--primary);
  border-color: var(--border-color);
}

.service-card.service-card--suspended:hover .service-svg {
  stroke: var(--primary);
}

.service-status-badge {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--danger);
  background-color: hsla(0, 55%, 40%, 0.07);
  border: 1px solid hsla(0, 55%, 40%, 0.25);
}

.service-status-badge .icon {
  --icon-size: 0.85rem;
  vertical-align: 0;
}

.service-suspended-note {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--text-secondary);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--danger);
  border-radius: 0 4px 4px 0;
  padding: 0.85rem 1rem;
  margin-bottom: 1.75rem;
}

.service-suspended-note strong {
  color: var(--text-primary);
  font-weight: 600;
}

.service-suspended-note a {
  position: relative;
  z-index: 2;
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.service-suspended-note a:hover {
  color: var(--primary-hover);
}

.service-link--disabled {
  color: var(--text-muted);
  cursor: not-allowed;
  pointer-events: none;
}

.service-link--disabled .icon {
  opacity: 0.6;
}

/* 신뢰도 및 수치 섹션 */
.stats-section {
  background-color: var(--bg-surface);
  padding: 5rem 0;
  border-bottom: 1px solid var(--border-color);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  text-align: center;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.stat-num {
  font-family: var(--font-serif);
  font-size: 3rem;
  font-weight: 700;
  color: var(--primary);
}

.stat-label {
  font-size: 0.95rem;
  color: var(--text-secondary);
}

/* 문의하기 폼 컨테이너 */
.contact-container {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 4rem;
}

.contact-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2rem;
  align-self: start;
  background: hsla(38, 48%, 98%, 0.35) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(184, 134, 11, 0.08) !important;
  border-radius: 8px !important;
  padding: 3rem 2.5rem !important;
  box-shadow: 0 30px 70px -25px rgba(38, 48, 42, 0.03), 
              0 0 1px 1px rgba(255, 255, 255, 0.9) inset !important;
  transition: border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin: 3rem 0;
}

.contact-detail-item {
  display: flex;
  gap: 1rem;
}

.detail-icon {
  color: var(--primary);
  font-size: 1.2rem;
  flex-shrink: 0;
}

.detail-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

.detail-val {
  font-size: 1.05rem;
  font-weight: 500;
}

.kakao-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background-color: hsl(45, 96%, 47%);
  color: hsl(0, 0%, 10%);
  padding: 1rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 1rem;
  transition: var(--transition-smooth);
}

.kakao-btn:hover {
  background-color: hsl(45, 96%, 40%);
  transform: translateY(-2px);
}

/* 양식 필드 스타일 */
.contact-form {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  padding: 3.5rem;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.form-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.form-input, .form-textarea, .form-select {
  background-color: var(--bg-surface) !important;
  border: 1.2px solid var(--input-border-color) !important;
  color: var(--text-primary) !important;
  padding: 1rem !important;
  border-radius: 4px !important;
  font-size: 0.95rem !important;
  transition: var(--transition-smooth);
}

.form-input:hover, .form-textarea:hover, .form-select:hover {
  border-color: hsl(38, 40%, 55%) !important;
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-glow) !important;
  outline: none !important;
}

.form-textarea {
  resize: vertical;
  min-height: 150px;
}

.checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.checkbox-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--input-border-color) !important;
  border-radius: 4px;
  background-color: var(--bg-surface) !important;
  cursor: pointer;
  margin-top: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.checkbox-input:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.checkbox-input:checked {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.checkbox-input:checked::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 9px;
  border: solid var(--bg-base);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  top: 2px;
  left: 5px;
}

.checkbox-input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.checkbox-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.checkbox-label a {
  color: var(--primary);
  text-decoration: underline;
}

.submit-btn {
  background-color: var(--primary);
  color: var(--bg-base);
  padding: 1.1rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: var(--transition-smooth);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.submit-btn:hover {
  background-color: var(--primary-hover);
  box-shadow: 0 6px 20px var(--primary-glow);
  transform: translateY(-2px);
}

.submit-btn:disabled {
  background-color: var(--border-color);
  color: var(--text-muted);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 폼 검증 상태 표시 */
.input-error {
  border-color: hsl(0, 75%, 55%);
}

.error-text {
  font-size: 0.8rem;
  color: hsl(0, 75%, 55%);
  margin-top: 0.25rem;
  display: none;
}

.input-error + .error-text {
  display: block;
}

.form-feedback {
  padding: 1.25rem 1.5rem;
  border-radius: 6px;
  font-size: 0.95rem;
  line-height: 1.6;
  display: none;
  margin-bottom: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

.form-feedback.success {
  display: block;
  background-color: hsl(140, 45%, 96%);
  border: 1px solid hsl(140, 30%, 82%);
  color: hsl(140, 50%, 18%);
}

.form-feedback.error {
  display: block;
  background-color: hsl(0, 60%, 98%);
  border: 1px solid hsl(0, 45%, 90%);
  color: hsl(0, 70%, 22%);
}

/* 푸터 섹션 */
.site-footer {
  background-color: hsl(210, 20%, 94%);
  color: var(--text-secondary);
  padding: 5rem 0 3rem;
  border-top: 1px solid var(--border-color);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 4rem;
  margin-bottom: 4rem;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.footer-logo {
  font-family: 'Noto Serif KR', serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-primary);
}

.footer-logo span {
  color: var(--text-primary);
}

.footer-desc {
  font-size: 0.9rem;
  line-height: 1.7;
}

.footer-title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-link {
  font-size: 0.9rem;
}

.footer-link:hover {
  color: var(--primary);
}

.footer-bottom {
  border-top: 1px solid var(--border-color);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* 반응형 모바일 브레이크포인트 */
@media (max-width: 992px) {
  .nav-menu {
    gap: 1.5rem;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 3.5rem;
    padding-top: 1rem;
    padding-bottom: 2rem;
  }

  .hero-content-left {
    text-align: center;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-ticker-right {
    justify-content: center;
  }

  .hero-title {
    font-size: 2.4rem;
  }
  
  .advantage-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  
  .contact-container {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  
  .contact-info {
    padding: 2.5rem 2rem !important;
  }
  
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 1rem;
  }

  .header-container {
    height: 56px; /* 모바일 헤더 크기 56px에 맞춤 */
  }
  
  .nav-menu {
    position: fixed;
    top: 56px; /* 헤더 크기에 맞춰 틈새 제거 */
    left: 0;
    width: 100%;
    height: calc(100dvh - 56px); /* 모바일 풀 오버레이 메뉴 */
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-color);
    flex-direction: column;
    justify-content: center; /* 메뉴 중앙 정렬 */
    align-items: center;
    padding: 0;
    gap: 2.5rem;
    transform: translateY(-120%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0;
    pointer-events: none;
    z-index: 999;
  }

  .nav-menu .nav-link {
    font-size: 1.35rem !important;
    font-weight: 600 !important;
    padding: 0.8rem 0 !important;
    color: var(--text-primary) !important;
  }

  .nav-menu .nav-cta-btn {
    font-size: 1.2rem !important;
    padding: 1rem 2.5rem !important;
    width: 80% !important;
    max-width: 320px;
    text-align: center;
  }

  .nav-menu .nav-portal-btn {
    font-size: 1.2rem !important;
    padding: 1rem 2.5rem !important;
    width: 80% !important;
    max-width: 320px;
    box-sizing: border-box;
    justify-content: center;
  }
  
  .nav-menu.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }
  
  .menu-toggle {
    display: flex;
  }
  
  .menu-toggle.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  
  .menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  
  .menu-toggle.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
  
  .hero-title {
    font-size: 1.8rem;
    line-height: 1.4;
  }
  
  .hero-title-line {
    white-space: normal;
  }
  
  .hero-actions {
    flex-direction: column;
    gap: 1rem;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .form-row {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .contact-form {
    padding: 2rem 1.5rem;
  }
  
  .contact-info {
    padding: 2rem 1.25rem !important;
  }

  .email-guarantee-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.25rem 1rem !important;
  }
  
  .section {
    padding: 5rem 0;
  }
  
  /* 모바일 앵커 네비게이션 바 및 링크 터치 최적화 */
  .sub-nav-bar {
    top: 56px !important; /* 모바일 헤더 56px 높이에 동적 부착하여 틈새 제거 */
    margin-bottom: 2rem !important;
  }
  
  .sub-nav-link {
    font-size: 0.82rem !important;
    padding: 0.6rem 0.95rem !important; /* 모바일 터치 정확도 확보 */
  }

  .corporate-b2b-box {
    padding: 1.75rem 1.25rem;
  }

  .faq-summary {
    padding: 1rem 1.25rem;
  }

  .faq-content {
    padding: 0 1.25rem 1.25rem;
  }
}

/* =========================================================
   공통 아이콘 시스템 (라인 SVG)
   ---------------------------------------------------------
   마크업 규약:
     <svg class="icon icon--lg" viewBox="0 0 24 24"> …path… </svg>
   - 인라인에는 viewBox 와 내부 path 만 남긴다.
     색/두께/크기/정렬은 전부 이 클래스가 담당(반복 속성 금지).
   - stroke:currentColor → 부모의 color(텍스트색)를 그대로 따른다.
     색을 바꾸려면 색 모디파이어 또는 style="color:…" 사용.
   - 크기: --icon-size, 두께: --icon-stroke.
     모디파이어로 조절하거나, 예외값은 style="--icon-size:15px" 처럼 인라인 오버라이드.
   - 아이콘 사용 원칙: UI 요소는 이모지 대신 이 시스템으로 아이콘을 배치한다.
   ========================================================= */
.icon {
  --icon-size: 24px;
  --icon-stroke: 2;
  display: inline-block;
  flex-shrink: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
  transition: var(--transition-smooth);
}

/* 크기 모디파이어 (px 값은 기존 아이콘 크기와 1:1 대응) */
.icon--14 { --icon-size: 14px; }
.icon--16 { --icon-size: 16px; }
.icon--18 { --icon-size: 18px; }
.icon--20 { --icon-size: 20px; }
.icon--22 { --icon-size: 22px; }
.icon--24 { --icon-size: 24px; }
.icon--32 { --icon-size: 32px; }
.icon--sm { --icon-size: 16px; }  /* 의미형 별칭 */
.icon--md { --icon-size: 20px; }
.icon--lg { --icon-size: 24px; }
.icon--xl { --icon-size: 32px; }

/* 텍스트 줄 안에 들어가는 인라인 아이콘 (주변 폰트 크기에 맞춰 스케일) */
.icon--text { --icon-size: 1em; vertical-align: -0.125em; }

/* 선 두께 모디파이어 (기본 2) */
.icon--thin  { --icon-stroke: 1.5; }
.icon--bold  { --icon-stroke: 2.5; }
.icon--heavy { --icon-stroke: 3; }

/* 색 모디파이어 (stroke:currentColor 기반) */
.icon--primary { color: var(--primary); }
.icon--muted   { color: var(--text-muted); }
.icon--danger  { color: hsl(0, 85%, 45%); }

/* 단계 번호 배지 (원형 · ①②③ 대체) */
.step-num-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background-color: var(--primary);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
}

/* ---------------------------------------------------------
   레거시 아이콘 클래스 → 공통 시스템 위로 통합
   (service-card 호버 등 기존 동작 유지를 위해 클래스명은 보존.
    인라인 속성은 제거하고 여기서 일괄 정의)
   --------------------------------------------------------- */
.feature-svg,
.service-svg,
.detail-svg {
  display: inline-block;
  flex-shrink: 0;
  fill: none;
  stroke: var(--primary);
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
  transition: var(--transition-smooth);
}

.feature-svg { width: 24px; height: 24px; stroke-width: 2; }
.service-svg { width: 32px; height: 32px; stroke-width: 1.5; }
.detail-svg  { width: 20px; height: 20px; stroke-width: 1.5; }

.service-card:hover .service-svg {
  stroke: var(--bg-base);
}

/* 카드 전체 클릭 활성화 영역 (Stretched Link) */
.service-card {
  position: relative;
}

.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
}

/* ==========================================
   하이엔드 럭셔리 로펌 비주얼 디자인 시스템
   ========================================== */

/* 1. Dynamic Pulser Glow Circles (숨 쉬는 배경 조명) */
.glow-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* iOS Safari 가변 주소창으로 인한 뷰포트 뒤틀림 완벽 방지 */
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}

.glow-circle {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.35;
  mix-blend-mode: multiply;
  animation: pulse-glow 12s ease-in-out infinite alternate;
}

.glow-circle-1 {
  top: -15%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, hsla(38, 48%, 42%, 0.15) 0%, transparent 70%);
}

.glow-circle-2 {
  bottom: -20%;
  left: -15%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, hsla(210, 20%, 80%, 0.25) 0%, transparent 70%);
  animation-delay: -6s;
}

@keyframes pulse-glow {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.25;
  }
  100% {
    transform: translate(50px, 30px) scale(1.15);
    opacity: 0.45;
  }
}

/* 2. 글래스모피즘 & 레이어드 섀도우 카드 리팩토링 */
.service-card, .advantage-visual, .contact-form {
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(184, 134, 11, 0.08) !important;
  box-shadow: 0 30px 70px -20px rgba(38, 48, 42, 0.04), 
              0 0 1px 1px rgba(255, 255, 255, 0.8) inset !important;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.service-card:hover, .advantage-visual:hover {
  transform: translateY(-12px) scale(1.01) !important;
  border-color: rgba(184, 134, 11, 0.25) !important;
  box-shadow: 0 45px 90px -25px rgba(38, 48, 42, 0.08), 
              0 0 0 1px var(--primary) inset !important;
}

/* 3. 극세사 0.5px 골드 스레드 및 크로스헤어 그리드 시스템 */
.gold-thread-h {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, 
              transparent 0%, 
              rgba(184, 134, 11, 0.12) 20%, 
              rgba(184, 134, 11, 0.12) 80%, 
              transparent 100%);
  margin: 4rem 0;
  position: relative;
}

.crosshair {
  position: absolute;
  top: 50%;
  left: 10%;
  width: 13px;
  height: 13px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.crosshair::before, .crosshair::after {
  content: "";
  position: absolute;
  background-color: rgba(184, 134, 11, 0.3);
}

.crosshair::before {
  top: 6px;
  left: 0;
  width: 13px;
  height: 1px;
}

.crosshair::after {
  top: 0;
  left: 6px;
  width: 1px;
  height: 13px;
}

.crosshair-right {
  left: 90%;
}

/* 4. 스크롤 리빌 (Scroll Reveal) 모션 시스템 */
.fade-in-reveal {
  opacity: 0;
  transform: translateY(50px) scale(0.98);
  pointer-events: none;
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1), 
              opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform, opacity;
}

.fade-in-reveal.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

/* 5. 히어로 영역 장식적 비주얼 엠블럼 추가 */
.hero-emblem {
  margin: 0 auto 2.5rem;
  width: 50px;
  height: 50px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-emblem::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(184, 134, 11, 0.25);
  transform: rotate(45deg);
  animation: spin-emblem 20s linear infinite;
}

.hero-emblem::after {
  content: "";
  position: absolute;
  width: 60%;
  height: 60%;
  border: 1px solid var(--primary);
  transform: rotate(-45deg);
  animation: spin-emblem-reverse 15s linear infinite;
}

@keyframes spin-emblem {
  100% { transform: rotate(405deg); }
}

@keyframes spin-emblem-reverse {
  100% { transform: rotate(-405deg); }
}

/* 6. 모바일 레이아웃 CLS (Cumulative Layout Shift) 제로화 보정 */
@media (max-width: 768px) {
  .site-header {
    padding: 0 !important; /* 모바일 헤더 상하 비대함 제거 */
  }
  
  .header-container {
    height: 56px !important; /* 모바일 헤더 높이 대폭 축소 */
  }
  
  .logo-link {
    font-size: 1.25rem !important; /* 로고 폰트 크기 모바일 축소 */
  }
  
  main {
    padding-top: 80px !important; /* 모바일 본문 최상단 여백 최적화 */
    padding-bottom: 4rem !important;
  }
  
  .gold-thread-h {
    margin: 2rem 0 !important; /* 마진 폭 조절로 급격한 스크롤 레이아웃 시프트 방지 */
  }
  
  .fade-in-reveal {
    transform: translateY(20px) scale(0.99) !important; /* 모바일 리빌 이동 폭 최소화로 스크롤 흔들림 방지 */
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  
  .hero-emblem {
    margin-bottom: 1.5rem !important;
  }
}

/* 7. 서브 페이지 프리미엄 마이크로 인터랙션 및 컴포넌트 고도화 */
.details-content h3 {
  position: relative;
  display: inline-block;
  color: var(--text-primary);
  border-bottom: 1px solid rgba(184, 134, 11, 0.15);
  padding-bottom: 0.25rem;
  margin-top: 2.5rem;
  margin-bottom: 1.25rem;
}

/* 서브 페이지 내 프로세스 단계/비용 카드에 3D 골드 광택 트랜지션 주입 */
.process-step-card, .premium-price-card {
  background-color: var(--bg-base);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 2rem;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative;
  overflow: hidden;
}

.process-step-card::before, .premium-price-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, 
              transparent, 
              rgba(184, 134, 11, 0.05), 
              transparent);
  transform: skewX(-25deg);
  transition: 0.75s;
}

.process-step-card:hover::before, .premium-price-card:hover::before {
  left: 150%;
}

.process-step-card:hover, .premium-price-card:hover {
  transform: translateY(-8px) scale(1.01) !important;
  border-color: rgba(184, 134, 11, 0.3) !important;
  box-shadow: 0 30px 60px -15px rgba(38, 48, 42, 0.06), 
              0 0 0 1px var(--primary) inset !important;
}

/* ==========================================
   보안 이메일 프로세스 및 캡챠 전용 스타일
   ========================================== */

/* 이메일 답변 보증 프리미엄 배너 */
.email-guarantee-banner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: linear-gradient(135deg, hsla(38, 48%, 56%, 0.08) 0%, hsla(38, 48%, 42%, 0.03) 100%) !important;
  border: 1px solid rgba(184, 134, 11, 0.18) !important;
  padding: 1.25rem 1.5rem !important;
  border-radius: 6px !important;
  margin: 1.5rem 0 2rem 0 !important;
  box-shadow: 0 10px 25px -10px rgba(184, 134, 11, 0.03),
              0 0 1px 1px rgba(255, 255, 255, 0.7) inset !important;
}

.banner-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle, hsla(38, 48%, 56%, 0.15) 0%, hsla(38, 48%, 42%, 0.05) 100%) !important;
  border: 1px solid rgba(184, 134, 11, 0.25) !important;
  color: var(--primary) !important;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(184, 134, 11, 0.08);
}

.banner-icon-box svg {
  stroke: var(--primary) !important;
}

.banner-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.banner-label {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.banner-value {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary) !important;
  line-height: 1.4;
  margin: 0 !important;
}

/* 이메일 보안 소통 프로세스 카드 */
.security-process-card {
  background: rgba(255, 255, 255, 0.65) !important;
  border: 1px solid rgba(184, 134, 11, 0.12) !important;
  border-radius: 8px;
  padding: 2.25rem 2rem;
  box-shadow: 0 15px 35px rgba(38, 48, 42, 0.03), 
              0 0 1px 1px rgba(255, 255, 255, 0.9) inset !important;
  margin-top: 1.5rem;
}

.process-card-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}

.process-card-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 2rem;
}

.process-steps {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.process-step-item {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.step-number {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--primary);
  background: hsla(38, 48%, 56%, 0.1);
  border-radius: 4px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.step-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.step-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Google reCAPTCHA v2 박스 반응형 정렬 스타일 */
.recaptcha-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background-color: rgba(255, 255, 255, 0.45);
  border: 1px solid var(--border-color);
  padding: 1.5rem;
  border-radius: 6px;
  margin-top: 0.5rem;
  transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth);
}

.recaptcha-group.error {
  border-color: hsl(0, 75%, 55%);
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
  animation: shake 0.4s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.recaptcha-group .g-recaptcha {
  display: flex;
  justify-content: flex-start;
  overflow: hidden;
  max-width: 100%;
}

/* 모바일 뷰포트에서 구글 리캡챠 크기가 깨지지 않고 축소형(scale) 비율 정렬되도록 처리 */
@media (max-width: 415px) {
  .recaptcha-group .g-recaptcha {
    transform: scale(0.88);
    transform-origin: 0 0;
    width: 265px; /* 302px * 0.88 */
    height: 68px;  /* 78px * 0.88 */
  }
}

@media (max-width: 360px) {
  .recaptcha-group .g-recaptcha {
    transform: scale(0.8);
    transform-origin: 0 0;
    width: 241px; /* 302px * 0.8 */
    height: 62px;  /* 78px * 0.8 */
  }
}

/* ==========================================
   프리미엄 UI/UX 및 Aesthetics 고도화 스타일
   ========================================== */

/* 1. 입력 필드 포커스 마이크로 애니메이션 리리팩토링 */
.form-input, .form-textarea, .form-select {
  transition: border-color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px hsla(38, 48%, 56%, 0.15), 
              0 8px 24px rgba(184, 134, 11, 0.04) !important;
  transform: translateY(-1px);
}

/* 2. CLS(레이아웃 흔들림) 완전 예방형 에러 메시지 애니메이션 */
.error-text {
  display: block !important;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  overflow: hidden;
  transition: max-height 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              margin-top 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.input-error + .error-text,
.recaptcha-group.error #captcha-error {
  display: block !important;
  max-height: 24px;
  opacity: 1;
  margin-top: 0.35rem;
}

/* 3. 유효성 실패 필드 셰이크(Shake) 오류 피드백 모션 */
.shake-error {
  animation: shake-field 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  border-color: hsl(0, 75%, 55%) !important;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1) !important;
}

@keyframes shake-field {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
  40%, 60% { transform: translate3d(3px, 0, 0); }
}

/* 4. 브라우저 독립형 골드 앵글 데코 커스텀 셀렉트 박스 */
.form-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8860b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1.25rem center !important;
  background-size: 1.1rem !important;
  padding-right: 3rem !important;
  cursor: pointer;
}

/* 5. 제출 중 마이크로 전송 스피너 (INP 극대화) */
.btn-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin-button 0.75s linear infinite;
  display: inline-block;
  margin-right: 0.6rem;
  vertical-align: middle;
  flex-shrink: 0;
}

@keyframes spin-button {
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   서브페이지 앵커 네비게이션 바 (Anchor Navigation Bar)
   ========================================================================== */
.sub-nav-bar {
  position: sticky;
  top: 80px; /* 헤더의 높이만큼 띄워서 하단에 완전히 밀착 고정 */
  z-index: 99;
  background-color: hsla(210, 20%, 98%, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color);
  margin-top: -1.5rem;
  margin-bottom: 3.5rem;
  padding: 0.75rem 0;
  transition: var(--transition-smooth);
}

/* 스크롤 시 헤더에 섀도우가 생길 때 서브바와 조화를 이루도록 함 */
.site-header.scrolled ~ main .sub-nav-bar {
  background-color: hsla(0, 0%, 100%, 0.96);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.sub-nav-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  padding: 0 1rem;
}

/* 모바일 가로 롤링 스크롤바 삭제 */
.sub-nav-container::-webkit-scrollbar {
  display: none;
}

.sub-nav-item {
  display: inline-block;
}

.sub-nav-link {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 0.45rem 1rem;
  border-radius: 4px;
  background-color: transparent;
  transition: var(--transition-smooth);
  border: 1px solid transparent;
}

.sub-nav-link:hover {
  color: var(--primary);
  background-color: var(--primary-glow);
  border-color: hsla(38, 48%, 42%, 0.15);
}

/* 앵커 스크롤 타겟 오버랩 완벽 방지 */
h2[id], div[id].sub-disclaimer {
  scroll-margin-top: 155px; /* 헤더 80px + 서브바 약 50px + 안전 여유공간 25px */
}

/* ==========================================================================
   서브페이지 상세 전용 프리미엄 UI 패키지 (Cards, Accordion, Corporate Plan)
   ========================================================================== */

/* 상세 본문 박스 */
.sub-content-wrapper {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  padding: 3.5rem 2rem;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(38, 48, 42, 0.02);
  margin-bottom: 4rem;
}

/* 필수 구비 서류 가이드 분할 구조 */
.docs-dual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 3.5rem;
}

.docs-card {
  background-color: var(--bg-base);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 1.5rem 1.25rem;
  transition: var(--transition-smooth);
}

.docs-card:hover {
  border-color: var(--primary);
  box-shadow: 0 8px 24px rgba(38, 48, 42, 0.04);
}

.docs-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.75rem;
}

.docs-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.docs-list li {
  position: relative;
  padding-left: 1.25rem;
}

.docs-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 700;
}

/* 10인 이상 단체 파견 스페셜 B2B 플랜 박스 */
.corporate-b2b-box {
  background: linear-gradient(135deg, hsla(38, 48%, 42%, 0.02) 0%, hsla(38, 48%, 34%, 0.05) 100%);
  border: 1px solid rgba(184, 134, 11, 0.18);
  border-radius: 8px;
  padding: 2.5rem;
  margin-bottom: 3.5rem;
  text-align: center;
  box-shadow: 0 10px 30px rgba(184, 134, 11, 0.02);
}

.corporate-b2b-badge {
  display: inline-block;
  background-color: var(--primary);
  color: var(--bg-base);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: 50px;
  margin-bottom: 1rem;
  letter-spacing: 0.05em;
}

.corporate-b2b-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

.corporate-b2b-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 620px;
  margin: 0 auto;
}

/* 프리미엄 어코디언 FAQ 스타일 */
.faq-accordion-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 4rem;
}

.faq-details {
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background-color: var(--bg-base);
  transition: var(--transition-smooth);
  overflow: hidden;
}

.faq-details[open] {
  background-color: var(--bg-surface);
  border-color: var(--primary);
  box-shadow: 0 8px 24px rgba(38, 48, 42, 0.04);
}

.faq-summary {
  padding: 1.25rem 1.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  outline: none;
  user-select: none;
}

/* summary 브라우저 기본 화살표 제거 */
.faq-summary::-webkit-details-marker {
  display: none;
}

.faq-summary::after {
  content: "+";
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--primary);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-details[open] .faq-summary::after {
  content: "−";
  transform: rotate(180deg);
}

.faq-content {
  padding: 0 1.5rem 1.5rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.7;
  border-top: 1px solid transparent;
  animation: slideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-details[open] .faq-content {
  border-top-color: var(--border-color);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2줄 디스클레이머 컴플라이언스 존 */
.compliance-disclaimer-box {
  background-color: hsla(38, 48%, 42%, 0.02);
  border: 1px dashed var(--primary);
  padding: 1.5rem;
  border-radius: 6px;
  margin-bottom: 3.5rem;
}

.compliance-disclaimer-text {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.8;
  font-weight: 500;
  margin: 0;
}

/* 비용 가이드 그룹 제목 (결제 주체별 구분) */
.fee-group-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin: 0 0 1rem 0;
}

.fee-group-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--primary);
  background-color: hsla(38, 48%, 42%, 0.07);
  border: 1px solid rgba(184, 134, 11, 0.28);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  white-space: nowrap;
}

/* 법인장 현지 방문 의무 안내 */
.fee-visit-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  background-color: hsla(38, 48%, 42%, 0.03);
  border: 1px solid rgba(184, 134, 11, 0.22);
  border-left: 3px solid var(--primary);
  border-radius: 6px;
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.5rem;
}

.fee-visit-notice-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.fee-visit-notice-text {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin: 0;
  word-break: keep-all;
}

.fee-visit-notice-text strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* 미디어나 모바일 대응 가로 폭 조절 */
@media (max-width: 768px) {
  .sub-content-wrapper {
    padding: 1.5rem 1rem;
  }
  .docs-dual-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Premium Skeleton Shimmer Effect */
.shimmer-placeholder-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem; /* .ticker-row 패딩과 동기화하여 CLS 제거 */
  border-radius: 6px; /* .ticker-row 테두리 반경과 동기화 */
  background-color: var(--bg-surface); /* .ticker-row 배경색과 동기화 */
  border: 1px solid var(--border-color); /* .ticker-row 테두리와 동기화 */
}

.shimmer-block {
  height: 14px;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.04) 25%,
    rgba(0, 0, 0, 0.09) 37%,
    rgba(0, 0, 0, 0.04) 63%
  ); /* 흰색 카드 위에서 잘 보이도록 연한 그레이 음영으로 개선 */
  background-size: 400% 100%;
  animation: shimmer-swipe 1.4s ease infinite;
}

@keyframes shimmer-swipe {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.sb-company { width: 20%; }
.sb-date { width: 18%; }
.sb-service { width: 32%; }
.sb-count { width: 15%; }
.sb-status { width: 15%; height: 20px; border-radius: 12px; }



/* 실시간 현황판 모바일 뷰포트 컬럼 최적화 */
@media (max-width: 480px) {
  /* 총인원 칼럼 및 스켈레톤 블록 전체 모바일 동시 숨김 (CLS 원천 방지) */
  .th-count, .td-count, .sb-count { display: none !important; }
  
  /* 날짜 칼럼 및 스켈레톤 블록 복원 */
  .th-date, .td-date, .sb-date { 
    display: block !important; 
    width: 20% !important; 
  }
  
  /* 4개 칼럼 정밀 모바일 너비 재배치 */
  .th-company, .td-company, .sb-company { width: 25% !important; }
  .th-service, .td-service, .sb-service { width: 35% !important; }
  .th-status, .td-status, .sb-status { 
    width: 20% !important; 
    display: flex !important;
    justify-content: flex-end !important;
  }
  
  .status-ticker-card {
    padding: 1.25rem !important;
  }
  
  .ticker-row {
    padding: 0.65rem !important;
    font-size: 0.82rem !important;
  }

  /* 아이폰 및 좁은 모바일 뷰포트에서의 정갈한 타이틀 줄바꿈 유도 */
  .hero-title {
    font-size: 1.58rem !important;
    line-height: 1.42 !important;
    letter-spacing: -0.03em !important;
  }
  
  .hero-description {
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
    word-break: keep-all !important;
  }
  
  .hero-section {
    padding-top: 110px !important;
    padding-bottom: 30px !important;
  }

  .container {
    padding: 0 0.75rem;
  }

  .sub-content-wrapper {
    padding: 1.25rem 0.75rem;
    border-radius: 6px;
  }

  .contact-form {
    padding: 1.5rem 1rem;
  }

  .contact-info {
    padding: 1.5rem 1rem !important;
  }

  .corporate-b2b-box {
    padding: 1.5rem 1rem;
  }

  .email-guarantee-banner {
    padding: 1rem 0.75rem !important;
    gap: 0.5rem;
  }

  .faq-summary {
    padding: 0.85rem 1rem;
  }

  .faq-content {
    padding: 0 1rem 1rem;
  }

  .optional-info-card {
    padding: 1rem;
    margin: 1rem 0;
  }
}

/* 초소형 스마트폰 뷰포트 대응 */
@media (max-width: 360px) {
  .hero-title {
    font-size: 1.4rem !important;
  }
}

/* 3단 구비 서류 가이드 분할 구조 및 실무 팁 박스 */
.docs-triple-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 3.5rem;
}

.docs-tip-box {
  background-color: hsla(38, 48%, 56%, 0.03);
  border: 1px solid rgba(184, 134, 11, 0.18);
  padding: 0.85rem 1rem;
  border-radius: 6px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-top: 1rem;
  box-shadow: 0 2px 8px rgba(184, 134, 11, 0.02);
}

.docs-tip-box strong {
  color: var(--primary);
  display: block;
  margin-bottom: 0.25rem;
}

/* 상품 페이지 공통 안내 박스 (경고 / 추천 팁) */
.alert-box {
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--primary);
  background-color: var(--bg-base);
  border-radius: 0 6px 6px 0;
  padding: 1.25rem 1.5rem;
}

.alert-box-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.6rem;
  word-break: keep-all;
}

.alert-box-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--text-secondary);
  word-break: keep-all;
}

.alert-box-text strong {
  color: var(--text-primary);
  font-weight: 600;
}

.alert-box-text a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.alert-box-text a:hover {
  color: var(--primary-hover);
}

.alert-box--danger {
  border-left-color: var(--danger);
  background-color: hsla(0, 55%, 40%, 0.03);
}

.alert-box--danger .alert-box-title {
  color: var(--danger);
}

.alert-box--tip {
  border-left-color: var(--primary);
  background-color: hsla(38, 48%, 42%, 0.03);
}

.alert-box--tip .alert-box-title {
  color: var(--primary);
}

/* 양식 파일 다운로드 바 */
.form-download {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(184, 134, 11, 0.2);
  border-radius: 6px;
  background-color: hsla(38, 48%, 42%, 0.03);
}

.form-download-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.form-download-label {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
  word-break: keep-all;
}

.form-download-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.form-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
  padding: 0.65rem 1.25rem;
  border-radius: 4px;
  background-color: var(--primary);
  color: var(--bg-surface);
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  transition: var(--transition-smooth);
}

.form-download-btn:hover {
  background-color: var(--primary-hover);
  color: var(--bg-surface);
}

@media (max-width: 560px) {
  .form-download {
    flex-direction: column;
    align-items: stretch;
  }

  .form-download-btn {
    justify-content: center;
  }
}

@media (max-width: 992px) {
  .docs-triple-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* 프리미엄 지그재그 교대 가로/세로 반응형 타임라인 */
.zigzag-timeline {
  position: relative;
  width: 100%;
  margin-top: 4rem;
  margin-bottom: 4rem;
  padding: 2.5rem 0;
  background-color: var(--bg-surface-elevated);
  border: 1px solid rgba(184, 134, 11, 0.15);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}

.zigzag-line {
  position: absolute;
  top: 50%;
  left: 5%;
  right: 5%;
  height: 2px;
  background-color: var(--border-color);
  z-index: 1;
  transform: translateY(-50%);
}

.zigzag-wrapper {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  z-index: 2;
  min-height: 400px; /* 위아래 지그재그 핀의 충분한 정렬 높이 확보 */
}

.zigzag-node {
  position: relative;
  display: flex;
  align-items: center;
  width: 28%;
  z-index: 2;
}

/* 아래로 뻗는 핀 노드 (down) */
.zigzag-node.down {
  flex-direction: column;
  justify-content: flex-start;
  height: 200px;
  align-self: flex-end; /* 수직 중앙선 기준 하반신 정렬 */
}

/* 위로 뻗는 핀 노드 (up) */
.zigzag-node.up {
  flex-direction: column-reverse;
  justify-content: flex-start;
  height: 200px;
  align-self: flex-start; /* 수직 중앙선 기준 상반신 정렬 */
}

.zigzag-date {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary);
  background-color: var(--bg-surface-elevated);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  border: 1px solid rgba(184, 134, 11, 0.2);
  z-index: 3;
  white-space: nowrap;
}

.zigzag-date.completed {
  color: hsl(140, 75%, 32%);
  border-color: rgba(140, 75%, 32%, 0.25);
}

.zigzag-pin {
  width: 2px;
  height: 40px; /* 중앙선과 원형 아이콘을 잇는 세로 기둥 선 */
  background-color: var(--border-color);
  z-index: 1;
}

.zigzag-pin.completed {
  background-color: rgba(140, 75, 32, 0.35);
}

.zigzag-icon-wrap {
  position: relative;
  z-index: 3;
  margin: 0.1rem 0;
}

.zigzag-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: var(--bg-surface-elevated);
  border: 1.5px solid var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  box-shadow: 0 4px 12px rgba(184, 134, 11, 0.08);
  transition: all 0.3s ease;
}

.zigzag-icon.completed {
  border-color: hsl(140, 75%, 40%);
  color: hsl(140, 75%, 40%);
  box-shadow: 0 4px 12px rgba(140, 75, 32, 0.08);
}

.zigzag-content {
  text-align: center;
  max-width: 240px;
}

.zigzag-node.down .zigzag-content {
  margin-top: 0.75rem;
}

.zigzag-node.up .zigzag-content {
  margin-bottom: 0.75rem;
}

.zigzag-content h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.3rem 0;
}

.zigzag-content p {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
  word-break: keep-all;
}

/* 모바일/태블릿용 세로 평탄화 최적화 (Core Web Vitals CLS 및 모바일 리플로우 케어) */
@media (max-width: 768px) {
  .zigzag-timeline {
    padding: 2rem 1.25rem;
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  
  .zigzag-line {
    top: 2rem;
    bottom: 2rem;
    left: 28px; /* 모바일 아이콘 중심축과 정밀 일치 */
    width: 2px;
    height: calc(100% - 4rem);
    right: auto;
    transform: none;
  }
  
  .zigzag-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 2.25rem;
    min-height: auto !important;
    padding-left: 0.25rem;
  }
  
  .zigzag-node.down, .zigzag-node.up {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 0.5rem 1.25rem;
    width: 100%;
    height: auto !important;
    align-self: flex-start;
    text-align: left;
  }
  
  .zigzag-pin {
    display: none; /* 세로 연결 핀은 모바일에서 소멸 */
  }
  
  .zigzag-icon-wrap {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    margin: 0.25rem 0 0 0;
    flex-shrink: 0;
  }
  
  .zigzag-icon {
    width: 34px;
    height: 34px;
    box-shadow: 0 2px 8px rgba(184, 134, 11, 0.05);
  }
  
  .zigzag-date {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    width: fit-content;
    font-size: 0.76rem;
    padding: 0.2rem 0.6rem;
    margin: 0;
  }
  
  .zigzag-content {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
    margin: 0;
    max-width: none;
  }
  
  .zigzag-node.down .zigzag-content, .zigzag-node.up .zigzag-content {
    margin-top: 0;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }
}

/* 480px 이하 초소형 스마트폰 및 아이폰 뷰포트 대응 초밀착 튜닝 */
@media (max-width: 480px) {
  .zigzag-timeline {
    padding: 1.75rem 0.75rem;
  }
  
  .zigzag-line {
    left: 23px; /* 극세사 라인 정렬 */
  }
  
  .zigzag-wrapper {
    gap: 1.75rem;
  }
  
  .zigzag-node.down, .zigzag-node.up {
    gap: 0.85rem;
  }
  
  .zigzag-icon {
    width: 30px;
    height: 30px;
  }
  
  .zigzag-icon svg {
    width: 15px;
    height: 15px;
  }
  
  .zigzag-date {
    font-size: 0.72rem;
    padding: 0.15rem 0.5rem;
  }
  
  .zigzag-content h4 {
    font-size: 0.88rem;
    letter-spacing: -0.01em;
  }
  
  .zigzag-content p {
    font-size: 0.74rem;
    line-height: 1.4;
  }
}

/* 화면 외부 스크롤 아래 콘텐츠 렌더링 최적화 (Core Web Vitals LCP, INP 획기적 개선) */
.faq-accordion-group {
  content-visibility: auto;
  contain-intrinsic-size: 500px;
}

.site-footer {
  content-visibility: auto;
  contain-intrinsic-size: 400px;
}

/* 모바일 전용 반응형 테이블 유틸리티 클래스 */
.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background-color: var(--bg-base);
  margin-bottom: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
  
  /* CSS Scroll Shadow 기법 (가로 스크롤 가능 시 우측 쉐도우 자동 가이드) */
  background: 
    linear-gradient(to right, var(--bg-base) 30%, rgba(248, 249, 250, 0)),
    linear-gradient(to right, rgba(248, 249, 250, 0), var(--bg-base) 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0)) 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

.table-responsive table {
  margin-bottom: 0 !important;
  border: none !important;
}

.table-responsive th, 
.table-responsive td {
  white-space: nowrap; /* 모바일에서 열이 찌그러지지 않고 정상적인 폭을 유지하도록 보장 */
}

/* ==========================================================================
   문의 페이지 선택 정보 서브 카드 (Optional Info Sub-card)
   ========================================================================== */
.optional-info-card {
  background: linear-gradient(135deg, hsla(38, 40%, 99%, 0.85), hsla(38, 30%, 97%, 0.5));
  border: 1px solid rgba(184, 134, 11, 0.12) !important;
  border-radius: 8px !important;
  padding: 1.75rem !important;
  margin: 2rem 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.optional-info-card:hover {
  border-color: rgba(184, 134, 11, 0.25) !important;
  box-shadow: 0 8px 30px rgba(184, 134, 11, 0.04);
}

.optional-card-header {
  margin-bottom: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.optional-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.optional-card-badge {
  background-color: hsla(38, 48%, 42%, 0.08);
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  border: 1px solid rgba(184, 134, 11, 0.15);
  display: inline-block;
  line-height: 1.2;
}

.optional-card-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
  opacity: 0.9;
}

/* 법인명 입력 영역 노출 트랜지션 */
.corp-name-input-wrapper {
  margin-top: 1rem;
  padding-left: 1.75rem;
  border-left: 2px solid var(--border-color);
  animation: slide-down-fade 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slide-down-fade {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 데스크톱 네이티브 캘린더 커스텀 골드 캘린더 아이콘 스타일링 */
input[type="date"]::-webkit-calendar-picker-indicator {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8860b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.2s;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* 모바일 입력 줌 방지 및 터치 최적화 */
@media (max-width: 768px) {
  .form-input, .form-textarea, .form-select {
    font-size: 16px !important; /* iOS Safari 줌 방지 (16px 미만 시 강제 포커스 줌인) */
    padding: 0.9rem !important; /* 터치 크기 확장 */
  }
  
  .checkbox-input {
    width: 20px !important;
    height: 20px !important;
    margin-top: 0.15rem !important;
  }
  
  .checkbox-input:checked::after {
    width: 6px !important;
    height: 10px !important;
    left: 6px !important;
    top: 2px !important;
  }

  .optional-info-card {
    padding: 1.25rem;
    margin: 1.5rem 0;
  }
  
  .corp-name-input-wrapper {
    padding-left: 1.25rem;
  }
}

/* 데스크톱 환경에서 왼쪽 카운셀링 패널 고정 (Floating/Sticky UX) 및 카드 신장 방지 */
@media (min-width: 993px) {
  .contact-info {
    position: -webkit-sticky;
    position: sticky;
    top: 120px;
    align-self: start;
  }
}

/* ==========================================================================
   문의 페이지 좌우 카드 비주얼 밸런스 고도화 (Symmetrical Layout)
   ========================================================================== */
.contact-info, .contact-form {
  background-color: var(--bg-surface) !important;
  background: var(--bg-surface) !important;
  border: 1.5px solid hsl(220, 12%, 84%) !important;
  border-radius: 8px !important;
  box-shadow: 0 20px 40px -15px rgba(38, 48, 42, 0.03) !important;
}


/* ==========================================================================
   공지 팝업 (notice-live.js가 site_config/notice를 읽어 동적으로 생성)
   ========================================================================== */
.notice-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background-color: rgba(20, 26, 40, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.notice-popup-overlay.active {
  opacity: 1;
  visibility: visible;
}

.notice-popup {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
  padding: 2.5rem 2rem 1.75rem;
  background-color: var(--bg-surface);
  border-radius: 16px;
  box-shadow: 0 30px 70px -20px rgba(20, 26, 40, 0.35);
  text-align: center;
  transform: translateY(14px) scale(0.98);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.notice-popup-overlay.active .notice-popup {
  transform: translateY(0) scale(1);
}

.notice-popup-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-muted);
  background-color: var(--bg-surface-elevated);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.notice-popup-close:hover {
  color: var(--text-primary);
  background-color: var(--border-color-hover);
}

.notice-popup-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 1.1rem;
}

.notice-popup-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.35rem;
  word-break: keep-all;
}

.notice-popup-subtitle {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 1.6rem;
}

.notice-popup-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: left;
  margin-bottom: 1.5rem;
}

.notice-popup-item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  background-color: var(--bg-surface-elevated);
  border-radius: 10px;
  transition: var(--transition-smooth);
}

.notice-popup-item:hover {
  background-color: var(--primary-glow);
}

.notice-popup-number {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  background-color: var(--primary);
  border-radius: 50%;
}

.notice-popup-text strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.3rem;
}

.notice-popup-text p {
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
  word-break: keep-all;
}

.notice-popup-text em {
  font-style: normal;
  font-weight: 700;
  color: var(--primary);
}

/* '오늘 하루 보지 않기' 체크박스 */
.notice-popup-dismiss {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.83rem;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}

.notice-popup-dismiss input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}

.notice-popup-dismiss:hover {
  color: var(--text-secondary);
}

.notice-popup-confirm {
  width: 100%;
  padding: 0.95rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  background-color: var(--primary);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.notice-popup-confirm:hover {
  background-color: var(--primary-hover);
  transform: translateY(-1px);
}

.notice-popup-confirm:active {
  transform: translateY(0);
}

/* 모바일 대응 */
@media (max-width: 520px) {
  .notice-popup {
    padding: 2rem 1.25rem 1.5rem;
    border-radius: 14px;
  }

  .notice-popup-title {
    font-size: 1.15rem;
  }

  .notice-popup-item {
    padding: 0.85rem 0.9rem;
    gap: 0.75rem;
  }

  .notice-popup-number {
    width: 26px;
    height: 26px;
    font-size: 0.75rem;
  }
}


/* ══════════════════════════════════════════════════════════════
   포털 공용 컴포넌트 (visa-manage / visa-client / my-visa)
   admin.html 인라인 스타일과 동일한 디자인 언어를 공용화한 것.
   ══════════════════════════════════════════════════════════════ */

.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: var(--bg-surface);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.9rem;
  min-width: 720px;
}

.admin-table th {
  background-color: var(--bg-surface-elevated);
  color: var(--text-secondary);
  font-weight: 700;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.admin-table td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  vertical-align: middle;
}

.admin-table tr:last-child td {
  border-bottom: none;
}

.admin-table tbody tr:hover td {
  background-color: hsla(210, 20%, 94%, 0.25);
}

.empty-state {
  padding: 3.5rem 1.5rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.action-btn {
  padding: 0.45rem 0.8rem;
  border-radius: 5px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border-color);
  background-color: var(--bg-surface);
  color: var(--text-secondary);
  transition: var(--transition-smooth);
  white-space: nowrap;
}

.action-btn:hover {
  border-color: var(--border-color-hover);
  background-color: var(--bg-surface-elevated);
}

.action-btn.edit {
  color: var(--primary);
  border-color: rgba(184, 134, 11, 0.25);
}

.action-btn.edit:hover {
  background-color: var(--primary-glow);
  border-color: var(--primary);
}

.btn-gold {
  background-color: var(--primary);
  color: #fff;
  border: none;
  padding: 0.65rem 1.4rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: var(--transition-smooth);
  white-space: nowrap;
}

.btn-gold:hover {
  background-color: var(--primary-hover);
}

/* 포털 섹션 카드 */
.portal-section-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.75rem;
}

/* ── 어드민 좌측 사이드바 (admin / visa-manage) ── */
.admin-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 220px;
  background-color: var(--bg-surface);
  border-right: 1px solid var(--border-color);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 0;
  overflow-y: auto;
}

.admin-sidebar .sidebar-logo {
  display: block;
  padding: 0.25rem 1.5rem 1.1rem;
  font-family: 'Noto Serif KR', serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 0.75rem;
}

.sidebar-section-label {
  padding: 0 1.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  margin: 0.85rem 0 0.4rem;
}

.sidebar-item {
  display: block;
  padding: 0.65rem 1.5rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: var(--transition-smooth);
}

.sidebar-item:hover {
  background-color: var(--bg-surface-elevated);
  color: var(--text-primary);
}

.sidebar-item.active {
  color: var(--primary);
  border-left-color: var(--primary);
  background-color: var(--primary-glow);
  font-weight: 700;
}

body.has-admin-sidebar .site-header {
  left: 220px;
  width: calc(100% - 220px);
}

body.has-admin-sidebar main {
  margin-left: 220px;
}

@media (max-width: 900px) {
  .admin-sidebar {
    position: static;
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
    overflow-y: visible;
    margin-top: 80px;
    box-sizing: border-box;
  }
  .admin-sidebar .sidebar-logo,
  .admin-sidebar .sidebar-section-label {
    display: none;
  }
  .sidebar-item {
    border-left: none;
    border-radius: 6px;
    padding: 0.5rem 0.85rem;
    white-space: nowrap;
    flex-shrink: 0;
  }
  body.has-admin-sidebar .site-header {
    left: 0;
    width: 100%;
  }
  body.has-admin-sidebar main {
    margin-left: 0;
    padding-top: 2rem;
  }
}

/* ==========================================================================
   상품 페이지 공통 모듈 (구조 일관화)
   - 모든 상품 페이지의 섹션 제목·프로세스 스텝은 아래 클래스를 사용한다.
   - 카드형 강조가 필요한 페이지(license-exchange 등)는 .process-step-card로 감싼다.
   ========================================================================== */

/* 섹션 제목 (h2.visual-title과 함께 사용) */
.sub-section-title {
  font-size: 1.35rem;
  margin-bottom: 1.5rem;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

/* 프로세스 스텝 행 (번호 원형 배지 + 본문) */
.process-step-row {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.step-circle {
  background-color: var(--primary-glow);
  border: 1px solid rgba(184, 134, 11, 0.25);
  color: var(--primary);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(184, 134, 11, 0.05);
}

.process-step-body {
  flex: 1;
}

.process-step-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
  color: var(--text-primary);
}

/* 제목 우측에 소요기간 등 배지를 배치하는 변형 */
.process-step-title-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.process-step-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
  word-break: keep-all;
}

/* ==========================================================================
   차량 슬라이더 (car-rental) — 페이지 인라인 스타일에서 이동
   ========================================================================== */
.car-slider-section {
  margin-top: 3.5rem;
  margin-bottom: 3.5rem;
}
.car-slider-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.car-slider-container {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
.car-slider {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 0.75rem 0.25rem 1.5rem 0.25rem;
  -webkit-overflow-scrolling: touch;
}
.car-slider::-webkit-scrollbar {
  height: 6px;
}
.car-slider::-webkit-scrollbar-track {
  background: var(--bg-base);
  border-radius: 10px;
}
.car-slider::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 10px;
}
.car-slider::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}
.car-card {
  flex: 0 0 280px;
  scroll-snap-align: start;
  background-color: var(--bg-surface-elevated);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  display: flex;
  flex-direction: column;
  position: relative;
}
@media (max-width: 576px) {
  .car-card {
    flex: 0 0 260px;
  }
}
.car-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.04);
}
.car-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background-color: var(--primary);
  color: white;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 20px;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.car-card-badge.similar {
  background-color: var(--bg-base);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}
.car-card-img-box {
  position: relative;
  width: 100%;
  height: 170px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--border-color);
}
.car-card-img {
  max-width: 90%;
  max-height: 85%;
  object-fit: contain;
  transition: transform 0.5s ease;
}
.car-card:hover .car-card-img {
  transform: scale(1.04);
}
.car-card-info {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex-grow: 1;
}
.car-class-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.car-name-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.car-desc-text {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
  word-break: keep-all;
}
.car-spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border-color);
}
.car-spec-item {
  font-size: 0.78rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.car-slider-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
}
.car-slider-dots {
  display: flex;
  gap: 0.4rem;
}
.car-slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--border-color);
  cursor: pointer;
  transition: all 0.3s ease;
}
.car-slider-dot.active {
  background-color: var(--primary);
  width: 20px;
  border-radius: 4px;
}
.car-arrow-btns {
  display: flex;
  gap: 0.5rem;
}
.car-arrow-btn {
  background-color: var(--bg-surface-elevated);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}
.car-arrow-btn:hover {
  background-color: var(--primary);
  color: white;
  border-color: var(--primary);
}
.car-arrow-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background-color: var(--bg-base);
  color: var(--text-muted);
  border-color: var(--border-color);
}

/* ══════════════════════════════════════════════════════════
   신청자 포털 안내 페이지 (portal.html — cleanUrls로 /portal 제공)
   ══════════════════════════════════════════════════════════ */

.pg-hero {
  padding-top: 150px;
  padding-bottom: 5rem;
  background: radial-gradient(circle at 85% 15%, hsla(38, 48%, 42%, 0.07) 0%, transparent 55%),
              radial-gradient(circle at 5% 85%, hsla(210, 20%, 94%, 0.8) 0%, transparent 55%);
}

.pg-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

.pg-hero-title {
  font-size: 2.6rem;
  line-height: 1.35;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin-bottom: 1.25rem;
  word-break: keep-all;
}

.pg-hero-desc {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--text-secondary);
  margin-bottom: 2rem;
  word-break: keep-all;
}

/* 행동 유도 버튼 */
.pg-cta-row {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  align-items: center;
}

.pg-btn-primary,
.pg-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: 1rem;
  transition: var(--transition-smooth);
  white-space: nowrap;
}

.pg-btn-primary {
  background-color: var(--primary);
  color: #fff;
  box-shadow: 0 6px 24px hsla(38, 48%, 42%, 0.22);
}

.pg-btn-primary:hover {
  background-color: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px hsla(38, 48%, 42%, 0.3);
  color: #fff;
}

.pg-btn-ghost {
  background-color: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-color-hover);
}

.pg-btn-ghost:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-2px);
}

.pg-note {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-top: 1.25rem;
  word-break: keep-all;
}

/* ── 브라우저 프레임 목업 (실제 포털 화면 재현) ── */
.pg-mock {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(20, 30, 50, 0.1);
}

.pg-mock-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.85rem;
  background-color: var(--bg-surface-elevated);
  border-bottom: 1px solid var(--border-color);
}

.pg-mock-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--border-color-hover);
  flex-shrink: 0;
}

.pg-mock-url {
  flex: 1;
  margin-left: 0.5rem;
  text-align: center;
  font-size: 0.7rem;
  color: var(--text-muted);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 0.25rem 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pg-mock-body {
  padding: 1.35rem;
}

.pg-mock-h {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.2rem 0;
}

.pg-mock-sub {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin: 0 0 1.1rem 0;
  line-height: 1.6;
}

/* 목업 - 인원 행 */
.pg-mock-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  margin-bottom: 0.55rem;
  background-color: var(--bg-base);
}

.pg-mock-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--primary-glow);
  border: 1px solid hsla(38, 48%, 42%, 0.25);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
}

.pg-mock-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}

.pg-mock-meta {
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.pg-badge {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.28rem 0.6rem;
  border-radius: 20px;
  white-space: nowrap;
  border: 1px solid transparent;
}

.pg-badge.is-done {
  background-color: hsla(145, 45%, 40%, 0.1);
  color: hsl(145, 50%, 28%);
  border-color: hsla(145, 45%, 40%, 0.25);
}

.pg-badge.is-progress {
  background-color: var(--primary-glow);
  color: var(--primary);
  border-color: hsla(38, 48%, 42%, 0.3);
}

.pg-badge.is-wait {
  background-color: hsla(220, 12%, 46%, 0.08);
  color: var(--text-muted);
  border-color: var(--border-color);
}

/* 목업 - 서류 체크리스트 항목 */
.pg-doc-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-primary);
  background-color: var(--bg-surface);
}

.pg-doc-check {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  border: 1px solid var(--border-color-hover);
  color: var(--text-muted);
}

.pg-doc-check.is-done {
  background-color: hsl(145, 45%, 34%);
  border-color: hsl(145, 45%, 34%);
  color: #fff;
}

/* 목업 - 진행 스텝퍼 */
.pg-mock-stepper {
  display: flex;
  align-items: flex-start;
  margin: 0.25rem 0 1.25rem 0;
}

.pg-mock-step {
  flex: 1;
  text-align: center;
  position: relative;
}

.pg-mock-step::after {
  content: '';
  position: absolute;
  top: 11px;
  left: 50%;
  width: 100%;
  height: 2px;
  background-color: var(--border-color);
  z-index: 0;
}

.pg-mock-step:last-child::after { display: none; }
.pg-mock-step.is-done::after { background-color: var(--primary); }

.pg-mock-step-dot {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  margin: 0 auto 0.45rem auto;
  border-radius: 50%;
  background-color: var(--bg-surface);
  border: 2px solid var(--border-color);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
}

.pg-mock-step.is-done .pg-mock-step-dot,
.pg-mock-step.is-current .pg-mock-step-dot {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.pg-mock-step-label {
  font-size: 0.68rem;
  color: var(--text-muted);
  line-height: 1.4;
  word-break: keep-all;
}

.pg-mock-step.is-current .pg-mock-step-label {
  color: var(--primary);
  font-weight: 700;
}

/* 목업 - 코멘트 말풍선 */
.pg-mock-comment {
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--primary);
  border-radius: 0 6px 6px 0;
  background-color: var(--bg-base);
  padding: 0.7rem 0.85rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

.pg-mock-comment strong {
  display: block;
  font-size: 0.72rem;
  color: var(--primary);
  margin-bottom: 0.25rem;
}

/* ── 기능 소개 카드 ── */
.pg-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.pg-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.75rem 1.5rem;
  transition: var(--transition-smooth);
}

.pg-card:hover {
  border-color: var(--border-color-hover);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(20, 30, 50, 0.06);
}

.pg-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background-color: var(--primary-glow);
  border: 1px solid hsla(38, 48%, 42%, 0.2);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
}

.pg-card-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.55rem 0;
  letter-spacing: -0.02em;
}

.pg-card-desc {
  font-size: 0.87rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin: 0;
  word-break: keep-all;
}

/* ── 화면 소개 (목업 + 설명 교차 배치) ── */
.pg-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
  margin-bottom: 4.5rem;
}

.pg-showcase:last-child { margin-bottom: 0; }
.pg-showcase.is-reverse .pg-showcase-visual { order: -1; }

.pg-showcase-title {
  font-size: 1.5rem;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin: 0.75rem 0 1rem 0;
  word-break: keep-all;
}

.pg-showcase-desc {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.85;
  margin: 0 0 1.25rem 0;
  word-break: keep-all;
}

.pg-check-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pg-check-list li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.6rem;
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.7;
  word-break: keep-all;
}

.pg-check-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 0.95em;
  height: 0.95em;
  background-color: var(--primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── 하단 전환 박스 ── */
.pg-cta-box {
  background: linear-gradient(140deg, hsl(220, 45%, 15%) 0%, hsl(220, 40%, 22%) 100%);
  border-radius: 12px;
  padding: 3.5rem 2.5rem;
  text-align: center;
  color: #fff;
}

.pg-cta-box h2 {
  font-size: 1.9rem;
  color: #fff;
  margin: 0 0 1rem 0;
  letter-spacing: -0.02em;
  word-break: keep-all;
}

.pg-cta-box p {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.85;
  margin: 0 auto 2rem auto;
  max-width: 560px;
  word-break: keep-all;
}

.pg-cta-box .pg-cta-row { justify-content: center; }

.pg-cta-box .pg-btn-ghost {
  background-color: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}

.pg-cta-box .pg-btn-ghost:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: #fff;
  color: #fff;
}

.pg-cta-box .pg-note {
  color: rgba(255, 255, 255, 0.55);
  margin-top: 1.5rem;
}

/* ── 반응형 ── */
@media (max-width: 900px) {
  .pg-features { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .pg-hero {
    padding-top: 100px;
    padding-bottom: 3.5rem;
  }

  .pg-hero-grid,
  .pg-showcase {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .pg-showcase.is-reverse .pg-showcase-visual { order: 0; }

  .pg-hero-title { font-size: 1.9rem; }
  .pg-showcase-title { font-size: 1.3rem; }
  .pg-features { grid-template-columns: 1fr; }

  .pg-cta-row { flex-direction: column; align-items: stretch; }
  .pg-btn-primary,
  .pg-btn-ghost { width: 100%; }

  .pg-cta-box { padding: 2.5rem 1.5rem; }
  .pg-cta-box h2 { font-size: 1.5rem; }
  .pg-mock-body { padding: 1rem; }
  .pg-mock-step-label { font-size: 0.62rem; }
}

/* 메인 페이지 신청자 포털 안내 밴드 (index.html #portal-intro) */
.pg-home-band {
  background-color: var(--bg-surface);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

/* ==========================================================================
   아티클(Article) 자료실: /articles 허브 + 개별 아티클
   - 허브: 실시간 검색 / 정렬(최신·인기) / 카테고리 필터
   - 본문: .art-body 하위 요소 일괄 타이포그래피 (인라인 스타일 지양)
   ========================================================================== */

/* --- 허브 컨트롤 바 --- */
.art-controls {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.25rem 1.35rem;
  margin-bottom: 1.75rem;
}

.art-search-row { position: relative; margin-bottom: 1rem; }

.art-search-row .icon {
  position: absolute;
  left: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.art-search {
  width: 100%;
  padding: 0.85rem 1rem 0.85rem 2.65rem;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text-primary);
  background-color: var(--bg-base);
  border: 1px solid var(--input-border-color);
  border-radius: 6px;
  transition: var(--transition-smooth);
}

.art-search::placeholder { color: var(--text-muted); }
.art-search:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.art-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
  justify-content: space-between;
}

.art-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.art-chip {
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  background-color: var(--bg-base);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.art-chip:hover { border-color: var(--border-color-hover); color: var(--text-primary); }

.art-chip[aria-pressed="true"] {
  color: var(--primary);
  background-color: var(--primary-glow);
  border-color: rgba(184, 134, 11, 0.35);
}

.art-sort {
  display: flex;
  gap: 0.35rem;
  background-color: var(--bg-base);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 0.25rem;
}

.art-sort button {
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.art-sort button[aria-pressed="true"] {
  color: var(--bg-surface);
  background-color: var(--primary);
}

.art-count {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 1.25rem 0.15rem;
}

.art-count strong { color: var(--primary); font-weight: 700; }

.art-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.8;
  word-break: keep-all;
}

/* --- 목록 카드 --- */
.art-list-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.art-card {
  display: flex;
  flex-direction: column;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.75rem 1.5rem;
  text-decoration: none;
  transition: var(--transition-smooth);
}

.art-card:hover {
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(38, 48, 42, 0.06);
}

.art-card[hidden] { display: none; }

.art-card-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--primary);
  background-color: var(--primary-glow);
  border: 1px solid rgba(184, 134, 11, 0.2);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  margin-bottom: 0.9rem;
}

.art-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-primary);
  margin: 0 0 0.6rem 0;
  word-break: keep-all;
  letter-spacing: -0.02em;
}

.art-card-desc {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 1.1rem 0;
  word-break: keep-all;
  flex: 1;
}

.art-card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border-color);
  padding-top: 0.85rem;
}

.art-card-meta .sep { opacity: 0.4; }

/* --- 개별 아티클 --- */
.art-breadcrumb {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  word-break: keep-all;
}

.art-breadcrumb a { color: var(--text-muted); text-decoration: none; transition: var(--transition-smooth); }
.art-breadcrumb a:hover { color: var(--primary); }
.art-breadcrumb span { margin: 0 0.4rem; opacity: 0.5; }

.art-title-head { margin-bottom: 2.25rem; }

.art-title-head h1 {
  font-size: 2rem;
  line-height: 1.42;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin: 0.9rem 0 1rem 0;
  word-break: keep-all;
}

.art-meta { font-size: 0.82rem; color: var(--text-muted); margin: 0; line-height: 1.7; word-break: keep-all; }
.art-meta span { margin: 0 0.45rem; opacity: 0.4; }

.art-summary {
  background-color: var(--primary-glow);
  border: 1px solid rgba(184, 134, 11, 0.22);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.art-summary-title { font-size: 0.8rem; font-weight: 700; color: var(--primary); letter-spacing: 0.04em; margin: 0 0 0.7rem 0; }
.art-summary p { font-size: 0.95rem; line-height: 1.85; color: var(--text-primary); margin: 0; word-break: keep-all; }

.art-toc {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.4rem 1.6rem;
  margin-bottom: 2.5rem;
}

.art-toc-title { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); letter-spacing: 0.04em; margin: 0 0 0.8rem 0; }
.art-toc ol { margin: 0; padding-left: 1.15rem; }
.art-toc li { font-size: 0.9rem; line-height: 1.9; color: var(--text-secondary); word-break: keep-all; }
.art-toc a { color: var(--text-secondary); text-decoration: none; transition: var(--transition-smooth); }
.art-toc a:hover { color: var(--primary); text-decoration: underline; }

.art-body p { font-size: 0.96rem; line-height: 1.95; color: var(--text-secondary); margin: 0 0 1.35rem 0; word-break: keep-all; }
.art-body h2 { scroll-margin-top: 150px; margin-top: 3rem; }
.art-body h2:first-of-type { margin-top: 0; }

.art-body h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 2.2rem 0 0.9rem 0;
  letter-spacing: -0.02em;
  word-break: keep-all;
}

.art-body ul, .art-body ol { margin: 0 0 1.6rem 0; padding-left: 1.3rem; }
.art-body li { font-size: 0.94rem; line-height: 1.9; color: var(--text-secondary); margin-bottom: 0.45rem; word-break: keep-all; }
.art-body strong { color: var(--text-primary); font-weight: 700; }
.art-body a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; transition: var(--transition-smooth); }
.art-body a:hover { color: var(--primary-hover); }

.art-table-wrap { overflow-x: auto; margin: 0 0 1.8rem 0; -webkit-overflow-scrolling: touch; }
.art-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 480px; }

.art-table th, .art-table td {
  border: 1px solid var(--border-color);
  padding: 0.8rem 0.9rem;
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
  color: var(--text-secondary);
  word-break: keep-all;
}

.art-table th { background-color: var(--bg-base); color: var(--text-primary); font-weight: 700; white-space: nowrap; }
.art-table caption { caption-side: bottom; font-size: 0.78rem; color: var(--text-muted); text-align: left; padding-top: 0.6rem; word-break: keep-all; }

.art-note {
  background-color: var(--bg-base);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--primary);
  border-radius: 6px;
  padding: 1.15rem 1.3rem;
  margin: 0 0 1.8rem 0;
}

.art-note p { margin: 0; font-size: 0.9rem; line-height: 1.85; }
.art-note p + p { margin-top: 0.7rem; }
.art-note ul { margin: 0.6rem 0 0 0; }
.art-note li { font-size: 0.89rem; }

.art-note-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.55rem;
}

/* --- 출처 표기 --- */
.art-sources {
  background-color: var(--bg-base);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.4rem 1.5rem;
  margin-top: 3rem;
}

.art-sources-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.5rem 0;
}

.art-sources-lead { font-size: 0.83rem; line-height: 1.8; color: var(--text-muted); margin: 0 0 1rem 0; word-break: keep-all; }
.art-sources ol { margin: 0; padding-left: 1.2rem; }

.art-sources li {
  font-size: 0.85rem;
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: 0.55rem;
  word-break: keep-all;
}

.art-sources a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; transition: var(--transition-smooth); }
.art-sources a:hover { color: var(--primary); }
.art-sources .src-date { color: var(--text-muted); font-size: 0.8rem; white-space: nowrap; }

/* --- 관련 글 --- */
.art-related { border-top: 1px solid var(--border-color); margin-top: 3rem; padding-top: 2rem; }
.art-related-title { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); margin: 0 0 1rem 0; }
.art-related ul { list-style: none; margin: 0; padding: 0; }
.art-related li { font-size: 0.9rem; line-height: 1.8; margin-bottom: 0.55rem; word-break: keep-all; }
.art-related a { color: var(--text-secondary); text-decoration: none; transition: var(--transition-smooth); }
.art-related a:hover { color: var(--primary); text-decoration: underline; }

.art-disclaimer {
  font-size: 0.8rem;
  line-height: 1.8;
  color: var(--text-muted);
  text-align: center;
  word-break: keep-all;
  margin: 0 auto 1rem auto;
  max-width: 640px;
}

/* --- 안전공지 아카이브 (시의성 공지 목록) --- */
.art-archive { margin-top: 3.5rem; }

.art-archive-list {
  list-style: none;
  margin: 1rem 0 0 0;
  padding: 0;
  border-top: 1px solid var(--border-color);
}

.art-archive-list li {
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color);
  padding: 0.75rem 0.2rem;
  font-size: 0.88rem;
  word-break: keep-all;
}

.art-archive-list li[hidden] { display: none; }
.art-archive-list a { color: var(--text-secondary); text-decoration: none; transition: var(--transition-smooth); }
.art-archive-list a:hover { color: var(--primary); text-decoration: underline; }
.art-archive-list .src-date { color: var(--text-muted); font-size: 0.8rem; white-space: nowrap; }

@media (max-width: 768px) {
  .art-list-grid { grid-template-columns: 1fr; gap: 1.1rem; }
  .art-title-head h1 { font-size: 1.55rem; }
  .art-summary { padding: 1.25rem 1.15rem; }
  .art-toc { padding: 1.15rem 1.25rem; }
  .art-body p { font-size: 0.93rem; }
  .art-filter-row { flex-direction: column; align-items: stretch; }
  .art-sort { justify-content: center; }
  .art-sources { padding: 1.2rem 1.15rem; }
  .art-archive-list li { flex-direction: column; gap: 0.2rem; }
}