@charset "UTF-8";
/* ==========================================================================
   layout.css — 컨테이너 / 그리드·플렉스 프리미티브 / 섹션 간격 규칙
   전국무지개퀵화물(무지개퀵) · ver 1.0.0 / 2026-08-23
   ★ 모바일 퍼스트. 기본이 모바일이고 min-width 로만 확장한다.
   ★ 여기 있는 것은 "뼈대"다. 색·그림자·보더가 붙는 것은 components.css 소관.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 컨테이너
   좌우 여백(gutter)을 컨테이너가 책임진다. 섹션이나 카드가 각자 padding 을 주면
   중첩될 때마다 여백이 어긋나므로, 가로 여백의 출처를 이 클래스 하나로 고정한다.
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container-max) + var(--gutter-lg) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 768px)  { .container { padding-inline: var(--gutter-md); } }
@media (min-width: 1024px) { .container { padding-inline: var(--gutter-lg); } }

/* 장문 전용 — 인사말·약관·개인정보처리방침. 한글 한 줄 40~45자를 넘기지 않게 폭을 좁힌다.
   줄이 길면 다음 줄 첫 글자를 찾는 데 눈이 미끄러져 장문 이탈이 늘어난다. */
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter-lg) * 2); }
.container--wide   { max-width: calc(var(--container-wide) + var(--gutter-lg) * 2); }
.container--flush  { padding-inline: 0; }

/* 컨테이너 안에서 좌우 여백을 뚫고 화면 끝까지 나가는 요소 (모바일 표 가로스크롤 등) */
.bleed {
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
@media (min-width: 768px) { .bleed { margin-inline: 0; padding-inline: 0; } }

/* --------------------------------------------------------------------------
   2. 섹션 — 수직 리듬
   섹션 간격은 개별 지정하지 않는다. 아래 3단계만 쓴다.
   여백을 넉넉히 쓰는 것이 "전문 회사 느낌"의 가장 값싼 수단이다.
   -------------------------------------------------------------------------- */
.section {
  padding-block: var(--section-py);
}
@media (min-width: 768px)  { .section { padding-block: var(--section-py-lg); } }
@media (min-width: 1024px) { .section { padding-block: var(--section-py-xl); } }

.section--tight { padding-block: var(--space-8); }
@media (min-width: 1024px) { .section--tight { padding-block: var(--space-12); } }

.section--flush-top    { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* 배경 변주 — 흰색과 아주 옅은 톤을 교차시켜 섹션 경계를 만든다.
   경계선(border)을 긋는 것보다 화면이 조용해진다. */
.section--subtle { background-color: var(--color-bg-subtle); }
.section--brand-soft { background-color: var(--color-bg-brand-soft); }
.section--brand {
  background-color: var(--color-bg-brand);
  color: var(--color-text-on-brand);
}
.section--brand :is(h1,h2,h3,h4) { color: var(--color-text-on-brand); }
.section--brand .t-muted { color: var(--color-text-on-brand-mut); }

/* 섹션 내부 블록 간 기본 간격 */
.section__body > * + * { margin-top: var(--space-8); }
@media (min-width: 1024px) { .section__body > * + * { margin-top: var(--space-12); } }

/* 최후 방어선 — 부모가 리듬을 주지 않는 자리(래퍼 없는 <div>, 그리드 칸 내부 등)에 놓인
   덩어리 컴포넌트가 앞 형제에 0px 로 붙는 것을 막는다. 특정도 0 이라 바로 아래 컨테이너 규칙,
   .section__body, .stack--* 가 모두 이 값을 덮어쓴다. 값이 겹쳐도 커지는 쪽이 이긴다. */
:where(* + .notice, * + .table-scroll, * + .accordion, * + .table-note) { margin-top: var(--space-6); }

/* ★ 섹션 컨테이너의 기본 세로 리듬 (D-041 여백 점검에서 추가)
   왜 필요한가: 지금까지 세로 리듬의 출처가 .section__body / .stack 같은 "옵트인 래퍼"뿐이었다.
   래퍼 없이 .container 바로 아래에 블록을 쌓은 마크업(실제로 대부분이 그렇다)에서는
   표·notice·grid 가 앞 블록에 0px 로 붙어 렌더된다 — "취급 톤급 위에 공백이 없다"의 원인.
   컨테이너가 기본값을 갖게 하면 래퍼를 잊어도 리듬이 무너지지 않는다.
   :where() 로 특정도를 0 으로 죽였으므로 .section__body / .stack--* / 페이지 규칙이 언제나 이긴다.
   인접 형제 마진은 상쇄되므로 .section-head 의 margin-bottom 과 겹쳐도 값이 두 배가 되지 않는다. */
:where(.section > .container) > * + * { margin-top: var(--space-8); }
@media (min-width: 1024px) { :where(.section > .container) > * + * { margin-top: var(--space-12); } }

/* --------------------------------------------------------------------------
   3. 스택 (수직) — 한 방향 여백만 준다(margin 상쇄·이중 여백 방지)
   -------------------------------------------------------------------------- */
.stack        > * + * { margin-top: var(--space-4); }
.stack--xs    > * + * { margin-top: var(--space-1); }
.stack--sm    > * + * { margin-top: var(--space-2); }
.stack--md    > * + * { margin-top: var(--space-6); }
.stack--lg    > * + * { margin-top: var(--space-8); }
.stack--xl    > * + * { margin-top: var(--space-12); }

/* --------------------------------------------------------------------------
   4. 클러스터 (수평 나열 + 자동 줄바꿈)
   버튼 그룹, 배지 나열, 태그 목록. gap 을 쓰므로 마지막 요소 여백 제거가 필요 없다.
   -------------------------------------------------------------------------- */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.cluster--sm     { gap: var(--space-2); }
.cluster--lg     { gap: var(--space-6); }
.cluster--center { justify-content: center; }
.cluster--between{ justify-content: space-between; }
.cluster--end    { justify-content: flex-end; }
.cluster--top    { align-items: flex-start; }

/* --------------------------------------------------------------------------
   5. 그리드
   모바일 1열이 기본. md(768)에서 2열, lg(1024)에서 지정 열수로 간다.
   운송업 방문자의 다수가 모바일이므로 1열 세로 스크롤이 기준 형태다.
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
.grid--gap-lg { gap: var(--space-6); }
.grid--gap-xl { gap: var(--space-8); }

@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid { gap: var(--space-6); }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* 5대 약속(5칸)은 3+2로 깨지면 어색하다. 5열로 편다. */
  .grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* 신뢰 스트립 전용 — 모바일에서 2×2(또는 2×3) 를 유지한다. 1열로 세우면
   스크롤 초반에 신뢰 요소가 전부 보이지 않아 "전문 회사 느낌" 판정에 실패한다. */
.grid--strip {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
@media (min-width: 768px)  { .grid--strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid--strip { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); } }

/* 본문 + 사이드(요약·CTA) 2단. 모바일에선 사이드가 아래로 내려간다. */
.grid--split {
  gap: var(--space-8);
}
@media (min-width: 1024px) {
  .grid--split { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-12); align-items: start; }
  .grid--split-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 미디어를 오른쪽에 두는 변형 — 좌우 분할 강조 밴드(바이크 하이라이트)용 */
  .grid--split-reverse > :first-child { order: 2; }
}

/* 그리드 아이템 span */
.col-span-2 { grid-column: span 2; }
@media (min-width: 1024px) { .col-span-lg-2 { grid-column: span 2; } }

/* --------------------------------------------------------------------------
   6. 플렉스 프리미티브
   -------------------------------------------------------------------------- */
.flex        { display: flex; }
.flex--col   { flex-direction: column; }
.flex--wrap  { flex-wrap: wrap; }
.flex--center{ align-items: center; justify-content: center; }
.flex--between { align-items: center; justify-content: space-between; }
.flex--baseline{ align-items: baseline; }
.flex-1      { flex: 1 1 auto; min-width: 0; } /* min-width:0 이 없으면 긴 주소 문자열이 그리드를 밀어낸다 */
.flex-none   { flex: 0 0 auto; }

/* 아래로 밀어내기 — 카드 높이를 맞추면서 "자세히 보기" 링크를 바닥에 정렬 */
.push-bottom { margin-top: auto; }

/* --------------------------------------------------------------------------
   7. 정렬·가시성 유틸 (최소한만)
   -------------------------------------------------------------------------- */
.center-x    { margin-inline: auto; }
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.w-full      { width: 100%; }
.relative    { position: relative; }

/* 반응형에서 정렬이 바뀌는 경우만 */
@media (min-width: 768px) { .md\:text-left { text-align: left; } }

/* --------------------------------------------------------------------------
   8. 비율 박스 — 이미지 자리를 미리 잡아 CLS(레이아웃 이동)를 막는다.
   실사 사진이 아직 없어 자리표시자를 넣는 단계에서도 높이가 유지된다.
   -------------------------------------------------------------------------- */
.ratio { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--neutral-100); }
.ratio > img, .ratio > video, .ratio > iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.ratio--16x9 { aspect-ratio: 16 / 9; }
.ratio--4x3  { aspect-ratio: 4 / 3; }
.ratio--3x2  { aspect-ratio: 3 / 2; }
.ratio--1x1  { aspect-ratio: 1 / 1; }