/* =============================================================================
   UMED — DocuForge Design System (공용 테마)
   -----------------------------------------------------------------------------
   원본은 docuforge-DESIGN.md 이고, src/Umed.Ipam/wwwroot/app.css 가 그것을 토큰화한 것이다.
   여기에는 그중 '앱에 무관한 부분' 만 옮겼다 — 토큰 · 전역 리셋 · 앱 셸 · 부트스트랩
   오버라이드 · Blazor 오류 UI · 반응형.
   IPAM 전용 화면(IP Visual Grid 등)은 그 앱에 남겨 두었다.

   앱에서 한 줄로 참조한다:
     <link rel="stylesheet" href="_content/Umed.Core/umed-theme.css" />

   ★ 앱 셸 클래스는 .ipam-* 에서 .umed-* 로 바꿨다. 세 앱이 같은 이름을 쓰기 위해서다.
   ★ docent / ipam 은 아직 각자의 app.css 를 쓴다. 두 앱이 이미 동작 중이라
     한꺼번에 갈아끼우면 회귀 위험이 크다 — Portal 이 안정된 뒤 별도로 옮긴다.
   ============================================================================= */

:root {
    /* ── Colors ── */
    --df-primary:        #2563EB;   /* 링크, 활성 내비, 주요 CTA */
    --df-primary-hover:  #1D4ED8;
    --df-primary-soft:   #EFF6FF;   /* 활성 배경, POST 배지 */
    --df-secondary:      #7C3AED;   /* 구문 강조, 버전 배지 */
    --df-tertiary:       #6B7280;   /* 본문 보조, 메타 정보 */
    --df-background:     #FAFAFA;   /* 페이지 배경 */
    --df-surface:        #FFFFFF;   /* 콘텐츠 영역, 카드, 패널 */

    --df-success:        #16A34A;
    --df-success-soft:   #F0FDF4;
    --df-warning:        #CA8A04;
    --df-warning-soft:   #FFF7ED;
    --df-error:          #DC2626;
    --df-error-hover:    #B91C1C;
    --df-error-soft:     #FEF2F2;

    /* 중립 (zinc 계열) */
    --df-text:           #18181B;
    --df-text-strong:    #27272A;
    --df-text-muted:     #52525B;
    --df-text-subtle:    #71717A;
    --df-text-disabled:  #A1A1AA;
    --df-border:         #E4E4E7;
    --df-border-hover:   #D4D4D8;
    --df-border-subtle:  #F4F4F5;
    --df-fill-subtle:    #F4F4F5;

    /* ── Typography ──
       Inter / Plus Jakarta Sans 는 한글 글리프가 없으므로 한글은 뒤의 폴백으로 렌더된다.
       (Pretendard 가 설치돼 있으면 그것, 아니면 Windows 기본 맑은 고딕) */
    --df-font-head: "Plus Jakarta Sans", "Pretendard", "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
    --df-font-body: "Inter", "Pretendard", "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
    --df-font-mono: "Fira Code", "Cascadia Mono", "D2Coding", ui-monospace, SFMono-Regular, Consolas, monospace;

    /* ── Spacing (base 8px) ── */
    --df-space-1:  4px;
    --df-space-2:  8px;
    --df-space-3:  16px;
    --df-space-4:  24px;
    --df-space-5:  32px;
    --df-space-6:  48px;
    --df-space-7:  64px;
    --df-space-8:  96px;

    --df-sidebar-w:   280px;
    --df-prose-max:   768px;

    /* ── Border Radius ── */
    --df-radius-sm:   4px;
    --df-radius-md:   8px;
    --df-radius-lg:   12px;
    --df-radius-xl:   16px;
    --df-radius-full: 9999px;

    /* ── Elevation ── */
    --df-shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.04);
    --df-shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.06);
    --df-shadow-large:  0 12px 32px rgba(0, 0, 0, 0.10);
    --df-shadow-code:   inset 0 0 0 1px var(--df-border);
    --df-overlay:       rgba(0, 0, 0, 0.35);
}

/* =============================================
   전역 리셋 / 기본 타이포
   ============================================= */

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: var(--df-font-body);
    font-size: 16px;
    line-height: 1.7;                 /* Do #9 — 넉넉한 행간 */
    color: var(--df-text-strong);
    background-color: var(--df-background);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .df-head {
    font-family: var(--df-font-head);
    color: var(--df-text);
    margin-top: 0;
}

h1 { font-size: 30px; font-weight: 700; line-height: 1.2; letter-spacing: 0.01em; }
h2 { font-size: 22px; font-weight: 600; line-height: 1.3; }
h3 { font-size: 18px; font-weight: 600; line-height: 1.4; }

.df-display  { font-family: var(--df-font-head); font-size: 40px; font-weight: 800; line-height: 1.15; letter-spacing: 0.02em; }
.df-body-lg  { font-size: 18px; line-height: 1.7; }
.df-body-sm  { font-size: 14px; line-height: 1.6; letter-spacing: 0.01em; }
.df-caption  { font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: 0.02em; }
.df-overline { font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; }

code, kbd, samp, pre, .df-code {
    font-family: var(--df-font-mono);
    font-size: 14px;                  /* Don't #8 — 코드는 14px 미만 금지 */
    line-height: 1.7;
}

/* 인라인 코드 */
code:not(pre code) {
    background: var(--df-fill-subtle);
    border-radius: var(--df-radius-sm);
    padding: 1px 5px;
    color: var(--df-secondary);       /* 보라 = 구문. 파랑은 내비게이션 전용 (Don't #4) */
}

/* 코드 블록 — 그림자 대신 inset 테두리 (Don't #6) */
pre {
    background: var(--df-surface);
    border-radius: var(--df-radius-lg);
    box-shadow: var(--df-shadow-code);
    padding: var(--df-space-3);
    overflow-x: auto;
}

a {
    color: var(--df-primary);
    text-decoration: none;
}
a:hover { color: var(--df-primary-hover); text-decoration: underline; }

hr { border: 0; border-top: 1px solid var(--df-border-subtle); margin: var(--df-space-4) 0; }

/* =============================================
   앱 셸 — 280px 고정 사이드바 + 콘텐츠 (Don't #5)
   ============================================= */

.umed-app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.umed-shell {
    display: flex;
    flex: 1;
    align-items: stretch;
    min-height: 0;
}

/* ── 사이드바 ── */
.umed-sidebar {
    width: var(--df-sidebar-w);
    flex: 0 0 var(--df-sidebar-w);
    background: var(--df-surface);
    border-right: 1px solid var(--df-border-subtle);
    padding: var(--df-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--df-space-4);
}

.umed-sidebar-section + .umed-sidebar-section {
    padding-top: var(--df-space-3);
    border-top: 1px solid var(--df-border-subtle);
}

.umed-sidebar-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--df-text-subtle);
    padding: 0 var(--df-space-2);
    margin-bottom: var(--df-space-2);
}

/* 내비 항목 — 40px 행, 활성 시 좌측 2px 파란 바 (Lists 스펙) */
.umed-nav-link {
    display: flex;
    align-items: center;
    gap: var(--df-space-2);
    height: 40px;
    padding: 0 var(--df-space-2);
    font-size: 14px;
    font-weight: 400;
    color: var(--df-text-muted);
    border-radius: var(--df-radius-md);
    border-left: 2px solid transparent;
    text-decoration: none;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.umed-nav-link:hover {
    background: var(--df-fill-subtle);
    color: var(--df-text-strong);
    text-decoration: none;
}

.umed-nav-link.active {
    background: var(--df-primary-soft);
    color: var(--df-primary);
    border-left-color: var(--df-primary);
    font-weight: 500;
}

/* 사이드바 검색 (Do #7) */
.umed-search {
    position: relative;
}

.umed-search input {
    width: 100%;
    height: 38px;
    padding: 10px 14px 10px 34px;
    font-family: var(--df-font-body);
    font-size: 14px;
    color: var(--df-text-strong);
    background: var(--df-fill-subtle);
    border: 1px solid transparent;
    border-radius: var(--df-radius-md);
    outline: none;
}

.umed-search input::placeholder { color: var(--df-text-disabled); }

.umed-search input:focus {
    background: var(--df-surface);
    border-color: var(--df-primary);
    box-shadow: 0 0 0 1px var(--df-primary);
}

.umed-search-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--df-text-disabled);
    font-size: 13px;
    pointer-events: none;
}

.umed-search-hint {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--df-font-mono);
    font-size: 11px;
    color: var(--df-text-disabled);
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-sm);
    padding: 0 4px;
    pointer-events: none;
}

/* ── 상단 바 ── */
.umed-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--df-space-4);
    height: 60px;
    padding: 0 var(--df-space-4);
    background: var(--df-surface);
    border-bottom: 1px solid var(--df-border-subtle);
}

.umed-navbar .brand {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.brand-text-container {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.brand-univ-title {
    font-family: var(--df-font-head);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--df-text-disabled);
    text-transform: uppercase;
}

.brand-system-name {
    font-family: var(--df-font-head);
    font-size: 16px;
    font-weight: 700;
    color: var(--df-text);
}

/* ── 콘텐츠 ── */
.umed-content {
    flex: 1;
    min-width: 0;
    padding: var(--df-space-5) var(--df-space-4) var(--df-space-6);
}

/* 산문형 화면은 768px 로 제한 (Do #2). 표·그리드는 전폭을 쓴다. */
.umed-prose { max-width: var(--df-prose-max); }

/* ── 푸터 ── */
.umed-footer {
    border-top: 1px solid var(--df-border-subtle);
    background: var(--df-surface);
    padding: var(--df-space-4);
}

.umed-footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--df-space-3);
    font-size: 12px;
    color: var(--df-text-subtle);
}

.umed-footer-brand { font-weight: 500; color: var(--df-text-muted); }

/* =============================================
   Bootstrap 오버라이드 — DocuForge 컴포넌트 스펙
   (마크업은 부트스트랩 클래스를 그대로 쓰고 겉모습만 교체한다)
   ============================================= */

/* ── Buttons ── */
.btn {
    font-family: var(--df-font-body);
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--df-radius-md);
    padding: 10px 20px;               /* Medium */
    line-height: 1.2;
    transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.btn:focus-visible { outline: 2px solid var(--df-primary); outline-offset: 2px; box-shadow: none; }
.btn:disabled, .btn.disabled { opacity: 0.4; cursor: not-allowed; }

.btn-sm { font-size: 13px; padding: 8px 14px; }
.btn-lg { font-size: 15px; padding: 14px 28px; }

.btn-primary {
    background-color: var(--df-primary);
    border-color: var(--df-primary);
    color: #FFFFFF;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--df-primary-hover) !important;
    border-color: var(--df-primary-hover) !important;
    color: #FFFFFF !important;
}

/* Secondary — 흰 배경 + 파란 테두리 */
.btn-outline-primary, .btn-secondary {
    background-color: var(--df-surface);
    border: 1px solid var(--df-primary);
    color: var(--df-primary);
}
.btn-outline-primary:hover, .btn-secondary:hover {
    background-color: var(--df-primary-soft) !important;
    border-color: var(--df-primary) !important;
    color: var(--df-primary) !important;
}

/* Ghost */
.btn-outline-secondary, .btn-light, .btn-ghost {
    background-color: transparent;
    border: 1px solid var(--df-border);
    color: var(--df-text-muted);
}
.btn-outline-secondary:hover, .btn-light:hover, .btn-ghost:hover {
    background-color: var(--df-fill-subtle) !important;
    border-color: var(--df-border-hover) !important;
    color: var(--df-text-strong) !important;
}

/* Destructive */
.btn-danger {
    background-color: var(--df-error);
    border-color: var(--df-error);
    color: #FFFFFF;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
    background-color: var(--df-error-hover) !important;
    border-color: var(--df-error-hover) !important;
    color: #FFFFFF !important;
}

.btn-outline-danger {
    background-color: var(--df-surface);
    border: 1px solid var(--df-error);
    color: var(--df-error);
}
.btn-outline-danger:hover {
    background-color: var(--df-error-soft) !important;
    border-color: var(--df-error) !important;
    color: var(--df-error) !important;
}

.btn-outline-warning {
    background-color: var(--df-surface);
    border: 1px solid var(--df-warning);
    color: var(--df-warning);
}
.btn-outline-warning:hover {
    background-color: var(--df-warning-soft) !important;
    border-color: var(--df-warning) !important;
    color: var(--df-warning) !important;
}

.btn-outline-info {
    background-color: var(--df-surface);
    border: 1px solid var(--df-border);
    color: var(--df-primary);
}
.btn-outline-info:hover {
    background-color: var(--df-primary-soft) !important;
    border-color: var(--df-primary) !important;
    color: var(--df-primary) !important;
}

/* 미니멀 링크형 버튼 (인증 화면에서 사용) */
.btn-minimal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--df-text-muted);
    background: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-md);
    padding: 10px 20px;
    text-decoration: none;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}
.btn-minimal:hover { background: var(--df-fill-subtle); border-color: var(--df-border-hover); color: var(--df-text-strong); text-decoration: none; }

.btn-minimal-primary { background: var(--df-primary); border-color: var(--df-primary); color: #FFFFFF; }
.btn-minimal-primary:hover { background: var(--df-primary-hover); border-color: var(--df-primary-hover); color: #FFFFFF; }

/* ── Cards ── */
.card {
    background-color: var(--df-surface);
    border: 1px solid var(--df-border-subtle);
    border-radius: var(--df-radius-md);
    box-shadow: var(--df-shadow-subtle);
    transition: box-shadow 0.15s ease;
}
.card:hover { box-shadow: var(--df-shadow-medium); }

.card-body { padding: var(--df-space-4); }

.card-header {
    background-color: var(--df-surface);
    border-bottom: 1px solid var(--df-border-subtle);
    font-family: var(--df-font-head);
    font-size: 15px;
    font-weight: 600;
    color: var(--df-text);
    padding: var(--df-space-3) var(--df-space-4);
}

.card-footer {
    background-color: var(--df-surface);
    border-top: 1px solid var(--df-border-subtle);
    padding: var(--df-space-3) var(--df-space-4);
}

/* ── Tables (Lists 스펙: 48px 행, 1px 구분선) ── */
.table {
    --bs-table-bg: var(--df-surface);
    color: var(--df-text-strong);
    font-size: 14px;
    margin-bottom: 0;
}

.table > thead > tr > th {
    font-family: var(--df-font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--df-text-subtle);
    background: var(--df-fill-subtle);
    border-bottom: 1px solid var(--df-border);
    padding: 10px var(--df-space-3);
    white-space: nowrap;
}

.table > tbody > tr > td {
    padding: var(--df-space-2) var(--df-space-3);
    height: 48px;
    vertical-align: middle;
    border-bottom: 1px solid var(--df-border-subtle);
    color: var(--df-text-strong);
}

.table > tbody > tr:hover > td { background: var(--df-fill-subtle); }
.table-sm > tbody > tr > td { height: 40px; padding: var(--df-space-1) var(--df-space-3); }

/* ── Inputs ── */
.form-control, .form-select {
    font-family: var(--df-font-body);
    font-size: 14px;
    color: var(--df-text-strong);
    background-color: var(--df-surface);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-md);
    padding: 10px 14px;
    box-shadow: none;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.form-control::placeholder { color: var(--df-text-disabled); }
.form-control:hover, .form-select:hover { border-color: var(--df-border-hover); }

.form-control:focus, .form-select:focus {
    border-color: var(--df-primary);
    box-shadow: 0 0 0 1px var(--df-primary);
    background-color: var(--df-surface);
    color: var(--df-text-strong);
}

.form-control:disabled, .form-select:disabled {
    background-color: var(--df-background);
    border-color: var(--df-border-subtle);
    color: var(--df-text-disabled);
}

.form-control.is-invalid, .is-invalid .form-control {
    border-color: var(--df-error);
    box-shadow: 0 0 0 1px var(--df-error);
}

.form-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--df-text-muted);
    margin-bottom: 6px;
}

.form-text { font-size: 12px; color: var(--df-text-subtle); }

/* ── Checkbox / Radio ── */
.form-check-input {
    width: 16px;
    height: 16px;
    margin-top: 0.25rem;
    border: 1.5px solid var(--df-border-hover);
    background-color: var(--df-surface);
}
.form-check-input[type=checkbox] { border-radius: var(--df-radius-sm); }
.form-check-input:checked { background-color: var(--df-primary); border-color: var(--df-primary); }
.form-check-input:focus { border-color: var(--df-primary); box-shadow: 0 0 0 2px var(--df-primary-soft); }
.form-check-input:disabled { background-color: var(--df-fill-subtle); border-color: var(--df-border); }
.form-check-label { font-size: 14px; color: var(--df-text-muted); margin-left: var(--df-space-1); }

/* ── Badges / Chips ── */
.badge {
    font-family: var(--df-font-body);
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--df-radius-sm);
    padding: 3px 8px;
    line-height: 1.4;
}

.badge.bg-primary   { background-color: var(--df-primary-soft) !important; color: var(--df-primary); }
.badge.bg-secondary { background-color: var(--df-fill-subtle) !important; color: var(--df-text-muted); }
.badge.bg-success   { background-color: var(--df-success-soft) !important; color: var(--df-success); }
.badge.bg-warning   { background-color: var(--df-warning-soft) !important; color: var(--df-warning) !important; }
.badge.bg-danger    { background-color: var(--df-error-soft) !important; color: var(--df-error); }
.badge.bg-info      { background-color: var(--df-primary-soft) !important; color: var(--df-primary); }
.badge.bg-dark      { background-color: var(--df-text) !important; color: #FFFFFF; }

/* HTTP 메서드 배지 — 모노 12px/500 (Do #3) */
.df-method {
    font-family: var(--df-font-mono);
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--df-radius-sm);
    padding: 2px 7px;
}
.df-method-get    { background: var(--df-success-soft); color: var(--df-success); }
.df-method-post   { background: var(--df-primary-soft); color: var(--df-primary); }
.df-method-put    { background: var(--df-warning-soft); color: var(--df-warning); }
.df-method-delete { background: var(--df-error-soft);   color: var(--df-error); }

/* ── Progress ── */
.progress {
    background-color: var(--df-fill-subtle);
    border-radius: var(--df-radius-full);
    overflow: hidden;
}
.progress-bar { background-color: var(--df-primary); }
.progress-bar.bg-info    { background-color: var(--df-primary) !important; }
.progress-bar.bg-warning { background-color: var(--df-warning) !important; }
.progress-bar.bg-danger  { background-color: var(--df-error) !important; }
.progress-bar.bg-success { background-color: var(--df-success) !important; }

/* ── Alerts / Callouts ── */
.alert {
    border-radius: var(--df-radius-lg);
    border: 1px solid transparent;
    font-size: 14px;
    padding: var(--df-space-3) var(--df-space-4);
}
.alert-danger  { background: var(--df-error-soft);   border-color: #FECACA; color: var(--df-error); }
.alert-warning { background: var(--df-warning-soft); border-color: #FED7AA; color: var(--df-warning); }
.alert-success { background: var(--df-success-soft); border-color: #BBF7D0; color: var(--df-success); }
.alert-info    { background: var(--df-primary-soft); border-color: #BFDBFE; color: var(--df-primary); }

/* ── Modal ── */
.modal-content {
    background-color: var(--df-surface);
    border: none;
    border-radius: var(--df-radius-lg);
    box-shadow: var(--df-shadow-large);
    color: var(--df-text-strong);
}
.modal-header, .modal-footer { border-color: var(--df-border-subtle); }
.modal-header .modal-title { font-family: var(--df-font-head); font-size: 18px; font-weight: 600; color: var(--df-text); }
.modal-body { padding: var(--df-space-4); }

/* ── Spinner ── */
.spinner-border { color: var(--df-primary); }

/* ── Tooltip (네이티브 title 대체용 유틸) ── */
.df-tooltip {
    background: var(--df-text);
    color: #FFFFFF;
    font-size: 12px;
    border-radius: 6px;
    padding: 4px 10px;
    max-width: 280px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* =============================================
   Blazor 오류 UI
   ============================================= */

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    background: var(--df-warning-soft);
    border-top: 1px solid #FED7AA;
    color: var(--df-warning);
    font-size: 14px;
    padding: var(--df-space-3) var(--df-space-4);
    box-shadow: var(--df-shadow-large);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    float: right;
    padding: 0 var(--df-space-2);
}

#blazor-error-ui .reload { color: var(--df-warning); text-decoration: underline; }

.blazor-error-boundary {
    background: var(--df-error-soft);
    color: var(--df-error);
    border-radius: var(--df-radius-md);
    padding: var(--df-space-3);
}

/* =============================================
   반응형 — 모바일에서는 사이드바를 상단으로 접는다
   (Don't #5 는 데스크톱 기준이므로 모바일 접기는 허용)
   ============================================= */

@media (max-width: 991.98px) {
    .umed-shell { flex-direction: column; }

    .umed-sidebar {
        width: 100%;
        flex: 0 0 auto;
        border-right: none;
        border-bottom: 1px solid var(--df-border-subtle);
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--df-space-2);
    }

    .umed-sidebar-section + .umed-sidebar-section { padding-top: 0; border-top: none; }
    .umed-sidebar-label { display: none; }
    .umed-nav-link { height: 34px; }
    .umed-content { padding: var(--df-space-4) var(--df-space-3); }
}

/* ── LNB 다단 메뉴 (Bootstrap collapse) ─────────────────────────────────────────
   2026-10-07: 좌측 메뉴가 2단계에서 멈춰 있던 것을 임의 깊이로 풀었다.
   접기는 Bootstrap 의 collapse 가 한다 — data-bs-toggle 이 document 위임이라
   SSR 로 그린 마크업에도 걸린다. 여기 CSS 는 '보이는 모양' 만 담당한다.
   들여쓰기는 UmedNavMenu 가 깊이별 padding-left 인라인 스타일로 준다 — 중첩 선택자로
   하면 깊이가 늘 때마다 선택자를 더 써야 하고, 빠뜨리면 그 깊이부터 들여쓰기가 멈춘다.
   ※ 같은 규칙이 접두사만 바꿔 umed-theme.css(Portal)와 Ipam 의 app.css 양쪽에 있다 —
     Ipam 은 umed-theme.css 를 로드하지 않는다. 한쪽만 고치면 그 앱만 모양이 어긋난다. */

.umed-nav-branch > .umed-nav-toggle {
    cursor: pointer;
}

/* 펼침 표시. .collapsed 는 Bootstrap 이 접힌 상태에 붙인다 — 그래서 JS 가 필요 없다.
   펼침은 아래(90도), 접힘은 오른쪽을 가리킨다. */
.umed-nav-caret {
    font-size: 15px;
    line-height: 1;
    transform: rotate(90deg);
    transition: transform 0.15s ease;
    opacity: 0.6;
}

.umed-nav-toggle.collapsed .umed-nav-caret {
    transform: rotate(0deg);
}

/* 펼쳐진 가지의 제목을 살짝 강조한다 — 지금 어느 가지에 있는지 보인다. */
.umed-nav-toggle:not(.collapsed) {
    color: var(--df-text-strong);
}