/* ==========================================================================
   Layout : PC 전용 (최소 1280px, 기준 1920px)
   - 1280 ~ 1440 : 타이포·여백 축소 (tokens.css)
   - 1441 ~ 1920 : 기준
   - 1921 ~      : 콘텐츠 폭 고정(1600), 좌우 여백만 증가
   ========================================================================== */

body { min-width: var(--page-min); }

/* ---------- Container ---------- */
.container, .container--wide, .container--text { margin-inline: auto; }
.container { width: min(100% - var(--page-gutter) * 2, var(--container)); }
.container--wide { width: min(100% - var(--page-gutter) * 2, var(--container-wide)); }
.container--text { width: min(100% - var(--page-gutter) * 2, var(--container-text)); }

/* ---------- 12 column grid ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--row-gap, var(--grid-gap));
}
.col-1 { grid-column: span 1; }   .col-2 { grid-column: span 2; }   .col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }   .col-5 { grid-column: span 5; }   .col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }   .col-8 { grid-column: span 8; }   .col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; } .col-11 { grid-column: span 11; } .col-12 { grid-column: span 12; }
.col-start-1 { grid-column-start: 1; } .col-start-2 { grid-column-start: 2; } .col-start-3 { grid-column-start: 3; }
.col-start-4 { grid-column-start: 4; } .col-start-5 { grid-column-start: 5; } .col-start-6 { grid-column-start: 6; }
.col-start-7 { grid-column-start: 7; } .col-start-8 { grid-column-start: 8; } .col-start-9 { grid-column-start: 9; }

/* 균등 분할 그리드 */
.grid-auto { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--row-gap, var(--grid-gap)) var(--grid-gap); }

/* ---------- Split (자주 쓰는 2단 비율) ---------- */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: var(--split-align, start); }
.split--5-7 > :first-child { grid-column: span 5; }   /* 참고 사이트 620:820 비율 */
.split--5-7 > :last-child  { grid-column: 7 / span 6; } /* 한 칸 띄워 여유 확보 */
.split--6-6 > *            { grid-column: span 6; }
.split--4-8 > :first-child { grid-column: span 4; }
.split--4-8 > :last-child  { grid-column: span 8; }
.split--7-5 > :first-child { grid-column: span 7; }
.split--7-5 > :last-child  { grid-column: 9 / span 4; }
.split--center { --split-align: center; }

/* ---------- Section ---------- */
.section { position: relative; padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--subtle { background: var(--gradient-section); }
.section--dark { background: var(--color-bg-inverse); color: var(--color-text-inverse); }
.section--deep { background: var(--gradient-deep); color: var(--color-text-inverse); }

/* 다크 섹션 안에서 시맨틱 컬러 반전 */
.section--dark, .section--deep, .theme-dark {
  --color-text: var(--color-white);
  --color-text-body: var(--color-text-inverse-muted);
  --color-text-muted: var(--color-gray-400);
  --color-text-faint: #3a3a3d;
  --color-border: var(--color-line-dark);
}

/* 고정 헤더만큼 앵커 위치 보정 */
[id] { scroll-margin-top: var(--header-height); }

/* ---------- Stack (세로 간격) ---------- */
.stack > * + * { margin-top: var(--stack-gap, var(--space-5)); }
.stack--sm { --stack-gap: var(--space-3); }
.stack--lg { --stack-gap: var(--space-8); }