/* 인증 화면의 좌측 사이드바 셸. 820px 미만에서는 상단 그룹 랩으로 전환한다. */
.app-shell-authenticated { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
.app-shell-authenticated > main { min-width: 0; }
.shell-sidebar { position: sticky; top: 0; z-index: 20; align-self: start; display: flex; flex-direction: column; width: 240px; height: 100vh; padding: 24px 16px 16px; border-right: 1px solid var(--line); background: var(--surface); }
.brand { flex: 0 0 auto; color: var(--text-strong); font: 600 18px/1 var(--font-display); letter-spacing: -.02em; text-decoration: none; }
.shell-nav { position: relative; display: flex; flex: 1 1 auto; flex-direction: column; gap: 16px; min-height: 0; margin-top: 28px; padding-bottom: 24px; overflow-y: auto; scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }
.shell-nav::after { position: sticky; bottom: 0; z-index: 1; display: block; flex: 0 0 24px; height: 24px; margin-top: -24px; background: linear-gradient(to bottom, transparent, var(--surface)); content: ""; pointer-events: none; }
.shell-nav::-webkit-scrollbar { width: 6px; }
.shell-nav::-webkit-scrollbar-track { background: transparent; }
.shell-nav::-webkit-scrollbar-thumb { border-radius: var(--radius); background: var(--line-strong); }
/* `interpolate-size` 는 상속된다 — 아래 `::details-content` 의 `height: 0 → auto` 를
   이을 수 있게 여기에 둔다. 이 성질을 모르는 브라우저는 선언을 그냥 버린다. */
.nav-group { display: flex; flex-direction: column; gap: 2px; interpolate-size: allow-keywords; }
/* 묶음 이름은 12px 이다. 11px 이던 것을 올렸다 — `ui_sweep` 의 글자 크기 검사가
   12px 미만을 잡는데 묶음이 넷일 때 이미 80건이었고, 임가공을 더하자 100건이
   되면서 게이트 4 가 「신규 20」으로 불합격했다(게이트1 판정 2026-09-07 §8).
   「원래 있던 스타일을 그대로 썼다」는 면제 사유가 아니다 — 그것을 허용하면
   새 버튼·새 화면마다 같은 결함을 늘려도 통과하게 되고 「신규 0」 계약이 사라진다. */
.nav-group-label { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; color: var(--text-muted); font: 600 12px/1.3 var(--font-body); letter-spacing: .02em; white-space: nowrap; cursor: pointer; list-style: none; }
/* 손잡이의 손닿음. 마우스를 올리면 배경이 은근히 밝아지고, 누를 때 한 단계 더 진해진다
   (R-059 오너 결정). 색은 링크가 쓰던 `--surface-hi` 와 `--line` 을 그대로 쓴다 — 같은
   자리에서 밝기를 새로 만들지 않는다. **이 둘은 움직임이 아니라 상태 표시다** — 움직임을
   끈 사람에게도 그대로 보여야 하므로 아래 `prefers-reduced-motion` 묶음 밖에 둔다. */
.nav-group-label:hover { color: var(--text-strong); background: var(--surface-hi); }
.nav-group-label:active { color: var(--text-strong); background: var(--line); }
/* 묶음 접기 표시. `<summary>` 의 기본 삼각형을 끄고 ▶ 를 직접 그린다 — 오너가 본 화면의
   모양이고, 브라우저마다 다른 기본 표식에 맡기지 않는다. `\FE0E` 는 글자 모양을 강제한다
   (없으면 윈도우 크롬이 ▶ 를 그림문자로 그려 색·크기가 따로 논다).

   **글자를 갈아끼우지 않고 돌린다(R-059).** ▶ 를 90도 돌리면 ▼ 가 된다. 갈아끼우면
   바뀌는 순간이 뚝 끊기는데, 돌리면 그 사이가 이어진다. **돌아간 결과는 움직임이 아니라
   모양이므로 여기 둔다** — 움직임을 끈 사람에게도 펼친 묶음은 ▼ 로 보여야 한다. 아래
   묶음으로 내려가는 것은 그 사이를 이어 주는 `transition` 뿐이다. */
.nav-group-label::-webkit-details-marker { display: none; }
.nav-group-label::before { flex: 0 0 auto; color: var(--text-muted); font-size: 8px; line-height: 1; content: "\25B6 \FE0E"; transform: rotate(0deg); }
.nav-group[open] > .nav-group-label::before { transform: rotate(90deg); }
/* 링크를 담는 상자. `.nav-group` 이 아니라 여기에 정렬을 건다 — `<details>` 안쪽에
   브라우저가 끼워 넣는 상자(`::details-content`) 때문에 `.nav-group` 에 건 세로 정렬이
   링크에 닿지 않는다. 링크 사이 간격은 접기 전과 같다(2px). */
.nav-group-items { display: flex; flex-direction: column; gap: 2px; }

/* 항목이 살짝 떠오르며 차례로 나타난다(R-059). 자리 번호를 쓰는 것은 CSS 에 「몇 번째
   항목」 말고 세는 수단이 없어서다 — 이름으로 골라야 하는 것은 묶음이지 링크의 차례가
   아니다(R-024 는 기억·판정에 걸린 규칙이다). 여섯째부터는 한 값으로 묶어 끝을 막는다. */
@keyframes nav-item-rise { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* 여기서부터가 움직임이다. **CSS 만 쓴다 — 스크립트를 늘리지 않는다.**

   묶음 전체가 `prefers-reduced-motion: no-preference` 안에 있다. 움직임을 끈 사람에게는
   이 규칙이 통째로 안 걸리므로 `::details-content` 의 `height: 0` 도 같이 사라진다 —
   **즉시 열린다.** 사파리·구형 브라우저처럼 `::details-content` 를 모르는 곳에서도 같다:
   그 선택자를 못 읽으면 규칙이 버려지고 내용은 원래대로 즉시 열린다. 여닫는 일 자체는
   `<details>` 가 하므로 **움직임이 하나도 안 걸려도 메뉴는 그대로 돈다.** */
/* **화면을 옮길 때 되살린 묶음은 움직이지 않는다** (배치01 R34, 율미님 2026-09-16 「품번
   누를때마다 css가 작동하는데 ? … 굳이 정신없이 그렇게 작동할 이유가 있어 ?」). `base.html` 의
   기억 스크립트가 되살린 묶음에 `[data-nav-restored]` 를 달고, 사람이 그 손잡이를 누르는 순간
   걷는다. 그래서 아래 **여닫힘 움직임 셋(미끄러짐·▶ 회전·떠오름)은 그 표식이 없을 때만** 건다 —
   사람이 직접 누를 때는 전과 같이 돈다. 표식이 달린 동안도 `height: auto` 는 그대로라 열린
   모습은 첫 그림부터 같다. 손잡이 색·눌림은 여닫힘이 아니라 손닿음이라 표식과 무관하다.
   되살린 뒤 표식을 **스크립트가 스스로 걷지 않는** 까닭: 걷는 순간 `animation` 이 새로 걸려
   떠오름이 한 박자 늦게 그대로 재생된다. */
@media (prefers-reduced-motion: no-preference) {
  .nav-group-label { transition: background-color 140ms ease, color 140ms ease, transform 90ms ease; }
  .nav-group-label:active { transform: translateY(1px); }
  .nav-group:not([data-nav-restored]) > .nav-group-label::before { transition: transform 220ms cubic-bezier(.2, .7, .3, 1); }
  .nav-group::details-content { height: 0; overflow: hidden; }
  .nav-group:not([data-nav-restored])::details-content { transition: height 220ms cubic-bezier(.2, .7, .3, 1), content-visibility 220ms allow-discrete; }
  .nav-group[open]::details-content { height: auto; }
  .nav-group[open]:not([data-nav-restored]) > .nav-group-items > a { animation: nav-item-rise 260ms cubic-bezier(.2, .7, .3, 1) both; }
  .nav-group[open] > .nav-group-items > a:nth-child(2) { animation-delay: 35ms; }
  .nav-group[open] > .nav-group-items > a:nth-child(3) { animation-delay: 70ms; }
  .nav-group[open] > .nav-group-items > a:nth-child(4) { animation-delay: 105ms; }
  .nav-group[open] > .nav-group-items > a:nth-child(5) { animation-delay: 140ms; }
  .nav-group[open] > .nav-group-items > a:nth-child(n + 6) { animation-delay: 175ms; }
}
.shell-nav a { padding: 7px 10px; border-radius: 8px; color: var(--text-muted); font-size: 12px; font-weight: 600; text-decoration: none; }
.shell-nav a:hover { color: var(--text-strong); background: var(--surface-hi); }
.shell-nav a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); box-shadow: inset 3px 0 var(--accent); }
main a:not([class]) { color: var(--accent); }
main a:not([class]):hover { color: var(--accent-hover); }
button.primary-action, .button.primary-action, .button-link.primary-action { border-color: var(--accent); background: var(--accent); color: var(--accent-contrast); }
button.primary-action:hover, .button.primary-action:hover, .button-link.primary-action:hover { border-color: var(--accent-hover); background: var(--accent-hover); color: var(--accent-contrast); }
.account { display: flex; flex: 0 0 auto; flex-direction: column; align-items: stretch; gap: var(--space-4); margin-top: var(--space-7); padding-top: 16px; border-top: 1px solid var(--line); }
.account > a { color: var(--text); font-size: 12px; }
.account button { width: 100%; }
.user-meta { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.user-meta strong { display: block; color: var(--text-strong); font-size: 13px; }
@media (max-width: 820px) {
  .app-shell-authenticated { display: block; }
  .shell-sidebar { position: sticky; width: 100%; height: auto; padding: 12px 18px; border-right: 0; border-bottom: 1px solid var(--line); flex-direction: row; align-items: flex-start; flex-wrap: wrap; gap: var(--space-4) var(--space-5); }
  .shell-nav { order: 3; flex: 1 0 100%; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px; min-height: auto; margin-top: 0; padding-bottom: 0; overflow: visible; }
  .shell-nav::after { display: none; }
  /* `max-width` 가 없으면 묶음이 제 링크만큼 넓어져 화면 밖으로 샌다. 480 에서 「재고」의
     링크 다섯이 한 줄에 서면서 오른쪽이 497px 까지 나갔다(실측). 폭을 화면 안으로 묶으면
     안쪽 링크가 알아서 다음 줄로 넘어간다 — 넓은 화면의 가로 띠 배치는 그대로다. */
  .nav-group { flex: 0 0 auto; max-width: 100%; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 2px; padding: 3px 5px; border: 1px solid var(--line); border-radius: 10px; }
  .nav-group-items { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .nav-group + .nav-group { margin-left: 6px; }
  .nav-group-label { padding: 3px 8px; }
  .account { flex-direction: row; align-items: center; gap: var(--space-4); margin: 0 0 0 auto; padding: 0; border-top: 0; }
  .account button { width: auto; }
}
@media (max-width: 640px) {
  .user-meta { display: none; }
  .shell-sidebar { padding-inline: 14px; }
  .nav-group + .nav-group { margin-left: 0; }
}