/* =========================================================
   page-shell.css
   웹(.is-web) 관리형 2-pane 셸 공용 골격 —
   마이티켓(mypage-*) · 고객센터(cs-*) · 약관(policy-*) 세 면이
   값 단위로 복제하던 "셸 프레임" 메트릭의 단일 출처(SSoT).

   여기 두는 것: 셸 폭·중앙정렬·2컬럼 그리드·사이드바 거터·pane 거터·
   페이지 헤드(패딩/타이틀 타이포/하단 hairline)·사이드바 라벨·pane 타이틀.
   여기 두지 않는 것(각 파일 유지): policy 목차 리스트, mypage 아바타·배지·pane 안내문,
   cs '목록으로' 링크, 사이드바 항목(nav-item) 상세 등 면별 특이 규정.

   셸 폭/그리드/거터 등 프레임 값 변경은 이 파일에서 한 번만.
   각 면 base 템플릿(myticket_base / board_base / policy)이 함께 로드한다.
   색·모서리·그림자·모션은 tokens.css 의 --tt-* 만 사용. (2026-07-12 공용화)
   ========================================================= */

/* ── 풋터 바닥 고정 — 콘텐츠가 짧아도 풋터는 최소 뷰포트 하단 ── */
body.is-web { min-height: 100vh; display: flex; flex-direction: column; }

/* ── 셸 — 풋터 밀어내기 + 중앙 정렬 고정폭 ── */
.is-web .mypage-shell,
.is-web .cs-shell,
.is-web .board-web-shell,
.is-web .policy-shell { flex: 1 0 auto; }

.is-web .mypage-shell,
.is-web .cs-shell,
.is-web .board-web-shell--wide,
.is-web .policy-shell { width: 68.75rem; margin: 1.25rem auto 3rem; }

/* ── 페이지 헤드 — 전폭. 하단 1px hairline (DESIGN.md 웹 슬림 페이지 헤더 `page-head` 표준) ── */
.is-web .mypage-head,
.is-web .cs-head,
.is-web .policy-head {
  padding: 1.25rem 0 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--tt-border);
}

/* 헤드 좌우 배치(타이틀 / 보조) — mypage 전용 (cs·policy 헤드는 타이틀 단독) */
.is-web .mypage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.is-web .mypage-head-title,
.is-web .cs-head-title,
.is-web .policy-head-title {
  margin: 0;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--tt-ink);
}

/* ── 하단 2컬럼 — 좌 사이드바(고정폭) / 우 pane, 세로선 없이 거터로 분리 ── */
.is-web .mypage-body,
.is-web .cs-body,
.is-web .policy-body-grid {
  display: grid;
  grid-template-columns: 17.5rem minmax(0, 1fr);
  align-items: start;
}

/* ── 사이드바/목차 컨테이너 — 우측 거터 2rem ── */
.is-web .mypage-nav,
.is-web .cs-nav,
.is-web .policy-toc { padding: 0.25rem 2rem 0 0; }

/* 사이드바 라벨 (mypage·cs 사이드바 라벨 + policy 목차 라벨 공통) */
.is-web .mypage-nav-label,
.is-web .cs-nav-label,
.is-web .policy-toc-label {
  margin-bottom: 0.625rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--tt-hint);
}

/* ── 콘텐츠 pane — 좌측 거터 2.5rem ── */
.is-web .mypage-pane,
.is-web .cs-pane,
.is-web .policy-pane { min-width: 0; padding: 0.25rem 0 0 2.5rem; }

/* ── pane 타이틀 — 좌 제목 / 우 보조(안내문·목록으로).
   headline 24px: 헤드 h1(36px)과 pane 콘텐츠(16px) 사이 위계.
   웹은 한 단계 크게(디바이스 스케일) ── */
.is-web .mypage-pane-title,
.is-web .cs-pane-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.25rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--tt-ink);
}