/* CATCH HAJA 2.0 — PREMIUM UI/UX & MOTION DESIGN SYSTEM V4
   Brand Concept: Precision, Material, Evidence, Clarity, Confidence
   No-Arrows Rule: Absolute prohibition of arrow symbols and chevron icons */

:root {
  /* 3.1 Color Tokens */
  --ch-ink: #14232b;          /* Primary text, Dark editorial section */
  --ch-midnight: #122d36;     /* Hero dark overlay */
  --ch-mineral: #177d83;      /* Refined accent, selected state */
  --ch-sand: #3057b0;         /* Primary blue accent */
  --ch-blue-on-dark: #b9cdfa; /* Blue text on dark surfaces */
  --ch-warm-white: #faf9f6;   /* Main background */
  --ch-mist: #eef2f1;         /* Secondary surface / Card background */
  --ch-slate: #66757b;        /* Secondary supporting text */
  --ch-border: #dfe5e3;       /* Structural border line */
  --ch-white: #ffffff;        /* Pure white card surface */
  --ch-red: #b64e45;          /* Validation error only */

  /* Semantic Aliases */
  --ch-surface: var(--ch-white);
  --ch-bg: var(--ch-warm-white);
  --ch-text: var(--ch-ink);
  --ch-text-muted: var(--ch-slate);
  --ch-accent: var(--ch-mineral);
  --ch-line: var(--ch-border);

  /* Typography Scales */
  --ch-font-display: clamp(36px, 5.5vw, 76px);
  --ch-font-h2: clamp(28px, 3.8vw, 48px);
  --ch-font-h3: clamp(22px, 2.4vw, 28px);
  --ch-font-h4: clamp(18px, 1.8vw, 22px);
  --ch-font-body: clamp(15px, 1.1vw, 17px);
  --ch-font-small: 13px;
  --ch-font-label: 11px;

  /* Layout & Spacing */
  --ch-max-width: 1320px;
  --ch-section-gap: clamp(96px, 12vw, 160px);
  --ch-radius-lg: 16px;
  --ch-radius-md: 12px;
  --ch-radius-sm: 8px;

  /* Motion Tokens */
  --ch-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ch-duration-fast: 180ms;
  --ch-duration-normal: 280ms;
  --ch-duration-reveal: 600ms;
}

/* Base resets & typography */
body {
  background-color: var(--ch-bg);
  color: var(--ch-text);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 12-Column Grid Container */
.v4-container {
  max-width: var(--ch-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(20px, 4vw, 56px);
  padding-right: clamp(20px, 4vw, 56px);
  width: 100%;
  box-sizing: border-box;
}

/* Section Header Common */
.v4-section-header {
  margin-bottom: clamp(36px, 5vw, 64px);
  max-width: 780px;
}
.v4-eyebrow {
  display: inline-block;
  font-size: var(--ch-font-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ch-accent);
  margin-bottom: 12px;
}
.v4-section-title {
  font-size: var(--ch-font-h2);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.03em;
  color: var(--ch-ink);
  margin: 0 0 16px 0;
}
.v4-section-desc {
  font-size: var(--ch-font-body);
  line-height: 1.7;
  color: var(--ch-slate);
  margin: 0;
}

/* Buttons (No-Arrows Rule: Area, Contrast, Typography) */
.v4-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ch-ink);
  color: var(--ch-warm-white);
  padding: 16px 28px;
  border-radius: var(--ch-radius-md);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  min-height: 48px;
  transition: transform var(--ch-duration-fast) var(--ch-ease-out),
              background-color var(--ch-duration-fast) ease,
              box-shadow var(--ch-duration-fast) ease;
}
.v4-btn-primary:hover {
  background-color: var(--ch-mineral);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(23, 125, 131, 0.2);
}
.v4-btn-primary:active {
  transform: scale(0.985);
}

.v4-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ch-white);
  color: var(--ch-ink);
  padding: 16px 28px;
  border-radius: var(--ch-radius-md);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 1px solid var(--ch-border);
  cursor: pointer;
  min-height: 48px;
  transition: transform var(--ch-duration-fast) var(--ch-ease-out),
              border-color var(--ch-duration-fast) ease,
              background-color var(--ch-duration-fast) ease;
}
.v4-btn-secondary:hover {
  border-color: var(--ch-ink);
  background-color: var(--ch-mist);
  transform: translateY(-2px);
}
.v4-btn-secondary:active {
  transform: scale(0.985);
}

/* ==========================================================================
   01. HERO SECTION (80-90svh, Minimum 620px)
   ========================================================================== */
.v4-hero {
  position: relative;
  min-height: clamp(680px, 88svh, 920px);
  display: flex;
  align-items: center;
  padding: clamp(96px, 12vh, 150px) 0;
  background: linear-gradient(105deg, rgba(18, 45, 54, 0.95) 0%, rgba(18, 45, 54, 0.88) 55%, rgba(18, 45, 54, 0.72) 100%), url('/assets/editorial-1.jpg') center/cover no-repeat;
  color: #ffffff;
  overflow: hidden;
  border-bottom: 1px solid rgba(223, 229, 227, 0.15);
}
.v4-hero-bg-overlay {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.v4-hero-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(64px, 9vw, 130px);
  align-items: center;
  width: 100%;
}
.v4-hero-copy {
  z-index: 2;
  max-width: 640px;
}
.v4-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ch-blue-on-dark);
  background-color: rgba(255, 255, 255, 0.08);
  padding: 8px 16px;
  border-radius: var(--ch-radius-sm);
  margin-bottom: 28px;
  border: 1px solid rgba(48, 87, 176, 0.3);
  backdrop-filter: blur(8px);
}
.v4-hero-title {
  font-size: var(--ch-font-display);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin: 0 0 28px 0;
}
.v4-hero-title span {
  display: block;
  color: var(--ch-blue-on-dark);
  margin-top: 6px;
}
/* 요청한 핵심 문구만 어두운 배경에서도 읽히는 빨강으로 강조한다. */
.v4-hero-title.v4-hero-hook {
  font-size: clamp(36px, 3.5vw, 56px);
  line-height: 1.3;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.v4-hero-hook strong {
  display: block;
  color: #ff9c98;
  font-weight: 900;
}
.v4-hero-hook strong + strong {
  margin-top: 8px;
}
@media (max-width: 640px) {
  .v4-hero-title.v4-hero-hook {
    font-size: clamp(32px, 8.8vw, 42px);
    letter-spacing: -0.04em;
  }
}
.v4-hero-lead {
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.88;
  color: rgba(250, 249, 246, 0.92);
  margin: 0 0 44px 0;
  max-width: 460px;
}
.v4-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}
.v4-hero-feature-box {
  z-index: 2;
}
.v4-hero-spec-card {
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--ch-radius-lg);
  padding: clamp(28px, 4vw, 36px);
  box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.4);
}
.v4-spec-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--ch-blue-on-dark);
  display: block;
  margin-bottom: 12px;
}
.v4-hero-spec-card h3 {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 18px 0;
  line-height: 1.3;
}
.v4-spec-list {
  margin: 0 0 24px 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.v4-spec-list li {
  font-size: 13.5px;
  color: rgba(250, 249, 246, 0.88);
  line-height: 1.6;
  position: relative;
  padding-left: 18px;
}
.v4-spec-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--ch-blue-on-dark);
  font-size: 16px;
  line-height: 1.4;
}
.v4-spec-footer {
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ch-blue-on-dark);
}

/* ==========================================================================
   02. TRUST BAR (검증된 프로세스 핵심 가치 3대 기둥)
   ========================================================================== */
.v4-trust-bar {
  background-color: var(--ch-white);
  border-bottom: 1px solid var(--ch-border);
  padding: 32px 0;
}
.v4-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
}
.v4-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.v4-trust-num {
  font-size: 13px;
  font-weight: 800;
  color: var(--ch-mineral);
  padding: 4px 8px;
  background-color: var(--ch-mist);
  border-radius: 4px;
  line-height: 1;
  flex: none;
}
.v4-trust-copy h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--ch-ink);
  margin: 0 0 6px 0;
}
.v4-trust-copy p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ch-slate);
  margin: 0;
}

/* ==========================================================================
   03. PROBLEM EMPATHY (고객의 실제 문제 아코디언)
   ========================================================================== */
.v4-section-problems {
  padding: var(--ch-section-gap) 0;
  background-color: var(--ch-warm-white);
}
.v4-problem-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}
.v4-problem-card {
  min-width: 0;
  background-color: var(--ch-white);
  border: 1px solid var(--ch-border);
  border-radius: var(--ch-radius-md);
  padding: clamp(24px, 3vw, 32px);
  cursor: pointer;
  align-self: stretch;
  box-sizing: border-box;
  transition: border-color var(--ch-duration-fast) ease, box-shadow var(--ch-duration-fast) ease, background-color var(--ch-duration-fast) ease;
}
.v4-problem-card:hover {
  border-color: var(--ch-mineral);
  box-shadow: 0 8px 24px rgba(20, 35, 43, 0.05);
}
.v4-problem-card[open] {
  border-color: var(--ch-mineral);
  box-shadow: 0 8px 24px rgba(23, 125, 131, 0.08);
}
.v4-problem-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--ch-ink);
  line-height: 1.48;
  cursor: pointer;
  list-style: none;
  user-select: none;
  word-break: keep-all;
  overflow-wrap: break-word;
  letter-spacing: -0.025em;
}
.v4-problem-summary::-webkit-details-marker {
  display: none;
}
.v4-problem-summary::after {
  content: "";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--ch-mist, #eef2f1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23177d83' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  flex: none;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
}
.v4-problem-card:hover .v4-problem-summary::after {
  background-color: rgba(23, 125, 131, 0.12);
}
.v4-problem-card[open] .v4-problem-summary::after {
  transform: rotate(180deg);
}
.v4-problem-body {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--ch-border);
  color: var(--ch-slate);
  font-size: 14.5px;
  line-height: 1.8;
}
.v4-problem-meta {
  display: inline-flex;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ch-mineral);
  background-color: var(--ch-mist);
  padding: 6px 12px;
  border-radius: 4px;
}

/* ==========================================================================
   04. SITUATION MATRIX (고객 상황 선택 3종 에디토리얼 카드)
   ========================================================================== */
.v4-section-situation {
  padding: var(--ch-section-gap) 0;
  background-color: var(--ch-mist);
  border-top: 1px solid var(--ch-border);
  border-bottom: 1px solid var(--ch-border);
}
.v4-situation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 32px);
  align-items: stretch;
}
.v4-situation-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background-color: var(--ch-white);
  border: 1px solid var(--ch-border);
  border-radius: var(--ch-radius-lg);
  padding: clamp(24px, 2.5vw, 36px);
  cursor: pointer;
  text-align: left;
  word-break: keep-all;
  overflow-wrap: anywhere;
  transition: transform var(--ch-duration-normal) var(--ch-ease-out),
              border-color var(--ch-duration-normal) ease,
              box-shadow var(--ch-duration-normal) ease;
}
.v4-situation-card:hover {
  transform: translateY(-4px);
  border-color: var(--ch-mineral);
  box-shadow: 0 16px 40px -8px rgba(20, 35, 43, 0.1);
}
.v4-situation-card.is-active {
  border-color: var(--ch-mineral);
  background-color: #ffffff;
  outline: 2px solid var(--ch-mineral);
  outline-offset: -1px;
}
.v4-situation-icon-tag {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ch-mineral);
  margin-bottom: 16px;
  display: block;
}
.v4-situation-title {
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ch-ink);
  margin: 0 0 14px 0;
}
.v4-situation-desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ch-slate);
  margin: 0 0 24px 0;
}
.v4-situation-badge {
  display: inline-block;
  align-self: flex-start;
  margin-top: auto;
  max-width: 100%;
  font-size: 13px;
  font-weight: 600;
  color: var(--ch-ink);
  background-color: var(--ch-mist);
  padding: 6px 14px;
  border-radius: var(--ch-radius-sm);
  border: 1px solid var(--ch-border);
}

/* ==========================================================================
   05. SERVICE MATCHING SHOWCASE (독립 서비스 5종 안내)
   ========================================================================== */
.v4-section-services {
  padding: var(--ch-section-gap) 0;
  background-color: var(--ch-warm-white);
}
.v4-services-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 100%;
  margin-bottom: 32px;
}
.v4-services-header-copy {
  max-width: 720px;
}
.v4-service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.v4-service-card {
  background-color: var(--ch-white);
  border: 1px solid var(--ch-border);
  border-radius: var(--ch-radius-md);
  padding: 22px 24px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform var(--ch-duration-fast) var(--ch-ease-out),
              border-color var(--ch-duration-fast) ease,
              box-shadow var(--ch-duration-fast) ease;
}
.v4-service-card:hover {
  transform: translateY(-2px);
  border-color: var(--ch-mineral);
  box-shadow: 0 8px 24px rgba(20, 35, 43, 0.06);
}
.v4-service-card.v4-service-featured {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #ffffff 0%, #f4f8f8 100%);
  border-color: #c4d7d8;
  padding: 26px 30px;
}
.v4-service-badge-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  color: #ffffff;
  background-color: var(--ch-mineral);
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}
.v4-service-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.v4-service-head h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--ch-ink);
  margin: 0;
}
.v4-service-featured .v4-service-head h3 {
  font-size: 21px;
}
.v4-service-tag {
  font-size: 12px;
  font-weight: 700;
  color: var(--ch-mineral);
  flex: none;
}
.v4-service-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ch-slate);
  margin: 0 0 16px 0;
  flex: 1;
}
.v4-service-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--ch-border);
  font-size: 13px;
  font-weight: 600;
  color: var(--ch-ink);
}
.v4-service-cta-text {
  color: var(--ch-mineral);
}

/* ==========================================================================
   06. PROCESS (화살표 없는 수평/단계별 타임라인)
   ========================================================================== */
.v4-section-process {
  padding: var(--ch-section-gap) 0;
  background-color: var(--ch-white);
  border-top: 1px solid var(--ch-border);
  border-bottom: 1px solid var(--ch-border);
}
.v4-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}
.v4-process-step {
  position: relative;
  padding-top: 24px;
  border-top: 2px solid var(--ch-border);
  transition: border-color var(--ch-duration-normal) ease;
}
.v4-process-step:hover {
  border-top-color: var(--ch-mineral);
}
.v4-step-num {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--ch-mineral);
  margin-bottom: 8px;
  display: block;
}
.v4-process-step h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--ch-ink);
  margin: 0 0 8px 0;
}
.v4-process-step p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ch-slate);
  margin: 0;
}

/* ==========================================================================
   07. CASE STUDIES (비대칭 그리드 리듬)
   ========================================================================== */
.v4-section-cases {
  padding: var(--ch-section-gap) 0;
  background-color: var(--ch-warm-white);
}
.v4-case-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 28px;
  margin-bottom: 28px;
}
.v4-case-card {
  background-color: var(--ch-white);
  border: 1px solid var(--ch-border);
  border-radius: var(--ch-radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform var(--ch-duration-normal) var(--ch-ease-out),
              box-shadow var(--ch-duration-normal) ease;
}
.v4-case-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px -8px rgba(20, 35, 43, 0.08);
}
.v4-case-thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  background-color: var(--ch-mist);
  overflow: hidden;
}
.v4-case-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ch-ease-out);
}
.v4-case-card:hover .v4-case-thumb img {
  transform: scale(1.04);
}
.v4-case-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.v4-case-tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ch-mineral);
  margin-bottom: 8px;
}
.v4-case-body h3 {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--ch-ink);
  margin: 0 0 8px 0;
}
.v4-case-body p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ch-slate);
  margin: 0 0 16px 0;
  flex: 1;
}
.v4-case-full {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.v4-case-full .v4-case-thumb {
  height: 100%;
  aspect-ratio: auto;
}

/* ==========================================================================
   08. REPORT EXPERIENCE (보고서 경험 & 샘플 프리뷰)
   ========================================================================== */
.v4-section-reports {
  padding: var(--ch-section-gap) 0;
  background-color: var(--ch-mist);
  border-top: 1px solid var(--ch-border);
  border-bottom: 1px solid var(--ch-border);
}
.v4-report-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 3vw, 40px);
}
.v4-report-card {
  background-color: var(--ch-white);
  border: 1px solid var(--ch-border);
  border-radius: var(--ch-radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
}
.v4-report-card h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--ch-ink);
  margin: 0 0 12px 0;
}
.v4-report-card p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ch-slate);
  margin: 0 0 20px 0;
  flex: 1;
}
.v4-report-preview-box {
  background-color: var(--ch-warm-white);
  border: 1px dashed var(--ch-border);
  border-radius: var(--ch-radius-md);
  padding: 20px;
  margin-bottom: 24px;
}
.v4-report-preview-box ul {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  color: var(--ch-slate);
  line-height: 1.8;
}

/* ==========================================================================
   09. TECHNICAL JOURNAL (기술 아카이브 - 블로그)
   ========================================================================== */
.v4-section-journal {
  padding: var(--ch-section-gap) 0;
  background-color: var(--ch-warm-white);
}
.v4-journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.v4-journal-card {
  background-color: var(--ch-white);
  border: 1px solid var(--ch-border);
  border-radius: var(--ch-radius-md);
  padding: 24px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform var(--ch-duration-fast) var(--ch-ease-out),
              border-color var(--ch-duration-fast) ease;
}
.v4-journal-card:hover {
  transform: translateY(-2px);
  border-color: var(--ch-mineral);
}
.v4-journal-card time {
  font-size: 12px;
  color: var(--ch-slate);
  margin-bottom: 8px;
}
.v4-journal-card h3 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ch-ink);
  margin: 0 0 8px 0;
  flex: 1;
}
.v4-journal-card p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ch-slate);
  margin: 0;
}

/* ==========================================================================
   10. FAQ SECTION (2열 아코디언)
   ========================================================================== */
.v4-section-faq {
  padding: var(--ch-section-gap) 0;
  background-color: var(--ch-white);
  border-top: 1px solid var(--ch-border);
}
.v4-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.v4-faq-item {
  background-color: var(--ch-warm-white);
  border: 1px solid var(--ch-border);
  border-radius: var(--ch-radius-md);
  padding: 20px 24px;
  align-self: start;
  transition: border-color var(--ch-duration-fast) ease, box-shadow var(--ch-duration-fast) ease, background-color var(--ch-duration-fast) ease;
}
.v4-faq-item:hover {
  border-color: var(--ch-mineral);
}
.v4-faq-item[open] {
  background-color: var(--ch-white);
  border-color: var(--ch-mineral);
  box-shadow: 0 6px 20px rgba(23, 125, 131, 0.08);
}
.v4-faq-summary {
  font-size: 16px;
  font-weight: 700;
  color: var(--ch-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  user-select: none;
  gap: 16px;
}
.v4-faq-summary::-webkit-details-marker {
  display: none;
}
.v4-faq-summary::after {
  content: "";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--ch-mist, #eef2f1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23177d83' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  flex: none;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
}
.v4-faq-item:hover .v4-faq-summary::after {
  background-color: rgba(23, 125, 131, 0.12);
}
.v4-faq-item[open] .v4-faq-summary::after {
  transform: rotate(180deg);
}
.v4-faq-answer {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ch-border);
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ch-slate);
}

/* ==========================================================================
   11. CTA SECTIONS (Editorial Dark Card & Final CTA)
   ========================================================================== */
.v4-section-cta {
  padding: clamp(64px, 8vw, 112px) 0;
  background-color: var(--ch-warm-white);
}
.v4-cta-card {
  background: linear-gradient(135deg, var(--ch-midnight) 0%, var(--ch-ink) 100%);
  color: var(--ch-warm-white);
  border-radius: var(--ch-radius-lg);
  padding: clamp(64px, 8vw, 96px) clamp(24px, 6vw, 72px);
  text-align: center;
  box-shadow: 0 24px 64px -16px rgba(18, 45, 54, 0.35);
  margin: 0 0 40px 0;
}
.v4-cta-tag {
  display: inline-block;
  color: var(--ch-blue-on-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.v4-cta-title {
  font-size: clamp(28px, 3.8vw, 44px);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin: 0 0 24px 0;
}
.v4-cta-desc {
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.85;
  color: rgba(250, 249, 246, 0.9);
  max-width: 680px;
  margin: 0 auto 44px auto;
}
.v4-cta-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.v4-section-final-cta {
  background-color: var(--ch-ink);
  color: var(--ch-warm-white);
  padding: clamp(96px, 11vw, 150px) 0;
  position: relative;
  overflow: hidden;
}
.v4-final-cta-inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.v4-final-cta-eyebrow {
  color: var(--ch-blue-on-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 20px;
  display: block;
}
.v4-final-cta-title {
  font-size: clamp(32px, 4.2vw, 56px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -0.03em;
  margin: 0 0 28px 0;
}
.v4-final-cta-lead {
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.85;
  color: var(--ch-border);
  margin: 0 0 44px 0;
}
.v4-final-cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}
.v4-btn-sand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ch-sand);
  color: var(--ch-white);
  padding: 16px 32px;
  border-radius: var(--ch-radius-md);
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  min-height: 52px;
  transition: transform var(--ch-duration-fast) var(--ch-ease-out),
              background-color var(--ch-duration-fast) ease;
}
.v4-btn-sand:hover {
  background-color: #24458f;
  transform: translateY(-2px);
}
.v4-btn-dark-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: var(--ch-warm-white);
  padding: 16px 32px;
  border-radius: var(--ch-radius-md);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  min-height: 52px;
  transition: border-color var(--ch-duration-fast) ease,
              background-color var(--ch-duration-fast) ease;
}
.v4-btn-dark-outline:hover {
  border-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   Motion System (IntersectionObserver Reveal)
   ========================================================================== */
.v4-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--ch-duration-reveal) var(--ch-ease-out),
              transform var(--ch-duration-reveal) var(--ch-ease-out);
}
.v4-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Prefers-Reduced-Motion Full Fallback */
@media (prefers-reduced-motion: reduce) {
  .v4-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .v4-btn-primary, .v4-btn-secondary, .v4-situation-card, .v4-case-card {
    transition: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Responsive Adaptations
   ========================================================================== */
@media (max-width: 1024px) {
  .v4-hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .v4-hero-visual {
    height: 380px;
  }
  .v4-service-layout {
    grid-template-columns: 1fr;
  }
  .v4-service-sticky {
    position: static;
  }
  .v4-process-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .v4-case-grid {
    grid-template-columns: 1fr;
  }
  .v4-case-full {
    grid-template-columns: 1fr;
  }
  .v4-journal-grid {
    grid-template-columns: 1fr;
  }
  .v4-faq-grid {
    grid-template-columns: 1fr;
  }
}

/* Tablet & Mobile 1-Column Precision Optimization (No Crushed Cards) */
@media (max-width: 900px) {
  .v4-problem-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .v4-trust-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .v4-situation-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .v4-service-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .v4-service-card.v4-service-featured {
    grid-column: auto !important;
  }
  .v4-process-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .v4-journal-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .v4-faq-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .inquiry-section-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .inquiry-direct-card {
    position: static !important;
  }
  .direct-phone-box {
    padding: 16px 8px !important;
  }
  .direct-phone-number {
    font-size: 20px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 640px) {
  .v4-trust-grid {
    grid-template-columns: 1fr;
  }
  .v4-service-grid {
    grid-template-columns: 1fr;
  }
  .v4-service-card.v4-service-featured {
    grid-column: auto;
  }
  .v4-process-grid {
    grid-template-columns: 1fr;
  }
  .v4-report-grid {
    grid-template-columns: 1fr;
  }
  .v4-hero-actions {
    flex-direction: column;
    width: 100%;
  }
  .v4-btn-primary, .v4-btn-secondary, .v4-btn-sand, .v4-btn-dark-outline {
    width: 100%;
  }
}

/* ==========================================================================
   INLINE CONSULTATION & DIRECT ACTION SECTION
   ========================================================================== */
.v4-section-inquiry {
  padding: var(--ch-section-gap) 0;
  background-color: var(--ch-warm-white);
  border-top: 1px solid var(--ch-border);
}
.inquiry-section-grid {
  display: grid;
  grid-template-columns: 1.22fr 0.78fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.inquiry-form-card {
  background-color: var(--ch-white);
  border: 1px solid var(--ch-border);
  border-radius: var(--ch-radius-lg);
  padding: clamp(28px, 4vw, 44px);
  box-shadow: 0 16px 44px -12px rgba(20, 35, 43, 0.08);
}
.inquiry-card-title {
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 800;
  color: var(--ch-ink);
  letter-spacing: -0.02em;
  margin: 0 0 8px 0;
}
.inquiry-card-desc {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ch-slate);
  margin: 0 0 28px 0;
}

.inquiry-direct-card {
  background: linear-gradient(150deg, #122d36 0%, #173641 45%, #14232b 100%);
  color: #ffffff;
  border-radius: var(--ch-radius-lg);
  padding: clamp(32px, 4.5vw, 48px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 64px -16px rgba(18, 45, 54, 0.45);
  position: sticky;
  top: 96px;
}
.direct-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--ch-blue-on-dark);
  background-color: rgba(48, 87, 176, 0.15);
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 16px;
  border: 1px solid rgba(48, 87, 176, 0.3);
}
.direct-title {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 900;
  line-height: 1.35;
  color: #ffffff;
  margin: 0 0 16px 0;
  letter-spacing: -0.02em;
}
.direct-desc {
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(250, 249, 246, 0.88);
  margin: 0 0 28px 0;
}
.direct-phone-box {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(48, 87, 176, 0.35);
  border-radius: var(--ch-radius-md);
  padding: 18px 12px;
  text-align: center;
  margin-bottom: 20px;
  backdrop-filter: blur(8px);
  overflow: hidden;
}
.direct-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: rgba(250, 249, 246, 0.75);
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.direct-phone-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: clamp(17px, 2.1vw, 22px);
  font-weight: 900;
  color: var(--ch-blue-on-dark);
  text-decoration: none;
  letter-spacing: -0.01em;
  white-space: nowrap !important;
  max-width: 100%;
  transition: transform 0.2s ease, color 0.2s ease;
}
.direct-phone-number strong {
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.direct-phone-icon {
  font-size: 16px;
  flex: none;
  line-height: 1;
}
.direct-phone-number:hover {
  color: #ffffff;
  transform: scale(1.02);
}
.direct-phone-sub {
  font-size: 12px;
  color: rgba(250, 249, 246, 0.65);
  margin: 6px 0 0 0;
}
.direct-kakao-box {
  margin-bottom: 24px;
}
.direct-kakao-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: #fee500;
  color: #191919;
  padding: 16px 24px;
  border-radius: var(--ch-radius-md);
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}
.direct-kakao-btn:hover {
  background-color: #ffd800;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.direct-kakao-sub {
  font-size: 12px;
  color: rgba(250, 249, 246, 0.65);
  text-align: center;
  margin: 8px 0 0 0;
}
.direct-commitments {
  list-style: none;
  padding: 20px 0 0 0;
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  gap: 10px;
}
.direct-commitments li {
  font-size: 13px;
  color: rgba(250, 249, 246, 0.82);
  line-height: 1.6;
  position: relative;
  padding-left: 16px;
}
.direct-commitments li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--ch-blue-on-dark);
}

/* ==========================================================================
   10. PREMIUM INQUIRY MODAL & FORM V4
   ========================================================================== */
@media (min-width: 641px) {
  .sheet-backdrop {
    align-items: center;
  }
  .contact-sheet.contact-sheet-wide {
    max-width: 580px;
    border-radius: var(--ch-radius-lg);
    padding: 32px 36px 36px;
    box-shadow: 0 24px 64px -12px rgba(20, 35, 43, 0.25);
  }
}

.contact-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 540px) {
  .contact-grid-2col {
    grid-template-columns: 1fr;
  }
}

.contact-form label span {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ch-ink);
  margin-bottom: 2px;
}
.contact-form label span .req {
  color: #d9383a;
  font-weight: 700;
  margin-left: 3px;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  border: 1px solid var(--ch-border);
  border-radius: var(--ch-radius-sm);
  padding: 10px 14px;
  font-size: 14px;
  color: var(--ch-ink);
  background-color: var(--ch-white);
  transition: border-color var(--ch-duration-fast) ease, box-shadow var(--ch-duration-fast) ease;
}
.contact-form select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23177d83' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
  padding-right: 40px;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--ch-mineral);
  outline: none;
  box-shadow: 0 0 0 3px rgba(23, 55, 94, 0.12);
}

.contact-materials {
  border: 1px solid var(--ch-border);
  border-radius: var(--ch-radius-sm);
  padding: 12px 14px;
  margin: 4px 0 0;
  background-color: var(--ch-mist);
}
.contact-materials legend {
  font-size: 12px;
  font-weight: 600;
  color: var(--ch-slate);
  padding: 0 6px;
}
.material-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.chip-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ch-ink);
  background: var(--ch-white);
  border: 1px solid var(--ch-border);
  padding: 5px 11px;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
}
.chip-check input {
  width: auto;
  margin: 0;
}
.chip-check:has(input:checked) {
  border-color: var(--ch-mineral);
  background-color: #edf3fa;
  color: var(--ch-mineral);
  font-weight: 600;
}

.privacy-consent {
  font-size: 12px;
  color: var(--ch-slate);
  line-height: 1.5;
  margin-top: 4px;
}
.privacy-consent label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}
.privacy-consent input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex: none;
  accent-color: var(--ch-mineral);
}

.form-submit-row {
  margin-top: 6px;
}
.submit-inquiry-btn {
  width: 100%;
  padding: 14px;
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--ch-radius-sm);
  background: var(--ch-mineral);
  color: var(--ch-white);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(23, 55, 94, 0.2);
  transition: background-color var(--ch-duration-fast) ease, transform var(--ch-duration-fast) ease;
}
.submit-inquiry-btn:hover:not(:disabled) {
  background-color: var(--ch-midnight);
  transform: translateY(-1px);
}
.submit-inquiry-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ==========================================================================
   11. INQUIRY SUCCESS BOX
   ========================================================================== */
.inquiry-success-box {
  text-align: center;
  padding: 8px 0 4px;
}
.inquiry-badge {
  display: inline-block;
  background-color: #e8f5e9;
  color: #2e7d32;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}
.inquiry-id-label {
  font-size: 12px;
  color: var(--ch-slate);
  margin: 0;
}
.inquiry-id-val {
  font-size: 24px;
  font-weight: 800;
  color: var(--ch-mineral);
  letter-spacing: 1px;
  margin: 4px 0 16px;
}
.inquiry-summary {
  background-color: var(--ch-mist);
  border: 1px solid var(--ch-border);
  border-radius: var(--ch-radius-md);
  padding: 14px 18px;
  text-align: left;
  margin-bottom: 16px;
}
.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  line-height: 1.7;
  border-bottom: 1px dashed rgba(20, 35, 43, 0.08);
  padding: 4px 0;
}
.summary-row:last-child {
  border-bottom: none;
}
.summary-row .k {
  color: var(--ch-slate);
  flex: none;
  width: 80px;
}
.summary-row .v {
  color: var(--ch-ink);
  font-weight: 600;
  text-align: right;
  word-break: break-all;
}
.inquiry-notice {
  font-size: 13px;
  color: var(--ch-slate);
  line-height: 1.6;
  margin-bottom: 18px;
}
.inquiry-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.btn-copy-inquiry {
  width: 100%;
}
.btn-close-inquiry {
  background: none;
  border: 1px solid var(--ch-border);
  border-radius: var(--ch-radius-sm);
  padding: 10px;
  font-size: 13px;
  color: var(--ch-slate);
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-close-inquiry:hover {
  background-color: var(--ch-mist);
  color: var(--ch-ink);
}

/* ==========================================================================
   12. SUBPAGE & SERVICE DETAIL V4 INTEGRATION
   ========================================================================== */
.v4-subpage-layout {
  background-color: var(--ch-bg);
  min-height: 100vh;
}
.v4-subpage-hero {
  min-height: clamp(520px, 68svh, 720px);
  padding: clamp(72px, 10vh, 120px) 0;
}
.v4-spec-title {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  margin: 6px 0 10px;
}
.v4-spec-price {
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 20px;
}
.v4-spec-price strong {
  font-size: 24px;
  color: var(--ch-blue-on-dark);
  margin-left: 6px;
  font-weight: 800;
}
.v4-spec-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.v4-spec-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13.5px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.v4-spec-list li .k {
  color: rgba(255,255,255,0.65);
}
.v4-spec-list li .v {
  color: #ffffff;
  font-weight: 600;
  text-align: right;
}
.v4-spec-btn-wrap .v4-btn-primary {
  width: 100%;
}

.calc-page {
  background-color: var(--ch-bg);
  color: var(--ch-ink);
}
.ch-breadcrumb {
  font-size: 13px;
  color: var(--ch-slate);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ch-breadcrumb a:hover {
  color: var(--ch-mineral);
}
.ch-detail-heading h1 {
  font-size: clamp(26px, 3.5vw, 36px);
  font-weight: 800;
  color: var(--ch-ink);
  letter-spacing: -0.03em;
  margin: 0 0 12px 0;
}
.ch-service-intro {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ch-slate);
}
.ch-service-info-block {
  background: var(--ch-white);
  border: 1px solid var(--ch-border);
  border-radius: var(--ch-radius-md);
  padding: clamp(24px, 3.5vw, 36px);
  margin-bottom: 24px;
}
.ch-service-inquiry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ch-mineral);
  color: #ffffff;
  padding: 16px 32px;
  border-radius: var(--ch-radius-sm);
  font-size: 16px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.ch-service-inquiry:hover {
  background-color: var(--ch-midnight);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(23, 55, 94, 0.2);
}

/* ==========================================================================
   FLOATING QUICK ACTION BUTTONS
   ========================================================================== */
.floating-quick-actions {
  position: fixed;
  right: clamp(16px, 2.5vw, 28px);
  bottom: clamp(76px, 9vh, 100px);
  z-index: 95;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.floating-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
  position: relative;
}
.floating-btn:hover {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}
.floating-btn:active {
  transform: scale(0.95);
}
.floating-btn-top {
  background-color: var(--ch-ink, #14232b);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.floating-btn-top:hover {
  background-color: var(--ch-mineral, #177d83);
}
.floating-btn-home {
  background-color: #ffffff;
  color: var(--ch-ink, #14232b);
  border: 1px solid var(--ch-border, #dfe5e3);
}
.floating-btn-home:hover {
  border-color: var(--ch-mineral, #177d83);
  color: var(--ch-mineral, #177d83);
}
.floating-btn-kakao {
  background-color: #fee500;
  color: #191919;
}
.floating-btn-phone {
  background-color: var(--ch-mineral, #177d83);
  color: #ffffff;
}
.floating-btn-phone:hover {
  background-color: #125e63;
}
.floating-icon {
  width: 26px;
  height: 26px;
  display: block;
}
.floating-tooltip {
  position: absolute;
  right: 64px;
  background: rgba(18, 45, 54, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateX(8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.floating-btn:hover .floating-tooltip {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 640px) {
  .floating-quick-actions {
    right: 14px;
    bottom: calc(68px + env(safe-area-inset-bottom));
    gap: 10px;
  }
  .floating-btn {
    width: 48px;
    height: 48px;
  }
  .floating-icon {
    width: 23px;
    height: 23px;
  }
  .floating-tooltip {
    display: none;
  }
}

/* ==========================================================================
   CATCH HAJA 2.0 ADVANCED UX/UI & MOTION GRAPHICS EXTENSION
   - Triage Bar (3-second emergency routing)
   - Live Trust Counter Grid (Data Anchors)
   - Asymmetric Bento Grid Showroom
   - Non-destructive Sound & Laser Radar Scan Animation
   - Interactive Before/After Thermal Comparison Scanner
   - Engineering 4-Step Pipeline Neon Flow
   ========================================================================== */

/* 1. Triage Bar (3-Second Quick Filter) - 1-Line Layout */
.v4-triage-container {
  margin-top: 28px;
  padding: 14px 18px;
  background: rgba(20, 35, 43, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(48, 87, 176, 0.35);
  border-radius: var(--ch-radius-md);
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
}
.v4-triage-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ch-blue-on-dark);
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.v4-triage-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}
.v4-triage-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 44px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-align: center;
  transition: all 0.22s var(--ch-ease-out);
  box-sizing: border-box;
}
.v4-triage-chip span:not(.v4-triage-icon) {
  min-width: 0;
  white-space: normal;
}
.v4-triage-chip:hover,
.v4-triage-chip.is-active {
  background: var(--ch-mineral);
  border-color: var(--ch-mineral);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(23, 125, 131, 0.4);
}
.v4-triage-icon {
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .v4-triage-container {
    width: 100%;
    padding: 14px;
  }
  .v4-triage-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .v4-triage-chip {
    font-size: 12px;
    padding: 8px 10px;
  }
}

/* 2. Live Trust Counter Grid (Data Anchors) */
.v4-counter-section {
  padding: 44px 0;
  background: var(--ch-surface);
  border-bottom: 1px solid var(--ch-border);
}
.v4-counter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.v4-counter-item {
  padding: 16px 20px;
  border-left: 2px solid var(--ch-border);
  transition: border-color 0.25s var(--ch-ease-out);
}
.v4-counter-item:hover {
  border-left-color: var(--ch-mineral);
}
.v4-counter-num-wrap {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 6px;
}
.v4-counter-num {
  font-size: clamp(32px, 3.4vw, 44px);
  font-weight: 850;
  letter-spacing: -0.04em;
  color: var(--ch-ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.v4-counter-suffix {
  font-size: 20px;
  font-weight: 800;
  color: var(--ch-mineral);
}
.v4-counter-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--ch-ink);
  margin-bottom: 4px;
}
.v4-counter-sub {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ch-slate);
  margin: 0;
}

/* 3. Asymmetric Bento Grid Showroom */
.v4-bento-section {
  padding: clamp(64px, 8vw, 110px) 0;
  background: var(--ch-warm-white);
}
.v4-bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  margin-top: clamp(52px, 5.5vw, 76px);
}

/* Bento Card Base */
.v4-bento-card {
  position: relative;
  background: var(--ch-surface);
  border: 1px solid var(--ch-border);
  border-radius: var(--ch-radius-lg);
  padding: 34px 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(20, 35, 43, 0.03);
  transition: transform 0.28s var(--ch-ease-out), box-shadow 0.28s var(--ch-ease-out), border-color 0.28s var(--ch-ease-out);
}
.v4-bento-card:hover {
  transform: translateY(-5px);
  border-color: var(--ch-mineral);
  box-shadow: 0 16px 36px rgba(20, 35, 43, 0.08);
}

/* Bento Card Leak (7 cols) - Dark Editorial Signature */
.v4-bento-leak {
  grid-column: span 7;
  background: linear-gradient(145deg, #122d36 0%, #14232b 100%);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.1);
  min-height: 420px;
}
.v4-bento-leak:hover {
  border-color: var(--ch-sand);
  box-shadow: 0 20px 48px rgba(18, 45, 54, 0.35);
}
.v4-bento-badge-gold {
  align-self: flex-start;
  padding: 6px 14px;
  background: rgba(48, 87, 176, 0.18);
  border: 1px solid var(--ch-sand);
  border-radius: 999px;
  color: var(--ch-blue-on-dark);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.04em;
  margin-bottom: 20px;
}
.v4-bento-leak h3 {
  font-size: clamp(24px, 2.5vw, 32px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.3;
  margin: 0 0 14px 0;
  color: #ffffff;
}
.v4-bento-leak p {
  font-size: 15px;
  line-height: 1.75;
  color: #c5d4d2;
  margin: 0 0 24px 0;
  max-width: 520px;
}

/* Radar Pulse Motion inside Leak Card */
.v4-radar-container {
  position: absolute;
  right: -20px;
  bottom: -20px;
  width: 260px;
  height: 260px;
  pointer-events: none;
  opacity: 0.45;
}
.v4-radar-circle {
  position: absolute;
  inset: 0;
  margin: auto;
  border: 1.5px solid var(--ch-mineral);
  border-radius: 50%;
  animation: radarPulse 3.6s cubic-bezier(0.2, 0.8, 0.4, 1) infinite;
}
.v4-radar-circle:nth-child(2) {
  animation-delay: 1.2s;
}
.v4-radar-circle:nth-child(3) {
  animation-delay: 2.4s;
}
.v4-radar-sweep {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(23, 125, 131, 0.35) 0deg, transparent 60deg, transparent 360deg);
  animation: radarSweep 4s linear infinite;
}
@keyframes radarPulse {
  0% {
    width: 20px;
    height: 20px;
    opacity: 1;
  }
  100% {
    width: 260px;
    height: 260px;
    opacity: 0;
  }
}
@keyframes radarSweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Bento Card Defect (5 cols) */
.v4-bento-defect {
  grid-column: span 5;
  min-height: 420px;
  background: var(--ch-surface);
}
.v4-bento-tag {
  align-self: flex-start;
  padding: 5px 12px;
  background: var(--ch-mist);
  border: 1px solid var(--ch-border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ch-mineral);
  margin-bottom: 18px;
}
.v4-bento-defect h3 {
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.35;
  margin: 0 0 12px 0;
  color: var(--ch-ink);
}
.v4-bento-defect p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ch-slate);
  margin: 0 0 20px 0;
}
.v4-bento-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  display: grid;
  gap: 10px;
}
.v4-bento-checklist li {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ch-ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.v4-bento-checklist li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ch-mineral);
  flex-shrink: 0;
}

/* Bento Card Tech Equipment (6 cols) */
.v4-bento-tech {
  grid-column: span 6;
  min-height: 340px;
}
.v4-bento-tech h3 {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 10px 0;
  color: var(--ch-ink);
}
.v4-bento-tech p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ch-slate);
  margin: 0 0 20px 0;
}
.v4-tech-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: auto;
}
.v4-tech-item {
  padding: 14px 16px;
  background: var(--ch-mist);
  border: 1px solid var(--ch-border);
  border-radius: var(--ch-radius-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.v4-tech-name {
  font-size: 14px;
  font-weight: 750;
  color: var(--ch-ink);
}
.v4-tech-spec {
  font-size: 12px;
  color: var(--ch-slate);
}

/* Bento Card Evidence Report (6 cols) */
.v4-bento-report {
  grid-column: span 6;
  min-height: 340px;
}
.v4-bento-report h3 {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 10px 0;
  color: var(--ch-ink);
}
.v4-bento-report p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ch-slate);
  margin: 0 0 20px 0;
}
.v4-report-preview-box {
  background: var(--ch-warm-white);
  border: 1px solid var(--ch-border);
  border-radius: var(--ch-radius-md);
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}
.v4-report-preview-info strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ch-ink);
}
.v4-report-preview-info span {
  font-size: 12px;
  color: var(--ch-slate);
}
.v4-report-preview-btn {
  padding: 8px 14px;
  background: var(--ch-surface);
  border: 1px solid var(--ch-border);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ch-mineral);
  white-space: nowrap;
}

/* 4. Interactive Before / After Thermal Scanner with Real Photos */
.v4-scanner-section {
  padding: clamp(64px, 8vw, 100px) 0;
  background: var(--ch-surface);
  border-top: 1px solid var(--ch-border);
  border-bottom: 1px solid var(--ch-border);
}
.v4-scanner-box {
  margin-top: 36px;
  position: relative;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--ch-radius-lg);
  overflow: hidden;
  border: 1px solid var(--ch-border);
  background: #14232b;
  box-shadow: 0 16px 44px rgba(20, 35, 43, 0.16);
}
.v4-scanner-track {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 580px;
  user-select: none;
  cursor: ew-resize;
  overflow: hidden;
  background: #14232b;
}
.v4-scan-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.v4-scan-layer-before {
  z-index: 1;
}
.v4-scan-layer-after {
  z-index: 2;
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100%;
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
  -webkit-clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
  pointer-events: none;
}
.v4-scanner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
}
.v4-scan-sim-text {
  position: absolute;
  top: 20px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.02em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  z-index: 4;
  pointer-events: none;
}
.v4-scan-sim-before {
  right: 20px;
  background: rgba(20, 35, 43, 0.88);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.v4-scan-sim-after {
  left: 20px;
  background: rgba(23, 125, 131, 0.92);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.v4-scan-divider-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
}
.v4-scan-divider-handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  background: #ffffff;
  box-shadow: 0 0 14px rgba(0,0,0,0.6);
}
.v4-scan-divider-handle span {
  position: relative;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--ch-ink, #14232b);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  border: 2px solid var(--ch-mineral, #177d83);
}

/* 5. Process Flow Glowing Neon Effect */
.v4-process-step {
  position: relative;
}
.v4-process-step::after {
  content: "";
  position: absolute;
  top: 14px;
  right: -20px;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--ch-mineral), transparent);
}
@media (max-width: 900px) {
  .v4-process-step::after {
    display: none;
  }
}

/* 6. Stagger Scroll Reveal */
.v4-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s var(--ch-ease-out), transform 0.65s var(--ch-ease-out);
}
.v4-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .v4-bento-leak,
  .v4-bento-defect {
    grid-column: span 12;
  }
  .v4-bento-tech,
  .v4-bento-report {
    grid-column: span 12;
  }
  .v4-counter-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .v4-counter-grid {
    grid-template-columns: 1fr;
  }
  .v4-bento-card {
    padding: 24px 20px;
  }
  .v4-tech-grid {
    grid-template-columns: 1fr;
  }
  .v4-scanner-track {
    min-height: 280px;
  }
}

/* ==========================================================================
   ADMIN LIVE IN-PLACE EDIT MODE STYLES
   ========================================================================== */
.admin-live-banner {
  background: #14232b;
  color: #ffffff;
  padding: 8px 16px;
  font-size: 12.5px;
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--ch-mineral, #177d83);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.admin-live-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.admin-live-tag {
  font-size: 11px;
  font-weight: 800;
  background: var(--ch-mineral, #177d83);
  color: #ffffff;
  padding: 2px 6px;
  border-radius: 4px;
}
.admin-live-link {
  color: var(--ch-blue-on-dark, #b9cdfa);
  text-decoration: underline;
  font-weight: 600;
}
.v4-editable-stat {
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px dashed transparent;
  border-radius: 8px;
  padding: 8px;
}
.v4-editable-stat:hover {
  border-color: var(--ch-mineral, #177d83);
  background: rgba(23, 125, 131, 0.04);
  transform: translateY(-2px);
}
.v4-stat-edit-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 11px;
  font-weight: 700;
  background: var(--ch-mineral, #177d83);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 3px 7px;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}
.v4-editable-stat:hover .v4-stat-edit-btn {
  opacity: 1;
}

/* Bento Footer and Price Tag Layout */
.v4-bento-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--ch-border, #dfe5e3);
  margin-top: auto;
  width: 100%;
  box-sizing: border-box;
}
.v4-bento-leak-footer {
  border-top-color: rgba(255, 255, 255, 0.12) !important;
}
.v4-bento-price-tag {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ch-slate, #66757b);
  white-space: nowrap;
}
.v4-bento-cta-btn {
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  text-align: center;
}
@media (max-width: 520px) {
  .v4-bento-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .v4-bento-cta-btn {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
}

/* ==========================================================================
   PHASE 2A: SUBPAGE PREMIUM V4 COMPONENTS (/leak & /defect)
   ========================================================================== */

/* 1. Emergency Guide 3-Step (/leak) */
.v4-emergency-guide {
  background: var(--ch-surface, #ffffff);
  border: 1px solid var(--ch-border, #dfe5e3);
  border-left: 5px solid var(--ch-mineral, #177d83);
  border-radius: var(--ch-radius-lg, 16px);
  padding: clamp(24px, 3.5vw, 36px);
  box-shadow: 0 4px 20px rgba(20, 35, 43, 0.04);
}
.v4-emergency-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.v4-emergency-badge {
  background: var(--ch-mineral, #177d83);
  color: #ffffff;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.v4-emergency-title {
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 800;
  color: var(--ch-ink, #14232b);
  margin: 0;
  letter-spacing: -0.02em;
}
.v4-emergency-desc {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ch-slate, #66757b);
  margin: 0 0 24px 0;
}
.v4-emergency-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.v4-emergency-step {
  background: var(--ch-warm-white, #faf9f6);
  border: 1px solid var(--ch-border, #dfe5e3);
  border-radius: var(--ch-radius-md, 12px);
  padding: 20px;
  position: relative;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.v4-emergency-step:hover {
  transform: translateY(-3px);
  border-color: var(--ch-mineral, #177d83);
  box-shadow: 0 8px 24px rgba(23, 125, 131, 0.08);
}
.v4-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ch-mineral, #177d83);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 12px;
}
.v4-emergency-step-title {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--ch-ink, #14232b);
  margin: 0 0 8px 0;
  letter-spacing: -0.01em;
}
.v4-emergency-step-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ch-slate, #66757b);
  margin: 0;
}

/* 2. 4-Equipment Showcase Grid (/leak & /defect) */
.v4-equipment-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.v4-equipment-card {
  background: var(--ch-surface, #ffffff);
  border: 1px solid var(--ch-border, #dfe5e3);
  border-radius: var(--ch-radius-lg, 16px);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.v4-equipment-card:hover {
  transform: translateY(-4px);
  border-color: var(--ch-mineral, #177d83);
  box-shadow: 0 12px 32px rgba(20, 35, 43, 0.08);
}
.v4-equipment-tag {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ch-mineral, #177d83);
  background: rgba(23, 125, 131, 0.08);
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 14px;
}
.v4-equipment-name {
  font-size: 17px;
  font-weight: 800;
  color: var(--ch-ink, #14232b);
  margin: 0 0 10px 0;
  letter-spacing: -0.02em;
  line-height: 1.35;
}
.v4-equipment-spec {
  font-size: 13.5px;
  color: var(--ch-slate, #66757b);
  line-height: 1.6;
  margin: 0 0 16px 0;
  flex-grow: 1;
}
.v4-equipment-meta {
  padding-top: 14px;
  border-top: 1px solid var(--ch-border, #dfe5e3);
  font-size: 12px;
  font-weight: 700;
  color: var(--ch-mineral, #177d83);
}

/* 3. 3-Package Comparison Grid (/defect) */
.v4-package-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
.v4-package-card {
  background: var(--ch-surface, #ffffff);
  border: 1px solid var(--ch-border, #dfe5e3);
  border-radius: var(--ch-radius-lg, 16px);
  padding: clamp(28px, 3.5vw, 36px) clamp(20px, 2.5vw, 28px);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.v4-package-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(20, 35, 43, 0.09);
  border-color: var(--ch-mineral, #177d83);
}
.v4-package-card.is-featured {
  border-color: var(--ch-mineral, #177d83);
  border-width: 2px;
  box-shadow: 0 12px 36px rgba(23, 125, 131, 0.12);
}
.v4-package-ribbon {
  position: absolute;
  top: -12px;
  right: 24px;
  background: var(--ch-mineral, #177d83);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.v4-package-tag {
  font-size: 12px;
  font-weight: 700;
  color: var(--ch-mineral, #177d83);
  margin-bottom: 8px;
  display: block;
}
.v4-package-title {
  font-size: clamp(20px, 2.4vw, 24px);
  font-weight: 800;
  color: var(--ch-ink, #14232b);
  margin: 0 0 12px 0;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.v4-package-desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ch-slate, #66757b);
  margin: 0 0 20px 0;
}
.v4-package-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px 0;
  border-top: 1px solid var(--ch-border, #dfe5e3);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-grow: 1;
}
.v4-package-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ch-ink, #14232b);
}
.v4-package-bullet {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ch-mineral, #177d83);
  margin-top: 7px;
  flex-shrink: 0;
}
.v4-package-cta {
  width: 100%;
  text-align: center;
  padding: 13px 20px;
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--ch-radius-md, 12px);
  box-sizing: border-box;
}

/* 4. 6-Defect Interactive Checklist (/defect) */
.v4-checklist-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.v4-checklist-item {
  background: var(--ch-surface, #ffffff);
  border: 1px solid var(--ch-border, #dfe5e3);
  border-radius: var(--ch-radius-md, 12px);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.v4-checklist-item[open] {
  border-color: var(--ch-mineral, #177d83);
  box-shadow: 0 6px 20px rgba(23, 125, 131, 0.08);
}
.v4-checklist-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  gap: 16px;
}
.v4-checklist-summary::-webkit-details-marker {
  display: none;
}
.v4-checklist-header {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-grow: 1;
  flex-wrap: wrap;
}
.v4-checklist-num {
  font-size: 12px;
  font-weight: 800;
  color: var(--ch-mineral, #177d83);
  background: rgba(23, 125, 131, 0.1);
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.v4-checklist-title {
  font-size: 16.5px;
  font-weight: 800;
  color: var(--ch-ink, #14232b);
  margin: 0;
  letter-spacing: -0.01em;
}
.v4-checklist-indicator {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ch-mist, #eef2f1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease, background 0.2s ease;
}
.v4-checklist-item[open] .v4-checklist-indicator {
  transform: rotate(180deg);
  background: var(--ch-mineral, #177d83);
}
.v4-checklist-indicator svg {
  width: 12px;
  height: 12px;
  stroke: var(--ch-ink, #14232b);
  transition: stroke 0.2s ease;
}
.v4-checklist-item[open] .v4-checklist-indicator svg {
  stroke: #ffffff;
}
.v4-checklist-content {
  padding: 0 24px 24px 24px;
  border-top: 1px solid var(--ch-border, #dfe5e3);
  background: var(--ch-warm-white, #faf9f6);
}
.v4-checklist-standard {
  margin-top: 18px;
  padding: 14px 18px;
  background: rgba(23, 125, 131, 0.06);
  border-left: 3px solid var(--ch-mineral, #177d83);
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--ch-ink, #14232b);
  line-height: 1.6;
}
.v4-checklist-standard strong {
  display: block;
  font-weight: 800;
  color: var(--ch-mineral, #177d83);
  margin-bottom: 4px;
}
.v4-checklist-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.v4-checklist-detail-box {
  background: #ffffff;
  border: 1px solid var(--ch-border, #dfe5e3);
  border-radius: 8px;
  padding: 14px 16px;
}
.v4-checklist-detail-box strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--ch-ink, #14232b);
  margin-bottom: 6px;
}
.v4-checklist-detail-box p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ch-slate, #66757b);
  margin: 0;
}

/* Responsive Breakpoints for Phase 2A Components */
@media (max-width: 992px) {
  .v4-emergency-grid {
    grid-template-columns: 1fr;
  }
  .v4-equipment-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .v4-package-grid {
    grid-template-columns: 1fr;
  }
  .v4-checklist-details {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .v4-equipment-grid {
    grid-template-columns: 1fr;
  }
  .v4-checklist-summary {
    padding: 16px 18px;
  }
  .v4-checklist-content {
    padding: 0 18px 18px 18px;
  }
}

/* 5단계 보고서 견본 리더기: 문서 본문과 조작부를 구분한다. */
.rv-reader {
  max-width: 1120px;
  color: var(--ch-ink);
  --rv-paper-width: 900px;
}
.rv-reader .sample-page-heading { max-width: var(--rv-paper-width); }
.rv-reader .sample-page-heading h1 { font-size: clamp(28px, 3.8vw, 40px); }
.rv-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  max-width: var(--rv-paper-width);
  margin: 0 auto 14px;
}
.rv-status { color: var(--ch-slate); font-size: 13px; font-variant-numeric: tabular-nums; }
.rv-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  max-width: var(--rv-paper-width);
  margin: 0 auto 18px;
  border: 1px solid var(--ch-border);
  border-radius: var(--ch-radius-sm);
  background: var(--ch-white);
  overflow: hidden;
}
.rv-tab {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 80px;
  padding: 14px 16px;
  border: 0;
  border-right: 1px solid var(--ch-border);
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--ch-slate);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
  transition: color var(--ch-duration-fast) ease, background var(--ch-duration-fast) ease;
}
.rv-tab:last-child { border-right: 0; }
.rv-tab > span:first-child { font-size: 11px; font-weight: 700; letter-spacing: .07em; }
.rv-tab:hover { background: var(--ch-mist); color: var(--ch-ink); }
.rv-tab[aria-selected="true"] {
  color: var(--ch-mineral);
  border-bottom-color: var(--ch-mineral);
  background: var(--ch-mist);
}
.rv-reader :is(.rv-tab, .rv-cta a, a.rv-cta, .rv-table-wrap):focus-visible {
  outline: 3px solid var(--ch-mineral);
  outline-offset: 3px;
}
.rv-tab:focus-visible { position: relative; z-index: 1; outline-offset: -4px !important; }
.rv-panel[hidden] { display: none !important; }
.rv-panel { min-width: 0; scroll-margin-top: 100px; }
.rv-paper,
.rv-reader .report-sheet {
  width: 100%;
  max-width: var(--rv-paper-width);
  min-width: 0;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 52px);
  border: 1px solid var(--ch-border);
  background: var(--ch-white);
  box-shadow: 0 8px 32px rgba(20, 35, 43, .04);
}
.rv-document-head {
  display: grid;
  gap: 10px;
  padding-bottom: 22px;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--ch-ink);
}
.rv-document-head h2 { font-size: clamp(23px, 3vw, 32px); line-height: 1.35; letter-spacing: -.035em; }
.rv-document-head p { color: var(--ch-slate); font-size: 13px; }
.rv-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 20px 0 !important;
  border: 1px solid var(--ch-border);
}
.rv-meta-grid > div, .rv-meta-item {
  min-width: 0;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ch-border);
}
.rv-meta-grid > div:nth-child(odd) { border-right: 1px solid var(--ch-border); }
.rv-meta-grid > div:nth-last-child(-n+2) { border-bottom: 0; }
.rv-meta-grid dt { margin-bottom: 5px; color: var(--ch-slate); font-size: 12px; }
.rv-meta-grid dd { color: var(--ch-ink); font-size: 14px; font-weight: 600; }
.rv-section { margin-top: 26px; min-width: 0; }
.rv-section h3 { margin-bottom: 10px; font-size: 18px; line-height: 1.5; }
.rv-section p, .rv-panel p, .rv-panel li { line-height: 1.8; }
.rv-section p + p, .rv-panel p + p { margin-top: 10px; }
.rv-note {
  margin: 18px 0 !important;
  padding: 14px 18px;
  border-left: 3px solid var(--ch-mineral);
  background: var(--ch-mist);
  color: var(--ch-ink);
  font-size: 14px;
  line-height: 1.8;
}
.rv-table-wrap {
  width: 100%;
  max-width: 100%;
  margin: 16px 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: var(--ch-border) var(--ch-warm-white);
  scrollbar-width: thin;
}
.rv-table-wrap table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  color: var(--ch-ink);
  font-size: 14px;
  line-height: 1.65;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.rv-table-wrap caption { padding-bottom: 10px; color: var(--ch-ink); font-size: 14px; font-weight: 700; text-align: left; }
.rv-table-wrap :is(th, td) { padding: 12px 14px; border: 1px solid var(--ch-border); vertical-align: top; }
.rv-table-wrap th { background: var(--ch-mist); font-weight: 700; }
.rv-table-wrap tfoot :is(th, td) { border-top: 2px solid var(--ch-ink); background: var(--ch-warm-white); font-weight: 750; }
.rv-photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.rv-photo-plate { min-width: 0; margin: 20px 0; border: 1px solid var(--ch-border); background: var(--ch-white); }
.rv-photo-plate img { display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain; background: var(--ch-mist); }
.rv-photo-plate figcaption { padding: 14px 16px; border-top: 1px solid var(--ch-border); color: var(--ch-slate); font-size: 13px; line-height: 1.7; }
.rv-photo-plate figcaption strong { color: var(--ch-ink); }
.rv-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
  padding-top: 14px;
  border-top: 1px solid var(--ch-border);
  color: var(--ch-slate);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.rv-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  max-width: var(--rv-paper-width);
  margin: 24px auto 0;
  padding: 24px;
  border: 1px solid var(--ch-border);
  border-radius: var(--ch-radius-sm);
  background: var(--ch-mist);
}
.rv-cta p { color: var(--ch-slate); font-size: 14px; line-height: 1.7; }
.rv-cta > a, a.rv-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 22px;
  border: 1px solid var(--ch-mineral);
  border-radius: var(--ch-radius-sm);
  background: var(--ch-mineral);
  color: var(--ch-white);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
  text-decoration: none;
  transition: background var(--ch-duration-fast) ease;
}
.rv-cta > a:hover, a.rv-cta:hover { background: var(--ch-midnight); }
@media (max-width: 720px) {
  .rv-tabs { display: flex; overflow-x: auto; overscroll-behavior-inline: contain; border-radius: 6px; }
  .rv-tab { flex: 0 0 135px; min-height: 76px; padding: 12px 14px; font-size: 13px; }
  .rv-tab:last-child { border-right: 1px solid var(--ch-border); }
  .rv-paper, .rv-reader .report-sheet { padding: 24px 18px; }
  .rv-meta-grid { grid-template-columns: 1fr; }
  .rv-meta-grid > div:nth-child(odd) { border-right: 0; }
  .rv-meta-grid > div:nth-last-child(-n+2) { border-bottom: 1px solid var(--ch-border); }
  .rv-meta-grid > div:last-child { border-bottom: 0; }
  .rv-photo-grid { grid-template-columns: 1fr; }
  .rv-footer { flex-wrap: wrap; }
  .rv-cta { flex-direction: column; align-items: stretch; padding: 20px 18px; }
  .rv-cta > a { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .rv-reader *, .rv-reader *::before, .rv-reader *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .rv-reader .rv-panel, .rv-reader .rv-panel[hidden] { display: block !important; break-before: page; }
  .rv-reader .rv-panel:first-of-type { break-before: auto; }
  .rv-reader :is(.rv-tabs, .rv-toolbar, .rv-cta) { display: none !important; }
  .rv-paper, .rv-reader .report-sheet { max-width: none; padding: 0; border: 0; box-shadow: none; }
  .rv-table-wrap { overflow: visible; }
  .rv-table-wrap table { min-width: 0; font-size: 9pt; }
  .rv-table-wrap :is(th, td) { padding: 5pt; }
  .rv-photo-plate, .rv-meta-grid, .rv-note { break-inside: avoid; }
  .rv-reader { max-width: none; }
}

/* 기존 보고서 본문 클래스와 연결하는 리더기 구성 */
.rv-reader.report-sheet { max-width: var(--rv-paper-width); padding: clamp(24px, 4vw, 48px); }
.rv-reader > .rv-tabs { margin-top: 24px; }
.rv-progress { margin: 0 0 18px !important; color: var(--ch-slate); font-size: 12px; letter-spacing: .02em; }
.rv-panel-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 18px 0;
  margin-bottom: 8px !important;
  border-top: 1px solid var(--ch-border);
  border-bottom: 1px solid var(--ch-border);
  font-size: clamp(20px, 2.8vw, 25px);
  font-weight: 750;
  line-height: 1.5;
  letter-spacing: -.025em;
}
.rv-panel-title > span { flex: none; color: var(--ch-mineral); font-size: 13px; font-weight: 700; letter-spacing: .05em; }
.rv-intro { margin-top: 18px !important; color: var(--ch-slate); font-size: 15px; }
.rv-reference { margin-top: 24px; padding: 18px 20px; border: 1px solid var(--ch-border); background: var(--ch-warm-white); }
.rv-reference h3 { margin-bottom: 8px; font-size: 16px; }
.rv-reference p { color: var(--ch-slate); font-size: 14px; }
.rv-reference a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; color: var(--ch-mineral); font-size: 14px; font-weight: 650; text-underline-offset: 4px; }
.rv-photo-plate figcaption > span { display: block; margin-top: 5px; }
section.rv-cta { display: grid; justify-items: start; gap: 10px; max-width: 900px; }
.rv-cta h2 { font-size: clamp(20px, 2.5vw, 25px); line-height: 1.5; letter-spacing: -.025em; }
.rv-cta button { min-height: 48px; margin-top: 8px; white-space: normal; text-align: center; }
.rv-cta button:focus-visible { outline: 3px solid var(--ch-mineral); outline-offset: 4px; }
@media (max-width: 720px) {
  .rv-reader.report-sheet { padding: 24px 18px; }
  .rv-reader > .rv-tabs { margin-top: 20px; }
  .rv-cta button { width: 100%; }
  .rv-reference { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { .rv-cta button { transition: none !important; } }
@media print {
  .rv-reader.report-sheet { padding: 0; }
  .rv-reader .rv-progress, section.rv-cta { display: none !important; }
  .rv-panel-title { break-after: avoid; }
}