/*
 * MediFlow 전용 규칙. app.css → overrides.css 뒤에 실린다.
 * overrides.css 는 이전 제품에서 가져온 화면 규약이라 그대로 두고,
 * MediFlow 에만 필요한 것만 여기에 둔다.
 */


/* ==========================================================================
 * 병원 색 — 케이병원 홈페이지(khospital.kr)의 파랑 · 남색
 *
 * overrides.css 는 이전 제품의 라임 · 잉크 색으로 짜여 있다. 그 파일은 그대로 두고
 * 같은 선택자로 **값만** 여기서 다시 정한다(뒤에 실리는 파일이 이긴다).
 *
 *   #0089cd  홈페이지 메인 블루. 흰 글자를 얹으면 3.9:1 이라 모자라서,
 *            버튼 면에는 한 단계 진한 #0079b8(4.7:1)을 쓴다.
 *   #004b93  글자로 쓰는 브랜드 색 — 링크 · text-primary · 포커스 선. 흰 바탕 8.7:1.
 *   #1a2f5b  홈페이지 타이틀 남색 — 사이드바 바탕.
 *   바탕 · 선  홈페이지의 푸른 회색(#f8f9fb · #eef2f6 · #e1e7ed).
 * ========================================================================== */
:root {
    /* 상단바 높이 — 템플릿 기본 65px 은 메뉴 글자와 바닥의 파란 줄 사이가 떠 보여서 줄였다. */
    --theme-topbar-height: 58px;

    --hospital-blue: #0089cd;
    --hospital-navy: #004b93;
    --hospital-deep: #1a2f5b;

    --sf-page: #f4f7fa;
    --sf-raised: #eef2f6;
    --sf-hover: #e6edf4;
    --sf-inset: #f8f9fb;
    --ln: #e1e7ed;
    --ln-soft: #eef2f6;
    --tx: #1e2530;
    --tx-strong: #111827;
    --tx-muted: #5b6b80;       /* 표 머리(#eef2f6) 위 4.8:1 */
    --tx-faint: #9aa7b8;
    --scrim: rgba(10, 40, 90, 0.45);

    --brand-ink: #ffffff;             /* 파란 면 위에 얹는 글자 */
    --brand-accent: #0079b8;
    --brand-accent-press: #00679d;
    --brand-emph: #004b93;
    --brand-emph-strong: #1a2f5b;

    --theme-body-bg-rgb: 244, 247, 250;
    --theme-body-color-rgb: 30, 37, 48;
    --theme-secondary-color-rgb: 91, 107, 128;
    --theme-light-rgb: 238, 242, 246;
    --theme-secondary-bg-subtle: rgba(91, 107, 128, 0.12);

    --theme-primary-rgb: 0, 75, 147;
    --theme-primary-bg-subtle: rgba(0, 137, 205, 0.1);
    --theme-primary-border-subtle: rgba(0, 75, 147, 0.3);
    --theme-link-color-rgb: 0, 75, 147;
    --theme-link-hover-color-rgb: 26, 47, 91;
    --theme-focus-ring-color: rgba(0, 137, 205, 0.25);

    --st-primary-row: #e5f3fa;
    --st-primary-row-hover: #d6ecf7;
}
[data-bs-theme="dark"] {
    --brand-ink: #ffffff;
    --brand-accent: #0079b8;
    --brand-accent-press: #0089cd;
    --brand-emph: #5cc3f2;
    --brand-emph-strong: #8ad5f7;
    --theme-primary-rgb: 92, 195, 242;
    --theme-primary-bg-subtle: rgba(0, 137, 205, 0.18);
    --theme-primary-border-subtle: rgba(92, 195, 242, 0.35);
    --theme-link-color-rgb: 92, 195, 242;
    --theme-link-hover-color-rgb: 138, 213, 247;
    --theme-focus-ring-color: rgba(92, 195, 242, 0.3);
    --st-primary-row: #13314a;
    --st-primary-row-hover: #1a3d5a;
}

/* 잉크(짙은 색)로 칠하던 '고른 상태' — 잉크가 흰색이 됐으므로 남색으로 옮긴다. */
.btn-primary {
    --theme-btn-focus-shadow-rgb: 0, 121, 184;
}
.btn-outline-primary {
    --theme-btn-focus-shadow-rgb: 0, 121, 184;
}
.page-item.active .page-link,
.form-check-input:checked {
    background-color: var(--hospital-navy);
    border-color: var(--hospital-navy);
    color: #fff;
}
.form-check-input:focus {
    border-color: var(--hospital-navy);
    box-shadow: 0 0 0 3px rgba(0, 75, 147, 0.15);
}
[data-bs-theme="dark"] .page-item.active .page-link,
[data-bs-theme="dark"] .form-check-input:checked {
    background-color: var(--brand-accent);
    border-color: var(--brand-accent);
    color: #fff;
}
.progress-bar,
.chart-bar.is-in,
.chart-key.is-in {
    background: var(--hospital-blue);
}
.table {
    --theme-table-hover-bg: rgba(0, 137, 205, 0.06);
}
.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: rgba(0, 137, 205, 0.07);
}

/*
 * 사이드바 — 홈페이지 타이틀의 남색 바탕.
 * 고른 메뉴 하나만 파란 면(#0079b8, 흰 글자 4.7:1)이다.
 */
html[data-menu-color="dark"],
html[data-skin][data-bs-theme="dark"][data-menu-color="dark"],
html[data-bs-theme="dark"][data-menu-color="dark"] {
    --theme-sidenav-bg: var(--hospital-deep);
    --theme-sidenav-border-color: #22396b;
    --theme-sidenav-item-color: #c5d3e6;          /* 남색 위 8.6:1 */
    --theme-sidenav-item-hover-color: #ffffff;
    --theme-sidenav-item-hover-bg: rgba(255, 255, 255, 0.08);
    --theme-sidenav-item-active-color: #ffffff;
    --theme-sidenav-item-active-bg: #0079b8;
}
html[data-menu-color="dark"] .side-nav-title {
    color: #8fa6c6;
}
html[data-menu-color="dark"] .side-nav-item.active > a {
    font-weight: 700;
}
html[data-menu-color="dark"] .sidenav-menu .logo .mf-brand-name {
    color: #ffffff;
}
html[data-menu-color="dark"] .sidenav-menu .mf-brand-mark {
    background: var(--hospital-blue);
}

/* 로그인 화면 */
.auth-box {
    --auth-ink: #004b93;
    --auth-accent: #0079b8;
    --auth-accent-press: #00679d;
}
.auth-box .btn-primary {
    color: #fff;
}
.auth-box .mf-brand-name {
    color: var(--hospital-deep);
}
[data-bs-theme="dark"] .auth-box .mf-brand-name {
    color: #ffffff;
}

/*
 * 상단바 오른쪽 줄 맞춤.
 * 알림 버튼(.topbar-link)은 띠 높이를 채우고 가운데 정렬되지만, 사용자 메뉴를 감싼
 * .dropdown 은 높이만 100% 이고 정렬이 없어 이름이 위로 붙었다.
 */
.topbar-menu .topbar-item .dropdown {
    display: flex;
    align-items: center;
}

/*
 * 왼쪽 메뉴 없는 화면(x-layouts.app :sidebar="false", 대시보드).
 * 상단바 · 본문을 왼쪽 끝까지 당기고, 로고는 상단바에 세우고, 햄버그 버튼은 뺀다.
 */
.wrapper.is-no-sidenav .app-topbar,
.wrapper.is-no-sidenav .content-page {
    margin-inline-start: 0 !important;
}
.wrapper.is-no-sidenav .logo-topbar {
    display: block;
    padding-inline-start: 0;
}
.wrapper.is-no-sidenav .sidenav-toggle-button {
    display: none !important;
}

/* 브랜드 — 이미지 로고가 생기기 전까지 쓰는 글자 로고 */
.mf-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: inherit;
}
.mf-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--hospital-blue);
    color: #fff;
    flex-shrink: 0;
}
.mf-brand-mark svg {
    width: 18px;
    height: 18px;
}
.mf-brand-name {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
}
.sidenav-menu .logo .mf-brand-name {
    color: var(--theme-sidenav-item-active-color, currentColor);
}
.mf-brand-lg .mf-brand-mark {
    width: 48px;
    height: 48px;
    border-radius: 14px;
}
.mf-brand-lg .mf-brand-mark svg {
    width: 26px;
    height: 26px;
}
.mf-brand-lg .mf-brand-name {
    font-size: 1.875rem;
}

/* 아이콘 크기 */
.icon-sm {
    width: 16px;
    height: 16px;
}

/* 아직 만들지 않은 메뉴 — 자리는 보이되 눌리지 않는다 */
.side-nav-link.is-pending {
    cursor: default;
    opacity: 0.5;
}
.side-nav-link .menu-pending {
    margin-left: auto;
    font-size: 0.6875rem;
    padding: 0.05rem 0.4rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    white-space: nowrap;
}
html[data-sidenav-size="condensed"] .side-nav-link .menu-pending {
    display: none;
}

/* 알림 */
.notification-menu {
    min-width: 20rem;
}
.notification-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: transparent;
}
.notification-dot.is-unread {
    background: var(--theme-danger);
}

/* 조직도 부서 목록 */
.org-tree .list-group-item.active .badge-count {
    background: rgba(255, 255, 255, 0.2);
    color: inherit;
}

/* 전자결재 — 양식 고르기 */
.approval-form-card {
    border: 1px solid var(--theme-border-color);
    transition: border-color 0.12s ease, background-color 0.12s ease;
}
.approval-form-card:hover,
.approval-form-card:focus-visible {
    border-color: var(--brand-accent, var(--theme-primary));
    background: var(--theme-primary-bg-subtle);
}

/* 전자결재 — 본문 입력칸과 보기 */
.approval-body {
    font-family: inherit;
    line-height: 1.7;
}
.approval-body-view {
    min-height: 12rem;
    line-height: 1.8;
    white-space: normal;
}

/* 전자결재 — 결재란(도장 칸). 종이 결재판과 같은 모양이다. */
.approval-stamps {
    border-collapse: collapse;
    text-align: center;
    font-size: 0.8125rem;
}
.approval-stamps th,
.approval-stamps td {
    border: 1px solid var(--theme-border-color);
    min-width: 4.75rem;
    padding: 0.25rem 0.375rem;
}
.approval-stamps th {
    background: var(--theme-tertiary-bg);
    font-weight: 500;
}
.approval-stamps td {
    height: 3.75rem;
    vertical-align: middle;
}
.approval-stamps .stamp-name {
    font-weight: 600;
}
.approval-stamps .stamp-date {
    color: var(--theme-secondary-color);
    font-size: 0.75rem;
    white-space: nowrap;
}
.approval-stamps td.is-approved .stamp-name {
    color: var(--theme-success);
}
.approval-stamps td.is-rejected .stamp-name {
    color: var(--theme-danger);
}
.approval-meta th {
    width: 7rem;
    background: var(--theme-tertiary-bg);
    font-weight: 500;
    white-space: nowrap;
}

@media print {
    .sidenav-menu, .app-topbar, .footer, .page-title-head .btn, .page-title-head form { display: none !important; }
    .content-page { margin: 0 !important; padding: 0 !important; }
    .approval-sheet { box-shadow: none !important; border: 0 !important; }
}

/*
 * 페이지 제목과 위 여백.
 * 템플릿의 `.page-title-head .page-main-title`(선택자 둘 + !important)이 overrides.css 의
 * `.page-main-title`(하나)보다 무거워 제목이 13px 로 돌아가 있었다. 같은 무게로 되돌린다.
 * overrides.css 가 제목 띠의 여백을 걷어내서 제목이 상단바에 붙었으므로 위 여백을 준다.
 */
.page-title-head .page-main-title {
    font-size: 1.375rem !important;
    text-transform: none;
}
.content-page > .container-fluid:first-child {
    padding-top: 1.5rem;
}

/* 가로로 밀리는 탭 줄 — 밀 수는 있되 막대는 감춘다. 탭이 잘려 보이는 것만으로 더 있다는 게 읽힌다. */
.scroll-quiet {
    scrollbar-width: none;
}
.scroll-quiet::-webkit-scrollbar {
    display: none;
}

/* 결재란 — 합의 · 후결 · 대결 · 전결 생략 */
.approval-stamps th.is-agreement,
.approval-stamps th.is-post {
    color: var(--brand-emph);
}
.approval-stamps td.is-bypassed .stamp-name {
    color: var(--theme-secondary-color);
    text-decoration: line-through;
}
.approval-stamps .stamp-delegate {
    font-size: 0.6875rem;
    color: var(--brand-emph);
    white-space: nowrap;
}
.approval-line-type {
    width: auto;
    flex-shrink: 0;
}

/*
 * 검색형 선택 상자(Choices)
 *
 * 1. 열린 목록이 아래 요소에 덮이던 것. Choices 는 목록에 z-index 1 을 주는데 부트스트랩의
 *    입력 묶음 버튼(.input-group .btn)은 2~3 이라, 결재선 아래 '즐겨찾기 저장' 버튼이 목록 위로 올라왔다.
 *    열려 있는 동안 상자 자체를 위로 올린다.
 * 2. 안내 문구가 잘리던 것. Choices(v11)는 입력칸에 min-width 를 '안내 문구 글자 수 + 1'ch 로
 *    **인라인** 지정하는데, ch 는 숫자 0 의 폭이라 한글(약 2ch)은 절반쯤에서 잘린다.
 *    인라인 값을 이기려면 !important 가 필요하다. 여러 개를 고르는 상자에서만 생긴다.
 */
.choices.is-open {
    z-index: 20;
}
.choices[data-type*="select-multiple"] .choices__input {
    min-width: 10rem !important;
}

/* 결재 의견 — 지우기(X)는 손을 올렸을 때만. 키보드로 닿으면 보인다. */
.approval-comment .approval-comment-delete {
    opacity: 0;
    transition: opacity 0.12s ease;
}
.approval-comment:hover .approval-comment-delete,
.approval-comment:focus-within .approval-comment-delete {
    opacity: 1;
}
@media (hover: none) {
    .approval-comment .approval-comment-delete {
        opacity: 1;   /* 터치 화면에는 hover 가 없다 */
    }
}

/* 오류 화면의 아이콘 */
.error-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--theme-primary-bg-subtle);
    color: var(--hospital-navy);
}
.error-mark svg {
    width: 28px;
    height: 28px;
}

/* ==========================================================================
 * 앱 메뉴 — 하이웍스식
 *
 * 상단바에 앱(전자결재 · 일정 · 물품관리 …)이 서고, 사이드바에는 고른 앱의 메뉴만 나온다.
 * 앱 줄은 남는 폭을 모두 쓰고, 넘치는 앱은 mediflow.js 가 '더보기' 안으로 옮긴다.
 * 좁은 화면(992px 미만)에서는 앱 줄을 감추고 ▦ 전체 앱 격자로만 이동한다.
 * ========================================================================== */
.app-nav {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    min-width: 0;
    height: var(--theme-topbar-height);
    margin: 0 0.75rem;
    gap: 0.125rem;
}
.app-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0 0.875rem;
    border: 0;
    border-bottom: 3px solid transparent;
    border-top: 3px solid transparent;
    background: none;
    color: var(--theme-body-color);
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.12s ease, border-color 0.12s ease;
}
.app-nav-link:hover,
.app-nav-link:focus-visible {
    color: var(--brand-emph);
}
/* 고른 앱 — 상단바 바닥의 파란 줄. 로고(.logo-topbar.is-active)도 같은 모양이다. */
.app-nav-link.active {
    color: var(--brand-emph);
    font-weight: 700;
    border-bottom-color: var(--hospital-blue);
}
.app-nav-more {
    display: flex;
}
.app-nav-more .dropdown-item.active {
    background: var(--theme-primary-bg-subtle);
    color: var(--brand-emph);
    font-weight: 600;
}
@media (max-width: 991.98px) {
    .app-nav {
        display: none;
    }
}

/* ▦ 전체 앱 격자 */
.app-grid-menu {
    width: 22rem;
    max-height: calc(100vh - var(--theme-topbar-height) - 1rem);
    overflow-y: auto;
    padding: 0.75rem;
}
.app-grid-group {
    padding: 0.25rem 0.25rem 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--theme-secondary-color);
}
.app-grid {
    display: grid;
    /* 한 줄 3칸 — 4칸이면 타일이 좁아 모서리의 준비중 꼬리표가 아이콘을 덮는다 */
    grid-template-columns: repeat(3, 1fr);
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}
.app-grid-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.625rem 0.25rem;
    border-radius: 0.5rem;
    color: var(--theme-body-color);
    font-size: 0.8125rem;
    text-align: center;
    text-decoration: none;
}
.app-grid-item svg {
    width: 1.375rem;
    height: 1.375rem;
    color: var(--brand-emph);
}
.app-grid-item:hover,
.app-grid-item.active {
    background: var(--theme-primary-bg-subtle);
    color: var(--theme-body-color);
}
.app-grid-item.is-pending {
    cursor: default;
}
/* 흐리게 하는 것은 아이콘과 이름만 — 준비중 꼬리표는 또렷해야 읽힌다 */
.app-grid-item.is-pending > :not(.app-grid-soon) {
    opacity: 0.45;
}
.app-grid-item.is-pending:hover {
    background: none;
}
/*
 * 준비중 표시는 모서리 꼬리표로 둔다. 타일 안에 한 줄로 넣으면 그 타일만 높아져,
 * 같은 줄의 쓸 수 있는 타일 아래가 비어 보였다. 모든 타일이 아이콘 + 이름 두 줄로 같다.
 */
.app-grid-soon {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    padding: 0 0.3rem;
    border-radius: 4px;
    background: var(--sf-raised);
    color: var(--theme-secondary-color);
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.5;
}
.app-grid-badge {
    position: absolute;
    top: 0.25rem;
    right: 0.5rem;
}

/* 사이드바 머리 — 지금 앱의 이름과 대표 동작 */
.sidenav-app {
    padding: 0.75rem 1rem 0.5rem;
}
.sidenav-app-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: var(--theme-sidenav-item-hover-color);
    font-size: 1.0625rem;
    font-weight: 700;
}
.sidenav-app-title svg {
    width: 1.25rem;
    height: 1.25rem;
}
.sidenav-app-action {
    display: flex;
    align-items: center;
    justify-content: center;
}
html[data-sidenav-size="condensed"] .sidenav-app {
    display: none;
}

/* ==========================================================================
 * 입고 등록 — AI 거래명세서 인식
 * ========================================================================== */
.ai-dropzone {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 11rem;
    border: 2px dashed var(--theme-border-color);
    border-radius: 0.75rem;
    background: var(--sf-inset, var(--theme-tertiary-bg));
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.12s ease, background-color 0.12s ease;
}
.ai-dropzone:hover,
.ai-dropzone:focus-visible,
.ai-dropzone.is-dragover {
    border-color: var(--hospital-blue);
    background: var(--theme-primary-bg-subtle);
    outline: none;
}
.ai-dropzone-empty {
    text-align: center;
    padding: 1rem;
}
.ai-dropzone-empty svg {
    width: 2rem;
    height: 2rem;
    color: var(--brand-emph);
}
.ai-preview {
    display: block;
    max-width: 100%;
    max-height: 22rem;
    object-fit: contain;
}
.ai-tips summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.8125rem;
}
.ai-tips ul {
    padding-left: 1.1rem;
    margin: 0.5rem 0;
    font-size: 0.8125rem;
}
.ai-tips > div {
    font-size: 0.8125rem;
}
@media (min-width: 1200px) {
    .ai-panel {
        position: sticky;
        top: calc(var(--theme-topbar-height) + 1rem);
    }
}

/* 입고 품목 표 */
.receipt-lines td {
    vertical-align: top;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.receipt-lines .form-control {
    min-width: 0;
}
.line-hint {
    min-height: 1rem;
    margin-top: 0.2rem;
    font-size: 0.75rem;
    line-height: 1.3;
}
.receipt-total th {
    font-variant-numeric: tabular-nums;
}

/* AI 설정 — 최근 6개월 비용 막대 */
.ai-month-bars {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    height: 5.5rem;
}
.ai-month-bar {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 1;
    height: 100%;
}
.ai-month-fill {
    background: var(--hospital-blue);
    border-radius: 4px 4px 0 0;
    min-height: 2px;
}
.ai-month-label {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    text-align: center;
    color: var(--theme-secondary-color);
}

/*
 * 좁은 화면 상단바 — 로고 마크와 메뉴(햄버거) 버튼을 같은 크기 · 같은 모서리로.
 * 템플릿의 .btn-icon 은 약 37.5px · 6px 모서리, 로고 마크는 30px · 8px 이라
 * 나란히 서면 크기와 각이 어긋나 보였다. 둘 다 36px · 8px 로 맞추고 세로 가운데에 둔다.
 */
.app-topbar .sidenav-toggle-button {
    width: 36px;
    height: 36px;
    border-radius: 8px;
}
.app-topbar .sidenav-toggle-button svg {
    width: 20px;
    height: 20px;
}
.logo-topbar {
    line-height: normal;
}
.logo-topbar a {
    line-height: 0;
}
/* 대시보드 — 앱 탭(.app-nav-link.active)과 같은 파란 밑줄을 로고 아래에 긋는다. */
.logo-topbar.is-active,
.wrapper.is-no-sidenav .logo-topbar.is-active {
    display: flex;
    align-items: center;
    height: var(--theme-topbar-height);
    border-top: 3px solid transparent;
    border-bottom: 3px solid var(--hospital-blue);
}
.logo-topbar .mf-brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 8px;
}
.logo-topbar .mf-brand-mark svg {
    width: 20px;
    height: 20px;
}

/*
 * ▦ 전체 앱 — 좁은 화면(992px 미만)에서는 화면 전체를 덮는 판(offcanvas)이다.
 * 상단바 밖에 둔다: 상단바 안의 드롭다운을 fixed 로 펼치면 상단바가 기준 상자가 되어
 * 화면 전체를 덮지 못했다. 넓은 화면에서는 지금처럼 작은 드롭다운(.app-grid-menu)이다.
 */
.app-grid-panel.offcanvas-bottom {
    height: 100dvh;
    max-height: none;
    background: var(--theme-body-bg);
}
.app-grid-panel .offcanvas-body {
    padding: 0 1rem calc(1rem + env(safe-area-inset-bottom));
}
.app-grid-panel .app-grid-group {
    padding: 1rem 0.25rem 0.5rem;
    font-size: 0.8125rem;
}
.app-grid-panel .app-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 0;
}
.app-grid-panel .app-grid-item {
    padding: 1rem 0.25rem;
    border: 1px solid var(--theme-border-color);
    border-radius: 0.75rem;
    background: var(--theme-secondary-bg);
    font-size: 0.875rem;
}
.app-grid-panel .app-grid-item svg {
    width: 1.75rem;
    height: 1.75rem;
}
.app-grid-panel .app-grid-item.active {
    border-color: var(--hospital-blue);
}

/* 화면을 덮는 판(전체 앱 · 내 정보)의 머리: 제목 왼쪽, 닫기 오른쪽 */
.app-grid-panel .offcanvas-header,
.user-panel .offcanvas-header,
.notification-panel .offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--theme-topbar-height);
    border-bottom: 1px solid var(--theme-border-color);
    background: var(--theme-secondary-bg);
}
.app-grid-panel .offcanvas-title,
.user-panel .offcanvas-title,
.notification-panel .offcanvas-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
}

/* ==========================================================================
 * 내 정보 판 — 상단바의 이름을 누르면 오른쪽에서 밀려 나온다.
 * 좁은 화면에서는 화면 전체, 넓은 화면에서는 360px.
 * ========================================================================== */
button.topbar-user {
    border: 0;
    background: none;
}
.user-panel {
    /* 좁은 화면에서만 열린다(넓은 화면은 드롭다운). 화면 전체를 덮는다. */
    --theme-offcanvas-width: 100vw;
    background: var(--theme-body-bg);
}
.user-panel-profile {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1.25rem 1rem;
    background: var(--theme-secondary-bg);
}
.user-panel-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--hospital-blue);
    color: #fff;
    font-size: 1.375rem;
    font-weight: 700;
}
.user-panel-name {
    font-size: 1.0625rem;
    font-weight: 700;
}
.min-w-0 {
    min-width: 0;
}
.user-panel-meta {
    padding: 0.625rem 1rem;
    border-top: 1px solid var(--theme-border-color);
    border-bottom: 1px solid var(--theme-border-color);
    background: var(--theme-secondary-bg);
    font-size: 0.8125rem;
    color: var(--theme-secondary-color);
}
.user-panel-links {
    margin-top: 0.75rem;
    border-top: 1px solid var(--theme-border-color);
    border-bottom: 1px solid var(--theme-border-color);
}
.user-panel-links .list-group-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--theme-secondary-bg);
}
.user-panel-links .list-group-item svg {
    color: var(--theme-secondary-color);
}
.user-panel-logout {
    padding: 1rem;
}

/* 화면을 덮는 판(전체 앱 · 내 정보)의 닫기 — 면·테두리 없이 X 만 */
.panel-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: -0.5rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--theme-body-color);
}
.panel-close svg {
    width: 22px;
    height: 22px;
}
.panel-close:focus-visible {
    outline: 2px solid var(--hospital-blue);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ==========================================================================
 * 알림 판 — 좁은 화면에서 종을 누르면 오른쪽에서 밀려 나와 화면을 덮는다.
 * 한 줄: 종류 아이콘 · 꼬리표와 시간 · 제목 · 내용 한 줄 · 안 읽음 점.
 * ========================================================================== */
.notification-panel {
    --theme-offcanvas-width: 100vw;
    background: var(--theme-body-bg);
}
.notification-panel .offcanvas-body {
    background: var(--theme-secondary-bg);
}
.notification-row {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 2rem 0.875rem 1rem;
    border-bottom: 1px solid var(--theme-border-color);
    color: var(--theme-body-color);
    text-decoration: none;
}
.notification-row:active,
.notification-row:hover {
    background: var(--theme-primary-bg-subtle);
    color: var(--theme-body-color);
}
.notification-row.is-unread {
    background: rgba(0, 137, 205, 0.05);
}
.notification-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
}
.notification-icon svg {
    width: 18px;
    height: 18px;
}
.notification-icon.tone-primary { background: var(--theme-primary-bg-subtle); color: var(--brand-emph); }
.notification-icon.tone-success { background: var(--st-success-row); color: var(--st-success); }
.notification-icon.tone-danger { background: var(--st-danger-row); color: var(--st-danger); }
.notification-icon.tone-warning { background: var(--st-warning-row); color: var(--st-warning); }
.notification-icon.tone-info { background: var(--st-info-row); color: var(--st-info); }
.notification-icon.tone-secondary { background: var(--sf-raised); color: var(--theme-secondary-color); }
.notification-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.notification-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.125rem;
}
.notification-tag {
    padding: 0 0.375rem;
    border-radius: 4px;
    background: var(--sf-raised);
    color: var(--theme-secondary-color);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.5;
}
.notification-tag.is-urgent {
    background: var(--st-danger-row);
    color: var(--st-danger);
}
.notification-time {
    margin-left: auto;
    color: var(--theme-secondary-color);
    font-size: 0.75rem;
    white-space: nowrap;
}
.notification-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notification-row.is-unread .notification-title {
    font-weight: 700;
}
.notification-body {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--theme-secondary-color);
    font-size: 0.8125rem;
}
.notification-unread-dot {
    position: absolute;
    top: 50%;
    right: 0.875rem;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    background: var(--hospital-blue);
}
.notification-empty {
    padding: 4rem 1rem;
    text-align: center;
}
.notification-empty svg {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--theme-secondary-color);
}
.notification-panel-foot {
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--theme-border-color);
    background: var(--theme-secondary-bg);
}

/*
 * 입고 품목 표의 숫자 칸 — 최소 폭을 못 박는다.
 * 폭(width)만 주면 좁은 화면에서 표가 화면에 맞춰 줄어 1,000,000 같은 금액이 잘렸다.
 * 최소 폭을 두면 줄어드는 대신 표가 가로로 밀린다(.table-responsive 안에서만 스크롤).
 * 금액 칸 7.5rem 은 10억(1,000,000,000)까지 들어가는 폭이다.
 */
.receipt-lines .col-qty {
    width: 6.5rem;
    min-width: 6.5rem;
}
.receipt-lines .col-money {
    width: 8rem;
    min-width: 8rem;
}
.receipt-lines [data-number] {
    min-width: 0;
    font-variant-numeric: tabular-nums;
}

/*
 * 주소록 즐겨찾기 별 — 꺼져 있으면 흐린 테두리, 켜면 노란 별.
 */
.contact-star {
    color: var(--bs-secondary-color);
    text-decoration: none;
}
.contact-star:hover {
    color: var(--bs-warning);
}
.contact-star.is-on {
    color: var(--bs-warning);
}
.contact-star.is-on svg {
    fill: currentColor;
}

/*
 * 연락처 입력 — 추가 창과 수정 화면이 같은 칸(contacts/partials/fields)을 쓴다.
 * 칸 사이를 좁게, 수정 화면도 너무 퍼지지 않게 창과 비슷한 폭으로 묶는다.
 */
.contact-quick-dialog {
    --bs-modal-width: 36rem;
}
.contact-detail-dialog {
    --bs-modal-width: 36rem;
}
/* 수정 폼이 창에 들어오면 form 이 머리 · 본문 · 발을 감싸므로, 스크롤 되는 창 배치가 깨지지 않게 form 상자를 없앤다. */
.contact-detail-dialog .modal-content > form {
    display: contents;
}

/* 상세 항목 — 라벨 | 값 두 줄 격자. 빈 칸은 뷰에서 빼므로 줄 수가 연락처마다 다르다. */
.contact-detail {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: .5rem 1rem;
}
.contact-detail dt {
    font-weight: 500;
    color: var(--bs-secondary-color);
}
.contact-detail dd {
    margin-bottom: 0;
    word-break: break-all;
}
.contact-form-card {
    max-width: 44rem;
}
.contact-fields .form-label {
    margin-bottom: .25rem;
    font-size: .8125rem;
}
.contact-more-toggle svg {
    transition: transform .15s ease;
}
.contact-more-toggle:not(.collapsed) svg {
    transform: rotate(180deg);
}

/*
 * 물품관리 추가 · 수정 창(layouts/partials/form-modal, assets/js/modal-form.js).
 * form 이 머리 · 본문 · 발을 감싸므로 스크롤 되는 창 배치가 깨지지 않게 form 상자를 없앤다.
 */
.form-modal-dialog {
    --bs-modal-width: 34rem;
}
.form-modal-dialog .modal-content > form {
    display: contents;
}
.form-modal-page .modal-dialog {
    margin-top: 0;
}
.compact-fields .form-label {
    margin-bottom: .25rem;
    font-size: .8125rem;
}

/* 재고현황 — 위쪽 상태 칸이 필터 탭을 겸한다. 고른 칸은 테두리 색으로. */
.stock-tile {
    border: 1px solid transparent;
    transition: border-color .15s ease;
}
.stock-tile:hover,
.stock-tile.is-active {
    border-color: var(--bs-primary);
}
.stock-tile.is-out .fs-3 {
    color: var(--bs-danger);
}
.stock-tile.is-low .fs-3 {
    color: var(--bs-warning);
}
.stock-search {
    width: 16rem;
    max-width: 100%;
}

/*
 * 할일 — 위 입력 줄에서 바로 추가, 한 줄에 체크 · 제목 · 마감 · 별.
 * 완료한 줄은 흐리게 긋는다. 마감이 지난 것은 빨강, 오늘은 파랑.
 */
.todo-card {
    max-width: 52rem;
}
.todo-add {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.todo-add-title {
    flex: 1 1 auto;
    min-width: 0;
}
.todo-add-date {
    flex: 0 0 9.5rem;
}
.todo-add .btn-check:checked + .todo-add-star {
    color: var(--bs-warning);
}
.todo-add .btn-check:checked + .todo-add-star svg {
    fill: currentColor;
}
.todo-row {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.todo-check {
    display: inline-flex;
    padding: 0;
    border: 0;
    background: none;
    color: var(--tx-faint);
}
.todo-check svg {
    width: 20px;
    height: 20px;
}
.todo-check:hover,
.todo-row.is-done .todo-check {
    color: var(--brand-accent);
}
.todo-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}
.todo-row.is-done .todo-title {
    color: var(--tx-muted);
    text-decoration: line-through;
}
.todo-due {
    flex-shrink: 0;
    font-size: .8125rem;
    color: var(--tx-muted);
    white-space: nowrap;
}
.todo-due.is-today {
    color: var(--brand-emph);
    font-weight: 600;
}
.todo-due.is-overdue {
    color: var(--bs-danger);
    font-weight: 600;
}
@media (max-width: 575.98px) {
    .todo-add {
        flex-wrap: wrap;
    }
    .todo-add-title {
        flex-basis: calc(100% - 1.5rem);
    }
    .todo-add-date {
        flex: 1 1 auto;
    }
}

/*
 * 게시판 — 목록은 표, 글은 읽기 좋은 폭(52rem)으로 묶는다.
 * 고정 글 줄은 옅은 파랑 바탕, 새 글(사흘 안)은 작은 N.
 */
.board-search {
    width: 16rem;
    max-width: 100%;
}
.board-table tr.is-pinned > td {
    background: var(--st-primary-row);
}
.board-title {
    font-weight: 500;
}
.board-new {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    margin-left: .25rem;
    border-radius: 50%;
    background: var(--bs-danger);
    color: #fff;
    font-size: .625rem;
    font-weight: 700;
    vertical-align: .1em;
}
.post-card {
    max-width: 52rem;
}
.board-post-prefix {
    color: var(--brand-emph);
    font-weight: 600;
}
.post-prefix-select {
    flex: 0 0 9rem;
}

/* 말머리 탭 — 목록 위에서 말머리로 거른다. */
.board-prefixes {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}
.board-prefix {
    padding: .25rem .75rem;
    border: 1px solid var(--ln);
    border-radius: 999px;
    color: var(--tx-muted);
    font-size: .8125rem;
    text-decoration: none;
}
.board-prefix:hover {
    border-color: var(--brand-accent);
    color: var(--brand-emph);
}
.board-prefix.active {
    border-color: var(--brand-accent);
    background: var(--theme-primary-bg-subtle);
    color: var(--brand-emph);
    font-weight: 600;
}

/* 게시판 만들기 · 설정 — 왼쪽 이름표 | 오른쪽 칸 두 줄 격자. */
.board-form {
    max-width: 52rem;
}
.board-form-grid {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    align-items: center;
    gap: .875rem 1rem;
}
.board-form-grid > .form-label {
    margin-bottom: 0;
}
.board-form .card-body.board-form-grid {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

/* 선택 막대 — 어느 칸이든 같은 폭, 칸은 똑같이 나눈다. 숫자 칸도 같은 폭. */
.board-segment,
.board-segment-input {
    width: 18rem;
    max-width: 100%;
}
.board-segment {
    display: inline-flex;
}
.board-segment > .btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    white-space: nowrap;
}
.board-segment .btn-check:disabled + .btn {
    opacity: .45;
}
/* 잠긴 막대(만든 뒤의 게시판 유형) — 고른 칸은 또렷하게, 안 고른 칸만 흐리게. */
.board-segment.is-locked .btn-check:checked:disabled + .btn {
    opacity: 1;
}
@media (max-width: 575.98px) {
    .board-form-grid {
        grid-template-columns: 1fr;
        gap: .375rem;
    }
    .board-form-grid > .form-label:not(:first-child) {
        margin-top: .5rem;
    }
    .board-segment,
    .board-segment-input {
        width: 100%;
    }
}
.post-title {
    margin: .25rem 0 .5rem;
    font-weight: 600;
    line-height: 1.4;
}
.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--ln);
    color: var(--tx-muted);
    font-size: .8125rem;
}
.post-body {
    min-height: 8rem;
    padding: 1.25rem 0;
    line-height: 1.8;
    overflow-wrap: anywhere;
}
.post-body-input {
    line-height: 1.7;
}
.post-attachments {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    padding: .75rem 1rem;
    border-radius: .5rem;
    background: var(--sf-inset);
}
.post-attachment {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    overflow-wrap: anywhere;
}
.post-comment {
    padding-top: .75rem;
    padding-bottom: .75rem;
}

/* 메모처럼 사람이 친 줄바꿈을 그대로 보여 줄 칸 */
.text-pre-line {
    white-space: pre-line;
}

/*
 * 일정 — 월간 달력.
 * 캘린더 색: 내 일정 = info, 부서 일정 = success, 전사 일정 = warning (ScheduleScope::colorClass).
 * 종일 · 여러 날 일정은 색 면(bar), 시간 일정은 점 + 시각으로 구분한다.
 */
.schedule-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    margin-right: 0.375rem;
    vertical-align: 0.1em;
    flex-shrink: 0;
    background: var(--sch-color);
}
.is-personal { --sch-color: var(--st-info-fill); --sch-fill: var(--st-info-row); --sch-text: var(--st-info); }
.is-department { --sch-color: var(--st-success-fill); --sch-fill: var(--st-success-row); --sch-text: var(--st-success); }
.is-company { --sch-color: var(--st-warning-fill); --sch-fill: var(--st-warning-row); --sch-text: var(--st-warning); }

.schedule-calendar-head,
.schedule-calendar-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
.schedule-calendar-head > div {
    padding: 0.5rem;
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--tx-muted);
    background: var(--sf-raised);
    border-bottom: 1px solid var(--ln);
}
.schedule-calendar-week + .schedule-calendar-week {
    border-top: 1px solid var(--ln);
}
.schedule-day {
    min-height: 7.5rem;
    padding: 0.25rem 0.25rem 0.375rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.schedule-day + .schedule-day {
    border-left: 1px solid var(--ln-soft);
}
.schedule-day.is-outside {
    background: var(--sf-inset);
}
.schedule-day.is-outside .schedule-day-number {
    color: var(--tx-faint);
}
.schedule-day-number {
    align-self: flex-start;
    min-width: 1.75rem;
    height: 1.75rem;
    line-height: 1.75rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--tx);
    text-decoration: none;
}
.schedule-day-number:hover {
    background: var(--sf-hover);
    color: var(--tx-strong);
}
.is-sunday .schedule-day-number,
.schedule-calendar-head .is-sunday {
    color: var(--st-danger);
}
.is-saturday .schedule-day-number,
.schedule-calendar-head .is-saturday {
    color: var(--st-info);
}
.schedule-day.is-today .schedule-day-number {
    background: var(--tx-strong);
    color: var(--sf-card);
}
.schedule-chip {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    padding: 1px 0.375rem;
    border-radius: 4px;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--tx);
    text-decoration: none;
    white-space: nowrap;
}
.schedule-chip::before {
    content: "";
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--sch-color);
}
.schedule-chip:hover {
    background: var(--sf-hover);
    color: var(--tx-strong);
}
.schedule-chip.is-bar {
    background: var(--sch-fill);
    color: var(--sch-text);
    font-weight: 600;
}
.schedule-chip.is-bar::before {
    display: none;
}
.schedule-chip-time {
    color: var(--tx-muted);
    font-variant-numeric: tabular-nums;
}
.schedule-chip-title {
    overflow: hidden;
    text-overflow: ellipsis;
}
.schedule-more {
    padding: 0 0.375rem;
    font-size: 0.75rem;
    color: var(--tx-muted);
}

/* 좁은 화면: 칸이 작아 시각은 숨기고 제목만 */
@media (max-width: 575.98px) {
    .schedule-day {
        min-height: 5rem;
        padding: 2px;
    }
    .schedule-chip {
        padding: 0 2px;
        font-size: 0.6875rem;
    }
    .schedule-chip-time,
    .schedule-chip::before {
        display: none;
    }
}

/*
 * 일정 등록 — 일시 칸. 날짜 · 시각은 내용 길이만큼만 차지하게 폭을 못 박는다
 * (전체 폭으로 늘리면 2026-09-18 한 줄에 칸이 한 뼘씩 남았다).
 */
.schedule-when {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.schedule-when-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.schedule-when-label {
    width: 2.25rem;
    flex-shrink: 0;
    margin: 0;
    color: var(--tx-muted);
    font-size: 0.875rem;
}
.schedule-date {
    width: 9.25rem;
    flex: 0 0 auto;
}
.schedule-time {
    width: 7.5rem;
    flex: 0 0 auto;
}
.schedule-when.is-all-day .schedule-time {
    display: none;
}

/* 한 줄(등록 화면): [시작 날짜][시각] ~ [종료 날짜][시각] 1시간 — 좁으면 두 줄로 */
.schedule-when.is-inline {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.625rem;
}
.schedule-when-sep {
    color: var(--tx-muted);
}
.schedule-when:not(.is-inline) .schedule-when-sep {
    display: none;
}
@media (min-width: 576px) {
    .schedule-when.is-inline .schedule-when-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}
@media (max-width: 575.98px) {
    .schedule-when.is-inline .schedule-when-row {
        flex: 1 1 100%;
    }
    .schedule-when.is-inline .schedule-when-sep {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .schedule-when-row {
        flex-wrap: wrap;
    }
    .schedule-date {
        width: calc(100% - 2.75rem - 7.5rem - 0.5rem);
        min-width: 8.5rem;
    }
    .schedule-time {
        width: 7.5rem;
    }
}

.schedule-duration {
    color: var(--tx-muted);
    font-size: 0.8125rem;
    white-space: nowrap;
}

/* 빠른 등록 창의 캘린더 고르기 — 설명은 아래 한 줄(data-scope-description)로 */
.schedule-scope-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.schedule-scope-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--ln);
    border-radius: 999px;
    font-size: 0.875rem;
    cursor: pointer;
    margin: 0;
}
.schedule-scope-pill:hover {
    background: var(--sf-hover);
}
.btn-check:checked + .schedule-scope-pill {
    border-color: var(--sch-color);
    background: var(--sch-fill);
    color: var(--sch-text);
    font-weight: 600;
}
.btn-check:focus-visible + .schedule-scope-pill {
    outline: 2px solid var(--sch-color);
    outline-offset: 2px;
}

/* 날짜 칸의 빈 곳을 누르면 빠른 등록 창이 뜬다 */
.schedule-day[data-quick-date] {
    cursor: pointer;
}
.schedule-day[data-quick-date]:hover {
    background: var(--sf-inset);
}
.schedule-day.is-outside[data-quick-date]:hover {
    background: var(--sf-hover);
}

/* 빠른 등록 창 — 넓게 두 칸(5:5): 왼쪽 제목 · 일시 · 캘린더 | 오른쪽 장소 · 내용. */
@media (min-width: 992px) {
    .schedule-quick-dialog {
        --bs-modal-width: 56rem;
    }
    .schedule-quick-side {
        border-left: 1px solid var(--ln-soft);
    }
    .schedule-quick-side textarea {
        min-height: 8rem;
        resize: none;
    }
}

/*
 * 긴급 — 전자결재 · 일정 공통. 빨간 '긴급' 꼬리표(.urgent-tag), 켜면 빨개지는 토글(.urgent-switch,
 * components/urgent-switch), 상세 화면 맨 위 띠(.urgent-banner).
 * 일정 달력에서는 캘린더 색(누가 보는가)과 따로 꼬리표가 붙고, 같은 날 칸에서 맨 위로 올라간다.
 */
.urgent-tag {
    display: inline-block;
    flex-shrink: 0;
    padding: 0 0.3rem;
    border-radius: 3px;
    background: var(--st-danger-fill);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.45;
    vertical-align: 0.1em;
}
.schedule-chip.is-urgent::before {
    display: none;
}
.schedule-chip.is-urgent .schedule-chip-title {
    font-weight: 600;
}
.schedule-chip.is-bar.is-urgent {
    box-shadow: inset 3px 0 0 var(--st-danger-fill);
}
.urgent-switch .form-check-input:checked {
    background-color: var(--st-danger-fill);
    border-color: var(--st-danger-fill);
}
.urgent-switch .form-check-input:checked + .form-check-label {
    color: var(--st-danger);
    font-weight: 600;
}
.urgent-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: var(--st-danger-row);
    color: var(--st-danger);
    font-weight: 600;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}