/* =========================================================
   Design Tokens — 의미 기반 (Semantic Tokens)
   라이트(기본) + 따뜻한 다크모드
   ========================================================= */

:root {
  /* ── Surface (배경/카드) ────────────────────────────── */
  --c-bg:           #F1F3F5;   /* 페이지 배경 */
  --c-paper:        #FFFFFF;   /* 카드/패널 */
  --c-paper-2:      #F8FAFC;   /* 살짝 어두운 패널 (테이블 헤더, 호버) */

  /* ── Text (잉크) ──────────────────────────────────── */
  --c-ink:          #0F172A;   /* 본문 */
  --c-ink-soft:     #334155;   /* 서브 본문 */
  --c-mute:         #64748B;   /* 라벨/메타 */

  /* ── Line (구분선/보더) ──────────────────────────── */
  --c-line:         #CBD5E1;
  --c-line-soft:    #E2E8F0;

  /* ── Brand (메인 액션 — 블루) ────────────────────── */
  --c-brand:        #2563EB;   /* primary 버튼/링크 */
  --c-brand-strong: #1E40AF;   /* hover/강조 텍스트 */
  --c-brand-soft:   #EFF6FF;   /* tinted 배경 */
  --c-brand-tint:   #DBEAFE;   /* 더 진한 tint */
  --c-brand-line:   #BFDBFE;   /* tinted 보더 */
  --c-brand-on:     #FFFFFF;   /* brand 위 글자색 */

  /* ── Accent (포인트/뱃지/오렌지) ────────────────── */
  --c-accent:       #F97316;   /* 강조 포인트 */
  --c-accent-strong:#C2410C;   /* 강조 텍스트 */
  --c-accent-soft:  #FFF7ED;   /* 베이지 배경 */
  --c-accent-tint:  #FCD9B6;   /* 진한 tint/보더 */
  --c-accent-line:  #FCD9B6;
  --c-accent-on:    #FFFFFF;

  /* ── Status (시맨틱) ─────────────────────────────── */
  --c-ok:           #16A34A;
  --c-ok-soft:      #ECFDF5;
  --c-warn:         #F59E0B;
  --c-warn-soft:    #FFFBEB;
  --c-warn-line:    #FDE68A;
  --c-warn-strong:  #92400E;
  --c-danger:       #DC2626;
  --c-danger-soft:  #FEF2F2;
  --c-danger-line:  #FCA5A5;
  --c-danger-strong:#991B1B;

  /* ── Plum (검색 플랫폼 보라) ─────────────────────── */
  --c-plum:         #6D28D9;
  --c-plum-strong:  #4C1D95;
  --c-plum-soft:    #FAF5FF;
  --c-plum-tint:    #E9D5FF;
  --c-plum-line:    #DDD6FE;

  /* ── Teal (고시명칭 서치 플랫폼, 제3색 — 2026-07-13 신설) ── */
  --c-teal:         #0D9488;
  --c-teal-strong:  #115E59;
  --c-teal-soft:    #F0FDFA;
  --c-teal-tint:    #CCFBF1;
  --c-teal-line:    #99F6E4;

  /* ── Chart Palette (도넛/차트 카테고리 색) ───────── */
  --c-chart-1:      #0EA5E9;   /* sky    — 예금/주요 카테고리 */
  --c-chart-2:      #10B981;   /* emerald — 리워드/긍정 카테고리 */
  --c-chart-3:      #A7F3D0;   /* emerald-soft — 만료예정/보조 */
  --c-chart-4:      #F59E0B;   /* amber  — 추가 카테고리 */
  --c-chart-track:  #F1F5F9;   /* 도넛 배경 트랙 */

  /* ── Type (폰트) ─────────────────────────────────── */
  --f-sans: 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
  --f-hand: 'Caveat', 'Gaegu', cursive;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ── Layout ─────────────────────────────────────── */
  --ccb-max-width: 1280px;          /* 앱셸 최대 폭 — 이 이상 화면에서 중앙 패널로 */

  /* ── Shadow ──────────────────────────────────────── */
  --sh-sm: 0 1px 2px rgba(15,23,42,0.04);
  --sh-md: 0 4px 12px rgba(15,23,42,0.08);
  --sh-brand: 0 1px 2px rgba(37,99,235,0.20);

  /* ── Button Raised 3D ────────────────────────────── */
  --btn-shadow-raised:  0 2px 0 0 rgba(15,23,42,0.14), 0 3px 8px rgba(15,23,42,0.13);
  --btn-shadow-hover:   0 3px 0 0 rgba(15,23,42,0.16), 0 6px 16px rgba(15,23,42,0.18);
  --btn-shadow-pressed: 0 1px 0 0 rgba(15,23,42,0.14), 0 1px 3px rgba(15,23,42,0.12);

  /* ── base/design1 호환 — ccbrand 값으로 자기완결 (HQ base 누수 차단) ── */
  /* 전경(Foreground) */
  --c-fg:                    var(--c-ink);        /* base #2d3748 → ccbrand 잉크 */
  --c-fg-secondary:          var(--c-ink-soft);   /* base #4a5568 → ccbrand 서브잉크 */
  --c-fg-tertiary:           var(--c-mute);       /* base #718096 → ccbrand 뮤트 */
  /* 배경 */
  --c-bg-secondary:          var(--c-paper-2);    /* base #ffffff → ccbrand 살짝어두운패널 */
  /* 경계선 */
  --c-border:                var(--c-line);       /* base #e2e8f0 → ccbrand 구분선 */
  --c-border-focus:          var(--c-brand);      /* base var(--c-brand) → ccbrand 브랜드블루 */
  /* 브랜드 호환 별칭 */
  --c-brand-hover:           var(--c-brand-strong);      /* base #764ba2 → ccbrand 강조블루 */
  --c-brand-light:           var(--c-brand-soft);        /* base #f0f4ff → ccbrand tinted배경 */
  --c-brand-gradient-start:  var(--c-brand);             /* base #667eea → ccbrand 브랜드블루 */
  --c-brand-gradient-end:    var(--c-brand-strong);      /* base #764ba2 → ccbrand 강조블루 */
  /* 상태(Status) */
  --c-success:               var(--c-ok);         /* base #48bb78 → ccbrand ok 초록 */
  --c-success-light:         var(--c-ok-soft);    /* base #c6f6d5 → ccbrand ok-soft */
  --c-warning:               var(--c-warn);       /* base #f6ad55 → ccbrand warn 앰버 */
  --c-warning-light:         var(--c-warn-soft);  /* base #feebc8 → ccbrand warn-soft */
  --c-danger-light:          var(--c-danger-soft);/* base #fed7d7 → ccbrand danger-soft */
  /* info = ccbrand 미정의 → 브랜드 블루 계열 (HQ 보라 #4299e1 누수 차단) */
  --c-info:                  var(--c-brand);      /* ccbrand에 info 없음, 브랜드블루로 대체 */
  --c-info-light:            var(--c-brand-soft); /* ccbrand brand-tint 계열 밝은배경 */
}

/* =========================================================
   Dark Mode — 따뜻한 다크 (브라운/오렌지 톤 유지)
   ========================================================= */
[data-theme="dark"] {
  --c-bg:           #1A1612;   /* 따뜻한 다크 베이스 */
  --c-paper:        #25201A;   /* 카드 */
  --c-paper-2:      #2E2820;   /* 패널 */

  --c-ink:          #F5EFE5;
  --c-ink-soft:     #C9BFB0;
  --c-mute:         #8C8273;

  --c-line:         #4A3F32;
  --c-line-soft:    #383026;

  --c-brand:        #FBBF77;   /* 다크에서는 brand=따뜻한 앰버 */
  --c-brand-strong: #FCD9B6;
  --c-brand-soft:   #2E2418;
  --c-brand-tint:   #3D2F1F;
  --c-brand-line:   #5C4628;
  --c-brand-on:     #1A1612;

  --c-accent:       #F97316;
  --c-accent-strong:#FDBA74;
  --c-accent-soft:  #2A1E14;
  --c-accent-tint:  #422C1A;
  --c-accent-line:  #5C3C20;
  --c-accent-on:    #FFFFFF;

  --c-ok:           #34D399;
  --c-ok-soft:      #14271D;
  --c-warn:         #FBBF24;
  --c-warn-soft:    #2A1E0B;
  --c-warn-line:    #5C4628;
  --c-warn-strong:  #FCD9B6;
  --c-danger:       #F87171;
  --c-danger-soft:  #2A1414;
  --c-danger-line:  #5C2222;
  --c-danger-strong:#FCA5A5;

  --c-plum:         #C4B5FD;
  --c-plum-strong:  #DDD6FE;
  --c-plum-soft:    #1F1A2E;
  --c-plum-tint:    #2E2748;
  --c-plum-line:    #3D335E;

  --c-teal:         #5EEAD4;
  --c-teal-strong:  #99F6E4;
  --c-teal-soft:    #0F2926;
  --c-teal-tint:    #134E4A;
  --c-teal-line:    #115E59;

  /* 다크모드 차트 — 채도 낮추고 밝기 보정 */
  --c-chart-1:      #38BDF8;
  --c-chart-2:      #34D399;
  --c-chart-3:      #6EE7B7;
  --c-chart-4:      #FBBF24;
  --c-chart-track:  #2E2820;

  --sh-sm: 0 1px 2px rgba(0,0,0,0.40);
  --sh-md: 0 4px 12px rgba(0,0,0,0.50);
  --sh-brand: 0 1px 2px rgba(251,191,119,0.25);

  /* ── Button Raised 3D (다크 — 강도 강화) ─────────── */
  --btn-shadow-raised:  0 2px 0 0 rgba(0,0,0,0.32), 0 3px 8px rgba(0,0,0,0.30);
  --btn-shadow-hover:   0 3px 0 0 rgba(0,0,0,0.38), 0 6px 16px rgba(0,0,0,0.40);
  --btn-shadow-pressed: 0 1px 0 0 rgba(0,0,0,0.32), 0 1px 3px rgba(0,0,0,0.28);
}

/* =========================================================
   디바이스 브레이크포인트 SoT — 2026-07-15 (P1-a)
   docs/design/06_디바이스_반응형_시스템_기획_2026-07-14.md §2 확정값.
   신규 CSS 는 아래 4구간 값만 사용(px 임의 추가 금지). 관리 탭(디바이스 탭)은 3티어
   고정(desktop/tablet/mobile) 이지만, CSS 내부 세부 분기(1024/1440/1791/1792)는
   하위 세부값으로 허용(§2 각주) — 단 여기 등록된 값 기준.

     데스크톱(desktop)  : >= 1440px  — 완전 무변경(최우선 회귀 기준, P1-a 작업 대상 아님)
     노트북(laptop)     : 1024 ~ 1439px — 퀵배너 컴팩트 유지(§2-b, P1-0 완료·라이브)
     태블릿(tablet)     : 768 ~ 1023px — ★ 인라인 전환 구간(P1-a 대상)
     모바일(mobile)     : <= 767px — 이미지형 + 가로 스와이프(360px 최소 기준, P1-a 대상)
   ========================================================= */

/* ── 디바이스 표시 유틸 (dual markup 전환용) — 2026-07-15 P1-a ──
   .ccb-only-d : 데스크톱·노트북(>=1024px)에서만 표시 (기본 상태 = 그대로 노출, 별도 규칙 불필요)
   .ccb-only-t : 태블릿(768~1023px)에서만 표시
   .ccb-only-m : 모바일(<=767px)에서만 표시
   .ccb-hide-t : 태블릿에서만 숨김 (기본 표시 요소 축소 재배치용)
   .ccb-hide-m : 모바일에서만 숨김
   주의: display 값은 block 고정 — flex/inline 컨텍스트에서 재사용 시 호출측에서
   `.ccb-only-t.내컴포넌트클래스 { display:flex }` 처럼 더 구체적인 규칙으로 재정의할 것
   (여기서 !important 사용 금지 — [[feedback_important_in_utilities_overrides_specificity]]). */
.ccb-only-t,
.ccb-only-m {
  display: none;
}

@media (max-width: 1023px) and (min-width: 768px) {
  .ccb-only-d { display: none; }
  .ccb-only-t { display: block; }
  .ccb-hide-t { display: none; }
}

@media (max-width: 767px) {
  .ccb-only-d { display: none; }
  .ccb-only-t { display: none; }
  .ccb-only-m { display: block; }
  .ccb-hide-m { display: none; }
}

/* ── 관리자 디바이스 오버라이드 표시 유틸 — 2026-07-15 P2-c ──
   docs/design/06_디바이스_반응형_시스템_기획_2026-07-14.md §3-C/§6.
   admin 영역 편집 "노트북·태블릿" 탭(device=tablet) 오버라이드 = CSS 768~1439px 전체
   (태블릿 768~1023 + 노트북 1024~1439 두 CSS 티어 모두) → `.ccb-dv-hide-t`.
   admin "모바일" 탭(device=mobile) 오버라이드 = CSS <=767px → `.ccb-dv-hide-m`.
   위 `.ccb-only-*`/`.ccb-hide-*` 유틸과 달리 인라인 style="display:..." 를 가진 기존
   요소(섹션 카드 grid 등)에도 반드시 이겨야 하므로 !important 사용
   ([[feedback_important_in_utilities_overrides_specificity]] 예외 — P1-c 실전 버그
   교훈: !important 없는 유틸은 인라인 display:grid 를 못 이겨 캐러셀과 동시 렌더되는
   사고가 났음, 이번엔 처음부터 !important로 설계). FrontAreaService::deviceHideClasses()/
   itemDeviceHideClasses() 가 오버라이드가 있을 때만 이 클래스를 부여 — 오버라이드
   없으면(현재 운영 상태) 클래스 자체가 렌더되지 않아 기존 출력과 완전 동일.

   ⚠ [[2026-07-15 P4-1 후속 사고]] 이 파일(tokens.css)이 site.css 보다 먼저 로드되므로,
   루트 요소(예: .ccb-platform-switch)에 site.css 쪽에서 같은 명시도(단일 클래스)로
   display:...!important 를 재선언하면 소스 순서상 site.css 가 항상 이겨 이 오버라이드가
   무음 무시된다(platform_switch devices.mobile/tablet.visible=false 저장해도 프론트에
   계속 노출된 사고). 어떤 영역 루트 클래스든 site.css 안에서 display 를 !important 로
   강제하는 신규 규칙을 추가할 때는 반드시 `:not(.ccb-dv-hide-t)` / `:not(.ccb-dv-hide-m)`
   가드를 그 셀렉터에 동반할 것.
   ⚠ 2차 함정 — :not() 가드 자체가 명시도를 올린다: `.foo:not(.ccb-dv-hide-t)` 는 클래스
   2개(0,2,0)라서 이 파일의 단일 클래스 `.ccb-dv-hide-m`(0,1,0)보다 항상 더 높은 명시도를
   갖는다. 즉 site.css 규칙이 `@media (max-width:1023px)` 처럼 하한 없이 넓게 걸려 있어
   ≤767 에서도 매칭되는 경우, `:not(.ccb-dv-hide-t)` 만 달아 두면 ≤767 에서 이 규칙이
   `.ccb-dv-hide-m` 보다 명시도로 이겨버려 모바일 숨김이 재발한다(1차 수리 실측으로 발견,
   [[docs/sites/ccbrand-ai/DESIGN_RULES.md]] 참고). 해당 site.css 규칙이 매칭되는 뷰포트
   범위를 정확히 파악해 그 범위에서 유효한 `.ccb-dv-hide-*` 를 전부(둘 다일 수 있음) 가드에
   나열할 것 — 미디어쿼리 하한을 확인하지 않고 `:not(.ccb-dv-hide-t)` 하나만 붙이는 것은
   불충분하다. */
@media (min-width: 768px) and (max-width: 1439px) {
  .ccb-dv-hide-t { display: none !important; }
}
@media (max-width: 767px) {
  .ccb-dv-hide-m { display: none !important; }
}