@charset "utf-8";
@import url(g3way.kbms.font.css);

* { box-sizing: border-box; }

/* =========================================================
	공통 디자인 토큰
========================================================= */
:root {
	/* Layout */
	--content-max: 1200px;
	--page-x-pc: 24px;
	--page-x-mo: 16px;

	/* Color Palette - Primary */
	--color-primary-5: #ECF2FE;
	--color-primary-10: #D8E5FD;
	--color-primary-20: #B1CEFB;
	--color-primary-30: #86AFF9;
	--color-primary-40: #4C87F6;
	--color-primary-50: #256EF4;
	--color-primary-60: #0B50D0;
	--color-primary-70: #083891;
	--color-primary-80: #052561;
	--color-primary-90: #03163A;
	--color-primary-95: #020F27;

	/* Color Palette - Secondary */
	--color-secondary-5: #EEF2F7;
	--color-secondary-10: #D6E0EB;
	--color-secondary-20: #B9C9DC;
	--color-secondary-30: #98ACC5;
	--color-secondary-40: #6E84A3;
	--color-secondary-50: #39506C;	
	--color-secondary-60: #223A58;	
	--color-secondary-70: #063A74;
	--color-secondary-80: #052B57;
	--color-secondary-90: #031F3F;

	/* Color Palette - Gray */
	--color-gray-0: #FFFFFF;
	--color-gray-5: #F4F5F6;
	--color-gray-7: #EEF0F2;
	--color-gray-10: #E6E8EA;
	--color-gray-20: #CDD1D5;
	--color-gray-30: #B1B8BE;
	--color-gray-40: #8A949E;
	--color-gray-60: #58616A;
	--color-gray-70: #464C53;
	--color-gray-90: #1E2124;
	--color-gray-95: #131416;

	/* Color Palette - Danger */
	--color-danger-5: #FDEFEC;
	--color-danger-10: #FCDFD9;
	--color-danger-50: #DE3412;
	--color-danger-60: #BD2C0F;
	--color-danger-70: #8A240F;
	--color-danger-80: #5C180A;

	/* Color Palette - Warning */
	--color-warning-5: #FFF3DB;
	--color-warning-10: #FFE0A3;
	--color-warning-20: #FFC95C;
	--color-warning-30: #FFB114;
	--color-warning-40: #C78500;
	--color-warning-50: #9E6A00;
	--color-warning-60: #8A5C00;

	/* Color Palette - Success */
	--color-success-5: #EAF6EC;
	--color-success-10: #D8EEDD;
	--color-success-50: #228738;
	--color-success-60: #267337;

	/* Color Palette - Info */
	--color-info-5: #E7F4FE;
	--color-info-10: #D3EBFD;
	--color-info-50: #0B78CB;
	--color-info-60: #096AB3;

	/* Semantic - Primary */
	--primary: var(--color-primary-50);
	--primary-hover: var(--color-primary-60);
	--primary-active: var(--color-primary-70);
	--primary-bg: var(--color-primary-5);
	--primary-bg-hover: var(--color-primary-10);
	--primary-bg-active: var(--color-primary-20);

	/* Semantic - Secondary */
	--secondary: var(--color-secondary-70);
	--secondary-hover: var(--color-secondary-80);
	--secondary-active: var(--color-secondary-90);
	--secondary-bg: var(--color-secondary-5);
	--secondary-bg-active: var(--color-secondary-10);
	--secondary-text: var(--color-secondary-80);
	--secondary-text-strong: var(--color-secondary-90);

	/* Semantic - Text */
	--text: var(--color-gray-90);
	--text-strong: var(--color-gray-95);
	--text-muted: var(--color-gray-70);
	--text-subtle: var(--color-gray-40);
	--text-white: var(--color-gray-0);
	--placeholder: var(--text-subtle);

	/* Semantic - Background */
	--bg: var(--color-gray-0);
	--bg-soft: var(--color-gray-5);
	--bg-hover: var(--color-gray-5);
	--bg-active: var(--color-gray-10);
	--bg-disabled: var(--color-gray-10);
	--bg-info: var(--color-info-5);

	/* Semantic - Line */
	--line: var(--color-gray-20);
	--line-soft: var(--color-gray-10);
	--line-muted: var(--color-gray-40);
	--line-strong: var(--color-gray-60);

	/* Semantic - Danger */
	--danger: var(--color-danger-60);
	--danger-hover: var(--color-danger-70);
	--danger-active: var(--color-danger-80);
	--danger-bg: var(--color-danger-5);
	--danger-text: var(--color-danger-60);
	--danger-line: var(--color-danger-10);

	/* Semantic - Warning */
	--warning: var(--color-warning-60);
	--warning-bg: var(--color-warning-5);
	--warning-line: var(--color-warning-10);

	/* Semantic - Success */
	--success: var(--color-success-60);
	--success-bg: var(--color-success-5);
	--success-line: var(--color-success-10);

	/* Semantic - Info */
	--info-bg: var(--color-info-5);
	--info-line: var(--color-info-10);

	/* Component - Header */
	--header-bg: var(--bg);
	--header-line: var(--line-soft);
	--header-hover-bg: var(--secondary-bg);
	--header-active-bg: var(--secondary-bg-active);

	/* Component - GNB */
	--gnb-bg: var(--bg);
	--gnb-line: var(--line);
	--gnb-hover-bg: var(--secondary-bg);
	--gnb-active-bg: var(--secondary-bg-active);
	--gnb-active-line: var(--secondary);

	/* Component - Row */
	--row-bg: var(--bg);
	--row-hover-bg: var(--bg-hover);
	--row-selected-bg: var(--primary-bg);

	/* Component - Table */
	--table-head-bg: var(--secondary-bg);
	--table-line: var(--line);
	--table-group-line: var(--color-primary-40);

	/* Component - Search */
	--search-page-bg: var(--secondary-bg);
	--search-line: var(--line);

	/* Component - Input */
	--input-bg: var(--bg);
	--input-line: var(--line-strong);
	--input-focus: var(--primary);
	--input-disabled-bg: var(--bg-disabled);

	/* Component - Button */
	--btn-outline-bg: var(--bg);
	--btn-outline-text: var(--text);
	--btn-outline-line: var(--line-strong);
	--btn-outline-hover-bg: var(--bg-hover);
	--btn-outline-hover-text: var(--text);
	--btn-outline-hover-line: var(--line-strong);
	--btn-outline-active-bg: var(--bg-active);
	--btn-outline-active-text: var(--text);
	--btn-outline-active-line: var(--line-strong);
	--btn-primary-outline-bg: var(--bg);
	--btn-primary-outline-text: var(--primary);
	--btn-primary-outline-line: var(--primary);
	--btn-primary-outline-hover-bg: var(--primary-bg);
	--btn-primary-outline-hover-text: var(--primary-hover);
	--btn-primary-outline-hover-line: var(--primary-hover);
	--btn-primary-outline-active-bg: var(--primary-bg-active);
	--btn-primary-outline-active-text: var(--primary-active);
	--btn-primary-outline-active-line: var(--primary-active);
	--btn-danger-outline-bg: var(--bg);
	--btn-danger-outline-text: var(--danger);
	--btn-danger-outline-line: var(--danger);
	--btn-danger-outline-hover-bg: var(--danger-bg);
	--btn-danger-outline-hover-text: var(--danger-hover);
	--btn-danger-outline-hover-line: var(--danger-hover);
	--btn-danger-outline-active-bg: var(--danger-line);
	--btn-danger-outline-active-text: var(--danger-active);
	--btn-danger-outline-active-line: var(--danger-active);

	/* Site */
	--footer-bg: #252A31;
	--footer-text: #AEB7C2;
	--dim: rgba(0, 0, 0, .75);
	--overlay-bg: rgba(0, 0, 0, .35);

	/* Typography */
	--fs-40: 40px;
	--fs-32: 32px;
	--fs-24: 24px;
	--fs-20: 20px;
	--fs-19: 19px;
	--fs-17: 17px;
	--fs-15: 15px;
	--fs-13: 13px;
	--lh: 1.5;

	/* Focus */
	--focus-width: 1px;
	--focus-color: var(--primary);
	--focus-ring: inset 0 0 0 var(--focus-width) var(--focus-color);

	/* Effect */
	--shadow-panel: 0 2px 6px rgba(0, 0, 0, .08);

}

html,
body { font-family: "Pretendard GOV", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; }
input, select, textarea, button { font-family: inherit; }
.ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: inherit; }

/* =========================================================
	공통 기본 인터랙션
========================================================= */
button { border: 0; background: none; color: inherit; font-family: inherit; cursor: pointer; }
:where(a, button, input, select, textarea, [tabindex], .kbms-guide > summary):focus,
:where(a, button, input, select, textarea, [tabindex], .kbms-guide > summary):focus-visible { outline: 0; box-shadow: var(--focus-ring); }

/* =========================================================
	버튼
========================================================= */
.btn,
.button,
input[type="button"],
input[type="submit"],
.btnKd01 button,
button.append,
button.search,
button.cancel,
button.list,
button.etc,
button.primary-outline,
button.print,
button.read,
button.download,
button.view,
button.white,
button.delete,
.box-search input[type="button"],
.file-upload-btn button,
.modal-btn button { height: 28px; padding: 0 16px; border: 1px solid transparent; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-family: inherit; font-size: var(--fs-13); font-weight: 400; line-height: var(--lh); white-space: nowrap; cursor: pointer; text-decoration: none; transition: background-color .15s, border-color .15s, color .15s; }
.btn { border-color: var(--btn-outline-line); background: var(--btn-outline-bg); color: var(--btn-outline-text); }
.btn:not(:disabled):hover, .btn:not(:disabled):focus-visible { border-color: var(--btn-outline-hover-line); background: var(--btn-outline-hover-bg); color: var(--btn-outline-hover-text); text-decoration: none; }
.btn:not(:disabled):active { border-color: var(--btn-outline-active-line); background: var(--btn-outline-active-bg); color: var(--btn-outline-active-text); }

/* 기존 버튼 호환 */
.btn.primary:not(:disabled), input[type="button"]:not(:disabled), input[type="submit"]:not(:disabled), .btnKd01 button:not(:disabled), button.append:not(:disabled), button.search:not(:disabled), .box-search input[type="button"]:not(:disabled), .modal-btn button:not(:disabled) { border-color: var(--primary); background: var(--primary); color: var(--text-white); }
.btn.primary:not(:disabled):hover, .btn.primary:not(:disabled):focus-visible, input[type="button"]:not(:disabled):hover, input[type="button"]:not(:disabled):focus-visible, input[type="submit"]:not(:disabled):hover, input[type="submit"]:not(:disabled):focus-visible, .btnKd01 button:not(:disabled):hover, .btnKd01 button:not(:disabled):focus-visible, button.append:not(:disabled):hover, button.append:not(:disabled):focus-visible, button.search:not(:disabled):hover, button.search:not(:disabled):focus-visible, .box-search input[type="button"]:not(:disabled):hover, .box-search input[type="button"]:not(:disabled):focus-visible, .modal-btn button:not(:disabled):hover, .modal-btn button:not(:disabled):focus-visible { border-color: var(--primary-hover); background: var(--primary-hover); color: var(--text-white); }
.btn.primary:not(:disabled):active, input[type="button"]:not(:disabled):active, input[type="submit"]:not(:disabled):active, .btnKd01 button:not(:disabled):active, button.append:not(:disabled):active, button.search:not(:disabled):active, .box-search input[type="button"]:not(:disabled):active, .modal-btn button:not(:disabled):active { border-color: var(--primary-active); background: var(--primary-active); color: var(--text-white); }
.btn.outline:not(:disabled), input[type="button"].outline:not(:disabled), input[type="button"].cancel:not(:disabled), input[type="button"].list:not(:disabled), input[type="button"].etc:not(:disabled), button.cancel:not(:disabled), button.list:not(:disabled), button.etc:not(:disabled) { border-color: var(--btn-outline-line); background: var(--btn-outline-bg); color: var(--btn-outline-text); }
.btn.outline:not(:disabled):hover, .btn.outline:not(:disabled):focus-visible, input[type="button"].outline:not(:disabled):hover, input[type="button"].outline:not(:disabled):focus-visible, input[type="button"].cancel:not(:disabled):hover, input[type="button"].cancel:not(:disabled):focus-visible, input[type="button"].list:not(:disabled):hover, input[type="button"].list:not(:disabled):focus-visible, input[type="button"].etc:not(:disabled):hover, input[type="button"].etc:not(:disabled):focus-visible, button.cancel:not(:disabled):hover, button.cancel:not(:disabled):focus-visible, button.list:not(:disabled):hover, button.list:not(:disabled):focus-visible, button.etc:not(:disabled):hover, button.etc:not(:disabled):focus-visible { border-color: var(--btn-outline-hover-line); background: var(--btn-outline-hover-bg); color: var(--btn-outline-hover-text); }
.btn.outline:not(:disabled):active, input[type="button"].outline:not(:disabled):active, input[type="button"].cancel:not(:disabled):active, input[type="button"].list:not(:disabled):active, input[type="button"].etc:not(:disabled):active, button.cancel:not(:disabled):active, button.list:not(:disabled):active, button.etc:not(:disabled):active { border-color: var(--btn-outline-active-line); background: var(--btn-outline-active-bg); color: var(--btn-outline-active-text); }
.btn.primary-outline:not(:disabled), .btn.sub:not(:disabled), input[type="button"].primary-outline:not(:disabled), input[type="button"].print:not(:disabled), input[type="button"].read:not(:disabled), input[type="button"].download:not(:disabled), button.primary-outline:not(:disabled), button.print:not(:disabled), button.read:not(:disabled), button.download:not(:disabled), button.view:not(:disabled), button.white:not(:disabled) { border-color: var(--btn-primary-outline-line); background: var(--btn-primary-outline-bg); color: var(--btn-primary-outline-text); }
.btn.primary-outline:not(:disabled):hover, .btn.primary-outline:not(:disabled):focus-visible, .btn.sub:not(:disabled):hover, .btn.sub:not(:disabled):focus-visible, input[type="button"].primary-outline:not(:disabled):hover, input[type="button"].primary-outline:not(:disabled):focus-visible, input[type="button"].print:not(:disabled):hover, input[type="button"].print:not(:disabled):focus-visible, input[type="button"].read:not(:disabled):hover, input[type="button"].read:not(:disabled):focus-visible, input[type="button"].download:not(:disabled):hover, input[type="button"].download:not(:disabled):focus-visible, button.primary-outline:not(:disabled):hover, button.primary-outline:not(:disabled):focus-visible, button.print:not(:disabled):hover, button.print:not(:disabled):focus-visible, button.read:not(:disabled):hover, button.read:not(:disabled):focus-visible, button.download:not(:disabled):hover, button.download:not(:disabled):focus-visible, button.view:not(:disabled):hover, button.view:not(:disabled):focus-visible, button.white:not(:disabled):hover, button.white:not(:disabled):focus-visible { border-color: var(--btn-primary-outline-hover-line); background: var(--btn-primary-outline-hover-bg); color: var(--btn-primary-outline-hover-text); text-decoration: none; }
.btn.primary-outline:not(:disabled):active, .btn.sub:not(:disabled):active, input[type="button"].primary-outline:not(:disabled):active, input[type="button"].print:not(:disabled):active, input[type="button"].read:not(:disabled):active, input[type="button"].download:not(:disabled):active, button.primary-outline:not(:disabled):active, button.print:not(:disabled):active, button.read:not(:disabled):active, button.download:not(:disabled):active, button.view:not(:disabled):active, button.white:not(:disabled):active { border-color: var(--btn-primary-outline-active-line); background: var(--btn-primary-outline-active-bg); color: var(--btn-primary-outline-active-text); }
.btn.danger:not(:disabled), input[type="button"].danger:not(:disabled), input[type="button"].delete:not(:disabled), button.delete:not(:disabled) { border-color: var(--danger); background: var(--danger); color: var(--text-white); }
.btn.danger:not(:disabled):hover, .btn.danger:not(:disabled):focus-visible, input[type="button"].danger:not(:disabled):hover, input[type="button"].danger:not(:disabled):focus-visible, input[type="button"].delete:not(:disabled):hover, input[type="button"].delete:not(:disabled):focus-visible, button.delete:not(:disabled):hover, button.delete:not(:disabled):focus-visible { border-color: var(--danger-hover); background: var(--danger-hover); color: var(--text-white); }
.btn.danger:not(:disabled):active, input[type="button"].danger:not(:disabled):active, input[type="button"].delete:not(:disabled):active, button.delete:not(:disabled):active { border-color: var(--danger-active); background: var(--danger-active); }
.btn.danger-outline:not(:disabled), input[type="button"].danger-outline:not(:disabled), button.danger-outline:not(:disabled) { border-color: var(--btn-danger-outline-line); background: var(--btn-danger-outline-bg); color: var(--btn-danger-outline-text); }
.btn.danger-outline:not(:disabled):hover, .btn.danger-outline:not(:disabled):focus-visible, input[type="button"].danger-outline:not(:disabled):hover, input[type="button"].danger-outline:not(:disabled):focus-visible, button.danger-outline:not(:disabled):hover, button.danger-outline:not(:disabled):focus-visible { border-color: var(--btn-danger-outline-hover-line); background: var(--btn-danger-outline-hover-bg); color: var(--btn-danger-outline-hover-text); }
.btn.danger-outline:not(:disabled):active, input[type="button"].danger-outline:not(:disabled):active, button.danger-outline:not(:disabled):active { border-color: var(--btn-danger-outline-active-line); background: var(--btn-danger-outline-active-bg); }

.btn:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
.btnKd01 button:disabled,
button:disabled { border-color: var(--line); background: var(--line-soft); color: var(--text-subtle); cursor: default; box-shadow: none; }
.btn:disabled:hover, .btn:disabled:focus-visible, .btn:disabled:active, input[type="button"]:disabled:hover, input[type="button"]:disabled:focus-visible, input[type="button"]:disabled:active, input[type="submit"]:disabled:hover, input[type="submit"]:disabled:focus-visible, input[type="submit"]:disabled:active, .btnKd01 button:disabled:hover, .btnKd01 button:disabled:focus-visible, .btnKd01 button:disabled:active, button:disabled:hover, button:disabled:focus-visible, button:disabled:active { border-color: var(--line); background: var(--line-soft); color: var(--text-subtle); box-shadow: none; }

.btn-icon { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.btn-icon svg, .btn-icon img { width: 16px; height: 16px; display: block; }
.box-search input[type="button"] { min-width: 72px; }
.modal-btn button { padding: 0 24px; }


/* 공통 버튼 디자인 */
.button:not(:disabled) { border-color: var(--primary); background: var(--primary); color: var(--text-white); }
.button:not(:disabled):hover, .button:not(:disabled):focus-visible { border-color: var(--primary-hover); background: var(--primary-hover); color: var(--text-white); }
.button:not(:disabled):active { border-color: var(--primary-active); background: var(--primary-active); color: var(--text-white); }

/* =========================================================
	폼 / 검색
========================================================= */
input, select, textarea, button, legend { color: inherit; }
input, textarea, select, button, label { vertical-align: middle; }
input:not(.grdImg):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="file"]), select, textarea { box-sizing: border-box; min-width: 0; border: 1px solid var(--input-line); border-radius: 6px; background-color: var(--input-bg); color: var(--text); font-family: inherit; font-size: var(--fs-13); line-height: var(--lh); letter-spacing: 0; }
input:not(.grdImg):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="file"]), select { height: 28px; padding: 0 7px; -webkit-appearance: none; -moz-appearance: none; appearance: none; }

input:not(.grdImg):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="file"]):focus,
input:not(.grdImg):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="file"]):focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible { border-color: var(--input-focus); }
select { padding-right: 26px; background-image: url(../images/icons/ico_angle.svg); background-repeat: no-repeat; background-position: calc(100% - 8px) 50%; background-size: 12px 12px; }
select::-ms-expand { display: none; }
textarea { min-height: 58px; padding: 6px 8px; resize: vertical; }
textarea::placeholder, input::placeholder { color: var(--placeholder); font-style: normal; }
input.kbms-valid-error:not(.grdImg):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="file"]), select.kbms-valid-error, textarea.kbms-valid-error { border-color: var(--danger) !important; box-shadow: 0 0 0 1px var(--danger); }
input.kbms-valid-error:not(.grdImg):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="file"]):focus, input.kbms-valid-error:not(.grdImg):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="file"]):focus-visible, select.kbms-valid-error:focus, select.kbms-valid-error:focus-visible, textarea.kbms-valid-error:focus, textarea.kbms-valid-error:focus-visible { border-color: var(--danger) !important; box-shadow: 0 0 0 1px var(--danger); }

/* js에서 사용되는 required 클래스 */
.kbms-required-label::before { content: "*"; position: relative; top: -2px; margin-right: 0; color: var(--danger); font-weight: 700; line-height: 1; }

.kbms-label-col { width: 112px; }
input[readonly]:not(.hasDatepicker), textarea[readonly], input:not(.grdImg):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="file"]):disabled, select:disabled, textarea:disabled, input.disabled, select.disabled { border: 1px solid var(--input-line); background-color: var(--input-disabled-bg); color: var(--text-muted); -webkit-text-fill-color: var(--text-muted); opacity: 1; cursor: default; }
select:disabled, select.disabled { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url(../images/icons/ico_angle.svg); background-repeat: no-repeat; background-position: calc(100% - 8px) 50%; background-size: 12px 12px; }
input[readonly]:not(.hasDatepicker):not(.grdImg):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="file"]), textarea[readonly] { border: 1px solid var(--input-line) !important; background-color: var(--input-disabled-bg) !important; color: var(--text-muted) !important; -webkit-text-fill-color: var(--text-muted) !important; opacity: 1 !important; cursor: default !important; }
input[readonly]:not(.hasDatepicker):not(.grdImg):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="file"]):focus, input[readonly]:not(.hasDatepicker):not(.grdImg):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="file"]):focus-visible, textarea[readonly]:focus, textarea[readonly]:focus-visible, input:not(.grdImg):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="file"]):disabled:focus, input:not(.grdImg):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="file"]):disabled:focus-visible, input.disabled:focus, input.disabled:focus-visible, select:disabled:focus, select:disabled:focus-visible, select.disabled:focus, select.disabled:focus-visible, textarea:disabled:focus, textarea:disabled:focus-visible { border-color: var(--input-line) !important; box-shadow: none !important; outline: 0 !important; }
input[type="checkbox"] { position: relative; width: 18px; height: 18px; min-width: 18px; padding: 0; margin: 0; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--bg); cursor: pointer; vertical-align: middle; -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; }
input[type="checkbox"]:checked { border-color: var(--primary); background: var(--primary); }
input[type="checkbox"]:checked::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; background: var(--text-white); transform: translate(-50%, -50%); -webkit-mask: url(../images/icons/ico_checkbox_checked.svg) no-repeat 50% 50%; mask: url(../images/icons/ico_checkbox_checked.svg) no-repeat 50% 50%; -webkit-mask-size: 12px 12px; mask-size: 12px 12px; }
input[type="checkbox"]:disabled { border-color: var(--line-muted); background: var(--bg-disabled); cursor: default; }
input[type="checkbox"]:disabled:checked { border-color: var(--line-muted); background: var(--bg-disabled); }
input[type="checkbox"]:disabled:checked::after { background: var(--text-subtle); }
input[type="radio"] { position: relative; width: 20px; height: 20px; min-width: 20px; padding: 0; margin: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--bg); cursor: pointer; vertical-align: middle; -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; }
input[type="radio"]:checked { border-color: var(--primary); background: var(--bg); }
input[type="radio"]:checked::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); transform: translate(-50%, -50%); }
input[type="radio"]:disabled { border-color: var(--line-muted); background: var(--bg-disabled); cursor: default; }
input[type="radio"]:disabled:checked::after { background: var(--text-subtle); }
input[type="checkbox"]:focus, input[type="checkbox"]:focus-visible, input[type="radio"]:focus, input[type="radio"]:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; }
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]), input[type="checkbox"] + label, input[type="radio"] + label { cursor: pointer; }
label:has(> input[type="checkbox"]:disabled), label:has(> input[type="radio"]:disabled), input[type="checkbox"]:disabled + label, input[type="radio"]:disabled + label { color: var(--text-subtle); cursor: default; }
label:has(> input[type="checkbox"]:focus), label:has(> input[type="checkbox"]:focus-visible), label:has(> input[type="radio"]:focus), label:has(> input[type="radio"]:focus-visible) { outline: 2px solid var(--focus-color); outline-offset: 0; }
label:has(> input[type="checkbox"]:focus) > input[type="checkbox"], label:has(> input[type="checkbox"]:focus-visible) > input[type="checkbox"], label:has(> input[type="radio"]:focus) > input[type="radio"], label:has(> input[type="radio"]:focus-visible) > input[type="radio"] { outline: 0; }
.checkbox-wrap:has(> input[type="checkbox"]:focus), .checkbox-wrap:has(> input[type="checkbox"]:focus-visible), .checkbox-wrap:has(> input[type="radio"]:focus), .checkbox-wrap:has(> input[type="radio"]:focus-visible) { outline: 2px solid var(--focus-color); outline-offset: 0; }
.checkbox-wrap:has(> input[type="checkbox"]:focus) > input[type="checkbox"], .checkbox-wrap:has(> input[type="checkbox"]:focus-visible) > input[type="checkbox"], .checkbox-wrap:has(> input[type="radio"]:focus) > input[type="radio"], .checkbox-wrap:has(> input[type="radio"]:focus-visible) > input[type="radio"] { outline: 0; }

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }

.box-search { padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft); }
.box-search::after { display: block; clear: both; content: ""; }
.form-item { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.form-item label { color: var(--text); font-size: var(--fs-15); font-weight: 700; line-height: var(--lh); }
.form-item select, .form-item input { width: 100%; }
.kbms-form-actions { clear: both; margin-top: 6px; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.kbms-form-actions > div { display: flex; align-items: center; gap: 6px; }

/* 목록 하단: 페이징은 중앙, 목록 액션은 우측 정렬 */
.kbms-list-footer { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; }
.kbms-list-footer > .kbms-paginator { grid-column: 2; }
.kbms-list-footer > .kbms-form-actions { grid-column: 3; justify-self: end; margin-top: 8px; }

/* =========================================================
	사진
========================================================= */
.kbms-photo-box { width: 100%; overflow-x: auto; overflow-y: hidden; box-sizing: border-box; }
.kbms-photo-track { display: flex; align-items: flex-start; justify-content: flex-start; gap: 8px; width: max-content; min-width: 100%; min-height: 200px; overflow: hidden; }
.kbms-photo-track.is-scroll { overflow-x: auto; }
.kbms-photo-track > * { flex-shrink: 0; }
.kbms-photo-track .thumb-wrap { position: relative; width: 200px; height: 200px; flex: 0 0 200px; overflow: hidden; background: #E6E8EA; cursor: pointer; }
.kbms-photo-img { display: block; max-width: 100%; max-height: 100%; box-sizing: border-box; cursor: pointer; }
.kbms-photo-track.is-scroll .kbms-photo-img { flex: 0 0 auto; width: auto; height: 100%; object-fit: contain; }
.kbms-photo-empty { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 260px; color: #66727D; font-size: var(--fs-13); text-align: center; }
.kbms-photo-track.is-empty { width: 100%; }
.kbms-photo-track.is-empty .kbms-photo-empty { flex: 1 0 100%; align-self: stretch; height: auto; min-height: 200px; }
.kbms-photo-thumb { display: block; width: 100%; height: 100%; border: 0; background: var(--color-gray-5); object-fit: contain; box-sizing: border-box; }
.kbms-photo-thumb.is-video { padding: 18px; }
.kbms-photo-track .thumb-wrap:has(.kbms-photo-thumb.is-selected)::after { position: absolute; inset: 0; z-index: 2; box-shadow: inset 0 0 0 calc(var(--focus-width) + 2px) var(--focus-color); pointer-events: none; content: ""; }
.kbms-photo-track .iconlinks { position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; min-height: 58px; padding: 8px 10px; background: rgba(0, 0, 0, .5); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #FFFFFF; text-align: center; opacity: 0; visibility: hidden; transform: translateY(100%); transition: opacity .18s, visibility .18s, transform .18s; pointer-events: none; box-sizing: border-box; }
.kbms-photo-track .thumb-wrap:hover .iconlinks, .kbms-photo-thumb.is-selected + .iconlinks { opacity: 1; visibility: visible; transform: translateY(0); }
.kbms-photo-thumb-title, .kbms-photo-thumb-name { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kbms-photo-thumb-title { color: #FFFFFF; font-size: var(--fs-13); font-weight: 600; }
.kbms-photo-thumb-name { color: rgba(255, 255, 255, .85); font-size: var(--fs-12); }
.kbms-photo-viewer { position: relative; margin-top: 8px; padding: 16px; border: 1px solid #C8D1DA; background: #666666; color: #FFFFFF; box-sizing: border-box; }
.kbms-photo-viewer-content { display: grid; grid-template-columns: minmax(0, 680px) 280px; justify-content: center; gap: 60px; align-items: stretch; }
.kbms-photo-viewer-main, .kbms-photo-viewer-info { min-width: 0; display: flex; flex-direction: column; }
.kbms-photo-viewer-image { width: 100%; height: clamp(480px, 60vh, 680px); display: flex; align-items: center; justify-content: center; overflow: hidden; box-sizing: border-box; }
.kbms-photo-viewer-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.kbms-photo-viewer-image .kbms-photo-empty { min-height: 0; color: #FFFFFF; font-size: var(--fs-15); }
.kbms-photo-viewer-nav { min-height: 44px; margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.kbms-photo-viewer-nav [data-photo-count] { min-width: 48px; font-size: var(--fs-15); font-variant-numeric: tabular-nums; text-align: center; }
.kbms-photo-viewer-nav [data-photo-prev], .kbms-photo-viewer-nav [data-photo-next] { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: transparent; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; transition: background-color .15s; }
.kbms-photo-viewer-nav [data-photo-prev]::before, .kbms-photo-viewer-nav [data-photo-next]::before { width: 18px; height: 18px; background: #FFFFFF; -webkit-mask: url(../images/icons/ico_angle.svg) no-repeat 50% 50%; mask: url(../images/icons/ico_angle.svg) no-repeat 50% 50%; -webkit-mask-size: 18px 18px; mask-size: 18px 18px; content: ""; }
.kbms-photo-viewer-nav [data-photo-prev]::before { transform: rotate(90deg); }
.kbms-photo-viewer-nav [data-photo-next]::before { transform: rotate(-90deg); }
.kbms-photo-viewer-nav [data-photo-prev]:not(:disabled):hover, .kbms-photo-viewer-nav [data-photo-prev]:not(:disabled):focus-visible, .kbms-photo-viewer-nav [data-photo-next]:not(:disabled):hover, .kbms-photo-viewer-nav [data-photo-next]:not(:disabled):focus-visible { background: rgba(255, 255, 255, .14); }
.kbms-photo-viewer-nav [data-photo-prev]:not(:disabled):active, .kbms-photo-viewer-nav [data-photo-next]:not(:disabled):active { background: rgba(255, 255, 255, .24); }
.kbms-photo-viewer-nav [data-photo-prev]:disabled, .kbms-photo-viewer-nav [data-photo-next]:disabled, .kbms-photo-viewer-nav [data-photo-prev]:disabled:hover, .kbms-photo-viewer-nav [data-photo-next]:disabled:hover { border: 0; background: transparent; opacity: .35; cursor: default; box-shadow: none; }
.kbms-photo-viewer-info { padding: 40px 0; box-sizing: border-box; }
.kbms-photo-viewer-close { position: absolute; top: 16px; right: 16px; z-index: 2; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; }
.kbms-photo-viewer-close img { display: block; width: 20px; height: 20px; filter: brightness(0) invert(1); }
.kbms-photo-viewer-info dl { margin: 0; }
.kbms-photo-viewer-info dl > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .45); }
.kbms-photo-viewer-info dt { color: #FFFFFF; font-size: var(--fs-15); font-weight: 700; line-height: var(--lh); }
.kbms-photo-viewer-info dd { min-width: 0; margin: 0; color: #FFFFFF; font-size: var(--fs-15); line-height: var(--lh); overflow-wrap: anywhere; }
.kbms-photo-viewer-actions { position: absolute; right: 16px; bottom: 16px; min-height: 44px; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }

@media (max-width: 900px) {
	.kbms-photo-viewer { padding-bottom: 72px; }
	.kbms-photo-viewer-content { grid-template-columns: 1fr; }
	.kbms-photo-viewer-image { height: clamp(360px, 55vh, 560px); }
	.kbms-photo-viewer-actions { min-height: 0; }
}
/* 공통 검색 패널 */
.kbms-search-panel { padding: 8px; border: 1px solid var(--search-line); border-radius: 6px; background: var(--search-page-bg); }
.kbms-search-panel > div:not(.kbms-search-actions) { position: relative; min-width: 0; }
.kbms-search-panel > select, .kbms-search-panel > input, .kbms-search-panel > div:not(.kbms-search-actions) > select, .kbms-search-panel > div:not(.kbms-search-actions) > input { width: 100%; min-width: 0; }
.kbms-search-panel .ui-multiselect { width: 100% !important; }
.kbms-search-actions { display: flex; align-items: end; justify-content: flex-end; }
.kbms-search-actions button,
.kbms-search-actions input[type="button"] { width: 64px; min-width: 64px; }

/* =========================================================
	안내
========================================================= */
.kbms-guide { margin: 8px 0 12px; border: 1px solid var(--line-soft); border-radius: 6px; background: var(--bg); }
.kbms-guide > summary { width: 100%; min-height: 34px; padding: 0 10px; display: flex; align-items: center; justify-content: space-between; color: var(--text); font-family: inherit; font-size: var(--fs-13); font-weight: 700; line-height: var(--lh); text-align: left; list-style: none; cursor: pointer; }
.kbms-guide > summary::-webkit-details-marker { display: none; }
.kbms-guide > summary::after { content: ""; width: 12px; height: 12px; flex: 0 0 12px; background: url(../images/icons/ico_angle.svg) no-repeat 50% 50%; background-size: 12px 12px; transition: transform .15s; }
.kbms-guide[open] > summary::after { transform: rotate(180deg); }
.kbms-guide > summary:hover { background: var(--bg-soft); }
.kbms-guide > div { padding: 8px 12px; border-top: 1px solid var(--line-soft); color: var(--text); font-size: var(--fs-13); line-height: var(--lh); }
.kbms-guide > div p { margin: 0 0 4px; }
.kbms-guide > div ul { margin: 0; padding-left: 18px; }
.kbms-guide > div li + li { margin-top: 2px; }

/* 공통 안내문 */
.kbms-help { margin: 0; color: var(--text-muted); font-size: var(--fs-13); line-height: var(--lh); }
.kbms-help.is-info { display: flex; align-items: flex-start; gap: 6px; }
.kbms-help.is-info::before { content: ""; width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1px; background: url(../images/icons/ico_information_fill.svg) no-repeat 50% 50%; background-size: 16px 16px; }

/* =========================================================
	테이블 / 목록
========================================================= */
.table td.empty, table.kbms-table td.empty { color: var(--text-muted); text-align: center; }
.kbms-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--fs-13); line-height: var(--lh); color: var(--text); }
.kbms-table caption { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.kbms-table > tbody > tr { height: 28px; }
.kbms-table th { padding: 4px 5px; border: 1px solid var(--table-line); background: var(--table-head-bg); color: var(--text); font-size: var(--fs-13); font-weight: 700; line-height: var(--lh); text-align: center; white-space: normal; word-break: keep-all; vertical-align: middle; }
.kbms-table td { padding: 4px 5px; border: 1px solid var(--table-line); background: var(--bg); color: var(--text); font-size: var(--fs-13); line-height: var(--lh); vertical-align: middle; word-break: keep-all; }

/* 헤더 행이 있는 테이블 첫 행의 위쪽 테두리 제거 */
.kbms-table > thead:not(.blind):has(> tr) ~ tbody > tr:first-child > * { border-top: 0; }
.kbms-table .ellipsis, .kbms-table td.ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kbms-table .num, .kbms-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.kbms-table td.noData, .kbms-table td.empty { text-align: center; }

.kbms-table-list tr { background: var(--row-bg); }
.kbms-table-list tr:not(.nohover) td { cursor: pointer; }
.kbms-table-list tr:not(.nohover):hover td { background: var(--row-hover-bg); }
.kbms-table-list tr.nohover td { background: var(--row-bg); cursor: default; }
.kbms-table-list tr.selected td,
.kbms-table-list tr.selected:hover td { background: var(--row-selected-bg); }
.kbms-table-list td.year.hover { background: var(--row-hover-bg); }
.kbms-table-list td.year.selected { background: var(--row-selected-bg); }
.kbms-table-list td { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; }
.kbms-table-list td a { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kbms-table-file td { text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kbms-table-file td a, .kbms-table-file .fileItem span { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kbms-table .fileItem span { color: var(--primary); }

/* 공통 텍스트 정렬 유틸 */
.tl { text-align: left !important; }
.tc, .kbms-text-center { text-align: center !important; }
.tr { text-align: right !important; }

/* =========================================================
	로딩
========================================================= */
.kbms-loading { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--text-muted); font-size: var(--fs-13); line-height: var(--lh); }
.kbms-loading-inline { min-height: 40px; }
.kbms-loading-cell { height: 52px; padding: 0 !important; text-align: center !important; vertical-align: middle !important; color: var(--text-muted); }
.kbms-loading-cell .kbms-loading { min-height: 52px; overflow: visible; white-space: normal; }
.kbms-loading-spinner { display: inline-block; width: 16px; height: 16px; flex: 0 0 16px; border: 2px solid var(--line-soft); border-top-color: var(--primary); border-radius: 50%; animation: kbmsSpin .8s linear infinite; }
.kbms-loading-text { display: inline-block; color: var(--text-muted); font-size: var(--fs-13); line-height: var(--lh); }
.kbms-loading-cell .kbms-loading { position: relative; min-height: 64px; }
.kbms-loading-cell .kbms-loading-spinner { width: 28px; height: 28px; flex: 0 0 28px; border-width: 3px; }
.kbms-loading-cell .kbms-loading-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@keyframes kbmsSpin { to { transform: rotate(360deg); } }

/* =========================================================
	탭
========================================================= */
ul.tab.unit1 li { width: 100%; }
ul.tab.unit2 li { width: 50%; }
ul.tab.unit3 li { width: 33.33%; }
ul.tab.unit4 li { width: 25%; }
ul.tab.unit7 li { width: 14.28%; }
ul.tab.unit8 li { width: 12.5%; }
ul.tab { list-style: none; display: flex; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); }
ul.tab li { border-left: 1px solid var(--line); background: var(--bg); color: var(--text-strong); font-size: var(--fs-17); font-weight: 700; }
ul.tab li:first-child { border-left: none; }
ul.tab li a { display: flex; align-items: center; justify-content: center; height: 48px; padding: 0 12px; }
ul.tab li:not(.on):hover, ul.tab li:not(.on):focus-within { background: var(--header-hover-bg); color: var(--text-strong); }
ul.tab li:not(.on):active { background: var(--header-active-bg); color: var(--text-strong); }
ul.tab li.on, ul.tab li.on:hover, ul.tab li.on:focus-within, ul.tab li.on:active { background: var(--secondary); color: var(--text-white); }

/* =========================================================
	차트
========================================================= */
.chart-box { margin-top: 8px; padding: 18px 20px 16px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--bg); }
.chart-area { position: relative; width: 100%; height: 330px; }
.chart { width: 100%; height: 100%; }

/* =========================================================
	공통 모달
========================================================= */
.modal .inner { width: 100%; margin: auto; }
body .jquery-modal.blocker { z-index: 9500; padding: 20px; background-color: var(--dim); }
body .jquery-modal.blocker.behind { background-color: transparent; }
body .modal.kbms-modal { width: 90%; max-width: 560px; max-height: calc(100vh - 40px); padding: 34px 36px 32px; border-radius: 10px; background: var(--bg); box-shadow: none; overflow-y: auto; text-align: left; }
body #divPopup.kbms-modal:empty { visibility: hidden; }
body .modal.kbms-modal .kbms-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
body .modal.kbms-modal .kbms-modal-head h2 { margin: 0; color: var(--text-strong); font-size: var(--fs-20); font-weight: 700; line-height: 1.4; }
body .modal.kbms-modal .kbms-modal-close { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }
body .modal.kbms-modal .kbms-modal-close img { display: block; width: 20px; height: 20px; }
body .modal.kbms-modal .kbms-modal-body { color: var(--text); font-size: var(--fs-17); font-weight: 400; line-height: var(--lh); letter-spacing: 0; }
body .modal.kbms-modal .kbms-modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 28px; }
body .modal.kbms-modal .kbms-modal-actions .btn { min-width: 90px; height: 46px; padding: 0 16px; font-size: var(--fs-17); }

/* 동일 아이콘을 사용하는 접기/펼치기 버튼 */
.btn.kbms-angle-toggle::after { content: ""; width: 12px; height: 12px; flex: 0 0 12px; background: url(../images/icons/ico_angle.svg) no-repeat 50% 50%; background-size: 12px 12px; transition: transform .15s; }
.btn.kbms-angle-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }

/* 공통 디스클로저 버튼 */
.kbms-disclosure-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: transparent; color: var(--text-strong); font: inherit; cursor: pointer; }
.kbms-disclosure-toggle::before { content: ""; width: 20px; height: 20px; flex: 0 0 20px; background: url(../images/icons/ico_expand.svg) no-repeat 50% 50%; background-size: 20px 20px; transition: transform .15s; }
.kbms-disclosure-toggle[aria-expanded="true"]::before { transform: rotate(90deg); }
.kbms-disclosure-toggle:hover, .kbms-disclosure-toggle:focus-visible { color: var(--secondary); }

/* 세션 모달 */
#sessionModal .session-time { margin: 0 0 18px; color: var(--text-strong); font-size: var(--fs-24); font-weight: 700; line-height: var(--lh); }
#sessionModal .session-time strong { color: var(--primary); }
#sessionModal .kbms-modal-body > p:not(.session-time) { margin: 0; color: var(--text); font-size: var(--fs-17); line-height: 1.5; }


/* =========================================================
	목록 상단
========================================================= */
.list-util { clear: both; min-height: 30px; margin: 8px 0 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.list-count { color: var(--text-strong); font-size: var(--fs-13); font-weight: 700; line-height: var(--lh); }
.list-count strong, .list-count-num { color: var(--primary); font-weight: 700; }
.list-size-label { color: var(--text-strong); font-size: var(--fs-13); font-weight: 700; line-height: var(--lh); white-space: nowrap; }
section article .container .list-size-select, .list-size-select { width: auto; min-width: 58px; }

/* =========================================================
	페이징
========================================================= */
.kbms-paginator { padding-top: 8px; text-align: center; }
.kbms-paginator .page-number-group { display: inline-flex; align-items: center; gap: 6px; }
.kbms-paginator .paging_number, .kbms-paginator .page-prev, .kbms-paginator .page-next, .kbms-paginator .page-ellipsis { display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-13); line-height: 1; text-decoration: none; }
.kbms-paginator .paging_number { min-width: 28px; height: 28px; padding: 0 6px; border-radius: 6px; color: var(--text); }
.kbms-paginator strong.paging_number { background: var(--secondary); color: var(--text-white); font-weight: 700; }
.kbms-paginator a.paging_number:hover, .kbms-paginator a.paging_number:focus-visible { background: var(--bg-soft); color: var(--text-strong); }
.kbms-paginator .page-prev, .kbms-paginator .page-next { height: 28px; gap: 2px; padding: 0 2px; color: var(--text-muted); }
.kbms-paginator .page-prev::before, .kbms-paginator .page-next::after { content: ""; width: 14px; height: 14px; background: var(--text-muted); -webkit-mask: url(../images/icons/ico_angle.svg) no-repeat 50% 50%; mask: url(../images/icons/ico_angle.svg) no-repeat 50% 50%; -webkit-mask-size: 14px 14px; mask-size: 14px 14px; }
.kbms-paginator .page-prev::before { transform: rotate(90deg); }
.kbms-paginator .page-next::after { transform: rotate(-90deg); }
.kbms-paginator .page-prev:hover, .kbms-paginator .page-next:hover, .kbms-paginator .page-prev:focus-visible, .kbms-paginator .page-next:focus-visible { border-radius: 6px; background: var(--bg-soft); color: var(--text-strong); }
.kbms-paginator .page-prev:hover::before, .kbms-paginator .page-next:hover::after, .kbms-paginator .page-prev:focus-visible::before, .kbms-paginator .page-next:focus-visible::after { background: var(--text-strong); }
.kbms-paginator .disabled { color: var(--text-subtle); pointer-events: none; }
.kbms-paginator .disabled::before, .kbms-paginator .disabled::after { background: var(--text-subtle); }
.kbms-paginator .page-ellipsis { min-width: 28px; height: 28px; padding: 0 6px; }
.kbms-paginator .page-ellipsis::before { content: "···"; }

/* =========================================================
	공통 달력
========================================================= */
img.ui-datepicker-trigger, button.ui-datepicker-trigger { width: 16px !important; height: 16px !important; padding: 0; border: 0; vertical-align: middle; cursor: pointer; }
img.ui-datepicker-trigger { content: url('../images/icons/ico_calendar.svg'); object-fit: contain; }
button.ui-datepicker-trigger { background: transparent url('../images/icons/ico_calendar.svg') no-repeat center / 16px 16px; text-indent: -9999px; overflow: hidden; }
.kbms-date-cell { white-space: nowrap; }
.kbms-date-cell input.hasDatepicker, .kbms-search-panel > div:not(.kbms-search-actions) > input.hasDatepicker { width: 100% !important; padding-right: 28px; box-sizing: border-box; display: inline-block; vertical-align: middle; }
input.hasDatepicker[readonly]:not(:disabled):not([aria-disabled="true"]) { background-color: var(--input-bg) !important; color: var(--text) !important; cursor: pointer; }
.kbms-date-cell .ui-datepicker-trigger { margin-left: -24px; margin-right: 6px; display: inline-block; position: relative; z-index: 1; }
.kbms-date-cell input.hasDatepicker:disabled + .ui-datepicker-trigger { display: none; }
.kbms-search-panel > div:not(.kbms-search-actions) > .ui-datepicker-trigger { position: absolute; right: 8px; bottom: 6px; z-index: 1; margin: 0; display: block; }
.kbms-control-row .kbms-date-cell { flex: 1 1 0; min-width: 0; }
.kbms-date-stack { display: flex; flex-direction: column; gap: 4px; width: 100%; min-width: 0; }
.kbms-date-stack .kbms-date-cell { display: block; width: 100%; }
#ui-datepicker-div.ui-datepicker { box-sizing: border-box; width: 280px; max-width: calc(100vw - 32px); overflow: hidden; border-radius: 12px; background: var(--secondary-bg); color: var(--text); font-family: inherit; box-shadow: 0 8px 24px rgba(30, 33, 36, .12); }
#ui-datepicker-div .ui-datepicker-header { position: relative; min-height: 52px; padding: 12px 44px 8px; border: 0; border-radius: 0; background: transparent; color: var(--text-strong); }
#ui-datepicker-div .ui-datepicker-prev, #ui-datepicker-div .ui-datepicker-next { top: 14px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 50%; background: var(--bg); cursor: pointer; }
#ui-datepicker-div .ui-datepicker-prev { left: 16px; }
#ui-datepicker-div .ui-datepicker-next { right: 16px; }
#ui-datepicker-div .ui-datepicker-prev:hover, #ui-datepicker-div .ui-datepicker-next:hover, #ui-datepicker-div .ui-datepicker-prev:focus-visible, #ui-datepicker-div .ui-datepicker-next:focus-visible { top: 14px; border-color: var(--line-strong); background: var(--bg-soft); }
#ui-datepicker-div .ui-datepicker-prev:hover { left: 16px; }
#ui-datepicker-div .ui-datepicker-next:hover { right: 16px; }
#ui-datepicker-div .ui-datepicker-prev span, #ui-datepicker-div .ui-datepicker-next span { display: none; }
#ui-datepicker-div .ui-datepicker-prev::before, #ui-datepicker-div .ui-datepicker-next::before { content: ""; width: 12px; height: 12px; background: var(--text); -webkit-mask: url(../images/icons/ico_angle.svg) no-repeat 50% 50%; mask: url(../images/icons/ico_angle.svg) no-repeat 50% 50%; -webkit-mask-size: 12px 12px; mask-size: 12px 12px; }
#ui-datepicker-div .ui-datepicker-prev::before { transform: rotate(90deg); }
#ui-datepicker-div .ui-datepicker-next::before { transform: rotate(-90deg); }
#ui-datepicker-div .ui-datepicker-title { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 28px; margin: 0; color: var(--text-strong); font-size: var(--fs-15); font-weight: 700; line-height: 28px; }
#ui-datepicker-div .ui-datepicker-title select { width: auto; height: 28px; min-height: 28px; margin: 0; padding: 0 16px 0 2px; border: 0; border-radius: 0; background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1 3h8L5 8z' fill='%231E2124'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; background-size: 10px 10px; color: var(--text-strong); font-family: inherit; font-size: var(--fs-15); font-weight: 700; line-height: 28px; cursor: pointer; appearance: none; -webkit-appearance: none; }
#ui-datepicker-div [data-kbms-datepicker-caption] { padding: 0 16px 4px; color: var(--text-muted); font-size: var(--fs-13); font-weight: 700; line-height: var(--lh); }
#ui-datepicker-div .ui-datepicker-calendar { width: calc(100% - 24px); margin: 0 12px 12px; border-collapse: separate; border-spacing: 0 4px; }
#ui-datepicker-div .ui-datepicker-calendar th { height: 28px; padding: 0; border: 0; background: transparent; color: var(--text); font-size: var(--fs-13); font-weight: 600; text-align: center; }
#ui-datepicker-div .ui-datepicker-calendar th span { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 28px; }
#ui-datepicker-div .ui-datepicker-calendar td { width: 14.285%; height: 32px; padding: 0; border: 0; background: transparent; text-align: center; }
#ui-datepicker-div .ui-datepicker-calendar td span, #ui-datepicker-div .ui-datepicker-calendar td a { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0 auto; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text); font-size: var(--fs-13); font-weight: 400; line-height: 1; text-align: center; }
#ui-datepicker-div .ui-datepicker-calendar td a:hover, #ui-datepicker-div .ui-datepicker-calendar td a:focus-visible { background: var(--color-secondary-10); color: var(--text-strong); outline: none; }
#ui-datepicker-div .ui-datepicker-calendar td:first-child:not(.ui-datepicker-other-month) a { color: var(--color-danger-50); }
#ui-datepicker-div .ui-datepicker-calendar .ui-datepicker-unselectable { opacity: 1; }
#ui-datepicker-div .ui-datepicker-calendar .ui-datepicker-other-month .ui-state-default, #ui-datepicker-div .ui-datepicker-calendar .ui-datepicker-unselectable .ui-state-default { background: transparent; color: var(--color-gray-40); opacity: 1; cursor: default; pointer-events: none; }
#ui-datepicker-div .ui-datepicker-calendar .ui-datepicker-today a { background: var(--bg); color: var(--text-strong); font-weight: 700; box-shadow: 0 1px 3px rgba(30, 33, 36, .08); }
#ui-datepicker-div .ui-datepicker-calendar .ui-datepicker-today a:hover, #ui-datepicker-div .ui-datepicker-calendar .ui-datepicker-today a:focus-visible { background: var(--color-secondary-10); color: var(--text-strong); }
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-today:first-child a { color: var(--color-danger-50); }
#ui-datepicker-div .ui-datepicker-calendar .ui-datepicker-current-day a, #ui-datepicker-div .ui-datepicker-calendar .ui-datepicker-current-day a:hover, #ui-datepicker-div .ui-datepicker-calendar .ui-datepicker-current-day a:focus-visible, #ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-current-day:first-child a, #ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-current-day:first-child a:hover, #ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-current-day:first-child a:focus-visible { background: var(--color-secondary-70); color: var(--text-white); font-weight: 700; box-shadow: 0 0 0 2px var(--secondary-bg), 0 0 0 4px var(--color-primary-50); }
#ui-datepicker-div .ui-datepicker-buttonpane { box-sizing: border-box; display: flex; align-items: center; width: 100%; min-height: 52px; margin: 0; padding: 10px 16px; border: 0; border-top: 1px solid var(--line); background: var(--bg); }
#ui-datepicker-div .ui-datepicker-buttonpane button { float: none; margin: 0; }
#ui-datepicker-div .ui-datepicker-buttonpane .ui-datepicker-current { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 30px; padding: 0 12px; border: 0; border-radius: 6px; background: var(--bg); color: var(--text); font-size: var(--fs-13); font-weight: 400; opacity: 1; }
#ui-datepicker-div .ui-datepicker-buttonpane .ui-datepicker-current:hover, #ui-datepicker-div .ui-datepicker-buttonpane .ui-datepicker-current:focus-visible { background: var(--bg-hover); }
#ui-datepicker-div .ui-datepicker-buttonpane .ui-datepicker-current:active { background: var(--bg-active); }
#ui-datepicker-div [data-kbms-datepicker-actions] { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
#ui-datepicker-div [data-kbms-datepicker-actions] .btn { min-width: 48px; height: 30px; padding: 0 12px; font-size: var(--fs-13); }