/* 내비게이션(화면 뼈대) - 동작은 navigation.js, 규칙은 claude_common/ui/navigation.md
   사이드바 + 상단바 + 화면 머리 + 본문, 휴대폰(767px 이하)에서는 사이드바가 서랍이 되고 하단바가 나온다.
   폭·높이만 프로젝트가 바꾼다(.app-shell 의 --app-* 변수). 색은 --uk-* 만 쓴다. */
.app-shell {
  --app-sidebar-w: 224px;
  --app-topbar-h: 60px;
  --app-bottombar-h: 60px;
  min-height: 100dvh;
  background: var(--uk-bg);
  color: var(--uk-fg);
}

/* ── 사이드바 ── */
.app-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 40;
  width: var(--app-sidebar-w);
  display: flex; flex-direction: column;
  background: var(--uk-surface);
  border-right: 1px solid var(--uk-line);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  transition: transform .2s ease;
}
.app-brand { display: flex; align-items: center; gap: 9px; padding: 18px 18px 14px; color: var(--uk-fg); font-weight: 700; font-size: 16px; text-decoration: none; }
.app-brand-mark { width: 26px; height: 26px; border-radius: 50%; background: var(--uk-brand); color: var(--uk-on-strong); display: grid; place-items: center; font-size: 12px; flex: none; }
.app-nav { padding: 4px 10px 24px; display: flex; flex-direction: column; gap: 2px; }
.app-nav-item {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 9px 11px; border-radius: var(--uk-r-sm);
  color: var(--uk-muted); font-size: 14.5px; text-decoration: none;
  transition: background .12s, color .12s;
}
.app-nav-item > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-nav-item:hover { background: var(--uk-head); color: var(--uk-fg); }
/* 지금 메뉴 하나만 뜻 색으로 채운다 - 어디에 있는지 한눈에 */
.app-nav-item.is-active { background: var(--uk-pick); color: var(--uk-on-strong); font-weight: 600; box-shadow: var(--uk-up-sm); }
.app-nav-item.is-sub { padding-left: 40px; font-size: 13.5px; }
.app-nav-icon { width: 18px; flex: none; display: grid; place-items: center; }
.app-nav-label { padding: 16px 11px 6px; font-size: 11.5px; letter-spacing: .06em; color: var(--uk-muted); }
.app-nav-item:focus-visible, .app-nav-group-toggle:focus-visible, .app-burger:focus-visible, .app-bottombar-item:focus-visible { outline: 2px solid var(--uk-brand); outline-offset: -2px; }

/* 접는 묶음 - 이름은 그 화면으로 가고, 화살표는 접기/펴기만 */
.app-nav-group-head { display: flex; align-items: center; gap: 2px; }
.app-nav-group-head .app-nav-item { flex: 1 1 auto; }
.app-nav-group-toggle { flex: none; width: 32px; height: 32px; border: 0; background: none; color: var(--uk-muted); border-radius: var(--uk-r-sm); cursor: pointer; display: grid; place-items: center; }
.app-nav-group-toggle:hover { background: var(--uk-head); color: var(--uk-fg); }
.app-nav-group-toggle svg { transition: transform .15s ease; }
.app-nav-group.is-open .app-nav-group-toggle svg { transform: rotate(90deg); }
.app-nav-group-body { display: none; flex-direction: column; gap: 2px; }
.app-nav-group.is-open .app-nav-group-body { display: flex; }

/* ── 본문 쪽 ── */
.app-main { margin-left: var(--app-sidebar-w); min-width: 0; min-height: 100dvh; display: flex; flex-direction: column; transition: margin-left .2s ease; }
.app-shell.is-side-collapsed .app-sidebar { transform: translateX(-100%); }
.app-shell.is-side-collapsed .app-main { margin-left: 0; }

.app-topbar {
  position: sticky; top: 0; z-index: 30;
  height: var(--app-topbar-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px;
  background: var(--uk-bg);
  box-shadow: 0 2px 8px rgba(var(--uk-shc), .14);
}
/* 햄버거는 열려 있어도 햄버거 그대로다(✕로 바꾸지 않는다) */
.app-burger { flex: none; width: 40px; height: 40px; border: 0; border-radius: var(--uk-r-md); background: none; color: var(--uk-fg); cursor: pointer; display: grid; place-items: center; }
.app-burger:hover { background: var(--uk-head); }
.app-burger span, .app-burger span::before, .app-burger span::after { content: ""; display: block; position: relative; width: 18px; height: 2px; border-radius: 1px; background: currentColor; }
.app-burger span::before { position: absolute; top: -6px; }
.app-burger span::after { position: absolute; top: 6px; }
.app-search { flex: 1 1 auto; max-width: 380px; min-width: 0; }
.app-search input { width: 100%; border: 1px solid var(--uk-border); border-radius: var(--uk-r-sm); background: var(--uk-surface); color: var(--uk-fg); font: inherit; font-size: 14px; padding: 8px 12px; }
.app-search input:focus { outline: none; border-color: var(--uk-brand); box-shadow: 0 0 0 3px var(--uk-brand-light); }
.app-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }

.app-content { flex: 1 1 auto; min-width: 0; padding: 20px 24px 32px; }

/* 화면 머리 - 한 줄: 아이콘 + 제목(+보조) ··· 뱃지 ··· 버튼. 좁으면 묶음째 다음 줄로, 제목 글자는 꺾지 않는다 */
.app-pagehead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 16px; }
.app-pagehead-main { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.app-pagehead-icon { flex: none; color: var(--uk-brand); display: grid; place-items: center; }
.app-pagehead-title { margin: 0; min-width: 0; font-size: 20px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-pagehead-meta { flex: none; color: var(--uk-muted); font-size: 13.5px; white-space: nowrap; }
.app-pagehead-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.app-pagehead-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.app-pagehead-actions form { display: inline; }   /* POST 버튼을 감싼 폼도 버튼 줄에 선다 */
.app-pagehead.is-sub .app-pagehead-title { font-size: 16px; }

/* 도구 줄(화면 머리 아래) - 왼쪽 = 범위·필터, 오른쪽 끝 = [검색][⋮]뿐. 가운데 정렬 없음, 넘치면 줄을 바꾼다 */
.app-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .42rem; min-height: 52px; padding: 8px 0; }
.app-toolbar > * { min-width: 0; }
.app-toolbar-end { margin-left: auto; display: flex; gap: .42rem; }
.app-toolbar-icon { width: 36px; height: 36px; border: 0; border-radius: var(--uk-r-sm); background: none; color: var(--uk-muted); cursor: pointer; display: grid; place-items: center; }
.app-toolbar-icon:hover { background: var(--uk-head); color: var(--uk-fg); }

/* 단계 표시 - 점을 선으로 잇고 지난 단계는 체크, 지금 단계는 뜻 색(되돌려진 단계는 빨강) */
.app-steps { list-style: none; margin: 0 0 16px; padding: 0; display: flex; counter-reset: step; }
.app-steps li { flex: 1 1 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12.5px; color: var(--uk-muted); text-align: center; counter-increment: step; }
.app-steps li::before { content: counter(step); position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--uk-sunk); color: var(--uk-muted); font-weight: 700; font-size: 12px; }
.app-steps li + li::after { content: ""; position: absolute; top: 12px; right: 50%; width: 100%; height: 2px; background: var(--uk-border); }
.app-steps li.is-done::before { content: "✓"; background: var(--uk-pick-light); color: var(--uk-pick-dark); }
.app-steps li.is-done + li::after, .app-steps li.is-done::after { background: var(--uk-pick); }
.app-steps li[aria-current="step"] { color: var(--uk-fg); font-weight: 600; }
.app-steps li[aria-current="step"]::before { background: var(--uk-pick); color: var(--uk-on-strong); }
.app-steps li.is-error::before { background: var(--uk-danger); color: var(--uk-on-strong); }

/* ── 하단바(휴대폰) - 고정 칸, 아이콘 위·글자 아래, 폭 균등 ── */
.app-backdrop { display: none; }
.app-bottombar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: calc(var(--app-bottombar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--uk-surface);
  border-top: 1px solid var(--uk-line);
  transition: transform .25s ease, opacity .25s ease;
}
/* 내리면 미끄러지며 옅어진다 - 사라질 때만 천천히 */
.app-bottombar.is-hidden { transform: translateY(100%); opacity: 0; transition-duration: .6s; }
.app-bottombar-item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; background: none; padding: 0; color: var(--uk-muted); font: inherit; font-size: 12px; font-weight: 600; text-decoration: none; cursor: pointer; }
.app-bottombar-item > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-bottombar-item:hover { background: var(--uk-head); }
.app-bottombar-item.is-active { color: var(--uk-pick-dark); background: var(--uk-pick-light); }
/* PC에서도 하단바를 두는 프로젝트(.is-always) */
.app-bottombar.is-always { display: flex; }
.app-shell:has(.app-bottombar.is-always) .app-content { padding-bottom: calc(var(--app-bottombar-h) + 24px); }

@media (max-width: 767px) {
  /* 서랍 - 상단바 아래에서만 나온다(햄버거가 늘 보이게) */
  .app-sidebar { top: var(--app-topbar-h); width: min(var(--app-sidebar-w), 80vw); z-index: 50; transform: translateX(-100%); box-shadow: var(--uk-up-lg); }
  .app-brand { display: none; }
  .app-shell.is-nav-open .app-sidebar { transform: none; }
  .app-main, .app-shell.is-side-collapsed .app-main { margin-left: 0; }
  .app-backdrop { display: block; position: fixed; left: 0; right: 0; bottom: 0; top: var(--app-topbar-h); z-index: 45; background: var(--uk-scrim); opacity: 0; pointer-events: none; transition: opacity .2s; }
  .app-shell.is-nav-open .app-backdrop { opacity: 1; pointer-events: auto; }
  .app-topbar { padding: 0 10px; gap: 8px; z-index: 55; }
  .app-content { padding: 14px 16px 24px; }
  .app-bottombar { display: flex; }
  .app-shell:has(.app-bottombar) .app-content { padding-bottom: calc(var(--app-bottombar-h) + 24px + env(safe-area-inset-bottom, 0px)); }
  .app-pagehead-title { font-size: 18px; }
  .app-steps li { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-sidebar, .app-main, .app-backdrop, .app-bottombar, .app-nav-group-toggle svg { transition: none; }
}