/* DMRS 셸(사이드바+상단바) — 회계 화면(base.html)과 admin(base_site.html) 공용.
   디자인 토큰(:root)도 여기서 정의한다. app.css는 이 파일 뒤에 로드된다. */

@font-face {
    font-family: "Pretendard";
    src: url("../fonts/PretendardVariable.302ec55f5b43.woff2") format("woff2-variations");
    font-weight: 45 920;
    font-display: swap;
}

:root {
    /* neutrals (Primer light) */
    --gray-0: #f6f8fa;
    --gray-1: #eaeef2;
    --gray-2: #d0d7de;
    --gray-3: #afb8c1;
    --gray-5: #6e7781;
    --gray-6: #57606a;
    --gray-9: #24292f;
    /* semantic */
    --accent: #0969da;
    --accent-subtle: #ddf4ff;
    --ok: #1a7f37;
    --ok-subtle: #dafbe1;
    --attention-subtle: #fff8c5;  /* 체크 선택 행(형광펜) — hover 회색·드릴다운/복귀 연청과 구분 */
    /* 상태 칩 색 문법 A안(방향 중심, 2026-07-27 확정): 매출·입금=청 / 매입·출금=주황 /
       대체=보라 / 완료=녹 / 대기=앰버 / 회색=비활성·보류 전용 */
    --attention: #9a6700;
    --orange: #bc4c00;
    --orange-subtle: #fff1e5;
    --purple: #8250df;
    --purple-subtle: #fbefff;
    --danger: #d1242f;
    --danger-subtle: #ffebe9;
    --warn: #9a6700;
    --warn-subtle: #fff8c5;
    --navy: #17365d;            /* top bar */
    /* aliases kept for existing templates/scripts */
    --line: var(--gray-2);
    --muted: var(--gray-6);
    --bg-soft: var(--gray-0);
    /* layout */
    --page-w: 1320px;           /* document-type screens; .page.full lifts it */
    --sidebar-w: 212px;
    --sidebar-rail: 56px;
    --topbar-h: 46px;           /* side-top과 topbar가 같은 높이 — 네이비 띠 연속 */
    --rule: var(--gray-9);      /* ledger ink rule */
}

/* ── shell: 사이드바(전체 높이 고정 기둥) + 우측 열(상단바+본문) ── */
.shell { display: flex; align-items: stretch; min-height: 100vh; }
.body-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ── top bar: 현재 위치 + 사용자 도구 ── */
.topbar {
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    background: var(--navy);
    color: #fff;
    flex: 0 0 auto;
    /* 스크롤해도 화면 상단에 고정 — sticky 표 머리행(top: --topbar-h)이 이 아래로 붙는다 */
    position: sticky; top: 0; z-index: 60;
}
/* 뒤로/앞으로(history) — ☰과 같은 아이콘 버튼 문법. 좌상단 관행 위치(크럼 앞).
   '앞으로 갈 곳' 유무는 브라우저가 노출하지 않아 비활성 표시는 없다(자체 버튼과 동일). */
.nav-hist {
    border: 0; background: transparent; color: inherit; opacity: .8;
    cursor: pointer; padding: 4px 6px; border-radius: 5px;
    display: inline-flex; align-items: center;
}
.nav-hist:hover { opacity: 1; background: rgba(255, 255, 255, .15); }
/* 회사명 — 인스턴스 구분(다회사 운영). 빗금 구분자 뒤에 위치 경로가 온다 */
.topbar .co-name { font-size: 13px; font-weight: 700; margin-left: 4px; }
.topbar .co-name::after { content: "/"; opacity: .45; font-weight: 400; margin-left: 8px; }
.topbar .crumb { font-size: 13px; font-weight: 600; opacity: .92; margin-left: 2px; }
.topbar .spacer { flex: 1; }
.topbar .user { opacity: .85; font-size: 13px; }
/* .topbar 한정 선택자: admin의 a:link 색 규칙보다 우선(네이비 위 흰 글자 고정) */
.topbar .user-link {
    border: 0; background: transparent; color: #fff; opacity: .85;
    font-size: 13px; font-family: inherit; cursor: pointer;
    text-decoration: none; padding: 0;
}
.topbar .user-link:hover { opacity: 1; text-decoration: underline; }
.user-sep { opacity: .5; font-size: 13px; }
.topbar .inline-form { margin: 0; display: inline; }

/* ── PWA 창 컨트롤 오버레이(설치형 앱): 브라우저 캡션바 없이 네이비 띠가 창 맨 위 ── */
.wco-drag { display: none; }
@media (display-mode: window-controls-overlay) {
    /* 네이비 띠 전체가 창 드래그 손잡이 — 조작 요소만 드래그에서 제외 */
    .topbar, .side-top { -webkit-app-region: drag; app-region: drag; }
    .topbar button, .topbar a, .side-top button, .side-top a {
        -webkit-app-region: no-drag; app-region: no-drag;
    }
    /* 우상단에 겹쳐 뜨는 창 버튼(최소화·닫기) 폭만큼 상단바 오른쪽을 비운다 */
    .topbar {
        padding-right: calc(16px + 100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw));
    }
    /* macOS처럼 창 버튼이 왼쪽인 환경 — 브랜드가 버튼 뒤로 숨지 않게 */
    .side-top { padding-left: calc(12px + env(titlebar-area-x, 0px)); }
    /* 상단바 없는 화면(로그인)용 투명 드래그 띠 */
    .wco-drag {
        display: block; position: fixed; inset: 0 0 auto 0;
        height: env(titlebar-area-height, 33px);
        -webkit-app-region: drag; app-region: drag; z-index: 100;
    }
}

/* ── sidebar: 화면 맨 위~아래 고정, 내부만 스크롤 ── */
.sidebar {
    width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
    background: var(--gray-1);
    font-family: "Pretendard", system-ui, "Malgun Gothic", sans-serif;
    font-size: 14px;
    transition: width .15s ease, flex-basis .15s ease;
}
/* 사이드바 머리(네이비): ☰ + 브랜드 — 상단바와 같은 높이로 띠가 이어진다 */
.side-top {
    height: var(--topbar-h);
    display: flex; align-items: center; gap: 10px;
    padding: 0 12px; background: var(--navy); color: #fff;
    flex: 0 0 auto;
}
.side-top .brand {
    font-weight: 700; color: #fff; text-decoration: none;
    display: flex; align-items: center; gap: 8px;
    white-space: nowrap; overflow: hidden;
}
.side-top .brand .mark { width: 11px; height: 11px; border-radius: 3px; background: #7cb5f7; flex: 0 0 auto; }
.nav-toggle {
    border: 0; background: transparent; color: inherit; font-size: 16px;
    cursor: pointer; padding: 3px 9px; border-radius: 5px; opacity: .85;
    font-family: inherit;
}
.nav-toggle:hover { opacity: 1; background: rgba(255, 255, 255, .15); }
/* 경계선은 메뉴 영역에만 — 네이비 띠(side-top↔topbar)는 이음매 없이 */
.side-nav { flex: 1; overflow-y: auto; border-right: 1px solid var(--gray-2); padding-bottom: 24px; }

.nav-grp { position: relative; background: #fff; border: 1px solid var(--gray-2); border-radius: 8px; margin: 10px 10px 0; }
.nav-grp-head {
    display: flex; align-items: center; gap: 8px; padding: 8px 12px;
    font-weight: 700; font-size: 12px; letter-spacing: .05em;
    color: var(--gray-6) !important; background: var(--gray-0);
    border-bottom: 1px solid var(--gray-2); border-radius: 8px 8px 0 0;
    text-decoration: none;
}
.nav-grp-head svg { flex: 0 0 14px; color: var(--gray-5); }
.nav-grp.on .nav-grp-head svg { color: var(--accent); }
.nav-items { padding: 5px 6px; }
.nav-items .fly-title { display: none; }
.nav-items a {
    display: block; font-size: 13px; padding: 5px 10px;
    color: var(--gray-6); border-radius: 5px; text-decoration: none;
}
.nav-items a:hover { background: var(--gray-1); color: var(--gray-6); }
.nav-items a.on { background: var(--accent-subtle); color: var(--accent); font-weight: 600; }
.nav-sec {
    display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em;
    color: var(--gray-5); padding: 8px 10px 2px;
}

/* ── 접힘: 아이콘 레일 + hover 플라이아웃(fade) ── */
html.nav-collapsed .sidebar { width: var(--sidebar-rail); flex-basis: var(--sidebar-rail); position: relative; z-index: 66; } /* 레일·플라이아웃은 스크림(65) 위 */
html.nav-collapsed .side-top { justify-content: center; padding: 0; }
html.nav-collapsed .side-top .brand { display: none; }
html.nav-collapsed .side-nav { overflow: visible; }   /* 플라이아웃이 잘리지 않게(레일은 스크롤 불필요) */
html.nav-collapsed .nav-grp { margin: 8px 8px 0; }
html.nav-collapsed .nav-grp-head { justify-content: center; padding: 10px 0; border-bottom: 0; background: #fff; border-radius: 8px; }
html.nav-collapsed .nav-grp-head .txt { display: none; }
html.nav-collapsed .nav-grp.on { border-color: var(--accent); }
html.nav-collapsed .nav-grp.on .nav-grp-head { background: var(--accent-subtle); }
html.nav-collapsed .nav-items {
    display: block;
    position: absolute; left: calc(100% + 6px); top: 0; min-width: 190px; z-index: 70;
    background: #fff; border: 1px solid var(--gray-2); border-radius: 10px;
    box-shadow: 0 10px 30px rgba(31, 35, 40, .14); padding: 6px;
    max-height: calc(100vh - 120px); overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateX(-6px);
    /* 닫힘: fade만 — transform은 사라진 뒤 원위치로 복귀 */
    transition: opacity .1s ease-in, visibility .1s, transform 0s linear .1s;
}
html.nav-collapsed .nav-grp.open .nav-items {
    opacity: 1; visibility: visible; transform: none;
    /* 열림: 레일에서 미끄러져 나오는 슬라이드+fade */
    transition: opacity .14s ease-out, transform .14s ease-out;
}
/* 플라이아웃이 열린 아이콘은 accent로 연결 표시 */
html.nav-collapsed .nav-grp.open { border-color: var(--accent); }
html.nav-collapsed .nav-grp.open .nav-grp-head { background: var(--accent-subtle); }
html.nav-collapsed .nav-grp.open .nav-grp-head svg { color: var(--accent); }
/* 마우스/터치 클릭 후 검은 포커스 링 잔류 방지(키보드 포커스는 유지) */
.nav-grp-head:focus:not(:focus-visible) { outline: none; }
/* 플라이아웃 열림 동안 배경 스크림(전경 우선) — 클릭은 닫기만 흡수(밑의 링크 오클릭 방지) */
#nav-scrim {
    position: fixed; inset: 0; z-index: 65;
    background: rgba(31, 35, 40, .15);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .14s ease, visibility .14s;
}
#nav-scrim.show { opacity: 1; visibility: visible; pointer-events: auto; }
html.nav-collapsed .nav-items .fly-title {
    display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em;
    color: var(--gray-5); padding: 4px 10px 6px;
    border-bottom: 1px solid var(--gray-1); margin-bottom: 4px;
}
@media (prefers-reduced-motion: reduce) {
    html.nav-collapsed .nav-items, html.nav-collapsed .nav-grp.open .nav-items, #nav-scrim, .sidebar { transition: none; }
}

/* 사이드바 바닥: 도움말(한눈에 보기) 링크 + 배포 버전(접힘 레일에서는 숨김) */
.side-help {
    margin-top: auto; flex: 0 0 auto; display: block;
    padding: 6px 14px 0; font-size: 12px; color: var(--gray-5);
    text-decoration: none; white-space: nowrap;
}
.side-help:hover { color: var(--accent); text-decoration: underline; }
html.nav-collapsed .side-help { display: none; }
.side-version {
    flex: 0 0 auto;
    padding: 4px 14px 10px; font-size: 11px; color: var(--gray-5);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.nav-collapsed .side-version { display: none; }