/* 데스크탑 셸 레이어(오너 지시 2026-07-30·설계 DESKTOP_PORT_DESIGN_260730.md §1) — 2026.07.30 추가
   캐스케이드 계약: 전 규칙 @media(셸 1100px·2열만 1500px) 안 / 셀렉터 허용목록(.ui-topnav*·.ui-desk-*·.ui-settings-rail*·셸 클래스·:root) /
   기존 화면 셀렉터 후순위 덮어쓰기 금지 — tools/desk-lint.cjs 가 기계 강제. 모바일 전용 요소 숨김 = 마크업 .ui-desk-hide 부여로만. */

/* 모바일(<1100px): 데스크탑 부품 전부 비활성 */
.ui-topnav {
  display: none;
}

@media (min-width: 1100px) {
  /* ── 상단 네비바 — 구조=본앱 main topbar·디자인=달록스킬(§9-10 투명 배경+구분선·§9-7 앱바와 같은 역할=같은 높이 토큰) ── */
  .ui-topnav {
    position: fixed;
    z-index: 41;
    top: 0;
    right: 0;
    left: 0;
    display: block;
    height: calc(var(--safe-top) + var(--appbar-h));
    padding:
      var(--safe-top)
      calc(var(--safe-right) + var(--space-4))
      0
      calc(var(--safe-left) + var(--space-4));
  }

  .ui-topnav::after {
    position: absolute;
    right: var(--space-2);
    bottom: 0;
    left: var(--space-2);
    height: 1px;
    background: var(--appbar-line);
    content: "";
  }

  .ui-topnav__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
    max-width: var(--desk-content-max);
    height: var(--appbar-h);
    margin: 0 auto;
  }

  .ui-topnav__nav {
    display: flex;
    min-width: 0;
    gap: var(--space-1);
  }

  .ui-topnav__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1h);
    min-height: var(--sp-40);
    padding: 0 var(--space-3);
    border-radius: var(--radius-pill);
    color: var(--text2);
    font-size: var(--fs-14);
    font-weight: 700;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease;
  }

  .ui-topnav__item:hover {
    color: var(--text);
    background: var(--bg3);
  }

  .ui-topnav__item.is-active {
    color: var(--accent);
    background: var(--accent-soft);
    font-weight: 800;
  }

  .ui-topnav__acts {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-1h);
  }

  .ui-topnav__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--btn-gap);
    min-height: var(--sp-40);
    padding: 0 var(--btn-pad-x);
    border: 0;
    border-radius: var(--btn-radius);
    color: var(--btn-fg);
    background: var(--accent);
    font-size: var(--btn-font-size);
    font-weight: 800;
    cursor: pointer;
  }

  .ui-topnav__cta svg {
    width: var(--btn-icon-size);
    height: var(--btn-icon-size);
  }

  .ui-topnav__ghost {
    display: inline-flex;
    align-items: center;
    gap: var(--btn-gap);
    min-height: var(--sp-40);
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--btn-radius);
    color: var(--text2);
    background: transparent;
    font-size: var(--btn-font-size);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
  }

  .ui-topnav__ghost:hover {
    color: var(--text);
    background: var(--bg3);
  }

  .ui-topnav__ghost svg {
    width: var(--btn-icon-size);
    height: var(--btn-icon-size);
  }

  .ui-topnav__acct {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1h);
    min-height: var(--sp-40);
    padding: 0 var(--space-2);
    border: 0;
    border-radius: var(--radius-pill);
    color: var(--text);
    background: transparent;
    font-size: var(--fs-13);
    font-weight: 700;
    cursor: pointer;
  }

  .ui-topnav__acct:hover {
    background: var(--bg3);
  }

  /* 캐럿 — 정본 아이콘셋에 chevron-down 이 없어 chevron-right 회전으로(자작 SVG 금지 원칙 준수) */
  .ui-topnav__acct > svg:last-child {
    width: var(--sp-13);
    height: var(--sp-13);
    transform: rotate(90deg);
  }

  .ui-topnav__avatar {
    width: var(--sp-28);
    height: var(--sp-28);
  }

  .ui-topnav__menu {
    position: absolute;
    z-index: 42;
    top: calc(100% + var(--space-1));
    right: 0;
    display: none;
    width: var(--sp-260);
    max-height: var(--sp-560);
    padding: var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-14);
    background: var(--bg2);
    box-shadow: var(--shadow-control);
    overflow-y: auto;
  }

  .ui-topnav__menu.is-open {
    display: grid;
    gap: var(--sp-2);
  }

  .ui-topnav__menu-title {
    padding: var(--space-2) var(--space-2) var(--space-1);
    color: var(--text3);
    font-size: var(--fs-12);
    font-weight: 740;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .ui-topnav__menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--sp-40);
    padding: 0 var(--space-2);
    border-radius: var(--radius-10);
    color: var(--text);
    font-size: var(--fs-13);
    text-decoration: none;
  }

  .ui-topnav__menu-item:hover {
    background: var(--bg3);
  }

  .ui-topnav__menu-item.is-active {
    color: var(--accent);
    background: var(--accent-soft);
  }

  /* ── 셸 매트릭스 전환(설계 §1 표) — topnav 를 실제로 렌더한 셸(.app-shell--desk-nav)에만 적용 ── */
  .bottom-nav {
    display: none;
  }

  .app-shell--desk-nav {
    padding-bottom: var(--safe-bottom);
  }

  /* 루트 = topnav 단독(이중 헤더 금지 §9-1) */
  .app-shell--desk-nav.app-shell--root .appbar {
    display: none;
  }

  /* 상세 = topnav 아래 앱바(백버튼·컨텍스트 보존) — 셸 top 2단 */
  .app-shell--desk-nav:not(.app-shell--root) .appbar {
    top: calc(var(--safe-top) + var(--appbar-h));
    height: var(--appbar-h);
    padding-top: 0;
  }

  .app-shell--desk-nav:not(.app-shell--root) {
    top: calc(var(--safe-top) + var(--appbar-h) + var(--appbar-h));
  }

  /* 글로벌 액션(AI·테마)은 topnav 단독 소유 — 중복 진입점 금지(§9-3) */
  .app-shell--desk-nav .appbar .appbar__global-slot {
    display: none;
  }

  /* ── 확장 폭·2열·숨김 공용 부품 ── */
  /* 폭 상한 = 컨텐츠 1460 + .page 좌우 거터(--page-gutter×2). 안쪽 실폭이 1460 이 되도록
     패딩 포함값으로 소유한다(A1 서브 Q1 지적 채택 — 모바일 --content-max 768=720+24×2 와 같은 관계). */
  .ui-desk-wide {
    max-width: calc(var(--desk-content-max) + var(--page-gutter) * 2);
  }

  .ui-desk-hide {
    display: none;
  }

  /* 열 수·열 폭의 유일 소유자(설계 §2·B-01) — 1100~1499 = 1열 720 중앙 / 1500+ = 2열 720 고정 */
  .ui-desk-cols {
    display: grid;
    grid-template-columns: minmax(0, var(--desk-col));
    justify-content: center;
    gap: var(--desk-col-gap);
  }

  .ui-desk-cols__full {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1500px) {
  .ui-desk-cols {
    grid-template-columns: repeat(2, var(--desk-col));
  }

  /* 열 고정 카드(__c1/__c2)가 DOM 순서와 무관하게 같은 행에 앉도록 — sparse 커서는 뒤로 못 가
     열 고정 짝의 앞 카드가 한 행 밀린다(A1 실측). 전 카드가 1열 폭이라 순서 뒤바뀜 여지 없음. */
  .ui-desk-cols--dense {
    grid-auto-flow: row dense;
  }

  .ui-desk-cols__c1 {
    grid-column: 1;
  }

  .ui-desk-cols__c2 {
    grid-column: 2;
  }
}

/* ══ A1 브리프(#/brief) — 팩 A1 병합분(원지시 p3) ══ */
@media (min-width: 1100px) {
  /* 체성분 스냅샷 StatGrid 2x2→4x1. 인라인 --ui-stat-columns:2 는 CSS 로 못 덮으므로(!important 금지)
     grid-template-columns 를 수식자가 직접 확정한다(열 수는 부품 소유). */
  .ui-desk-stat-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ══ B1 플랜·코치노트 — 팩 B1 병합분(원지시 p6·p7) ══ */
@media (min-width: 1100px) {
  /* ── S4 플랜 계획표 = 본앱 main RunningPlanPage `.rpp-planwrap` 배열 복원 ──
     좌 = AI코치 서포트 사이드 / 우 = 주간 계획표(확장). 열 비율 700fr:880fr 은
     main src/components/runningPlan/running-plan.css 진본 그대로다 — fr(단위 없음)이라
     폭 수치를 새로 만들지 않고 컨테이너(.ui-desk-wide = 1460)를 그 비율로 나눈다.
     열 간격은 기존 토큰 --desk-col-gap(20px = main --space-5) 재사용.
     ★.ui-desk-cols(720 1열/2열)는 대칭 720 전용 부품이라 "우 패널 확장"을 표현할 수 없어
       비대칭 2패널은 별도 부품으로 둔다(화면별 미디어 예외가 아니라 부품 신설). */
  .ui-desk-plan {
    display: grid;
    grid-template-columns: 700fr 880fr;
    align-items: start;
    gap: var(--desk-col-gap);
  }

  /* ── S5 코치노트 상단 컨트롤 영역(필터칩·액션) = 720px 유지 · 컨테이너 우측 정렬(원지시 p7) ──
     안내캡션·멘션 카드는 컨테이너 폭 그대로 확장된다(별도 규칙 없음 = .ui-desk-wide 만으로 성립). */
}

/* ══ C1 로그인(#/login) — 팩 C1 병합분(오너 추가지시·main 정본 스크림) ══ */
@media (min-width: 1100px) {
  /* ── 인증 셸 스코프 토큰 ──────────────────────────────────────────────────
     ★로그인 화면만 텍스트 하한 12px(D-7 · 전 화면 하한 11px과 다름).
       집행은 셸 스코프 토큰 상향 하나로 끝낸다 — 개별 요소 font-size 재정의 금지(늪 방지).
     히어로 스크림 = color-mix(var(--bg))로 다크/라이트 자동 적응(본앱 --auth-scrim 미러). */
  .app-shell--auth {
    --fs-09: 12px;
    --fs-10: 12px;
    --fs-11: 12px;
    --fs-12: 12px;
    --ui-auth-scrim: linear-gradient(160deg, color-mix(in srgb, var(--bg) 58%, transparent) 0%, color-mix(in srgb, var(--bg) 82%, transparent) 100%);
  }

  /* 라이트 = 시드 3장 밝기 편차로 가운데만 원색으로 튀는 것을 막는 균일 뮤트(본앱 라이트 스크림 값) */
  :root[data-theme="light"] .app-shell--auth {
    --ui-auth-scrim: linear-gradient(160deg, color-mix(in srgb, var(--bg) 76%, transparent) 0%, color-mix(in srgb, var(--bg) 90%, transparent) 100%);
  }

  /* ── 히어로 = 컨테이너 전체너비 배경(main 2026-07-03 방식) ──────────────────
     레이어 위→아래: 브랜드쪽 액센트 글로우 → 테마 적응 스크림 → 3분할 시드(체성분·러닝·근력) → --bg.
     브랜드 패널의 개별 배경·우측 구분선은 두지 않는다(전체 배경이 뒤로 깔린다). */
  .app-shell--auth .ui-desk-auth-page {
    max-width: none;
    align-items: center;
    padding: 0;
    background:
      radial-gradient(circle at 20% 25%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 55%),
      var(--ui-auth-scrim),
      url("../assets/body-seed.webp") left center / 33.34% 100% no-repeat,
      url("../assets/running-seed.webp") center center / 33.34% 100% no-repeat,
      url("../assets/strength-seed.webp") right center / 33.34% 100% no-repeat,
      var(--bg);
  }

  /* ── 2분할 배열 — 좌 브랜드(1.1) / 우 로그인(1). 폭은 데스크탑 컨테이너 토큰이 소유 ── */
  .app-shell--auth .ui-desk-auth {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--space-7);
    width: 100%;
    max-width: var(--desk-content-max);
    margin: 0 auto;
    padding: var(--space-7) var(--space-6);
    text-align: left;
  }

  /* 좌 브랜드 패널 — BI·태그라인·의미색 불릿 3종은 위로, 푸터는 바닥으로(main 배열) */
  .ui-desk-auth .ui-desk-auth__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-7) var(--space-7) var(--space-7) var(--space-4);
    text-align: left;
  }

  .ui-desk-auth .ui-desk-auth__bi {
    transform-origin: left center;
  }

  .ui-desk-auth .ui-desk-auth__foot {
    margin-top: auto;
  }

  /* ── 오너 데스크탑 1차 지적(2026-07-30 밤) ──
     ① 로그인 화면만 상단헤드 제거(:has 스코프 — 가입·계정찾기의 앱바 백버튼은 보존 §9-1 탈출 경로) */
  .app-shell--auth:has(.ui-desk-auth-page) .appbar {
    display: none;
  }

  .app-shell--auth:has(.ui-desk-auth-page) {
    top: var(--safe-top);
  }

  /* ② 좌측 캐치프라이즈+소구항목 3종 = 현 수준의 120% 스케일업(텍스트 포함 컨테이너 자체).
     zoom 은 transform 과 달리 레이아웃에 반영돼 형제 간격이 함께 자란다(데스크탑 전용·모바일 불변). */
  .ui-desk-auth__tagline,
  .ui-desk-auth__feats {
    zoom: 1.2;
  }

  /* 우 로그인 묶음 — main 방식(테두리 박스 없이 폭만 제한·열 안에서 중앙). 부품은 목업 현행 그대로 */
  .ui-desk-auth .ui-desk-auth__panel {
    align-self: center;
    justify-self: center;
    width: 100%;
    max-width: var(--sp-400);
    padding: var(--space-7) 0;
    text-align: left;
  }
}

/* ══ A2 기록·피트로그(#/history·#/fitlog) — 팩 A2 병합분(원지시 p4·p5·전이표 D-4) ══ */
@media (min-width: 1100px) {
  /* 2패널 호스트 — 열 수·열 폭은 셸 .ui-desk-cols 가 소유하고, 여기서는 정렬만 더한다.
     start 정렬: 좌패널(피트로그)이 길어져도 우패널이 그 높이로 늘어나 끌려가지 않게 한다. */
  .ui-desk-hist {
    align-items: start;
  }

  /* 패널 = 독립 컨테이너(원지시 p4·p5). 안쪽 행 간격은 화면 표준 리듬(.page__stack--loose)과 같은 값이다. */
  .ui-desk-hist__pane {
    display: grid;
    min-width: 0;
    gap: var(--space-6);
    grid-template-columns: minmax(0, 1fr);
  }

  /* 좌패널 스위칭 세그먼트는 내용 폭만 차지한다(패널 폭 전체로 늘어난 트랙은 세그먼트 부품의 모양이 아니다).
     부품(.ui-segment)의 모양은 그대로 두고, 배치만 컨테이너가 정한다. */
  .ui-desk-hist__toggle {
    justify-self: start;
  }

  /* 컨트롤 행(정렬필터 → 뷰모드 버튼 → 플랜) — 간격은 모바일 보기방식 행(.hist-viewrow)과 같은 --space-2.
     좁아지면 줄바꿈으로 흡수한다(라벨 잘림·가로 스크롤 금지). */
  .ui-desk-hist__ctl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }
}

@media (min-width: 1500px) {
  /* 우패널 독립 스크롤(원지시 p4 "선택 뷰모드 컨텐츠 = 독립 컨테이너·독립 스크롤").
     좌우가 실제로 나란히 서는 2패널(1500+)에서만 성립한다 — 1열(1100~1499)에서는 페이지가 통째로 흐른다.
     높이 = 뷰포트에서 셸 상단(topnav)·하단 안전영역·상하 숨쉴 여백을 뺀 값(새 수치 없음·기존 토큰 조합). */
  .ui-desk-hist__pane--right {
    position: sticky;
    top: var(--space-5);
    max-height: calc(100dvh - var(--safe-top) - var(--appbar-h) - var(--safe-bottom) - var(--space-5) * 2);
    grid-template-rows: auto minmax(0, 1fr);
  }

  /* 넘치는 것은 이 상자 안에서만 스크롤한다(조작부 3행은 패널 위에 고정). */
  .ui-desk-hist__scroll {
    min-height: 0;
    overflow-y: auto;
  }
}

/* ══ B2 설정 레일(S6) · 설정-트래킹 통합(S7) — 팩 B2 제출분(원지시 p8·p9) — 2026.07.30 작성 ══
   캐스케이드 계약(설계 §1 B-02) 준수: 전 규칙 @media (min-width:1100px) 안 / 셀렉터 = .ui-desk-*·.ui-settings-rail* 신설분만 /
   기존 화면 셀렉터 후순위 덮어쓰기 0(데스크탑 배열은 마크업이 래퍼를 얹어 `.settings-detail-page > .page__stack` 계약에서 자연히 벗어난다). */
@media (min-width: 1100px) {
  /* ── S6 설정 배열 = 좌 본문 + 우 설정 레일(본문 왼쪽 몰림 = 오너 지시 원문 "정상") ──
     본문 기본 폭 = 기준폭 720(--desk-col) · 레일 = 260 고정. 열 사이 = 기존 --desk-col-gap 재사용.
     ★.ui-desk-cols(대칭 720 1열/2열)는 '본문+좁은 레일'을 표현할 수 없어 별도 부품으로 둔다
       (화면별 미디어 예외가 아니라 부품 신설 — B1 .ui-desk-plan 과 같은 판단). */
  .ui-desk-settings {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--sp-260);
    align-items: start;
    gap: var(--desk-col-gap);
  }

  .ui-desk-settings__body {
    width: 100%;
    min-width: 0;
    max-width: var(--desk-col);
  }

  /* 통합 화면(설정-트래킹 S7)만 남은 폭을 다 쓴다 — 좌 프리뷰+우 콘솔 2패널이 들어가야 한다 */

  /* ── 설정 레일 부품(공용) — 구조 참고 = 본앱 main 우측 네비(.set-aside-desktop: 그룹 제목 + 항목 링크).
     본앱은 뷰포트 고정 풀높이 레일이지만, 목업 셸은 `.app-shell` 자체가 스크롤 컨테이너라
     같은 '상시 노출'을 sticky 로 얻는다(뷰포트 좌표 계산·고정 오버레이 없이 앱바와 겹치지 않는다).
     max-height = 뷰포트 − (상단 네비 + 앱바) − 여백. 상세 화면(2단 헤더) 기준으로 잡아 허브에서도 넘치지 않는다. */
  .ui-settings-rail {
    position: sticky;
    top: var(--space-3);
    display: grid;
    gap: var(--space-4);
    max-height: calc(100dvh - var(--safe-top) - var(--appbar-h) - var(--appbar-h) - var(--space-6));
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-14);
    background: var(--bg2);
    overflow-y: auto;
  }

  .ui-settings-rail__home {
    display: flex;
    min-height: var(--sp-40);
    align-items: center;
    padding: 0 var(--space-2);
    border-radius: var(--radius-10);
    color: var(--text);
    font-family: var(--font-display);
    font-size: var(--fs-17);
    letter-spacing: 0.04em;
    text-decoration: none;
  }

  .ui-settings-rail__home:hover,
  .ui-settings-rail__home.is-active {
    color: var(--accent);
  }

  .ui-settings-rail__group {
    display: grid;
    gap: var(--sp-2);
  }

  .ui-settings-rail__title {
    margin: 0;
    padding: 0 var(--space-2) var(--space-1);
    color: var(--text3);
    font-size: var(--fs-12);
    font-weight: 740;
    letter-spacing: 0.04em;
  }

  /* 항목 = 계정 드롭다운 항목(.ui-topnav__menu-item)과 같은 역할·같은 값(§9-6).
     ★병합 시 두 셀렉터를 한 규칙으로 묶어도 무방하다 — 값은 여기서 새로 만들지 않았다. */
  .ui-settings-rail__item {
    display: flex;
    min-height: var(--sp-40);
    align-items: center;
    padding: 0 var(--space-2);
    border-radius: var(--radius-10);
    color: var(--text);
    font-size: var(--fs-13);
    text-decoration: none;
  }

  .ui-settings-rail__item:hover {
    background: var(--bg3);
  }

  .ui-settings-rail__item.is-active {
    color: var(--accent);
    background: var(--accent-soft);
    font-weight: 800;
  }

  /* ── S7 설정-트래킹 좌 프리뷰 상자 — 안에 든 것은 /track/screen 과 같은 f5 프레임(겉동결 무접촉).
     프레임 자체(.w4-asset-frame)는 100%×100% 라 상자가 높이를 정한다. f5 편집기는 좁은 폭에서
     프리뷰 패널을 먼저 세로로 세우고 기기 도형을 상자 크기에 맞춰 스스로 축소한다(자산 자체 로직). */
  .ui-desk-trackpreview {
    height: var(--sp-560);
    border: 1px solid var(--border);
    border-radius: var(--radius-14);
    background: var(--bg2);
    overflow: hidden;
  }
}

/* 팩 R-H — 설정 셸 재배열(오너 수정지시 V1 p10 · 대장 REVISION_V1_LEDGER 축H ①②③) — 2026.07.31 작성
   ①설정군 상단 타이틀(앱바) 제거 ②우측 설정 레일 = 화면 오른쪽 완전 부착 + position:fixed(스크롤 무관 상시)
   ③본컨텐츠 = 레일 제외 영역에서 가운데 정렬 · 폭 상한 1280 · 980~1920 반응형.

   ★병합 위치 = desktop.css 의 「B2 설정 레일(S6)」 블록 **뒤**(파일 말미 추가)에 얹는다.
     여기 규칙은 전부 셸 스코프(.app-shell--desk-nav …)라 B2 원본(.ui-desk-settings·.ui-settings-rail 단독
     셀렉터, 특이도 0-1-0)보다 특이도가 높다 — 순서에 기대지 않고 이긴다.

   ★@media 조건 = (min-width: 1100px). 오너 원문은 "960px 이상"이지만 **960~1099 구간에는 상단 네비바도
     설정 레일도 없다**(둘 다 데스크탑 셸 1100 발동 · desktop.css 최상단 `.ui-topnav{display:none}` + JS
     global.dallogDesk 1100 판정). 원문의 전제("상단네비바·우측네비바가 있는 환경")가 성립하지 않는 구간에서
     앱바만 지우면 그 구간은 제목도 백버튼도 레일도 없는 화면이 된다(퇴보). 그래서 이 팩은 1100 을 유지하고
     960 로 내리는 안은 갈림길로 반환한다 — 내리려면 데스크탑 셸 판정(1100) 자체를 옮겨야 하고
     그건 전 화면 2열/폭 계약과 tools/desk-lint.cjs(허용 @media = 1100|1500)까지 걸린 별건이다.

   ★찌꺼기 신고 — 이 팩이 본문 폭 상한을 전 하위메뉴 공통(1280)으로 통일하면서 B2 의
     `.ui-desk-settings__body--wide`(트래킹 전용 폭 해제)는 쓰는 곳이 사라졌다(마크업에서 제거 완료).
     병합 시 그 규칙도 함께 걷어낼 것. */

@media (min-width: 1100px) {
  :root {
    /* 설정 본컨텐츠 폭 상한(오너 p10-3 "~1280px") · 레일 기본 너비는 B2 와 같은 값(260)을 이름만 붙여 쓴다 */
    --desk-settings-max: 1280px;
    --desk-settings-rail: var(--sp-260);
  }

  /* ── ① 설정군 상단 타이틀(앱바) 제거 ────────────────────────────────────────
     대상 = 데스크탑 설정 배열을 켠 화면 전부(허브·하위 13화면·근력 설정). 판정 근거를 화면 목록이 아니라
     "설정 셸이 붙어 있는가"(.ui-desk-settings)로 두어, 설정 하위메뉴가 늘어도 규칙을 다시 안 고친다.
     제목·백버튼의 역할은 상단 네비바 + 우측 레일(현재 항목 is-active)이 이미 수행한다(§9-1 이중 헤더 금지). */
  .app-shell--desk-nav:not(.app-shell--root):has(.ui-desk-settings) .appbar {
    display: none;
  }

  /* 앱바가 사라졌으니 셸 상단은 2단(topnav+appbar)에서 1단(topnav)으로 되돌린다 */
  .app-shell--desk-nav:not(.app-shell--root):has(.ui-desk-settings) {
    top: calc(var(--safe-top) + var(--appbar-h));
  }

  /* ── ③ 본컨텐츠 = 레일을 뺀 영역에서 가운데 정렬 ──────────────────────────────
     레일이 흐름에서 빠져(fixed) 2열 그리드가 필요 없어졌다 → 한 덩어리 흐름 + 오른쪽에 레일 자리만 비운다.
     폭 상한은 화면이 아니라 셸이 소유한다(전 하위메뉴 공통 · 1920 기준 본문영역 = 1920 − 레일 − 거터). */
  .app-shell--desk-nav .ui-desk-settings {
    display: block;
    /* .ui-desk-wide(1460+거터)를 설정군에서만 풀어 준다 — 본문 폭은 아래 __body 가 정하고,
       바깥 컨테이너는 레일 자리를 비우기 위해 화면 끝까지 간다. 마크업의 .ui-desk-wide 는 그대로 둔다
       (이 팩이 병합되기 전에도 설정 화면이 종전 폭으로 정상 동작하도록 = 중간 상태 회귀 0). */
    max-width: none;
    padding-right: calc(var(--page-gutter) + var(--desk-settings-rail));
  }

  .app-shell--desk-nav .ui-desk-settings__body {
    width: 100%;
    max-width: var(--desk-settings-max);
    margin: 0 auto;
  }

  /* ── ② 설정 레일 = 화면 오른쪽 완전 부착 + fixed(스크롤과 무관하게 상시) ──────
     sticky(스크롤 컨테이너 종속)에서 fixed(뷰포트 종속)로 바꾼다. 오른쪽·아래 끝까지 붙으므로
     떠 있는 카드의 모양(둥근 모서리·사방 테두리)을 버리고 본문과의 경계선 한 줄만 남긴다.
     상단은 상단 네비바 바로 아래(앱바는 ①에서 제거됨). */
  .app-shell--desk-nav .ui-settings-rail {
    position: fixed;
    top: calc(var(--safe-top) + var(--appbar-h));
    right: 0;
    bottom: 0;
    width: var(--desk-settings-rail);
    max-height: none;
    /* 높이가 화면 끝까지 늘어나면 그리드 행이 함께 늘어난다 — 항목 간격은 gap 이 정한 값 그대로 위에서부터 쌓는다 */
    align-content: start;
    padding: var(--space-3);
    padding-bottom: calc(var(--space-3) + var(--safe-bottom));
    border-width: 0 0 0 1px;
    border-radius: 0;
  }
}