/* =============================================================
   site.css — 시시브랜드 (ccbrand.ai.kr) 공통 보조 스타일
   한국 CSS 최적화 + 공통 유틸리티 클래스
   tokens.css 가 선행 로드된 후 이 파일을 로드할 것
   ============================================================= */

/* ── 리셋 + 한국어 기본 ─────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--f-sans);
  font-size: 14px;               /* 본문 기본 가독성 14px */
  color: var(--c-ink);
  background: var(--c-bg);
  word-break: keep-all;          /* 한글 단어 단위 줄바꿈 */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── 공통 유틸 (tokens.jsx 의 wf-* 클래스 Vanilla 버전) ─── */
.wf-root {
  font-family: var(--f-sans);
  color: var(--c-ink);
  background: var(--c-bg);
}

.wf-hand {
  font-family: var(--f-hand);
  font-weight: 600;
  color: var(--c-brand);
}

.wf-mono {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--c-ink-soft);
}

/* sb-* = 시시브랜드 사이트 전용 (공통 wf-* 와 병행) */
.sb-mono {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--c-ink-soft);
}

.sb-card {
  background: var(--c-paper);
  border: 1px solid var(--c-line-soft);
  border-radius: 8px;
  box-shadow: var(--sh-sm);
}

.wf-card {
  background: var(--c-paper);
  border: 1px solid var(--c-line-soft);
  border-radius: 8px;
  box-shadow: var(--sh-sm);
}

.wf-card-dashed {
  background: var(--c-paper);
  border: 1.5px dashed var(--c-line);
  border-radius: 7px;
}

.wf-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-mute);
  font-weight: 500;
}

.wf-placeholder {
  background: repeating-linear-gradient(
    135deg,
    var(--c-line-soft) 0,
    var(--c-line-soft) 1px,
    transparent 1px,
    transparent 8px
  );
}

.wf-placeholder-soft {
  background: repeating-linear-gradient(
    135deg,
    var(--c-accent-tint) 0,
    var(--c-accent-tint) 1px,
    transparent 1px,
    transparent 10px
  );
}

.wf-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--c-brand-soft);
  color: var(--c-brand-strong);
  font-size: 11px;
  font-weight: 600;
}

.wf-chip-out {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--c-line);
  color: var(--c-ink-soft);
  font-size: 11px;
}

.wf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--c-brand);
  color: var(--c-brand-on);
  font-size: 11px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  box-shadow: var(--sh-brand);
}

.wf-btn:hover {
  background: var(--c-brand-strong);
}

.wf-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 6px;
  background: transparent;
  color: var(--c-brand);
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--c-line);
  cursor: pointer;
}

.wf-divider {
  height: 1px;
  background: var(--c-line-soft);
}

.wf-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-brand);
  display: inline-block;
}

.wf-bar {
  height: 6px;
  background: var(--c-line-soft);
  border-radius: 3px;
  overflow: hidden;
}

.wf-bar > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--c-brand), var(--c-accent));
}

/* 스크롤바 숨김 */
.wf-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.wf-scroll {
  scrollbar-width: none;
}

/* ── 레이아웃 셸 ─────────────────────────────────────────── */
.ccb-shell {
  width: 100%;
  max-width: var(--ccb-max-width);  /* 1280px 이상 화면에서 중앙 패널 */
  margin-inline: auto;              /* 양옆 body 배경 노출 */
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--c-bg);
}

.ccb-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.ccb-main-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ccb-content-row {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.ccb-main-content {
  flex: 1;
  min-width: 0;             /* flex 자식 수축 허용 — min-width:auto 기본값이 내용 고유너비로
                               팽창하는 현상 방지 (marquee 등 wide 자식이 있을 때 필수) */
  overflow: auto;
  background: var(--c-bg);
  padding: 0;               /* 좌우 패딩 제거 — 각 섹션 박스가 1280 폭을 꽉 채움 */
  box-sizing: border-box;
}

/* ── 사이드바 ────────────────────────────────────────────── */
/* [[2026-07-15 P1-b]] position/box-shadow 를 partials/sidebar/index.blade.php 인라인
   스타일에서 이관(byte 동일 값) — 인라인 스타일이 아래 @media(max-width:1023px) 숨김
   규칙을 가리던 회귀 수리. ≥1024 렌더 픽셀 무변경. */
.ccb-sidebar {
  width: 300px;
  background: var(--c-paper);
  border-right: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 12px rgba(15,23,42,0.04);
  flex-shrink: 0;
}

/* ── 홈 전체폭 모드 (사이드바 없음) ──────────────────────── */
/* index.blade.php 에서만 사용. ccb-content-row--full 이 있으면 */
/* 사이드바 DOM 자체가 없으므로 이 규칙은 방어용 */
.ccb-content-row--full .ccb-sidebar {
  display: none;
}

/* ── 창(window) 스크롤 전환 — 홈 + 전체폭 내부 콘텐츠 페이지 공용 ── */
/*  body.page-home      : 홈(/)                                         */
/*  body.page-winscroll : 페이지가 @section('scrollModel','window')      */
/*                        을 선언한 전체폭 내부 콘텐츠 페이지              */
/*  layout.blade.php 가 @yield('scrollModel') 값을 읽어 클래스를 부여.   */
/*  새 전체폭 페이지는 Blade 에서 한 줄 선언만 — 라우트 등록 불필요.       */
/*  사이드바 있는 내부 페이지(클래스 없음)는 앱셸 inner-scroll 그대로 유지. */

/* 창 스크롤: 앱셸 overflow 해제 — 홈·전체폭 내부 페이지 공용 */
body.page-home      .ccb-shell,
body.page-winscroll .ccb-shell {
  height: auto;
  min-height: 100vh;
  overflow: visible;
}


body.page-home      .ccb-body,
body.page-winscroll .ccb-body {
  overflow: visible;
}

body.page-home      .ccb-content-row,
body.page-winscroll .ccb-content-row {
  overflow: visible;
}

body.page-home      .ccb-main-content,
body.page-winscroll .ccb-main-content {
  overflow: visible;
}


/* ── 홈 전용 추가 규칙 (page-winscroll 에는 미적용) ─────── */
/* 흰 배경 */
body.page-home,
body.page-home .ccb-shell,
body.page-home .ccb-main-content {
  background: #ffffff;
}

/* 홈 ccb-main-content 상하 패딩 복구 (좌우 0 유지 — 각 섹션이 1280 폭 채움) */
body.page-home .ccb-main-content {
  padding: 20px 0 40px;
}

/* GNB 헤더 상단 고정 (홈 창 스크롤 시 상단에 붙음)
   DOM: .ccb-main-col > header (topbar/index.blade.php)
   body.page-home 스코프로만 — 내부 페이지 헤더 position 불변.
   !important 필수: header 인라인에 position:relative 가 박혀 있어
   일반 선언으로는 무력화됨. 홈 스코프 한정이므로 정당한 override.           */
body.page-home .ccb-main-col > header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100;
}

/* ── 반응형 (한국 기준: 360 / 768 / 1024 / 1440) ─────────── */
@media (max-width: 1023px) {
  .ccb-sidebar {
    display: none;
  }
}

/* ── 노트북 구간 (1024~1439px) — 좌우 퀵배너 유지 + 본문 행 축소 ──────
   [[2026-07-14 P1-0]] 배너를 숨겨서 맞추지 않는다. 기준 설계폭 1024 안에
   좌배너+우배너+본문(헤더+사이드바+메인)이 들어가도록 .ccb-body 를 좁힌다.
   배너 예약폭 = 8px(가장자리 여백) + 150px(배너 컴팩트 폭, §하단 참고) + 8px(콘텐츠 간격) = 166px × 2변.
   .ccb-body 는 flex:1 인 셸의 flex(column) 자식 — margin-inline:auto 는 flexbox 크로스축
   auto-margin 정렬로 동일하게 중앙 정렬된다(표준 스펙 동작, 실측 검증 완료).

   ⚠ DOM 구조 실측: topbar(GNB)는 .ccb-shell 의 직계가 아니라 .ccb-body > .ccb-main-col
   내부에 있다(모든 페이지 공통, index/ip-review 등) — 즉 헤더도 .ccb-body 와 항상 동일한
   폭을 공유하며, "헤더만 원폭 유지" 는 DOM 재구조화 없이는 불가능. 실측 결과 GNB(8개 메뉴,
   자연폭 860px, 6/8개 드롭다운 보유)는 축소폭(~409px)에 들어가지 못해 padding/font 압축으로도
   해소 불가 → nav 자체를 가로 스크롤시키면 overflow-x:auto 가 overflow-y 도 강제 auto 로
   바꿔 드롭다운(top:100% 절대배치)이 잘림(6/8개 메뉴 기능 파손) → 대신 GNB를 flex-wrap 으로
   줄바꿈시켜 기능(드롭다운 포함) 100% 보존 + 오버플로 0 을 동시 확보한다(헤더가 다소 높아짐,
   대신 top 배너 위치는 JS positionBanner()/positionBannerLeft() 가 실측 재계산하므로 안전).
   완전한 컴팩트 1행 topbar(햄버거 등)는 P1 "topbar 반응형" 범위. (1440px↑는 무변경 — 미적용)

   ⚠ 아래 규칙 전부 .ccb-shell--banners 스코프 한정 — 퀵배너가 실제로 렌더되는 페이지에만 적용.
   layout.blade.php 가 hideQuickBanners 미설정 페이지에서만 이 클래스를 셸에 부여한다.
   tm-search/goods-search(hideQuickBanners=1)처럼 배너가 없는 페이지는 폭을 좁힐 이유가 없으므로
   원래 레이아웃(사이드바 300px, GNB 1행, 본문 풀폭) 그대로 유지된다. */
@media (max-width: 1439px) and (min-width: 1024px) {
  .ccb-shell--banners .ccb-body {
    width: 100%;
    max-width: calc(100vw - 332px);
    margin-inline: auto;
    box-sizing: border-box;
  }

  /* 내부 페이지(ip-review·customer-center) 사이드바 컴팩트화.
     [[2026-07-15 P1-b]] 이전에는 <aside style="width:300px"> 인라인 스타일이 있어 !important 가
     필수였음 — 인라인 스타일은 제거되고 .ccb-sidebar 클래스로 이관되었으나(위 §사이드바 참고),
     이 규칙(.ccb-shell--banners .ccb-sidebar, 2클래스)이 베이스 .ccb-sidebar(1클래스)보다
     명시도가 높아 !important 없이도 이미 이긴다 — 유지해도 무해하므로 그대로 둠(회귀 방지). */
  .ccb-shell--banners .ccb-sidebar {
    width: 220px !important;
  }

  /* 로고+GNB 행 — 좁아진 폭에서 줄바꿈 허용(로고 위 / GNB 아래).
     ⚠ partials/topbar/index.blade.php <div class="ccb-topbar-row2" style="height:70px">
     인라인 고정 높이 존재 → !important 필요(동일 패턴). */
  .ccb-shell--banners .ccb-topbar-row2 {
    height: auto !important;
    min-height: 70px;
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 12px 20px !important;
  }
  .ccb-shell--banners #ccb-gnb {
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 4px;
    min-width: 0;
    height: auto;
  }
}

/* =========================================================
   태블릿·모바일 (≤1023px) — topbar/GNB 반응형 + 가로 스크롤 0
   [[2026-07-15 P1-b]] docs/design/06_디바이스_반응형_시스템_기획_2026-07-14.md §2 대상.
   실측(P1-a 남긴 리스크): nav#ccb-gnb 자연폭 860px 가 no-wrap 상태로 남아 있어 390px 뷰포트에서
   document.scrollWidth=1091(overflow=701px) — 페이지 레벨 가로 스크롤의 유일한 원인이었음
   (다른 요소는 전부 overflow:hidden 컨테이너 안에 안전하게 갇혀 있음, playwright 실측 확인).
   위 1024~1439 구간(P1-0)과 동일한 "flex-wrap 다행" 전략을 ≤1023 까지 확장 — overflow-x:auto
   는 overflow-y 도 강제 auto 로 바뀌어 드롭다운(top:100% 절대배치)이 잘리므로 여전히 금지
   (P1-0 결론 재확인). 완전한 햄버거/드로어는 시안 필요 항목(§8) — 이번은 시안 없는 러프 버전.

   ⚠ 아래 규칙은 .ccb-shell--banners 스코프를 쓰지 않는다(P1-0 과 차이) — GNB(#ccb-gnb) 는
   hideGnb=1 페이지(tm-search/goods-search)에서 DOM 자체가 렌더되지 않으므로 스코프가 없어도
   안전하고, ≤1023 사이드바 규칙(위 §반응형)도 이미 비-스코프 패턴이라 일관성 유지. */
@media (max-width: 1023px) {
  /* 로고 + GNB 행 — 다행 wrap, 높이 auto */
  .ccb-topbar-row2 {
    height: auto !important;
    min-height: 60px;
    flex-wrap: wrap;
    row-gap: 6px;
    padding: 10px 16px !important;
  }
  #ccb-gnb {
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 2px;
    min-width: 0;
    /* [[2026-07-15 P1-b 후속]] !important 필수 — nav#ccb-gnb 인라인에 height:70px 이 박혀
       있어(gnb.blade.php) 일반 선언(!important 없는 height:auto)은 이를 못 이깁니다.
       inline height:70px 가 이기면 nav 박스 자체가 70px 로 고정된 채 내부 콘텐츠만
       flex-wrap 으로 여러 행(≤767 폭에서 최대 5행·~130px)으로 늘어나 시각적으로 넘쳐
       흘러(overflow:visible) 아래 .ccb-main-content 위에 겹쳐 보이는 사고가 있었음
       (390px 실측: gnb 5행 총 130px vs 고정 box 70px → 겹침 최대 129px).
       .ccb-topbar-row2(위 규칙)는 이미 !important 로 이 문제를 피했으나 #ccb-gnb 자체는
       누락되어 있었음 — 800px(2행, 우연히 70px 근사)에서는 안 보이다가 390px(5행)에서만
       터진 이유. 1024~1439 구간(.ccb-shell--banners #ccb-gnb, 별도 블록)은 이번 수정
       범위 밖(≥1024 무변경 원칙) — 그쪽은 실측상 겹침 없음(2행이 70px 근사) 확인 후 유지. */
    height: auto !important;
  }
  #ccb-gnb > div {
    padding: 0 2px !important;
  }
  /* GNB 항목 폰트/패딩 축소 — 행 수 최소화(기획 §1 지시). 인라인 style 을 !important 로 override
     (btnPad/font-size:14px 는 gnb.blade.php 에서 PHP 로 인라인 생성됨). */
  #ccb-gnb a[data-gnb-type],
  #ccb-gnb button[data-gnb-type] {
    padding: 6px 10px !important;
    font-size: 12.5px !important;
  }

  /* 유틸리티 바(1행) — 고객센터/로그인/마이페이지 등 다행 wrap */
  .ccb-topbar-row1 {
    height: auto !important;
    flex-wrap: wrap;
    row-gap: 6px;
    padding: 8px 16px !important;
  }
  .ccb-topbar-row1__right {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  /* platform-switch — [[2026-07-15 P4-1]] 시안 ③ 태블릿 3C 중간형/모바일 필 바 공통 CSS 훅.
     ccb-pstab* 클래스는 platform-switch.blade.php 에서 [[2026-07-15 P4-1]] 로 추가됨 —
     ≥1024 는 이 미디어쿼리 밖이라 완전 무변경. 아래 규칙들은 display 를 건드리지 않는
     자식 셀렉터라 관리자 디바이스 오버라이드(.ccb-dv-hide-t/.ccb-dv-hide-m, 루트에만 부여)
     와 명시도 경쟁이 없다 — 루트가 display:none 이면 자식 규칙은 자동으로 렌더되지 않으므로
     안전(루트 자체의 display:flex !important 규칙만 [[2026-07-15 P4-1 후속]] 로 별도
     @media (min-width:768px) and (max-width:1023px) 전용 블록으로 이관 — 아래
     .ccb-footer-grid 블록 뒤 참고, 사유: 하한 없는 이 블록은 ≤767 에서도 매칭되어
     :not(.ccb-dv-hide-t) 만으로는 :not() 의 명시도 상승 때문에 ≤767 모바일 숨김을
     이겨버리는 사고가 있었음). */
  .ccb-platform-switch a.ccb-pstab {
    flex: 1;
    padding: 11px 16px !important;
    gap: 10px !important;
    border-radius: 14px !important;
    border: 1px solid var(--c-line-soft) !important;
    background: var(--c-paper) !important;
    min-height: 0 !important;
  }
  /* 플랫폼별 색 변수 — 시안 .ps-ip/.ps-goods/.ps-search 와 1:1 동일값(tokens.css 기존 토큰 재사용) */
  .ccb-platform-switch a.ccb-pstab-ip     { --_pl: var(--c-brand-line); --_soft: var(--c-brand-soft); --_ic: var(--c-brand); }
  .ccb-platform-switch a.ccb-pstab-goods  { --_pl: var(--c-teal-line);  --_soft: var(--c-teal-soft);  --_ic: var(--c-teal); }
  .ccb-platform-switch a.ccb-pstab-search { --_pl: var(--c-plum-line); --_soft: var(--c-plum-soft); --_ic: var(--c-plum); }
  .ccb-platform-switch a.ccb-pstab--on {
    border-color: var(--_pl) !important;
    background: var(--_soft) !important;
  }
  .ccb-platform-switch .ccb-pstab__icon {
    background: var(--_soft) !important;
    color: var(--_ic) !important;
    border: none !important;
  }
  .ccb-platform-switch a.ccb-pstab--on .ccb-pstab__icon {
    background: var(--_ic) !important;
    color: #fff !important;
  }
  .ccb-platform-switch span {
    white-space: normal !important;
  }
  /* 시안 3C 에는 비활성 탭 화살표가 없음(CURRENT 뱃지만 존재) */
  .ccb-platform-switch .ccb-pstab__arrow {
    display: none !important;
  }

  /* CNIPA 상단 띠배너 — 다행 wrap(잘려서 안 보이던 stats/CTA 가 다음 줄로 이동) */
  .ccb-cnipa-inner {
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 10px 16px !important;
  }

  /* [[2026-07-15 P1-b 후속]] 좌측 인장+타이틀 블록 — 인라인 flex-shrink:0(자연폭 ~473px)이
     좁은 뷰포트에서 절대 안 줄어들어 상위 #ccb-cnipa-banner 의 overflow:hidden 에 텍스트가
     하드 클리핑되던 사고 수리(실측: 390px 에서 우측 84px 하드컷). flex-shrink 허용 + min-width:0
     으로 내부 헤드라인 텍스트가 word-break:keep-all 기준으로 정상 줄바꿈되도록 함(마크업/문구
     무변경, 클리핑 방지만). ≥1024 는 이 미디어쿼리 밖이라 무변경. */
  .ccb-cnipa-title {
    flex-shrink: 1 !important;
    min-width: 0 !important;
    max-width: 100%;
  }

  /* [[2026-07-15 P1-b]] 03-quick-menu 스팟 수리(§본문 주석 참고) — 4열 → 2열,
     min-content 트랙 팽창 방지. 카드 자체 스타일 무변경. */
  .ccb-quick-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* [[2026-07-15 P1-b]] footer 3열 스팟 수리(§본문 주석 참고) — minmax(0,1fr) 로
     min-content 트랙 팽창만 방지(열 수는 유지, 768~1023 은 3열도 폭이 충분). */
  .ccb-footer-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) !important;
  }
}

/* [[2026-07-15 P4-1 후속]] platform-switch 루트 display 전용 — 태블릿(768~1023) 한정.
   위 @media(max-width:1023px) 블록(하한 없음)에 그대로 두면 ≤767 에서도 매칭되어, 관리자
   디바이스 오버라이드 가드(:not(.ccb-dv-hide-t))를 붙여도 :not() 의 명시도 상승
   (.ccb-platform-switch:not(.ccb-dv-hide-t) = 클래스 2개, 0,2,0)이 tokens.css 의 단일
   클래스 .ccb-dv-hide-m(0,1,0)보다 항상 높아 ≤767 모바일 숨김을 이겨버리는 사고가 있었음
   (bo-auditor 실측 재현·1차 수리 재검증으로 발견). min-width:768px 로 범위를 명확히
   좁혀 이 문제 자체를 원천 차단 — 이 범위에서는 .ccb-dv-hide-m 이 애초에 매칭되지 않으므로
   :not(.ccb-dv-hide-t) 단일 가드로 충분하다. 자식 셀렉터(.ccb-pstab 등)는 위 공용 블록에
   그대로 유지(루트가 숨겨지면 자동으로 안 보이므로 무해, [[2026-07-15 P4-1]] 원본 참고). */
@media (min-width: 768px) and (max-width: 1023px) {
  .ccb-platform-switch:not(.ccb-dv-hide-t) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    display: flex !important;
    gap: 8px !important;
    padding: 10px 18px !important;
  }
}

@media (max-width: 767px) {
  /* footer — 768px 미만은 3열이 너무 좁아 1열 스택(브랜드→고객지원→계좌 순서 유지) */
  .ccb-footer-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 24px;
  }

  /* GNB 추가 컴팩트 — [[2026-07-15 P4-1]] #ccb-gnb 자체가 아래에서 ccb-hide-m 로 완전히
     숨겨지므로(햄버거 드로어로 대체) 이 규칙은 ≤767 에서는 더 이상 적용 대상이 없음(사실상
     dead — 768~1023 범위에는 영향 없으므로 무해, 제거는 회귀 리스크 대비 보류). */
  #ccb-gnb a[data-gnb-type],
  #ccb-gnb button[data-gnb-type] {
    padding: 5px 8px !important;
    font-size: 11.5px !important;
  }

  /* platform-switch — [[2026-07-15 P4-1]] 시안 ③ 3A/3B 모바일 필 바(가로 1행).
     세로 스택(구) → 가로 flex row. 색 변수(--_pl/--_soft/--_ic)는 위 @media(max-width:1023px)
     공용 블록(하한 없음, .ccb-pstab-ip/-goods/-search)에서 정의한 것을 그대로 재사용
     (이 미디어쿼리도 매칭되므로 상속됨, 중복 정의 불필요). */
  /* [[2026-07-15 P4-1 후속]] :not(.ccb-dv-hide-m) 가드 — display 전용 루트 규칙.
     태블릿(768~1023) 전용 display 규칙은 별도 @media(min-width:768px)and(max-width:1023px)
     블록으로 분리되어(위 .ccb-footer-grid 블록 뒤) 여기 ≤767 범위와 겹치지 않으므로
     :not(.ccb-dv-hide-m) 단일 가드로 충분(:not() 명시도 함정 없음 — 상세: bo-auditor
     결함 보고·재검증 및 tokens.css §관리자 디바이스 오버라이드 주석). */
  .ccb-platform-switch:not(.ccb-dv-hide-m) {
    grid-template-columns: 1fr !important; /* 폴백 무해화 — display:flex 라 미적용 */
    display: flex !important;
    gap: 6px !important;
    padding: 8px 12px !important;
  }
  .ccb-platform-switch a.ccb-pstab {
    position: relative;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 9px 4px !important;
    text-align: center;
  }
  .ccb-platform-switch .ccb-pstab__icon {
    width: 26px !important;
    height: 26px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
  }
  .ccb-platform-switch .ccb-pstab__col {
    align-items: center;
  }
  /* 서브라벨은 태블릿 이상 전용 — 모바일 필 바는 "아이콘+짧은 라벨"만(시안 §2-b 지시) */
  .ccb-platform-switch .ccb-pstab__sub {
    display: none !important;
  }
  .ccb-platform-switch .ccb-pstab__label-short {
    font-size: 11px !important;
    letter-spacing: -0.02em;
    white-space: nowrap;
  }
  /* NOW 뱃지 — 활성 탭 우상단 절대배치(시안 .cur) */
  .ccb-platform-switch .ccb-pstab__now {
    position: absolute;
    top: -7px;
    right: -3px;
    font-size: 8px;
    font-weight: 800;
    color: #fff;
    padding: 2px 5px;
    border-radius: 20px;
    letter-spacing: 0.5px;
  }
  .ccb-platform-switch .ccb-pstab-ip .ccb-pstab__now     { background: var(--c-brand); }
  .ccb-platform-switch .ccb-pstab-goods .ccb-pstab__now  { background: var(--c-teal); }
  .ccb-platform-switch .ccb-pstab-search .ccb-pstab__now { background: var(--c-plum); }

  /* CNIPA stats 필 — 96px 고정폭 4개(384px)가 390px 폭을 넘으므로 wrap + 컴팩트 축소 */
  .ccb-cnipa-stats {
    flex-wrap: wrap;
  }
  .ccb-cnipa-stats > div {
    min-width: 74px !important;
    padding: 5px 10px !important;
  }

  /* GNB 완전 숨김 — [[2026-07-15 P4-1]] #ccb-gnb 는 인라인 display:flex 를 갖고 있어
     tokens.css 의 .ccb-hide-m(의도적으로 !important 미사용, [[feedback_important_in_utilities_overrides_specificity]])
     만으로는 인라인을 이길 수 없다 — 이 요소 한정으로 ID+class 조합 + !important 오버라이드. */
  #ccb-gnb.ccb-hide-m {
    display: none !important;
  }

  /* row2(로고+GNB) 헤더 — 시안 ② 2A "닫힘(헤더)": GNB 자리 대신 검색+햄버거 아이콘만
     노출하는 52px 고정 높이 헤더. 768~1023(태블릿)은 이 규칙 밖(위 1023 블록의
     min-height:60px/wrap 값 그대로 유지). */
  .ccb-topbar-row2 {
    height: 52px !important;
    min-height: 52px !important;
    flex-wrap: nowrap !important;
    padding: 0 14px !important;
    gap: 12px;
  }

  /* 모바일 헤더 아이콘(검색+햄버거) — .ccb-only-m 기본은 display:block 이라
     flex 컨텍스트로 재정의(재사용 시 구체 선택자 규칙, [[2026-07-15 P1-a]] 패턴). */
  .ccb-mobile-header-icons.ccb-only-m {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    justify-content: flex-end;
  }
}

/* ccb-main-content 패딩 제거됨 — 각 섹션 박스가 직접 내부 padding 관리 */

/* =========================================================
   GNB 모바일 드로어 — [[2026-07-15 P4-1]]
   시안 ② GNB 드로어 완전판(상태 A~D). 트리거(햄버거 버튼)가 .ccb-only-m 이라 ≥768 에서는
   절대 클릭될 수 없고, 드로어 루트도 ≥768 에서 display:none 으로 하드 차단 — ≥768(태블릿
   포함) 렌더 완전 무변경. partials/topbar/mobile-header-icons.blade.php,
   partials/topbar/mobile-drawer.blade.php 에서 사용.
   ========================================================= */
.ccb-mh-icon-btn {
  width: 44px;              /* 시안 원값 38px → 터치 타깃 44px 룰(§레전드) 우선 적용 */
  height: 44px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-line-soft);
  background: var(--c-paper);
  color: var(--c-ink-soft);
  text-decoration: none;
  flex-shrink: 0;
  cursor: pointer;
}
.ccb-mh-icon-btn svg {
  width: 20px;
  height: 20px;
}
.ccb-mh-hamburger {
  border-color: var(--c-brand-line);
  background: var(--c-brand-soft);
  color: var(--c-brand);
}

/* 드로어 루트 — 기본 완전 비활성(visibility:hidden + pointer-events:none), .is-open 시에만 노출 */
.ccb-mdrawer-root {
  position: fixed;
  inset: 0;
  z-index: 9000;
  visibility: hidden;
  pointer-events: none;
}
.ccb-mdrawer-root.is-open {
  visibility: visible;
  pointer-events: auto;
}
@media (min-width: 768px) {
  .ccb-mdrawer-root {
    display: none !important;
  }
}

.ccb-mdrawer-dim {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.ccb-mdrawer-root.is-open .ccb-mdrawer-dim {
  opacity: 1;
}

.ccb-mdrawer {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 330px;
  max-width: 86vw;
  background: var(--c-paper);
  box-shadow: -16px 0 40px rgba(15, 23, 42, 0.25);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s ease;
}
.ccb-mdrawer-root.is-open .ccb-mdrawer {
  transform: translateX(0);
}

body.ccb-mdrawer-lock {
  overflow: hidden;
}

/* dr-top: 프로필/포인트(로그인) or 로그인 유도(비로그인) */
.ccb-mdrawer__top {
  position: relative;
  padding: 16px 16px 14px;
  background: linear-gradient(135deg, var(--c-brand-soft), var(--c-paper));
  border-bottom: 1px solid var(--c-line-soft);
  flex-shrink: 0;
}
.ccb-mdrawer__close {
  position: absolute;
  top: 10px; right: 10px;
  width: 44px; height: 44px;
  border-radius: 10px;
  border: none;
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-size: 18px;
  color: var(--c-ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ccb-mdrawer__profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 48px;
}
.ccb-mdrawer__avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--c-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--c-brand-on);
  font-size: 18px;
}
.ccb-mdrawer__name {
  font-size: 15px;
  font-weight: 800;
  color: var(--c-ink);
}
.ccb-mdrawer__name-suffix {
  font-size: 11px;
  font-weight: 600;
  color: var(--c-mute);
}
.ccb-mdrawer__grade {
  font-size: 12px;
  color: var(--c-mute);
  margin-top: 2px;
}
.ccb-mdrawer__stats {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.ccb-mdrawer__stat {
  flex: 1;
  background: var(--c-paper);
  border: 1px solid var(--c-brand-line);
  border-radius: 12px;
  padding: 9px 11px;
}
.ccb-mdrawer__stat-label {
  display: block;
  font-size: 10px;
  color: var(--c-mute);
  font-weight: 700;
}
.ccb-mdrawer__stat-value {
  font-size: 15px;
  font-weight: 800;
  color: var(--c-brand-strong);
  font-family: var(--f-mono);
}
.ccb-mdrawer__stat-unit {
  font-size: 10px;
  margin-left: 2px;
}

.ccb-mdrawer__guest-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--c-ink);
  margin-bottom: 3px;
  padding-right: 48px;
}
.ccb-mdrawer__guest-desc {
  font-size: 12px;
  color: var(--c-mute);
  margin-bottom: 14px;
}
.ccb-mdrawer__guest-cta {
  display: flex;
  gap: 8px;
}
.ccb-mdrawer__cta-btn {
  flex: 1;
  padding: 11px !important;
  font-size: 14px !important;
  border-radius: 10px !important;
  text-decoration: none;
}

/* 하단 아코디언 — 실 GNB 메뉴 트리(2뎁스) */
.ccb-mdrawer__acc {
  flex: 1;
  overflow-y: auto;
}
.ccb-mdrawer__acc-item {
  border-bottom: 1px solid var(--c-line-soft);
}
.ccb-mdrawer__acc-h {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  min-height: 48px;
  font-size: 15px;
  font-weight: 700;
  color: var(--c-ink);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--f-sans);
}
.ccb-mdrawer__acc-h--flat {
  cursor: default;
}
.ccb-mdrawer__acc-item--link {
  display: block;
  text-decoration: none;
}
.ccb-mdrawer__acc-item--link.is-disabled {
  cursor: default;
  opacity: 0.6;
}
.ccb-mdrawer__chev {
  flex-shrink: 0;
  transition: transform 0.2s ease;
  color: var(--c-mute);
}
.ccb-mdrawer__acc-item.is-open .ccb-mdrawer__acc-h {
  color: var(--c-brand-strong);
}
.ccb-mdrawer__acc-item.is-open .ccb-mdrawer__chev {
  transform: rotate(180deg);
  color: var(--c-brand);
}
.ccb-mdrawer__acc-body {
  background: var(--c-paper-2);
  padding: 2px 0 8px;
}
.ccb-mdrawer__acc-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  padding: 11px 18px 11px 30px;
  font-size: 14px;
  color: var(--c-ink-soft);
  text-decoration: none;
  font-weight: 500;
  background: transparent;
  border: none;
  text-align: left;
  font-family: var(--f-sans);
  cursor: pointer;
}
.ccb-mdrawer__acc-link:disabled {
  cursor: default;
  opacity: 0.55;
}
.ccb-mdrawer__acc-arr {
  color: var(--c-line);
  font-size: 12px;
}
.ccb-mdrawer__acc-link.is-current {
  color: var(--c-brand-strong);
  font-weight: 800;
  background: var(--c-brand-soft);
}
.ccb-mdrawer__acc-cur {
  font-size: 10px;
  color: var(--c-brand);
  font-weight: 800;
}

/* 하단 고정 CTA — 연결예정(견적서 요청 route 없음, utility-bar.blade.php 동일 항목과 같은 상태) */
.ccb-mdrawer__footer-cta {
  flex-shrink: 0;
  padding: 12px 16px;
  border-top: 1px solid var(--c-line-soft);
}
.ccb-mdrawer__footer-btn {
  width: 100%;
  padding: 13px !important;
  font-size: 15px !important;
  border-radius: 12px !important;
}

/* ── Phase 1b 콘텐츠 placeholder ────────────────────────── */
.ccb-phase1b-placeholder {
  border: 2px dashed var(--c-brand-line);
  border-radius: 12px;
  background: var(--c-brand-soft);
  padding: 48px 24px;
  text-align: center;
  margin-bottom: 24px;
}

.ccb-phase1b-placeholder .ph-label {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--c-brand-strong);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.ccb-phase1b-placeholder .ph-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: 6px;
}

.ccb-phase1b-placeholder .ph-desc {
  font-size: 13px;
  color: var(--c-mute);
}

/* ── GNB 드롭다운 ─────────────────────────────────────────── */
.ccb-gnb-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  background: var(--c-paper);
  border-top: 2px solid var(--c-brand);
  border: 1px solid var(--c-line);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 12px 28px rgba(15,23,42,0.18);
  padding: 6px 0;
  z-index: 40;
}

/* ── CNIPA 배너 dismiss ──────────────────────────────────── */
.ccb-cnipa-banner[aria-hidden="true"] {
  display: none;
}

/* ── 포인트 바 ───────────────────────────────────────────── */
.ccb-point-bar {
  height: 5px;
  background: rgba(15,23,42,0.1);
  border-radius: 3px;
  overflow: hidden;
}

.ccb-point-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--c-accent), var(--c-accent));
  border-radius: 3px;
}

/* ── 카테고리 트리 ───────────────────────────────────────── */
.ccb-cat-node {
  font-size: 12px;
  color: var(--c-ink);
}

.ccb-cat-node-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-size: 12px;
  color: var(--c-ink);
  font-family: var(--f-sans);
}

.ccb-cat-node-btn:hover {
  background: var(--c-accent-soft);
  color: var(--c-brand-strong);
}

.ccb-cat-node-btn.is-active {
  background: var(--c-brand-soft);
  color: var(--c-brand-strong);
  font-weight: 600;
}

/* ── 섹션 헤더 ───────────────────────────────────────────── */
.ccb-section-header {
  margin-bottom: 16px;
}

.ccb-section-badge {
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--c-brand);
  margin-bottom: 6px;
}

.ccb-section-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--c-ink);
  margin: 0;
  letter-spacing: -0.01em;
}

.ccb-section-desc {
  font-size: 14px;
  color: var(--c-mute);
  margin-left: 12px;
}

/* ── Section accent 배경 6종 (home/main.jsx Section 컴포넌트 매핑) ───── */
.ccb-section {
  border-radius: 16px;
  margin-bottom: 24px;
}

/* none: accent 없는 섹션 — 흰 배경, 개별 테두리로 구분 */
.ccb-section:not([class*='ccb-section-']) {
  padding: 28px 24px;
  background: var(--c-paper);
  border: 1px solid var(--c-line-soft);
}

/* peach: linear-gradient(180deg, var(--c-accent-soft) 0%, #FFFFFF 100%) */
.ccb-section-peach {
  background: linear-gradient(180deg, var(--c-accent-soft) 0%, #FFFFFF 100%);
  border: 1px solid #FDE68A;
  padding: 28px 24px;
}

/* cream: linear-gradient(180deg, #FEFCE8 0%, #FFFFFF 100%) */
.ccb-section-cream {
  background: linear-gradient(180deg, #FEFCE8 0%, #FFFFFF 100%);
  border: 1px solid #FEF3C7;
  padding: 28px 24px;
}

/* mint: linear-gradient(180deg, var(--c-ok-soft) 0%, #FFFFFF 100%) */
.ccb-section-mint {
  background: linear-gradient(180deg, var(--c-ok-soft) 0%, #FFFFFF 100%);
  border: 1px solid #A7F3D0;
  padding: 28px 24px;
}

/* lavender: linear-gradient(180deg, var(--c-plum-soft) 0%, #FFFFFF 100%) */
.ccb-section-lavender {
  background: linear-gradient(180deg, var(--c-plum-soft) 0%, #FFFFFF 100%);
  border: 1px solid var(--c-plum-tint);
  padding: 28px 24px;
}

/* sky: linear-gradient(180deg, var(--c-brand-soft) 0%, #FFFFFF 100%) */
.ccb-section-sky {
  background: linear-gradient(180deg, var(--c-brand-soft) 0%, #FFFFFF 100%);
  border: 1px solid var(--c-brand-line);
  padding: 28px 24px;
}

/* ── 배너 섹션 박스 — 개별 테두리 (흰 배경 위 박스 구분) ─── */
/* 01-banner-slider 의 <section> 용. 내부 슬라이더가 border-radius overflow:hidden 처리 */
.ccb-section-banner {
  margin-bottom: 18px;
  border: 1px solid var(--c-line-soft);
  border-radius: 12px;
  overflow: hidden;
}

/* ── 푸터 박스 개별 테두리 ──────────────────────────────────── */
/* partials/footer/index.blade.php 의 <footer> 태그 용 */
.ccb-footer-box {
  border: 1px solid var(--c-line-soft);
}

/* ── 우측 sticky 퀵 배너 (홈 전용, partials/quick-banner.blade.php) ── */
/* z-index 80: 토글버튼(99999) < 헤더 sticky(100) 사이에 배치. 드롭다운(40) 위 */
.ccb-quick-banner {
  position: fixed;
  right: calc(50vw - (var(--ccb-max-width) / 2) - 240px - 16px); /* 배너 왼쪽 끝=박스 우측 가장자리+16px 간격. 콘텐츠와 16px 여백 확보. 1792px↑에서만 노출(미디어쿼리로 그 이하 숨김) */
  top: 240px;             /* cnipa띠(≈68px)+platform-switch(54px)+topbar1행유틸리티(38px)+topbar2행GNB(70px)≈230px+여유→콘텐츠 영역 상단 정렬 */
  width: 240px;
  z-index: 80;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--sh-md);
  /* wf-card 톤 */
  background: var(--c-paper);
  border: 1px solid var(--c-line-soft);
}

/* 폭별 배너 거동 — 우측 퀵배너 (.ccb-quick-banner)
   ≥1792px : 기존 gutter 위치 (calc right, 240px, 기존 CSS 유지)
   1440~1791px : gutter 공간 부족 → 뷰포트 우측 가장자리 고정, 200px 컴팩트
   1024~1439px : [[2026-07-14 P1-0]] 배너 유지 — 뷰포트 우측 가장자리 고정, 150px 더 컴팩트
                 (.ccb-shell 이 동시에 좁아져 배너와 8px 간격 확보 — 위 §노트북 구간 규칙 참고)
   <1024px : 768~1023(태블릿 세로)·모바일은 이번 작업 범위 밖 — 기존대로 숨김 유지

   산술 근거:
     calc = 50vw - 640 - 240 - 16 = 50vw - 896
     1792px → 896 - 896 = 0px  (배너 좌측=패널 우측 가장자리, 정상)
     1536px → 768 - 896 = -128px (화면 밖 — 가장자리 전환 필요)
     1440px → 720 - 896 = -176px (화면 밖 — 가장자리 전환 필요)
*/
@media (max-width: 1791px) and (min-width: 1440px) {
  /* 가장자리 고정 모드: 우측 8px 여백, 폭 200px 컴팩트 */
  .ccb-quick-banner {
    right: 8px;
    width: 200px;
  }
}
@media (max-width: 1439px) and (min-width: 1024px) {
  /* 노트북 구간: 우측 8px 여백, 폭 150px 컴팩트. 헤더/본문 텍스트도 같이 축약 */
  .ccb-quick-banner {
    right: 8px;
    width: 150px;
    /* [[2026-07-15 P2-c]] 관리자 디바이스 오버라이드(settings.devices.tablet.height) —
       미설정 시 --qb-h-t 미선언 → var() 폴백 auto → 기존 렌더 무변경 */
    min-height: var(--qb-h-t, auto);
  }
  .ccb-quick-banner__header {
    padding: 16px 14px 14px;
  }
  .ccb-quick-banner__brand-title {
    font-size: 16px;
    white-space: normal;    /* 150px 폭에서 nowrap 잘림 방지 — 줄바꿈 허용 */
    word-break: keep-all;
  }
  .ccb-quick-banner__body {
    padding: 12px 12px 14px;
  }
  .ccb-quick-banner__price-amount {
    font-size: 22px;
  }
}
@media (max-width: 1023px) {
  /* 768~1023(태블릿 세로)·모바일 — [[2026-07-14 P1-0]] 당시 범위 밖으로 숨김 처리했던 구간.
     [[2026-07-15 P1-a]] 부터는 partials/quick-banner-inline.blade.php(h-carousel 스트립)가
     같은 콘텐츠를 본문 상단에 인라인으로 대체 표시 — "숨김"이 아니라 "위치 이동"(§2-b 방침).
     이 고정(sticky) aside 자체는 계속 숨김 유지(≥1024 전용, 무변경). */
  .ccb-quick-banner {
    display: none;
  }
}

/* =========================================================
   가로 캐러셀 컴포넌트 — h-carousel (2026-07-15 P1-a 신설)
   components/h-carousel.blade.php 전용 CSS. CSS scroll-snap 기반, 외부 라이브러리 없음.
   재사용 전제: 퀵배너 인라인 스트립(P1-a, 아래 .ccb-qbi-*) + 메인 섹션(P1-b 예정)이 소비.
   ========================================================= */
.ccb-hcar {
  position: relative;
}
.ccb-hcar__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;    /* Firefox */
  -ms-overflow-style: none; /* 구형 Edge */
  /* [[2026-07-15 P4-2]] 좌우 패딩 16→14px — 시안 mobile-visual-specs §범례
     "카드 간격 12px·좌우 패딩 14px·다음 카드 peek 16px" 정렬. gap(아래 track)은 이미
     12px 로 시안값과 일치해 무변경. 이 파일 한 곳 수정으로 전 인스턴스(qbi/plan/blog) 적용. */
  padding: 4px 14px 8px;
  scroll-padding-left: 14px;
}
.ccb-hcar__viewport::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}
.ccb-hcar__track {
  display: flex;
  gap: 12px;
  width: max-content; /* 아이템이 뷰포트 폭에 눌리지 않도록 콘텐츠 크기로 고정 */
}
.ccb-hcar__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
}
.ccb-hcar__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 4px 0 2px;
}
.ccb-hcar__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--c-line);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 0.15s ease, width 0.15s ease;
}
.ccb-hcar__dot--active {
  /* [[2026-07-15 P4-2]] 16→20px — 시안 "6px 원·활성 20px 알약" 도트 스타일 정렬 */
  background: var(--c-brand);
  width: 20px;
}


/* 브랜드 헤더 블록 */
.ccb-quick-banner__header {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--c-brand-strong) 0%, var(--c-brand) 100%);
  color: var(--c-brand-on);
  padding: 20px 18px 18px;
}

/* 장식 원 — 원본 가로 카드와 동일 토큰/rgba */
.ccb-quick-banner__deco {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.ccb-quick-banner__deco--ring {
  right: -20px;
  bottom: -20px;
  width: 90px;
  height: 90px;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.ccb-quick-banner__deco--dot {
  right: -6px;
  bottom: -6px;
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.12);
}

/* 브랜드 레이블/타이틀 */
.ccb-quick-banner__brand-label {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--c-brand-tint);
  text-align: left;
}
.ccb-quick-banner__brand-title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--c-brand-on);
  white-space: nowrap;
  text-align: left;
}

/* 본문 영역 */
.ccb-quick-banner__body {
  padding: 14px 16px 16px;
}

/* 핀 배지 행 */
.ccb-quick-banner__badge-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.ccb-quick-banner__badge {
  display: inline-block;
  background: var(--c-brand-tint);
  color: var(--c-brand-strong);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  align-self: flex-start;
}
.ccb-quick-banner__sub-label {
  /* wf-mono 와 동일 — color만 --c-mute */
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--c-mute);
  padding-left: 2px;
}

/* 타이틀 */
.ccb-quick-banner__title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 800;
  color: var(--c-ink);
  line-height: 1.35;
  letter-spacing: -0.01em;
  word-break: keep-all;
}

/* 설명 */
.ccb-quick-banner__desc {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--c-ink-soft);
  line-height: 1.7;
  word-break: keep-all;
}

/* 가격 블록 */
.ccb-quick-banner__price-block {
  background: var(--c-paper-2);
  border: 1px solid var(--c-line-soft);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.ccb-quick-banner__price-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--c-mute);
  margin-bottom: 4px;
}
.ccb-quick-banner__price-row {
  display: flex;
  align-items: baseline;
  gap: 3px;
  line-height: 1;
}
.ccb-quick-banner__price-amount {
  font-size: 26px;
  font-weight: 800;
  color: var(--c-brand);
  letter-spacing: -0.02em;
}
.ccb-quick-banner__price-unit {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-brand);
}
.ccb-quick-banner__price-vat {
  display: block;
  font-size: 10px;
  color: var(--c-mute);
  margin-top: 3px;
}

/* CTA 버튼 — 풀폭 */
.ccb-quick-banner__cta {
  display: block;
  width: 100%;
  padding: 10px 0;
  background: var(--c-brand);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border-radius: 7px;
  letter-spacing: 0.02em;
  transition: background 0.15s;
}
.ccb-quick-banner__cta:hover {
  background: var(--c-brand-strong);
  color: #ffffff;
}

/* ── 중국상표 대리 안내 페이지 (china-agency) — .ccb-ca-* ─── */

/* 내부 페이지 공통 래퍼 */
.ccb-ca-page {
  padding: 0 0 64px;
  background: var(--c-bg);
}

/* 섹션 공통 */
.ccb-ca-section {
  padding: 56px 28px;
  max-width: var(--ccb-max-width);
  margin-inline: auto;
  box-sizing: border-box;
}

.ccb-ca-section + .ccb-ca-section {
  padding-top: 48px;
}

/* ── 마키 스트립 ── */
.ccb-ca-marquee-wrap {
  background: var(--c-brand);
  color: var(--c-brand-on);
  overflow: hidden;
  padding: 9px 0;
  border-bottom: 1px solid var(--c-brand-strong);
}

.ccb-ca-marquee-track {
  display: flex;
  gap: 48px;
  width: max-content;
  animation: ccb-ca-marquee 28s linear infinite;
  white-space: nowrap;
}

.ccb-ca-marquee-track:hover {
  animation-play-state: paused;
}

.ccb-ca-marquee-item {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ccb-ca-marquee-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  display: inline-block;
  flex-shrink: 0;
}

@keyframes ccb-ca-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── 히어로 ── */
.ccb-ca-hero {
  background: var(--c-paper);
  border-bottom: 1px solid var(--c-line-soft);
}

.ccb-ca-hero-inner {
  max-width: var(--ccb-max-width);
  margin-inline: auto;
  padding: 64px 28px 56px;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 48px;
  align-items: start;
  box-sizing: border-box;
}

.ccb-ca-eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--c-brand);
  margin-bottom: 16px;
}

.ccb-ca-h1 {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  margin: 0 0 20px;
  word-break: keep-all;
}

.ccb-ca-lead {
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-ink-soft);
  margin: 0 0 24px;
  word-break: keep-all;
  max-width: 560px;
}

.ccb-ca-meta {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--c-mute);
  letter-spacing: 0.06em;
}

/* 히어로 카드 */
.ccb-ca-hero-card {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  box-shadow: var(--sh-md);
  overflow: hidden;
}

.ccb-ca-hero-card__header {
  background: linear-gradient(135deg, var(--c-brand-strong) 0%, var(--c-brand) 100%);
  padding: 20px 20px 18px;
  position: relative;
  overflow: hidden;
}

.ccb-ca-hero-card__deco {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.ccb-ca-hero-card__deco--ring {
  right: -24px;
  bottom: -24px;
  width: 100px;
  height: 100px;
  border: 1px solid rgba(255,255,255,0.22);
}

.ccb-ca-hero-card__deco--dot {
  right: -8px;
  bottom: -8px;
  width: 56px;
  height: 56px;
  background: rgba(255,255,255,0.10);
}

.ccb-ca-hero-card__label {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--c-brand-tint);
  margin-bottom: 6px;
}

.ccb-ca-hero-card__name {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}

.ccb-ca-hero-card__sub {
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  line-height: 1.5;
}

.ccb-ca-hero-card__body {
  padding: 18px 20px;
}

.ccb-ca-hero-card__row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ccb-ca-hero-card__item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
}

.ccb-ca-hero-card__key {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--c-mute);
  min-width: 80px;
  padding-top: 2px;
  flex-shrink: 0;
}

.ccb-ca-hero-card__val {
  color: var(--c-ink);
  font-size: 13px;
  line-height: 1.5;
  word-break: keep-all;
}

/* 통계 4 그리드 */
.ccb-ca-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--c-line-soft);
  border: 1px solid var(--c-line-soft);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 40px;
}

.ccb-ca-stat {
  background: var(--c-paper);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ccb-ca-stat__num {
  font-size: 22px;
  font-weight: 800;
  color: var(--c-brand);
  letter-spacing: -0.02em;
  line-height: 1;
}

.ccb-ca-stat__num--accent {
  color: var(--c-accent);
}

.ccb-ca-stat__desc {
  font-size: 12px;
  color: var(--c-ink-soft);
  line-height: 1.5;
  word-break: keep-all;
}

/* ── About / Company Snapshot ── */
.ccb-ca-about-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  align-items: start;
}

.ccb-ca-h2 {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  margin: 0 0 12px;
  word-break: keep-all;
}

.ccb-ca-sub {
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-ink-soft);
  margin: 0 0 24px;
  word-break: keep-all;
}

.ccb-ca-body-text {
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-ink-soft);
  margin: 0 0 16px;
  word-break: keep-all;
}

.ccb-ca-snapshot {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  box-shadow: var(--sh-sm);
  overflow: hidden;
}

.ccb-ca-snapshot__header {
  background: var(--c-paper-2);
  border-bottom: 1px solid var(--c-line-soft);
  padding: 12px 18px;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--c-brand);
}

.ccb-ca-snapshot__row {
  display: flex;
  border-bottom: 1px solid var(--c-line-soft);
}

.ccb-ca-snapshot__row:last-child {
  border-bottom: none;
}

.ccb-ca-snapshot__key {
  width: 100px;
  flex-shrink: 0;
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-mute);
  background: var(--c-paper-2);
  border-right: 1px solid var(--c-line-soft);
}

.ccb-ca-snapshot__val {
  flex: 1;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--c-ink);
  line-height: 1.5;
}

/* ── 서비스 카드 그리드 ── */
.ccb-ca-svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.ccb-ca-svc-card {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  padding: 22px 20px;
  box-shadow: var(--sh-sm);
  transition: box-shadow 0.15s, border-color 0.15s;
}

.ccb-ca-svc-card:hover {
  border-color: var(--c-brand-line);
  box-shadow: var(--sh-md);
}

.ccb-ca-svc-num {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--c-brand);
  margin-bottom: 8px;
}

.ccb-ca-svc-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: 8px;
  line-height: 1.4;
  word-break: keep-all;
}

.ccb-ca-svc-desc {
  font-size: 13px;
  color: var(--c-ink-soft);
  line-height: 1.7;
  word-break: keep-all;
}

/* ── CNIPA 섹션 배경 ── */
.ccb-ca-cnipa-bg {
  background: linear-gradient(180deg, var(--c-brand-soft) 0%, var(--c-paper) 100%);
  border-top: 1px solid var(--c-brand-line);
  border-bottom: 1px solid var(--c-line-soft);
}

/* Verification Tip 콜아웃 */
.ccb-ca-tip {
  background: var(--c-brand-soft);
  border: 1px solid var(--c-brand-line);
  border-left: 4px solid var(--c-brand);
  border-radius: 6px;
  padding: 14px 18px;
  margin: 20px 0 32px;
  font-size: 13px;
  color: var(--c-brand-strong);
  line-height: 1.65;
  word-break: keep-all;
}

/* 자격 이미지 3-up 그리드 */
.ccb-ca-cert-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 28px;
}

.ccb-ca-cert-card {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--sh-sm);
}

.ccb-ca-cert-card__img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ccb-ca-cert-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.ccb-ca-cert-card__body {
  padding: 14px 16px;
}

.ccb-ca-cert-num {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--c-brand);
  margin-bottom: 6px;
}

.ccb-ca-cert-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: 4px;
  word-break: keep-all;
}

.ccb-ca-cert-sub {
  font-size: 12px;
  color: var(--c-mute);
  line-height: 1.6;
  word-break: keep-all;
}

.ccb-ca-cert-pill {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 10px;
  background: var(--c-ok-soft);
  border: 1px solid #A7F3D0;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  color: var(--c-ok);
  letter-spacing: 0.06em;
}

/* 경고 notice 박스 */
.ccb-ca-notice {
  background: var(--c-warn-soft);
  border: 1px solid var(--c-warn-line);
  border-left: 4px solid var(--c-warn);
  border-radius: 6px;
  padding: 16px 18px;
}

.ccb-ca-notice__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-warn-strong);
  margin-bottom: 6px;
}

.ccb-ca-notice__body {
  font-size: 13px;
  color: var(--c-ink-soft);
  line-height: 1.7;
  word-break: keep-all;
}

/* ── 타임라인 ── */
.ccb-ca-history-bg {
  background: var(--c-paper);
  border-top: 1px solid var(--c-line-soft);
  border-bottom: 1px solid var(--c-line-soft);
}

.ccb-ca-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding-left: 32px;
}

.ccb-ca-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--c-line);
  border-radius: 1px;
}

.ccb-ca-tl-item {
  position: relative;
  padding: 20px 0 20px 24px;
  border-bottom: 1px solid var(--c-line-soft);
}

.ccb-ca-tl-item:last-child {
  border-bottom: none;
}

.ccb-ca-tl-item::before {
  content: '';
  position: absolute;
  left: -28px;
  top: 25px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-line);
  border: 2px solid var(--c-paper);
  box-shadow: 0 0 0 1px var(--c-line);
}

.ccb-ca-tl-item--accent::before {
  background: var(--c-accent);
  box-shadow: 0 0 0 1px var(--c-accent);
}

.ccb-ca-tl-year {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--c-mute);
  margin-bottom: 4px;
}

.ccb-ca-tl-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: 4px;
  word-break: keep-all;
}

.ccb-ca-tl-item--accent .ccb-ca-tl-title {
  color: var(--c-accent-strong);
}

.ccb-ca-tl-body {
  font-size: 13px;
  color: var(--c-ink-soft);
  line-height: 1.7;
  word-break: keep-all;
}

/* ── 2026 AI 섹션 ── */
.ccb-ca-ai-bg {
  background: linear-gradient(180deg, #0F172A 0%, #1E293B 100%);
  border-top: 1px solid rgba(255,255,255,0.06);
}

.ccb-ca-ai-inner {
  max-width: var(--ccb-max-width);
  margin-inline: auto;
  padding: 64px 28px 56px;
  box-sizing: border-box;
}

.ccb-ca-ai-hero {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 48px;
  align-items: start;
  margin-bottom: 48px;
}

.ccb-ca-ai-kicker {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--c-accent);
  margin-bottom: 16px;
}

.ccb-ca-ai-h2 {
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 0 0 16px;
  word-break: keep-all;
}

.ccb-ca-ai-sub {
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255,255,255,0.65);
  word-break: keep-all;
  margin: 0 0 24px;
}

.ccb-ca-ai-body {
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255,255,255,0.55);
  word-break: keep-all;
}

/* ai-stat 카드 */
.ccb-ca-ai-stat {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ccb-ca-ai-stat__item {
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ccb-ca-ai-stat__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ccb-ca-ai-stat__key {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.40);
}

.ccb-ca-ai-stat__val {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.88);
  letter-spacing: 0.01em;
}

/* AI 기능 6 카드 그리드 */
.ccb-ca-feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.ccb-ca-feat-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  padding: 20px 18px;
  transition: background 0.15s, border-color 0.15s;
}

.ccb-ca-feat-card:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.20);
}

.ccb-ca-feat-num {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--c-accent);
  margin-bottom: 8px;
}

.ccb-ca-feat-title {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.90);
  margin-bottom: 6px;
  word-break: keep-all;
}

.ccb-ca-feat-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
  word-break: keep-all;
}

/* ── 연락처 CTA ── */
.ccb-ca-cta-bg {
  background: var(--c-paper);
  border-top: 1px solid var(--c-line-soft);
}

.ccb-ca-kicker-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.ccb-ca-kicker-item {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--c-mute);
  display: flex;
  align-items: center;
  gap: 6px;
}

.ccb-ca-kicker-item::before {
  content: '—';
  color: var(--c-brand);
}

.ccb-ca-cta-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  align-items: start;
}

.ccb-ca-contact-card {
  background: var(--c-paper-2);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  overflow: hidden;
}

.ccb-ca-contact-card__header {
  background: var(--c-paper);
  border-bottom: 1px solid var(--c-line-soft);
  padding: 12px 18px;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--c-brand);
}

.ccb-ca-contact-card__body {
  padding: 18px;
}

.ccb-ca-contact-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--c-ink);
  margin-bottom: 2px;
}

.ccb-ca-contact-en {
  font-size: 12px;
  color: var(--c-mute);
  margin-bottom: 14px;
  font-weight: 500;
}

.ccb-ca-contact-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ccb-ca-contact-item {
  display: flex;
  gap: 10px;
  font-size: 13px;
  align-items: flex-start;
}

.ccb-ca-contact-key {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--c-mute);
  min-width: 80px;
  padding-top: 2px;
  flex-shrink: 0;
}

.ccb-ca-contact-val {
  color: var(--c-ink);
  line-height: 1.5;
}

.ccb-ca-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  background: var(--c-brand);
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 0.02em;
  text-decoration: none;
  margin-top: 28px;
  box-shadow: var(--sh-brand);
  transition: background 0.15s;
}

.ccb-ca-cta-btn:hover {
  background: var(--c-brand-strong);
  color: #ffffff;
}

/* ── 반응형 ── */
@media (max-width: 1023px) {
  .ccb-ca-hero-inner {
    grid-template-columns: 1fr;
    padding: 40px 24px 36px;
  }
  .ccb-ca-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .ccb-ca-about-grid {
    grid-template-columns: 1fr;
  }
  .ccb-ca-svc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ccb-ca-cert-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ccb-ca-ai-hero {
    grid-template-columns: 1fr;
  }
  .ccb-ca-feat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ccb-ca-cta-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .ccb-ca-section {
    padding: 40px 20px;
  }
  .ccb-ca-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .ccb-ca-svc-grid {
    grid-template-columns: 1fr;
  }
  .ccb-ca-cert-grid {
    grid-template-columns: 1fr;
  }
  .ccb-ca-feat-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 359px) {
  .ccb-ca-stats {
    grid-template-columns: 1fr;
  }
  .ccb-ca-h1 {
    font-size: 26px;
  }
}

/* ── 좌측 sticky 퀵 배너 — 2카드 스택 (홈 전용, partials/quick-banner-left.blade.php) ── */
/* 우측 .ccb-quick-banner 와 대칭(top·폭·숨김 임계값 동일). 색만 --c-danger*. 클래스/id 완전 분리 */
.ccb-quick-banner-left {
  position: fixed;
  left: calc(50vw - (var(--ccb-max-width) / 2) - 240px - 16px); /* 배너 우측 끝=박스 좌측 가장자리+16px 간격 */
  top: 240px;             /* JS 폴백 — positionBannerLeft() 로 .ccb-content-row 상단에 동기 */
  width: 240px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 폭별 배너 거동 — 좌측 퀵배너 (.ccb-quick-banner-left)
   우측 배너와 대칭 (left ↔ right, 임계값·폭 동일)
   ≥1792px : gutter 위치 유지 (calc left, 240px)
   1440~1791px : 뷰포트 좌측 가장자리 고정, 200px 컴팩트
   1024~1439px : [[2026-07-14 P1-0]] 배너 유지 — 뷰포트 좌측 가장자리 고정, 150px 더 컴팩트
   <1024px : 태블릿 세로·모바일은 이번 작업 범위 밖 — 기존대로 숨김 유지 */
@media (max-width: 1791px) and (min-width: 1440px) {
  .ccb-quick-banner-left {
    left: 8px;
    width: 200px;
  }
}
@media (max-width: 1439px) and (min-width: 1024px) {
  .ccb-quick-banner-left {
    left: 8px;
    width: 150px;
  }
  .ccb-qbl-card__header {
    padding: 16px 14px 14px;
  }
  .ccb-qbl-card__body {
    padding: 12px 12px 14px;
  }
}
@media (max-width: 1023px) {
  .ccb-quick-banner-left {
    display: none;
  }
}


/* 개별 카드 — wf-card 톤, radius/shadow 우측 배너(.ccb-quick-banner) 동일 */
.ccb-qbl-card {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--sh-md);
  background: var(--c-paper);
  border: 1px solid var(--c-line-soft);
}

/* 카드 헤더 — 공통 (색은 variant 클래스로 분리) */
.ccb-qbl-card__header {
  position: relative;
  overflow: hidden;
  color: var(--c-brand-on);
  padding: 20px 18px 18px;
}

/* variant: danger (전문가 빨강) */
.ccb-qbl-card--danger .ccb-qbl-card__header {
  background: linear-gradient(135deg, var(--c-danger-strong) 0%, var(--c-danger) 100%);
}

/* variant: plum (셀프 보라) */
.ccb-qbl-card--plum .ccb-qbl-card__header {
  background: linear-gradient(135deg, var(--c-plum-strong) 0%, var(--c-plum) 100%);
}

/* 장식 원 — 우측 배너와 동일 패턴, 색만 흰색 반투명 */
.ccb-qbl-card__deco {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.ccb-qbl-card__deco--ring {
  right: -20px;
  bottom: -20px;
  width: 90px;
  height: 90px;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.ccb-qbl-card__deco--dot {
  right: -6px;
  bottom: -6px;
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.12);
}

/* 카드 헤더 레이블 */
.ccb-qbl-card__label {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.72);
  text-align: left;
}

/* 카드 헤더 타이틀 */
.ccb-qbl-card__title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--c-brand-on);
  word-break: keep-all;
  text-align: left;
}

/* 카드 본문 */
.ccb-qbl-card__body {
  padding: 14px 16px 16px;
}

/* 부제 */
.ccb-qbl-card__desc {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--c-ink-soft);
  line-height: 1.6;
  word-break: keep-all;
}

/* CTA 버튼 — 공통 (색은 variant 클래스로 분리), 풀폭 */
.ccb-qbl-card__cta {
  display: block;
  width: 100%;
  padding: 10px 0;
  color: var(--c-brand-on);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border-radius: 7px;
  letter-spacing: 0.02em;
  transition: background 0.15s;
  box-sizing: border-box;
}

/* variant: danger CTA */
.ccb-qbl-card--danger .ccb-qbl-card__cta          { background: var(--c-danger); }
.ccb-qbl-card--danger .ccb-qbl-card__cta:hover    { background: var(--c-danger-strong); }

/* variant: plum CTA */
.ccb-qbl-card--plum .ccb-qbl-card__cta            { background: var(--c-plum); }
.ccb-qbl-card--plum .ccb-qbl-card__cta:hover      { background: var(--c-plum-strong); }

/* variant: brand (AI 파랑) */
.ccb-qbl-card--brand .ccb-qbl-card__header {
  background: linear-gradient(135deg, var(--c-brand-strong) 0%, var(--c-brand) 100%);
}
.ccb-qbl-card--brand .ccb-qbl-card__cta           { background: var(--c-brand); }
.ccb-qbl-card--brand .ccb-qbl-card__cta:hover     { background: var(--c-brand-strong); }

/* =========================================================
   태블릿·모바일 인라인 퀵배너 스트립 — .ccb-qbi-* (2026-07-15 P1-a)
   partials/quick-banner-inline.blade.php 전용. h-carousel(.ccb-hcar-*) 을 소비.
   768~1023(태블릿)·≤767(모바일)에서만 tokens.css 의 .ccb-only-t/.ccb-only-m 로 표시.

   콘텐츠는 .ccb-quick-banner__header/__body(우측)·.ccb-qbl-card(좌측)를 그대로 재사용하되,
   고정(position:fixed) 셸 클래스(.ccb-quick-banner/.ccb-quick-banner-left)는 ≤1023px 에서
   display:none 규칙을 갖고 있어 재사용 금지 — 대신 이 전용 셸 클래스(.ccb-qbi-card)로 감쌌다.
   ========================================================= */
.ccb-qbi {
  margin: 0 0 16px;
}
.ccb-qbi .ccb-hcar__viewport {
  padding: 4px 16px 10px;
}
.ccb-qbi-card {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--sh-md);
  background: var(--c-paper);
  border: 1px solid var(--c-line-soft);
  width: 100%;
  height: 100%;
  /* [[2026-07-15 P2-c]] 관리자 디바이스 오버라이드(settings.devices.tablet.height) —
     이 클래스는 768~1023(태블릿)·≤767(모바일) 양쪽에서 미디어쿼리 구분 없이 사용되므로
     기본값은 --qb-h-t(태블릿) 소비, ≤767 은 아래 별도 규칙으로 --qb-h-m 로 override.
     오버라이드 미설정 시 두 변수 모두 미선언 → var() 폴백 auto → 기존 렌더 무변경. */
  min-height: var(--qb-h-t, auto);
}
@media (max-width: 767px) {
  .ccb-qbi-card {
    min-height: var(--qb-h-m, auto);
  }
}
.ccb-qbi__item--right {
  width: 260px;
  flex: 0 0 260px;
}
.ccb-qbi__item--left {
  width: 220px;
  flex: 0 0 220px;
}
@media (max-width: 359px) {
  /* 한국 CSS 최적화 4단계 기준 최소 360px 대응 — 360 미만에서 카드 폭 추가 축소 */
  .ccb-qbi__item--right {
    width: 230px;
    flex: 0 0 230px;
  }
  .ccb-qbi__item--left {
    width: 200px;
    flex: 0 0 200px;
  }
}

/* =========================================================
   P1-c — 메인 콘텐츠 섹션 8종 + 배너 변형 + 푸터 태블릿·모바일 리플로우
   (2026-07-15) docs/design/06_디바이스_반응형_시스템_기획_2026-07-14.md §9 P1 후속.
   선행 = [[project_p1a_responsive_hcarousel_2026_07_15]] [[project_p1b_topbar_gnb_responsive_2026_07_15]]
   [[project_p1b_followup_gnb_overlap_fix_2026_07_15]]. ≥1024 전 구간 무변경 원칙 — 아래 규칙
   전부 @media(max-width:1023px)/(max-width:767px) 스코프 안에만 존재. 각 섹션은 원본이 인라인
   style 로만 작성돼 있어(P1-b 와 동일 패턴), 새 hook 클래스를 병기하고 여기서 override(+!important,
   inline 과 동일 속성을 건드릴 때만) 하는 방식 — blade 인라인 스타일 자체는 무변경(값 100% 보존).

   섹션별 판정 요약(세션 보고 §섹션별 처리 결정표 상세):
     01 배너슬라이더    — 3변형 각각 텍스트/아트 스택 전환 + 폰트·높이 축소(회전 슬라이드라 리스트 아님)
     02 long-promo      — 3블록 합성 카드, 소량 → ≤767 세로 스택
     03 quick-menu       — 4개 카드, 이미 2열 그리드(P1-b) → 패딩/아이콘만 미세 조정
     04 main-promo       — 2열 카드(텍스트+아트), 소량 → ≤1023 세로 스택
     05 plan-trademark   — 8개국 카드, 나열형 → ≤767 h-carousel 전환(데스크톱/태블릿 그리드는 유지)
     06 two-promo        — 2개 카드, 소량 → ≤767 세로 스택
     07 three-promo      — 3개 카드, 소량 → ≤767 세로 스택(≤1023 은 3열 유지, 폭 충분)
     08 news-hub         — 블로그 5장(나열형→≤767 h-carousel), 진행현황 표(고정폭 그리드→가로 스크롤
                           안전망), 하단 2열(진행현황+공지/뉴스)→≤1023 세로 스택
     footer              — 그리드는 P1-b 완료. 이번은 내부 패딩·정책링크 터치 타깃·카피라이트 바 스택
   ========================================================= */

/* ── 01 배너슬라이더 — 화살표/인디케이터 축소 + 3변형(01a/01b/01c) 반응형 ── */
@media (max-width: 1023px) {
  .ccb-banner-slider__arrow {
    width: 36px !important;
    height: 36px !important;
    font-size: 20px !important;
    left: 10px !important;
  }
  .ccb-banner-slider__arrow--next {
    left: auto !important;
    right: 10px !important;
  }
  .ccb-banner-slider__indicator {
    padding: 6px 10px !important;
    bottom: 10px !important;
  }

  /* 01a: split — 좌우 → 상하 스택(텍스트 위, 아트 아래). height 는 content_data.settings.height
     (PHP 인라인 px) 를 auto !important 로 해제해 텍스트 실제 분량에 맞게 늘어나도록 함. */
  .ccb-bn-split {
    height: auto !important;
    flex-direction: column;
  }
  .ccb-bn-split__text {
    padding: 28px 24px !important;
  }
  .ccb-bn-split__title {
    font-size: 20px !important;
  }
  .ccb-bn-split__hand {
    font-size: 18px !important;
  }
  .ccb-bn-split__body {
    font-size: 14px !important;
    margin-bottom: 18px !important;
  }
  .ccb-bn-split__foot {
    flex-wrap: wrap;
    gap: 10px !important;
  }
  .ccb-bn-split__art {
    flex: 0 0 180px !important;
    min-height: 180px;
  }
  .ccb-bn-split__info {
    right: 14px !important;
    bottom: 14px !important;
    padding: 8px 12px !important;
  }

  /* 01b: center — 좌측 절대배치 텍스트 폭 전체 활용 + 높이/폰트 축소 */
  .ccb-bn-center {
    height: 360px !important;
  }
  .ccb-bn-center__text {
    left: 24px !important;
    right: 24px !important;
    max-width: none !important;
  }
  .ccb-bn-center__hand {
    font-size: 22px !important;
    margin-bottom: 4px !important;
  }
  .ccb-bn-center__title {
    font-size: 30px !important;
    margin-bottom: 12px !important;
  }
  .ccb-bn-center__body {
    font-size: 14px !important;
    margin-bottom: 18px !important;
  }

  /* 01c: carousel — 좌 메인 + 우 썸네일 리스트(4개, 소량) → 상하 스택.
     썸네일 리스트 자체는 이미 세로 목록(각 행 flex row)이라 별도 h-carousel 전환 없이
     폭만 100%로 넓혀 재사용 — 문구/링크/구조 무변경. */
  .ccb-bn-carousel {
    height: auto !important;
    flex-direction: column;
  }
  .ccb-bn-carousel__main {
    min-height: 260px;
  }
  .ccb-bn-carousel__text {
    left: 24px !important;
    right: 24px !important;
    max-width: none !important;
  }
  .ccb-bn-carousel__title {
    font-size: 26px !important;
    margin-bottom: 10px !important;
  }
  .ccb-bn-carousel__body {
    font-size: 13px !important;
    margin-bottom: 16px !important;
  }
  .ccb-bn-carousel__side {
    width: 100% !important;
    border-left: none !important;
    border-top: 1px solid var(--c-line-soft);
    padding: 14px !important;
  }
}

@media (max-width: 767px) {
  .ccb-bn-split__art {
    flex-basis: 140px !important;
    min-height: 140px;
  }
  .ccb-bn-center {
    height: 300px !important;
  }
  .ccb-bn-center__title {
    font-size: 24px !important;
  }
  .ccb-bn-carousel__main {
    min-height: 220px;
  }
}

/* ── 02 long-promo — 브랜드블록/설명/가격 3분할, 소량(3블록) → ≤767 세로 스택 ── */
@media (max-width: 1023px) {
  .ccb-lp-side {
    width: 160px !important;
    padding: 18px 16px !important;
  }
  .ccb-lp-mid {
    padding: 18px 20px !important;
  }
  .ccb-lp-price {
    width: 190px !important;
    padding: 18px 18px !important;
  }
}
@media (max-width: 767px) {
  .ccb-lp-card {
    flex-direction: column;
  }
  .ccb-lp-side {
    width: 100% !important;
  }
  .ccb-lp-price {
    width: 100% !important;
    border-left: none !important;
    border-top: 1px dashed var(--c-line-soft);
    align-items: flex-start !important;
  }
}

/* ── 03 quick-menu — 카드 그리드는 P1-b 에서 2열 완료. 카드 내부 패딩/아이콘만 미세 축소
   (기존 .ccb-quick-menu-grid/.sb-card 클래스 재사용 — 신규 blade 클래스 불필요, 자식 순서
   고정(icon div → 텍스트 div → 화살표 span) 이라 :first-child 로 아이콘만 안전하게 타겟) ── */
@media (max-width: 767px) {
  /* [[2026-07-15 P4-2]] 시안 §① 값 정렬 — gap 10px, 카드 radius 14px·padding 16px,
     아이콘 36px, 라벨 14px/800. 자식 순서/href/문구는 완전 무변경(값만 조정). */
  .ccb-quick-menu-grid {
    gap: 10px !important;
  }
  .ccb-quick-menu-grid a.sb-card {
    padding: 16px !important;
    gap: 10px !important;
    border-radius: 14px !important;
  }
  .ccb-quick-menu-grid a.sb-card > div:first-child {
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
    border-radius: 10px !important;
  }
  .ccb-quick-menu-grid a.sb-card > div:nth-child(2) > div:first-child {
    font-weight: 800 !important;
  }
}

/* ── 04 main-promo — 텍스트/아트 2열, 소량(카드 1개) → ≤1023 세로 스택 ── */
@media (max-width: 1023px) {
  .ccb-mp-card {
    grid-template-columns: 1fr !important;
  }
  .ccb-mp-text {
    padding: 24px 24px !important;
  }
  .ccb-mp-headline {
    font-size: 22px !important;
  }
  .ccb-mp-art {
    min-height: 200px;
  }
}
@media (max-width: 767px) {
  .ccb-mp-text {
    padding: 20px 20px !important;
  }
  .ccb-mp-headline {
    font-size: 20px !important;
  }
  .ccb-mp-body {
    font-size: 13px !important;
  }
  .ccb-mp-art {
    min-height: 170px;
  }
  .ccb-mp-stat {
    padding: 6px 10px !important;
  }
  .ccb-mp-stat__value {
    font-size: 18px !important;
  }
  .ccb-mp-stat--top {
    left: 12px !important;
    top: 12px !important;
  }
  .ccb-mp-stat--bottom {
    left: 12px !important;
    bottom: 12px !important;
  }
}

/* ── 05 plan-trademark — 8개국 카드, 나열형 → ≤767 h-carousel 전환(desktop/tablet 은
   기존 4열 그리드 유지, ccb-hide-m/ccb-only-m 로 상호 배타 전환). 카드 마크업은
   partials/plan-country-card.blade.php 공용 재사용(중복 없음). ── */
@media (max-width: 1023px) {
  .ccb-plan-grid {
    gap: 10px !important;
  }
}
@media (max-width: 767px) {
  /* ⚠ .ccb-plan-grid 는 blade 인라인 style="display:grid" 를 갖고 있어(P1-a 확립 룰
     [[feedback_component_class_alias_init_ownership]] — 클래스 재사용/전환 전 반드시 충돌
     여부 확인) tokens.css 의 범용 유틸 .ccb-hide-m(!important 미사용, 의도된 설계)만으로는
     숨겨지지 않는다 — 실측 확인(playwright, ≤767 에서도 getComputedStyle=grid 로 남아
     캐러셀과 동시 렌더되던 사고). 이 컴포넌트 한정으로 !important override(다른 셀렉터의
     .ccb-hide-m 자체는 여전히 !important 없음, 汎用 유틸 원칙 유지). */
  .ccb-plan-grid.ccb-hide-m {
    display: none !important;
  }
}
.ccb-plan-hcar__item {
  width: 220px;
  flex: 0 0 220px;
}

/* ── 06 two-promo — 2개 카드, 소량 → ≤767 세로 스택(≤1023 은 2열 유지, 폭 충분) ── */
@media (max-width: 767px) {
  .ccb-tp-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 07 three-promo — [[2026-07-15 P4-2]] 카드 3개(2개 이상) → 시안 §① 캐러셀 리듬으로
   전환(≤1023 3열 그리드는 폭 충분해 무변경, ≤767 만 h-carousel). 카드 마크업은
   partials/three-promo-card.blade.php 공용 재사용(중복 없음). ── */
@media (max-width: 1023px) {
  .ccb-thp-grid {
    gap: 10px !important;
  }
}
@media (max-width: 767px) {
  /* .ccb-thp-grid 도 인라인 display:grid 충돌 — .ccb-plan-grid/.ccb-nh-blog-grid 와 동일 수리 */
  .ccb-thp-grid.ccb-hide-m {
    display: none !important;
  }
}
.ccb-thp-hcar__item {
  width: 230px;
  flex: 0 0 230px;
}
.ccb-thp-hcar__item .wf-card {
  border-radius: 16px !important;
}

/* ── 08 news-hub — 블로그 5장(나열형, 태블릿은 3열 그리드 유지), 진행현황 표(고정폭
   그리드 → 컬럼/문구 무변경 + 가로 스크롤 안전망), 하단 2열(진행현황 2fr + 공지·IP뉴스
   1fr) → ≤1023 세로 스택(진행현황 먼저, DOM 순서 유지).
   [[2026-07-15 P4-2]] 블로그 ≤767 은 h-carousel 대신 리스트형(시안 §① 값 — 썸네일
   84×64 radius12·제목 14px/700 2줄 클램프·메타 11px, 앞 3건+기존 "전체보기" 버튼 재사용)
   으로 대체 — 아래 .ccb-nh-blog-list-* 참고. .ccb-nh-blog-grid(데스크톱·태블릿)는 무변경. ── */
@media (max-width: 1023px) {
  .ccb-nh-blog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    row-gap: 14px;
  }
  .ccb-nh-bottom-grid {
    grid-template-columns: 1fr !important;
  }
  /* 진행현황 표 — 34/22/78/1fr/110/78 고정폭 6열은 문구/열 폭 그대로 두고, 표 자체를
     가로 스크롤시켜 BRAND/MEMBER 열이 짓눌려 잘리는 것을 방지(데이터 손실 0). */
  .ccb-nh-progress-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ccb-nh-progress-row {
    min-width: 560px;
  }
}
@media (max-width: 767px) {
  /* .ccb-nh-blog-grid 도 위 .ccb-plan-grid 와 동일한 인라인 display:grid 충돌 — 동일 수리 */
  .ccb-nh-blog-grid.ccb-hide-m {
    display: none !important;
  }
}
/* 블로그 리스트형(모바일 전용) — .ccb-only-m 과 함께 쓰이므로 복합 선택자로 display 재정의
   ([[2026-07-15 P1-a]] 재사용 패턴 — flex 컨텍스트 필요 시 호출측에서 더 구체적인 규칙).
   ★ [[2026-07-15 P4-2]] display 토글 자체는 반드시 max-width:767px 안에 있어야 함 —
   최초 작성 시 미디어쿼리 밖에 둬 ≥768 에서도 항상 flex 로 보이는 회귀를 playwright 로
   즉시 발견·수리(과거 [[feedback_component_class_alias_init_ownership]] 룰의 재확인 사례). */
@media (max-width: 767px) {
  .ccb-only-m.ccb-nh-blog-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
}
.ccb-nh-blog-list__row {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.ccb-nh-blog-list__thumb {
  width: 84px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  flex: 0 0 auto;
}
.ccb-nh-blog-list__body {
  min-width: 0;
  flex: 1;
}
.ccb-nh-blog-list__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ccb-nh-blog-list__meta {
  font-size: 11px;
  color: var(--c-mute);
  margin-top: 4px;
}

/* ── footer — 그리드(ccb-footer-grid)는 P1-b 완료. 이번은 내부 패딩 축소 +
   정책 링크 터치 타깃 확보(WCAG 최소 44px 근사) + 카피라이트 바 세로 스택.
   [[2026-07-15 P4-2]] 아래 규칙 대상 요소는 이제 ≤767 에서 .ccb-hide-m 로 통째로
   숨겨지므로(footer/index.blade.php 참고) 이 블록은 768~1023 구간에만 실제 적용됨
   — 제거는 회귀 리스크 대비 보류(무해, 기존 dead-code 보류 원칙과 동일). ── */
@media (max-width: 767px) {
  .ccb-footer-inner {
    padding: 24px 16px !important;
  }
  .ccb-policy-bar__link {
    padding: 10px 12px !important;
  }
  .ccb-copyright-bar {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 6px;
  }
  .ccb-copyright-bar__version {
    margin-left: 0 !important;
  }
}

/* =========================================================
   P4-2 — 모바일 홈 풀페이지 시각 리듬 (2026-07-15, 최종 폴리싱 라운드)
   시안 = docs/design/mobile-polish-brief-2026-07/시안_mobile-visual-specs.html §①.
   ≤767 전용. 기존 P1-a/b/c·P4-1 위에 얹는 마지막 레이어 — 768px 이상은 이 파일의
   어떤 규칙도 매칭되지 않음(전부 max-width:767px 스코프, 이중 확인용 grep 대상).
   ========================================================= */

/* ── 섹션 헤더 h3화(18px/800) — "더보기" 링크가 이미 있는 곳만 그대로 두고(신규 링크
   추가 안 함, [[feedback_no_spec_invention]]), 헤더 타이포만 조정. 모든 콘텐츠 섹션이
   공용 .ccb-section 클래스를 공유해 셀렉터 하나로 8개 섹션 전부 커버. ── */
@media (max-width: 767px) {
  .ccb-section h2 {
    font-size: 18px !important;
    font-weight: 800 !important;
  }
}

/* ── 섹션 리듬 — 24px 마진 대신 8px 밴드 간격(시안 값). 각 섹션 고유 배경(peach/cream/
   mint/lavender/sky)은 이미 확립된 시스템이라 그대로 유지 — 전면(full-bleed) band/divider
   재구조화 대신 동일 8px 값을 여백으로 적용(최소 수정 원칙, 보고 §의도적 이탈 참고).
   index.blade.php 의 .ccb-mobile-band 래퍼(신규, 콘텐츠 무관 순수 CSS 훅)를 소비. ── */
@media (max-width: 767px) {
  .ccb-mobile-band {
    margin-bottom: 8px;
  }
  .ccb-mobile-band > section {
    margin-bottom: 0 !important;
  }
}

/* ── 01 배너슬라이더 — 이미지형 전환(우선순위 1). 3변형(01a/01b/01c) 공통 높이
   220px·radius 18px, 아트 전체배경(absolute fill) + 텍스트 하단좌측 오버레이(배지/타이틀만).
   본문·CTA·부가 콘텐츠(태그·인포카드·썸네일 리스트 등)는 실데이터를 삭제하지 않고 이
   폭에서만 표시 전환(display:none) — [[feedback_no_spec_invention]] 준수, 데스크톱/태블릿은
   무변경 노출. 회전 JS(ccbBannerRender 등, 01-banner-slider.blade.php)는 완전 무변경 —
   3변형 모두 높이를 220px로 통일해 회전 중 컨테이너 높이 요동 없음. ── */
@media (max-width: 767px) {

  /* 01a: split — 원본은 좌우 분할(오버레이 없음)이라, 형제 변형(01b/01c)의 기존 오버레이
     기법(백스크림 그라디언트)을 재사용해 새 오버레이 패턴 도입. */
  .ccb-bn-split {
    height: 220px !important;
    border-radius: 18px !important;
  }
  .ccb-bn-split__art {
    position: absolute !important;
    inset: 0 !important;
    flex: none !important;
    min-height: 0 !important;
    height: 100% !important;
    z-index: 1;
  }
  .ccb-bn-split__text {
    position: absolute !important;
    inset: auto 0 0 0 !important;
    z-index: 2;
    padding: 14px 16px 44px !important;
    background: linear-gradient(0deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.7) 60%, rgba(255,255,255,0) 100%) !important;
    justify-content: flex-end !important;
  }
  .ccb-bn-split__topmeta {
    margin-bottom: 8px !important;
  }
  .ccb-bn-split__yearbadge,
  .ccb-bn-split__hand,
  .ccb-bn-split__body,
  .ccb-bn-split__tags,
  .ccb-bn-split__foot,
  .ccb-bn-split__info {
    display: none !important;
  }
  .ccb-bn-split__title {
    font-size: 20px !important;
    font-weight: 800 !important;
    margin-bottom: 0 !important;
    text-shadow: 0 1px 6px rgba(255, 255, 255, .7);
  }

  /* 01b: center — 원본 자체가 이미 "아트 위 텍스트 오버레이"(가로 그라디언트 스크림)라
     구조 변경 없이 하단좌측 재배치 + 폰트/높이 축소 + 부가 콘텐츠(본문·CTA) 숨김만. */
  .ccb-bn-center {
    height: 220px !important;
  }
  .ccb-bn-center__text {
    top: auto !important;
    bottom: 0 !important;
    left: 16px !important;
    right: 16px !important;
    max-width: none !important;
    padding-bottom: 44px;
    justify-content: flex-end !important;
  }
  .ccb-bn-center__hand {
    font-size: 16px !important;
    margin-bottom: 4px !important;
  }
  .ccb-bn-center__title {
    font-size: 20px !important;
    font-weight: 800 !important;
    margin-bottom: 0 !important;
    text-shadow: 0 1px 6px rgba(255, 255, 255, .7);
  }
  .ccb-bn-center__body,
  .ccb-bn-center__text > button.wf-btn {
    display: none !important;
  }

  /* 01c: carousel — main(아트+텍스트)을 전체 오버레이로 채우고, side 썸네일 리스트(4건,
     실데이터 유지)는 이 압축 높이에서만 숨김 — 데스크톱/태블릿은 계속 스택 노출. */
  .ccb-bn-carousel {
    height: 220px !important;
  }
  .ccb-bn-carousel__main {
    position: absolute !important;
    inset: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
  }
  .ccb-bn-carousel__text {
    top: auto !important;
    bottom: 0 !important;
    left: 16px !important;
    right: 16px !important;
    max-width: none !important;
    padding-bottom: 44px;
    justify-content: flex-end !important;
  }
  .ccb-bn-carousel__text > .wf-chip {
    margin-bottom: 8px !important;
  }
  .ccb-bn-carousel__title {
    font-size: 20px !important;
    font-weight: 800 !important;
    margin-bottom: 0 !important;
    text-shadow: 0 1px 6px rgba(255, 255, 255, .7);
  }
  .ccb-bn-carousel__body,
  .ccb-bn-carousel__text > button.wf-btn,
  .ccb-bn-carousel__side {
    display: none !important;
  }

  /* 인디케이터(도트) — 오버레이 텍스트 패널(하단 padding 44px)과 겹치지 않도록 컴팩트화 */
  .ccb-banner-slider__indicator {
    bottom: 8px !important;
    padding: 5px 9px !important;
  }
}

/* ── 04 main-promo — 이미지형 풀와이드(우선순위 1 연장). 2열(P1-c 스택) 대신 아트
   전체배경 + 텍스트 상단좌측 오버레이(헤드라인만). 무료/유료 CTA·인포스탯(30억 DB·20년+)은
   실데이터 보존한 채 이 폭에서만 숨김(140px 압축 히어로라 전부 담을 수 없음 — 삭제 아닌
   표시 전환, [[feedback_no_spec_invention]]). ── */
@media (max-width: 767px) {
  .ccb-mp-card {
    display: block !important;
    height: 140px !important;
    min-height: 140px !important;
    border-radius: 18px !important;
    position: relative;
    overflow: hidden;
  }
  .ccb-mp-art {
    position: absolute !important;
    inset: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  .ccb-mp-text {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2;
    padding: 16px !important;
    justify-content: flex-start !important;
    background: linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,0) 100%) !important;
  }
  .ccb-mp-headline {
    font-size: 18px !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 6px rgba(255, 255, 255, .7);
  }
  .ccb-mp-chiprow,
  .ccb-mp-body,
  .ccb-mp-ctagrid,
  .ccb-mp-stat {
    display: none !important;
  }
}

/* ── 푸터 모바일 다크 요약 — partials/footer/mobile-summary.blade.php 전용.
   데스크톱·태블릿 원본(#0F172A 아님, ccb-footer-box 그대로)은 .ccb-hide-m 로 분리돼
   무변경 — 이 블록은 ≤767 전용 신규 컴포넌트라 미디어쿼리 스코프 불필요(항상 정의해도
   .ccb-only-m 부모가 ≥768 에서 display:none 이라 실제로는 ≤767 에서만 보임). ── */
.ccb-footer-mobile {
  background: #0F172A;
  color: #94A3B8;
  padding: 22px 16px;
  font-size: 12px;
  line-height: 1.7;
}
.ccb-footer-mobile__brand {
  font-weight: 800;
  color: #FFFFFF;
  font-size: 15px;
  margin-bottom: 8px;
}
.ccb-footer-mobile__line {
  margin-top: 2px;
}
.ccb-footer-mobile__links {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-weight: 700;
  color: #CBD5E1;
}
.ccb-footer-mobile__link {
  color: #CBD5E1;
  text-decoration: none;
  padding: 6px 0;
}
.ccb-footer-mobile__dot {
  color: #64748B;
}

/* ══════════════════════════════════════════════════════════
   프론트 액션버튼 Raised 3D — 공통 일괄 적용
   대상: wf-btn / wf-btn-ghost / ccb-quick-banner__cta / ccb-ca-cta-btn
   (auth-btn 계열·signup-* 계열·reg-* 계열·terms-* 계열은 blade 인라인 <style> 정의라 별도 적용)
   ※ disabled 상태에서는 그림자/transform 없이 평평하게.
═══════════════════════════════════════════════════════════ */
.wf-btn,
.wf-btn-ghost,
.ccb-quick-banner__cta,
.ccb-ca-cta-btn {
  box-shadow: var(--btn-shadow-raised);
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease, color .12s ease;
}

.wf-btn:hover,
.wf-btn-ghost:hover,
.ccb-quick-banner__cta:hover,
.ccb-ca-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--btn-shadow-hover);
}

.wf-btn:active,
.wf-btn-ghost:active,
.ccb-quick-banner__cta:active,
.ccb-ca-cta-btn:active {
  transform: translateY(1px);
  box-shadow: var(--btn-shadow-pressed);
}

.wf-btn:disabled,        .wf-btn[disabled],        .wf-btn[aria-disabled="true"],
.wf-btn-ghost:disabled,  .wf-btn-ghost[disabled],  .wf-btn-ghost[aria-disabled="true"],
.ccb-quick-banner__cta.is-disabled,
.ccb-ca-cta-btn:disabled, .ccb-ca-cta-btn[disabled] {
  transform: none;
  box-shadow: none;
}