/* =========================================================
   파일명: /assets/css/common-system.css
   역할: 전역 CSS 토큰·변수 단일 출처
   기준: 2026-06-08 리팩토링 신규 생성

   이 파일은 head.php에서 reset.css → base.css 사이에 로드합니다.

   관리 원칙:
   1) CSS Custom Property(변수)는 이 파일에서만 선언합니다.
   2) base.css / hero.css / site-navigation.css의 :root 선언은
      이 파일로 통합합니다. (각 파일의 :root 블록은 점진적으로 제거)
   3) 디자인 토큰 추가 시 이 파일을 먼저 수정합니다.
========================================================= */

:root {
  /* ── 브랜드 색상 ── */
  --nb-brand-navy:     #1f3556;
  --nb-brand-blue:     #126ee2;
  --nb-accent:         #0f4fcf;
  --nb-ui-blue:        #126ee2;
  --nb-ui-light:       #eef5ff;
  --nb-ui-border:      #d7e6f6;
  --nb-ui-text:        #1f3556;

  /* ── 레이아웃 폭 ── */
  --nb-content-width:  min(calc(100vw - 96px), 1440px);
  --nb-container-max:  1440px;
  --nb-sidebar-width:  260px;

  /* ── Hero ── */
  --nb-hero-h:         330px;

  /* ── 공통 Border Radius ── */
  --nb-radius-card:    12px;
  --nb-radius-btn:     8px;
  --nb-radius-pill:    999px;

  /* ── Shadow ── */
  --nb-shadow-card:    0 2px 12px rgba(31,53,86,.08);
  --nb-shadow-nav:     0 2px 12px rgba(0,0,0,.08);

  /* ── Z-index 계층 ── */
  --z-base:            1;
  --z-sidebar:         100;
  --z-subnav:          200;
  --z-header:          500;
  --z-dropdown:        600;
  --z-modal:           900;
  --z-toast:           1000;

  /* ── Transition ── */
  --nb-trans-fast:     0.15s ease;
  --nb-trans-base:     0.2s ease;
/* ── hero.css 출처 변수 (이전 진행 중) ── */
  --nb-content-width:         min(calc(100vw - 96px), 1440px);
  --nb-hero-h:                330px;
  --nb-v3-content-w:          min(1180px, calc(100% - 40px));
  --nb-page-banner-h-pc:      450px;
  --nb-page-banner-h-tablet:  320px;
  --nb-page-banner-h-mobile:  240px;

/* ── base.css 출처 변수 (이전 진행 중) ── */
  --nb-page-width:            min(92vw, 1440px);
  --nb-wrap:                  var(--nb-page-width);
  --nb-wrap-narrow:           min(92vw, 1180px);
  --nb-header-height:         78px;
  --nb-subnav-height:         58px;
  --nb-section-gap:           clamp(30px, 3.2vw, 56px);
  --nb-section-gap-tight:     clamp(18px, 2vw, 30px);
  --nb-block-gap:             clamp(16px, 1.8vw, 26px);
  --nb-content-pad:           clamp(24px, 3vw, 48px);
  --nb-card-pad:              clamp(20px, 2.2vw, 32px);
  --nb-ink:                   #0f172a;
  --nb-muted:                 #64748b;
  --nb-blue:                  #0f66bb;
  --nb-blue-dark:             #0b355d;
  --nb-soft-bg:               #f5f8fc;
  --nb-panel-bg:              #ffffff;
  --nb-card-border:           #dbe7f3;
  --nb-shadow-soft:           0 18px 45px rgba(15, 23, 42, .08);

  /* ── site-navigation.css 출처 변수 ── */
  --nb-ui-navy:              #102a4c;
  --nb-ui-line:              #dbe7f5;
  --nb-ui-soft:              #f6faff;
  --nb-subnav-content-w:     min(1180px, calc(100% - 40px));
  --nb-subnav-bg:            #fff;
  --nb-subnav-line:          #d7e4f3;
  --nb-subnav-active:        #126ee2;
  --nb-subnav-text:          #10243d;
  --nb-subnav-hover:         #f3f8ff;

  /* ── header.css 출처 변수 ── */
  --nb-header-main-h:        86px;
  --nb-header-total-h:       var(--nb-header-main-h);
  --nb-header-h:             86px;
  --nb-header-x:             clamp(32px, 3.2vw, 72px);
  --nb-header-blue:          #006bdc;
  --nb-header-navy:          #10243d;
  --nb-header-line:          #d8e5f3;
  --nb-header-menu-search-gap: 120px;
  --nb-header-nav-gap:       clamp(46px, 3.4vw, 82px);
  --nb-header-search-w:      400px;

  /* ── hero.css 배너 위치 출처 변수 ── */
  --nb-wrap-wide:            var(--nb-page-width);
  --nb-banner-pos-main:      center center;
  --nb-banner-pos-about:     center 76%;
  --nb-banner-pos-product:   center 58%;
  --nb-banner-pos-cases:     center 58%;
  --nb-banner-pos-contact:   center 54%;
  --nb-banner-mobile-pos-main:    center center;
  --nb-banner-mobile-pos-about:   center 58%;
  --nb-banner-mobile-pos-product: center center;
  --nb-banner-mobile-pos-cases:   center center;
  --nb-banner-mobile-pos-contact: center center;
}

/* =========================================================
   이미지 비율 공통 기준 (유의사항 기준)
   - 제품 카드: 4:3
   - 사례 카드: 4:3
   - 상세 썸네일: 4:3
   - 브랜드 배너: 16:9
   - Hero 배너: 1920×720 (aspect-ratio: 8/3)
   출처: _수정작업시_유의사항v2_0.txt
========================================================= */

/* 제품·사례 카드 썸네일 */
.product-thumb,
.case-thumb,
.detail-thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f4f8fc;
}

.product-thumb img,
.case-thumb img,
.detail-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 브랜드 배너 */
.brand-banner,
.brand-banner-wrap {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.brand-banner img,
.brand-banner-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hero 배너 (1920×720 = 8:3) */
.page-hero.page-hero--banner {
  aspect-ratio: 8 / 3;
  min-height: var(--nb-hero-h, 330px);
}