/*
 * 관리자 리디자인 (2026)
 *
 * 공통 기준은 저장소 루트의 design.md. 단말 앱의 디자인 시스템(flutter-app/docs/tasks/2026-10/01-redesign/redesign.md)을 의료진 admin 에 옮긴 스타일.
 * bootstrap.css / style.css 뒤에 불러와 덮어쓰며, 기능(id·폼 이름·스크립트 훅)은 건드리지 않는다.
 * 짝이 되는 스크립트는 redesign.js (모바일 서랍 메뉴, 표 가로 스크롤 래퍼).
 *
 * 규칙
 *  - 색·간격·반경·보더는 아래 토큰만 쓴다. 규칙 안에 새 숫자를 직접 적지 않는다.
 *  - 간격은 4px 단위 척도(--rd-space-*) 하나로 맞춘다. 카드 안쪽 20, 카드 사이 16, 섹션 사이 24 가 기본.
 *  - 구분은 1px 보더(--rd-border) 하나로 한다. 그림자는 카드에만, 가장 얕게(--rd-shadow).
 *
 * 구성: 1 토큰 · 2 바탕/글자 · 3 상단바 · 4 사이드바 · 5 본문 · 6 카드 · 7 버튼/입력 · 8 검색/툴바 ·
 *       (6 카드: 카드 사이 간격 --rd-gap-card · 묶음 사이 --rd-gap-section · 머리말 .rd-card-head/.rd-more)
 *       9 표 · 10 탭 · 11 쪽 번호 · 12 배지 · 13 대시보드 · 14 모달 · 15 로그인 · 16 반응형
 * 분기점: 1200(대시보드 한 단) · 992(사이드바가 서랍으로) · 768(상단 링크가 서랍으로, 검색 입력 한 줄씩) · 576
 */

/* ============ 1. 토큰 ============ */
:root {
    /* 색 — 강조색은 초록·주황 둘까지 */
    --rd-ground: #f4f2ed;
    --rd-surface: #ffffff;
    --rd-ink: #16211d;
    --rd-muted: #4a5651;
    --rd-line: #ddd8cf;
    --rd-teal: #0f6157;
    --rd-teal-deep: #0b4e46;
    --rd-teal-tint: #dceae5;
    --rd-clay: #b4542a;
    --rd-clay-deep: #97401c;
    --rd-clay-tint: #f6e4d8;
    --rd-hover: #faf8f4;
    --rd-neutral-tint: #ece9e2;
    --rd-scrim: rgba(22, 33, 29, 0.45);

    /* 간격 — 4px 척도 */
    --rd-space-1: 4px;
    --rd-space-2: 8px;
    --rd-space-3: 12px;
    --rd-space-4: 16px;
    --rd-space-5: 20px;
    --rd-space-6: 24px;
    --rd-space-7: 32px;
    --rd-space-8: 48px;
    --rd-gap-card: var(--rd-space-4);    /* 위아래로 이어지는 카드 사이 */
    --rd-gap-section: var(--rd-space-6); /* 카드 묶음(행) 사이 */

    /* 면 */
    --rd-border: 1px solid var(--rd-line);
    --rd-shadow: 0 2px 6px rgba(22, 33, 29, 0.04);
    --rd-shadow-drawer: 8px 0 24px rgba(22, 33, 29, 0.12);
    --rd-shadow-pop: 0 4px 12px rgba(22, 33, 29, 0.12);
    --rd-radius-card: 20px;
    --rd-radius-ctl: 14px;
    --rd-radius-sm: 12px;
    --rd-radius-pill: 99px;

    /* 크기 */
    --rd-control-h: 44px;
    --rd-control-h-sm: 36px;
    --rd-header-h: 64px;
    --rd-side-w: 232px;
    --rd-drawer-w: min(300px, 86vw);
    --rd-table-min-w: 960px;
    --rd-chart-h: 280px;
    --rd-donut-h: 176px;

    /* 글자 */
    --rd-font-display: "Gothic A1", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
    --rd-font-body: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
    --rd-text-sm: 14px;
    --rd-text-md: 15px;
    --rd-text-xl: 20px;

    --rd-ease: 0.25s ease;
}

/* ============ 2. 바탕·글자 ============ */
html body {
    min-width: 0; /* style.css 의 body{min-width:1324px} 는 데스크톱 전용 고정폭이라 반응형을 막는다 */
    overflow-x: hidden;
    background: var(--rd-ground);
    color: var(--rd-ink);
    font-family: var(--rd-font-body);
    font-size: var(--rd-text-md);
    line-height: 1.55;
}
h1, h2, h3, h4, h5, h6, .title, .table-title, .modal-title {
    font-family: var(--rd-font-display);
    color: var(--rd-ink);
    text-wrap: balance;
}
h2.title, .title { font-weight: 800; font-size: 28px; margin-bottom: var(--rd-space-5); }
.table-title { font-weight: 700; font-size: var(--rd-text-xl); margin-bottom: var(--rd-space-3); }
.text-secondary, .text-muted { color: var(--rd-muted) !important; }
.text-blue, .text-primary { color: var(--rd-teal) !important; }
.text-danger { color: var(--rd-clay-deep) !important; }
a { color: var(--rd-teal-deep); }
a:hover { color: var(--rd-teal); }
:focus-visible { outline: 3px solid var(--rd-clay); outline-offset: 2px; }
hr { border-color: var(--rd-line); }

/* ============ 3. 상단바 ============ */
#header {
    height: var(--rd-header-h);
    background: var(--rd-surface);
    border-bottom: var(--rd-border);
    box-shadow: none !important;
    z-index: 1040;
}
#header, #header a, #header b { color: var(--rd-ink); }
#header .fas { color: var(--rd-teal) !important; }
#header .logo span { font-family: var(--rd-font-display); font-weight: 700; color: var(--rd-teal); }
#header .right { gap: var(--rd-space-1); }
#header .right > a, #header .right > b { white-space: nowrap; }

.rd-burger {
    display: none;
    width: var(--rd-control-h);
    height: var(--rd-control-h);
    flex: none;
    margin-left: var(--rd-space-2);
    border: var(--rd-border);
    border-radius: var(--rd-radius-ctl);
    background: var(--rd-surface);
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.rd-burger i { font-size: 24px; color: var(--rd-ink); }

/* ============ 4. 사이드바 ============ */
aside#sidebar, aside {
    top: var(--rd-header-h);
    width: var(--rd-side-w);
    height: calc(100vh - var(--rd-header-h));
    background: var(--rd-surface);
    border-right: var(--rd-border);
    overflow: hidden auto;
    z-index: 1030;
}
.sidebar { padding: var(--rd-space-3) 0 var(--rd-space-6); }
.sidebar a { font-size: var(--rd-text-md); }

/* 1단·2단 메뉴 항목이 같은 모양을 쓴다. 2단은 왼쪽만 더 들여 쓴다 */
.sidebar .dep1 > li { border-bottom: 0; }
.sidebar .dep2 > li { border-top: 0; }
.sidebar .dep1 > li > a,
.sidebar .dep2 > li > a {
    display: flex;
    align-items: center;
    min-height: var(--rd-control-h);
    margin: var(--rd-space-1) var(--rd-space-3);
    padding: var(--rd-space-3);
    border-radius: var(--rd-radius-ctl);
    color: var(--rd-ink);
    font-weight: 500;
}
.sidebar .dep2 > li > a { margin-left: var(--rd-space-6); }
.sidebar .dep1 > li > a:hover,
.sidebar .dep2 > li > a:hover { background: var(--rd-ground); }
.sidebar .dep1 > li.active > a,
.sidebar .dep2 > li.active > a {
    background: var(--rd-teal-tint);
    color: var(--rd-teal-deep);
    font-weight: 700;
}
.sidebar .dep1 > li.has-treeview > a::before { right: var(--rd-space-5); }
/* 펼친 상위 메뉴는 글자만 강조하고, 현재 위치(하위 메뉴) 하나만 면으로 채운다 */
.sidebar .dep1 > li.has-treeview.active > a { background: transparent; }
/* style.css 는 활성 메뉴 화살표를 흰색 SVG(!important)로 바꾼다. 연한 초록 바탕에서는 보이지 않으므로 어두운 화살표로 되돌린다 */
.sidebar .dep1 > li.active > a::before { background-image: url("../images/icon-arrow-right.svg") !important; }
.sidebar .dep2 { background: transparent; padding-bottom: var(--rd-space-1); }
.sidebar .dep2 > li > a::before { flex: none; background: var(--rd-muted); }
.sidebar .badge-primary,
.sidebar .badge-danger { margin-left: auto; background: var(--rd-clay); color: #fff; }

/* 서랍 안에서만 보이는 계정 메뉴 (좁은 화면에서 상단 링크를 대신한다) */
.sidebar .rd-drawer-only {
    display: none;
    margin: var(--rd-space-3) var(--rd-space-3) 0;
    padding-top: var(--rd-space-3);
    border-top: var(--rd-border);
}
.sidebar .rd-drawer-only a {
    display: flex;
    align-items: center;
    min-height: var(--rd-control-h);
    padding: var(--rd-space-3);
    border-radius: var(--rd-radius-ctl);
    color: var(--rd-ink);
    font-weight: 500;
}
.sidebar .rd-drawer-only .who { padding: var(--rd-space-1) var(--rd-space-3); color: var(--rd-muted); font-size: var(--rd-text-sm); }

.rd-backdrop {
    display: none;
    position: fixed;
    inset: var(--rd-header-h) 0 0;
    background: var(--rd-scrim);
    z-index: 1020;
}

/* ============ 5. 본문 ============ */
#wrap { background: var(--rd-ground); }
#content {
    min-width: 0;
    max-width: none;
    margin-top: var(--rd-header-h);
    margin-left: var(--rd-side-w);
    padding: var(--rd-space-7) var(--rd-space-7) var(--rd-space-8);
}
#footer { margin-left: var(--rd-side-w); }
#footer ul { border-color: var(--rd-line) !important; color: var(--rd-muted); }

/* ============ 6. 카드 ============ */
.card {
    min-width: 0;
    background: var(--rd-surface);
    border: var(--rd-border);
    border-radius: var(--rd-radius-card);
}
.card.shadow-sm { box-shadow: var(--rd-shadow) !important; }
.card.border-danger { border: 2px solid var(--rd-clay) !important; }
.card-body { padding: var(--rd-space-5); }
.card-header { padding: var(--rd-space-3) var(--rd-space-5) 0; background: transparent; border-bottom: 0; }

/* 카드 사이 간격: 위아래로 이어지는 카드는 항상 --rd-gap-card 만큼 띄운다(화면마다 m-t-* 를 따로 적지 않는다).
   카드 묶음(행) 사이는 --rd-gap-section, 이 간격은 .rd-section 이 맡는다 */
.card + .card { margin-top: var(--rd-gap-card); }
.rd-section { margin-top: var(--rd-gap-section); }
/* 다음 카드·행과의 간격을 자기가 책임진다. 숨겨진(display:none) 카드는 간격도 함께 사라진다 */
.rd-gap-after { margin-bottom: var(--rd-gap-card); }

/* 카드 머리말: 제목은 왼쪽, 보조 동작("더보기" 등)은 오른쪽 끝.
   <div class="rd-card-head"><div class="table-title">제목</div><a class="rd-more" href="…">더보기 <i class="fas fa-plus"></i></a></div>
   제목 옆에 붙여 쓰지 말고, 대시보드의 모든 목록 카드가 이 형태를 쓴다 */
.rd-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--rd-space-3);
}
.rd-card-head .table-title { min-width: 0; }
.rd-more {
    flex: none;
    font-size: var(--rd-text-sm);
    white-space: nowrap;
}

/* 대시보드 목록 표(공지사항·웹 정보·동영상 콘텐츠 TOP5): 마지막 열(작성일·조회수)은 한 줄로 두고 너비를 한 곳에서 정한다.
   <table class="table table-fixed rd-list"> … <col class="rd-col-meta"> (마지막 col) */
.rd-list .rd-col-meta { width: 160px; }
.rd-list th:last-child,
.rd-list td:last-child { white-space: nowrap; }

/* ============ 7. 버튼·입력 ============ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--rd-control-h);
    padding: var(--rd-space-2) var(--rd-space-4);
    border-radius: var(--rd-radius-ctl);
    font-family: var(--rd-font-display);
    font-size: var(--rd-text-md);
    font-weight: 700;
}
.btn-sm { min-height: var(--rd-control-h-sm); padding: var(--rd-space-1) var(--rd-space-3); border-radius: var(--rd-radius-sm); font-size: var(--rd-text-sm); }
.btn-lg { min-height: 52px; font-size: 17px; }
.btn-block { display: flex; width: 100%; }
.btn:disabled, .btn.disabled { opacity: 0.55; }

/* 주요 동작은 초록, 되돌릴 수 없거나 주의가 필요한 동작은 주황, 나머지는 테두리만 */
.btn-primary, .btn-dark { background: var(--rd-teal); border-color: var(--rd-teal); color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-dark:hover, .btn-dark:focus, .btn-dark:active {
    background: var(--rd-teal-deep) !important;
    border-color: var(--rd-teal-deep) !important;
    color: #fff;
}
.btn-danger { background: var(--rd-clay); border-color: var(--rd-clay); color: #fff; }
.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
    background: var(--rd-clay-deep) !important;
    border-color: var(--rd-clay-deep) !important;
}
.btn-outline-dark, .btn-outline-gray, .btn-outline-primary, .btn-outline-secondary, .btn-secondary, .btn-light {
    background: var(--rd-surface);
    border: var(--rd-border);
    color: var(--rd-ink);
}
.btn-outline-dark:hover, .btn-outline-gray:hover, .btn-outline-primary:hover, .btn-outline-secondary:hover,
.btn-secondary:hover, .btn-light:hover, .btn-outline-gray.active {
    background: var(--rd-teal-tint);
    border-color: var(--rd-teal);
    color: var(--rd-teal-deep);
}

.form-control, .custom-select, select.form-control {
    min-height: var(--rd-control-h);
    max-width: 100%;
    border: var(--rd-border);
    border-radius: var(--rd-radius-ctl);
    background-color: var(--rd-surface);
    color: var(--rd-ink);
    font-size: var(--rd-text-md);
}
textarea.form-control { padding: var(--rd-space-3) var(--rd-space-4); line-height: 1.6; }
/* 작은 입력은 작은 버튼(.btn-sm)과 같은 높이·모서리·글자 크기를 씁니다 — 나란히 놓았을 때 높이가 어긋나지 않게. */
.form-control-sm, select.form-control-sm, .custom-select-sm {
    height: auto;
    min-height: var(--rd-control-h-sm);
    padding: var(--rd-space-1) var(--rd-space-3);
    border-radius: var(--rd-radius-sm);
    font-size: var(--rd-text-sm);
}
.form-control:focus, .custom-select:focus { border-color: var(--rd-teal); box-shadow: 0 0 0 3px var(--rd-teal-tint); }
.form-control:disabled, .form-control[readonly] { background: var(--rd-ground); }
label { color: var(--rd-muted); font-size: var(--rd-text-sm); font-weight: 600; }

/* 큰 입력(.form-control-lg)도 같은 모서리를 쓴다. bootstrap 은 크기 변형마다 border-radius 를 따로 준다 */
.form-control-lg, .custom-select-lg, .input-group-lg > .form-control, .input-group-lg > .custom-select { border-radius: var(--rd-radius-ctl); }

/* 입력 + 버튼 묶음(.input-group): bootstrap 은 맞닿는 쪽 모서리를 0 으로 만들어 각진 입력칸이 된다.
   붙여 쓰지 않고 간격을 두어, 입력칸과 버튼이 각각 완전히 둥근 모서리를 갖게 한다 */
.input-group { flex-wrap: nowrap; gap: var(--rd-space-2); }
.input-group > .form-control,
.input-group > .custom-select,
.input-group > .custom-file,
.input-group > .custom-file .custom-file-label,
.input-group > .input-group-prepend > .btn,
.input-group > .input-group-append > .btn,
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-append > .input-group-text { margin-left: 0; border-radius: var(--rd-radius-ctl) !important; }
.input-group > .input-group-prepend,
.input-group > .input-group-append { margin: 0; }
.input-group-text {
    min-height: var(--rd-control-h);
    border: var(--rd-border);
    background: var(--rd-ground);
    color: var(--rd-muted);
    font-size: var(--rd-text-md);
}

/* 파일 선택(.custom-file): 라벨이 입력칸, "찾기" 가 그 안의 버튼이다. 둘 다 둥글게, 버튼은 입력칸 안쪽 모서리를 따라간다 */
.custom-file, .custom-file-input { height: var(--rd-control-h); }
.custom-file-label {
    height: var(--rd-control-h);
    padding: var(--rd-space-2) var(--rd-space-4);
    border: var(--rd-border);
    border-radius: var(--rd-radius-ctl);
    background-color: var(--rd-surface);
    color: var(--rd-ink);
    font-size: var(--rd-text-md);
    line-height: 1.7;
}
.custom-file-label::after {
    height: calc(var(--rd-control-h) - 2px);
    padding: var(--rd-space-2) var(--rd-space-3);
    border-radius: 0 var(--rd-radius-ctl) var(--rd-radius-ctl) 0;
    background-color: var(--rd-teal);
    font-weight: 700;
    line-height: 1.7;
}
.custom-file-input:focus ~ .custom-file-label { border-color: var(--rd-teal); box-shadow: 0 0 0 3px var(--rd-teal-tint); }
.custom-file-input[disabled] ~ .custom-file-label, .custom-file-input:disabled ~ .custom-file-label { background-color: var(--rd-ground); }
/* 파일 입력은 위 라벨이 입력칸 모양을 그린다. 투명한 실제 입력칸에 padding 보정(style.css)이 남지 않게 한다 */
input[type=file].form-control { padding-top: 0; }

/* 날짜·시간 선택기: 입력칸은 .form-control 을 따르고, 펼침 창도 카드와 같은 모서리를 쓴다 */
.form-datepicker { padding-right: var(--rd-space-7); background-color: var(--rd-surface); }
.ui-widget.ui-datepicker,
.datepicker-box,
.bootstrap-timepicker-widget { border-radius: var(--rd-radius-card); box-shadow: var(--rd-shadow-pop); }
.ui-widget.ui-datepicker .ui-state-active { background: var(--rd-teal); border-radius: var(--rd-radius-sm); }
.ui-widget.ui-datepicker .ui-state-highlight { background: var(--rd-teal-tint); color: var(--rd-teal-deep); border-radius: var(--rd-radius-sm); }
.ui-widget.ui-datepicker .ui-datepicker-prev::before { border-right-color: var(--rd-teal); }
.ui-widget.ui-datepicker .ui-datepicker-next::before { border-left-color: var(--rd-teal); }
.ui-widget.ui-datepicker select.ui-datepicker-month,
.ui-widget.ui-datepicker select.ui-datepicker-year { border-radius: var(--rd-radius-sm); }
.bootstrap-timepicker-widget table td input { border: var(--rd-border); border-radius: var(--rd-radius-sm); }
progress::-webkit-progress-value, .progress progress::-webkit-progress-value { background: var(--rd-teal); }

/* 클래스 없이 쓴 입력칸(예: 태그 입력)이 각진 기본 모양으로 남지 않게 한다. 폼 컨트롤·체크박스·숨김은 제외 */
#content input:not([type]):not(.form-control),
#content input[type="text"]:not(.form-control):not(.custom-file-input),
#content input[type="number"]:not(.form-control),
#content input[type="search"]:not(.form-control),
#content input[type="password"]:not(.form-control),
#content input[type="email"]:not(.form-control),
#content input[type="date"]:not(.form-control),
#content select:not(.form-control):not(.custom-select),
#content textarea:not(.form-control) {
    min-height: var(--rd-control-h);
    padding: var(--rd-space-2) var(--rd-space-3);
    border: var(--rd-border);
    border-radius: var(--rd-radius-ctl);
    background-color: var(--rd-surface);
    color: var(--rd-ink);
    font-size: var(--rd-text-md);
}
/* 태그 입력 상자(.encyc-tags)처럼 바깥 상자가 테두리를 그리는 경우: 안쪽 입력은 테두리 없이, 포커스는 상자가 받는다 */
.encyc-tags input { min-height: 0 !important; padding: var(--rd-space-1) !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; }
.encyc-tags:focus-within { border-color: var(--rd-teal); box-shadow: 0 0 0 3px var(--rd-teal-tint); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--rd-teal); }

/* ============ 8. 검색 영역 · 툴바 ============ */
.search-condition {
    margin-bottom: var(--rd-space-5);
    padding: var(--rd-space-4) var(--rd-space-5);
    background: var(--rd-surface);
    border: var(--rd-border);
    border-radius: var(--rd-radius-card);
    box-shadow: var(--rd-shadow);
}
.search-condition .row { margin: 0; }
.search-condition .row > [class*="col"] { padding: 0; }
.search-condition .d-flex { flex-wrap: wrap; align-items: center; gap: var(--rd-space-3) var(--rd-space-4); }
.search-condition .d-flex > label { margin: 0; }
.search-condition .d-flex > .form-control,
.search-condition .d-flex > .custom-select { margin-right: 0; }
.search-condition .w-auto { width: auto !important; min-width: 0; }
.search-condition .btn-dark { min-width: 90px; }

/* 목록 위의 "총 N개 / 버튼들" 줄 */
#content .row.justify-content-between.align-items-center { gap: var(--rd-space-2) 0; margin-bottom: var(--rd-space-3) !important; }
#content .row.justify-content-between .d-flex { flex-wrap: wrap; gap: var(--rd-space-2); }
#content .row.justify-content-between .d-flex .ml-2 { margin-left: 0 !important; }
#content .row.justify-content-between .d-flex form { margin: 0; }

/* ============ 9. 표 ============ */
/* redesign.js 가 #content 의 표를 .rd-scroll 로 감싼다. 폭이 모자라면 표가 아니라 래퍼가 스크롤된다 */
.rd-scroll {
    max-width: 100%;
    margin-bottom: var(--rd-space-4);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--rd-surface);
    border: var(--rd-border);
    border-radius: var(--rd-radius-card);
    box-shadow: var(--rd-shadow);
}
.rd-scroll > .table { margin-bottom: 0; }
.rd-scroll > .table.rd-wide { min-width: var(--rd-table-min-w); }
.rd-scroll > .table.rd-wide td { white-space: nowrap; }
.rd-scroll > .table.rd-wide td.text-underline { min-width: 220px; white-space: normal; }
.card .rd-scroll { margin-bottom: 0; border: 0; border-radius: 0; box-shadow: none; }

.table { color: var(--rd-ink); }
.table-bordered { border: 0; }
.table-bordered th, .table-bordered td { border-right: 0; border-left: 0; }
.table th, .table td { padding: var(--rd-space-3) var(--rd-space-4); border-color: var(--rd-line); vertical-align: middle; }
.table thead th,
.table .thead-dark th {
    border-top: 0;
    border-bottom: var(--rd-border);
    background: var(--rd-ground);
    color: var(--rd-muted);
    font-size: var(--rd-text-sm);
    font-weight: 600;
}
.table tbody th { background: var(--rd-ground); color: var(--rd-muted); font-size: var(--rd-text-sm); font-weight: 600; } /* 상세 화면의 "항목 / 값" 표 */
.table tbody tr:hover,
.table-hover tbody tr:hover { background: var(--rd-hover); color: var(--rd-ink); }
.table .tr-selected { background: var(--rd-teal-tint); }
.table th.sort.active { color: var(--rd-teal-deep); }
.table .text-underline { color: var(--rd-teal-deep); font-weight: 600; text-underline-offset: 3px; }
.table th [type=checkbox], .table td [type=checkbox] { width: 20px; height: 20px; }

/* ============ 10. 탭 ============ */
.nav-tabs, .nav-pills { flex-wrap: wrap; gap: var(--rd-space-2); margin-bottom: var(--rd-space-4); border: 0; }
.nav-tabs .nav-item, .nav-pills .nav-item { margin: 0; }
.nav-tabs .nav-link, .nav-pills .nav-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--rd-control-h);
    padding: 0 var(--rd-space-4);
    border: var(--rd-border);
    border-radius: var(--rd-radius-ctl);
    background: var(--rd-surface);
    color: var(--rd-ink);
    font-family: var(--rd-font-display);
    font-weight: 700;
    white-space: nowrap;
}
.nav-tabs .nav-link:hover, .nav-pills .nav-link:hover { border-color: var(--rd-teal); background: var(--rd-teal-tint); color: var(--rd-teal-deep); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link, .nav-tabs li.active .nav-link,
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { border-color: var(--rd-teal); background: var(--rd-teal); color: #fff; }
.tab-content { min-width: 0; }

/* ============ 11. 쪽 번호 ============ */
.pagination { flex-wrap: wrap; gap: var(--rd-space-1); }
.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--rd-control-h);
    min-height: var(--rd-control-h);
    margin: 0;
    border: 0;
    border-radius: var(--rd-radius-ctl);
    background: transparent;
    color: var(--rd-ink);
    font-weight: 600;
}
.page-link:hover { background: var(--rd-teal-tint); color: var(--rd-teal-deep); }
.page-item.active .page-link { background: var(--rd-teal); color: #fff; }
.page-item.disabled .page-link { background: transparent; color: var(--rd-muted); opacity: 0.5; }

/* ============ 12. 배지 ============ */
.badge { padding: 0.25em 0.8em; border-radius: var(--rd-radius-pill); font-size: 13px; font-weight: 600; }
.badge-primary, .badge-success { background: var(--rd-teal-tint); color: var(--rd-teal-deep); }
.badge-warning { background: var(--rd-clay-tint); color: var(--rd-clay-deep); }
.badge-danger { background: var(--rd-clay); color: #fff; }
.badge-secondary, .badge-light { background: var(--rd-neutral-tint); color: var(--rd-muted); }

/* ============ 13. 대시보드 ============ */
/* 환자현황: 총 환자수를 강조하고 나머지 4개를 나란히. 카드 폭(컨테이너)에 따라 열 수가 바뀐다 */
.rd-situation { container-type: inline-size; }
.patient-situation {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: var(--rd-space-3);
}
.patient-situation .item {
    min-width: 0;
    min-height: 84px;
    padding: var(--rd-space-3) var(--rd-space-4);
    background: var(--rd-ground);
    border-radius: var(--rd-radius-ctl);
}
.patient-situation .item:nth-child(1) { grid-row: auto; grid-column: 1 / -1; background: var(--rd-teal); color: #fff; }
.patient-situation .item:nth-child(1) .text-blue,
.patient-situation .item:nth-child(1) p { color: #fff !important; }
.patient-situation .item .text-blue { font-family: var(--rd-font-display); font-weight: 800; }
.patient-situation .item .font-size-18px { font-size: 28px !important; line-height: 1.1; }
.patient-situation .item .font-size-30px { font-size: 40px !important; line-height: 1.1; }
.rd-charts { container-type: inline-size; margin-top: var(--rd-space-5); }
.rd-chart-title { margin: 0 0 var(--rd-space-2); font-family: var(--rd-font-display); font-size: var(--rd-text-md); font-weight: 700; color: var(--rd-ink); }
.patient-chart-line-area { position: relative; height: var(--rd-chart-h); }

/* 연령·성별 원형은 월별 추이 아래에 둔다. 좁은 카드에서는 세로로, 넓으면 나란히 */
.rd-donuts {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rd-space-5) var(--rd-space-6);
    margin-top: var(--rd-space-5);
    padding-top: var(--rd-space-5);
    border-top: var(--rd-border);
}
.rd-donut { min-width: 0; }
/* 높이는 기본 --rd-donut-h. 연령 원형은 범례 항목 수에 맞춰 dashboard.html 이 이 변수를 요소에 덮어쓴다 */
.rd-donut-canvas { position: relative; height: var(--rd-donut-h); }
#patient-chart-age, #patient-chart-gender { height: 100% !important; } /* style.css 의 150px !important 를 덮는다 */
@container (min-width: 720px) {
    .rd-donuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 월별 추이의 마우스 올림 설명(dashboard.html 이 만드는 #chartjs-tooltip) */
#chartjs-tooltip {
    border-left-color: var(--rd-teal);
    border-radius: var(--rd-radius-sm);
    box-shadow: var(--rd-shadow-pop);
    color: var(--rd-ink);
}
#chartjs-tooltip table { margin: 0; }
#chartjs-tooltip table th { border-bottom: var(--rd-border); text-align: left; font-family: var(--rd-font-display); }

/* 대시보드 두 단. 이 저장소의 bootstrap.css 는 col-xl-* 를 1600px 부터 적용하므로 1200px 기준은 직접 둔다.
   좁을 때는 한 단으로 쌓이고(col-12), 단 사이 간격은 아래 margin 이 맡는다 */
.rd-split-7, .rd-split-5, .rd-split-6 { margin-bottom: var(--rd-space-4); }
@media (min-width: 1200px) {
    .rd-split-7 { flex: 0 0 58.3333%; max-width: 58.3333%; margin-bottom: 0; }
    .rd-split-5 { flex: 0 0 41.6667%; max-width: 41.6667%; margin-bottom: 0; }
    .rd-split-6 { flex: 0 0 50%; max-width: 50%; margin-bottom: 0; }
}
@container (min-width: 600px) {
    .patient-situation { grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); }
    .patient-situation .item:nth-child(1) { grid-column: auto; }
}

/* ============ 14. 모달 ============ */
.modal-content { border: var(--rd-border); border-radius: var(--rd-radius-card); }
.modal-header, .modal-footer { border-color: var(--rd-line); }
.modal-dialog { margin: var(--rd-space-3) auto; }

/* ============ 15. 로그인 ============ */
#container-block.login { background: var(--rd-ground); }
.login .inner {
    width: 100%;
    max-width: 650px;
    border: var(--rd-border);
    border-radius: var(--rd-radius-card);
    box-shadow: var(--rd-shadow);
}

/* ============ 16. 반응형 ============ */
@media (max-width: 1199.98px) {
    #content { padding: var(--rd-space-6) var(--rd-space-6) var(--rd-space-7); }
}

/* 사이드바가 서랍으로 바뀐다 */
@media (max-width: 991.98px) {
    .rd-burger { display: inline-flex; }
    aside#sidebar, aside {
        width: var(--rd-drawer-w);
        transform: translateX(-100%);
        transition: transform var(--rd-ease);
    }
    html.rd-nav-open aside#sidebar, html.rd-nav-open aside { transform: none; box-shadow: var(--rd-shadow-drawer); }
    html.rd-nav-open .rd-backdrop { display: block; }
    html.rd-nav-open body { overflow: hidden; }
    #content, #footer { margin-left: 0; }
    #content { padding: var(--rd-space-5) var(--rd-space-4) var(--rd-space-7); }
    h2.title, .title { font-size: 24px; }
}

/* 상단 링크는 서랍으로 옮겨 가고, 검색 입력은 한 줄에 하나씩 */
@media (max-width: 767.98px) {
    #header .right { display: none; }
    .sidebar .rd-drawer-only { display: block; }
    .search-condition { padding: var(--rd-space-4); }
    .search-condition .d-flex { align-items: stretch; }
    .search-condition .d-flex > label { flex: 1 1 100%; margin-bottom: calc(-1 * var(--rd-space-2)); }
    .search-condition .d-flex > .custom-select,
    .search-condition .d-flex > .form-control,
    .search-condition .w-auto { flex: 1 1 100%; width: 100% !important; }
    .search-condition .btn { flex: 1 1 auto; }
    .card-body { padding: var(--rd-space-4); }
    /* style.css 의 .login .inner{padding:3rem 7rem} 은 좁은 화면에서 입력창 폭을 거의 다 먹는다 */
    .login .inner { padding: var(--rd-space-7) var(--rd-space-5); }
}

@media (max-width: 575.98px) {
    #header .logo span { display: none; }
    #content .row.mt-3 > .col,
    #content .row.mt-3 > .col-auto { flex: 1 1 100%; max-width: 100%; }
    #content .row.mt-3 .d-flex { white-space: nowrap; }
    .pagination { justify-content: center; }
    #content .row.justify-content-between .d-flex .btn { flex: 1 1 auto; }
    .modal-dialog { margin: var(--rd-space-2); }
    /* 로그인: 입력창(75%)과 버튼(25%) 두 칸을 위아래로 쌓는다 */
    .login .inner .row > .col,
    .login .inner .row > .col-3 { flex: 0 0 100%; max-width: 100%; }
    .login .inner .row > .col-3 { margin-top: var(--rd-space-3); }
    .login .inner #loginButton { min-height: 52px; height: auto !important; }
}

/* 이 저장소의 bootstrap.css 는 분기점이 md=1px, lg=1px, xl=1600px 이라 col-md-*, col-lg-* 가 모든 폭에서 적용된다.
   좁은 화면에서 쌓이는 칸이 필요한 새 화면은 col-md/col-lg 대신 아래 클래스를 쓴다(분기점은 위 표준과 같다).
     .rd-main / .rd-side : 본문 + 보조 두 단. 1200px 미만에서는 한 단으로 쌓인다(.rd-split-* 과 같은 기준).
     .rd-stat            : 요약 카드. 768px 미만 2열, 이상 4열 (<div class="col-6 rd-stat">).
     .rd-form-table      : 라벨(th) + 입력(td) 표. 768px 미만에서는 라벨이 입력 위로 올라간다.
     .rd-form-row        : 입력 두 칸을 나란히. 576px 미만에서는 한 칸씩. */
.rd-main, .rd-side { flex: 0 0 100%; max-width: 100%; }
.rd-side { margin-top: var(--rd-space-4); }
.rd-stat { flex: 0 0 50%; max-width: 50%; }
@media (min-width: 768px) {
    .rd-stat { flex: 0 0 25%; max-width: 25%; }
}
@media (min-width: 1200px) {
    .rd-main { flex: 0 0 66.6667%; max-width: 66.6667%; }
    .rd-side { flex: 0 0 33.3333%; max-width: 33.3333%; margin-top: 0; }
}
.rd-form-row > .rd-form-col { flex: 0 0 50%; max-width: 50%; }
@media (max-width: 767.98px) {
    .rd-form-table, .rd-form-table tbody, .rd-form-table tr, .rd-form-table th, .rd-form-table td { display: block; width: 100%; }
    .rd-form-table colgroup { display: none; }
    .rd-form-table tr { padding: var(--rd-space-3) 0; border-top: var(--rd-border); }
    .rd-form-table tr:first-child { border-top: 0; }
    .rd-form-table th, .rd-form-table td { padding: var(--rd-space-1) 0; border: 0; text-align: left; }
    /* 선택 상자가 w-auto 로 줄어든 채 남지 않게 한 줄을 다 쓴다 */
    .rd-form-table .custom-select.w-auto { width: 100% !important; }
}
@media (max-width: 575.98px) {
    .rd-form-row > .rd-form-col { flex: 0 0 100%; max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    aside#sidebar, aside { transition: none; }
}