/* Color tokens: the light values are the original colors; dark folds them into a few surfaces, lines and text levels.
   theme.js sets data-theme on <html>; [data-theme="light"] pins an element to light. */
:root,
[data-theme="light"] {
    color-scheme: light;
    --bg: #ffffff;
    --bg-translucent: rgba(255, 255, 255, 0.97);
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --solid-666666: #666666;
    --solid-808080: #808080;
    --solid-b3b3b3: #b3b3b3;
    --text-000000: #000000;
    --text-008000: #008000;
    --text-212529: #212529;
    --text-222222: #222222;
    --text-2a78b3: #2a78b3;
    --text-333333: #333333;
    --text-3e3e39: #3e3e39;
    --text-444444: #444444;
    --text-45bdcf: #45bdcf;
    --text-545454: #545454;
    --text-555555: #555555;
    --text-666666: #666666;
    --text-66666617: #66666617;
    --text-6b7280: #6b7280;
    --text-6c757d: #6c757d;
    --text-777777: #777777;
    --text-808080: #808080;
    --text-888888: #888888;
    --text-8a9199: #8a9199;
    --text-999999: #999999;
    --text-9ec469: #9ec469;
    --text-b3b3b3: #b3b3b3;
    --text-c1272d: #c1272d;
    --text-cccccc: #cccccc;
    --text-d9534f: #d9534f;
    --text-e53935: #e53935;
    --text-ff0000: #ff0000;
    --text-ff7bac: #ff7bac;
    --text-ffffff: #ffffff;
    --fill-000000: #000000;
    --fill-111111: #111111;
    --fill-2498aa: #2498aa;
    --fill-2a78b3: #2a78b3;
    --fill-2f9fb1: #2f9fb1;
    --fill-45bdcf: #45bdcf;
    --fill-4deaff: #4deaff;
    --fill-666666: #666666;
    --fill-66666617: #66666617;
    --fill-6abd79: #6abd79;
    --fill-9ec469: #9ec469;
    --fill-a8d176: #a8d176;
    --fill-c1272d: #c1272d;
    --fill-cecece: #cecece;
    --fill-d9534f: #d9534f;
    --fill-dbdbdb: #dbdbdb;
    --fill-dff2f6: #dff2f6;
    --fill-e0e0e0: #e0e0e0;
    --fill-e53935: #e53935;
    --fill-e7e7e7: #e7e7e7;
    --fill-e8e8e8: #e8e8e8;
    --fill-e9ecef: #e9ecef;
    --fill-eaf8fa: #eaf8fa;
    --fill-eafcff: #eafcff;
    --fill-eeeeee: #eeeeee;
    --fill-eef8fa: #eef8fa;
    --fill-efefef: #efefef;
    --fill-f0f0f0: #f0f0f0;
    --fill-f2f2f2: #f2f2f2;
    --fill-f2f4f6: #f2f4f6;
    --fill-f5f5f5: #f5f5f5;
    --fill-ff0000: #ff0000;
    --fill-ff7bac: #ff7bac;
    --fill-ffffff: #ffffff;
    --line-000000: #000000;
    --line-222222: #222222;
    --line-2a78b3: #2a78b3;
    --line-45bdcf: #45bdcf;
    --line-666666: #666666;
    --line-808080: #808080;
    --line-b3b3b3: #b3b3b3;
    --line-bcc2c8: #bcc2c8;
    --line-bfe7ee: #bfe7ee;
    --line-cccccc: #cccccc;
    --line-ced4da: #ced4da;
    --line-d9534f: #d9534f;
    --line-d9d9d9: #d9d9d9;
    --line-dddddd: #dddddd;
    --line-dee2e6: #dee2e6;
    --line-e0e0e0: #e0e0e0;
    --line-e0e3e5: #e0e3e5;
    --line-e53935: #e53935;
    --line-e7e7e7: #e7e7e7;
    --line-eafcff: #eafcff;
    --line-ececec: #ececec;
    --line-eeeeee: #eeeeee;
}

@media screen {
    [data-theme="dark"] {
        color-scheme: dark;
        --bg: #161617;
        --bg-translucent: rgba(22, 22, 23, 0.97);
        --surface: #1d1d1f;
        --surface-raised: #242426;
        --solid-666666: #2c2c2e;
        --solid-808080: #3a3a3c;
        --solid-b3b3b3: #3a3a3c;
        --text-000000: #e8e8ed;
        --text-008000: #6fae78;
        --text-212529: #e8e8ed;
        --text-222222: #e8e8ed;
        --text-2a78b3: #6a9fd8;
        --text-333333: #e8e8ed;
        --text-3e3e39: #e8e8ed;
        --text-444444: #e8e8ed;
        --text-45bdcf: #5fa3ad;
        --text-545454: #dadade;
        --text-555555: #dadade;
        --text-666666: #d1d1d6;
        --text-66666617: #3a3a3c;
        --text-6b7280: #c7c7cc;
        --text-6c757d: #86868b;
        --text-777777: #c7c7cc;
        --text-808080: #c7c7cc;
        --text-888888: #a1a1a6;
        --text-8a9199: #a1a1a6;
        --text-999999: #a1a1a6;
        --text-9ec469: #93a978;
        --text-b3b3b3: #86868b;
        --text-c1272d: #d77a74;
        --text-cccccc: #6e6e73;
        --text-d9534f: #d77a74;
        --text-e53935: #d77a74;
        --text-ff0000: #d77a74;
        --text-ff7bac: #c98aa3;
        --text-ffffff: #e8e8ed;
        --fill-000000: #c7c7cc;
        --fill-111111: #c7c7cc;
        --fill-2498aa: #2f7882;
        --fill-2a78b3: #2f5f88;
        --fill-2f9fb1: #2a6a73;
        --fill-45bdcf: #2c7079;
        --fill-4deaff: #234f56;
        --fill-666666: #86868b;
        --fill-66666617: #1d1d1f;
        --fill-6abd79: #4c7d56;
        --fill-9ec469: #637a4a;
        --fill-a8d176: #6f8a52;
        --fill-c1272d: #8a3a3d;
        --fill-cecece: #2c2c2e;
        --fill-d9534f: #8a3a35;
        --fill-dbdbdb: #2c2c2e;
        --fill-dff2f6: #1f373c;
        --fill-e0e0e0: #2c2c2e;
        --fill-e53935: #8a3a35;
        --fill-e7e7e7: #232325;
        --fill-e8e8e8: #2c2c2e;
        --fill-e9ecef: #2c2c2e;
        --fill-eaf8fa: #1c2a2d;
        --fill-eafcff: #1c2a2d;
        --fill-eeeeee: #2c2c2e;
        --fill-eef8fa: #1c2a2d;
        --fill-efefef: #2c2c2e;
        --fill-f0f0f0: #232325;
        --fill-f2f2f2: #232325;
        --fill-f2f4f6: #232325;
        --fill-f5f5f5: #232325;
        --fill-ff0000: #8a3a3d;
        --fill-ff7bac: #8a5368;
        --fill-ffffff: #c7c7cc;
        --line-000000: #3a3a3c;
        --line-222222: #c7c7cc;
        --line-2a78b3: #3d6a9e;
        --line-45bdcf: #2a5f66;
        --line-666666: #86868b;
        --line-808080: #48484a;
        --line-b3b3b3: #48484a;
        --line-bcc2c8: #48484a;
        --line-bfe7ee: #24474d;
        --line-cccccc: #48484a;
        --line-ced4da: #3a3a3c;
        --line-d9534f: #8f4540;
        --line-d9d9d9: #3a3a3c;
        --line-dddddd: #3a3a3c;
        --line-dee2e6: #2c2c2e;
        --line-e0e0e0: #2c2c2e;
        --line-e0e3e5: #2c2c2e;
        --line-e53935: #8f4540;
        --line-e7e7e7: #2c2c2e;
        --line-eafcff: #1c2a2d;
        --line-ececec: #2c2c2e;
        --line-eeeeee: #2c2c2e;
    }

    [data-theme="dark"] body {
        background-color: var(--bg);
        color: var(--text-000000);
    }

    /* Native controls without page styles; zero specificity, so any page rule still wins. */
    :where([data-theme="dark"]) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="reset"], [type="image"], [type="color"], [type="file"]), textarea, select) {
        background-color: var(--surface);
        color: var(--text-212529);
    }
    :where([data-theme="dark"]) :where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
        background-color: var(--fill-efefef);
        color: var(--text-000000);
    }

    /* Bootstrap 5.2 has no dark mode: the variables and the hard-coded colors of the components in use. */
    :root[data-theme="dark"] {
        --bs-body-color: var(--text-212529);
        --bs-body-bg: var(--bg);
        --bs-border-color: var(--line-dee2e6);
        --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
        --bs-link-color: #6a9fd8;
        --bs-link-hover-color: #8ab4e3;
    }
    :where([data-theme="dark"]) .form-control,
    :where([data-theme="dark"]) .form-control:focus {
        color: var(--text-212529);
        background-color: var(--surface);
    }
    :where([data-theme="dark"]) .form-control {
        border-color: var(--line-ced4da);
    }
    :where([data-theme="dark"]) .form-control:focus {
        border-color: #3d6a9e;
        box-shadow: 0 0 0 0.25rem rgba(61, 106, 158, 0.25);
    }
    :where([data-theme="dark"]) .form-control::placeholder {
        color: var(--text-6c757d);
    }
    :where([data-theme="dark"]) .form-control:disabled {
        background-color: var(--fill-e9ecef);
    }
    :where([data-theme="dark"]) .input-group-text {
        color: var(--text-212529);
        background-color: var(--fill-e9ecef);
        border-color: var(--line-ced4da);
    }
    [data-theme="dark"] .accordion {
        --bs-accordion-color: var(--text-212529);
        --bs-accordion-bg: var(--bg);
        --bs-accordion-btn-color: var(--text-212529);
        --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23c7c7cc'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236a9fd8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        --bs-accordion-active-color: #6a9fd8;
        --bs-accordion-active-bg: #172434;
    }
    [data-theme="dark"] .table {
        --bs-table-hover-bg: rgba(255, 255, 255, 0.075);
    }
    [data-theme="dark"] .text-muted {
        color: var(--text-6c757d) !important;
    }

    /* SweetAlert2 11.4 (its stylesheet loads after this one). */
    :root[data-theme="dark"] .swal2-popup {
        background: var(--surface-raised);
        color: var(--text-545454);
    }
    [data-theme="dark"] .swal2-input,
    [data-theme="dark"] .swal2-textarea {
        border-color: var(--line-d9d9d9);
    }
    [data-theme="dark"] .swal2-input::placeholder,
    [data-theme="dark"] .swal2-textarea::placeholder {
        color: var(--text-cccccc);
    }
    [data-theme="dark"] .swal2-validation-message {
        background: var(--fill-f0f0f0);
        color: var(--text-666666);
    }
    /* Button and icon colors come from each call; they are toned down the same way. */
    [data-theme="dark"] .swal2-actions .swal2-styled {
        filter: brightness(0.8) saturate(0.8);
    }
    [data-theme="dark"] .swal2-icon {
        filter: brightness(0.85) saturate(0.75);
    }

    /* mCustomScrollbar: the pages use the inset-2-dark theme; on a dark page it takes the light inset-2 colors. */
    [data-theme="dark"] .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail {
        border-color: rgba(255, 255, 255, 0.12);
    }
    [data-theme="dark"] .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
        background-color: rgba(255, 255, 255, 0.32);
    }
    [data-theme="dark"] .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
        background-color: rgba(255, 255, 255, 0.42);
    }
    [data-theme="dark"] .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
    [data-theme="dark"] .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
        background-color: rgba(255, 255, 255, 0.52);
    }
    [data-theme="dark"] .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp {
        background-position: -32px -72px;
    }
    [data-theme="dark"] .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown {
        background-position: -32px -92px;
    }
    [data-theme="dark"] .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft {
        background-position: -40px -112px;
    }
    [data-theme="dark"] .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight {
        background-position: -40px -128px;
    }

    /* Images drawn for a white page: the dark variant is painted as the background, the original pushed out of view. */
    [data-theme="dark"] img[src="/seeann_log.png"],
    [data-theme="dark"] img[src="/CGBIO_log.png"],
    [data-theme="dark"] img[src="/ORDER FORM_아이콘_검색(회색).png"],
    [data-theme="dark"] img[src="/어깨 인공관절치환술 가이던스_프로세스.png"],
    [data-theme="dark"] img[src="/하악 재건술 가이던스_프로세스.png"] {
        object-position: -100000px 0;
        background: center / contain no-repeat;
    }
    [data-theme="dark"] img[src="/seeann_log.png"] {
        background-image: url("/seeann_log_dark.png");
        filter: brightness(0.9);
    }
    [data-theme="dark"] img[src="/CGBIO_log.png"] {
        background-image: url("/CGBIO_log_dark.png");
        filter: brightness(0.85) saturate(0.85);
    }
    [data-theme="dark"] img[src="/ORDER FORM_아이콘_검색(회색).png"] {
        background-image: url("/ORDER FORM_아이콘_검색(회색)_dark.png");
    }
    [data-theme="dark"] img[src="/어깨 인공관절치환술 가이던스_프로세스.png"] {
        background-image: url("/어깨 인공관절치환술 가이던스_프로세스_dark.png");
    }
    [data-theme="dark"] img[src="/하악 재건술 가이던스_프로세스.png"] {
        background-image: url("/하악 재건술 가이던스_프로세스_dark.png");
    }
    /* Colored images are toned down like the rest of the dark palette */
    [data-theme="dark"] img[src="/어깨 인공관절치환술 가이던스_프로세스.png"],
    [data-theme="dark"] img[src="/하악 재건술 가이던스_프로세스.png"] {
        filter: brightness(0.8) saturate(0.85);
    }
    [data-theme="dark"] img[src="/3d_log.png"] {
        filter: brightness(0.85) saturate(0.85);
    }
    [data-theme="dark"] img[src*="(민트)"] {
        filter: brightness(0.8) saturate(0.7);
    }
}