.sp-panel { --bs-offcanvas-bg: #f6f9fc; --sp-ink: #1f2d3d; --sp-muted: #6b7a8b; --sp-faint: #98a5b3; --sp-deep: #0b5d8c; --sp-blue: #008dcb; --sp-red: #d0455a; color: var(--sp-ink); word-break: keep-all; }
.sp-panel.offcanvas { border: 0; border-radius: 14px 0 0 14px; box-shadow: -18px 0 40px -24px rgba(15, 30, 60, .45); }
.sp-panel .sp-top { justify-content: space-between; gap: .6rem; padding: 1.1rem 1rem .9rem; }
.sp-panel .sp-ttl { display: inline-flex; align-items: center; gap: .55rem; margin: 0; padding: .55rem 1.3rem; border: 1px solid var(--my-primary, #008dcb); border-radius: 999px; background: var(--my-blue-bg, rgba(0, 141, 203, .1)); font-size: calc(1.15rem + .2vw); font-weight: 600; line-height: 1.2; color: #212529; }
.sp-panel .sp-ttl i { font-size: 1.1em; color: var(--my-primary, #008dcb); }
@media (max-width: 575.98px) { .sp-panel .sp-ttl { font-size: clamp(.875rem, 4.5vw, 1.1rem); padding: .5rem 1.05rem; } }
.sp-panel .sp-body { display: grid; grid-auto-rows: max-content; gap: 1.15rem; padding: 0 1rem 1.6rem; }
.sp-panel .sp-cap { margin: .3rem 0 -.6rem .2rem; font-size: .78rem; font-weight: 700; color: var(--sp-muted); }
.sp-panel .sp-cap.bad { color: var(--sp-red); }
.sp-card { border: 1px solid #e1eaf1; border-radius: .9rem; background: #fff; }
.sp-card > * { margin: 0 !important; padding: .6rem .5rem; }
.sp-card > :not(.d-none) ~ :not(.d-none) { border-top: 1px solid #edf1f5; }
.sp-card > :has(> .bg-primary.border) { padding-top: 0; border-top: 0 !important; }
.sp-panel .form-control:not(.btn), .sp-panel .form-select:not(.ms-parent) { height: 2.75rem; padding: 0 .85rem; border: 1px solid #d5dee6; border-radius: .7rem !important; background-color: #fff; font: 500 .95rem "Barlow", "Noto Sans KR", sans-serif; color: var(--sp-ink); box-shadow: none; }
.sp-panel .form-select:not(.ms-parent) { padding-right: 2.25rem; }
.sp-panel select[multiple].form-select, .sp-panel select[size].form-select { height: auto; min-height: 5.5rem; padding: .4rem .5rem; background-image: none; }
.sp-panel textarea.form-control:not(.btn) { height: auto; padding: .6rem .85rem; line-height: 1.5; }
.sp-panel .form-control:not(.btn)::placeholder { color: #a9b5c1; }
.sp-panel .form-control:not(.btn):focus, .sp-panel .form-select:not(.ms-parent):focus { border-color: var(--sp-blue); outline: 3px solid rgba(0, 141, 203, .14); box-shadow: none; }
.sp-panel .input-group { flex-wrap: nowrap; }
.sp-panel .input-group > * { margin-left: 0 !important; border-radius: .7rem !important; }
.sp-panel .input-group:not(:has(> .btn:only-child)) { align-items: center; border: 1px solid #d5dee6; border-radius: .7rem; background: #fff; }
.sp-panel .input-group:not(:has(> .btn:only-child)):focus-within { border-color: var(--sp-blue); box-shadow: 0 0 0 3px rgba(0, 141, 203, .12); }
.sp-panel .input-group:not(:has(> .btn:only-child)) > .form-control:not(.btn), .sp-panel .input-group:not(:has(> .btn:only-child)) > .form-select:not(.ms-parent) { border: 0 !important; background-color: transparent; outline: 0 !important; box-shadow: none !important; }
.sp-panel .input-group:not(:has(> .btn:only-child)) > .ms-parent .ms-choice { border: 0 !important; background: transparent; }
.sp-panel .input-group > .form-control:not(.btn), .sp-panel .input-group > .form-select, .sp-panel .input-group > .ms-parent { flex: 1 1 auto; width: 1%; min-width: 0; }
.sp-panel .sp-card .btn { --bs-btn-bg: transparent; --bs-btn-color: var(--sp-ink); --bs-btn-border-color: transparent; --bs-btn-hover-bg: #f4f8fb; --bs-btn-hover-color: var(--sp-ink); --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: #eaf2f8; --bs-btn-active-color: var(--sp-ink); --bs-btn-active-border-color: transparent; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: transparent; --bs-btn-focus-shadow-rgb: 0, 141, 203; box-shadow: none; }
.sp-panel .input-group > .btn:not(:only-child) { --bs-btn-bg: #eaf4fa; --bs-btn-color: var(--sp-deep); --bs-btn-hover-bg: #d8ebf6; --bs-btn-hover-color: var(--sp-deep); --bs-btn-active-bg: #c9e2f2; --bs-btn-active-color: var(--sp-deep); display: inline-flex; flex: none; align-items: center; justify-content: center; width: auto; height: 2.15rem; margin: .3rem !important; padding: 0 .85rem; border: 0; border-radius: .5rem !important; font-size: .85rem; font-weight: 700; white-space: nowrap; }
.sp-panel .input-group > .btn:not(:only-child).btn-outline-danger { --bs-btn-bg: #fdeef1; --bs-btn-color: var(--sp-red); --bs-btn-hover-bg: #fbdde3; --bs-btn-hover-color: var(--sp-red); }
.sp-panel .sp-card > * > .btn, .sp-panel .sp-card .input-group > .btn:only-child { display: flex; align-items: center; gap: .7rem; width: 100%; height: auto; min-height: 2.75rem; padding: .3rem .25rem; border: 0; border-radius: .6rem !important; text-align: left; font-size: .9rem; font-weight: 600; }
.sp-panel .sp-card > * > .btn::after, .sp-panel .sp-card .input-group > .btn:only-child::after { content: "\f285"; margin-left: auto; font-family: "bootstrap-icons"; font-size: .8rem; color: #b3c2cf; }
.sp-panel .sp-card > * > .btn > i:first-child, .sp-panel .sp-card .input-group > .btn:only-child > i:first-child, .sp-panel .sp-card > * > .btn > .sp-ic, .sp-panel .sp-card .input-group > .btn:only-child > .sp-ic { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 1px; width: 2rem; height: 2rem; margin: 0 !important; border-radius: .6rem; background: #f0f5f9; font-size: .95rem; color: var(--sp-deep); }
.sp-panel .sp-ic i { margin: 0 !important; font-size: .78rem; }
.sp-panel .sp-card > * > .btn img, .sp-panel .sp-card .input-group > .btn:only-child img { flex: none; width: auto !important; height: 1.15rem !important; }
.sp-panel .sp-card > * > .btn-outline-danger, .sp-panel .sp-card > * > .btn.text-danger { --bs-btn-color: var(--sp-red); --bs-btn-hover-color: var(--sp-red); --bs-btn-hover-bg: #fff5f7; --bs-btn-active-color: var(--sp-red); }
.sp-panel .sp-card > * > .btn-outline-danger > i:first-child, .sp-panel .sp-card > * > .btn.text-danger > i:first-child, .sp-panel .sp-card > * > .btn-outline-danger > .sp-ic { background: #fdeef1; color: var(--sp-red); }
.sp-panel .sp-card > * > .btn-outline-primary > i:first-child { background: #e3f2fa; color: var(--sp-blue); }
.sp-panel .sp-card > * > .btn-outline-primary:not(:has(> i)) { --bs-btn-bg: var(--sp-blue); --bs-btn-color: #fff; --bs-btn-hover-bg: #0a7fb8; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #086d9e; --bs-btn-active-color: #fff; justify-content: center; font-weight: 700; }
.sp-panel .sp-card > * > .btn-outline-primary:not(:has(> i))::after { content: none; }
.sp-panel .sp-card .input-group.sp-pick:not(:has(> .btn:only-child)) { border-color: var(--my-primary, #008dcb); }
.sp-panel .sp-card .btn-outline-secondary:hover, .sp-panel .sp-card .btn-outline-secondary:active { color: var(--bs-btn-hover-color) !important; }
.sp-panel .sp-card .btn:focus-visible { outline: 2px solid var(--sp-blue); outline-offset: -2px; }
.sp-panel .sp-card .form-label { display: block; margin-bottom: .4rem; font-size: .76rem; font-weight: 600; color: var(--sp-muted); opacity: 1 !important; }
.sp-panel .sp-card [role="button"]:not(.btn) { font-size: .85rem; font-weight: 600; color: var(--sp-blue); cursor: pointer; }
.sp-panel .sp-card .bg-primary.border { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
.sp-panel .sp-card .bg-primary.border p { margin: 0; font-size: .76rem; line-height: 1.55; color: var(--sp-muted) !important; }
.sp-panel .sp-card .bg-primary.border p.text-danger { color: var(--sp-red) !important; opacity: 1 !important; }
.sp-panel .ms-parent { height: auto; padding: 0; border: 0; background: none; }
.sp-panel .ms-parent .ms-choice { height: 2.75rem; border: 1px solid #d5dee6 !important; border-radius: .7rem !important; background: #fff; }
.sp-panel .ms-parent .ms-choice > span { top: 0; bottom: 0; display: flex; align-items: center; padding-left: .85rem; font-size: .95rem; color: var(--sp-ink); }
.sp-panel .ms-parent .ms-choice > span.ms-placeholder { color: #a9b5c1; }
.sp-panel .ms-parent .ms-choice > div.icon-caret { top: 50%; margin-top: -2px; }