/*
 * DB Group — Phase 4 CSS Override (v3 — 하이브리드: 히어로 다크 + 본문 화이트)
 */

/* ==========================================================================
   Phase B-3 Sprint 3 ③ P98 (2026-04-21): Pretendard 자체 호스팅
   - CDN(cdn.jsdelivr.net) 의존 제거 — B2B 고객 방화벽 차단 방어
   - 풀 서브셋 woff2 4종(Regular/Medium/SemiBold/Bold) 사용 weight만
   - font-display: swap — FOIT 방지
   - local() 우선 — OS 설치 시 네트워크 fetch skip
   ========================================================================== */
@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: local("Pretendard Regular"),
       url("/theme/c006(digitalbank)/font/Pretendard-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: local("Pretendard Medium"),
       url("/theme/c006(digitalbank)/font/Pretendard-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: local("Pretendard SemiBold"),
       url("/theme/c006(digitalbank)/font/Pretendard-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: local("Pretendard Bold"),
       url("/theme/c006(digitalbank)/font/Pretendard-Bold.woff2") format("woff2");
}

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-sans) !important; /* default.css:4 Nanum Gothic !important 대응 */
  color: var(--color-text-primary);
  line-height: var(--leading-normal);
  background: var(--color-surface);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   한국어 타이포그래피 기본 규칙 (2026-04-22 · 평가자 긴급 수정)
   ------------------------------------------------------------------------
   원인: default.css:24 `p { word-break: break-all }` 때문에 본문 텍스트가
         문자 단위로 쪼개짐 (예: "POS" → "PO / S", "인프라" → "인프 / 라").
   대책: 한국어 콘텐츠 공통 규칙으로 어절 단위 줄바꿈(keep-all) 강제.
         긴 영문·URL만 overflow-wrap: break-word로 예외 처리.
   범위: 기본 텍스트 컨테이너 전역 + 랜딩 dbg-* 컴포넌트.
         그누보드 관리자 테이블(.tbl_head01/02 td)은 건드리지 않음.
   ========================================================================== */
p, h1, h2, h3, h4, h5, h6, li, dt, dd,
.dbg-section-hero__title,
.dbg-section__desc,
.dbg-solution-row__title,
.dbg-solution-row__desc,
.dbg-card__link,
.dbg-card__title,
.dbg-card__desc {
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

/* 2026-05-28: 위 element 목록은 p/h/li만 커버 → span·div 텍스트(.dbg-hero__eyebrow 등)는
   여전히 word-break:normal로 CJK가 글자 단위로 끊김("파트너"→"파/트너").
   word-break는 상속 속성이므로 body에 keep-all을 주어 전역 적용.
   default.css의 p{break-all}·관리자 테이블 td{break-all}은 자체 규칙이라 영향 없음. */
body {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 29차 P13 (2026-04-20): 다크 페이지 전용 (게시판 board.php·향후 content 페이지).
   body + wrapper + container 전역 다크 + 폭 제한 해제 → full-bleed. */
body.db-dark-page {
  background: #0F172A !important;
}
body.db-dark-page #wrapper,
body.db-dark-page .wrapper,
body.db-dark-page .main_wrapper,
body.db-dark-page #container,
body.db-dark-page .container {
  background: transparent !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}
body.db-dark-page #lsb,
body.db-dark-page .aside,
body.db-dark-page .subvisual_wrap,
body.db-dark-page #breadcrumb {
  display: none !important;
}
input, select, textarea, button { font-family: var(--font-sans); }
a { color: var(--color-text-link); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }
a:hover { color: var(--color-primary-700); }
img { max-width: 100%; height: auto; }

#wrapper { background: var(--color-surface); }
#container { max-width: 100%; padding: 0; margin: 0; }
.aside, .subvisual_wrap { display: none; }

/* ========================================
   GNB — 반투명 → 스크롤 시 화이트
   ======================================== */

#hd_tnb { display: none; }
/* R-027 (나): #hd 래퍼 공간·배경 제거 (default.css:39 background:#fff+min-width:1200px 대응)
   내부 기능 0 (#hd_pop height:0, #hd_tnb display:none). 구조 보존 — 팝업 재활성 시 본 2줄 해제로 복원
   18차 P10 (2026-04-20): min-width:1200 / #hd_pop width:1200 → 전역 수평 오버플로 원인. 모바일 해제. */
#hd {
  height: 0 !important;
  background: transparent !important;
  overflow: hidden;
  min-width: 0 !important;
}
#hd_pop { width: 100% !important; max-width: 1200px; }

/* R-028 (나): mobile_shop.css:5 body{padding:48px 0 0} 잔재 제거 — 모바일 상단 흰 띠.
   그누보드 모바일에서 mobile_shop.css 로드 → body padding-top:48px(쇼핑몰 고정바 가정, D-014 dead).
   sticky dbg-mobile-nav(top:0)가 자체 자리 차지 → 상단 오프셋 불필요. */
body { padding-top: 0; }

/* GNB — 21차 P2 (2026-04-20): 옵션 A 적용 — 스크롤 무관 항상 다크.
   이유: 로고(흰 요소 + Canon Red)는 다크 배경 전제.
   22차 P1 (2026-04-20): 헤더 height 80→96px — SVG height 56~64px 확보. */
#gnbwaterfall {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background var(--duration-normal) var(--ease-out);
  height: 96px;
  overflow: visible;
}
#gnbwaterfall-background { display: none !important; }
/* 21차 P2: .gnb--scrolled(JS 토글)도 다크 유지 — 시각 전환 없음 */
#gnbwaterfall.gnb--scrolled {
  background: rgba(15, 23, 42, 0.92);
}

#gnbwaterfall-section {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--space-6);
  background: transparent;
}
#gnbwaterfall-wrap {
  display: flex;
  align-items: center;
  /* 22차 P2 (2026-04-20): space-between → flex-start. 로고 인접 배치(옵션 B).
     이전엔 로고-메뉴 gap 399px(과도) + 우측 보조 영역 0. 한국 중견 B2B 표준 재정렬. */
  justify-content: flex-start;
  gap: var(--space-12);         /* 로고↔첫 메뉴 48px 여백 */
  height: 96px;                 /* 22차 P1: 80→96px gnb 동기화 */
  background: transparent;
}
#gnbwaterfall-logo {
  position: static !important;  /* R-023: 원본 gnbwaterfall.css:4 position:absolute 해제 */
  margin: 0; padding: 0;
  flex: 0 0 auto;
}
/* 22차 P1 (2026-04-20): 신규 db_logo_header.svg — viewBox 600×120 (5:1).
   헤더 96px 대비 60% — 60px (width 300px). 외곽 테두리 제거된 버전. */
#gnbwaterfall-logo img { height: 60px; width: auto; display: block; }

#gnbwaterfall-container {
  float: none !important;       /* R-023: 원본 gnbwaterfall.css:5 float:right 해제 */
  background: transparent;
  flex: 0 1 auto;
}

/* 27차 P1 (2026-04-20, 수정): 헤더 유틸 제거 — 관리자 진입점은 푸터로 이전 (P2).
   이전 .dbg-gnb-util / .dbg-mobile-panel__util 블록 삭제. */
#gnbwaterfall-container > ul {
  display: flex; gap: 0; list-style: none; margin: 0; padding: 0; align-items: center;
}

/* R-024 (i): 경계선 제거 — c-2 다크 반투명+blur이 색 분리 대체
   §2 P0-1 정리(2026-04-19): #gnbwaterfall 자체 border-bottom 선언을
   상단 블록에서 제거 → 본 !important 행도 불필요. 원본 gnbwaterfall.css:2
   `#gnbwaterfall-section border-bottom:2px solid #ccc`만 덮는 1행으로 축소. */
#gnbwaterfall-section { border-bottom: 0 !important; }

/* M-2: DevTools 모바일 뷰 방어적 숨김 — 실모바일은 G5_IS_MOBILE 분기로 별도 head
   임시방편. 정식 검토는 Day 3~4 head.sub.php 분기 트랙에서 */
@media (max-width: 1023px) {
  #gnbwaterfall { display: none !important; }
}
/* 네비 텍스트 — 히어로 구간: 흰색 / 스크롤 후: 네이비 */
a.gnbwaterfall-mainmenu,
#gnbwaterfall a.gnbwaterfall-mainmenu {
  /* 24차 Phase A P1 (2026-04-20): 한영 2단 라벨 — flex column */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin: 0 !important;                  /* R-029: 원본 gnbwaterfall.css:8 margin:36px 0 잔재 제거 */
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: rgba(255, 255, 255, 0.92) !important;
  text-decoration: none !important;      /* R-025 §6 옵션 2: default.css:28 underline 제거 */
  transition: color var(--duration-fast) var(--ease-out);
  white-space: nowrap;
  line-height: 1.2;
}
/* 영문 보조 라벨 — PC 전용 */
.gnb-item__en {
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 500;
  opacity: 0.55;
  text-transform: uppercase;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.gnb-item__ko {
  font-size: 14px;
  font-weight: 500;
  opacity: 0.95;
  transition: opacity var(--duration-fast) var(--ease-out);
}
a.gnbwaterfall-mainmenu:hover .gnb-item__en { opacity: 0.85; }
a.gnbwaterfall-mainmenu:hover .gnb-item__ko { opacity: 1; }
/* 태블릿 이하 영문 숨김 (데스크톱 gnb 자체가 ≤1199 숨김이므로 1024까진 영향 없으나 안전장치) */
@media (max-width: 1024px) {
  .gnb-item__en { display: none; }
}
a.gnbwaterfall-mainmenu:hover,
#gnbwaterfall a.gnbwaterfall-mainmenu:hover {
  color: #fff !important;
}
/* 21차 P2 (2026-04-20): sticky dark 채택 — scrolled 상태도 다크 유지.
   기존 navy 텍스트 override 폐기, 흰 텍스트 일관. */
#gnbwaterfall.gnb--scrolled a.gnbwaterfall-mainmenu {
  color: #fff !important;
}
#gnbwaterfall.gnb--scrolled a.gnbwaterfall-mainmenu:hover {
  color: var(--color-primary-300) !important;
}

/* GNB 서브메뉴: 강제 숨김 + 높이 고정
   (b) JS 애니메이션 복원 — !important 제거해 inline style 승 (R-015 증상 3 조치)
   (a) .gnbwaterfall-submenu 도 기본 숨김 + .on 상태에서만 노출 (R-015 증상 2 조치) */
#gnbwaterfall-section {
  height: 80px;
  overflow: visible;
}
#gnbwaterfall-wrap .gnbwaterfall-guide {
  position: absolute; top: 100%; left: 0; min-width: 220px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-xl); padding: var(--space-2) 0; z-index: var(--z-dropdown);
  display: none !important; /* gnbwaterfall.css 원본 specificity 대응 */
}
#gnbwaterfall-wrap li.on .gnbwaterfall-guide {
  /* R-029: 원래 display:block이었으나 submenu와 분리돼 우상단 흰 막대 노출(75px 우측 튀어나옴) →
     숨김. guide는 빈 div라 기능 손실 0. R-025 라운드에서 PHP 템플릿/HTML 완전 제거 검토. */
  display: none !important;
}
/* R-028 (B): 어제 롤백 5건 중 1·2·3·4 재도입 — hover 플리커 해소 + 박스 폴리싱
   1(height auto): R-020 박스 세로 과도 해소
   2(position absolute + top:100% + left:0): 가설 A 본체, R-026 덮어씌움 해소
   3(min-width 220px): R-019 한글 잘림 해소
   4(배경·border·radius·shadow·padding): 시각 가독성
   5(hover 강조색)는 c-2 다크 통일과 직접 연관 → R-025 라운드에서 결정 */
/* R-025 시나리오 X 채택 (2026-04-18):
   §1 (c) 2-state 톤: 히어로 구간 다크 / 스크롤 후 라이트 (헤더와 동기)
   §3 B 미니멀+micro: opacity+translateY(-8px) fade 등장 (stagger 없음)
   §5 padding: 박스 4px 통일 (R-020 해소)
   display 토글 → opacity/visibility/pointer-events로 전환 (fade 가능)
   backdrop-filter 처리 (Ryan 3-1 (c) 절충):
     - 다크 기본 = blur 유지 (히어로 수상 사진 위 텍스트 가독성 기능적 정당화)
     - 라이트 .gnb--scrolled = blur 제거 (단색 흰 + 그림자, X 미니멀 순수) */
.gnbwaterfall-submenu {
  display: block !important;             /* 항상 block — 표시 토글은 opacity로 */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;                  /* R-029 수평: 1급 텍스트 중앙 기점 */
  transform: translateX(-50%) translateY(-8px);  /* 기본: 8px 위에서 대기 */
  height: auto !important;
  min-width: 220px;
  /* 히어로 구간 = 다크 기본 — blur는 사진 위 텍스트 가독 기능
     !important: 원본 gnbwaterfall.css:12 #gnbwaterfall-wrap li.on 셀렉터(0,1,3)
     specificity 역전 — background:#f8f8f8 + border-left/right:#eeeeee 잔재 덮기 */
  background: rgba(15, 23, 42, 0.92) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.4);
  padding: var(--space-1) 0;             /* §5: 박스 4px */
  transition: opacity 200ms var(--ease-out),
              transform 200ms var(--ease-out),
              visibility 0ms 200ms,
              background var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out);
  z-index: var(--z-dropdown);
}

/* 21차 P2 (2026-04-20): scrolled submenu도 다크 유지 (gnb 본체와 일관). */
#gnbwaterfall.gnb--scrolled .gnbwaterfall-submenu {
  background: rgba(15, 23, 42, 0.92) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.4);
}

/* .on 상태 = 등장 (fade + translateY) */
#gnbwaterfall-wrap li.on .gnbwaterfall-submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 200ms var(--ease-out),
              transform 200ms var(--ease-out),
              visibility 0ms 0ms,
              background var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out);
}
/* R-028 가설 A: 1급 li에 position:relative 선행 — submenu의 absolute 기준점.
   R-029: li 높이를 나브(80px)와 일치시켜 submenu top:100%가 나브 바닥에 정확 부착.
   a 텍스트는 flex로 수직 중앙 정렬. */
#gnbwaterfall-container > ul > li {
  position: relative;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;      /* R-029 수평 정렬 보정: 원본 li width:140px 유지하되 a를 li 정중앙에 정렬 → 텍스트 중심 = li 중심 = submenu 중심 */
}
.gnbwaterfall-guide a {
  display: block; padding: var(--space-3) var(--space-5); font-size: var(--text-sm); color: var(--color-text-primary);
}
.gnbwaterfall-guide a:hover { background: var(--color-surface-alt); color: var(--color-primary-600); }

/* R-025 X: 드롭다운 항목 2-state + hover 배경 tint (§2 옵션 1)
   원본 gnbwaterfall.css:10 (color #767676 padding:5px) + :11 (hover #ab7777) 덮어쓰기 */
.gnbwaterfall-submenu a {
  display: block;
  padding: var(--space-4) var(--space-5);      /* §5: 16·20px */
  min-height: 44px;                             /* 터치 타겟 + 세로 여백 자연 확보 */
  font-size: var(--text-sm);
  text-decoration: none !important;
  color: rgba(255, 255, 255, 0.85) !important; /* 다크 기본 */
  /* Sprint H C-2 (2026-04-22): hover 배경에 라운드 pill 형태 적용. */
  margin: 2px var(--space-2);
  border-radius: 8px;
  transition: color var(--duration-fast),
              background var(--duration-fast);
}

/* 히어로 구간 hover = 다크 배경 tint */
.gnbwaterfall-submenu a:hover {
  background: rgba(255, 255, 255, 0.08) !important; /* 원본 #ab7777 덮기, 0.06→0.08 */
  color: #fff !important;
}
.gnbwaterfall-submenu a:focus-visible {
  outline: 2px solid rgba(96, 165, 250, 0.55);
  outline-offset: -2px;
}

/* 21차 P2 (2026-04-20): scrolled submenu 링크도 다크 일관 */
#gnbwaterfall.gnb--scrolled .gnbwaterfall-submenu a {
  color: rgba(255, 255, 255, 0.85) !important;
}
#gnbwaterfall.gnb--scrolled .gnbwaterfall-submenu a:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}


/* ========================================
   HERO — 풀스크린 다크 + poster/비디오
   ======================================== */

.dbg-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  color: #fff;
  overflow: hidden;
}

/* 24차 P0 (2026-04-20): YouTube iframe 히어로 — video-bg + poster fallback */
.dbg-hero__video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;   /* 상단 카피·링크 클릭 차단 방지 */
}
.dbg-hero__video-bg iframe,
.dbg-hero__video-bg #dbg-hero-player {
  position: absolute;
  top: 50%; left: 50%;
  width: 100vw;
  height: 56.25vw;         /* 16:9 기준 width 100vw일 때 높이 */
  min-width: 177.78vh;     /* viewport 세로 길 때 iframe 가로 보정 (16/9) */
  min-height: 100vh;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border: 0;
}
.dbg-hero__poster {
  position: absolute;
  inset: 0;
  z-index: 1;               /* iframe 위에 덮여있다가 fade out */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: opacity 800ms ease-out;
  opacity: 1;
  pointer-events: none;
}

/* 레거시 .dbg-hero__media / .dbg-hero__video 셀렉터 호환 (사용 중이면 유지) */
.dbg-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.dbg-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 좌측 텍스트 가독성 + 우측 인물 노출 밸런스 */
.dbg-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(15,23,42,0.85) 0%, rgba(15,23,42,0.5) 40%, rgba(15,23,42,0.2) 70%, transparent 100%),
    linear-gradient(180deg, rgba(15,23,42,0.4) 0%, transparent 40%, rgba(15,23,42,0.6) 100%);
}

/* 히어로 텍스트 좌측 하단 배치 — 인물 얼굴 영역(중앙~우측) 침범 금지 */
.dbg-hero__inner {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  text-align: left;
  padding: var(--space-16) var(--space-6) var(--space-20);
  max-width: var(--container-xl);
  margin: 0 auto;
}
@media (min-width: 768px) {
  .dbg-hero__inner {
    padding: var(--space-16) var(--space-container) var(--space-20);
    max-width: 55%; /* 좌측 절반만 사용, 우측은 사진 인물 영역 */
  }
}
@media (min-width: 1024px) {
  .dbg-hero__inner { max-width: 50%; }
}

.dbg-hero__eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  margin-bottom: var(--space-6);
}

.dbg-hero__title {
  font-size: var(--text-display-sm);            /* P0-2: 40px 모바일 */
  font-weight: var(--weight-extrabold);
  line-height: 1.15;
  letter-spacing: var(--letter-spacing-display); /* P0-1: -0.04em (Direction §7) */
  margin: 0 0 var(--space-6);
  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
@media (min-width: 768px) { .dbg-hero__title { font-size: var(--text-display-md); } }
@media (min-width: 1024px) { .dbg-hero__title { font-size: var(--text-display-lg); } }

.dbg-hero__subtitle {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.75);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-12);
}
@media (min-width: 768px) { .dbg-hero__subtitle { font-size: var(--text-xl); } }

.dbg-hero__cta { display: flex; gap: var(--space-4); justify-content: flex-start; flex-wrap: wrap; }

.dbg-hero__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: rgba(255,255,255,0.7);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  margin-top: var(--space-8);
  /* Sprint H C-4 (2026-04-22): 히어로 CTA 마이크로 인터랙션 강화.
     hover translateX + icon drift + focus-visible 명시. */
  transition:
    color var(--duration-fast) var(--ease-out),
    gap var(--duration-fast) var(--ease-out),
    transform 0.2s var(--ease-out);
  will-change: transform;
}
.dbg-hero__link:hover {
  color: #fff;
  gap: var(--space-3);
  transform: translateX(4px);
}
.dbg-hero__link:hover i,
.dbg-hero__link:hover .arrow,
.dbg-hero__link:hover svg {
  transform: translateX(2px);
  transition: transform 0.2s var(--ease-out);
}

.dbg-hero__scroll {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(255,255,255,0.4);
  text-align: center;
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  animation: dbg-bounce 2s infinite;
}
.dbg-hero__scroll i { display: block; font-size: var(--text-lg); margin-top: var(--space-1); }

@keyframes dbg-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

.dbg-br-desktop { display: none; }
@media (min-width: 768px) { .dbg-br-desktop { display: inline; } }


/* ========================================
   Buttons
   ======================================== */

.dbg-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-4) var(--space-10);
  font-size: var(--text-base); font-weight: var(--weight-semibold);
  border-radius: var(--radius-md);
  transition: all var(--duration-normal) var(--ease-out);
  cursor: pointer; border: 2px solid transparent;
  text-decoration: none; min-height: 52px;
}

/* Canon 레드 CTA 분리 정책 (P0-7, Direction §5):
   Canon 레드는 인증·어워드·Honors Club 배지 전용으로 재정의.
   신규 CTA에 .dbg-btn--accent 사용 금지 — primary 계열(primary-500/700) 사용.
   현재 index.php 사용 0건. 정의는 인증 엠블럼 row(P1-4) 적용 대비 보존.
   향후 인증 배지 적용 시 .dbg-badge--honor 등 의미적 alias로 분리 검토. */
/* 9차 contrast audit 발견 (2026-04-20): 원본 레거시 `a:link, a:visited { color: #000 }`
   (default.css 또는 shop.css) 의 specificity (0,1,1) 가 `.dbg-btn--*` (0,1,0) 을 이기는
   bug — "원격지원 바로가기" 버튼이 블루 배경 위 검정 글씨로 렌더. !important 로 전면 방어. */
.dbg-btn--accent {
  background: var(--color-accent-500); color: #fff !important; border-color: var(--color-accent-500);
}
.dbg-btn--accent:hover {
  background: var(--color-accent-700); border-color: var(--color-accent-700); color: #fff !important;
  transform: translateY(-2px); box-shadow: 0 8px 25px rgba(188,0,36,0.3);
}

.dbg-btn--white {
  background: transparent; color: #fff !important; border-color: rgba(255,255,255,0.4);
}
.dbg-btn--white:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.7); color: #fff !important; }

.dbg-btn--primary {
  background: var(--color-primary-500); color: #fff !important; border-color: var(--color-primary-500);
}
.dbg-btn--primary:hover {
  background: var(--color-primary-700); border-color: var(--color-primary-700); color: #fff !important;
  transform: translateY(-1px); box-shadow: var(--shadow-md);
}

.dbg-btn--outline {
  background: transparent; color: var(--color-text-primary); border-color: var(--color-border-strong);
}
.dbg-btn--outline:hover { border-color: var(--color-primary-500); color: var(--color-primary-500); }

/* 9차 P0-1 (2026-04-20): 다크 섹션 위 outline 버튼 대비 확보
   Ryan 실측 "전체공지보기 검정 글씨" 버그 해소 — Playwright rgb 체크만으론 못 잡음 */
.dbg-section--dark .dbg-btn--outline {
  color: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.25);
}
.dbg-section--dark .dbg-btn--outline:hover {
  color: var(--color-primary-900);
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.95);
}


/* ========================================
   Sections
   ======================================== */

.dbg-landing { --section-py: 10rem; }

.dbg-container {
  width: 100%; max-width: var(--container-xl); margin: 0 auto; padding: 0 var(--space-6);
}
@media (min-width: 768px) { .dbg-container { padding: 0 var(--space-container); } }

.dbg-section {
  padding: var(--section-py) 0;
  /* P0-A (평가 이월, 2026-04-19): 뷰포트 단위 섹션 — "다음 섹션 미리 보임" 해소
     각 섹션이 최소 1화면 차지 → 스크롤 1회 = 섹션 1개 전환 (bmsmile/samsungsds 패턴) */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dbg-section--alt { background: var(--color-surface-alt); }
.dbg-section--accent { background: var(--color-surface-accent); }
.dbg-section--dark { background: var(--color-primary-900); color: #fff; }

.dbg-section__number {
  display: block;
  font-size: var(--text-section-number);          /* P0-2: 96px */
  font-weight: var(--weight-extrabold);
  color: var(--color-primary-100);
  line-height: 1;
  margin-bottom: var(--space-1);
  letter-spacing: -0.05em;
  opacity: 0.7;
}
.dbg-section--dark .dbg-section__number { color: rgba(255,255,255,0.06); }
.dbg-section--accent .dbg-section__number { color: var(--color-primary-200); opacity: 0.5; }

.dbg-section__title {
  font-size: var(--text-2xl); font-weight: var(--weight-bold);
  line-height: var(--leading-tight); margin: 0 0 var(--space-4); letter-spacing: -0.02em;
}
@media (min-width: 768px) { .dbg-section__title { font-size: 2.5rem; } }

.dbg-section__desc {
  font-size: var(--text-lg); color: var(--color-text-secondary);
  max-width: 560px; margin: 0 0 var(--space-16); line-height: var(--leading-normal);
}
.dbg-section--dark .dbg-section__desc { color: rgba(255,255,255,0.55); }

.dbg-section__more { text-align: center; margin-top: var(--space-12); }


/* ========================================
   Cards
   ======================================== */

.dbg-cards { display: grid; gap: var(--space-8); }
.dbg-cards--2col { grid-template-columns: 1fr; }
.dbg-cards--3col { grid-template-columns: 1fr; }
/* 19차 P0: 섹션 01 2x2 그리드 */
.dbg-cards--2x2 { grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 768px) {
  .dbg-cards--2col { grid-template-columns: 1fr 1fr; }
  .dbg-cards--3col { grid-template-columns: 1fr 1fr 1fr; }
  .dbg-cards--2x2 { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
}

.dbg-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-10);
  transition: box-shadow var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
  display: flex; flex-direction: column; height: 100%;
}
.dbg-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } /* P0-3: subtle lift (Direction §4 절제) */
.dbg-card__text { flex: 1; }

.dbg-card--glass {
  background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

.dbg-card__icon {
  /* 14차 P3 (2026-04-20): 기본값을 primary-500 아이콘 + rgba(59,130,246,0.15) blue-500/15% 배지로 명시.
     13차 풀샷에서 카드 아이콘이 흰 사각형으로 보이던 원인 = primary-50 너무 옅음 → 15% 오퍼시티로 강화. */
  width: var(--card-icon-size, 64px); height: var(--card-icon-size, 64px);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--card-icon-bg, rgba(59, 130, 246, 0.15));
  color: var(--card-icon-color, var(--color-primary-500));
  font-size: 1.75rem; margin-bottom: var(--space-6);
  transition: transform var(--duration-normal) var(--ease-out),
              background var(--duration-normal) var(--ease-out);
}
/* 15차 P1 (2026-04-20): 다크 배경 섹션(01·04·05·07) 아이콘 primary 톤 적용.
   14차 흰사각(흰 배경+흰 아이콘) 구분 부재 문제 해결 — primary-400 tint로 대비 확보 */
.dbg-section--bg-image .dbg-card__icon,
.dbg-section--dark-gradient .dbg-card__icon,
.dbg-section--dark .dbg-card__icon {
  background: rgba(59, 130, 246, 0.20);
  color: #60A5FA;
}
.dbg-card:hover .dbg-card__icon {
  transform: scale(1.05);
}

.dbg-card__logo { height: 44px; width: auto; object-fit: contain; margin-bottom: var(--space-6); }

/* 23차 P3 (2026-04-20): 섹션 01 카드 사용처 예시 1줄 */
.dbg-card__examples {
  margin: var(--space-2) 0 var(--space-4);
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
  letter-spacing: 0.01em;
}

/* 19차 P0 (2026-04-20): 카드 영문 보조 라벨(eyebrow) */
.dbg-card__eyebrow {
  display: block;
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary-600);
  margin: 0 0 var(--space-2);
}
.dbg-section--bg-image .dbg-card__eyebrow,
.dbg-section--dark-gradient .dbg-card__eyebrow,
.dbg-section--dark .dbg-card__eyebrow {
  color: rgba(255,255,255,0.55);
}

.dbg-card__title {
  font-size: 1.35rem; font-weight: var(--weight-bold); margin: 0 0 var(--space-3); letter-spacing: -0.01em;
}
.dbg-card__text {
  font-size: var(--text-base); color: var(--color-text-secondary);
  line-height: var(--leading-normal); margin: 0 0 var(--space-6);
}
.dbg-card--glass .dbg-card__text { color: rgba(255,255,255,0.6); }

.dbg-card__link {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-primary-500);
  transition: gap var(--duration-fast) var(--ease-out);
}
.dbg-card--glass .dbg-card__link { color: var(--color-primary-200); }
.dbg-card__link:hover { gap: var(--space-2); color: var(--color-primary-700); }


/* ========================================
   02 Solutions — 스플릿 + 비주얼 채움
   ======================================== */

.dbg-solutions-split { display: grid; grid-template-columns: 1fr; gap: var(--space-10); }
@media (min-width: 1024px) { .dbg-solutions-split { grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; } }

.dbg-solutions-visual {
  background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-primary-100) 100%);
  border-radius: var(--radius-xl); padding: var(--space-12);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 400px; gap: var(--space-8);
}

.dbg-solutions-visual__icons {
  display: flex; gap: var(--space-8); align-items: center;
}
.dbg-solutions-visual__item {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  padding: var(--space-6); background: var(--color-surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); min-width: 100px;
}
.dbg-solutions-visual__item i { font-size: 2.5rem; color: var(--color-primary-500); }
.dbg-solutions-visual__item span { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--color-primary-700); }

.dbg-solutions-visual__flow {
  display: flex; align-items: center; gap: 0; margin-top: var(--space-2);
}
.dbg-flow-dot {
  width: 12px; height: 12px; border-radius: 50%; background: var(--color-primary-400);
}
.dbg-flow-line {
  width: 60px; height: 2px; background: var(--color-primary-300);
}

.dbg-solutions-list { display: flex; flex-direction: column; gap: var(--space-6); }
.dbg-solution-item {
  padding: var(--space-6); border-radius: var(--radius-md);
  border: 1px solid var(--color-border); background: var(--color-surface);
  transition: all var(--duration-normal) var(--ease-out);
}
.dbg-solution-item:hover { border-color: var(--color-primary-300); box-shadow: var(--shadow-sm); transform: translateX(4px); }
.dbg-solution-item h3 { font-size: var(--text-lg); font-weight: var(--weight-bold); margin: 0 0 var(--space-2); }
.dbg-solution-item p { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0 0 var(--space-3); }


/* ========================================
   03 Stats — 큰 숫자
   ======================================== */

/* P1 섹션 03 본 리디자인 (2026-04-19):
   Canon Honors Club 배지(상단) + 4 stat(95분기 featured) + 인증 엠블럼 6 row.
   Direction §1 클래식 B2B + §5 Canon 레드 정체성 증폭 + IP 뻥튀기 통합 적용. */
.dbg-stats {
  display: grid;
  grid-template-columns: repeat(2,1fr);    /* 모바일 2 */
  gap: var(--space-6);
  text-align: center;
  max-width: 1120px;
  margin: 0 auto;
}
/* 15차 P4: 옵션 B — 4열 → 2열 grid로 전환. 각 stat이 더 큰 공간 확보 → 숫자 재확대 가능.
   minmax(0,1fr)로 min-content expansion 차단 (숫자가 컨테이너 확장시키는 것 방지) */
@media (min-width: 768px) { .dbg-stats { grid-template-columns: repeat(2,minmax(0,1fr)); } }

.dbg-stat {
  padding: var(--space-10) var(--space-6);
  background: var(--color-surface); border-radius: var(--radius-lg);
  /* 17차 P3 (2026-04-20): bg-light 배경 대비 그림자 한 단계 약화. */
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
}
.dbg-stat:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
/* featured stat (95분기) — R2 Canon 레드 제거, primary 블루 internal 차별화
   (Direction §5 한 점 집중 = Canon 레드는 Honors Club 배지 전용) */
.dbg-stat--featured {
  background: var(--color-primary-50);
  border: 2px solid var(--color-primary-300);
  /* 17차 P3: 파란 글로우 완화 — blur 16→12, opacity 0.10→0.07 */
  box-shadow: 0 3px 12px rgba(37,99,235,0.07);
}
.dbg-stat--featured .dbg-stat__number { color: var(--color-primary-700); }
/* 16차 P3 (2026-04-20): 단위(분기/년/대/곳) 색상 4개 카드 통일.
   featured override(primary-700) 제거 → 4개 전부 primary-400. font/margin/alignment은 이미 균일. */
.dbg-stat--featured .dbg-stat__label::before {
  content: "★ ";
  color: var(--color-primary-600);
  font-weight: var(--weight-bold);
}
/* 숫자+단위를 하나의 시각 덩어리로 — figure wrapper + baseline 정렬 */
.dbg-stat__figure {
  display: inline-flex; align-items: baseline; justify-content: center;
  gap: 0.08em; line-height: 1;
}
.dbg-stat__number {
  /* 15차 P4 (2026-04-20): 옵션 B — 2열 grid 전환 (4열에서 overflow — 옵션 A 실패).
     card width ~548 - padding 48 = 500 content area. "2,750"(5자) 기준 상한 조정.
     clamp(2.75rem, 12vw, 11rem)(176px) → "2,750" ≈ 506→500 근접, card 내부 수렴.
     bmsmile 200px 수준에 근접 (14차 128px 대비 +37%). */
  font-size: clamp(2.75rem, 12vw, 11rem);
  font-weight: var(--weight-extrabold);
  color: var(--color-primary-600); line-height: 1;
}

.dbg-stat__unit { font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--color-primary-400); }
.dbg-stat__label {
  display: block; font-size: var(--text-base); /* P0-6: text-sm 14px → text-base 16px (S-04 라벨 타이포 상향) */
  color: var(--color-text-secondary);
  margin-top: var(--space-3); font-weight: var(--weight-semibold); /* P0-6: medium → semibold */
}

/* Canon Honors Club 배지 — Direction §5 정체성 증폭 (Canon 레드 한 점)
   R1 강화: eyebrow + pill 크기 1.5~2배 확대, 시각 위계 최상위 */
.dbg-honor-badge-wrap {
  text-align: center;
  margin: var(--space-2) 0 var(--space-10);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.dbg-honor-eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  opacity: 0.75;
}
.dbg-honor-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-10);
  background: var(--color-accent-500);
  color: #fff;
  border-radius: var(--radius-full);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: -0.015em;
  box-shadow: 0 10px 32px rgba(188,0,36,0.32),
              0 2px 6px rgba(188,0,36,0.18);
}
.dbg-honor-badge i {
  font-size: 1.4em;
  color: rgba(255,255,255,0.98);
}

/* 인증 엠블럼 row — 로고 파레이드 (IP 뻥튀기) */
.dbg-trust-badges-wrap {
  margin-top: var(--space-16);
  padding-top: var(--space-12);
  border-top: 1px solid var(--color-border);
}
.dbg-trust-badges {
  display: grid;
  grid-template-columns: 1fr;             /* 모바일 1 (3개 카드 세로 나열) */
  gap: var(--space-5);
  max-width: 880px;
  margin: 0 auto;
}
@media (min-width: 640px) { .dbg-trust-badges { grid-template-columns: repeat(3,1fr); } }

.dbg-trust-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-7) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none !important;
  transition: box-shadow var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.dbg-trust-badge:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--color-primary-300);
}
.dbg-trust-badge img {
  width: 100%;
  max-height: 130px;
  height: auto;
  object-fit: contain;
  /* R3 라운드 2 (가+다 혼합): 정제된 브랜드 엠블럼 3개만 유지 + 은은한 grayscale 60%
     원본 컬러 대비 통일감 + hover 시 100% 컬러 복원 (상호작용 재미) */
  filter: grayscale(60%);
  transition: filter var(--duration-normal) var(--ease-out);
}
.dbg-trust-badge:hover img {
  filter: grayscale(0);
}
.dbg-trust-badge span {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  text-align: center;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.dbg-trust-badges__footer {
  text-align: center;
  margin: var(--space-10) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.dbg-trust-badges__footer a {
  color: var(--color-primary-600);
  font-weight: var(--weight-semibold);
  text-decoration: none !important;
  margin-left: var(--space-2);
}
.dbg-trust-badges__footer a:hover {
  color: var(--color-primary-700);
}


/* 04 Gallery Preview — 사용처 0건 dead rule, v2.0 cleanup 제거 (2026-04-25) */

.dbg-gallery-thumb {
  aspect-ratio: 4/3; background: var(--color-neutral-100);
  border-radius: var(--radius-lg); overflow: hidden; display: block;
}
.dbg-gallery-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}
.dbg-gallery-thumb:hover img { transform: scale(1.06); }


/* 14차 P6 (2026-04-20): 섹션 04 RESOURCES alternating rows
   — 섹션 02 패턴 이식. 2+2 구조로 bmsmile 케이스 스터디 느낌.
   lg(비대칭 큰) + sm(비대칭 작은) 조합으로 리듬 생성. --reverse로 짝수행 좌우 스왑. */
.dbg-resources-rows {
  display: flex; flex-direction: column; gap: var(--space-8);
  margin-top: var(--space-10);
}
.dbg-resources-row {
  display: grid; grid-template-columns: 1fr; gap: var(--space-5);
}
@media (min-width: 768px) {
  .dbg-resources-row { grid-template-columns: 1.6fr 1fr; align-items: stretch; }
  .dbg-resources-row--reverse > .dbg-resources-row__item:first-child { order: 2; }
}
.dbg-resources-row__item {
  display: block; overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--color-neutral-100);
  width: 100%; min-width: 0;
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
}
.dbg-resources-row__item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  aspect-ratio: 16/10;
  /* 15차 P3: 세로로 과도하게 길어지는 것 방지 — 섹션 04 전체 높이 균형 */
  max-height: 400px;
  transition: transform var(--duration-slow) var(--ease-out);
}
/* 2026-05-29: 기존 item aspect-ratio+max-height가 폭을 640px로 강제 → grid 셀(1fr) 초과 overflow.
   item은 셀을 채우고(width:100%) 16/10 비율·높이 제한은 img가 담당하도록 이전. */
.dbg-resources-row__item {
  height: 100%;
}
.dbg-resources-row__item:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.dbg-resources-row__item:hover img { transform: scale(1.05); }


/* ========================================
   Contact
   ======================================== */

.dbg-contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); text-align: center; margin-bottom: var(--space-16); }
@media (min-width: 768px) { .dbg-contact-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }

.dbg-contact-item {
  padding: var(--space-10); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); background: var(--color-surface);
  transition: box-shadow var(--duration-normal) var(--ease-out);
}
.dbg-contact-item:hover { box-shadow: var(--shadow-md); }
.dbg-contact-item i { font-size: 2rem; color: var(--color-primary-500); margin-bottom: var(--space-5); display: block; }
.dbg-contact-item h3 { font-size: var(--text-lg); font-weight: var(--weight-bold); margin: 0 0 var(--space-4); }

.dbg-contact__phone { font-size: 2rem; font-weight: var(--weight-extrabold); color: var(--color-primary-600); }
.dbg-contact__phone:hover { color: var(--color-primary-500); }

.dbg-contact-locations { text-align: center; }
.dbg-contact-locations h3 { font-size: var(--text-xl); font-weight: var(--weight-bold); margin-bottom: var(--space-8); }
.dbg-cards--locations { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
.dbg-location-link {
  display: inline-block; padding: var(--space-3) var(--space-6);
  border: 1px solid var(--color-border); border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-primary);
  transition: all var(--duration-fast) var(--ease-out);
}
.dbg-location-link:hover { background: var(--color-primary-500); color: #fff; border-color: var(--color-primary-500); }


/* ========================================
   Footer
   ======================================== */

#ft { background: var(--color-primary-900); color: var(--color-neutral-400); padding: var(--space-20) 0 var(--space-8); }
#ft_copy { max-width: var(--container-xl); margin: 0 auto; padding: 0 var(--space-6); }

.dbg-footer-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-10);
  padding-bottom: var(--space-12); border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: var(--space-8);
}
@media (min-width: 768px) { .dbg-footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
/* Phase B-3 Sprint 2 P44: 4컬럼 (brand 2배 + 서비스 + 자료실 + 연락처) */
@media (min-width: 1024px) { .dbg-footer-grid { grid-template-columns: 2fr 1fr 1fr 1.2fr; } }

.dbg-footer-badges {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: var(--space-4);
}
.dbg-footer-badge {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  font-size: 12px;
  color: rgba(203, 213, 225, 0.8);
  letter-spacing: -0.01em;
}

.ft_logo { margin-bottom: var(--space-4); }
/* 22차 P1: 푸터 로고 — 신규 db_logo_header.svg (600×120, 5:1). height 64px → width 320px */
.ft_logo img { height: 64px; width: auto; opacity: 0.92; }

.dbg-footer-desc { font-size: var(--text-sm); color: var(--color-neutral-500); line-height: var(--leading-normal); margin: 0; }

.dbg-footer-heading {
  font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-neutral-200);
  text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 var(--space-4);
}

.dbg-footer-links { list-style: none; margin: 0; padding: 0; }
.dbg-footer-links li { margin-bottom: var(--space-2); }
.dbg-footer-links a { color: var(--color-neutral-400); font-size: var(--text-sm); }
.dbg-footer-links a:hover { color: #fff; }

.dbg-footer-contact { font-size: var(--text-sm); line-height: 2; margin: 0; }
.dbg-footer-contact strong { color: var(--color-neutral-300); margin-right: var(--space-2); }
.dbg-footer-contact a { color: var(--color-neutral-400); }
.dbg-footer-contact a:hover { color: #fff; }

/* 18차 P9 (2026-04-20): 본사·지사 주소 카드 (섹션 07 오시는 길) */
.dbg-address-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  max-width: 1120px;
  margin: 0 auto var(--space-8);
}
@media (min-width: 768px) {
  .dbg-address-cards { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
.dbg-address-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-5);
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  text-decoration: none;
  text-align: left;
  color: var(--color-text-primary);
  transition: box-shadow var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
}
.dbg-address-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.dbg-address-card__label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary-600);
}
.dbg-address-card__name {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}
.dbg-address-card__addr {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

/* 19차 P1 (2026-04-20): 섹션 07 다크 시네마 배경 대응 — 주소 카드 glass morphism.
   .dbg-contact-item glass 패턴(14차 P3) 동일 이식. */
.dbg-section--bg-image .dbg-address-card {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  color: #fff;
}
.dbg-section--bg-image .dbg-address-card:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.25) !important;
  box-shadow: none;
}
.dbg-section--bg-image .dbg-address-card__label {
  color: rgba(255,255,255,0.75);
}
.dbg-section--bg-image .dbg-address-card__name { color: #fff; }
.dbg-section--bg-image .dbg-address-card__addr { color: rgba(255,255,255,0.70); }

/* 18차 P8 (2026-04-20): 영업시간 보조 표기 */
.dbg-footer-hours {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.40);
  margin: var(--space-4) 0 0;
  line-height: var(--leading-normal);
}

/* 섹션 07 전화 아래 점심·휴무 보조 텍스트 */
.dbg-contact__hours { margin-top: var(--space-3); }
.dbg-contact__hours-sub {
  display: inline-block;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
  opacity: 0.8;
}

/* Phase B-3 Sprint 2 P46: 최하단 정책 링크 + Copyright 정렬 */
.dbg-footer-bottom {
  text-align: center;
  padding-top: 8px;
}
.ft_copy_top {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 16px 0;
  flex-wrap: wrap;
  font-size: 13px;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.ft_copy_top a { color: var(--color-neutral-400); font-size: 13px; }
.ft_copy_top a:hover { color: #fff; }
.ft_copy_top strong { color: var(--color-neutral-200); }
/* 기존 span 구분자 "|" 제거 (gap으로 간격 처리) */
.ft_copy_top span { display: none; }

.ft_copy_bottom {
  color: var(--color-neutral-600);
  font-size: 12px;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 0 24px;
}
.ft_copy_bottom .ft_copy_bottom__text { opacity: 0.75; }
.ft_copy_bottom a.ft-admin-link {
  font-size: 11px;
  opacity: 0.4;
}

/* 27차 P2 (2026-04-20): 관리자 전용 미니 링크. 공개 방문자에겐 보이지 않게 숨김 수준.
   specificity 보강 — #ft_copy a {color:#fff} (default.css:133) 덮기 위해 #ft_copy prefix. */
#ft_copy a.ft-admin-link {
  font-size: 11px;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.25);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
  padding: 2px 6px;
  margin: 0;
}
#ft_copy a.ft-admin-link:hover { color: rgba(255,255,255,0.60); }
#ft_copy a.ft-admin-link + a.ft-admin-link { margin-left: var(--space-2); }

/* 18차 P7 (2026-04-20): 양 법인 법적 정보 블록.
   다크 푸터 톤 유지 — 라벨 0.40, 값 0.70 위계. 상하 분리 (768px+ 좌우). */
.dbg-footer-legal {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  padding: var(--space-8) 0;
  margin-top: var(--space-6);
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
@media (min-width: 768px) {
  .dbg-footer-legal { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
}
/* Phase B-3 Sprint 2 P45: 3단 재편성 (좌 법인 / 가운데 Canon 배지 / 우 법인) */
@media (min-width: 1024px) {
  .dbg-footer-legal { grid-template-columns: 1fr auto 1fr; gap: 40px; align-items: start; }
}

.dbg-footer-partnership {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 4px;
}
.dbg-canon-badge {
  text-align: center;
  padding: 16px 24px;
  border: 1px solid rgba(220, 38, 38, 0.28);
  border-radius: 12px;
  background: rgba(220, 38, 38, 0.05);
  min-width: 180px;
}
.dbg-canon-badge strong {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 24px;
  font-weight: 400;
  color: #DC2626;
  letter-spacing: 0.02em;
  line-height: 1;
  margin-bottom: 6px;
}
.dbg-canon-badge span {
  display: block;
  font-size: 11px;
  color: rgba(203, 213, 225, 0.65);
  letter-spacing: 0.06em;
  line-height: 1.5;
}
@media (max-width: 1023px) {
  .dbg-footer-partnership { order: 3; justify-content: flex-start; padding-top: 12px; }
}
.dbg-footer-legal__name {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: rgba(255,255,255,0.85);
  margin: 0 0 var(--space-3);
  letter-spacing: -0.01em;
}
.dbg-footer-legal__dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}
.dbg-footer-legal__dl dt {
  color: rgba(255,255,255,0.40);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.dbg-footer-legal__dl dd {
  color: rgba(255,255,255,0.70);
  margin: 0;
}
.dbg-footer-legal__dl dd a {
  color: var(--color-primary-300);
  font-size: var(--text-xs);
}
.dbg-footer-legal__dl dd a:hover { color: #fff; }


/* ========================================
   Latest
   ======================================== */

.dbg-latest { max-width: 800px; }
.dbg-notice-list { list-style: none; margin: 0; padding: 0; }
.dbg-notice-item { border-bottom: 1px solid var(--color-border); }
.dbg-notice-item a {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-5) var(--space-3); color: var(--color-text-primary);
  transition: background var(--duration-fast) var(--ease-out);
}
.dbg-notice-item a:hover { background: var(--color-surface-alt); }
.dbg-notice-item__title { font-size: var(--text-base); font-weight: var(--weight-medium); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: var(--space-4); }
.dbg-notice-item__date { font-size: var(--text-sm); color: var(--color-text-tertiary); flex-shrink: 0; }
.dbg-notice-empty { text-align: center; color: var(--color-text-secondary); padding: var(--space-10); }

/* 다크 섹션 위 공지 카드 (P0-B, 평가 이월 2026-04-19)
   리스트 → 카드형으로 승격: 배경 rgba + padding 확대 + hover 상향 */
/* Sprint L L-2 (2026-04-22): 06 UPDATES 1열 stack 구조. Ryan 직접 검토 결정. */
.dbg-section--dark .dbg-latest { max-width: 880px; margin: 0 auto; }
.dbg-section--dark .dbg-notice-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.dbg-section--dark .dbg-notice-item {
  border-bottom: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.dbg-section--dark .dbg-notice-item:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
}
.dbg-section--dark .dbg-notice-item a {
  padding: var(--space-5) var(--space-6);
  color: rgba(255, 255, 255, 0.95);
}
.dbg-section--dark .dbg-notice-item a:hover { background: transparent; }
.dbg-section--dark .dbg-notice-item__title { color: rgba(255, 255, 255, 0.95); }
.dbg-section--dark .dbg-notice-item__date { color: rgba(255, 255, 255, 0.55); }
.dbg-section--dark .dbg-notice-empty { color: rgba(255, 255, 255, 0.55); }


/* ========================================
   Animations
   ======================================== */

.dbg-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.dbg-reveal.is-visible { opacity: 1; transform: translateY(0); }
.dbg-reveal-delay-1 { transition-delay: 0.15s; }
.dbg-reveal-delay-2 { transition-delay: 0.3s; }
.dbg-reveal-delay-3 { transition-delay: 0.45s; }


/* ========================================
   Responsive
   ======================================== */

@media (max-width: 767px) {
  .dbg-landing { --section-py: 5rem; }
  .dbg-section__number { font-size: 4rem; }
  .dbg-stat__number { font-size: 2.5rem; }
  .dbg-solutions-visual__icons { flex-direction: column; gap: var(--space-4); }
  .dbg-solutions-visual__flow { display: none; }
  .dbg-solutions-visual { min-height: 280px; padding: var(--space-8); }
}


/* ========================================
   P0-5 prefers-reduced-motion — 접근성 (Direction §4)
   ========================================
   사용자가 모션 감소 환경 설정 활성화 시 모든 motion 무효화.
   .dbg-reveal은 opacity 1 강제로 즉시 표시 (R-030 (e)와 동일 효과). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .dbg-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* R-030 (e) Fullshot mode 룰 — v2.0 cleanup 제거 (2026-04-25)
   사유: HTTP_HOST 가드는 클라이언트 헤더 스푸핑 가능 → 보안 부족.
   풀샷 캡처 필요 시 dev 환경에서 일회성 코드 재추가 권장. */


/* ========================================
   Section Hero Block (P0-3, 2026-04-19 밤) — bmsmile IP 뻥튀기 패턴
   ========================================
   목적: 섹션 번호·영문 타이틀을 초대형으로 선언해 "기업 IP 전시장" 톤.
   공식:
     - .dbg-section-hero : 컨테이너 (flex row, 번호 좌측 + 타이틀 우측)
     - .dbg-section-hero__num : 연회색 초대형 섹션 번호 (01·02·…)
     - .dbg-section-hero__title : 영문 초대형 타이틀 (BUSINESS·SOLUTIONS·…)
     - .dbg-section-hero__title-sub : 한글 소제목 (옵션, 타이틀 하단)
   모바일 대응: 768px 미만에서 세로 스택 + 크기 축소. */
.dbg-section-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-16);
  line-height: 0.95;
}

@media (min-width: 768px) {
  .dbg-section-hero {
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-10);
  }
}

.dbg-section-hero__num {
  /* P1-1 (6차): clamp로 bmsmile 수준 무게 확보. 상한 13rem → 15rem */
  font-size: clamp(4.5rem, 16vw, 15rem);
  font-weight: var(--weight-medium);
  color: var(--color-neutral-200);
  letter-spacing: var(--letter-spacing-hero);
  line-height: 0.9;
  font-feature-settings: "tnum";
}

.dbg-section-hero__title {
  /* 15차 P5 (2026-04-20): 14차 12rem(192px)에서 overflow 없음 확인 → 13rem(208px)으로 미세 상향.
     BUSINESS 화면폭 75% → 80% 회복. bmsmile 90% 격차 재심. Pretendard 로딩 폴백은 13vw가 흡수.
     전수 overflow 검증 필수. */
  font-size: clamp(3rem, 13vw, 13rem);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  letter-spacing: var(--letter-spacing-hero);
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0;
}

/* 14차 P5 (2026-04-20): TRUST(5자)가 BUSINESS/SOLUTIONS(8~9자) 대비 작게 보이던 문제 보정.
   font-size 동일하나 글자 수 적어 횡폭이 작음 → letter-spacing 완화(-0.06em → -0.01em)로 시각 폭 확보.
   16차 P1 (2026-04-20): GROUP(5자)도 동일 이슈로 TRUST와 통합. 5자 영문 타이틀 일괄 처리. */
#dbg-trust .dbg-section-hero__title,
#dbg-group .dbg-section-hero__title {
  letter-spacing: -0.01em;
}

.dbg-section-hero__title-sub {
  display: block;
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-tight);
  margin-top: var(--space-3);
  text-transform: none;
}

@media (min-width: 768px) {
  .dbg-section-hero__title-sub {
    font-size: var(--text-2xl);
  }
}


/* ========================================
   Section Background Image (P0-3, 2026-04-19 밤) — 풀블리드 컨텍스트 배경
   ========================================
   목적: 서울 도심·오피스 스톡 이미지로 IP 뻥튀기 "도시 책임" 톤 연출.
   사용: .dbg-section.dbg-section--bg-image 조합, 배경 이미지는
         CSS custom property --section-bg-img 인라인 지정 (섹션별 다름).
   오버레이: 어두운 그라데이션으로 텍스트 가독성 확보 (WCAG AA 4.5:1). */
.dbg-section--bg-image {
  position: relative;
  isolation: isolate;
  color: var(--color-text-inverse);
  overflow: hidden;
}

.dbg-section--bg-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--section-bg-img, none);
  background-size: cover;
  background-position: center;
  z-index: -2;
}

.dbg-section--bg-image::after {
  content: "";
  position: absolute;
  inset: 0;
  /* 섹션별 인라인 --section-overlay-* custom property로 강도 조정 가능
     기본값은 강한 다크 (01/05/07에 적합), 04는 약하게 주입 필요 */
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, var(--section-overlay-start, 0.88)) 0%,
    rgba(15, 23, 42, var(--section-overlay-mid, 0.72)) 50%,
    rgba(15, 23, 42, var(--section-overlay-end, 0.82)) 100%
  );
  z-index: -1;
}


/* ========================================
   Section Light Overlay (6차 P0-1, 2026-04-19 밤)
   ========================================
   섹션 02·03처럼 밝은 톤 유지하며 배경 이미지 존재감만 희미하게 노출.
   배경 opacity 0.15 + 흰 오버레이 0.85. 텍스트는 검정 기본 유지. */
.dbg-section--bg-light {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.dbg-section--bg-light::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--section-bg-img, none);
  background-size: cover;
  background-position: center;
  opacity: var(--section-bg-opacity, 0.15);
  z-index: -2;
}

.dbg-section--bg-light::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, var(--section-light-alpha, 0.85));
  z-index: -1;
}

/* accent(연한 블루) + bg-light 조합 — 섹션 03 TRUST */
.dbg-section--accent.dbg-section--bg-light::after {
  background: rgba(239, 246, 255, var(--section-light-alpha, 0.80));  /* primary-50 톤 */
}


/* ========================================
   12차 복원 — 다크 어번 그라데이션 (섹션 02 SOLUTIONS 전용)
   ========================================
   bmsmile "No.1 Environment" 다크 시네마 톤 + 제품 이미지 floating 전제. */
.dbg-section--dark-gradient {
  position: relative;
  isolation: isolate;
  color: var(--color-text-inverse);
  overflow: hidden;
}
/* 다크 그라데이션 + 배경 이미지 합성 — 단일 layer로 블렌딩 보장
   12차 재구현: ::before z-index stacking 문제 해결을 위해 합성 방식 채택 */
.dbg-section--dark-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(15,23,42,0.88) 0%, rgba(30,41,59,0.82) 50%, rgba(15,23,42,0.90) 100%),
    var(--section-bg-img, none);
  background-size: cover, cover;
  background-position: center, center;
  z-index: -1;
}

/* 다크 그라데이션 내부 요소 색상 반전 */
/* Sprint H A-2 → Sprint I I-4 → Sprint J J-4 (2026-04-22): 3 dark variant 일관 spec.
   0.32→0.08 그라디언트 + @supports fallback 0.22. */
.dbg-section--dark-gradient .dbg-section-hero__num {
  color: rgba(255, 255, 255, 0.32);
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, 0.32) 0%,
    rgba(255, 255, 255, 0.08) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .dbg-section--dark-gradient .dbg-section-hero__num {
    color: rgba(255, 255, 255, 0.22) !important;
  }
}
.dbg-section--dark-gradient .dbg-section-hero__title,
.dbg-section--dark-gradient .dbg-solution-row__title {
  color: var(--color-text-inverse);
}
.dbg-section--dark-gradient .dbg-section-hero__title-sub,
.dbg-section--dark-gradient .dbg-section__desc {
  color: rgba(255, 255, 255, 0.70);
}

/* 46차 P193g (2026-04-21): .dbg-section--dark 동일 인버스 누락 → invisible 버그 수정.
   06 Updates (#dbg-news) + 07 Contact (#dbg-contact, P193e 배경 제거 후) 섹션
   bg rgb(15,23,42) + title color rgb(15,23,42) 동일 → 완전 invisible.
   평가자 Chrome MCP computed getComputedStyle 실측으로 재발견. */
/* Sprint H A-2 → Sprint I I-4 → Sprint J J-4 (2026-04-22): 3 dark variant 일관 spec.
   실 selector는 `.dbg-section-hero__num` (NOT __number). 평가자가 __number로 측정하여
   0건 오판했던 이력. 0.32→0.08 그라디언트 통일. */
.dbg-section--dark .dbg-section-hero__num {
  color: rgba(255, 255, 255, 0.32);
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, 0.32) 0%,
    rgba(255, 255, 255, 0.08) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .dbg-section--dark .dbg-section-hero__num {
    color: rgba(255, 255, 255, 0.22) !important;
  }
}
.dbg-section--dark .dbg-section-hero__title {
  color: var(--color-text-inverse);
}
.dbg-section--dark .dbg-section-hero__title-sub {
  color: rgba(255, 255, 255, 0.86);
}

/* Sprint J J-4 (2026-04-22): 03 Trust (bg-light) 별도 처리 — 검정 계열 그라디언트. */
.dbg-section--bg-light .dbg-section-hero__num {
  color: rgba(15, 23, 42, 0.24);
  background-image: linear-gradient(180deg,
    rgba(15, 23, 42, 0.24) 0%,
    rgba(15, 23, 42, 0.06) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .dbg-section--bg-light .dbg-section-hero__num {
    color: rgba(15, 23, 42, 0.18) !important;
  }
}
.dbg-section--dark-gradient .dbg-solution-row__desc {
  color: rgba(255, 255, 255, 0.75);
}
.dbg-section--dark-gradient .dbg-solution-row__num {
  color: rgba(255, 255, 255, 0.10);
}
.dbg-section--dark-gradient .dbg-card__link {
  color: rgba(255, 255, 255, 0.90);
}
.dbg-section--dark-gradient .dbg-card__link:hover {
  color: #fff;
}


/* ========================================
   제품 이미지 비주얼 (섹션 02 alternating row)
   ========================================
   아이콘 → 실제 제품 PNG 교체. 기존 .dbg-solution-row__visual은 카드 형태 프레임이었으나
   다크 배경 + 투명 PNG floating 맥락에선 프레임 제거. 이미지만 자연스럽게 배치 */
.dbg-section--dark-gradient .dbg-solution-row__visual {
  /* 14차 P2 (2026-04-20): 제품 PNG 작게 보이던 문제 해소 — max-width 320→520px.
     padding·aspect-ratio 삭제로 PNG 원본 비율 유지 + floating 맥락 자연스러움 복귀.
     16차 P2 (2026-04-20): 14차 P2의 max-width 520px이 grid column 240px 고정으로 dead code였음.
     아래 grid-template-columns 오버라이드로 실적용. Easy Cut(4:3) 특히 세로 확장 — "작아 보임" 해소. */
  background: transparent;
  border: 0;
  box-shadow: none;
  aspect-ratio: auto;
  max-width: 520px;
}
/* 16차 P2: grid column 240px 고정 해제 — visual max-width 520px 실적용 */
@media (min-width: 768px) {
  .dbg-section--dark-gradient .dbg-solution-row {
    grid-template-columns: auto 1fr minmax(0, 520px);
  }
  .dbg-section--dark-gradient .dbg-solution-row--reverse {
    grid-template-columns: minmax(0, 520px) 1fr auto;
  }
}
.dbg-solution-row__visual img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4));
}
/* Sprint H C-1 (2026-04-22): 제품 이미지 'Apple-style isolation' 스포트라이트.
   기존 카탈로그 마케팅 이미지를 교체하지 않고 배경만 강화.
   (Ryan 실사진 도착 시 본 스포트라이트는 그대로 동작, 그대로 유지) */
.dbg-section--dark-gradient .dbg-solution-row__visual {
  position: relative;
  isolation: isolate;
}
.dbg-section--dark-gradient .dbg-solution-row__visual::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  aspect-ratio: 1 / 1;
  background: radial-gradient(closest-side,
    rgba(96, 165, 250, 0.14) 0%,
    rgba(96, 165, 250, 0.04) 45%,
    rgba(96, 165, 250, 0) 72%);
  z-index: -1;
  pointer-events: none;
}
/* 17차 P1 (2026-04-20): Easy Cut PNG이 Printer/Scan 대비 차가운 톤.
   동일 다크 섹션 컨텍스트에서 3종 시각 균형 위해 hue/채도/밝기 미세 보정.
   drop-shadow 유지한 채 filter 추가 (filter는 덮어쓰므로 전부 재선언). */
.dbg-solutions-alt > .dbg-solution-row:nth-of-type(3) .dbg-solution-row__visual img {
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4))
          hue-rotate(-3deg) saturate(0.96) brightness(1.03);
}


/* ========================================
   인증 엠블럼 카드 래핑 (섹션 03 TRUST)
   ========================================
   "그림판" 수준 해소 — padding 32 + radius 12 + neutral-50 배경 균등 카드. */
.dbg-trust-badges {
  gap: var(--space-5);
}
.dbg-trust-badge {
  padding: var(--space-8);
  background: var(--color-neutral-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  transition: box-shadow var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
}
.dbg-trust-badge:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.dbg-trust-badge img {
  max-height: 150px;
  width: auto;
  object-fit: contain;
  filter: grayscale(40%);
  transition: filter var(--duration-normal) var(--ease-out);
}
.dbg-trust-badge:hover img {
  filter: grayscale(0);
}
.dbg-trust-badge span {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  text-align: center;
}


/* ========================================
   Glass morphism card (섹션 05 GROUP · 07 CONTACT)
   ========================================
   rgba .08 + blur 20 + saturate 160 + border rgba .15 + 3단 hierarchy
   섹션 07 .dbg-contact-item에 modifier 없이 selector로 덮어씀 */
.dbg-section--bg-image .dbg-contact-item {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: var(--radius-xl);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  padding: var(--space-10) var(--space-8);
}
.dbg-section--bg-image .dbg-contact-item:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}
.dbg-section--bg-image .dbg-contact-item i {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  width: 64px; height: 64px;
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--space-5);
  font-size: 1.5rem;
}
.dbg-section--bg-image .dbg-contact-item h3 {
  color: #fff;
  margin-bottom: var(--space-3);
}
.dbg-section--bg-image .dbg-contact-item p {
  color: rgba(255, 255, 255, 0.70);
}
.dbg-section--bg-image .dbg-contact__phone {
  color: #fff;
}
.dbg-section--bg-image .dbg-contact__phone:hover {
  color: rgba(255, 255, 255, 0.85);
}

/* 섹션 07 카드 eyebrow (3단 hierarchy — 아이콘/영문 라벨/정보) */
.dbg-contact-item__eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: var(--space-2);
}
/* 15차 P2: 섹션 07 다크 bg-image 내부 cascade에서 eyebrow가 덮이지 않도록 specificity 강화 */
.dbg-section--bg-image .dbg-contact-item__eyebrow,
.dbg-section--dark .dbg-contact-item__eyebrow {
  display: block;
  color: rgba(255, 255, 255, 0.72);
}


/* 섹션 05 GROUP 카드 glass — .dbg-card를 .dbg-section--bg-image 아래서 유리화
   (이미 기본 glass가 내부 .dbg-card에 적용됨 — 여기서 padding·radius만 강화) */
.dbg-section--bg-image .dbg-card {
  padding: var(--space-8);
  border-radius: var(--radius-xl);
}
/* Sprint H C-3 (2026-04-22): 디비이지 + 디지탈뱅크 로고 브랜드 컬러 복원.
   기존 filter: brightness(0) invert(1)은 컬러 로고를 흰 실루엣으로 평탄화 →
   평가자 실측 "회색 원 + 텍스트만"으로 오인. 다크 bg 위 가독성은 light 플레이트로 확보. */
.dbg-section--bg-image .dbg-card__logo {
  filter: none;
  opacity: 1;
  background: rgba(255, 255, 255, 0.97);
  padding: 10px 14px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  max-height: 62px;
}

/* 배경 이미지 섹션 내부 hero 텍스트 색상 반전 */
/* Sprint J J-4 (2026-04-22): dark 3 variants 일관 그라디언트 spec 통일.
   bg-image도 dark/dark-gradient와 동일 0.32→0.08 그라디언트 적용. */
.dbg-section--bg-image .dbg-section-hero__num {
  color: rgba(255, 255, 255, 0.32);
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, 0.32) 0%,
    rgba(255, 255, 255, 0.08) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .dbg-section--bg-image .dbg-section-hero__num {
    color: rgba(255, 255, 255, 0.22) !important;
  }
}

.dbg-section--bg-image .dbg-section-hero__title {
  color: var(--color-text-inverse);
}

.dbg-section--bg-image .dbg-section-hero__title-sub {
  color: rgba(255, 255, 255, 0.75);
}

/* 배경 이미지 섹션 전체 텍스트·카드 반전 (5차 regression 대응)
   다크 오버레이 위 기본 검정 텍스트 가독성 불가 → 흰색 계열 + 카드 반투명 처리 */
.dbg-section--bg-image .dbg-section__desc,
.dbg-section--bg-image .dbg-section__title,
.dbg-section--bg-image .dbg-solution-row__title,
.dbg-section--bg-image .dbg-card__title,
.dbg-section--bg-image .dbg-honor-eyebrow {
  color: rgba(255, 255, 255, 0.95);
}

.dbg-section--bg-image .dbg-solution-row__desc,
.dbg-section--bg-image .dbg-card__text {
  /* 20차 P2 (2026-04-20): 다크 배경 위 본문 가독성 강화. 0.75 → 0.85 */
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
}

.dbg-section--bg-image .dbg-solution-row__num {
  color: rgba(255, 255, 255, 0.2);
}

.dbg-section--bg-image .dbg-solution-row__visual {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dbg-section--bg-image .dbg-solution-row__visual i {
  color: rgba(255, 255, 255, 0.9);
}

/* P0-2 (6차, 2026-04-19 밤): specificity 강제 — !important로 기본 .dbg-card 배경 승 */
.dbg-section--bg-image .dbg-card {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}

.dbg-section--bg-image .dbg-card:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

/* 15차 P1: 후순위 cascade가 529 블록을 덮지 않도록 primary 톤 동기화 */
.dbg-section--bg-image .dbg-card__icon {
  background: rgba(59, 130, 246, 0.20);
  color: #60A5FA;
}

.dbg-section--bg-image .dbg-card__link {
  color: rgba(255, 255, 255, 0.9);
}

.dbg-section--bg-image .dbg-card__link:hover {
  color: #fff;
}


/* ========================================
   Section Transition Gradient (P0-3) — 섹션 간 극적 전환
   ========================================
   bmsmile의 white↔black 그라데이션 경계 차용. 섹션 끝/시작에
   .dbg-section-transition 블록을 삽입하거나 섹션에 직접 적용. */
.dbg-section-transition-to-dark {
  height: 120px;
  background: linear-gradient(to bottom, var(--color-neutral-0), var(--color-neutral-900));
  margin: 0;
}

.dbg-section-transition-to-light {
  height: 120px;
  background: linear-gradient(to bottom, var(--color-neutral-900), var(--color-neutral-0));
  margin: 0;
}


/* ========================================
   Solutions Alternating (P0-C, 평가 이월 2026-04-19)
   ========================================
   bmsmile "No.1 Environment" 패턴:
     - 큰 영문 숫자 마커 (01·02·03) + 타이틀 + 설명 + 시각 요소
     - 홀수 행: 번호-본문-비주얼 순 / 짝수 행: 비주얼-본문-번호 (reverse) 좌우 교차
     - 행 간 큰 여백으로 리듬 */
.dbg-solutions-alt {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  max-width: 1200px;
  margin: 0 auto;
}

.dbg-solution-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 768px) {
  .dbg-solution-row {
    grid-template-columns: auto 1fr 240px;
    gap: var(--space-12);
  }
  .dbg-solution-row--reverse {
    grid-template-columns: 240px 1fr auto;
  }
  .dbg-solution-row--reverse .dbg-solution-row__num { order: 3; }
  .dbg-solution-row--reverse .dbg-solution-row__body { order: 2; text-align: right; }
  .dbg-solution-row--reverse .dbg-solution-row__visual { order: 1; }
}

.dbg-solution-row__num {
  font-size: 5rem;
  font-weight: var(--weight-bold);
  color: var(--color-neutral-300);
  line-height: 1;
  letter-spacing: var(--letter-spacing-hero);
  font-feature-settings: "tnum";
}

/* 8차 P1 (2026-04-19 밤): 밝은 오버레이 섹션 내 번호 가시성 강화
   neutral-300(#cbd5e1)은 유리 오피스 배경 위에서 묻힘. primary 진한 톤으로 강제 */
.dbg-section--bg-light .dbg-solution-row__num {
  color: rgba(30, 58, 138, 0.18);  /* primary-700 at 18% — 윤곽만 남기는 워터마크 톤 */
}

@media (min-width: 768px) {
  .dbg-solution-row__num {
    font-size: 8rem;
  }
}

.dbg-solution-row__body { min-width: 0; }

.dbg-solution-row__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  margin: 0 0 var(--space-3);
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

@media (min-width: 768px) {
  .dbg-solution-row__title { font-size: 2.5rem; }
}

.dbg-solution-row__desc {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  margin: 0 0 var(--space-5);
  max-width: 520px;
}

.dbg-solution-row--reverse .dbg-solution-row__desc { margin-left: auto; }

.dbg-solution-row__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 240px;
  margin: 0 auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.dbg-section--alt .dbg-solution-row__visual {
  background: var(--color-neutral-0);
}

.dbg-solution-row__visual i {
  font-size: 6rem;
  color: var(--color-primary-500);
}

/* ========================================
   18차 P10-1 (2026-04-20): 모바일 nav 구조 — 햄버거 + off-canvas
   gnbwaterfall(min-width:1200) 1200 미만 숨김, dbg-mobile-nav 표시.
   ======================================== */
/* off-canvas 패널 transform이 수평 스크롤 트리거하는 것 차단 */
html, body { overflow-x: hidden; }
/* 패널 open시 body 스크롤 잠금에 overflow-x hidden 유지 */
body.dbg-mobile-open { overflow: hidden; }

.dbg-mobile-nav { display: none; }
.dbg-mobile-panel { display: none; }

@media (max-width: 1199px) {
  /* 기존 데스크톱 gnb 숨김 */
  #gnbwaterfall { display: none !important; }

  /* 모바일 상단바 — 20차 P1: U6-γ 로고 다크 배경 최적화에 맞춰 다크 톤으로 통일 */
  .dbg-mobile-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 10000;
    height: 56px;
    padding: 0 var(--space-5);
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  /* 22차 P3 (2026-04-20): 신규 db_logo_header.svg (5:1) → height 44px, width 220px */
  .dbg-mobile-nav__logo img { height: 44px; width: auto; display: block; }
  .dbg-mobile-nav__toggle {
    width: 44px; height: 44px;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 5px;
    background: transparent; border: 0; cursor: pointer; padding: 0;
  }
  .dbg-mobile-nav__bar {
    display: block; width: 22px; height: 2px;
    background: #fff; border-radius: 2px;
  }

  /* Off-canvas 패널 */
  .dbg-mobile-panel {
    display: block;
    position: fixed; inset: 0;
    z-index: 10001;
    pointer-events: none;
    overflow: hidden; /* body translateX 바깥 영역 clip */
  }
  .dbg-mobile-panel[aria-hidden="false"] { pointer-events: auto; }

  .dbg-mobile-panel__backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-out);
  }
  .dbg-mobile-panel[aria-hidden="false"] .dbg-mobile-panel__backdrop { opacity: 1; }

  .dbg-mobile-panel__body {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(85%, 360px);
    background: #0F172A;
    color: #fff;
    padding: var(--space-8) var(--space-6);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--duration-normal) var(--ease-out);
    display: flex; flex-direction: column; gap: var(--space-5);
  }
  .dbg-mobile-panel[aria-hidden="false"] .dbg-mobile-panel__body { transform: translateX(0); }

  .dbg-mobile-panel__close {
    position: absolute; top: var(--space-4); right: var(--space-4);
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 0;
    color: rgba(255,255,255,0.7);
    font-size: 28px; line-height: 1;
    cursor: pointer;
  }
  .dbg-mobile-panel__close:hover { color: #fff; }

  .dbg-mobile-panel__home img { height: 44px; width: auto; display: block; margin-bottom: var(--space-4); }

  .dbg-mobile-menu { list-style: none; margin: 0; padding: 0; flex: 1; }
  .dbg-mobile-menu__group { border-top: 1px solid rgba(255,255,255,0.08); }
  .dbg-mobile-menu__group:first-child { border-top: 0; }
  .dbg-mobile-menu .dbg-mobile-menu__head {
    display: block; padding: var(--space-4) 0;
    color: #fff; text-decoration: none;
    font-size: var(--text-base); font-weight: var(--weight-bold);
    letter-spacing: -0.01em;
  }
  .dbg-mobile-menu__sub {
    list-style: none; margin: 0 0 var(--space-3) 0; padding: 0 0 0 var(--space-3);
    display: flex; flex-direction: column; gap: var(--space-2);
  }
  .dbg-mobile-menu__sub a {
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    font-size: var(--text-sm);
    padding: var(--space-2) 0;
    min-height: 44px;
    display: flex; align-items: center;
  }
  .dbg-mobile-menu__sub a:hover,
  .dbg-mobile-menu__sub a:focus-visible { color: #fff; }

  /* 2026-05-28: 모바일 nav 아코디언 — 서브메뉴 기본 접힘, chevron 탭으로 펼침.
     JS(gnbwaterfall.php)가 서브 있는 그룹에 --has-sub 클래스 + chevron 버튼 주입.
     그룹 제목 링크는 이동 유지, chevron만 펼침/접힘 담당. */
  .dbg-mobile-menu__group--has-sub { position: relative; }
  .dbg-mobile-menu__chevron {
    position: absolute; top: 0; right: 0;
    height: calc(var(--space-4) * 2 + 1.5em);
    width: 48px;
    display: flex; align-items: center; justify-content: flex-end;
    background: transparent; border: 0; padding: 0;
    color: rgba(255,255,255,0.55); font-size: 18px; line-height: 1; cursor: pointer;
    transition: transform 0.25s var(--ease-out), color 0.15s ease;
  }
  .dbg-mobile-menu__chevron:hover,
  .dbg-mobile-menu__chevron:focus-visible { color: #fff; }
  .dbg-mobile-menu__group.is-open .dbg-mobile-menu__chevron { transform: rotate(180deg); }
  .dbg-mobile-menu__group--has-sub > .dbg-mobile-menu__sub {
    max-height: 0;
    margin: 0;
    overflow: hidden;
    transition: max-height 0.32s var(--ease-out), margin 0.32s var(--ease-out);
  }
  .dbg-mobile-menu__group.is-open > .dbg-mobile-menu__sub {
    max-height: 760px;
    margin: 0 0 var(--space-3) 0;
  }

  .dbg-mobile-panel__contact {
    padding-top: var(--space-5);
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .dbg-mobile-panel__contact .dbg-mobile-panel__phone {
    display: block;
    font-size: var(--text-2xl);
    font-weight: var(--weight-extrabold);
    color: #fff;
    text-decoration: none;
    letter-spacing: -0.02em;
  }
  .dbg-mobile-panel__hours {
    margin: var(--space-2) 0 0;
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.50);
  }

  /* 패널 open시 body 스크롤 잠금 */
  body.dbg-mobile-open { overflow: hidden; }
}

/* 2026-05-28: 모바일 scroll-to-top(.btn_mainTop) 숨김.
   default.css .btn_mainTop = fixed 80x80 bottom-right + text-indent 텍스트 숨김.
   모바일에서 (1) 콘텐츠(다운로드 CTA) 위 겹침, (2) 배경이미지 미로드 시 raw "top" 노출.
   폰에서는 숨겨 두 문제 동시 해소 (데스크톱 유지). */
@media (max-width: 768px) {
  .btn_mainTop { display: none !important; }
}

/* ========================================
   23차 P2-3 (2026-04-20): 섹션 05 연혁 타임라인 — 세로, 중앙 라인·도트
   ========================================
   Sprint H D-5 (2026-04-22): 박제 35 "dead CSS 정리" 대상으로 지목되었으나,
   실조사 결과 co_id=history, db_history 2건 co_content에서 여전히 참조 중.
   (`.dbg-timeline__item/__dot/__marker/__content/__date/__year/__month/__desc`)
   Sprint G-B 새 수평 타임라인이 사용하는 클래스는 `.dbg-timeline__card*`이므로
   공존 가능. 삭제 시 legacy 2페이지 레이아웃 파괴 → 유지 결정.
   진짜 정리하려면 history/db_history 본문을 신 타임라인 구조로 마이그레이션 후 제거. */
.dbg-group-history {
  margin-top: var(--space-16);
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.dbg-group-history__title {
  text-align: center;
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: rgba(255,255,255,0.90);
  margin: 0 0 var(--space-10);
  letter-spacing: -0.01em;
}
.dbg-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
/* 중앙 세로선 — 도트 중심 통과 */
.dbg-timeline::before {
  content: "";
  position: absolute;
  left: 104px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: rgba(255,255,255,0.15);
}
.dbg-timeline__item {
  display: grid;
  grid-template-columns: 88px 32px 1fr;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-4) 0;
  position: relative;
}
.dbg-timeline__marker {
  grid-column: 2;
  display: flex;
  justify-content: center;
  padding-top: 6px;
  z-index: 1;
}
.dbg-timeline__dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.60);
  border: 2px solid rgba(15, 23, 42, 0.92);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.15);
}
.dbg-timeline__item--highlight .dbg-timeline__dot {
  background: #DC2626;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.30);
}
.dbg-timeline__content {
  grid-column: 3;
  padding-top: 2px;
}
.dbg-timeline__date {
  margin: 0 0 var(--space-1);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.dbg-timeline__year {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: rgba(255,255,255,0.92);
  letter-spacing: -0.02em;
  font-feature-settings: "tnum";
}
.dbg-timeline__month {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.55);
  font-weight: 500;
}
.dbg-timeline__month::before { content: "·"; margin-right: 4px; opacity: 0.5; }
.dbg-timeline__desc {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  line-height: 1.7;
}
.dbg-timeline__item--highlight .dbg-timeline__desc {
  color: #fff;
}

/* 모바일 반응형 — 좌측 정렬, marker 위치 유지 */
@media (max-width: 640px) {
  .dbg-group-history { margin-top: var(--space-12); }
  .dbg-timeline::before { left: 6px; }
  .dbg-timeline__item {
    grid-template-columns: 16px 1fr;
    gap: var(--space-3);
  }
  .dbg-timeline__marker {
    grid-column: 1;
    justify-content: flex-start;
  }
  .dbg-timeline__content {
    grid-column: 2;
  }
  .dbg-timeline__year { font-size: var(--text-xl); }
}

/* ========================================
   23차 P2-2 (2026-04-20): 섹션 05 두 법인 카드 보강
   ======================================== */
.dbg-group-entity {
  position: relative;
  overflow: hidden;
  /* 46차 P184 (2026-04-21): border-left 좌측 아이덴티티 strip.
     45차 푸터 카드 + 회사소개 헤더와 시각 언어 통일 (Canon Red / Emerald). */
  border-left: 4px solid transparent;
  transition: border-left-width 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
/* 카드 상단 색 strip (아이덴티티 분별) — 46차 P184 색상 통일 */
.dbg-group-entity::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.dbg-group-entity--digitalbank {
  border-left-color: #DC2626; /* Canon Red */
}
.dbg-group-entity--digitalbank::before {
  background: linear-gradient(90deg, #DC2626 0%, #F87171 100%);
}
.dbg-group-entity--easysolution {
  border-left-color: #10B981; /* Emerald */
}
.dbg-group-entity--easysolution::before {
  background: linear-gradient(90deg, #10B981 0%, #34D399 100%);
}
/* hover 시 border-left 확장 + 카드 subtle lift */
.dbg-group-entity:hover,
.dbg-group-entity:focus-within {
  border-left-width: 6px;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}
.dbg-group-entity__tagline {
  margin: var(--space-1) 0 var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: rgba(255,255,255,0.90);
  letter-spacing: -0.01em;
}
.dbg-group-entity__ceo {
  margin: 0 0 var(--space-5);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.60);
  font-weight: 500;
}
.dbg-group-entity__areas {
  margin: var(--space-4) 0 var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.70);
  line-height: 1.6;
}
.dbg-group-entity__areas strong {
  display: block;
  margin-bottom: var(--space-1);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* ========================================
   23차 P2-1 (2026-04-20): 섹션 05 대표 메시지 인용 블록
   ======================================== */
.dbg-group-quote {
  max-width: 880px;
  margin: var(--space-10) auto var(--space-12);
  padding: var(--space-8) var(--space-10);
  border-left: 3px solid #DC2626;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.dbg-group-quote__body {
  margin: 0 0 var(--space-5);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 500;
  line-height: 1.6;
  color: rgba(255,255,255,0.92);
  letter-spacing: -0.01em;
  quotes: "\201C" "\201D";
}
.dbg-group-quote__body::before {
  content: open-quote;
  color: rgba(255,255,255,0.35);
  margin-right: 0.15em;
}
.dbg-group-quote__body::after {
  content: close-quote;
  color: rgba(255,255,255,0.35);
  margin-left: 0.15em;
}
.dbg-group-quote__cite {
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  font-style: normal;
}
.dbg-group-quote__name::before { content: "— "; opacity: 0.7; margin-right: 0.2em; }

/* ========================================
   18차 P4 (2026-04-20): Honors Club 시상 사진 카드 (섹션 03)
   섹션 04 갤러리에서 이관. 인증 엠블럼 카드 시스템과 동일 padding·radius·neutral-50 톤.
   ======================================== */
.dbg-honor-photo-wrap {
  max-width: 1120px;
  margin: var(--space-10) auto var(--space-8);
}
.dbg-honor-photo-card {
  display: block;
  background: var(--color-neutral-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-decoration: none;
  color: var(--color-text-primary);
  transition: box-shadow var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
  box-shadow: var(--shadow-xs);
}
.dbg-honor-photo-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
/* 19차 P2 (2026-04-20): 카드 세로 길이 축소 — 고정 높이 240px + object-fit cover. */
.dbg-honor-photo-card img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-md);
}
.dbg-honor-photo-caption {
  display: block;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  margin-top: var(--space-4);
  letter-spacing: 0.02em;
}

/* ========================================
   17차 P11 (2026-04-20): A11y — 스킵 링크 + :focus-visible 포커스 아웃라인
   ======================================== */
/* 스킵 네비게이션 — 스크린리더/키보드 사용자 메인 점프 */
.dbg-skip-link {
  position: absolute;
  top: -40px; left: 8px;
  background: var(--color-primary-700);
  color: #fff;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-weight: var(--weight-bold);
  text-decoration: none;
  z-index: 9999;
  transition: top var(--duration-fast) var(--ease-out);
}
.dbg-skip-link:focus {
  top: 8px;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* 공통 :focus-visible — 카드/링크/버튼 키보드 포커스 표시 */
.dbg-card:focus-visible,
.dbg-solution-row__body a:focus-visible,
.dbg-card__link:focus-visible,
.dbg-btn:focus-visible,
.dbg-location-link:focus-visible,
.dbg-trust-badge:focus-visible,
.dbg-resources-row__item:focus-visible,
.dbg-hero__link:focus-visible,
.dbg-contact__phone:focus-visible,
.gnbwaterfall-mainmenu:focus-visible,
.dbg-stat:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 3px;
  border-radius: var(--radius-md);
}

/* hover 호버 효과의 키보드 focus 동등 적용 (hover가 focus에서 안 보이는 카드/배지) */
.dbg-card:focus-visible,
.dbg-stat:focus-visible,
.dbg-trust-badge:focus-visible {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* ==========================================================================
   Phase B-2 P1 (2026-04-20): content 페이지 다크 컨테이너 토큰화
   대상: bbs/content.php 전수 (#ctt 존재). content.skin.php 본체 수정 금지 제약
         → body:has(#ctt)로 자동 다크화.
   토큰: vars.css primary-900 (#0F172A) 배경 + #F1F1F1/#E5E7EB/#93C5FD 전경.
   ========================================================================== */

/* body + chrome 다크 */
body:has(#ctt) {
  background: var(--color-primary-900) !important;
  color: #F1F1F1;
}
body:has(#ctt) #wrapper,
body:has(#ctt) .wrapper,
body:has(#ctt) .main_wrapper,
body:has(#ctt) #container,
body:has(#ctt) .container {
  background: transparent !important;
}

/* 페이지 타이틀 (default.css 99라인 덮기) */
body:has(#ctt) #wrapper_title {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 6rem 1.5rem 2rem;
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--letter-spacing-display);
  color: #F1F1F1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* 컨테이너 */
#ctt {
  max-width: var(--container-xl);
  margin: 0 auto 6rem;
  padding: 2rem 1.5rem 0;
  color: #E5E7EB;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}
#ctt_con {
  color: #E5E7EB;
  padding: 0;
}

/* 시맨틱 기본 */
#ctt_con h1, #ctt_con h2, #ctt_con h3,
#ctt_con h4, #ctt_con h5, #ctt_con h6 {
  color: #F1F1F1;
  font-weight: var(--weight-bold);
  letter-spacing: var(--letter-spacing-display);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  line-height: var(--leading-tight);
}
#ctt_con h1 { font-size: var(--text-3xl); }
#ctt_con h2 {
  font-size: var(--text-2xl);
  border-bottom: 2px solid rgba(147, 197, 253, 0.25);
  padding-bottom: 0.5rem;
}
#ctt_con h3 { font-size: var(--text-xl); color: #BFDBFE; }
#ctt_con h4 { font-size: var(--text-lg); color: #DBEAFE; }

#ctt_con p { margin: 1rem 0; color: #E5E7EB; }
#ctt_con strong, #ctt_con b { color: #F1F1F1; font-weight: var(--weight-semibold); }
#ctt_con em, #ctt_con i { color: #D1D5DB; }

#ctt_con a {
  color: #93C5FD;
  text-decoration: none;
  border-bottom: 1px solid rgba(147, 197, 253, 0.35);
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
#ctt_con a:hover,
#ctt_con a:focus-visible {
  color: #BFDBFE;
  border-bottom-color: #BFDBFE;
}

/* 리스트 */
#ctt_con ul, #ctt_con ol { padding-left: 1.5rem; margin: 1rem 0; }
#ctt_con li { margin: 0.4rem 0; color: #E5E7EB; }

/* 인용·코드 */
#ctt_con blockquote {
  background: rgba(255, 255, 255, 0.04);
  border-left: 3px solid #93C5FD;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: #D1D5DB;
}
#ctt_con code {
  background: rgba(255, 255, 255, 0.06);
  color: #FCA5A5;
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  font-size: 0.9em;
}
#ctt_con pre {
  background: rgba(255, 255, 255, 0.04);
  padding: 1rem;
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* 테이블 (legacy) — 다크 친화 */
#ctt_con table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  background: transparent;
}
#ctt_con table th,
#ctt_con table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
  color: #E5E7EB;
  vertical-align: top;
}
#ctt_con table th {
  background: rgba(255, 255, 255, 0.04);
  color: #F1F1F1;
  font-weight: var(--weight-semibold);
}

/* 이미지 */
#ctt_con img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin: 1rem 0;
}

/* 구분선 */
#ctt_con hr {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 2rem 0;
}

/* 모바일 */
@media (max-width: 767px) {
  body:has(#ctt) #wrapper_title {
    padding: 4rem 1rem 1.5rem;
    font-size: var(--text-2xl);
  }
  #ctt { padding: 1.5rem 1rem 0; margin-bottom: 4rem; }
  #ctt_con h1 { font-size: var(--text-2xl); }
  #ctt_con h2 { font-size: var(--text-xl); }
  #ctt_con h3 { font-size: var(--text-lg); }
}

/* ==========================================================================
   Phase B-2 P2 (2026-04-20): content 공유 컴포넌트 — submenu + timeline
   사용처: history, db_history (P2), 향후 greeting/organization_chart 등 확장
   ========================================================================== */

/* 상단 서브메뉴 (hero 배경 이미지 위 변형 + 단독 변형) */
#ctt_con .dbg-content-submenu {
  margin: 0 0 2.5rem;
}
#ctt_con .dbg-content-submenu--hero {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: -0.5rem 0 2.5rem;
}
#ctt_con .dbg-content-submenu__bg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  margin: 0;
}
#ctt_con .dbg-content-submenu--hero .dbg-content-submenu__links {
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius-lg);
  padding: 0.6rem;
}
#ctt_con .dbg-content-submenu__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}
#ctt_con .dbg-content-submenu__links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1rem;
  min-height: 44px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  color: #F1F1F1;
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
#ctt_con .dbg-content-submenu__links a:hover,
#ctt_con .dbg-content-submenu__links a:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(147, 197, 253, 0.45);
  color: #fff;
}
#ctt_con .dbg-content-submenu__links a[aria-current="page"] {
  background: var(--color-accent-500);
  border-color: var(--color-accent-500);
  color: #fff;
}

/* content 섹션 래퍼 */
#ctt_con .dbg-content-section {
  margin-top: 3rem;
}
#ctt_con .dbg-content-section__title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: #F1F1F1;
  text-align: center;
  margin: 0 0 1rem;
  letter-spacing: var(--letter-spacing-display);
  border-bottom: 0;
  padding-bottom: 0;
}
#ctt_con .dbg-content-section__lead {
  text-align: center;
  color: #D1D5DB;
  font-size: var(--text-lg);
  margin: 0 0 3rem;
}

/* 타임라인 */
#ctt_con .dbg-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
}
#ctt_con .dbg-timeline::before {
  content: '';
  position: absolute;
  left: 1rem;
  top: 0.75rem;
  bottom: 0.75rem;
  width: 2px;
  background: linear-gradient(to bottom,
    rgba(147, 197, 253, 0.35) 0%,
    rgba(147, 197, 253, 0.15) 100%);
}
#ctt_con .dbg-timeline__item {
  position: relative;
  padding: 0 0 2.5rem 3rem;
  margin: 0;
  /* Phase B-2 Sprint 1 보정 P12 M2: 명시 그리드로 본문 overflow 허용 */
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 1.5rem;
  align-items: start;
}
#ctt_con .dbg-timeline__item:last-child { padding-bottom: 0; }
#ctt_con .dbg-timeline__events { min-width: 0; }
#ctt_con .dbg-timeline__item::before {
  content: '';
  position: absolute;
  left: 0.5rem;
  top: 1rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--color-accent-500);
  border: 3px solid var(--color-primary-900);
  box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.4);
  z-index: 1;
}
#ctt_con .dbg-timeline__year {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: #93C5FD;
  margin: 0 0 0.75rem;
  line-height: 1;
  letter-spacing: var(--letter-spacing-display);
}
#ctt_con .dbg-timeline__events {
  list-style: none;
  padding: 0;
  margin: 0;
}
#ctt_con .dbg-timeline__events > li {
  padding: 0.5rem 0;
  color: #E5E7EB;
  line-height: var(--leading-relaxed);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}
#ctt_con .dbg-timeline__events > li:last-child { border-bottom: 0; }
#ctt_con .dbg-timeline__date {
  display: inline-block;
  min-width: 3.5rem;
  color: #93C5FD;
  font-weight: var(--weight-semibold);
  margin-right: 0.5rem;
  font-feature-settings: "tnum" 1;
}
#ctt_con .dbg-timeline__link {
  margin-left: 0.5rem;
  font-size: 0.9em;
  color: var(--color-accent-300);
  border-bottom-color: rgba(232, 90, 90, 0.4);
}

@media (max-width: 767px) {
  #ctt_con .dbg-content-section__title { font-size: var(--text-2xl); }
  #ctt_con .dbg-content-section__lead { font-size: var(--text-base); margin-bottom: 2rem; }
  #ctt_con .dbg-timeline__item {
    padding: 0 0 2rem 2.25rem;
    grid-template-columns: 60px 1fr;
    gap: 0.75rem;
  }
  #ctt_con .dbg-timeline::before { left: 0.75rem; }
  #ctt_con .dbg-timeline__item::before { left: 0.25rem; width: 0.875rem; height: 0.875rem; }
  #ctt_con .dbg-timeline__year { font-size: var(--text-xl); }
  #ctt_con .dbg-content-submenu--hero .dbg-content-submenu__links {
    position: static;
    transform: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    margin-top: -0.5rem;
  }
  #ctt_con .dbg-content-submenu__links a { font-size: var(--text-xs); padding: 0.5rem 0.75rem; min-height: 40px; }
}

/* ==========================================================================
   Phase B-2 P3 (2026-04-20): 조직도 컴포넌트 (organization_chart, db_organization_char)
   ========================================================================== */

#ctt_con .dbg-org-logo {
  display: flex;
  justify-content: center;
  margin: 0 0 3rem;
}
#ctt_con .dbg-org-logo img {
  max-width: 220px;
  height: auto;
  margin: 0;
  border-radius: 0;
  filter: brightness(1.1);
}

#ctt_con .dbg-org-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  margin: 2rem auto 0;
  max-width: 1000px;
}

#ctt_con .dbg-org-chart__level {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}
#ctt_con .dbg-org-chart__level--executives {
  gap: 1.5rem;
}
#ctt_con .dbg-org-chart__level--departments {
  gap: 2rem;
  width: 100%;
  padding-top: 2.5rem;
}

/* 공통 노드 */
#ctt_con .dbg-org-node {
  padding: 0.875rem 1.5rem;
  border-radius: var(--radius-lg);
  text-align: center;
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #F1F1F1;
  position: relative;
  z-index: 1;
}

#ctt_con .dbg-org-node--ceo {
  font-size: var(--text-2xl);
  padding: 1.25rem 3rem;
  background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-700));
  border: 1px solid rgba(147, 197, 253, 0.4);
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.2);
  min-width: 200px;
}
#ctt_con .dbg-org-node--ceo::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 2px;
  height: 2.5rem;
  background: rgba(147, 197, 253, 0.35);
  transform: translateX(-50%);
}

#ctt_con .dbg-org-node--executive {
  background: rgba(255, 255, 255, 0.08);
  min-width: 120px;
}

#ctt_con .dbg-org-node--department {
  background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600));
  color: #fff;
  min-width: 180px;
  border: 1px solid rgba(147, 197, 253, 0.3);
}

/* department 컬럼 */
#ctt_con .dbg-org-department {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  flex: 0 1 220px;
  position: relative;
}
#ctt_con .dbg-org-department .dbg-org-node--department::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -2.5rem;
  width: 2px;
  height: 2.5rem;
  background: rgba(147, 197, 253, 0.35);
  transform: translateX(-50%);
}

/* 수평 연결선 (departments level 상단) */
#ctt_con .dbg-org-chart__level--departments::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  background: rgba(147, 197, 253, 0.25);
  z-index: 0;
}

/* 팀 리스트 */
#ctt_con .dbg-org-teams {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
#ctt_con .dbg-org-team {
  padding: 0.6rem 0.875rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: #D1D5DB;
  text-align: center;
  margin: 0;
}
#ctt_con .dbg-org-team::before { content: none; }

@media (max-width: 767px) {
  #ctt_con .dbg-org-chart { gap: 1.5rem; }
  #ctt_con .dbg-org-chart__level--departments {
    flex-direction: column;
    gap: 1.5rem;
    padding-top: 1.5rem;
  }
  #ctt_con .dbg-org-chart__level--departments::before {
    top: 0;
    bottom: 0;
    left: 50%;
    right: auto;
    width: 2px;
    height: auto;
    transform: translateX(-50%);
  }
  #ctt_con .dbg-org-department {
    flex: 1 1 auto;
    max-width: 320px;
    margin: 0 auto;
    width: 100%;
  }
  #ctt_con .dbg-org-node--ceo { font-size: var(--text-xl); padding: 1rem 2rem; }
  #ctt_con .dbg-org-logo img { max-width: 160px; }
}

/* ==========================================================================
   Phase B-2 Sprint 1 보정 P11 C2 (2026-04-20): 조직도 연결선 보강
   평가자 실측: 연결선 1/4만 표시 → executives 레벨과 각 executive 노드 위
   수직선 보강. 기존 CEO::after + departments::before 가로선 + dept 수직선 유지.
   ========================================================================== */
#ctt_con .dbg-org-chart__level--executives {
  padding-top: 2rem;
  margin-top: 0.5rem;
}
#ctt_con .dbg-org-chart__level--executives::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 2rem;
  background: rgba(147, 197, 253, 0.25);
  transform: translateX(-50%);
}
#ctt_con .dbg-org-node--executive {
  margin-top: 2.5rem;
}
#ctt_con .dbg-org-node--executive::before {
  content: "";
  position: absolute;
  top: -2.5rem;
  left: 50%;
  width: 2px;
  height: 2.5rem;
  background: rgba(147, 197, 253, 0.25);
  transform: translateX(-50%);
}
@media (max-width: 767px) {
  #ctt_con .dbg-org-chart__level--executives { padding-top: 1.5rem; }
  #ctt_con .dbg-org-chart__level--executives::before { height: 1.5rem; }
  #ctt_con .dbg-org-node--executive { margin-top: 2rem; }
  #ctt_con .dbg-org-node--executive::before { top: -2rem; height: 2rem; }
  /* Phase B-3 Sprint 0 P19: 모바일 조직도 부서 계층 구분선 + 레이블 */
  #ctt_con .dbg-org-chart__level--departments {
    border-top: 1px dashed rgba(147, 197, 253, 0.2);
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    position: relative;
  }
  #ctt_con .dbg-org-chart__level--departments::after {
    content: "부서";
    position: absolute;
    top: -0.625rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 0.75rem;
    background: var(--color-primary-900, #0F172A);
    font-size: 12px;
    color: rgba(203, 213, 225, 0.7);
    letter-spacing: 0.1em;
  }
}

/* ==========================================================================
   Phase B-2 P4 (2026-04-20): 솔루션 상세 공유 컴포넌트
   사용처: easyprinter_all (P4), 향후 ePrinter/btb/easyscan 등 확장
   Grid · Card · Compare(table 대체) · Gallery
   ========================================================================== */

/* 섹션 타이틀 왼쪽 정렬 변형 */
#ctt_con .dbg-content-section__title--left {
  text-align: left;
  border-bottom: 2px solid rgba(147, 197, 253, 0.25);
  padding-bottom: 0.5rem;
}

/* 카드 그리드 */
#ctt_con .dbg-content-grid {
  display: grid;
  gap: 1.25rem;
  margin: 1.5rem 0;
}
#ctt_con .dbg-content-grid--2 { grid-template-columns: repeat(2, 1fr); }
#ctt_con .dbg-content-grid--3 { grid-template-columns: repeat(3, 1fr); }

#ctt_con .dbg-content-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  color: #E5E7EB;
}
#ctt_con .dbg-content-card h2,
#ctt_con .dbg-content-card h3 {
  margin: 0 0 0.75rem;
  color: #F1F1F1;
  font-size: var(--text-xl);
  border-bottom: 0;
  padding-bottom: 0;
}
#ctt_con .dbg-content-card p {
  margin: 0;
  color: #D1D5DB;
  line-height: var(--leading-relaxed);
}
#ctt_con .dbg-content-card ul,
#ctt_con .dbg-content-card ol {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}
#ctt_con .dbg-content-card li {
  color: #D1D5DB;
  margin: 0.4rem 0;
}

/* 큰 이미지 figure — Phase B-2 Sprint 1 보정 P12 M1: padding 32px 프레임화 */
#ctt_con .dbg-content-figure {
  margin: 2rem 0;
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 2rem;
}
/* Phase B-3 Sprint 0 P19: 모바일 figure padding 축소 */
@media (max-width: 768px) {
  #ctt_con .dbg-content-figure {
    padding: 0.625rem;
    border-radius: 8px;
  }
}
#ctt_con .dbg-content-figure img {
  max-width: 100%;
  height: auto;
  max-height: 460px;
  margin: 0;
  object-fit: contain;
  background: #fff;
  padding: 0.5rem;
  border-radius: var(--radius-md);
}
#ctt_con .dbg-content-figure figcaption {
  margin-top: 0.75rem;
  color: #9CA3AF;
  font-size: var(--text-sm);
}

/* 비교 그리드 (table 대체) */
#ctt_con .dbg-compare-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 1.5rem 0;
}
#ctt_con .dbg-compare-row {
  display: grid;
  grid-template-columns: 160px 1fr 1fr;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
#ctt_con .dbg-compare-row:last-child { border-bottom: 0; }
#ctt_con .dbg-compare-row--header {
  background: rgba(255, 255, 255, 0.06);
  font-weight: var(--weight-bold);
}
#ctt_con .dbg-compare-label,
#ctt_con .dbg-compare-cell {
  padding: 1rem 1.25rem;
  color: #E5E7EB;
  line-height: var(--leading-normal);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
}
#ctt_con .dbg-compare-cell:last-child { border-right: 0; }
#ctt_con .dbg-compare-label {
  background: rgba(255, 255, 255, 0.04);
  font-weight: var(--weight-semibold);
  color: #F1F1F1;
}
#ctt_con .dbg-compare-cell--accent {
  background: rgba(37, 99, 235, 0.08);
  color: #F1F1F1;
  font-weight: var(--weight-medium);
}
#ctt_con .dbg-compare-row--header .dbg-compare-cell--accent {
  background: rgba(37, 99, 235, 0.18);
  color: #BFDBFE;
}

/* 갤러리 */
#ctt_con .dbg-content-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0;
}
#ctt_con .dbg-content-gallery__item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 0.875rem;
  margin: 0;
}
#ctt_con .dbg-content-gallery__item a {
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
  border: 0;
}
#ctt_con .dbg-content-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  margin: 0;
  border-radius: 0;
}
#ctt_con .dbg-content-gallery__item figcaption {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
#ctt_con .dbg-content-gallery__item figcaption strong {
  color: #F1F1F1;
  font-size: var(--text-sm);
}
#ctt_con .dbg-content-gallery__item figcaption span {
  color: #9CA3AF;
  font-size: var(--text-xs);
}

@media (max-width: 860px) {
  #ctt_con .dbg-content-grid--2,
  #ctt_con .dbg-content-grid--3 { grid-template-columns: 1fr; }
}
@media (max-width: 639px) {
  #ctt_con .dbg-compare-row {
    grid-template-columns: 1fr;
  }
  #ctt_con .dbg-compare-label,
  #ctt_con .dbg-compare-cell {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  #ctt_con .dbg-compare-row:last-child .dbg-compare-cell:last-child { border-bottom: 0; }
  #ctt_con .dbg-compare-row--header { display: none; }
  #ctt_con .dbg-compare-cell::before {
    content: attr(data-label);
    display: block;
    font-size: var(--text-xs);
    color: #9CA3AF;
    margin-bottom: 0.25rem;
  }
  #ctt_con .dbg-compare-cell--accent::before { color: #93C5FD; }
}

/* ==========================================================================
   Phase B-2 P5 (2026-04-20): icon nav · hero banner · CTA · media card
   사용처: btb, easyscan (P5) 이후 ezprinter_pos/kiosk/ezscanbiz/menu 등 확장
   ========================================================================== */

/* 섹션 lead 왼쪽 정렬 변형 */
#ctt_con .dbg-content-section__lead--left { text-align: left; }

/* 아이콘 네비 (이미지 + 라벨) */
#ctt_con .dbg-content-iconnav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.875rem;
  padding: 1.5rem 0;
  margin: 0 0 1.5rem;
}
#ctt_con .dbg-content-iconnav__item {
  flex: 0 0 140px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 1rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: #E5E7EB;
  font-weight: var(--weight-semibold);
  text-align: center;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
#ctt_con .dbg-content-iconnav__item:hover,
#ctt_con .dbg-content-iconnav__item:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(147, 197, 253, 0.35);
  transform: translateY(-3px);
  color: #F1F1F1;
}
#ctt_con .dbg-content-iconnav__item img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  margin: 0;
  background: transparent;
  border-radius: 0;
  filter: brightness(1.1) drop-shadow(0 4px 8px rgba(0,0,0,0.25));
}
#ctt_con .dbg-content-iconnav__item span {
  font-size: var(--text-sm);
  color: inherit;
}
#ctt_con .dbg-content-iconnav--text .dbg-content-iconnav__item {
  flex: 1 1 140px;
  padding: 1rem;
}

/* 히어로 배너 (배경 이미지 위 텍스트)
   Phase B-2 Sprint 1 보정 P13 B1: inline style 제거, class modifier로 전환
   HTMLPurifier가 CSS custom property 스트립 → class별 배경 이미지 정의 방식 */
#ctt_con .dbg-content-hero-banner {
  padding: 5rem 1.5rem;
  text-align: center;
  color: #F1F1F1;
  border-radius: var(--radius-lg);
  background-color: var(--color-primary-900);
  background-size: cover;
  background-position: center;
  margin: 0 0 2.5rem;
}
#ctt_con .dbg-content-hero-banner--ezprt {
  background-image: linear-gradient(rgba(15, 23, 42, 0.65), rgba(15, 23, 42, 0.85)),
                    url('/img/easyprinter/bg_ezprt3.jpg');
}
#ctt_con .dbg-content-hero-banner h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin: 0 0 0.75rem;
  color: #fff;
  border-bottom: 0;
  padding-bottom: 0;
}
#ctt_con .dbg-content-hero-banner p {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--text-lg);
}

/* CTA (kakao 상담) */
#ctt_con .dbg-content-cta {
  text-align: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 2.5rem 1.5rem;
}
#ctt_con .dbg-content-cta h2 {
  margin: 0 0 0.75rem;
  font-size: var(--text-2xl);
  color: #F1F1F1;
  border-bottom: 0;
  padding-bottom: 0;
}
#ctt_con .dbg-content-cta p {
  color: #D1D5DB;
  margin: 0 0 1rem;
}
#ctt_con .dbg-content-cta__tel {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: var(--weight-extrabold);
  margin: 0.5rem 0 1.25rem;
  color: #F1F1F1;
}
#ctt_con .dbg-content-cta__tel a {
  color: #F1F1F1;
  border-bottom: 0;
}
#ctt_con .dbg-content-cta__kakao {
  display: inline-block;
  padding: 0.875rem 2rem;
  border-radius: 999px;
  background: #FEE500;
  color: #3c1e1e;
  font-weight: var(--weight-extrabold);
  text-decoration: none;
  border-bottom: 0;
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
#ctt_con .dbg-content-cta__kakao:hover,
#ctt_con .dbg-content-cta__kakao:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(254, 229, 0, 0.25);
  color: #3c1e1e;
  border-bottom: 0;
}
#ctt_con .dbg-content-cta--inline {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 1rem 0 0;
}

/* media card 변형 (이미지 포함 카드) */
#ctt_con .dbg-content-card--media {
  padding: 0;
  overflow: hidden;
}
#ctt_con .dbg-content-card--media img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
  background: #fff;
}
#ctt_con .dbg-content-card--media h3,
#ctt_con .dbg-content-card--media h4 {
  padding: 1rem 1.25rem 0;
  margin: 0 0 0.5rem;
}
#ctt_con .dbg-content-card--media p,
#ctt_con .dbg-content-card--media ul {
  padding: 0 1.25rem 1.25rem;
  margin: 0;
}
#ctt_con .dbg-content-card--media ul { padding-left: 2.5rem; padding-bottom: 1.25rem; }

@media (max-width: 480px) {
  #ctt_con .dbg-content-iconnav__item { flex: 0 0 100px; padding: 0.75rem 0.5rem; }
  #ctt_con .dbg-content-iconnav__item img { width: 44px; height: 44px; }
  #ctt_con .dbg-content-hero-banner { padding: 3rem 1rem; }
}

/* ==========================================================================
   Phase B-2 P6 (2026-04-20): 약관·법적 문서 공유 스타일 (.dbg-content-legal)
   사용처: privacy_policy (P6), service_policy (P7) 이후 email_policy 등
   설계: 읽기 가독성 최우선 (h2·h3·p·ol·ul 시맨틱만 사용)
   ========================================================================== */

#ctt_con .dbg-content-legal {
  margin-top: 2.5rem;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
#ctt_con .dbg-content-legal + .dbg-content-legal {
  margin-top: 1rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  padding-top: 2.5rem;
}
#ctt_con .dbg-content-legal .dbg-content-section__title {
  font-size: var(--text-xl);
  margin-top: 0;
  margin-bottom: 1rem;
}
#ctt_con .dbg-content-legal h3 {
  font-size: var(--text-base);
  color: #BFDBFE;
  margin: 1.5rem 0 0.5rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
}
#ctt_con .dbg-content-legal p {
  font-size: 0.95rem;
  line-height: var(--leading-relaxed);
  color: #D1D5DB;
  margin: 0.625rem 0;
}
#ctt_con .dbg-content-legal ol,
#ctt_con .dbg-content-legal ul {
  padding-left: 1.5rem;
  margin: 0.625rem 0 1rem;
}
#ctt_con .dbg-content-legal li {
  font-size: 0.95rem;
  line-height: var(--leading-normal);
  color: #D1D5DB;
  margin: 0.4rem 0;
}
#ctt_con .dbg-content-legal__toc {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem 1rem 2.5rem;
  margin: 1rem 0 0;
}
#ctt_con .dbg-content-legal strong { color: #F1F1F1; }
#ctt_con .dbg-content-legal a {
  color: #93C5FD;
  word-break: break-all;
}

/* ==========================================================================
   Phase B-2 Sprint 1 보정 P10 (2026-04-20): 회사소개 허브 카드 그리드
   [C1] digitalbank_guide / dbeasy_guide co_content 내 <style>은 HTMLPurifier가
   스트립 → 로드된 stylesheet 어디에도 .office-solution-* 규칙 없음 (실측)
   본문 마크업은 정상이므로 DB UPDATE 없이 override.css에 다크 토큰화 버전 신설
   ========================================================================== */
#ctt_con .office-solution-wrapper {
  max-width: 1152px;
  margin: 2.5rem auto 0;
}
#ctt_con .office-solution-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
#ctt_con .grid-title {
  grid-column: 1 / -1;
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: #F1F1F1;
  margin-bottom: 0.5rem;
  text-align: left;
}
#ctt_con .card-wrapper {
  position: relative;
  aspect-ratio: 4 / 3;
}
#ctt_con .main-card-link {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.2s, border-color 0.2s;
  text-decoration: none;
}
#ctt_con .main-card-link:hover {
  transform: translateY(-2px);
  border-color: rgba(147, 197, 253, 0.4);
}
#ctt_con .main-card-link img {
  width: 100%;
  height: 70%;
  object-fit: cover;
  filter: brightness(0.85);
  display: block;
}
#ctt_con .main-title {
  display: block;
  padding: 1.25rem 0.75rem;
  font-size: 18px;
  font-weight: var(--weight-bold);
  color: #F1F1F1;
  text-align: center;
  line-height: 1.3;
  background: rgba(15, 23, 42, 0.6);
}
@media (max-width: 768px) {
  #ctt_con .office-solution-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  #ctt_con .grid-title {
    font-size: var(--text-xl);
    text-align: center;
  }
  #ctt_con .main-title {
    padding: 0.875rem 0.625rem;
    font-size: 16px;
  }
}

/* ==========================================================================
   Phase B-3 Sprint 1 P23 (2026-04-20): .dbg-view-* 컴포넌트
   view.skin.php 전용 (db-dark 스킨). list.skin.php 는 영향 없음.
   ========================================================================== */

.dbg-view {
  max-width: 900px;
  margin: 0 auto;
  /* Phase B-3 Sprint 2 P29: .db-board 래퍼가 padding-top:96px 으로 GNB 여백 담당.
     .dbg-view 자체는 상단 간격만 48px 확보 (래퍼와 합산 144px). */
  padding: 48px 20px 80px;
}
.db-board--view { background: transparent; min-height: 0; }

/* Block 1 — Header */
.dbg-view-header {
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 48px;
}
.dbg-view-breadcrumb {
  font-size: 13px;
  color: rgba(203, 213, 225, 0.6);
  margin-bottom: 16px;
}
.dbg-view-breadcrumb a {
  color: rgba(203, 213, 225, 0.6);
  text-decoration: none;
  transition: color 0.15s;
}
.dbg-view-breadcrumb a:hover {
  color: rgba(241, 241, 241, 0.9);
}
.dbg-view-breadcrumb span {
  margin: 0 0.5em;
  opacity: 0.5;
}
.dbg-view-cat {
  margin-bottom: 12px;
}
.dbg-view-cat-pill {
  display: inline-block;
  background: rgba(220, 38, 38, 0.08);
  color: #DC2626;
  border: 1px solid rgba(220, 38, 38, 0.25);
  border-radius: 16px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.dbg-view-title {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.3;
  color: #F1F1F1;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.dbg-view-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: rgba(203, 213, 225, 0.6);
}
.dbg-view-meta time::before {
  content: "·";
  margin-right: 12px;
  opacity: 0.5;
}

/* Block 2 — Body */
.dbg-view-body {
  font-size: 17px;
  line-height: 1.75;
  color: rgba(229, 231, 235, 0.9);
}
.dbg-view-body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
.dbg-view-body p {
  margin: 1em 0;
}
.dbg-view-body a {
  color: #93C5FD;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.dbg-view-body a:hover {
  color: #BFDBFE;
}
.dbg-view-body h1,
.dbg-view-body h2,
.dbg-view-body h3 {
  color: #F1F1F1;
  margin-top: 1.5em;
}

/* 첨부 */
.dbg-view-attach {
  margin-top: 48px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}
.dbg-view-attach h2 {
  font-size: 14px;
  color: rgba(203, 213, 225, 0.6);
  margin: 0 0 16px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.dbg-view-attach-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.dbg-view-attach-item {
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.dbg-view-attach-item:last-child {
  border-bottom: none;
}
.dbg-view-attach-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 18px;
}
.dbg-view-attach-icon::before { content: "📎"; }
.dbg-view-attach-icon[data-ext="pdf"]::before  { content: "📕"; }
.dbg-view-attach-icon[data-ext="zip"]::before,
.dbg-view-attach-icon[data-ext="rar"]::before,
.dbg-view-attach-icon[data-ext="7z"]::before   { content: "📦"; }
.dbg-view-attach-icon[data-ext="xlsx"]::before,
.dbg-view-attach-icon[data-ext="xls"]::before,
.dbg-view-attach-icon[data-ext="csv"]::before  { content: "📊"; }
.dbg-view-attach-icon[data-ext="docx"]::before,
.dbg-view-attach-icon[data-ext="doc"]::before,
.dbg-view-attach-icon[data-ext="hwp"]::before  { content: "📄"; }
.dbg-view-attach-icon[data-ext="png"]::before,
.dbg-view-attach-icon[data-ext="jpg"]::before,
.dbg-view-attach-icon[data-ext="jpeg"]::before,
.dbg-view-attach-icon[data-ext="gif"]::before,
.dbg-view-attach-icon[data-ext="webp"]::before { content: "🖼️"; }
.dbg-view-attach-icon[data-ext="mp4"]::before,
.dbg-view-attach-icon[data-ext="mov"]::before,
.dbg-view-attach-icon[data-ext="avi"]::before  { content: "🎬"; }
/* Phase B-3 Sprint 2 P48: 한글 워드/프리젠테이션/텍스트 확장자 */
.dbg-view-attach-icon[data-ext="hwp"]::before,
.dbg-view-attach-icon[data-ext="hwpx"]::before { content: "📝"; }
.dbg-view-attach-icon[data-ext="ppt"]::before,
.dbg-view-attach-icon[data-ext="pptx"]::before { content: "📈"; }
.dbg-view-attach-icon[data-ext="txt"]::before,
.dbg-view-attach-icon[data-ext="md"]::before,
.dbg-view-attach-icon[data-ext="rtf"]::before  { content: "📃"; }
/* fallback 보강 — data-ext 비어있거나 매칭 없는 경우 클립 */
.dbg-view-attach-icon[data-ext=""]::before,
.dbg-view-attach-icon:not([data-ext])::before { content: "📎"; }
.dbg-view-attach-name {
  color: rgba(229, 231, 235, 0.92);
  word-break: break-word;
}
.dbg-view-attach-size {
  color: rgba(203, 213, 225, 0.55);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.dbg-view-attach-btn {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(180deg, #3B82F6, #2563EB);
  color: #FFFFFF;
  border-radius: 6px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.25);
  transition: transform 0.15s, box-shadow 0.15s;
}
.dbg-view-attach-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
  color: #FFFFFF;
}

/* 링크 */
.dbg-view-link {
  margin-top: 24px;
  padding: 20px 24px;
  background: rgba(147, 197, 253, 0.04);
  border: 1px solid rgba(147, 197, 253, 0.1);
  border-radius: 12px;
}
.dbg-view-link h2 {
  font-size: 14px;
  color: rgba(203, 213, 225, 0.6);
  margin: 0 0 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.dbg-view-link ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.dbg-view-link li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(147, 197, 253, 0.06);
}
.dbg-view-link li:last-child {
  border-bottom: none;
}
.dbg-view-link a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #93C5FD;
  text-decoration: none;
}
.dbg-view-link a:hover {
  color: #BFDBFE;
}
.dbg-view-link-icon {
  flex-shrink: 0;
  font-size: 16px;
}
.dbg-view-link-text {
  flex: 1;
  word-break: break-word;
}
.dbg-view-link-domain {
  color: rgba(148, 163, 184, 0.6);
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* 관리자 전용 */
.dbg-view-admin {
  margin-top: 32px;
  padding: 20px;
  background: rgba(251, 191, 36, 0.04);
  border: 1px dashed rgba(251, 191, 36, 0.25);
  border-radius: 10px;
}
.dbg-view-admin h3 {
  font-size: 12px;
  color: #FBBF24;
  margin: 0 0 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}
.dbg-view-admin dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  margin: 0;
  font-size: 13px;
}
.dbg-view-admin dt {
  color: rgba(203, 213, 225, 0.6);
}
.dbg-view-admin dd {
  color: rgba(229, 231, 235, 0.9);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* Block 3 — Navigation */
.dbg-view-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  align-items: stretch;
}
.dbg-view-nav-prev,
.dbg-view-nav-next {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
  min-width: 0;
}
.dbg-view-nav-prev:hover,
.dbg-view-nav-next:hover {
  background: rgba(147, 197, 253, 0.06);
  transform: translateY(-1px);
}
.dbg-view-nav-prev { text-align: left; }
.dbg-view-nav-next { text-align: right; }
.dbg-view-nav-prev .arrow,
.dbg-view-nav-next .arrow {
  color: rgba(203, 213, 225, 0.55);
  font-size: 13px;
}
.dbg-view-nav-prev .label,
.dbg-view-nav-next .label {
  font-size: 12px;
  color: rgba(203, 213, 225, 0.55);
  letter-spacing: 0.05em;
}
.dbg-view-nav-prev .subject,
.dbg-view-nav-next .subject {
  color: rgba(229, 231, 235, 0.88);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.dbg-view-nav-list {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: #F1F1F1;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  transition: background 0.15s;
}
.dbg-view-nav-list:hover {
  background: rgba(147, 197, 253, 0.08);
}
/* Phase B-3 Sprint 2 P47: 빈 이전/다음 프레임 시각 제거
   :has() 지원 브라우저에서 자동 2컬럼 전환, 미지원에서는 visibility hidden 폴백 */
.dbg-view-nav-empty {
  display: block;
  visibility: hidden;
}
@supports selector(:has(*)) {
  .dbg-view-nav:has(.dbg-view-nav-empty:first-child) {
    grid-template-columns: auto 1fr;
  }
  .dbg-view-nav:has(.dbg-view-nav-empty:last-child) {
    grid-template-columns: 1fr auto;
  }
  .dbg-view-nav .dbg-view-nav-empty { display: none; }
}

/* 모바일 */
@media (max-width: 768px) {
  .dbg-view {
    padding: 24px 16px 60px;
  }
  .dbg-view-header {
    padding-bottom: 20px;
    margin-bottom: 32px;
  }
  .dbg-view-title {
    font-size: 24px;
  }
  .dbg-view-body {
    font-size: 16px;
    line-height: 1.7;
  }
  .dbg-view-attach {
    padding: 16px;
    margin-top: 32px;
  }
  .dbg-view-attach-item {
    grid-template-columns: 24px 1fr auto;
    gap: 8px;
    padding: 10px 0;
  }
  .dbg-view-attach-name {
    grid-column: 2;
    grid-row: 1;
    font-size: 14px;
  }
  .dbg-view-attach-size {
    grid-column: 2;
    grid-row: 2;
    font-size: 12px;
  }
  .dbg-view-attach-btn {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
  }
  .dbg-view-link {
    padding: 16px;
  }
  .dbg-view-nav {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 48px;
    padding-top: 24px;
  }
  .dbg-view-nav-list {
    padding: 14px;
    order: 3;
  }
  .dbg-view-nav-empty {
    display: none;
  }
}

/* ==========================================================================
   Phase B-3 Sprint 1 P27 (2026-04-20): .dbg-remote-* 컴포넌트
   remote 페이지 전용. 6블록 구조 (hero/cta/steps/fallback/tools/helper-guide)
   ========================================================================== */

#ctt_con .dbg-remote {
  max-width: 760px;  /* P40: 840→760 시선 집중 */
  margin: 0 auto;
  padding: 40px 20px;
  color: rgba(229, 231, 235, 0.9);
}

/* Block 1 — Hero (P40: 나이 친화 축소) */
#ctt_con .dbg-remote-hero {
  text-align: center;
  padding: 32px 0 24px;
}
#ctt_con .dbg-remote-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  line-height: 1;
  color: #93C5FD;
}
#ctt_con .dbg-remote-icon svg {
  width: 56px;
  height: 56px;
}
#ctt_con .dbg-remote-hero h1 {
  font-size: 32px;
  font-weight: 700;
  color: #F1F1F1;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  border-bottom: 0;
  padding-bottom: 0;
}
#ctt_con .dbg-remote-lead {
  color: rgba(229, 231, 235, 0.9);  /* 300 → 200 가독 */
  font-size: 24px;                   /* P100 (2026-04-21): 나이친화 18→24 (desktop) */
  line-height: 1.5;                  /* 24 × 1.5 = 36px — 기존 33px에서 보정 */
  font-weight: 500;
  margin: 0;
}
@media (max-width: 768px) {
  #ctt_con .dbg-remote-lead {
    font-size: 20px;                 /* P100: mobile 단계 축소 */
    line-height: 1.55;
  }
}

/* Block 2 — Primary CTA (fold 안 핵심) */
#ctt_con .dbg-remote-cta-primary {
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 16px;
  padding: 32px;
  margin: 32px 0 48px;
}
#ctt_con .dbg-remote-primary-btn {
  display: block;
  background: linear-gradient(135deg, #2563EB, #3B82F6);
  color: #FFFFFF;
  text-align: center;
  padding: 32px 24px;          /* P40: 24 → 32 더 큰 클릭 영역 */
  border-radius: 16px;         /* P40: 12 → 16 */
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);  /* P40 확대 */
}
#ctt_con .dbg-remote-primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.5);
  color: #FFFFFF;
}
#ctt_con .dbg-remote-primary-btn .title {
  display: block;
  font-size: 24px;             /* P40: 20 → 24 */
  font-weight: 700;
  letter-spacing: -0.005em;
}
#ctt_con .dbg-remote-primary-btn .sub {
  display: block;
  font-size: 15px;             /* P40: 13 → 15 */
  opacity: 0.9;
  margin-top: 6px;
  font-weight: 400;
}
#ctt_con .dbg-remote-contact-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  flex-wrap: wrap;
}
#ctt_con .dbg-remote-tel {
  color: #F1F1F1;
  font-size: 22px;           /* P40: 18 → 22 */
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#ctt_con .dbg-remote-tel:hover { color: #93C5FD; }
#ctt_con .dbg-remote-tel svg {
  vertical-align: -2px;
}
#ctt_con .dbg-remote-hours {
  color: rgba(203, 213, 225, 0.7);
  font-size: 15px;           /* P40: 13 → 15 */
}

/* Block 3 — Steps */
#ctt_con .dbg-remote-steps {
  margin-bottom: 48px;
}
#ctt_con .dbg-remote-steps h2 {
  font-size: 22px;            /* P40: 20 → 22 */
  font-weight: 700;
  color: #F1F1F1;
  margin: 0 0 16px;
  text-align: left;           /* P40: center → left 가독성 */
  border-bottom: 0;
  padding-bottom: 0;
}
#ctt_con .dbg-remote-steps ol {
  counter-reset: step;
  list-style: none;            /* P101: OL 기본 marker 명시 제거 */
  padding: 0;
  margin: 0;
}
#ctt_con .dbg-remote-steps > ol > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 0 60px;         /* P101: 좌측 step 원(44) + gap(16) */
  min-height: 44px;
  display: flex;               /* P101: flex + align-items — step-svg 우측 정렬용 */
  align-items: center;
  gap: 12px;
  color: rgba(229, 231, 235, 0.92);
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 16px;         /* P101: border-bottom 제거 + margin으로 분리 */
}
#ctt_con .dbg-remote-steps > ol > li:last-child { margin-bottom: 0; }
#ctt_con .dbg-remote-steps > ol > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  /* P101: 연하늘(12% alpha) → 진한 블루 그라데이션 + 흰 텍스트 (시인성 회복) */
  background: linear-gradient(135deg, #2563EB, #3B82F6);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 20px;
  flex-shrink: 0;
}

/* 44차 P158 (2026-04-21): P42 노란 안내 배너 .dbg-remote-intro 회수.
   근거: Ryan 지시 — 대표전화 관례 있으므로 불필요. co_content DB UPDATE 선행.
   연관: /tmp/co_remote_backup_20260421_1441.sql (mysqldump 24KB) */

/* P41 step 보조 아이콘 (숫자 원 오른쪽) — P101에서 flex 구조로 재배치 */
#ctt_con .dbg-remote-steps > ol > li .step-svg {
  margin-left: auto;           /* P101: absolute → flex 자동 우측 정렬 */
  color: rgba(147, 197, 253, 0.35);
  flex-shrink: 0;
}
#ctt_con .dbg-remote-steps > ol > li .step-svg svg {
  width: 32px;
  height: 32px;
  display: block;
}
@media (max-width: 768px) {
  #ctt_con .dbg-remote-steps > ol > li .step-svg { display: none; }
}

/* Block 4 — Fallback */
#ctt_con .dbg-remote-fallback {
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 48px;
  text-align: center;
}
#ctt_con .dbg-remote-fallback h2 {
  font-size: 15px;
  color: rgba(203, 213, 225, 0.75);
  margin: 0 0 16px;
  font-weight: 600;
  border-bottom: 0;
  padding-bottom: 0;
}
#ctt_con .dbg-remote-secondary-btn {
  display: inline-block;
  color: #93C5FD;
  border: 1px solid #93C5FD;
  background: transparent;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.15s;
}
#ctt_con .dbg-remote-secondary-btn:hover {
  background: rgba(147, 197, 253, 0.1);
  color: #BFDBFE;
}
#ctt_con .dbg-remote-hint {
  color: rgba(148, 163, 184, 0.6);
  font-size: 13px;
  margin: 12px 0 0;
}

/* Block 5, 6 — Details (tools / helper-guide) */
#ctt_con .dbg-remote-tools,
#ctt_con .dbg-remote-helper-guide {
  margin-bottom: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  overflow: hidden;
}
#ctt_con .dbg-remote-tools summary,
#ctt_con .dbg-remote-helper-guide summary {
  cursor: pointer;
  padding: 16px 20px;
  font-weight: 600;
  color: rgba(229, 231, 235, 0.9);
  list-style: none;
  position: relative;
  transition: background 0.15s;
}
#ctt_con .dbg-remote-tools summary:hover,
#ctt_con .dbg-remote-helper-guide summary:hover {
  background: rgba(147, 197, 253, 0.04);
}
#ctt_con .dbg-remote-tools summary::-webkit-details-marker,
#ctt_con .dbg-remote-helper-guide summary::-webkit-details-marker {
  display: none;
}
#ctt_con .dbg-remote-tools summary::after,
#ctt_con .dbg-remote-helper-guide summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(203, 213, 225, 0.6);
  font-size: 20px;
  line-height: 1;
  transition: transform 0.15s;
}
#ctt_con .dbg-remote-tools[open] summary::after,
#ctt_con .dbg-remote-helper-guide[open] summary::after {
  content: "−";
}

#ctt_con .dbg-remote-tools-list {
  list-style: none;
  padding: 0 20px 16px;
  margin: 0;
}
#ctt_con .dbg-remote-tools-list li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
#ctt_con .dbg-remote-tools-list li:last-child { border-bottom: none; }
#ctt_con .dbg-remote-tools-list a {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 12px 0;
  color: rgba(229, 231, 235, 0.88);
  text-decoration: none;
  transition: color 0.15s;
}
#ctt_con .dbg-remote-tools-list a:hover {
  color: #93C5FD;
}
#ctt_con .dbg-remote-tools-list .name {
  font-weight: 600;
}
#ctt_con .dbg-remote-tools-list .sub {
  color: rgba(148, 163, 184, 0.65);
  font-size: 13px;
  margin-left: auto;
}

/* Helper Guide 내부 */
#ctt_con .dbg-remote-helper-content {
  padding: 0 20px 20px;
  color: rgba(229, 231, 235, 0.88);
  font-size: 15px;
  line-height: 1.7;
}
#ctt_con .dbg-remote-helper-content h3 {
  font-size: 14px;
  color: #93C5FD;
  margin: 20px 0 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
#ctt_con .dbg-remote-helper-content ol {
  padding-left: 1.25rem;
  margin: 0 0 16px;
}
#ctt_con .dbg-remote-helper-content ol li {
  margin: 6px 0;
}
#ctt_con .dbg-remote-helper-content strong {
  color: #F1F1F1;
  font-weight: 600;
}
#ctt_con .dbg-remote-helper-note {
  margin-top: 16px;
  padding: 12px 16px;
  background: rgba(147, 197, 253, 0.06);
  border-left: 3px solid #93C5FD;
  border-radius: 4px;
  color: rgba(203, 213, 225, 0.85);
  font-size: 14px;
}

/* 모바일 */
@media (max-width: 768px) {
  #ctt_con .dbg-remote {
    padding: 24px 16px 48px;
  }
  #ctt_con .dbg-remote-hero {
    padding: 24px 0 20px;
  }
  #ctt_con .dbg-remote-icon {
    font-size: 56px;
  }
  #ctt_con .dbg-remote-hero h1 {
    font-size: 24px;
  }
  #ctt_con .dbg-remote-cta-primary {
    padding: 20px;
    margin: 24px 0 32px;
  }
  #ctt_con .dbg-remote-primary-btn {
    padding: 20px 16px;
  }
  #ctt_con .dbg-remote-primary-btn .title {
    font-size: 17px;
  }
  #ctt_con .dbg-remote-contact-row {
    flex-direction: column;
    gap: 4px;
  }
  #ctt_con .dbg-remote-steps h2 {
    font-size: 17px;
  }
  #ctt_con .dbg-remote-steps > ol > li {
    padding-left: 48px;
    font-size: 15px;
    min-height: 36px;
  }
  #ctt_con .dbg-remote-steps > ol > li::before {
    width: 36px;               /* P101 mobile: 44 → 36 (화면 폭 대응) */
    height: 36px;
    font-size: 16px;
  }
  #ctt_con .dbg-remote-tools-list a {
    flex-wrap: wrap;
  }
  #ctt_con .dbg-remote-tools-list .sub {
    margin-left: 0;
    width: 100%;
  }
}

/* ==========================================================================
   Phase B-3 Sprint 2 P33 (2026-04-21): view 본문 inline color 다크 덮어쓰기
   wr_content 에 하드코딩된 짙은 네이비/블랙 계열 색을 다크 배경에서 읽히도록 덮어씀.
   DB 전수 정리는 Phase B-4+ 이관. 이번 라운드는 스킨 수준 패턴 매칭 방어선.
   ========================================================================== */

.dbg-view-body *[style*="color:#2c3e50"],
.dbg-view-body *[style*="color:#34495e"],
.dbg-view-body *[style*="color:#333"],
.dbg-view-body *[style*="color:#222"],
.dbg-view-body *[style*="color:#111"],
.dbg-view-body *[style*="color:#000"],
.dbg-view-body *[style*="color: #2c3e50"],
.dbg-view-body *[style*="color: #34495e"],
.dbg-view-body *[style*="color: #333"],
.dbg-view-body *[style*="color: #222"],
.dbg-view-body *[style*="color: #111"],
.dbg-view-body *[style*="color: #000"],
.dbg-view-body *[style*="color:black"],
.dbg-view-body *[style*="color: black"] {
  color: #F1F1F1 !important;
}

.dbg-view-body *[style*="color:#7f8c8d"],
.dbg-view-body *[style*="color:#95a5a6"],
.dbg-view-body *[style*="color:#999"],
.dbg-view-body *[style*="color:#666"],
.dbg-view-body *[style*="color:#555"],
.dbg-view-body *[style*="color:#777"],
.dbg-view-body *[style*="color: #7f8c8d"],
.dbg-view-body *[style*="color: #95a5a6"],
.dbg-view-body *[style*="color: #999"],
.dbg-view-body *[style*="color: #666"],
.dbg-view-body *[style*="color: #555"],
.dbg-view-body *[style*="color: #777"] {
  color: rgba(203, 213, 225, 0.75) !important;
}

/* 흰 배경도 오버라이드 — 다크 컨테이너 안 밝은 박스 방지 */
.dbg-view-body *[style*="background:#fff"],
.dbg-view-body *[style*="background-color:#fff"],
.dbg-view-body *[style*="background:#ffffff"],
.dbg-view-body *[style*="background-color:#ffffff"],
.dbg-view-body *[style*="background: #fff"],
.dbg-view-body *[style*="background-color: #fff"],
.dbg-view-body *[style*="background:white"],
.dbg-view-body *[style*="background-color:white"] {
  background: rgba(255, 255, 255, 0.04) !important;
}

/* Phase B-3 Sprint 2 hotfix P56: view 본문 이미지 다크 프레임 + figure 지원 */
.dbg-view-body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
/* 인증서·특허·기념 이미지 등 흰 배경 일러스트에 프레임 제공 (alt 키워드 기반) */
.dbg-view-body img[alt*="기념"],
.dbg-view-body img[alt*="감사"],
.dbg-view-body img[alt*="인증"],
.dbg-view-body img[alt*="특허"],
.dbg-view-body img[alt*="아이콘"],
.dbg-view-body img[alt*="Patent"] {
  background: rgba(255, 255, 255, 0.04);
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
/* figure/figcaption 지원 (HTMLPurifier Sprint 0 P16 화이트리스트 통과) */
.dbg-view-body figure {
  margin: 24px 0;
  text-align: center;
}
.dbg-view-body figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: rgba(148, 163, 184, 0.65);
}

/* ==========================================================================
   Phase B-3 Sprint 2 §2 (P35, 2026-04-21): 게시판 히어로 배경 이미지
   bo_table 별 테마 이미지 (raw/ 기존 자산 선별 — 외부 네트워크 의존 0)
   ========================================================================== */

body[class*="bo_"] .db-board-hero {
  position: relative;
  min-height: 280px;
  background-size: cover;
  background-position: center;
  background-color: #0F172A;
  overflow: hidden;
  /* 45차 P178 (2026-04-21): 실금 제거. Ryan board26 하단 1px rgba(255,255,255,0.08) 흰 실금 관찰.
     ::after fade가 blend 의도지만 border가 덧그려져 반대 효과. 명시적 border: 0 리셋. */
  border: 0;
}
body[class*="bo_"] .db-board-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(15, 23, 42, 0.75) 0%,
    rgba(15, 23, 42, 0.88) 60%,
    rgba(15, 23, 42, 0.96) 100%);
  z-index: 1;
}

/* 45차 P172 (2026-04-21): 하단 실금 fade — hero 이미지 → 본문 seamless.
   Ryan 지시 '하단부분에 실금같이 blur 효과가 빠져있어서 이질감'. */
body[class*="bo_"] .db-board-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(15, 23, 42, 0.6) 50%,
    rgb(15, 23, 42) 100%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: none;
  z-index: 2;
}

body[class*="bo_"] .db-board-hero__inner {
  position: relative;
  z-index: 3;
}

/* ==========================================================================
   45차 P172 (2026-04-21): 게시판 hero 이미지 10장 body.bo_* 매핑
   Phase B-3 P87의 3 매핑 블록 전수 대체 — Pexels 개별 이미지 10개 체계로 전환.
   경로: /theme/c006(digitalbank)/img/hero/{bo_table}.{jpg,webp}
   ========================================================================== */

/* REFERENCES 도입 사례 대분류 (board26 + group1 + board21) */
body.bo_board26 .db-board-hero {
  background-image: image-set(
    url('/theme/c006(digitalbank)/img/hero/board26.webp') type('image/webp'),
    url('/theme/c006(digitalbank)/img/hero/board26.jpg')  type('image/jpeg')
  );
}
body.bo_group1 .db-board-hero {
  background-image: image-set(
    url('/theme/c006(digitalbank)/img/hero/group1.webp') type('image/webp'),
    url('/theme/c006(digitalbank)/img/hero/group1.jpg')  type('image/jpeg')
  );
}
body.bo_board21 .db-board-hero {
  background-image: image-set(
    url('/theme/c006(digitalbank)/img/hero/board21.webp') type('image/webp'),
    url('/theme/c006(digitalbank)/img/hero/board21.jpg')  type('image/jpeg')
  );
}

/* RESOURCES 자료실 대분류 (board03 + board04 + pds01 + pds02 + board20) */
body.bo_board03 .db-board-hero {
  background-image: image-set(
    url('/theme/c006(digitalbank)/img/hero/board03.webp') type('image/webp'),
    url('/theme/c006(digitalbank)/img/hero/board03.jpg')  type('image/jpeg')
  );
}
body.bo_board04 .db-board-hero {
  background-image: image-set(
    url('/theme/c006(digitalbank)/img/hero/board04.webp') type('image/webp'),
    url('/theme/c006(digitalbank)/img/hero/board04.jpg')  type('image/jpeg')
  );
}
body.bo_pds01 .db-board-hero {
  background-image: image-set(
    url('/theme/c006(digitalbank)/img/hero/pds01.webp') type('image/webp'),
    url('/theme/c006(digitalbank)/img/hero/pds01.jpg')  type('image/jpeg')
  );
}
body.bo_pds02 .db-board-hero {
  background-image: image-set(
    url('/theme/c006(digitalbank)/img/hero/pds02.webp') type('image/webp'),
    url('/theme/c006(digitalbank)/img/hero/pds02.jpg')  type('image/jpeg')
  );
}
body.bo_board20 .db-board-hero {
  background-image: image-set(
    url('/theme/c006(digitalbank)/img/hero/board20.webp') type('image/webp'),
    url('/theme/c006(digitalbank)/img/hero/board20.jpg')  type('image/jpeg')
  );
}

/* NEWSROOM 뉴스룸 대분류 (board01 + notice; board7 인증·수상은 45차 범위 밖) */
body.bo_board01 .db-board-hero {
  background-image: image-set(
    url('/theme/c006(digitalbank)/img/hero/board01.webp') type('image/webp'),
    url('/theme/c006(digitalbank)/img/hero/board01.jpg')  type('image/jpeg')
  );
}
body.bo_notice .db-board-hero {
  background-image: image-set(
    url('/theme/c006(digitalbank)/img/hero/notice.webp') type('image/webp'),
    url('/theme/c006(digitalbank)/img/hero/notice.jpg')  type('image/jpeg')
  );
}

/* 기타 게시판 (board7 등) — 이미지 없음, fallback 다크 그라데이션 유지 */
body[class*="bo_"]:not(.bo_board26):not(.bo_group1):not(.bo_board21):not(.bo_board03):not(.bo_board04):not(.bo_pds01):not(.bo_pds02):not(.bo_board20):not(.bo_board01):not(.bo_notice) .db-board-hero {
  background-image: none;
}

/* ==========================================================================
   Phase B-3 Sprint 2 §3 (P39, 2026-04-21): company_intro 정체성 헤더 + 카드 보완
   ========================================================================== */

#ctt_con .dbg-company-intro-header {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 1152px;
  margin: 0 auto 32px;
  padding: 24px 28px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 4px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
}
#ctt_con .dbg-company-intro-header__icon {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}
#ctt_con .dbg-company-intro-header__icon svg {
  color: currentColor;
}
#ctt_con .dbg-company-intro-header__body {
  flex: 1 1 auto;
  min-width: 0;
}
#ctt_con .dbg-company-intro-header__title {
  font-size: 22px;
  font-weight: 700;
  color: #F1F1F1;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
  border-bottom: 0;
  padding-bottom: 0;
}
#ctt_con .dbg-company-intro-header__tagline {
  font-size: 14px;
  color: rgba(203, 213, 225, 0.75);
  margin: 0;
  line-height: 1.55;
}

/* modifier: digitalbank — Canon Red tint */
#ctt_con .dbg-company-intro-header--digitalbank {
  border-left-color: #DC2626;
  background: linear-gradient(90deg, rgba(220, 38, 38, 0.06) 0%, rgba(255, 255, 255, 0.02) 50%);
}
#ctt_con .dbg-company-intro-header--digitalbank .dbg-company-intro-header__icon {
  background: rgba(220, 38, 38, 0.1);
  color: #FCA5A5;
}

/* modifier: dbeasy — Green tint */
#ctt_con .dbg-company-intro-header--dbeasy {
  border-left-color: #10B981;
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.06) 0%, rgba(255, 255, 255, 0.02) 50%);
}
#ctt_con .dbg-company-intro-header--dbeasy .dbg-company-intro-header__icon {
  background: rgba(16, 185, 129, 0.1);
  color: #6EE7B7;
}

@media (max-width: 640px) {
  #ctt_con .dbg-company-intro-header {
    padding: 16px 18px;
    gap: 14px;
    border-radius: 10px;
  }
  #ctt_con .dbg-company-intro-header__icon {
    width: 44px;
    height: 44px;
  }
  #ctt_con .dbg-company-intro-header__icon svg {
    width: 36px;
    height: 36px;
  }
  #ctt_con .dbg-company-intro-header__title {
    font-size: 18px;
  }
  #ctt_con .dbg-company-intro-header__tagline {
    font-size: 13px;
  }
}

/* Phase B-3 Sprint 2 P39: 카드 hover 효과 보완 */
#ctt_con .main-card-link {
  transition: transform 0.18s ease, border-color 0.18s ease;
}
#ctt_con .main-card-link img {
  transition: filter 0.18s ease;
}
#ctt_con .main-card-link:hover img {
  filter: brightness(1);
}

/* ==========================================================================
   Phase B-3 Sprint 2 §5 (P43, 2026-04-21): board26 도입 사례 3열 그리드
   Ryan 지시: "4열 → 3열 로 양 늘리기"
   style.css 기본 4열 규칙을 body.bo_board26 범위에서 3열로 오버라이드
   ========================================================================== */

body.bo_board26 .db-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (min-width: 769px) and (max-width: 1023px) {
  body.bo_board26 .db-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media (max-width: 768px) {
  body.bo_board26 .db-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

body.bo_board26 .db-grid__thumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
body.bo_board26 .db-grid__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
body.bo_board26 .db-grid__card:hover .db-grid__thumb img {
  transform: scale(1.06);
}


/* ========================================================================
   43차 P149 (2026-04-21): 41차 P124~P127 CTA 블록 4개 전수 회수.
   제거: Sticky FAB / 홈 hero CTA / GNB Support ::before pulse / 푸터 원격지원 CTA.
   근거: 박제 27 (43차 수정본) — 시그니처 1개 원칙 (GNB Support 엠비언트 녹색).
   후속: P150에서 엠비언트 녹색 라인 테두리 신규 추가.
   ======================================================================== */

/* ========================================================================
   41차 P128 (2026-04-21): db-content-hero 컴포넌트
   content.php 8개 페이지 공통 헤더 (breadcrumb + eyebrow + h1).
   db-board-hero 미러 (min-height 280px, 다크 오버레이).
   hero 이미지 매핑은 42차 범위. 현재는 fallback 다크 단색.
   ======================================================================== */
.db-content-hero {
  position: relative;
  min-height: 280px;
  display: flex;
  align-items: flex-end;
  padding: 40px 24px 32px;
  background: #0F172A;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.db-content-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.75), rgba(15, 23, 42, 0.96));
  z-index: 1;
}

.db-content-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.db-content-hero__crumb {
  display: flex;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 12px;
  align-items: center;
}

.db-content-hero__crumb a {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color 0.2s ease;
}

.db-content-hero__crumb a:hover,
.db-content-hero__crumb a:focus-visible {
  color: rgba(255, 255, 255, 0.9);
}

.db-content-hero__crumb-current {
  color: rgba(255, 255, 255, 0.85);
}

.db-content-hero__eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 8px;
  font-family: var(--font-sans);
}

.db-content-hero__title {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.3;
  font-family: var(--font-sans);
}

@media (max-width: 768px) {
  .db-content-hero {
    min-height: 200px;
    padding: 32px 20px 24px;
  }
  .db-content-hero__title {
    font-size: 24px;
  }
}

/* db-content-hero 도입으로 기존 #wrapper_title/#container_title 제거됨.
   #ctt 컨테이너는 hero 다음 등장하므로 상단 padding 조정. */
body:has(.db-content-hero) #ctt {
  padding-top: 2rem;
}

/* ========================================================================
   43차 P150 (2026-04-21): GNB Support 엠비언트 녹색 라인 테두리
   박제 27 수정본 — 시그니처 1개 진입점.
   41차 P126의 ::before pulse dot 대체 (SHOP 옆 혼동 해소).
   Support 메뉴 둘레 라운드 border + glow + 2.8s pulse.
   ======================================================================== */
.gnbwaterfall-mainmenu--support > a {
  position: relative;
  padding: 8px 14px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.gnbwaterfall-mainmenu--support > a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  border: 1.5px solid rgba(34, 197, 94, 0.4);
  box-shadow:
    0 0 12px rgba(34, 197, 94, 0.3),
    inset 0 0 8px rgba(34, 197, 94, 0.1);
  animation: dbg-ambient-pulse 2.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes dbg-ambient-pulse {
  0%, 100% {
    border-color: rgba(34, 197, 94, 0.35);
    box-shadow:
      0 0 10px rgba(34, 197, 94, 0.25),
      inset 0 0 6px rgba(34, 197, 94, 0.08);
  }
  50% {
    border-color: rgba(34, 197, 94, 0.6);
    box-shadow:
      0 0 18px rgba(34, 197, 94, 0.45),
      inset 0 0 12px rgba(34, 197, 94, 0.18);
  }
}

.gnbwaterfall-mainmenu--support > a:hover::after,
.gnbwaterfall-mainmenu--support > a:focus-visible::after {
  border-color: rgba(34, 197, 94, 0.7);
  box-shadow:
    0 0 20px rgba(34, 197, 94, 0.5),
    inset 0 0 14px rgba(34, 197, 94, 0.2);
}

/* 모바일 (1200px 미만) = 오프캔버스 메뉴라 엠비언트 숨김 */
@media (max-width: 1199px) {
  .gnbwaterfall-mainmenu--support > a {
    padding: inherit;
    border-radius: 0;
  }
  .gnbwaterfall-mainmenu--support > a::after {
    display: none;
  }
}

/* ========================================================================
   43차 P153 (2026-04-21): 푸터 양사 border-left 카드
   ========================================================================
   Ryan 지시:
   - Canon Honors Club Partner 중앙 배지 제거 (.dbg-footer-partnership / .dbg-canon-badge)
   - 상단 .dbg-footer-badges 2뱃지 제거
   - 디지탈뱅크 ↔ 디비이지솔루션 2카드 border-left 컬러 분리
   벤치마크: digitalbank_guide / dbeasy_guide 헤더 카드 일관성
   ======================================================================== */
.dbg-footer-companies {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 32px 0;
  margin: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dbg-footer-company {
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  border-left: 3px solid transparent;
}

/* 디지탈뱅크 — Canon Red */
.dbg-footer-company--digitalbank {
  border-left-color: #DC2626;
}

/* 디비이지솔루션 — Emerald */
.dbg-footer-company--dbeasy {
  border-left-color: #10B981;
}

.dbg-footer-company h5 {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 14px 0;
  letter-spacing: -0.01em;
}

.dbg-footer-company dl {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 6px 12px;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

.dbg-footer-company dt {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400;
}

.dbg-footer-company dd {
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

.dbg-footer-company dd a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.dbg-footer-company dd a:hover,
.dbg-footer-company dd a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

/* 모바일: 1컬럼 */
@media (max-width: 768px) {
  .dbg-footer-companies {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px 0;
  }
  .dbg-footer-company {
    padding: 16px 20px;
  }
  .dbg-footer-company dl {
    grid-template-columns: 70px 1fr;
    font-size: 12px;
  }
}

/* ========================================================================
   44차 P157 (2026-04-21): 원격지원 페이지 우측 쏠림 근본 해결
   ========================================================================
   원인: default.css .container { float: right; width: 940px } 레거시.
   .wrapper (1200px, viewport 중앙) 안에서 .container가 우측 정렬로
   좌측 260px 빈 공간 발생 → viewport center 대비 +123px offset.
   
   해결: body.co_remote scope로 .container float 해제 + wrapper 풀 사용.
   .aside 숨김도 함께 (기존 .db-dark-page 규칙 미러).
   
   영향 범위: co_remote 페이지만. 타 content/게시판 페이지는 45차 Sprint D에서 일괄.
   ======================================================================== */
body.co_remote .container {
  float: none;
  margin: 0 auto;
  max-width: 1200px;
  width: 100%;
  padding: 0;
}

body.co_remote .aside,
body.co_remote #lsb {
  display: none;
}

@media (max-width: 768px) {
  body.co_remote .container {
    max-width: 100%;
    padding: 0 16px;
  }
}

/* ========================================================================
   44차 P160 (2026-04-21): db-content-hero body.co_remote 분기
   ========================================================================
   Ryan 지시: 원격지원 페이지 배경 고해상도 이미지로 어우러지게.
   평가자 컨셉 A (Dark Tech Workspace) + CC 자율 판단 (Unsplash 차단 → Pexels).
   
   - 이미지: Pexels Kevin Ku 'Eyeglasses reflecting computer code on a monitor'
   - webp 우선 / jpg fallback (image-set)
   - 다크 오버레이 강화 (텍스트 가독성 + 본문 seamless 연결)
   ======================================================================== */
body.co_remote .db-content-hero {
  background-image: image-set(
    url('/theme/c006(digitalbank)/img/hero/remote_bg.webp') type('image/webp'),
    url('/theme/c006(digitalbank)/img/hero/remote_bg.jpg') type('image/jpeg')
  );
  background-size: cover;
  /* 45차 P168 (2026-04-21): NETWORK-2 텍스트를 hero 우측 가장자리로 이동.
     breadcrumb + h1 '원격지원 서비스'로 시선 복귀. */
  background-position: right center;
  background-repeat: no-repeat;
  min-height: 320px;
}

body.co_remote .db-content-hero::before {
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.72) 0%,
    rgba(15, 23, 42, 0.85) 55%,
    rgba(15, 23, 42, 0.95) 90%,
    rgb(15, 23, 42) 100%
  );
}

@media (max-width: 768px) {
  body.co_remote .db-content-hero {
    min-height: 220px;
    /* 45차 P168: 모바일은 좌측 crop으로 NETWORK-2 텍스트 회피 (이미지 좌반부만 노출). */
    background-position: left center;
  }
  body.co_remote .db-content-hero::before {
    background: linear-gradient(
      180deg,
      rgba(15, 23, 42, 0.8) 0%,
      rgba(15, 23, 42, 0.96) 100%
    );
  }
}

/* ========================================================================
   44차 P161 (2026-04-21): body.co_remote 본문 조정
   ========================================================================
   - db-content-hero 배경 이미지와 어우러짐 위해 .dbg-remote padding 상향
   - .dbg-remote-hero 모니터 SVG 56→64px (Sprint 2 박제 나이 친화 확대 연속)
   ======================================================================== */
/* 45차 P166 (2026-04-21): 44차 P161 specificity 회수.
   이전 body.co_remote .dbg-remote (0,0,2,1)가 기존 #ctt_con .dbg-remote (0,1,1,0) cascade 패배.
   #ctt_con 추가로 specificity 상향 — 박제 29 (computed ≠ CSS 정의) 실전 연속 사례. */
body.co_remote #ctt_con .dbg-remote {
  padding: 48px 24px 64px;
}

body.co_remote #ctt_con .dbg-remote-hero .dbg-remote-icon svg {
  width: 64px;
  height: 64px;
}

/* ========================================================================
   45차 P169 (2026-04-21): 엠비언트 녹색 테두리 축소 (slim)
   ========================================================================
   Ryan 지시: 테두리가 더 좁게, 텍스트와 테두리 여백 축소.
   평가자 권고값 6px 12px 채택 (4px 10px 타이트 / 6px 12px 균형 중 후자).
   
   방식: specificity 상향 (P166 전례 일관, !important 지양 원칙).
   - 원본 .gnbwaterfall-mainmenu--support > a (0,0,2,1) = 21
   - 본 P169 #gnbwaterfall .gnbwaterfall-mainmenu.gnbwaterfall-mainmenu--support > a
       (id 1 + class 2 + type 1) = 121 → 원본 덮기
   
   border-radius 8 → 6 동반 축소로 시각 일관성.
   ::after 테두리도 6px로 동기화.
   ======================================================================== */
#gnbwaterfall .gnbwaterfall-mainmenu.gnbwaterfall-mainmenu--support > a {
  padding: 6px 12px;
  border-radius: 6px;
}

#gnbwaterfall .gnbwaterfall-mainmenu.gnbwaterfall-mainmenu--support > a::after {
  border-radius: 6px;
}

/* ========================================================================
   46차 P186 (2026-04-21): body.co_digitalbank_guide / body.co_dbeasy_guide
   db-content-hero 배경 이미지 분기 (Sprint E 2층 통합 페이지)
   ======================================================================== */
body.co_digitalbank_guide .db-content-hero {
  background-image: image-set(
    url('/theme/c006(digitalbank)/img/hero/digitalbank_guide.webp') type('image/webp'),
    url('/theme/c006(digitalbank)/img/hero/digitalbank_guide.jpg')  type('image/jpeg')
  );
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  min-height: 320px;
}

body.co_dbeasy_guide .db-content-hero {
  background-image: image-set(
    url('/theme/c006(digitalbank)/img/hero/dbeasy_guide.webp') type('image/webp'),
    url('/theme/c006(digitalbank)/img/hero/dbeasy_guide.jpg')  type('image/jpeg')
  );
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  min-height: 320px;
}

/* 양사 hero 오버레이 톤 맞춤 (co_remote와 동일 강화) */
body.co_digitalbank_guide .db-content-hero::before,
body.co_dbeasy_guide .db-content-hero::before {
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.72) 0%,
    rgba(15, 23, 42, 0.85) 55%,
    rgba(15, 23, 42, 0.95) 90%,
    rgb(15, 23, 42) 100%
  );
}

@media (max-width: 768px) {
  body.co_digitalbank_guide .db-content-hero,
  body.co_dbeasy_guide .db-content-hero {
    min-height: 220px;
  }
}

/* ========================================================================
   46차 P188 (2026-04-21): Sprint E 탭 UI — 데스크톱 horizontal + 모바일 stack
   적용: body.co_digitalbank_guide / body.co_dbeasy_guide (P187 스켈레톤)
   박제 27 준수 (GNB Support 시그니처 1개와 충돌 없음, content 내부 탭)
   ======================================================================== */
#ctt_con .dbg-tabs-wrapper {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 48px 24px 64px;
}

#ctt_con .dbg-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 48px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#ctt_con .dbg-tab {
  flex: 0 0 auto;
  padding: 16px 24px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms ease;
  white-space: nowrap;
}

#ctt_con .dbg-tab:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.03);
}

#ctt_con .dbg-tab--active {
  color: #fff;
  font-weight: 600;
}

/* 디지탈뱅크 Canon Red 엑센트 */
body.co_digitalbank_guide #ctt_con .dbg-tab--active {
  border-bottom-color: #DC2626;
}

/* 디비이지솔루션 Emerald 엑센트 */
body.co_dbeasy_guide #ctt_con .dbg-tab--active {
  border-bottom-color: #10B981;
}

#ctt_con .dbg-tab:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.7);
  outline-offset: 2px;
}

#ctt_con .dbg-tab-panel {
  display: none;
}

#ctt_con .dbg-tab-panel--active {
  display: block;
  animation: dbg-panel-fade-in 300ms ease-out;
}

@keyframes dbg-panel-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 모바일: 탭 bar stack + padding 축소 */
@media (max-width: 768px) {
  #ctt_con .dbg-tabs-wrapper {
    padding: 32px 16px 48px;
  }
  #ctt_con .dbg-tabs {
    flex-wrap: wrap;
    border-bottom: none;
    margin-bottom: 24px;
  }
  #ctt_con .dbg-tab {
    flex: 1 0 50%;
    padding: 14px 12px;
    font-size: 14px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.08);
  }
  #ctt_con .dbg-tab--active {
    background: rgba(255, 255, 255, 0.04);
  }
  body.co_digitalbank_guide #ctt_con .dbg-tab--active {
    border-bottom-color: #DC2626;
  }
  body.co_dbeasy_guide #ctt_con .dbg-tab--active {
    border-bottom-color: #10B981;
  }
}

/* ========================================================================
   46차 P189 (2026-04-21): 기업개요 탭 CSS
   패널 내부 그리드 + 배지 + 리스트 + 정보 dl
   ======================================================================== */
#ctt_con .dbg-overview-grid {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

#ctt_con .dbg-overview-hero {
  text-align: center;
  padding: 24px 16px 32px;
}

#ctt_con .dbg-overview-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

#ctt_con .dbg-overview-badge--canon {
  background: rgba(220, 38, 38, 0.15);
  border: 1px solid rgba(220, 38, 38, 0.4);
  color: #FCA5A5;
}

#ctt_con .dbg-overview-badge--smartoffice {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #6EE7B7;
}

#ctt_con .dbg-overview-hero h2 {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}

#ctt_con .dbg-overview-lead {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
  margin: 0;
}

#ctt_con .dbg-overview-sections {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

#ctt_con .dbg-overview-section {
  padding: 24px 28px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

#ctt_con .dbg-overview-section h3 {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

#ctt_con .dbg-business-list,
#ctt_con .dbg-client-list,
#ctt_con .dbg-solution-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#ctt_con .dbg-business-list li,
#ctt_con .dbg-client-list li,
#ctt_con .dbg-solution-list li {
  padding-left: 20px;
  position: relative;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  line-height: 1.55;
}

#ctt_con .dbg-business-list li::before,
#ctt_con .dbg-client-list li::before,
#ctt_con .dbg-solution-list li::before {
  content: "•";
  position: absolute;
  left: 4px;
  top: 0;
}

/* 양사 컬러 분기 — list bullet */
body.co_digitalbank_guide #ctt_con .dbg-business-list li::before,
body.co_digitalbank_guide #ctt_con .dbg-client-list li::before,
body.co_digitalbank_guide #ctt_con .dbg-solution-list li::before {
  color: #F87171;
}

body.co_dbeasy_guide #ctt_con .dbg-business-list li::before,
body.co_dbeasy_guide #ctt_con .dbg-client-list li::before,
body.co_dbeasy_guide #ctt_con .dbg-solution-list li::before {
  color: #34D399;
}

#ctt_con .dbg-solution-list strong {
  color: #fff;
  font-weight: 700;
}

#ctt_con .dbg-overview-info {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px 16px;
  margin: 0;
  font-size: 14px;
}

#ctt_con .dbg-overview-info dt {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 400;
}

#ctt_con .dbg-overview-info dd {
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

#ctt_con .dbg-overview-info dd a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.25);
}

#ctt_con .dbg-overview-info dd a:hover {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 768px) {
  #ctt_con .dbg-overview-sections {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  #ctt_con .dbg-overview-hero h2 {
    font-size: 22px;
  }
  #ctt_con .dbg-overview-section {
    padding: 20px 22px;
  }
  #ctt_con .dbg-overview-info {
    grid-template-columns: 90px 1fr;
    font-size: 13px;
  }
}

/* ========================================================================
   46차 P190 (2026-04-21): CEO 인사말 탭 CSS
   양사 공통 + --text-only (디비이지) 분기
   근자필성 이미지 완전 배제 (Ryan B 지시)
   ======================================================================== */
#ctt_con .dbg-ceo-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  align-items: flex-start;
  max-width: 900px;
  margin: 0 auto;
}

/* 디비이지 text-only: 사진 없음, 메시지 중앙 */
#ctt_con .dbg-ceo-layout--text-only {
  grid-template-columns: 1fr;
  max-width: 720px;
}

#ctt_con .dbg-ceo-photo {
  text-align: center;
}

#ctt_con .dbg-ceo-photo img {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.12);  /* P202: 다크 slate-900 배경 확정 복원 */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

#ctt_con .dbg-ceo-caption {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);  /* P202: 다크 slate-900 배경 기준 복원 */
  letter-spacing: -0.01em;
}

/* P202 핫픽스 (2026-04-21): 실환경 body 다크 slate-900 (rgb(15,23,42)) 기준 복원.
   직전 light 기준 수정이 CC 오판 — 평가자 Chrome MCP 실측으로 다크 확정. */
#ctt_con .dbg-ceo-message {
  color: rgba(255, 255, 255, 0.85);  /* 다크 배경 위 본문 */
  line-height: 1.8;
  font-size: 15px;
}

#ctt_con .dbg-ceo-message--centered {
  text-align: left;
}

#ctt_con .dbg-ceo-message h3 {
  font-size: 18px;
  font-weight: 700;
  color: #F1F5F9;  /* slate-100 */
  margin: 24px 0 12px;
  letter-spacing: -0.02em;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#ctt_con .dbg-ceo-message h3:first-child {
  margin-top: 0;
}

/* 양사 h3 엑센트 색상 (왼쪽 테두리) */
body.co_digitalbank_guide #ctt_con .dbg-ceo-message h3 {
  border-left: 3px solid #DC2626;
  padding-left: 12px;
  border-bottom: none;
}

body.co_dbeasy_guide #ctt_con .dbg-ceo-message h3 {
  border-left: 3px solid #10B981;
  padding-left: 12px;
  border-bottom: none;
}

#ctt_con .dbg-ceo-message p {
  margin: 0 0 14px;
}

/* 제품명/강조 — 양사 컬러 분기 (다크 배경 위에서 accent로 잘 보임) */
#ctt_con .dbg-ceo-message strong {
  color: #E2E8F0;  /* slate-200, 기본 강조 */
  font-weight: 700;
}

body.co_digitalbank_guide #ctt_con .dbg-ceo-message strong {
  color: #FCA5A5;  /* Canon Red 300, 다크 배경 위 가독 보장 */
}

body.co_dbeasy_guide #ctt_con .dbg-ceo-message strong {
  color: #6EE7B7;  /* Emerald 300, 다크 배경 위 가독 보장 */
}

#ctt_con .dbg-ceo-thanks {
  margin-top: 28px !important;
  font-weight: 600;
  color: #F1F5F9;  /* slate-100 */
}

#ctt_con .dbg-ceo-signature {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: right;
  line-height: 1.5;
}

#ctt_con .dbg-ceo-signature span {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
}

#ctt_con .dbg-ceo-signature strong {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #F1F5F9;  /* 이름 slate-100, 박제 36 빨강 금지 */
  margin-top: 4px;
  letter-spacing: 0.15em;
}

/* ============================================================
   박제 36 선행 — 대표 이름은 빨강 계열 금지 (한국 문화 터부)
   양사 분기 accent (.dbg-ceo-message strong Canon Red/Emerald)가
   specificity로 signature의 이름 strong까지 override되는 것 차단.
   이름 표기는 slate-900 강제.
   ============================================================ */
body.co_digitalbank_guide #ctt_con .dbg-ceo-signature strong,
body.co_dbeasy_guide #ctt_con .dbg-ceo-signature strong {
  color: #F1F5F9 !important;  /* 다크 배경 기준, 빨강/에메랄드 양사 accent override 차단 */
}

@media (max-width: 768px) {
  #ctt_con .dbg-ceo-layout {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }
  #ctt_con .dbg-ceo-photo img {
    width: 180px;
    height: 180px;
  }
  #ctt_con .dbg-ceo-message {
    text-align: left;
    font-size: 14px;
  }
  #ctt_con .dbg-ceo-message h3 {
    font-size: 16px;
  }
}

/* ========================================================================
   46차 P191 (2026-04-21): 연혁 타임라인 (Apple.com/kr 스타일 수직)
   border-left 2px + 원형 마커 + fade-in
   양사 컬러 분기 (Canon Red / Emerald)
   ======================================================================== */
#ctt_con .dbg-timeline-hero {
  text-align: center;
  margin-bottom: 48px;
  padding: 0 16px;
}

#ctt_con .dbg-timeline-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 12px;
}

#ctt_con .dbg-timeline-hero h2 {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}

#ctt_con .dbg-timeline-lead {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}

#ctt_con .dbg-timeline {
  list-style: none;
  padding: 0 16px 0 48px;
  margin: 0;
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}

#ctt_con .dbg-timeline::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: rgba(255, 255, 255, 0.12);
}

#ctt_con .dbg-timeline__item {
  position: relative;
  padding: 16px 0 16px 32px;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: flex-start;
}

#ctt_con .dbg-timeline__marker {
  position: absolute;
  left: -32px;
  top: 22px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  border: 2px solid #0F172A;
  z-index: 2;
  transition: transform 200ms, background-color 200ms;
}

/* 양사 마커 기본 */
body.co_digitalbank_guide #ctt_con .dbg-timeline__marker {
  background: #DC2626;
}

body.co_dbeasy_guide #ctt_con .dbg-timeline__marker {
  background: #10B981;
}

/* 현재(2026) 마커 pulsing */
#ctt_con .dbg-timeline__marker--current {
  width: 16px;
  height: 16px;
  left: -34px;
  top: 20px;
  animation: dbg-timeline-pulse 2.4s infinite ease-in-out;
}

@keyframes dbg-timeline-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
  }
}

/* 원시(창립) 마커 — 기본보다 조금 크고 보더 강조 */
#ctt_con .dbg-timeline__marker--origin {
  width: 14px;
  height: 14px;
  left: -33px;
  top: 21px;
  border-width: 3px;
  background: rgba(255, 255, 255, 0.85);
}

body.co_digitalbank_guide #ctt_con .dbg-timeline__marker--origin {
  background: #fff;
  border-color: #DC2626;
}

body.co_dbeasy_guide #ctt_con .dbg-timeline__marker--origin {
  background: #fff;
  border-color: #10B981;
}

#ctt_con .dbg-timeline__year {
  font-size: 18px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: -0.01em;
  font-family: var(--font-sans);
  align-self: center;
}

#ctt_con .dbg-timeline__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#ctt_con .dbg-timeline__date {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.04em;
}

#ctt_con .dbg-timeline__body h3 {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* highlight 항목 — 텍스트 강조 */
#ctt_con .dbg-timeline__item--highlight .dbg-timeline__body h3 {
  font-weight: 600;
  color: #fff;
}

/* 현재 항목 — 가장 강조 */
#ctt_con .dbg-timeline__item--current .dbg-timeline__body h3 {
  font-weight: 600;
  color: #fff;
  font-size: 15px;
}

#ctt_con .dbg-timeline__item--current .dbg-timeline__year {
  color: #fff;
  font-size: 20px;
}

/* 창립 항목 — subtle accent */
#ctt_con .dbg-timeline__item--origin .dbg-timeline__body h3 {
  font-weight: 700;
  color: #fff;
}

/* hover — subtle lift */
#ctt_con .dbg-timeline__item:hover .dbg-timeline__marker {
  transform: scale(1.2);
}

/* 모바일 */
@media (max-width: 768px) {
  #ctt_con .dbg-timeline {
    padding: 0 0 0 32px;
  }
  #ctt_con .dbg-timeline::before {
    left: 12px;
  }
  #ctt_con .dbg-timeline__marker {
    left: -24px;
    width: 10px;
    height: 10px;
  }
  #ctt_con .dbg-timeline__marker--current {
    width: 12px;
    height: 12px;
    left: -25px;
  }
  #ctt_con .dbg-timeline__item {
    padding: 12px 0 12px 16px;
    grid-template-columns: 48px 1fr;
    gap: 10px;
  }
  #ctt_con .dbg-timeline__year {
    font-size: 16px;
  }
  #ctt_con .dbg-timeline__body h3 {
    font-size: 13px;
  }
  #ctt_con .dbg-timeline-hero h2 {
    font-size: 22px;
  }
}

/* ========================================================================
   46차 P192 (2026-04-21): 조직도 CSS 재작성
   HTML 구조 100% 보존, CSS만 다크모드 카드 재설계
   Desktop: 3 level 세로 스택 + 계층 연결선
   Mobile (P193): accordion
   ======================================================================== */
#ctt_con .dbg-org-hero {
  text-align: center;
  margin-bottom: 56px;
}

#ctt_con .dbg-org-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 12px;
}

#ctt_con .dbg-org-hero h2 {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: -0.02em;
}

#ctt_con .dbg-org-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding: 16px;
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
}

#ctt_con .dbg-org-chart__level {
  display: flex;
  justify-content: center;
  gap: 24px;
  position: relative;
  width: 100%;
}

/* CEO 아래 ↓ 연결선 */
#ctt_con .dbg-org-chart__level--ceo::after {
  content: "";
  position: absolute;
  bottom: -48px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 48px;
  background: rgba(255, 255, 255, 0.12);
  z-index: 0;
}

/* 임원 레벨 가로선 + 수직선 */
#ctt_con .dbg-org-chart__level--executives::before {
  content: "";
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 24px;
  background: rgba(255, 255, 255, 0.12);
}

#ctt_con .dbg-org-chart__level--executives::after {
  content: "";
  position: absolute;
  bottom: -48px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 48px;
  background: rgba(255, 255, 255, 0.12);
}

/* 부서 3 컬럼 grid + 상단 가로 연결선 */
#ctt_con .dbg-org-chart__level--departments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1080px;
  padding-top: 0;
}

#ctt_con .dbg-org-chart__level--departments::before {
  content: "";
  position: absolute;
  top: -24px;
  left: 16.66%;
  right: 16.66%;
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
}

/* 각 부서 상단에서 가로선으로 올라가는 수직 연결 */
#ctt_con .dbg-org-department::before {
  content: "";
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 24px;
  background: rgba(255, 255, 255, 0.12);
}

#ctt_con .dbg-org-department {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  position: relative;
}

/* 노드 카드 공통 */
#ctt_con .dbg-org-node {
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  transition: all 200ms ease;
  z-index: 1;
  min-width: 140px;
}

#ctt_con .dbg-org-node:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-2px);
}

/* CEO 카드 — 강조 */
#ctt_con .dbg-org-node--ceo {
  padding: 22px 56px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border-left: 4px solid transparent;
}

body.co_digitalbank_guide #ctt_con .dbg-org-node--ceo {
  border-left-color: #DC2626;
}

body.co_dbeasy_guide #ctt_con .dbg-org-node--ceo {
  border-left-color: #10B981;
}

/* 임원 카드 */
#ctt_con .dbg-org-node--executive {
  min-width: 160px;
}

/* 부서 헤더 카드 — top accent */
#ctt_con .dbg-org-node--department {
  font-weight: 600;
  font-size: 16px;
  border-top: 2px solid rgba(255, 255, 255, 0.15);
}

body.co_digitalbank_guide #ctt_con .dbg-org-node--department {
  border-top-color: rgba(220, 38, 38, 0.7);
}

body.co_dbeasy_guide #ctt_con .dbg-org-node--department {
  border-top-color: rgba(16, 185, 129, 0.7);
}

#ctt_con .dbg-org-node--department:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.7);
  outline-offset: 2px;
}

/* 팀 목록 */
#ctt_con .dbg-org-teams {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#ctt_con .dbg-org-team {
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
  text-align: center;
}

/* ========================================================================
   46차 P193 (2026-04-21): 조직도 모바일 accordion
   768px 이하에서 부서 노드 접기/펼치기 JS 토글 (.is-collapsed)
   ======================================================================== */
@media (max-width: 768px) {
  #ctt_con .dbg-org-hero {
    margin-bottom: 32px;
  }
  #ctt_con .dbg-org-hero h2 {
    font-size: 22px;
  }

  #ctt_con .dbg-org-chart {
    gap: 32px;
    padding: 16px 8px;
  }

  #ctt_con .dbg-org-chart__level--ceo::after {
    bottom: -32px;
    height: 32px;
  }

  #ctt_con .dbg-org-chart__level--executives {
    flex-direction: column;
    gap: 12px;
  }

  #ctt_con .dbg-org-chart__level--executives::before,
  #ctt_con .dbg-org-chart__level--executives::after {
    display: none;
  }

  #ctt_con .dbg-org-node {
    padding: 14px 20px;
    font-size: 14px;
    min-width: 120px;
  }

  #ctt_con .dbg-org-node--ceo {
    padding: 18px 32px;
    font-size: 16px;
  }

  #ctt_con .dbg-org-chart__level--departments {
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 100%;
  }

  #ctt_con .dbg-org-chart__level--departments::before,
  #ctt_con .dbg-org-department::before {
    display: none;
  }

  #ctt_con .dbg-org-department {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    overflow: hidden;
    gap: 0;
  }

  #ctt_con .dbg-org-department .dbg-org-node--department {
    cursor: pointer;
    background: transparent;
    border: 0;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding: 14px 20px;
  }

  body.co_digitalbank_guide #ctt_con .dbg-org-department .dbg-org-node--department {
    border-left: 3px solid #DC2626;
    border-top: 0;
  }

  body.co_dbeasy_guide #ctt_con .dbg-org-department .dbg-org-node--department {
    border-left: 3px solid #10B981;
    border-top: 0;
  }

  #ctt_con .dbg-org-department .dbg-org-node--department::after {
    content: "▾";
    margin-left: 12px;
    font-size: 12px;
    transition: transform 200ms ease;
    color: rgba(255, 255, 255, 0.6);
  }

  #ctt_con .dbg-org-department.is-collapsed .dbg-org-node--department::after {
    transform: rotate(-90deg);
  }

  #ctt_con .dbg-org-department.is-collapsed .dbg-org-teams {
    display: none;
  }

  #ctt_con .dbg-org-teams {
    padding: 8px 12px 12px;
    gap: 6px;
  }

  #ctt_con .dbg-org-team {
    font-size: 12px;
    padding: 8px 14px;
    text-align: left;
  }
}

/* ============================================================
   46.5차 Sprint (2026-04-21, P202 다크 배경 재작성):
   회사소개 신규 간소화 규칙.
   실환경 body 배경 = rgb(15, 23, 42) slate-900 확정 (평가자 Chrome MCP 실측).
   JS 0 / script 0 / button 0 / data-* 0 / HTMLPurifier 통과.
   ============================================================ */

#ctt_con .dbg-section-title {
  margin: 56px 0 20px;
  padding-bottom: 12px;
  font-size: 26px;
  font-weight: 700;
  color: #F1F5F9;  /* slate-100, 다크 배경 기준 */
  border-bottom: 2px solid rgba(255, 255, 255, 0.12);
  letter-spacing: -0.01em;
}

body.co_digitalbank_guide #ctt_con .dbg-section-title {
  border-bottom-color: #DC2626;
}

body.co_dbeasy_guide #ctt_con .dbg-section-title {
  border-bottom-color: #10B981;
}

#ctt_con .dbg-ceo-greeting {
  padding: 8px 0 32px;
}

#ctt_con .dbg-location {
  padding: 8px 0 48px;
}

#ctt_con .dbg-location-info {
  margin-bottom: 24px;
  padding: 24px 28px;
  background: rgba(255, 255, 255, 0.04);  /* 다크 배경 위 subtle surface */
  border-radius: 10px;
  border-left: 4px solid rgba(255, 255, 255, 0.12);
}

body.co_digitalbank_guide #ctt_con .dbg-location--digitalbank .dbg-location-info {
  border-left-color: #DC2626;
}

body.co_dbeasy_guide #ctt_con .dbg-location--dbeasy .dbg-location-info {
  border-left-color: #10B981;
}

#ctt_con .dbg-location-list {
  display: grid;
  grid-template-columns: 120px 1fr;
  row-gap: 14px;
  column-gap: 20px;
  margin: 0;
}

#ctt_con .dbg-location-list dt {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);  /* slate-400 급 보조 */
  font-size: 14px;
}

#ctt_con .dbg-location-list dd {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);  /* 본문 값 강조 */
  font-size: 15px;
  line-height: 1.6;
}

#ctt_con .dbg-location-list dd a[href^="tel:"] {
  font-weight: 700;
  color: inherit;
  text-decoration: none;
}

body.co_digitalbank_guide #ctt_con .dbg-location-list dd a[href^="tel:"] {
  color: #FCA5A5;  /* Canon Red 300, 다크 가독 */
}

body.co_dbeasy_guide #ctt_con .dbg-location-list dd a[href^="tel:"] {
  color: #6EE7B7;  /* Emerald 300, 다크 가독 */
}

#ctt_con .dbg-location-map {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

#ctt_con .dbg-location-map iframe {
  display: block;
  border: 0;
  width: 100%;
  height: 360px;
  /* Google Maps iframe은 자체 light 배경 유지 (지도 가독성) */
}

@media (max-width: 600px) {
  #ctt_con .dbg-section-title {
    margin: 40px 0 16px;
    font-size: 22px;
  }
  #ctt_con .dbg-location-info {
    padding: 18px 20px;
  }
  #ctt_con .dbg-location-list {
    grid-template-columns: 1fr;
    row-gap: 4px;
  }
  #ctt_con .dbg-location-list dt {
    margin-top: 8px;
  }
  #ctt_con .dbg-location-map iframe {
    height: 260px;
  }
}

/* ============================================================
   46.5차 S7 (2026-04-21): Trust 03 섹션 인프라 히어로 블록.
   map_db.png 배경 + NETWORK 17 거점 + mini stat (1,900 고객사).
   4 stat 카드 중 "1,900 곳"을 이 블록으로 흡수하여 3 카드로 축소.
   ============================================================ */

/* Sprint H B-1 → Sprint J J-2 (2026-04-22): overlap 제거.
   평가자 실측 — -40px이 2,750/1,900 카드 하단을 인프라 다크 영역으로 10px 침범.
   Ryan 체감 "카드가 떠서 인프라 영역 침범". 옵션 A (overlap 제거 + 호흡 공간). */
#dbg-trust .dbg-stats {
  margin-bottom: 72px;
  position: relative;
  z-index: 1;
}
.dbg-trust-infra {
  position: relative;
  margin: 0 0 40px;
  padding: 100px 0;
  background: linear-gradient(135deg, #0A1628 0%, #0F172A 100%);
  border-radius: 24px;
  overflow: hidden;
  min-height: 520px;
}

.dbg-trust-infra::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: image-set(
    url('../img/trust/map_db.webp') type('image/webp'),
    url('../img/trust/map_db.png') type('image/png')
  );
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right center;
  opacity: 0.85;
  pointer-events: none;
}

.dbg-trust-infra::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(10, 22, 40, 0.95) 0%,
    rgba(10, 22, 40, 0.8) 40%,
    rgba(10, 22, 40, 0) 100%);
  pointer-events: none;
}

.dbg-trust-infra__container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
}

.dbg-trust-infra__copy {
  max-width: 560px;
  color: #FFFFFF;
}

.dbg-trust-infra__badge {
  display: inline-block;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #60A5FA;
  background: rgba(96, 165, 250, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 999px;
  margin-bottom: 32px;
}

.dbg-trust-infra__title {
  font-size: clamp(36px, 4.5vw, 52px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.03em;
  margin: 0 0 28px;
  color: #FFFFFF;
}

.dbg-trust-infra__title em {
  color: #60A5FA;
  font-style: normal;
  font-weight: 600;
}

.dbg-trust-infra__desc {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 44px;
  letter-spacing: -0.01em;
}

.dbg-trust-infra__stats {
  display: flex;
  gap: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.dbg-trust-infra__stat strong {
  display: block;
  font-size: 40px;
  font-weight: 500;
  color: #FFFFFF;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: 8px;
}

.dbg-trust-infra__stat span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.02em;
}

@media (max-width: 768px) {
  .dbg-trust-infra {
    padding: 64px 0;
    margin: 48px 0 40px;
    min-height: auto;
  }
  .dbg-trust-infra::before {
    background-size: cover;
    background-position: center;
    opacity: 0.35;
  }
  .dbg-trust-infra__container {
    padding: 0 24px;
  }
  .dbg-trust-infra__title {
    font-size: 28px;
  }
  .dbg-trust-infra__stats {
    gap: 32px;
  }
  .dbg-trust-infra__stat strong {
    font-size: 32px;
  }
}

/* ============================================================
   46.5차 S8 (2026-04-21): 06 UPDATES + 07 CONTACT 디자인 고도화.
   기존 규칙을 후행 override 방식으로 덮어씀 (specificity 동일 또는 강화).
   ============================================================ */

/* S8-1: 07 원격지원 버튼 I2 스펙 준수 (light 배경 + blue glow text-shadow) */
.dbg-contact-card .dbg-btn--primary,
#dbg-contact .dbg-btn--primary {
  background: #CEDAE6;
  color: #FFFFFF !important;
  border: none;
  text-shadow:
    0 0 8px rgba(37, 99, 235, 0.6),
    0 0 2px rgba(37, 99, 235, 1);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.9) inset,
    0 2px 8px rgba(37, 99, 235, 0.15);
  border-radius: 6px;
  padding: 0 32px;
  height: 40px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.dbg-contact-card .dbg-btn--primary:hover,
#dbg-contact .dbg-btn--primary:hover {
  background: #CEDAE6;
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 1) inset,
    0 4px 12px rgba(37, 99, 235, 0.25);
  color: #FFFFFF !important;
}
.dbg-contact-card .dbg-btn--primary:active,
#dbg-contact .dbg-btn--primary:active {
  transform: translateY(0);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.9) inset,
    0 1px 4px rgba(37, 99, 235, 0.2);
}

/* S8-2: 07 Contact 카드 다크 glassmorphism (dbg-section--dark 맥락) */
.dbg-section--dark .dbg-contact-card,
#dbg-contact .dbg-contact-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 16px;
  padding: 48px 40px;
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.06) inset,
    0 12px 40px rgba(0, 0, 0, 0.2);
  transition: border-color 0.2s ease, background 0.2s ease;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;
}
.dbg-section--dark .dbg-contact-card:hover,
#dbg-contact .dbg-contact-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
}
.dbg-section--dark .dbg-contact-card .dbg-contact-phone,
#dbg-contact .dbg-contact-phone {
  color: #FFFFFF;
  font-weight: 500;
  font-size: 36px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.dbg-section--dark .dbg-contact-card .dbg-contact-caption,
#dbg-contact .dbg-contact-caption {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
}
.dbg-section--dark .dbg-contact-card .dbg-icon,
#dbg-contact .dbg-contact-card .dbg-icon {
  color: #60A5FA;
  width: 36px;
  height: 36px;
}

/* S8-4: 07 오시는길 카드 계층 + 다크 glassmorphism 강화 */
.dbg-section--dark .dbg-address-card,
#dbg-contact .dbg-address-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 14px;
  padding: 20px 22px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.dbg-section--dark .dbg-address-card:hover,
#dbg-contact .dbg-address-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
}
/* 본사 vs 지사 시각 계층 — border-top accent */
.dbg-section--dark .dbg-address-card--hq-digitalbank,
#dbg-contact .dbg-address-card--hq-digitalbank {
  border-top: 3px solid #DC2626;
}
.dbg-section--dark .dbg-address-card--hq-dbeasy,
#dbg-contact .dbg-address-card--hq-dbeasy {
  border-top: 3px solid #10B981;
}
.dbg-section--dark .dbg-address-card--branch,
#dbg-contact .dbg-address-card--branch {
  border-top: 3px solid rgba(255, 255, 255, 0.2);
  opacity: 0.88;
}
.dbg-section--dark .dbg-address-card__label,
#dbg-contact .dbg-address-card__label {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.dbg-section--dark .dbg-address-card__name,
#dbg-contact .dbg-address-card__name {
  font-size: 17px;
  font-weight: 500;
  color: #FFFFFF;
  margin-bottom: 6px;
}
.dbg-section--dark .dbg-address-card__addr,
#dbg-contact .dbg-address-card__addr {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
}

/* S8-5: 06 공지 아이템 glassmorphism 강화 (dbg-section--dark 맥락) */
.dbg-section--dark .dbg-notice-item,
#dbg-updates .dbg-notice-item {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-radius: 10px;
  height: 72px;
  margin-bottom: 10px;
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.05) inset;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.dbg-section--dark .dbg-notice-item:hover,
#dbg-updates .dbg-notice-item:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateX(2px);
}
.dbg-section--dark .dbg-notice-item a,
#dbg-updates .dbg-notice-item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 100%;
  text-decoration: none;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.01em;
  background: transparent;
}
.dbg-section--dark .dbg-notice-item a:hover,
#dbg-updates .dbg-notice-item a:hover {
  background: transparent;
}
.dbg-section--dark .dbg-notice-item__date,
#dbg-updates .dbg-notice-item__date {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 768px) {
  .dbg-section--dark .dbg-contact-card,
  #dbg-contact .dbg-contact-card {
    padding: 36px 24px;
    min-height: auto;
  }
  .dbg-section--dark .dbg-contact-card .dbg-contact-phone,
  #dbg-contact .dbg-contact-phone {
    font-size: 28px;
  }
}

/* ============================================================
   Sprint G-B (2026-04-22): 05 Group 타임라인 수평 스냅 재설계.
   수직 타임라인 폐기, Apple/Tesla 브랜드 히스토리 스타일.
   기존 .dbg-timeline / .dbg-timeline__item 등은 dbg-group-history 아래 있으므로
   selector specificity 조정 불필요 (HTML 자체를 <section class="dbg-timeline">으로 교체).
   ============================================================ */

.dbg-timeline {
  padding: 120px 0 140px;
  position: relative;
  display: block;
  /* Sprint H A-1 (2026-04-22): 흰-on-흰 hotfix — 다크 그라디언트 강제.
     위 Group 섹션(다크 야경)과 끊김 없이 흐르도록 #0F172A 시작. */
  background: linear-gradient(180deg,
    #0F172A 0%,
    #111E36 45%,
    #1E293B 100%);
  margin: 0;
  isolation: isolate;
}
.dbg-timeline::before {
  content: none !important;  /* 기존 수직 라인 규칙 무효화 */
}
.dbg-timeline__header {
  max-width: 720px;
  margin: 0 auto 80px;
  text-align: center;
  padding: 0 24px;
}
.dbg-timeline__eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  margin-bottom: 20px;
}
.dbg-timeline__title {
  font-size: clamp(32px, 4.2vw, 52px);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  margin: 0 0 16px;
}
.dbg-timeline__sub {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.7;
  margin: 0;
}

.dbg-timeline__rail {
  position: relative;
  padding: 40px 0 56px;
}
.dbg-timeline__progress {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 10%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 255, 255, 0.1) 90%,
    transparent 100%);
  z-index: 0;
  pointer-events: none;
}

.dbg-timeline__track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 max(24px, calc(50vw - 150px));
  scroll-padding-inline: max(24px, calc(50vw - 150px));
  scroll-behavior: smooth;
  scrollbar-width: none;
  position: relative;
  z-index: 1;
}
.dbg-timeline__track::-webkit-scrollbar { display: none; }

.dbg-timeline__card {
  flex: 0 0 300px;
  scroll-snap-align: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-radius: 20px;
  padding: 40px 32px 36px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease,
              background 0.3s ease;
  list-style: none;  /* ol/li 잔재 방지 */
}
.dbg-timeline__card::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 4px #0F172A;
  transition: box-shadow 0.25s ease, width 0.25s ease, height 0.25s ease;
}
.dbg-timeline__card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}
/* Sprint H A-1 (2026-04-22): milestone/current 시각 차별화 강화.
   평가자 실측 — rgba(220,38,38,0.06)로는 일반 카드와 구별 0.
   milestone 0.12 + border 0.3 + glow 추가. */
.dbg-timeline__card--milestone {
  background: rgba(220, 38, 38, 0.12);
  border-color: rgba(220, 38, 38, 0.3);
  box-shadow: 0 0 24px rgba(220, 38, 38, 0.08);
}
.dbg-timeline__card--milestone::before {
  background: #DC2626;
  width: 12px;
  height: 12px;
  top: -7px;
  box-shadow:
    0 0 0 4px #0F172A,
    0 0 20px rgba(220, 38, 38, 0.7);
}
.dbg-timeline__card--current {
  background: rgba(37, 99, 235, 0.1);
  border-color: rgba(37, 99, 235, 0.32);
  box-shadow: 0 0 28px rgba(37, 99, 235, 0.1);
}
.dbg-timeline__card--current::before {
  background: #60A5FA;
  width: 12px;
  height: 12px;
  top: -7px;
  animation: dbg-timeline-pulse 2s infinite;
}
@keyframes dbg-timeline-pulse {
  0%, 100% { box-shadow: 0 0 0 4px #0F172A, 0 0 20px rgba(96,165,250,0.7); }
  50% { box-shadow: 0 0 0 4px #0F172A, 0 0 32px rgba(96,165,250,1); }
}

.dbg-timeline__year {
  font-size: 48px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}
.dbg-timeline__meta {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  margin-bottom: 24px;
  font-weight: 500;
}
.dbg-timeline__event {
  font-size: 17px;
  font-weight: 500;
  color: #FFFFFF;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  line-height: 1.4;
}
.dbg-timeline__desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
}

.dbg-timeline__controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}
/* Sprint H A-1 (2026-04-22): nav 버튼 시인성 강화 (48→56, 0.04→0.08). */
.dbg-timeline__nav {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  cursor: pointer;
  font-size: 22px;
  transition: all 0.2s ease;
  line-height: 1;
}
.dbg-timeline__nav:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.38);
  color: #FFFFFF;
  transform: translateY(-1px);
}
.dbg-timeline__nav:focus-visible {
  outline: 2px solid rgba(96, 165, 250, 0.6);
  outline-offset: 3px;
}

@media (max-width: 768px) {
  .dbg-timeline { padding: 72px 0 40px; }
  .dbg-timeline__header { margin-bottom: 48px; }
  .dbg-timeline__track {
    padding: 0 24px;
    scroll-padding-inline: 24px;
  }
  .dbg-timeline__card {
    flex: 0 0 260px;
    padding: 32px 24px;
  }
  .dbg-timeline__year { font-size: 40px; }
}

/* ============================================================
   Sprint G-G (2026-04-22): 원격지원 페이지 전면 재설계.
   co_id=remote / body.co_remote / 7 섹션 레이어드.
   박제 27 시그니처 1개 원칙 유지 (GNB Support 메뉴와 본 페이지는 목적지).
   ============================================================ */

body.co_remote #ctt_con { padding: 0 !important; margin: 0 !important; max-width: none !important; width: 100% !important; }
body.co_remote #ctt,
body.co_remote .ctt_remote {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}
/* Sprint I I-1-B (2026-04-22): width/min-width 누락으로 viewport>1200에서 1200 고정.
   default.css L92 `.wrapper { width: 1200px; min-width: 1200px }` 잔재 해소. */
body.co_remote .container,
body.co_remote #wrapper,
body.co_remote .wrapper {
  max-width: 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}
body.co_remote .aside,
body.co_remote #lsb { display: none !important; }

.dbg-remote-container {
  max-width: 1280px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 32px;
  width: 100%;
  box-sizing: border-box;
}

/* Hero */
/* Sprint J J-3 → Sprint N follow-up #4 (2026-04-22): Ryan 지시 — Hero 높이 축소 + 센터 배치.
   stats 3개(3분/12분/0건) 삭제, 2-col grid 폐기, eyebrow/title/sub/CTA 수직 센터. */
.dbg-remote-hero {
  background:
    linear-gradient(135deg, rgba(10, 22, 40, 0.88) 0%, rgba(15, 23, 42, 0.97) 100%),
    url('../img/hero/network.png') center/cover no-repeat;
  padding: 96px 0 80px;
  position: relative;
  overflow: hidden;
}
.dbg-remote-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .dbg-remote-hero { padding: 72px 0 64px; }
}
.dbg-remote-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(96, 165, 250, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(220, 38, 38, 0.05) 0%, transparent 40%);
  pointer-events: none;
}
.dbg-remote-breadcrumb {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 32px;
  position: relative;
  z-index: 1;
}
.dbg-remote-breadcrumb a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.dbg-remote-breadcrumb a:hover { color: #FFFFFF; }
.dbg-remote-breadcrumb span { margin: 0 8px; }
.dbg-remote-hero__eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
  font-weight: 500;
  color: rgba(96, 165, 250, 0.92);
  text-transform: uppercase;
  margin: 0 0 16px;
  position: relative;
  z-index: 1;
}
.dbg-remote-hero__title {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  margin: 0 0 24px;
  position: relative;
  z-index: 1;
}
.dbg-remote-hero__sub {
  font-size: 17px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.72);
  max-width: 560px;
  letter-spacing: -0.01em;
  margin: 0 0 36px;
  position: relative;
  z-index: 1;
}

/* Sprint N follow-up #4 (2026-04-22): action 센터 정렬. */
.dbg-remote-hero__action {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.dbg-remote-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: #16A34A;
  color: #FFFFFF;
  padding: 22px 32px;
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid #16A34A;
  border-radius: 10px;
  letter-spacing: -0.01em;
  box-shadow: 0 12px 32px rgba(22, 163, 74, 0.28),
              inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.dbg-remote-hero__cta:hover {
  background: #15803D;
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(22, 163, 74, 0.38),
              inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
}
.dbg-remote-hero__cta:focus-visible {
  outline: 3px solid rgba(22, 163, 74, 0.45);
  outline-offset: 3px;
}
.dbg-remote-hero__cta-arrow {
  display: none;
}
.dbg-remote-hero__cta:hover .dbg-remote-hero__cta-arrow {
  transform: translateX(3px);
}
.dbg-remote-hero__cta-secondary {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  padding: 6px 2px;
  transition: color 0.15s ease;
}
.dbg-remote-hero__cta-secondary:hover { color: #FFFFFF; }
.dbg-remote-hero__note {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.7;
  margin: 12px 0 0;
}

/* Trust Strip */
/* Sprint I I-6 (2026-04-22): 시각 풍부도 보강 — SVG 패턴 배경 + icon glow.
   Ryan 지적 "글+CSS만 딱딱" 대응. 자산 없이 code-only로 시각 레이어 추가. */
.dbg-remote-trust {
  padding: 72px 0;
  background:
    radial-gradient(circle at 10% 50%, rgba(96, 165, 250, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 90% 50%, rgba(220, 38, 38, 0.05) 0%, transparent 40%),
    rgba(255, 255, 255, 0.02);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
}
.dbg-remote-trust::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  opacity: 0.6;
}
.dbg-remote-trust__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.dbg-remote-trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 12px;
  text-align: center;
}
.dbg-remote-trust__icon {
  color: rgba(96, 165, 250, 0.95);
  line-height: 0;
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(96, 165, 250, 0.16) 0%, rgba(96, 165, 250, 0) 72%);
  position: relative;
  z-index: 1;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.3s ease;
}
.dbg-remote-trust__item:hover .dbg-remote-trust__icon {
  transform: scale(1.08);
  background:
    radial-gradient(circle, rgba(96, 165, 250, 0.28) 0%, rgba(96, 165, 250, 0) 72%);
}
.dbg-remote-trust__label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.5;
  margin: 0;
  letter-spacing: -0.01em;
}

/* Process */
/* Sprint J J-3 (2026-04-22): compact화 — Hero에서 CTA 이미 노출됨. */
.dbg-remote-process {
  padding: 72px 0;
}
.dbg-remote-process__header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}
.dbg-remote-process__eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  margin: 0 0 12px;
  font-weight: 500;
}
.dbg-remote-process__title {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 0;
}
.dbg-remote-process__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 0;
  list-style: none;
  margin: 0;
  position: relative;
}
/* Sprint I I-6 (2026-04-22): 3 step 간 연결선 + arrow (시각 흐름 전달). */
.dbg-remote-process__steps::before {
  content: '';
  position: absolute;
  top: 80px;
  left: 18%;
  right: 18%;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(96, 165, 250, 0) 0%,
    rgba(96, 165, 250, 0.25) 18%,
    rgba(96, 165, 250, 0.45) 50%,
    rgba(96, 165, 250, 0.25) 82%,
    rgba(96, 165, 250, 0) 100%);
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 900px) {
  .dbg-remote-process__steps::before { display: none; }
}
.dbg-remote-process__step {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-radius: 16px;
  padding: 28px 24px 24px;
  position: relative;
  z-index: 1;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  list-style: none;
}
.dbg-remote-process__step:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-3px);
}
.dbg-remote-process__num {
  font-size: 30px;
  font-weight: 600;
  color: rgba(96, 165, 250, 0.42);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.dbg-remote-process__step-title {
  font-size: 16px;
  font-weight: 500;
  color: #FFFFFF;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.dbg-remote-process__step-desc {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.64);
  margin: 0;
}

/* Sprint J J-3 (2026-04-22): Trust strip __header (이전 구조엔 없었음). */
.dbg-remote-trust__header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}
.dbg-remote-trust__eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 12px;
}
.dbg-remote-trust__title {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 0;
}

/* CTA Card */
.dbg-remote-cta {
  padding: 80px 0 120px;
}
.dbg-remote-cta__card {
  max-width: 720px;
  margin: 0 auto;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(96, 165, 250, 0.04) 100%);
  border: 1px solid rgba(96, 165, 250, 0.22);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 24px;
  padding: 64px 56px;
  text-align: center;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3);
}
.dbg-remote-cta__status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.28);
  border-radius: 999px;
  font-size: 12px;
  color: rgba(16, 185, 129, 0.95);
  margin-bottom: 32px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.dbg-remote-cta__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.6);
  animation: dbg-remote-live 2s infinite;
}
@keyframes dbg-remote-live {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.2); }
}
.dbg-remote-cta__title {
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 500;
  color: #FFFFFF;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.dbg-remote-cta__sub {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
  margin: 0 0 40px;
}
.dbg-remote-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #CEDAE6;
  color: #FFFFFF !important;
  text-decoration: none;
  text-shadow:
    0 0 8px rgba(37, 99, 235, 0.65),
    0 0 2px rgba(37, 99, 235, 1);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.9) inset,
    0 4px 14px rgba(37, 99, 235, 0.22);
  border-radius: 8px;
  height: 56px;
  padding: 0 48px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dbg-remote-cta__btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 1) inset,
    0 6px 18px rgba(37, 99, 235, 0.35);
}
.dbg-remote-cta__note {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  margin: 28px 0 0;
}

/* FAQ */
.dbg-remote-faq {
  padding: 120px 0;
  background: rgba(255, 255, 255, 0.02);
}
.dbg-remote-faq__header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 72px;
}
.dbg-remote-faq__eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  margin: 0 0 16px;
  font-weight: 500;
}
.dbg-remote-faq__title {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 500;
  color: #FFFFFF;
  letter-spacing: -0.02em;
  margin: 0;
}
.dbg-remote-faq__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.dbg-remote-faq__item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 32px 32px 28px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.dbg-remote-faq__item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
}
.dbg-remote-faq__q {
  font-size: 16px;
  font-weight: 500;
  color: #FFFFFF;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  line-height: 1.5;
}
.dbg-remote-faq__a {
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* Alt Contact */
.dbg-remote-alt {
  padding: 120px 0;
}
.dbg-remote-alt__title {
  text-align: center;
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 500;
  color: #FFFFFF;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.dbg-remote-alt__sub {
  text-align: center;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 56px;
}
.dbg-remote-alt__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 960px;
  margin: 0 auto;
}
.dbg-remote-alt__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 36px 32px 28px;
  text-align: center;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.dbg-remote-alt__item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}
.dbg-remote-alt__icon {
  color: rgba(96, 165, 250, 0.9);
  margin-bottom: 20px;
  line-height: 0;
  display: inline-flex;
}
.dbg-remote-alt__h {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.dbg-remote-alt__v {
  font-size: 19px;
  font-weight: 500;
  color: #FFFFFF;
  margin: 0 0 8px;
  font-variant-numeric: tabular-nums;
}
.dbg-remote-alt__note {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 20px;
}
.dbg-remote-alt__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(96, 165, 250, 0.14);
  border: 1px solid rgba(96, 165, 250, 0.35);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.dbg-remote-alt__cta:hover {
  background: rgba(96, 165, 250, 0.24);
  border-color: rgba(96, 165, 250, 0.6);
  transform: translateY(-1px);
}
.dbg-remote-alt__cta:focus-visible {
  outline: 2px solid rgba(96, 165, 250, 0.6);
  outline-offset: 3px;
}

/* Sprint M M-3-C → Sprint R R-2 (2026-04-22): 섹션 padding + header margin 압축.
   이전 738px → 목표 < 600px. Ryan 지시 "빈 공간 좀 더 압축". */
.dbg-remote-launch {
  padding: 48px 0 32px;
}
.dbg-remote-launch__header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 24px;
}
.dbg-remote-launch__eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
  margin: 0 0 12px;
}
.dbg-remote-launch__title {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 0 0 12px;
}
.dbg-remote-launch__sub {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
}
/* Sprint N (2026-04-22): 원격시작 아코디언 (이전 4-col grid 대체).
   HTML5 <details>/<summary> native (HTMLPurifier allow 완료). 펼침 인터랙션 JS 0. */
.dbg-accordion {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dbg-accordion__item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.dbg-accordion__item[open] {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(220, 38, 38, 0.32);
}
.dbg-accordion__summary {
  display: grid;
  grid-template-columns: 56px 1fr auto 32px;
  gap: 16px;
  align-items: center;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.dbg-accordion__summary::-webkit-details-marker { display: none; }
.dbg-accordion__num {
  font-size: 28px;
  font-weight: 500;
  color: #DC2626;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.dbg-accordion__label {
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: -0.01em;
}
.dbg-accordion__hint {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  font-weight: 500;
}
.dbg-accordion__chevron {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  transition: transform 0.25s ease;
  text-align: center;
}
.dbg-accordion__item[open] .dbg-accordion__chevron {
  transform: rotate(180deg);
}
.dbg-accordion__body {
  padding: 16px 24px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dbg-accordion__desc {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}
.dbg-accordion__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #DC2626;
  color: #FFFFFF;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 6px;
  align-self: flex-start;
  transition: background 0.2s ease, transform 0.2s ease;
}
.dbg-accordion__cta:hover {
  background: #B91C1C;
  transform: translateY(-1px);
}
.dbg-accordion__cta:focus-visible {
  outline: 2px solid rgba(220, 38, 38, 0.5);
  outline-offset: 3px;
}
.dbg-accordion__cta-arrow {
  font-size: 15px;
  line-height: 1;
  transition: transform 0.2s ease;
}
.dbg-accordion__cta:hover .dbg-accordion__cta-arrow {
  transform: translateX(2px);
}
@media (max-width: 640px) {
  .dbg-accordion__summary {
    grid-template-columns: 48px 1fr 24px;
    gap: 12px;
    padding: 16px;
  }
  .dbg-accordion__hint { display: none; }
}

/* Sprint N follow-up #2 (2026-04-22): Ryan 지시 — 섹션 자체가 단일 아코디언.
   헤더 클릭 시 6 flat row 노출. */
.dbg-remote-downloads {
  padding: 40px 0 80px;
}
.dbg-remote-downloads__accordion {
  max-width: 880px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.dbg-remote-downloads__accordion[open] {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(96, 165, 250, 0.32);
}
.dbg-remote-downloads__summary {
  display: grid;
  grid-template-columns: auto 1fr auto 32px;
  gap: 16px;
  align-items: baseline;
  padding: 22px 28px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.dbg-remote-downloads__summary::-webkit-details-marker { display: none; }
.dbg-remote-downloads__eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.dbg-remote-downloads__title {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  margin: 0;
}
.dbg-remote-downloads__hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: -0.005em;
  min-width: 0;
}
.dbg-remote-downloads__chevron {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.65);
  transition: transform 0.25s ease;
  text-align: center;
  align-self: center;
}
.dbg-remote-downloads__accordion[open] .dbg-remote-downloads__chevron {
  transform: rotate(180deg);
}
.dbg-remote-downloads__list {
  margin: 0;
  padding: 0 0 12px;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.dbg-remote-download-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.15s ease;
}
.dbg-remote-download-row:last-child { border-bottom: 0; }
.dbg-remote-download-row:hover { background: rgba(255, 255, 255, 0.04); }
.dbg-remote-download-row__name {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: -0.01em;
}
.dbg-remote-download-row__hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: -0.005em;
}
#ctt_con .dbg-remote-download-row__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 104px;
  background: rgba(22, 163, 74, 0.14);
  color: #4ADE80;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid rgba(22, 163, 74, 0.4);
  border-radius: 6px;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
#ctt_con .dbg-remote-download-row__cta:hover {
  background: rgba(22, 163, 74, 0.24);
  border-color: rgba(22, 163, 74, 0.65);
  color: #86EFAC;
}
.dbg-remote-download-row__cta:focus-visible {
  outline: 2px solid rgba(22, 163, 74, 0.6);
  outline-offset: 2px;
}
/* Sprint P P-4 (2026-04-22): Ryan 지시 — DOWNLOADS CTA 화살표 제거.
   방향 제각각 (↓/→/↗) + 필요성 낮음. 원격시작 화살표는 유지. */
.dbg-remote-download-row__cta-arrow {
  display: none !important;
}
@media (max-width: 720px) {
  .dbg-remote-downloads__summary {
    grid-template-columns: 1fr 32px;
    grid-template-rows: auto auto;
    row-gap: 4px;
    padding: 18px 20px;
  }
  .dbg-remote-downloads__eyebrow { grid-column: 1 / 2; grid-row: 1; }
  .dbg-remote-downloads__title { grid-column: 1 / 2; grid-row: 2; }
  .dbg-remote-downloads__hint { display: none; }
  .dbg-remote-downloads__chevron { grid-column: 2 / 3; grid-row: 1 / 3; align-self: center; }
  .dbg-remote-download-row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    row-gap: 4px;
    padding: 14px 20px;
  }
  .dbg-remote-download-row__name { grid-column: 1 / 2; }
  .dbg-remote-download-row__hint { grid-column: 1 / 2; }
  .dbg-remote-download-row__cta { grid-column: 2 / 3; grid-row: 1 / 3; align-self: center; }
}

/* Sprint N follow-up (2026-04-22): Ryan 지시 3건 반영.
   - 원격시작: flat row + [대괄호 설명] + 우측 다운로드 버튼 (아코디언 해제)
   - 다운로드: 기존 .dbg-accordion 재활용 */
/* Sprint P P-1 → Sprint R R-2 (2026-04-22): 정렬 유지 + row gap 축소. */
.dbg-remote-launch__list {
  max-width: 880px;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}
/* Sprint N follow-up #4 (2026-04-22): Ryan 지시 — row 정렬 개선.
   기존 1fr 간격이 시각 불균형. label+hint 그룹 좌측 + CTA 우측 고정. */
/* Sprint R R-2: row padding 세로 축소 (16→12). */
.dbg-remote-launch-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 12px 24px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.dbg-remote-launch-row__cta { margin-left: auto; }
.dbg-remote-launch-row:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(22, 163, 74, 0.28);
}
.dbg-remote-launch-row__num {
  font-size: 28px;
  font-weight: 500;
  color: #16A34A;
  line-height: 1;
  flex: 0 0 40px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.dbg-remote-launch-row__label {
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: -0.01em;
}
.dbg-remote-launch-row__hint {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: -0.005em;
  line-height: 1.4;
  min-width: 0;
}
.dbg-remote-launch-row__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 108px;
  background: #16A34A;
  color: #FFFFFF;
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}
.dbg-remote-launch-row__cta:hover {
  background: #15803D;
  transform: translateY(-1px);
}
.dbg-remote-launch-row__cta:focus-visible {
  outline: 2px solid rgba(22, 163, 74, 0.5);
  outline-offset: 3px;
}
.dbg-remote-launch-row__cta-arrow {
  display: none;
}
@media (max-width: 640px) {
  .dbg-remote-launch-row {
    flex-wrap: wrap;
    column-gap: 12px;
    row-gap: 4px;
    padding: 14px 16px;
  }
  .dbg-remote-launch-row__num { flex: 0 0 32px; font-size: 24px; }
  .dbg-remote-launch-row__label { flex: 1 1 auto; }
  .dbg-remote-launch-row__hint { flex: 0 0 100%; padding-left: 44px; }
  .dbg-remote-launch-row__cta { margin-left: auto; }
}

/* Footer Trust */
.dbg-remote-footer-trust {
  padding: 64px 0 96px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
}
.dbg-remote-footer-trust__text {
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.dbg-remote-footer-trust__text strong {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

/* Responsive */
@media (max-width: 900px) {
  .dbg-remote-trust__grid { grid-template-columns: repeat(2, 1fr); }
  .dbg-remote-process__steps { grid-template-columns: 1fr; }
  .dbg-remote-faq__grid { grid-template-columns: 1fr; }
  .dbg-remote-alt__grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .dbg-remote-hero { padding: 72px 0 56px; }
  .dbg-remote-process,
  .dbg-remote-faq,
  .dbg-remote-alt { padding: 72px 0; }
  .dbg-remote-cta__card { padding: 40px 28px; }
  .dbg-remote-cta__btn { height: 48px; padding: 0 32px; font-size: 15px; }
}

/* ============================================================
   Sprint H A-3 (2026-04-22): 원격지원 페이지 히어로 중복 제거.
   평가자 Chrome MCP 실측: db-content-hero (skin) + dbg-remote-hero
   (co_content) 2개가 동일 타이틀 2번 출력. 새 히어로가 디자인적으로
   우위이므로 시스템 헤더(skin + breadcrumb)를 원격지원 페이지 한정 숨김.
   ============================================================ */
body.co_remote .db-content-hero,
body.co_remote .db-board-hero,
body.co_remote #breadcrumb,
body.co_remote #wrapper_title,
body.co_remote #container_title,
body.co_remote .page_title,
body.co_remote .page-header {
  display: none !important;
}
/* Sprint I I-1-C (2026-04-22): belt-and-suspenders — skin에서 온 h1/h2 타이틀이
   새 dbg-remote-hero 앞에 남아있으면 중복. ctt_con의 직계 heading은 숨김. */
body.co_remote article#ctt.ctt_remote > h1,
body.co_remote article#ctt.ctt_remote > h2,
body.co_remote article#ctt.ctt_remote > .breadcrumb {
  display: none !important;
}
body.co_remote .ctt_remote,
body.co_remote article#ctt.ctt_remote { margin-top: 0; padding-top: 0; }
body.co_remote #ctt_con { margin-top: 0; padding-top: 0; }


/* ============================================================
   Sprint J J-1 (2026-04-22): Heritage 세로 재설계.
   Ryan 거부: Sprint I 수평 single-track > 이전 세로 구조보다 못함.
   DOM: #dbg-group 밖 형제 섹션 → 부모 city night bg-image 침투 원천 차단.
   구조: decade 그룹핑 + 좌측 vertical line + marker dot + 우측 카드.
   ============================================================ */
/* Sprint N follow-up #3 (2026-04-22): Ryan 스펙 — 단일 이미지 + parallax fixed.
   3장 스티치 폐기, lotte_sakura.jpg 1장을 parallax로 유지. */
.dbg-heritage {
  position: relative;
  isolation: isolate;
  padding-top: 160px;
  padding-bottom: 160px;
}
.dbg-heritage::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/theme/c006(digitalbank)/img/stock/section05_group_heritage_main.jpg') center/cover no-repeat;
  background-attachment: fixed;
  opacity: 0.40;
  z-index: -2;
}
.dbg-heritage::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(15, 23, 42, 0.95) 0%,
    rgba(15, 23, 42, 0.75) 15%,
    rgba(15, 23, 42, 0.75) 85%,
    rgba(15, 23, 42, 0.95) 100%);
  z-index: -1;
}

/* 모바일 fallback — fixed는 iOS 문제 + mobile 성능 이슈 */
@media (max-width: 768px) {
  .dbg-heritage::before {
    background-attachment: scroll;
    background-position: center top;
  }
}

/* reduce-motion 사용자 — parallax 체감 제거 */
@media (prefers-reduced-motion: reduce) {
  .dbg-heritage::before {
    background-attachment: scroll;
  }
}
.dbg-heritage__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
}

/* 카테고리 색상 */
.dbg-heritage [data-cat="foundation"] { --cat: #60A5FA; }
.dbg-heritage [data-cat="award"]      { --cat: #DC2626; }
.dbg-heritage [data-cat="business"]   { --cat: #06B6D4; }
.dbg-heritage [data-cat="product"]    { --cat: #34D399; }
.dbg-heritage [data-cat="patent"]     { --cat: #C084FC; }
.dbg-heritage [data-cat="milestone"]  { --cat: #C9A872; }
.dbg-heritage [data-cat="current"]    { --cat: #93C5FD; }

/* Header */
.dbg-heritage__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 96px;
}
.dbg-heritage__eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
  margin: 0 0 20px;
  font-variant-numeric: tabular-nums;
}
.dbg-heritage__title {
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  line-height: 1.15;
  margin: 0 0 16px;
}
.dbg-heritage__sub {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: -0.005em;
  margin: 0;
}

/* Timeline wrapper */
.dbg-heritage__timeline {
  max-width: 880px;
  margin: 0 auto;
}

/* Decade group */
.dbg-heritage__decade-group {
  margin-bottom: 72px;
  position: relative;
}
.dbg-heritage__decade-group:last-child { margin-bottom: 0; }

/* Decade label — line 위 좌측 표기, tick mark 포함 */
.dbg-heritage__decade-label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 28px;
  padding: 8px 0 8px 64px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  position: relative;
  font-variant-numeric: tabular-nums;
}
.dbg-heritage__decade-label::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
}

/* Events container (좌측 line) */
.dbg-heritage__events {
  position: relative;
  padding-left: 64px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

/* Event item */
.dbg-heritage__event {
  position: relative;
  padding: 18px 0;
}
.dbg-heritage__event:first-child { padding-top: 4px; }
.dbg-heritage__event:last-child { padding-bottom: 4px; }

/* Marker dot — line 위 위치 */
.dbg-heritage__marker {
  position: absolute;
  left: -71px;     /* padding-left 64 + border 1 + marker/2 (7) → 72, adjust -1 */
  top: 34px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cat);
  box-shadow:
    0 0 0 4px #0F172A,
    0 0 12px rgba(255, 255, 255, 0.08);
  z-index: 2;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s ease;
}
.dbg-heritage__event:hover .dbg-heritage__marker {
  transform: scale(1.25);
  box-shadow:
    0 0 0 4px #0F172A,
    0 0 20px var(--cat);
}
.dbg-heritage__event--milestone .dbg-heritage__marker {
  width: 18px;
  height: 18px;
  left: -73px;
  top: 32px;
}
.dbg-heritage__event--current .dbg-heritage__marker {
  width: 18px;
  height: 18px;
  left: -73px;
  top: 32px;
  animation: dbg-heritage-pulse 2.4s infinite;
}
@keyframes dbg-heritage-pulse {
  0%, 100% {
    box-shadow: 0 0 0 4px #0F172A, 0 0 14px rgba(147, 197, 253, 0.6);
  }
  50% {
    box-shadow: 0 0 0 4px #0F172A, 0 0 30px rgba(147, 197, 253, 1);
  }
}

/* Card */
.dbg-heritage__card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--cat);
  border-radius: 0 10px 10px 0;
  padding: 20px 24px 22px;
  transition: background 0.25s ease,
              transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.dbg-heritage__event:hover .dbg-heritage__card {
  background: rgba(255, 255, 255, 0.06);
  transform: translateX(4px);
}
.dbg-heritage__event--milestone .dbg-heritage__card {
  background: rgba(255, 255, 255, 0.05);
  border-left-width: 4px;
}
.dbg-heritage__event--current .dbg-heritage__card {
  background: rgba(96, 165, 250, 0.08);
  border-color: rgba(147, 197, 253, 0.2);
  border-left-color: var(--cat);
  border-left-width: 4px;
}

/* Card content */
.dbg-heritage__year {
  font-size: 13px;
  font-weight: 500;
  color: var(--cat);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.dbg-heritage__cat-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
  margin-bottom: 12px;
}
.dbg-heritage__event-title {
  font-size: 17px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: -0.015em;
  line-height: 1.4;
  margin: 0 0 6px;
}
.dbg-heritage__event-desc {
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
}

/* Legend */
.dbg-heritage__legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px 28px;
  margin-top: 72px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.dbg-heritage__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: -0.01em;
}
.dbg-heritage__legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cat);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* Mobile */
@media (max-width: 768px) {
  .dbg-heritage { padding: 96px 0 112px; }
  .dbg-heritage__container { padding: 0 20px; }
  .dbg-heritage__header { margin-bottom: 64px; }
  .dbg-heritage__decade-group { margin-bottom: 56px; }
  .dbg-heritage__decade-label { padding-left: 40px; }
  .dbg-heritage__events { padding-left: 40px; }
  .dbg-heritage__marker { left: -47px; }
  .dbg-heritage__event--milestone .dbg-heritage__marker,
  .dbg-heritage__event--current .dbg-heritage__marker { left: -49px; }
  .dbg-heritage__card { padding: 16px 18px 18px; }
  .dbg-heritage__event-title { font-size: 15px; }
  .dbg-heritage__event-desc { font-size: 12.5px; }
}

/* ========================================================================
   솔루션 카드 플레이스홀더 (2026-04-24) — 이지컷 폐기 + Easy Scan BIZ 자료 대기
   BIZ 자료 확보 시 .dbg-solution-row--placeholder 클래스 제거 + a 태그 복원
   ======================================================================== */
.dbg-solution-row--placeholder {
  opacity: 0.78;
}
.dbg-solution-row--placeholder .dbg-solution-row__visual img {
  filter: grayscale(0.3);
}
.dbg-card__link--disabled {
  color: #6B7280;
  cursor: default;
  pointer-events: none;
  opacity: 0.7;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dbg-card__link--disabled:hover {
  text-decoration: none;
  color: #6B7280;
}
.dbg-solution-row--placeholder .dbg-solution-row__desc em {
  font-style: normal;
  font-size: 0.88em;
  color: #5B6B82;
  font-weight: 600;
  margin-left: 6px;
  padding: 2px 9px;
  background: rgba(22, 48, 87, 0.08);
  border-radius: 2px;
  letter-spacing: -0.01em;
}

/* ============================================================
   Solutions v2 스킨 (2026-04-24) — 호흡 복원 + 카드 풀폭 격자 + 하단 flow 바
   - 3 카드 통일: 좌 visual / 우 body / 풀폭 flow
   - 카드 전체 격자 (이중 프레임 해소), visual 컨테이너 border/bg 제거
   - 하단 flow 6스텝 아이콘 바 (답답함 해소판)
   - PNG v2 (컷아웃 + 드롭섀도우 내장), zigzag(--reverse) 폐기
   적용 범위: .dbg-section--dark-gradient 하위 .dbg-solution-row 전체
   ============================================================ */
.dbg-section--dark-gradient .dbg-solutions-alt{
  display:flex; flex-direction:column; gap:60px;
}
.dbg-section--dark-gradient .dbg-solution-row{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-areas:
    "visual body"
    "flow flow";
  gap:24px 48px;
  padding:48px 72px 36px;
  border-radius:16px;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.015) 100%);
  background-size:40px 40px, 40px 40px, 100% 100%;
  border:1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  align-items:initial;
}
.dbg-section--dark-gradient .dbg-solution-row__num{
  position:absolute; left:28px; top:20px;
  font-size:96px; font-weight:900; letter-spacing:-.04em; line-height:.85;
  color:rgba(255,255,255,.055);
  pointer-events:none; z-index:0;
  min-width:auto; margin:0;
}
.dbg-section--dark-gradient .dbg-solution-row__body{
  grid-area:body;
  position:relative; z-index:1;
  min-height:280px;
  display:flex; flex-direction:column; justify-content:center; gap:14px;
  padding:0;
}
.dbg-section--dark-gradient .dbg-solution-row__visual{
  grid-area:visual;
  min-height:280px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; box-shadow:none; padding:0;
  overflow:visible;
}
.dbg-section--dark-gradient .dbg-solution-row__visual img,
.dbg-section--dark-gradient .dbg-solution-row__visual picture img{
  max-width:100%; max-height:300px;
  width:auto; height:auto;
  object-fit:contain; display:block;
  box-shadow:none;
}
.dbg-section--dark-gradient .dbg-solution-row__title{
  font-size:38px; font-weight:800; letter-spacing:-.02em; color:#fff;
  white-space:nowrap; line-height:1.1;
}
.dbg-section--dark-gradient .dbg-solution-row__desc{
  color:rgba(255,255,255,.72); font-size:15px; line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:48px;
}

/* Operation flow — 카드 풀폭 하단 바 */
.dbg-section--dark-gradient .dbg-solution-row__flow{
  grid-area:flow;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:8px;
  padding:18px 8px 0;
  margin-top:4px;
  border-top:1px solid rgba(255,255,255,.1);
  position:relative; z-index:1;
}
.dbg-section--dark-gradient .flow-step{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  text-align:center;
  transition:.2s;
}
.dbg-section--dark-gradient .flow-step__icon{
  width:32px; height:32px;
  stroke:rgba(255,255,255,.6); fill:none; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
  transition:.2s;
}
.dbg-section--dark-gradient .flow-step:hover .flow-step__icon{ stroke:#BC0024; }
.dbg-section--dark-gradient .flow-step:hover .flow-step__label-kr{ color:#fff; }
.dbg-section--dark-gradient .flow-step__label-kr{
  display:block;
  font-size:13px; font-weight:600;
  color:rgba(255,255,255,.78);
  letter-spacing:-.01em;
  transition:.2s;
}
.dbg-section--dark-gradient .flow-step__label-en{
  display:block;
  font-size:10px; font-weight:500;
  color:rgba(255,255,255,.38);
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* 모바일: 3 카드 단일 컬럼, flow 2줄 (3×2) */
@media (max-width:960px){
  .dbg-section--dark-gradient .dbg-solution-row{
    grid-template-columns:1fr;
    grid-template-areas:"visual" "body" "flow";
    gap:24px; padding:36px 28px;
  }
  .dbg-section--dark-gradient .dbg-solution-row__num{ font-size:72px; left:20px; top:16px; }
  .dbg-section--dark-gradient .dbg-solution-row__body{ min-height:auto; }
  .dbg-section--dark-gradient .dbg-solution-row__visual{ min-height:240px; }
  .dbg-section--dark-gradient .dbg-solution-row__flow{
    grid-template-columns:repeat(3,1fr); row-gap:16px;
  }
  .dbg-section--dark-gradient .flow-step__label-en{ display:none; }
  .dbg-section--dark-gradient .dbg-solution-row__title{ white-space:normal; font-size:32px; }
}

/* 기존 --reverse 규칙 무력화 (zigzag 폐기 · 3 카드 통일) */
.dbg-section--dark-gradient .dbg-solution-row--reverse .dbg-solution-row__visual{ order:initial; }
.dbg-section--dark-gradient .dbg-solution-row--reverse .dbg-solution-row__body{ order:initial; }

/* placeholder em 무력화 (카피가 이미 "자료 준비 중" 링크로 분리됨) */
.dbg-section--dark-gradient .dbg-solution-row--placeholder .dbg-solution-row__desc em{
  display:none;
}