/* ============================================================
   MARINER SHIPPING 디자인 토큰
   ------------------------------------------------------------
   색·타이포·간격·모서리·그림자의 단일 기준.
   개별 페이지 CSS 는 여기 정의된 var() 만 쓰고 값을 직접 박지 않는다.

   개선 전에는 색이 84종, 글자 크기가 37종, 간격이 53종으로
   흩어져 있었고 :root 블록이 CSS 파일마다 중복 정의돼 있었다.
   ============================================================ */

:root {
  /* --- 브랜드 --------------------------------------------- */
  /* 로고에서 추출한 두 색이 기준이다 */
  --color-primary: #13355b; /* 로고 네이비 */
  --color-primary-dark: #08163f;
  --color-primary-hover: #1b4a7a;
  --color-accent: #109eef; /* 로고 하늘색 */
  --color-accent-dark: #0b7fc0;
  --color-accent-soft: #e8f4fd;

  /* --- 중립 ----------------------------------------------- */
  --color-text: #1d2939;
  --color-text-muted: #667085;
  --color-text-subtle: #98a2b3;
  --color-border: #e4e7ec;
  --color-border-strong: #d0d5dd;
  --color-surface: #ffffff;
  --color-surface-alt: #f9fafb;
  --color-surface-sunken: #f2f4f7;

  /* --- 상태 ----------------------------------------------- */
  --color-danger: #b42318;
  --color-danger-soft: #fef3f2;
  --color-danger-border: #fda29b;
  --color-info: #14507f;
  --color-info-soft: #eef5fb;
  --color-info-border: #b6d3ea;

  /* --- 타이포 --------------------------------------------- */
  --font-family: "Pretendard", "Pretendard Variable", -apple-system,
    BlinkMacSystemFont, system-ui, "Malgun Gothic", sans-serif;

  /* 기존 코드가 참조하는 이름이라 유지한다 (clamp 로 반응형) */
  --font-xs: clamp(0.75rem, 1.8vw, 0.875rem);
  --font-sm: clamp(0.875rem, 2vw, 1rem);
  --font-md: clamp(1rem, 2.5vw, 1.25rem);
  --font-lg: clamp(1.25rem, 3vw, 1.75rem);
  --font-xl: clamp(1.5rem, 3.5vw, 2.1rem);
  --font-title: clamp(1.1rem, 3.8vw, 2.3rem);

  /* 새 위계 (고정 스케일) */
  --text-display: clamp(2rem, 4.5vw, 2.75rem); /* 히어로 */
  --text-h1: clamp(1.75rem, 3.5vw, 2.25rem);
  --text-h2: clamp(1.375rem, 2.6vw, 1.75rem);
  --text-h3: clamp(1.125rem, 2vw, 1.375rem);
  --text-body-lg: 1.0625rem; /* 17px */
  --text-body: 1rem; /* 16px */
  --text-body-sm: 0.9375rem; /* 15px */
  --text-caption: 0.8125rem; /* 13px */
  --text-label: 0.75rem; /* 12px, 섹션 라벨 */

  --leading-tight: 1.25;
  --leading-snug: 1.45;
  --leading-normal: 1.65;
  --leading-relaxed: 1.8;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-label: 0.12em; /* 대문자 섹션 라벨용 */

  /* --- 간격 (4px 기준) ------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* 섹션 상하 여백 (모바일에서 자동으로 좁아진다) */
  --section-gap: clamp(56px, 8vw, 96px);

  /* --- 레이아웃 ------------------------------------------- */
  /* header 가 position:fixed 라 그 높이만큼 본문을 밀어줘야 한다.
     이 값이 없던 탓에 배너 상단이 헤더 뒤로 잘려 들어가고,
     제품 페이지의 sticky 서브메뉴도 헤더에 가려져 있었다.
     2026-09-14 실측: 데스크톱·모바일 모두 69px (이전 값 59/49px 는 10~20px 부족).
     layout.html 스크립트가 로드 후 실제 높이를 다시 재서 덮어쓴다. */
  --header-h: 69px;

  --container: 1180px;
  --container-narrow: 900px;
  --gutter: clamp(20px, 4vw, 32px);

  /* 히어로 높이 — 페이지마다 205~471px 로 제각각이던 것을 두 단계로 통일.
     --hero-h     메인 · VISION-MX · VISION-SMS (화면 목업이 있는 소개 히어로)
     --hero-h-sub 사업분야 · 회사소개 · 연혁 · (구)ERP · 그룹웨어 · 홍보센터 (제목 띠) */
  --hero-h: 28rem; /* 448px */
  --hero-h-sub: 15rem; /* 240px */

  /* --- 버튼 ----------------------------------------------- */
  /* 페이지마다 따로 정의돼 높이가 2.5 / 2.75 / 2.8125 / 3rem 으로
     제각각이었고, 알약형과 둥근사각형이 섞여 있었다.
     크기·모양·글자를 한 곳에서 정한다. */
  --btn-height: 2.25rem; /* 36px — 기본 */
  --btn-height-sm: 1.875rem; /* 30px — 헤더/푸터 등 보조 */
  --btn-height-lg: 2.75rem; /* 44px — 폼 제출(로그인) */
  --btn-padding-x: var(--space-5);
  --btn-padding-x-sm: var(--space-3);
  --btn-radius: var(--radius-md);
  --btn-font-size: 0.875rem; /* 14px */
  --btn-font-weight: var(--weight-semibold);

  /* --- 모서리 --------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* --- 그림자 --------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);

  /* --- 모션 ----------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 0.2s;
}

@media (max-width: 768px) {
  :root {
    --header-h: 69px;
    --hero-h: 21rem;
    --hero-h-sub: 11rem;
    /* 손가락 터치 권장 최소 44px. 데스크톱 36px 로는 누르기 어렵다. */
    --btn-height: 2.75rem;
    --btn-height-sm: 2.5rem;
  }
}

/* 모션 최소화를 선호하는 사용자에게는 애니메이션을 끈다 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   공통 프리미티브
   ============================================================ */

/* 폭이 제각각이던 섹션 컨테이너를 하나로 */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 섹션 상단 라벨 (BUSINESS / COMPANY 등) */
.section-label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-accent);
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.section-heading {
  margin: 0 0 var(--space-3);
  color: var(--color-primary);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.section-sub {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
}

/* 키보드 포커스 링 — 기존에는 아예 표시가 없었다 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* 이미지가 비율을 잃고 늘어나지 않도록 */
img {
  max-width: 100%;
}