/* ============================================================
   PLART AI TOTAL SOLUTION — common.css
   Sky Blue (#87B8D9) + Coral (#FFA07A) + Peach Cream (#FFE5DB) + Pretendard
   ============================================================ */

:root {
    --c-main:        #87B8D9;
    --c-main-dark:   #6FA6CC;
    --c-main-soft:   #C9DEEC;
    --c-secondary:   #FFE5DB;
    --c-accent:      #FFA07A;
    --c-accent-dark: #FF8C5E;
    --c-bg:          #F8FBFD;
    --c-surface:     #FFFFFF;
    --c-text:        #2C3E50;
    --c-text-mute:   #6C7A8A;
    --c-text-soft:   #94A0AD;
    --c-border:      #E2E8EE;
    --c-border-soft: #EEF2F6;
    --c-danger:      #E24B4A;

    --grad-main:    linear-gradient(135deg, #87B8D9 0%, #A8CDE3 100%);
    --grad-accent:  linear-gradient(135deg, #FFA07A 0%, #FFC2A8 100%);
    --grad-bg:      linear-gradient(135deg, #F0F7FB 0%, #FFF1EA 100%);
    --grad-danger:  linear-gradient(135deg, #E24B4A 0%, #F0786A 100%);

    --shadow-sm:    0 1px 3px rgba(44, 62, 80, .06);
    --shadow-md:    0 4px 14px rgba(44, 62, 80, .08);
    --shadow-lg:    0 10px 30px rgba(44, 62, 80, .12);
    --shadow-glow-main: 0 8px 28px rgba(135, 184, 217, .35);
    --shadow-glow-acc:  0 8px 28px rgba(255, 160, 122, .35);

    --sidebar-w:     284px;
    --sidebar-w-min: 72px;
    --navbar-h:      60px;
    --radius-sm:     10px;
    --radius:        12px;
    --radius-lg:     16px;
    --radius-xl:     20px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ===== Sidebar ===== */
.vh-sidebar {
    position: fixed; top: 0; left: 0;
    width: var(--sidebar-w); height: 100vh;
    background: var(--c-surface);
    border-right: 1px solid var(--c-border-soft);
    display: flex; flex-direction: column;
    transition: width .25s ease;
    z-index: 30;
    box-shadow: var(--shadow-sm);
}
.vh-sidebar.is-collapsed { width: var(--sidebar-w-min); }

.vh-sidebar__brand {
    height: var(--navbar-h);
    display: flex; align-items: center; gap: 12px;
    padding: 0 18px;
    border-bottom: 1px solid var(--c-border-soft);
    font-weight: 700; font-size: 17px;
    color: var(--c-text);
    overflow: hidden; white-space: nowrap;
    letter-spacing: -.01em;
}
.vh-sidebar__logo {
    width: 36px; height: 36px; flex: 0 0 36px;
    background: var(--grad-main);
    color: #fff;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 17px;
    box-shadow: var(--shadow-glow-main);
}
.vh-sidebar.is-collapsed .vh-sidebar__name { display: none; }

.vh-sidebar__nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 12px;
}
.vh-sidebar__bottom {
    border-top: 1px solid var(--c-border-soft);
    padding: 10px 12px;
}

.vh-nav-item {
    display: flex; align-items: center; gap: 8px;      /* 아이콘↔메뉴명 간격 12→8 */
    padding: 5px 12px 5px 36px;                        /* 들여쓰기 36px · 상하 5px (전 단계 공통) */
    margin: 0 6px 4px;
    min-height: 30px; box-sizing: border-box;          /* 행 높이 통일 (§2-A) */
    color: var(--c-text-mute);          /* 3단계 = 진회색 (2단계 검정보다 한 단계 약하게) */
    font-size: 13.5px; font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius);
    white-space: nowrap; overflow: hidden;
    position: relative;
    transition: background .15s ease, color .15s ease;
}
.vh-nav-item::before {
    content: ""; position: absolute;
    left: 0; top: 8px; bottom: 8px; width: 3px;
    border-radius: 0 3px 3px 0;
    background: transparent;
    transition: background .15s ease;
}
.vh-nav-item:hover { background: #F2F7FB; color: var(--c-main-dark); }
.vh-nav-item.is-active {
    background: linear-gradient(90deg, rgba(135,184,217,.18) 0%, rgba(135,184,217,.06) 100%);
    color: var(--c-main-dark);
    font-weight: 700;
}
.vh-nav-item.is-active::before { background: var(--c-main); }

.vh-nav-icon {
    flex: 0 0 16.5px; width: 16.5px; height: 16.5px;   /* 기존 22px 의 75% */
    display: inline-flex; align-items: center; justify-content: center;
    color: currentColor;
}
.vh-nav-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vh-nav-item-caret {
    flex: 0 0 16px; width: 16px; height: 16px; margin-left: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--c-text-soft); border-radius: 4px;
    transition: transform .2s ease, background .12s ease;
}
.vh-nav-item-caret:hover { background: rgba(135,184,217,.2); color: var(--c-main); }
.vh-nav-item.is-collapsed .vh-nav-item-caret { transform: rotate(-90deg); }
.vh-sidebar.is-collapsed .vh-nav-item-caret { display: none; }
.vh-sidebar.is-collapsed .vh-nav-label { display: none; }
.vh-sidebar.is-collapsed .vh-nav-item { justify-content: center; padding: 10px 0; }
.vh-sidebar.is-collapsed .vh-nav-item::before { display: none; }

/* 하위 메뉴 (예: 코드 관리 ▸ 코드번호 설정 / 코드 연계 설명지)
 * 정렬 기준: 3단계보다 **정확히 한 칸(12px) 더** 들여쓴다. 아이콘 폭·간격은 3단계와 동일.
 *  - 3단계: padding-left 36px → icon(16.5px) → gap(8px) → label   (label X = 60.5)
 *  - 4단계: padding-left 48px → dot  (16.5px) → gap(8px) → label   (label X = 72.5)
 * 3단계 아이콘을 75%로 줄이면서 함께 맞춘 값이다 (2026-08-20). 한쪽만 바꾸면 두 단계의
 * 아이콘/점 X 가 겹쳐 계층이 안 보인다. */
.vh-nav-subgroup {
    /* 음수 마진(-2px)으로 3단계에 붙이던 것을 제거 — 2·3·4단계 간격을 하나로 통일했다 (§2-A) */
    margin: 0 0 4px 0;
}
.vh-nav-subitem {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 12px 5px 48px;  /* 3단계(36px)보다 한 칸(12px) 더 들여쓰기 · 텍스트 상하 여백 5px */
    margin: 0 6px 4px;
    line-height: 1.3;
    min-height: 30px; box-sizing: border-box;          /* 행 높이 통일 (§2-A) */
    color: var(--c-text-soft);          /* 4단계 = 연회색 (가장 약하게) */
    font-size: 12.5px; font-weight: 400;
    cursor: pointer;
    border-radius: var(--radius);
    white-space: nowrap; overflow: hidden;
    transition: background .12s ease, color .12s ease;
}
.vh-nav-subitem:hover { background: #F2F7FB; color: var(--c-main-dark); }
.vh-nav-subitem.is-active {
    background: rgba(135,184,217,.15);
    color: var(--c-main-dark); font-weight: 600;
}
/* dot wrapper — 부모의 vh-nav-icon 과 동일한 폭(22px)으로 점유해서 label X 정렬 일치 */
.vh-nav-subitem-dot {
    flex: 0 0 16.5px; width: 16.5px; height: 16.5px;   /* 3단계 아이콘과 동일 규격 */
    display: inline-flex; align-items: center; justify-content: center;
}
.vh-nav-subitem-dot::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: .55;
}
.vh-sidebar.is-collapsed .vh-nav-subgroup { display: none; }

/* 사이드바 섹션 — 미니멀 모던 (닷 + 라벨 + caret) */
.vh-nav-group {
    padding: 0;
}
.vh-nav-section {
    margin: 0 6px 4px;
    padding: 5px 12px 5px 16px;
    min-height: 30px; box-sizing: border-box;          /* 행 높이 통일 (§2-A) */
    display: flex; align-items: center; gap: 10px;
    border-radius: 8px;
    font-size: 14px; font-weight: 700;
    color: var(--c-text);               /* 2단계 = 검정 (3단계 진회색보다 강하게) */
    letter-spacing: .01em;
    white-space: nowrap;
    user-select: none;
    transition: background .15s ease, color .15s ease;
}
.vh-nav-dot {
    flex: 0 0 6px; width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--c-main);
    box-shadow: 0 0 0 3px rgba(135,184,217,.18);
    transition: transform .15s ease, background .15s ease;
}
.vh-nav-secic { flex: 0 0 16px; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; color: var(--c-main); }
.vh-nav-section--toggle:hover .vh-nav-secic { color: var(--c-main); }
/* 폴더 아이콘 — 접혀 있으면 닫힌 폴더(선만), 펼쳐지면 **색이 채워진** 열린 폴더.
 * 어느 2단계를 펼쳐 뒀는지 한눈에 보이게 하는 표시다 (2026-08-20).
 * CSS 의 fill 이 SVG 의 fill="none" 속성을 이긴다 — 마크업은 그대로 두고 여기서만 칠한다. */
.vh-nav-secic__open   { display: none; }
.vh-nav-secic__closed { display: block; }
.vh-nav-section:not(.is-collapsed) .vh-nav-secic__open   { display: block; }
.vh-nav-section:not(.is-collapsed) .vh-nav-secic__closed { display: none; }
/* 접힘 — 선만, 연하게 */
.vh-nav-section.is-collapsed .vh-nav-secic { color: var(--c-text-soft); }
/* 펼침 — 진한 메인색 + 옅게 채움 (토글이 아닌 섹션은 is-collapsed 가 안 붙어 항상 이 상태) */
.vh-nav-section:not(.is-collapsed) .vh-nav-secic { color: var(--c-main-dark); }
.vh-nav-section:not(.is-collapsed) .vh-nav-secic__open { fill: rgba(135, 184, 217, .40); }   /* --c-main 40% */

/* ─────────────────────────────────────────────────────────
 * 사이드바 계층 대비 (2026-08-20)
 *   1단계 .vh-nav-divider  14.5px / 800 / #25356e  (파란 박스)
 *   2단계 .vh-nav-section  14px   / 700 / 검정      + 폴더 아이콘(열림/닫힘)
 *   3단계 .vh-nav-item     13.5px / 600 / 진회색    + 기능 아이콘
 *   4단계 .vh-nav-subitem  12.5px / 400 / 연회색    + 점
 * 크기·굵기·색이 아래로 갈수록 함께 약해진다. 활성/hover 시에는 모두 메인색으로 올라온다.
 * ───────────────────────────────────────────────────────── */
.vh-nav-text { flex: 1 1 auto; }
.vh-nav-caret {
    flex: 0 0 14px; width: 14px; height: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--c-text-soft);
    opacity: .8;
    transition: transform .2s ease, color .15s ease, opacity .15s ease;
}
.vh-nav-section--toggle { cursor: pointer; }
.vh-nav-section--toggle:hover {
    background: rgba(135,184,217,.10);
    color: var(--c-text);
}
.vh-nav-section--toggle:hover .vh-nav-dot { transform: scale(1.25); }
.vh-nav-section--toggle:hover .vh-nav-caret { color: var(--c-main); opacity: 1; }
.vh-nav-section.is-collapsed .vh-nav-caret { transform: rotate(-90deg); }
.vh-nav-section.is-collapsed .vh-nav-dot {
    background: var(--c-text-soft);
    box-shadow: 0 0 0 3px rgba(108,122,138,.12);
}

/* 라벨 구분선 (--월별리포트--) */
/* L1 구분선 — sample 디자인(파란 박스 + 막대) */
.vh-nav-divider {
    display: flex; align-items: center; gap: 8px;
    margin: 10px 6px 4px;
    padding: 9px 8px;
    border-radius: 8px;
    background: #EAF0FB;
    color: #25356e;
    font-size: 14.5px; font-weight: 800;   /* 1단계 = 가장 크게 (계층 최상위) */
    white-space: nowrap;
    user-select: none;
}
.vh-nav-divider::before, .vh-nav-divider::after { display: none; }   /* 기존 라인 제거 */
.vh-nav-divider-bar { flex: 0 0 4px; width: 4px; height: 15px; border-radius: 3px; background: #3651b5; }
/* 경계 점선 (위=전체공개 / 아래=최고관리자) */
.vh-nav-hr { margin: 14px 10px 8px; border-top: 2px dashed var(--c-border); }
.vh-sidebar.is-collapsed .vh-nav-hr { display: none; }
/* 구역 구별칸 (────시니어────) — 클릭/토글 없음, 시각 구분 전용 */
.vh-nav-zone {
    display: flex; align-items: center; gap: 8px;
    margin: 16px 10px 6px;
    color: var(--c-text-soft, #8a94a6);
    font-size: 11.5px; font-weight: 800; letter-spacing: 2px;
    white-space: nowrap; user-select: none;
}
.vh-nav-zone::before, .vh-nav-zone::after { content: ''; flex: 1 1 auto; border-top: 1px dashed var(--c-border); }
.vh-sidebar.is-collapsed .vh-nav-zone { display: none; }

/* ── 시니어 전용 컬러 테마 (#231) — 눈 편한 저채도 보라 ──
   대상: 시니어 콘텐츠(senior) / 시니어 콘텐츠 제어시스템(seniorcontrol) / 인지콘텐츠(cognitive) 토글 + 시니어 구별칸 */
.vh-nav-divider[data-target="senior"],
.vh-nav-divider[data-target="cognitive"],
.vh-nav-divider[data-target="seniorcontrol"] {
    background: #F1EDF7;          /* 옅은 보라 — 기존 파랑(#EAF0FB)과 동일 명도대 */
    color: #4A3A6B;
}
.vh-nav-divider[data-target="senior"] .vh-nav-divider-bar,
.vh-nav-divider[data-target="cognitive"] .vh-nav-divider-bar,
.vh-nav-divider[data-target="seniorcontrol"] .vh-nav-divider-bar {
    background: #8B72C4;
}
.vh-nav-zone--senior { color: #8B72C4; }
.vh-nav-zone--senior::before, .vh-nav-zone--senior::after { border-top-color: #D3C7E8; }
/* 플라트 키즈 구별칸 (#579) — 시니어 구별칸과 같은 꼴, 색만 기존 파랑 계열 */
.vh-nav-zone--kids { color: #5B7BD5; }
.vh-nav-zone--kids::before, .vh-nav-zone--kids::after { border-top-color: #C9D6F2; }
/* 시니어 토글 내부(하위 메뉴 전체)도 동일 테마 — 섹션/메인 항목/하위 항목 (#233) */
.vh-nav-actbody[data-key="senior"] .vh-nav-section,
.vh-nav-actbody[data-key="cognitive"] .vh-nav-section,
.vh-nav-actbody[data-key="seniorcontrol"] .vh-nav-section {
    color: #4A3A6B;
}
/* 폴더 아이콘도 보라 테마로 — 펼침 표시는 본 규칙과 동일(선 진하게 + 옅게 채움) */
.vh-nav-actbody[data-key="senior"] .vh-nav-section:not(.is-collapsed) .vh-nav-secic,
.vh-nav-actbody[data-key="cognitive"] .vh-nav-section:not(.is-collapsed) .vh-nav-secic,
.vh-nav-actbody[data-key="seniorcontrol"] .vh-nav-section:not(.is-collapsed) .vh-nav-secic {
    color: #7B68A8;
}
.vh-nav-actbody[data-key="senior"] .vh-nav-section:not(.is-collapsed) .vh-nav-secic__open,
.vh-nav-actbody[data-key="cognitive"] .vh-nav-section:not(.is-collapsed) .vh-nav-secic__open,
.vh-nav-actbody[data-key="seniorcontrol"] .vh-nav-section:not(.is-collapsed) .vh-nav-secic__open {
    fill: rgba(139, 114, 196, .38);
}
.vh-nav-actbody[data-key="senior"] .vh-nav-item,
.vh-nav-actbody[data-key="cognitive"] .vh-nav-item,
.vh-nav-actbody[data-key="seniorcontrol"] .vh-nav-item {
    color: #574887;                     /* 3단계 — 섹션(#4A3A6B)보다 한 단계 연하게 */
}
.vh-nav-actbody[data-key="senior"] .vh-nav-subitem,
.vh-nav-actbody[data-key="cognitive"] .vh-nav-subitem,
.vh-nav-actbody[data-key="seniorcontrol"] .vh-nav-subitem {
    color: #8478A8;                     /* 4단계 — 가장 연하게 */
}
.vh-nav-actbody[data-key="senior"] .vh-nav-item:hover,
.vh-nav-actbody[data-key="cognitive"] .vh-nav-item:hover,
.vh-nav-actbody[data-key="seniorcontrol"] .vh-nav-item:hover,
.vh-nav-actbody[data-key="senior"] .vh-nav-subitem:hover,
.vh-nav-actbody[data-key="cognitive"] .vh-nav-subitem:hover,
.vh-nav-actbody[data-key="seniorcontrol"] .vh-nav-subitem:hover {
    color: #3B2E58; background: #F1EDF7;
}
.vh-nav-actbody[data-key="senior"] .vh-nav-subitem.is-active,
.vh-nav-actbody[data-key="cognitive"] .vh-nav-subitem.is-active,
.vh-nav-actbody[data-key="seniorcontrol"] .vh-nav-subitem.is-active {
    color: #342750; background: #E9E2F5; font-weight: 700;
}
/* 점 자체(::before 5px)만 보라 — 22px 컨테이너에 배경 X (#233 피드백: 점 배경 사각형 제거) */
.vh-nav-actbody[data-key="senior"] .vh-nav-subitem-dot::before,
.vh-nav-actbody[data-key="cognitive"] .vh-nav-subitem-dot::before,
.vh-nav-actbody[data-key="seniorcontrol"] .vh-nav-subitem-dot::before {
    background: #8B72C4;
}
/* 시니어 페이지 우측 본문 — 아주 연한 보라 배경 */
.vh-main--senior { background: #F8F6FC; }
/* 시니어 3단계(메인 항목) 글씨 크기 = 2단계(카테고리 13.5px)와 동일 (#235 — 기본 15px가 더 커 보임) */
.vh-nav-actbody[data-key="senior"] .vh-nav-item,
.vh-nav-actbody[data-key="cognitive"] .vh-nav-item,
.vh-nav-actbody[data-key="seniorcontrol"] .vh-nav-item {
    font-size: 13.5px;
}
/* 시니어 페이지 메인 컬러 변수 재정의 (#236) — 버튼/탭/포커스/활성 표시 등 var(--c-main*) 사용처 전부 보라로.
   우측 본문(.vh-main--senior) 범위 한정 — 활동/몬테 등 다른 페이지는 파랑 유지 */
.vh-main--senior {
    --c-main:        #9179C4;   /* 보라 (기존 파랑 #87B8D9 자리) */
    --c-main-dark:   #7259AC;
    --c-main-soft:   #DCD2EF;
}
.vh-nav-divider-label { flex: 1 1 auto; }
.vh-nav-divider--toggle { cursor: pointer; }
.vh-nav-divider-caret {
    flex: 0 0 12px; width: 12px; height: 12px; margin-left: auto;
    display: inline-flex; align-items: center; justify-content: center;
    color: #3651b5;
    transition: transform .2s ease;
}
.vh-nav-divider.is-collapsed .vh-nav-divider-caret { transform: rotate(-90deg); }
.vh-sidebar.is-collapsed .vh-nav-divider { display: none; }

/* 접힘 영역 */
.vh-nav-body { overflow: hidden; }

/* 사이드바 접힘 모드 */
.vh-sidebar.is-collapsed .vh-nav-section {
    margin: 10px 6px;
    padding: 6px 0;
    justify-content: center;
    font-size: 0;
}
.vh-sidebar.is-collapsed .vh-nav-text,
.vh-sidebar.is-collapsed .vh-nav-caret { display: none; }
.vh-sidebar.is-collapsed .vh-nav-dot { width: 8px; height: 8px; }

/* 메뉴 아이콘 — 모든 항목 공통 (좌측 정렬) */
.vh-nav-icon svg {
    color: var(--c-text-mute);
    transition: color .15s ease, transform .15s ease;
}
.vh-nav-item:hover .vh-nav-icon svg { color: var(--c-main); }
.vh-nav-item.is-active .vh-nav-icon svg { color: var(--c-main); }
.vh-sidebar.is-collapsed .vh-nav-icon { margin: 0; }

/* ===== Main + Navbar + Content ===== */
.vh-main {
    margin-left: var(--sidebar-w);
    min-height: 100vh;
    display: flex; flex-direction: column;
    transition: margin-left .25s ease;
}
.vh-sidebar.is-collapsed ~ .vh-main { margin-left: var(--sidebar-w-min); }

.vh-navbar {
    height: var(--navbar-h);
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border-soft);
    display: flex; align-items: center;
    padding: 0 24px; gap: 16px;
    position: sticky; top: 0; z-index: 20;
    box-shadow: var(--shadow-sm);
}
.vh-navbar__toggle {
    background: none; border: none; cursor: pointer;
    color: var(--c-text-mute);
    padding: 8px;
    border-radius: var(--radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s ease, color .15s ease;
}
.vh-navbar__toggle:hover { background: #F2F7FB; color: var(--c-main); }
.vh-navbar__title {
    flex: 1 1 auto;
    font-size: 17px; font-weight: 600;
    color: var(--c-text);
    letter-spacing: -.01em;
}
.vh-navbar__user {
    display: flex; align-items: center; gap: 10px;
    font-size: 14px; color: var(--c-text);
}
.vh-navbar__avatar {
    width: 32px; height: 32px;
    background: var(--grad-main);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px;
    box-shadow: var(--shadow-sm);
}
.vh-navbar__username { font-weight: 500; }

/* 페이지 헤더 — 작고 깔끔. 좌측 컬러바 + 아이콘 + 작은 타이틀 + 부제 */
.vh-page-hero {
    margin: 14px 24px 0 24px;
    padding: 11px 16px 11px 14px;
    background: var(--c-surface);
    border: 1px solid var(--c-border-soft);
    border-left: 3px solid var(--c-main);
    border-radius: 10px;
    display: flex; align-items: center; gap: 12px;
    box-shadow: 0 1px 2px rgba(44, 62, 80, .04);
}
.vh-page-hero__deco { display: none; }   /* 톤다운: 데코 제거 */
.vh-page-hero__icon {
    flex: 0 0 34px; width: 34px; height: 34px;
    background: linear-gradient(135deg, rgba(135,184,217,.18), rgba(135,184,217,.06));
    color: var(--c-main-dark);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
}
.vh-page-hero__icon svg { width: 18px; height: 18px; }
.vh-page-hero__text { flex: 1 1 auto; min-width: 0; }
.vh-page-hero__title {
    font-size: 15px; font-weight: 700;
    margin: 0; color: var(--c-text);
    letter-spacing: -.01em;
}
.vh-page-hero__desc {
    margin: 1px 0 0 0;
    font-size: 12px; color: var(--c-text-soft);
}
@media (max-width: 768px) {
    .vh-page-hero { margin: 10px 14px 0 14px; padding: 10px 14px; }
    .vh-page-hero__title { font-size: 14px; }
}

.vh-content { flex: 1 1 auto; padding: 14px 24px 28px 24px; }
.vh-content--full { padding: 0; }

.vh-footer {
    padding: 16px 24px;
    color: var(--c-text-soft); font-size: 12.5px;
    border-top: 1px solid var(--c-border-soft);
    background: var(--c-surface);
}

/* ===== Card / Page ===== */
.vh-page { max-width: 1200px; margin: 0 auto; }
.vh-card {
    background: var(--c-surface);
    border-radius: var(--radius-lg);
    padding: 28px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--c-border-soft);
}
.vh-card__title {
    margin: 0 0 8px;
    font-size: 22px; font-weight: 700;
    letter-spacing: -.01em;
}
.vh-card__desc  { margin: 0 0 8px; color: var(--c-text); line-height: 1.7; }

.vh-hero {
    background: var(--grad-bg);
    border-radius: var(--radius-xl);
    padding: 36px 32px;
    border: 1px solid var(--c-border-soft);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}
.vh-hero::after {
    content: ""; position: absolute; top: -40px; right: -40px;
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(255,160,122,.25) 0%, transparent 70%);
    pointer-events: none;
}
.vh-hero__title {
    margin: 0 0 8px;
    font-size: 26px; font-weight: 700;
    color: var(--c-text);
    letter-spacing: -.02em;
}
.vh-hero__sub {
    margin: 0 0 20px; font-size: 15px;
    color: var(--c-text-mute); line-height: 1.7;
}
.vh-hero__role {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px; font-weight: 500;
    background: var(--c-surface);
    box-shadow: var(--shadow-sm);
}

/* ===== Tag ===== */
.vh-tag {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 600;
    background: #EEF3F7; color: var(--c-text-mute);
    letter-spacing: .02em;
}
.vh-tag--super {
    background: var(--grad-accent); color: #fff;
    box-shadow: 0 2px 6px rgba(255,160,122,.4);
}
.vh-tag--admin {
    background: var(--grad-main); color: #fff;
    box-shadow: 0 2px 6px rgba(135,184,217,.4);
}
.vh-tag--content {
    background: #EDE6F7;
    color: #57427F;
}
.vh-tag--kids {
    background: #DCE8F9;
    color: #2F4FA8;
}

/* ===== Devmode Panel ===== */
.vh-devmode {
    position: fixed !important;
    top: 12px !important; left: 12px !important;
    bottom: auto !important;
    z-index: 100000;
    width: 240px;
    background: var(--c-surface);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(226,75,74,.22), 0 2px 6px rgba(0,0,0,.04);
    font-size: 13px;
    overflow: hidden;
    user-select: none;
    border: 1px solid rgba(226,75,74,.2);
}
/* 로그인 후: 사이드바 하단 안쪽으로 floating */
.vh-devmode.vh-devmode--bottom {
    top: auto !important;
    bottom: 76px !important;          /* 사이드바 footer(로그아웃) 영역 위 */
    left: 12px !important;
    width: calc(var(--sidebar-w) - 24px); /* 사이드바 폭에 맞춤 */
}
/* 사이드바 접힌 상태에서는 숨김 (펼치면 다시 표시) */
.vh-sidebar.is-collapsed ~ .vh-devmode.vh-devmode--bottom { display: none; }
.vh-devmode__head {
    background: var(--grad-danger);
    color: #fff;
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    font-weight: 700;
    letter-spacing: .06em;
    font-size: 12px;
    cursor: move; /* 드래그 핸들 */
    touch-action: none;
}
/* 드래그로 띄운 상태 — 위치는 JS 인라인(!important)로 지정, 사이드바 접힘에도 유지 */
.vh-devmode.vh-devmode--floating { width: 240px; }
.vh-devmode__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255,255,255,.35);
    animation: vh-blink 1.4s infinite;
}
@keyframes vh-blink {
    0%,100% { opacity: 1; transform: scale(1); }
    50%     { opacity: .5; transform: scale(.85); }
}
.vh-devmode__title { flex: 1 1 auto; }
.vh-devmode__min {
    background: rgba(255,255,255,.22); border: none;
    color: #fff; width: 22px; height: 22px;
    border-radius: 6px; cursor: pointer;
    font-size: 14px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s ease;
}
.vh-devmode__min:hover { background: rgba(255,255,255,.4); }

.vh-devmode.is-collapsed .vh-devmode__body { display: none; }

.vh-devmode__body {
    padding: 12px 14px 14px;
    color: var(--c-text);
}
.vh-devmode__cur {
    padding: 8px 10px;
    margin-bottom: 10px;
    border-radius: var(--radius-sm);
    background: #F8FBFD;
    font-size: 12.5px;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.vh-devmode__label {
    font-size: 10.5px; color: var(--c-text-soft);
    margin: 4px 0 6px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
}
.vh-devmode__pwwrap { margin-bottom: 10px; }
.vh-devmode__pw {
    width: 100%; height: 36px; padding: 0 12px;
    border: 1px solid var(--c-border); border-radius: var(--radius-sm);
    font-size: 13px; outline: none; box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.vh-devmode__pw:focus {
    border-color: var(--c-main);
    box-shadow: 0 0 0 3px rgba(135,184,217,.18);
}
.vh-devmode__btns {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.vh-devmode__btn {
    border: none; border-radius: var(--radius-sm);
    color: #fff; cursor: pointer;
    padding: 10px 6px;
    font-size: 12px; font-weight: 700;
    line-height: 1.3;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.vh-devmode__btn span { display: block; font-weight: 400; opacity: .9; font-size: 11px; margin-top: 2px; }
.vh-devmode__btn--super { background: var(--grad-accent); box-shadow: 0 4px 12px rgba(255,160,122,.35); }
.vh-devmode__btn--super:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255,160,122,.45); }
.vh-devmode__btn--admin { background: var(--grad-main); box-shadow: 0 4px 12px rgba(135,184,217,.35); }
.vh-devmode__btn--admin:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(135,184,217,.45); }
/* 콘텐츠생성 (CONTENT_ADMIN) — 시니어 보라 계열 (2026-07-27 #258) */
.vh-devmode__btn--content { background: linear-gradient(135deg, #9179C4, #7259AC); box-shadow: 0 4px 12px rgba(145,121,196,.35); }
.vh-devmode__btn--content:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(145,121,196,.45); }
.vh-devmode__btn--kids { background: linear-gradient(135deg, #6D8BE0, #4A68C4); box-shadow: 0 4px 12px rgba(91,123,213,.35); }
.vh-devmode__btn--kids:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(91,123,213,.45); }
.vh-devmode__btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.vh-devmode__logout {
    display: block; text-align: center;
    margin-top: 10px; padding: 6px;
    color: var(--c-text-mute); font-size: 12px;
    border-top: 1px dashed var(--c-border-soft);
    transition: color .15s ease;
}
.vh-devmode__logout:hover { color: var(--c-danger); }

/* ===== Company Info (로그인 화면 하단) — 한 줄 나열형, 자연 wrap ===== */
.vh-company {
    max-width: 1180px;
    margin: 0 auto;
    color: var(--c-text-soft);
    font-size: 12px;
    text-align: center;
    line-height: 1.7;
}
.vh-company__line {
    margin: 0 0 6px;
    word-break: keep-all;
}
.vh-company__line b {
    color: var(--c-text-mute);
    font-weight: 600;
}
.vh-company__sep {
    margin: 0 8px;
    color: #C5CDD4;
}
.vh-company__copy {
    margin: 0;
    font-size: 11px; font-weight: 600;
    color: var(--c-text-mute);
    letter-spacing: .04em;
}
.vh-company a { color: inherit; text-decoration: none; }
.vh-company a:hover { color: var(--c-main-dark); text-decoration: underline; }

@media (max-width: 768px) {
    .vh-company { font-size: 11.5px; }
    .vh-company__sep { margin: 0 5px; }
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .vh-sidebar { transform: translateX(-100%); transition: transform .25s ease; }
    .vh-sidebar.is-open { transform: translateX(0); box-shadow: 0 0 40px rgba(30, 40, 50, .28); }
    /* 모바일 서랍에선 아이콘만 남는 접힘 모드 무의미 — 항상 전체 폭 (common.js 가 열 때 is-collapsed 제거) */
    .vh-sidebar.is-collapsed { width: var(--sidebar-w); }
    .vh-main { margin-left: 0 !important; }
    .vh-content { padding: 18px 14px; }
    .vh-card, .vh-hero { padding: 22px; }
    .vh-company__sep { display: none; }
    .vh-company__line { display: block; }
}

/* ===== 모바일 공통 (2026-08-25) ===== */
/* 사이드바 서랍 뒤 배경 딤 — common.js 가 body 에 주입, 탭하면 서랍 닫힘 */
.vh-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(30, 40, 50, .45);
    z-index: 29;                        /* 사이드바(30) 바로 아래 */
}
.vh-backdrop.is-show { display: block; }

/* 표 가로 스크롤 래퍼 — 모바일에서 common.js 가 .vh-content 안 table 을 자동으로 감싼다 */
.vh-tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 768px) {
    /* 화면 이동 탭 — 줄바꿈 대신 가로 스크롤 */
    .vh-stabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .vh-stabs__tab { white-space: nowrap; flex: 0 0 auto; }
    /* 페이지 헤더/네비바 여백 축소 */
    .vh-navbar { padding: 0 14px; gap: 10px; }
    .vh-navbar__username { display: none; }   /* 아바타·역할 뱃지만 남김 */
}

/* ===== 화면 이동 탭 (vh-stabs) — 3단계 메뉴의 하위 화면 전환 =====
   링크형 밑줄 탭. 클릭 시 다른 URL 로 이동한다.
   페이지 안에서 내용만 바꾸는 전환은 아래 .vh-seg (세그먼트)를 쓸 것. */
.vh-stabs {
    display: flex; gap: 0;
    border-bottom: 1px solid var(--c-border);
    margin-bottom: 16px;
}
.vh-stabs__tab {
    padding: 10px 18px; text-decoration: none;
    font-size: 13.5px; font-weight: 600; color: var(--c-text-soft);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color .12s, border-color .12s;
}
.vh-stabs__tab:hover { color: var(--c-text); }
.vh-stabs__tab.is-active { color: var(--c-main-dark); border-bottom-color: var(--c-main); }

/* ===== 세그먼트 컨트롤 (vh-seg) — 같은 페이지 안에서 내용만 바꾸는 전환 =====
   화면 이동 탭(.vh-stabs)과 모양을 갈라 놓기 위한 알약형. 폼/카드 안쪽에 둔다. */
.vh-seg {
    display: inline-flex; gap: 4px; flex-wrap: wrap;
    padding: 4px; border-radius: 999px;
    background: var(--c-border-soft);
    margin-bottom: 16px;
}
.vh-seg__btn {
    padding: 7px 16px; border: 0; border-radius: 999px;
    background: none; cursor: pointer;
    font-size: 13px; font-weight: 700; color: var(--c-text-mute);
    transition: background .12s, color .12s, box-shadow .12s;
}
.vh-seg__btn:hover { color: var(--c-text); }
.vh-seg__btn.is-active {
    background: var(--c-surface); color: var(--c-main-dark);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
}

/* ===== 체크박스 — 체크 표시를 항상 흰색으로 (2026-08-24) =====
   accent-color 만 지정하면 브라우저가 배경 밝기를 보고 체크 색을 정한다.
   메인색(#87B8D9)이 밝아서 체크가 검게 그려지던 것을 직접 그리는 방식으로 바꿨다.
   특정 화면이 클래스 선택자로 따로 꾸민 체크박스(예: 토글 스위치)는 그쪽이 우선한다. */
input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    width: 16px; height: 16px;
    border: 1.5px solid var(--c-border); border-radius: 4px;
    background: var(--c-surface);
    display: inline-block; position: relative; vertical-align: middle;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
input[type="checkbox"]:hover:not(:disabled) { border-color: var(--c-main); }
input[type="checkbox"]:checked {
    background: var(--c-main); border-color: var(--c-main);
}
/* 가운데 기준으로 그린다 — 13.5px 처럼 크기를 줄여 쓰는 화면에서도 어긋나지 않게 */
input[type="checkbox"]:checked::after {
    content: ''; position: absolute;
    left: 50%; top: 47%;
    width: 4px; height: 8px;
    border: solid #fff; border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}
input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--c-main-dark); outline-offset: 1px; }

/* ============================================================
   날짜 고르기(달력) — 2026-08-27 신설
   브라우저 기본 `<input type="date">` 팝업은 **CSS 로 꾸밀 수 없다**(브라우저가 그린다).
   그래서 입력창은 텍스트로 두고 달력을 직접 그린다. `.vh-datefield` 를 단 입력창에만 붙는다(옵트인).
   팝업은 body 에 붙는다 — 카드의 overflow 에 잘리지 않게. 그래서 위치는 position:fixed 로 계산한다.
   ============================================================ */
/* 선택자에 `input` 을 붙여 (0,1,1) 로 올린다 — 화면들이 `.vh-xxx__input { background:#fff }` 처럼
   **한 클래스(0,1,0)** 로 배경·여백을 잡아 두는데, 그냥 `.vh-datefield` 로는 못 이겨
   달력 아이콘이 사라지고 글자가 아이콘 자리까지 밀고 들어온다(§8.2-1 과 같은 함정).
   `!important` 는 쓰지 않는다 — 다음 사람이 또 못 이긴다. */
input.vh-datefield {
    cursor: pointer;
    padding-right: 30px;                     /* 달력 아이콘 자리 */
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C7A8A' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E");
}
input.vh-datefield:focus { border-color: var(--c-main); box-shadow: 0 0 0 3px rgba(135, 184, 217, .18); }

.vh-dp {
    position: fixed; z-index: 1200;
    width: 268px; padding: 12px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(44, 62, 80, .16);
    user-select: none;
}
.vh-dp__head { display: flex; align-items: center; gap: 2px; margin-bottom: 6px; }
.vh-dp__title { flex: 1 1 auto; text-align: center; font-size: 13.5px; font-weight: 700; color: var(--c-text); }
.vh-dp__nav {
    flex: 0 0 26px; width: 26px; height: 26px;
    border: none; background: transparent; border-radius: 8px;
    color: var(--c-text-soft); font-size: 12px; line-height: 1; cursor: pointer;
}
.vh-dp__nav:hover { background: var(--c-border-soft); color: var(--c-text); }
.vh-dp__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.vh-dp__dow { text-align: center; font-size: 11px; font-weight: 700; color: var(--c-text-soft); padding: 5px 0 3px; }
.vh-dp__dow--sun { color: #E24B4A; }
.vh-dp__dow--sat { color: #3F76C4; }
.vh-dp__day {
    height: 32px; border: none; background: transparent; border-radius: 8px;
    font-size: 12.5px; color: var(--c-text); cursor: pointer;
    transition: background .12s, color .12s;
}
.vh-dp__day:hover { background: var(--c-main-soft); }
.vh-dp__day--sun { color: #E24B4A; }
.vh-dp__day--sat { color: #3F76C4; }
.vh-dp__day--out { opacity: .35; }                                        /* 앞뒤 달 — 누르면 그 달로 넘어간다 */
.vh-dp__day--today { box-shadow: inset 0 0 0 1.5px var(--c-main); font-weight: 700; }
.vh-dp__day--on, .vh-dp__day--on:hover { background: var(--c-main); color: #fff; font-weight: 700; }
.vh-dp__foot {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--c-border-soft);
}
.vh-dp__link {
    border: none; background: transparent; color: var(--c-text-mute);
    font-size: 12px; padding: 4px 8px; border-radius: 6px; cursor: pointer;
}
.vh-dp__link:hover { background: var(--c-border-soft); color: var(--c-text); }
.vh-dp__link--clear:hover { color: var(--c-danger); }

/* 모바일 — 손가락으로 짚을 수 있게 칸을 키운다 */
@media (max-width: 768px) {
    .vh-dp { width: min(300px, 92vw); padding: 14px; }
    .vh-dp__day { height: 38px; font-size: 13px; }
    .vh-dp__nav { flex-basis: 30px; width: 30px; height: 30px; }
}

/* ─── 표 정돈 (2026-09-03 #424 사용자 지시) — 모든 화면·모달의 표에 공통 ───
   · 머리글·칩·단추는 두 줄로 꺾이지 않는다(칸이 좁으면 표가 가로로 넓어진다 — 표는 overflow-x 상자 안에 있다)
   · 칸은 세로 가운데 정렬로 행 높이를 맞춘다
   · .vh-cats = 카테고리 한 줄에 하나 · .vh-clip2 = 긴 글은 두 줄까지(전문은 title 툴팁) */
[class*="__table"] th { white-space: nowrap; }
[class*="__table"] td { vertical-align: middle; }
[class*="__table"] td [class*="__badge"],
[class*="__table"] td [class*="__chip"],
[class*="__table"] td [class*="__tcnt"],
[class*="__table"] td [class*="__stage"],
[class*="__table"] td [class*="__sim"],
[class*="__table"] td [class*="__rec"],
[class*="__table"] td [class*="__tag"] { white-space: nowrap; display: inline-block; }
[class*="__table"] td [class*="__btn"] { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; }
[class*="__table"] td.center { white-space: nowrap; }
.vh-cats { white-space: nowrap; line-height: 1.7; }
.vh-cats > span { display: block; }
.vh-clip2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── 도구줄(툴바) 공통 규칙 — 2026-09-03 #457 사용자 디폴트 ─────────────────────────────
   탭·검색 입력·버튼·셀렉트가 한 줄에 놓이는 자리는 전부 **높이 32px · 세로 가운데 · 간격 6px** 로 맞춘다.
   화면마다 따로 맞추지 말고 도구줄 컨테이너에 .vh-tools 만 붙인다(안의 컨트롤은 어떤 클래스든 높이가 32px 로 맞춰진다). */
.vh-tools { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.vh-tools > input:not([type="checkbox"]):not([type="radio"]), .vh-tools > select, .vh-tools > button,
.vh-tools > div > button, .vh-tools > label > select { height:32px !important; font-size:12.5px; padding-top:0; padding-bottom:0; }
.vh-tools > button, .vh-tools > div > button { padding-left:13px; padding-right:13px; }
.vh-tools > input:not([type="checkbox"]):not([type="radio"]), .vh-tools > select { padding-left:10px; padding-right:10px; }
.vh-tools > div { display:flex; gap:6px; align-items:center; }
.vh-tools > .vh-tools__spacer { flex:1 1 auto; }