/* 내비게이션(화면 뼈대) - 동작은 navigation.js, 규칙은 claude_common/ui/navigation.md
   사이드바 + 상단바 + 화면 머리 + 본문, 휴대폰(767px 이하)에서는 사이드바가 서랍이 되고 하단바가 나온다.
   폭·높이만 프로젝트가 바꾼다(.app-shell 의 --app-* 변수). 색은 --uk-* 만 쓴다. */
.app-shell {
  --app-sidebar-w: 224px;
  --app-topbar-h: var(--uk-hd-h, 56px); /* 머리줄 높이 56 = 대시보드(2026-10-22 공통 머리줄, 예전 60) */
  --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: 4px; 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; }
/* 서비스 그림 로고(서비스 모음과 같은 그림, 2026-10-23) - 동그라미 없이 그림 그대로 */
.app-brand-mark.is-logo { width: 28px; height: 28px; border-radius: 0; background: none; }
.app-brand-mark.is-logo img { display: block; width: 28px; height: 28px; }
.app-nav { padding: 4px 10px 24px; display: flex; flex-direction: column; gap: 2px; }
.app-nav-item {
  display: flex; align-items: center; gap: 4px; 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; }
/* 메뉴 그림은 한 크기 --uk-nav-icon 20(대시보드 왼쪽 메뉴 기준, 2026-10-23 - 서비스 메뉴는 18이라 사이트를 오가면 크기가 바뀌었다) */
.app-nav-icon { width: var(--uk-nav-icon, 20px); flex: none; display: grid; place-items: center; }
.app-nav-item > svg, .app-nav-icon > svg { flex: none; width: var(--uk-nav-icon, 20px); height: var(--uk-nav-icon, 20px); }
.app-nav-label { padding: 16px 11px 6px; font-size: 11.5px; letter-spacing: .06em; color: var(--uk-muted); }
/* 메뉴 묶음 사이 구분선(2026-10-22 ERP `기록 및 샘플` 앞) - <div class="app-nav-divider" role="separator"></div> */
.app-nav-divider { height: 1px; margin: 12px 11px 0; background: var(--uk-line); }
.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: var(--uk-hd-cell-gap, 8px);
  /* 오른쪽 끝 12px = 머리줄 아이콘 공통(2026-10-22). 왼쪽 4px(--uk-hd-start)·칸 사이 8px(--uk-hd-cell-gap) = 메일 사이트 머리줄(2026-10-23 사용자 "햄버거·검색 사이즈 및 위치 모두 동일하게" - 메일 기준).
     자체 머리줄(대시보드 .dash-pc-header·앱 머리줄)도 이 두 토큰을 써서 ☰ 자리가 같게 */
  padding: 0 var(--uk-hd-edge, 12px) 0 var(--uk-hd-start, 4px);
  background: var(--uk-bg);
  box-shadow: 0 2px 8px rgba(var(--uk-shc), .14);
}
/* 햄버거는 열려 있어도 햄버거 그대로다(✕로 바꾸지 않는다) */
.app-burger { flex: none; width: var(--uk-hd-btn, 44px); height: var(--uk-hd-btn, 44px); border: 0; border-radius: 50%; background: none; color: var(--uk-fg); cursor: pointer; display: grid; place-items: center; }
.app-burger:hover { background: var(--uk-head); }
/* 대시보드 휴대폰 레이어 안에서만 ☰ 앞에 생기는 [✕](navigation.js) - ☰와 같은 단추 크기 */
.app-layer-close { flex: none; width: var(--uk-hd-btn, 44px); height: var(--uk-hd-btn, 44px); margin-right: -4px; border: 0; border-radius: 50%; background: none; color: var(--uk-fg); cursor: pointer; display: grid; place-items: center; }
.app-layer-close:hover { background: var(--uk-head); }
.app-layer-close svg { display: block; width: var(--uk-hd-icon, 28px); height: var(--uk-hd-icon, 28px); stroke-width: var(--uk-hd-stroke, 1.3); }   /* ☰와 같은 머리줄 아이콘 28·선 1.3(2026-10-23) */
/* ☰는 SVG 그림(선 아이콘 menu) - 선 막대(span·::before)로 그리면 화면 배율·글꼴 환경마다 줄 간격이 틀어져 보인다(2026-10-20 사용자). 크기는 머리줄 아이콘 28px */
.app-burger svg { display: block; width: var(--uk-hd-icon, 28px); height: var(--uk-hd-icon, 28px); stroke-width: var(--uk-hd-stroke, 1.3); }
/* 머리줄 아이콘 단추(검색·설정·알림 …) - 모든 사이트 같은 크기(2026-10-22 사용자 "아이콘 크기 높이 등등 다 동일", 대시보드 기준).
   단추 44 · 아이콘 28 · 동그란 바탕(올리면) · 단추 사이 4 · 오른쪽 끝 12 · 프로필 사진 40(+테두리 2 = 44). 규칙 ui/navigation.md "머리줄 아이콘" */
.app-hd-btn { position: relative; flex: none; display: grid; place-items: center; width: var(--uk-hd-btn, 44px); height: var(--uk-hd-btn, 44px); padding: 0; border: 0; border-radius: 50%; background: none; color: var(--uk-fg); cursor: pointer; text-decoration: none; }
.app-hd-btn:hover, .app-hd-btn[aria-expanded="true"] { background: var(--uk-head); }
.app-hd-btn:focus-visible { outline: 2px solid var(--uk-brand); outline-offset: -2px; }
.app-hd-btn:disabled { opacity: .35; background: none; cursor: default; } /* 못 누름(탐색기 ↑ 맨 위 등) */
.app-hd-btn svg { display: block; width: var(--uk-hd-icon, 28px); height: var(--uk-hd-icon, 28px); stroke-width: var(--uk-hd-stroke, 1.3); }
.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); }
/* 그림·지우기 단추가 든 검색칸(2026-10-23 채팅·메모·폴더 - 앱마다 높이 36·40·알약으로 달랐다): 칸이 테두리를 갖고 안 입력칸은 테두리 없이.
   <label class="app-search is-box"><svg 검색/><input type="search"><button class="app-search-clear" aria-label="지우기"><svg X/></button></label>
   높이·모서리·글자는 .app-search와 같다(테두리 1·--uk-r-sm·14px·높이 약 39·최대 380) */
.app-search.is-box { display: flex; align-items: center; gap: 4px; padding: 0 4px 0 12px; border: 1px solid var(--uk-border); border-radius: var(--uk-r-sm); background: var(--uk-surface); color: var(--uk-muted); }
.app-search.is-box:focus-within { border-color: var(--uk-brand); box-shadow: 0 0 0 3px var(--uk-brand-light); }
.app-search.is-box > svg { flex: none; width: 18px; height: 18px; }
.app-search.is-box input, .app-search.is-box input:focus { flex: 1 1 auto; min-width: 0; border: 0; border-radius: 0; background: none; box-shadow: none; padding: 9px 0; }
.app-search-clear { flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--uk-muted); cursor: pointer; }
.app-search-clear:hover { background: var(--uk-head); color: var(--uk-fg); }
.app-search-clear svg { width: 16px; height: 16px; }
/* 머리줄 앱 로고(첫 화면 왼쪽 위 그림 + 이름) - 모든 앱 한 크기 --uk-hd-logo 40(2026-10-23, 편집기 첫 화면 .list-top 기준). 사이드바 맨 위 로고는 .app-brand-mark.is-logo 28 */
.app-hd-logo { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--uk-fg); font-size: 18px; font-weight: 700; text-decoration: none; }
.app-hd-logo > img, .app-hd-logo > svg { display: block; width: var(--uk-hd-logo, 40px); height: var(--uk-hd-logo, 40px); }
/* 흰 종이(본문 칸) - .app-shell.is-paper .app-content와 같은 모양을 뼈대 밖(React 앱의 오른쪽 칸 등)에서 쓸 때(2026-10-23 채팅).
   위 모서리만 둥글게(--uk-r-lg), 오른쪽 8px 띄움, 좁은 화면(767px 이하)은 모서리 0·여백 0 */
.app-paper { margin-right: 8px; background: var(--uk-paper); border-radius: var(--uk-r-lg) var(--uk-r-lg) 0 0; }
.app-topbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--uk-hd-gap, 4px); 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: calc(50% + 13px); width: calc(100% - 26px); height: 2px; background: var(--uk-border); } /* 앞 동그라미 끝 ~ 이 동그라미 끝(동그라미 26 아래로 지나가지 않는다 - 끝난 단계 동그라미는 비쳐 보여서) */
/* 끝난 단계 = 체크 SVG(lucide check, M20 6 9 17l-5-5)를 mask로 - 글자 "✓"는 글꼴마다 굵기·크기가 달랐다(2026-10-23, React 메뉴 ✓→Check와 같은 결정).
   ::before는 체크 모양으로 깎이므로 옅은 동그라미는 li 바탕(radial-gradient, 같은 26 자리)이 그린다. 체크 14 = 동그라미 안 글자 크기 */
.app-steps li.is-done { background: radial-gradient(circle 13px at 50% 13px, var(--uk-pick-light) 12.5px, transparent 13px) no-repeat; }
.app-steps li.is-done::before {
  content: ""; background: var(--uk-pick-dark);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}
.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; }
/* 하단바 칸 그림 = 테마 --uk-bar-icon(32) 한 값 - SVG·아이콘 마스크 모두(2026-10-23 대시보드만 33.6·글자 12.3·사이 1.4로 따로 정했다) */
.app-bottombar-item > svg, .app-bottombar-item > img, .app-bottombar-item .icon-mask { flex: none; width: var(--uk-bar-icon, 32px); height: var(--uk-bar-icon, 32px); }
.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 { z-index: 55; }
  .app-paper { margin: 0; border-radius: 0; }   /* 여백·칸 사이는 PC와 같다(☰ 왼쪽 4px, 2026-10-23) */
  .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; }
}