/**
 * page-width.css — 화면 컨테이너 폭 **단일 정본** (2026-09-06 신설)
 *
 * ## 등급 3종 — 화면은 값을 적지 않고 **이름을 선언**한다
 *
 *   등급  클래스        캡 변수            의도
 *   카드  .pgw-card     --pgw-cap-card     카드형 좁은 폼(계정·비밀번호). 전 대역에서 카드 폭이 상한 — 넓히면 폼이 흩어진다
 *   단    .pgw-col      --pgw-cap-col      1열 스택(폼·목록). 넓혀도 세로 스크롤이 −1.8%뿐(§3.3-W 실측) — 넓힐 이유가 없다
 *   판    .pgw-board    --pgw-cap-board    사이드바(264+20)·2열 재배치·카드 3열(최소 200px)이 서는 폭(§17.1.1 실측)
 *   셸    .pgw-shell    --pgw-cap-shell    문서가 아니라 **작업면**(채팅). 가장자리까지 쓴다
 *
 * ## 왜 이렇게 바꿨나 (2026-09-06 실측)
 *   종전에는 폭 선언이 세 파일 여섯 곳에 흩어져 있었고 전부 `!important` 라 **승부가 로드 순서로** 났다.
 *   셀렉터는 `.container[style*="max-width:780px"]` — 템플릿 인라인 문자열을 부분 매칭하는 **매칭 키**였다.
 *   그 구조는 두 번 조용히 죽었다(`max-width: 900px` 은 공백 때문에 영원히 미매칭 · 760px 변형은 대상 0건).
 *   살아 있던 결함 넷: ① 1023→1024 경계에서 **네 화면군 전부가 좁아짐**(최대 −229px)
 *   ② 프로필·연동·화면음악은 앵커가 있는데 태블릿 시트를 안 실어 그 대역 규칙이 통째로 빠짐
 *   ③ 결제의 공백 있는 `max-width: 900px` 이 어디에도 안 걸려 Bootstrap 기본이 적용 — 1920px 에서
 *      결제(1296)가 문의(976)보다 320px 넓었다. **죽은 문자열이 "아무 일 없음"이 아니라 정반대 값을 낳았다**
 *   ④ 태블릿 시트 머리말의 대상 목록(9종)과 실제 발화(6종)가 3종씩 어긋남
 *
 * ## 규칙 (어기면 같은 사고가 난다)
 *   1. 🔴 **폭은 여기서만 정한다.** 화면·다른 CSS·JS 어디에도 페이지 컨테이너의 `max-width` 를 적지 않는다.
 *      인라인 `style="max-width:…"` 도 금지 — 종전 앵커 구조가 문자열 일치에 기대다 죽었다.
 *   2. 🔴 **미디어쿼리 0 · `!important` 0.** 거터가 `clamp()` 로 연속이라 대역 절벽이 원리적으로 없다
 *      (`.pb-grid`·`--lh-inset-*` 과 같은 처방 — 관리할 임계값이 0개다).
 *   3. 🔴 **`vw` 를 쓰지 않는다.** vw 는 스크롤바를 포함하고 좌측 레일(52px)을 모른다. 종전의 `1880px` 이라는
 *      수는 "1920 모니터 뷰포트가 스크롤바 때문에 1905" 라는 그 부작용의 회피책이었다. `100%` 는 body
 *      콘텐츠 박스 기준이라 둘을 자동으로 뺀다.
 *   4. **이중 클래스 `.pgw-col.pgw-col` 은 트릭이 아니라 설계다.** 명시도 (0,2,0) 이 Bootstrap `.container`
 *      (0,1,0) 과 그 `@media` 단계값을 **어느 순서로 로드되든** 이긴다. 이 파일은 `head-icons` 로 배포돼
 *      Bootstrap CDN 보다 **앞**에 로드된다 — 가장 불리한 자리에서 이기는 것이 순서 의존 0 의 증명이다.
 *      🔴 전제: Bootstrap `.container` 명시도가 (0,1,0). 버전을 올릴 때 이 전제를 확인할 것(가드가 못 본다).
 *   5. **세트는 통째로 쓴다.** 등급 블록은 캡·거터·Bootstrap 패딩 무력화를 **셋 다** 정한다. 하나만 두면
 *      Bootstrap 의 12px 패딩과 거터가 이중 여백이 되어 폰에서 콘텐츠가 24px 좁아진다.
 *   6. 🔴 **캡 값을 문서·주석에 복사하지 말 것.** 정본은 아래 변수이고, 문서는 변수 이름과 실측 근거만 적는다.
 *      이 값은 properties 가 아니라 CSS 라 수치 사본 가드(`DocPropertyValueCanonGuardTest`)가 보지 않는다.
 *   7. 거터(`--pgw-gutter`)는 컨테이너 **바깥** 여백이다. 학습이력의 `--lh-inset-*` 은 컨테이너 **안쪽**
 *      패널 여백 — 다른 축이다. 같은 사실이 아니므로 사본이 아니다.
 *
 * ## 2열 재배치는 폭이 아니다
 *   `lh-wide`·`dash-wide` 는 이제 **2열 그리드 전용**이다(폭은 `.pgw-board` 가 정한다). 그 임계값(1440)은
 *   폭 임계값이 아니라 레이아웃 모드 임계값이라 없애지 않는다. 대신 관계 불변식으로 묶는다 —
 *   2열 임계값 < `--pgw-cap-board`. 가드 `PageWidthCanonGuardTest` W7.
 *
 * ## 배포 경로는 `fragments/head-icons.html` 의 `<link>` 한 줄이다
 *   전 페이지가 싣는 유일한 head 진입점. `@import` 금지(진입 경로가 둘이 되면 갈린다 — z-layers 선례).
 *
 * ## 🔴 등급은 가로만이 아니라 **세로 리듬**도 소유한다 *(2026-09-09 신설)*
 *   상단바와 첫 콘텐츠(히어로) 사이 간격이 **화면마다 달랐다**(실측: 폭 13종 전부에서 3종 —
 *   문서면 16 / 계정·비밀번호·결제 24 / 채팅 4·8). 소유자가 셋이었기 때문이다:
 *   부트스트랩 `py-3` · `py-4` · `student-nav.css` 의 `#chatContainer` padding. 셋 다 `!important` 라
 *   서로를 이겼고, **어느 것도 정본이 아니었다.**
 *   🔴 2026-09-06 에 히어로의 **아래** 여백을 정본화하면서 같은 병을 이미 고쳤는데,
 *      **위쪽은 컨테이너가 소유**라 그 정본과 가드(H7·H8)의 시야 밖이었다.
 *   → 전 화면이 이미 등급을 하나씩 달고 있으므로(W4) **새 클래스를 만들지 않고** 등급이 소유한다.
 *      값을 화면이 정하지 않는다 — 폭 축과 같은 형태다.
 *   ⚠️ 세로 여백을 **body 로 올리면 안 된다** — `.snav-fill-viewport` 의
 *      `calc(100dvh - pad-top - pad-bottom)` 이 그만큼 높이를 과다 계산해 채팅·메시지함이 넘친다.
 *
 * 가드: `PageWidthCanonGuardTest`(축 목록은 가드 소스가 정본) · 실측: `tools/page_width_probe.js`(폭 불변식 4종)
 *      · `tools/hero_gap_probe.js`(세로 간격 — 같은 폭에서 화면끼리 같은가)
 */

:root {
    /* 캡 — 실측 근거는 머리말 등급 표. 🔴 여기 말고 다른 곳에 이 숫자를 적지 말 것 */
    --pgw-cap-card:  560px;
    --pgw-cap-col:   1000px;
    --pgw-cap-board: 1560px;
    --pgw-cap-shell: 1600px;

    /* 거터 — 600px 까지 12px 고정, 그 위로 증가분의 5%, 1720px 에서 56px 로 멈춘다.
       `100%` 는 사용 지점(max-width)에서 해석돼 body 콘텐츠 폭 기준이 된다. */
    --pgw-gutter:       clamp(12px, calc((100% - 600px) * 0.05), 56px);
    --pgw-gutter-tight: clamp(8px,  calc((100% - 600px) * 0.03), 24px);

    /* 세로 리듬 — nav 아래에서 페이지가 시작되는 자리. 🔴 여기 말고 다른 곳에 이 숫자를 적지 말 것 */
    --pgw-rhythm:       16px;   /* 문서면(카드·단·판) — 현행 다수값 승격 */
    --pgw-rhythm-shell:  8px;   /* 작업면(셸=채팅) — 고정 높이라 상단이 곧 작업 영역이다 */
}

/* ── 등급 블록 4개 — 각 블록이 캡·거터·Bootstrap 패딩 무력화를 통째로 정한다 ── */
.pgw-card.pgw-card {
    --bs-gutter-x: 0;
    padding-top: var(--pgw-rhythm);
    padding-bottom: var(--pgw-rhythm);
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: min(var(--pgw-cap-card), calc(100% - 2 * var(--pgw-gutter)));
}
.pgw-col.pgw-col {
    --bs-gutter-x: 0;
    padding-top: var(--pgw-rhythm);
    padding-bottom: var(--pgw-rhythm);
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: min(var(--pgw-cap-col), calc(100% - 2 * var(--pgw-gutter)));
}
.pgw-board.pgw-board {
    --bs-gutter-x: 0;
    padding-top: var(--pgw-rhythm);
    padding-bottom: var(--pgw-rhythm);
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: min(var(--pgw-cap-board), calc(100% - 2 * var(--pgw-gutter)));
}
.pgw-shell.pgw-shell {
    --bs-gutter-x: 0;
    padding-top: var(--pgw-rhythm-shell);
    padding-bottom: var(--pgw-rhythm-shell);
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: min(var(--pgw-cap-shell), calc(100% - 2 * var(--pgw-gutter-tight)));
}