/* Form controls */ .input, .select, .textarea, .search-input, .search-select, .admin-search, .admin-form-row input, .admin-form-row select, .admin-form-row textarea {width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-base); background: #fff; padding: 8px 10px; color: var(--color-text); font-size: var(--font-size-base);}
.input, .select, .search-input, .search-select, .admin-search, .admin-form-row input, .admin-form-row select {height: var(--control-height);}
.textarea, .admin-form-row textarea {min-height: 74px; resize: none;}
input:focus, select:not([data-select]):focus, textarea:focus {border-color: var(--color-primary); outline: 2px solid color-mix(in srgb, var(--color-brand) 12%, transparent); outline-offset: 0;}
input:disabled, select:disabled, textarea:disabled, input[readonly], textarea[readonly] {background: var(--color-surface-soft); color: var(--color-text-muted);}
.admin-form-row input.error, .admin-form-row select.error, .admin-form-row textarea.error {border-color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 4%, var(--neutral-white));}
.admin-field-error {display: none; margin-top: 6px; color: var(--color-danger); font-size: var(--font-size-xs); line-height: 1.45;}
.admin-field-error.active {display: block;}
.field-error {margin-top: 6px; color: var(--color-danger); font-size: var(--font-size-sm); line-height: 1.45;}
.field-error:empty {display: none;}
/* Published sub-page common table and definition-list component. */

.styleTable {
    overflow-x: auto;
}
.styleTable table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    background: var(--color-panel);
}
.styleTable thead th {
    height: var(--table-head-height);
    padding: 10px 8px;
    border-top: 1px solid var(--color-border-strong);
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-size: var(--font-size-md);
    font-weight: 800;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}
.styleTable thead th:last-child,
.styleTable tbody td:last-child {
    border-right: 0;
}
.styleTable tbody td {
    padding: var(--table-row-pad-y) var(--table-row-pad-x);
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-panel);
    color: var(--color-text-primary);
    font-size: var(--ui-table-size);
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    word-break: keep-all;
}
.styleTable.-wrap thead th,
.styleTable.-wrap tbody td {
    white-space: normal !important;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.styleTable tbody a {
    color: var(--color-link);
    font-size: var(--ui-table-size);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.styleTable tbody .stepX td {background-color: var(--tab-depth-1);}
.styleTable tbody .stepXY td {background-color: var(--tab-depth-2);}
.styleTable tbody .stepXY:nth-child(1) td {border-top: 2px solid var(--color-border-strong);}
.styleTable tbody .stepXYZ td {background-color: var(--tab-depth-3);}
.styleTable tbody .stepXYZX td {background-color: var(--tab-depth-4);}
.styleTable tbody .stepXYZXY td {background-color: var(--tab-depth-5);}
.styleTable tbody .stepXYZXYZ td {background-color: var(--tab-depth-6);}
.styleTable tbody .stepXY td:nth-child(2) {padding-left: 20px;}
.styleTable tbody .stepXYZ td:nth-child(2) {padding-left: 40px;}
.styleTable tbody .stepXYZX td:nth-child(2) {padding-left: 60px;}
.styleTable tbody .stepXYZXY td:nth-child(2) {padding-left: 80px;}
.styleTable tbody .stepXYZXYZ td:nth-child(2) {padding-left: 100px;}
.styleTable input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.styleTable input[type="checkbox"] + label {
    position: relative;
    display: inline-block;
    width: var(--table-checkbox-size);
    height: var(--table-checkbox-size);
    vertical-align: middle;
    cursor: pointer;
}
.styleTable input[type="checkbox"] + label::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--icon-check-empty) center / contain no-repeat;
}
.styleTable input[type="checkbox"]:checked + label::before {
    background-image: var(--icon-check-check);
}
.styleTable.-s1 dl {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 260px minmax(0, 1fr);
    border-top: 1px solid var(--color-border-strong);
    border-bottom: 1px solid var(--color-border);
}
.styleTable.-s1 dl + dl {
	border-top-width: 0;
}
.styleTable.-s1 dt {
    min-height: 68px;
    margin: 0;
    display: flex;
    align-items: center;
    padding: 0 24px;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-size: var(--font-size-md);
    font-weight: 700;
}
.styleTable.-s1 dd {
    min-height: 68px;
    margin: 0;
    display: flex;
    align-items: center;
    padding: 0 24px;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    column-gap: 14px;
    row-gap: 4px;
    align-content: center;
    flex-wrap: wrap;
    color: var(--color-text-primary);
    font-size: var(--font-size-md);
    font-weight: 700;
}
.styleTable.-s1 dd .field-error {
    flex-basis: 100%;
    margin-top: 0;
}
.styleTable.-s1 dl > :nth-last-child(-n + 4) {
    border-bottom: 0;
}
.styleTable.-s1 dd:last-child {
    border-right: 0;
}
/* 마지막 행이 dt 1칸 + dd 3칸 병합으로 구성되는 정의 목록 */
.styleTable.-s1.-last-wide dd:last-child {
    grid-column: span 3;
}
.styleTable.-s1.-last-wide dl > :nth-last-child(4),
.styleTable.-s1.-last-wide dl > :nth-last-child(3) {
    border-bottom: 1px solid var(--color-border);
}
/******************************************************************************************************************************/
.styleTable th.-border-right {
    border-right: 1px solid var(--color-border) !important;
}
.styleTable.-s1 dd.-colspan2 {
    grid-column: span 2;
}
.styleTable.-s1 dd.-colspan3 {
    grid-column: span 3;
}
/* 검색조건처럼 행이 많은 정의 목록은 행 높이를 줄여 아래 목록이 한 화면에 더 보이게 한다. */
.styleTable.-s1.-compact dt,
.styleTable.-s1.-compact dd {
    min-height: 46px;
    padding-top: 4px;
    padding-bottom: 4px;
}
/* 목록·조회용 th/td 표도 같은 기준으로 셀 여백을 줄인다. 입력 폼 표에는 붙이지 않는다. */
.styleTable.-s2.-compact table > thead > tr > th,
.styleTable.-s2.-compact table > tbody > tr > th,
.styleTable.-s2.-compact table > tbody > tr > td {
    padding: 8px 6px;
    line-height: 1.4;
}
/******************************************************************************************************************************/
.page-description,
.section-description {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-md);
    line-height: var(--line-height-base);
}
.page-description {
    margin-bottom: 20px;
}
.subTitle + .section-description {
    margin-top: 8px;
}
.guide-note-list {
    margin: 16px 0 0;
    padding-left: 18px;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.7;
}
.contentWrap > section + section {
    margin-top: var(--layout-section-block-gap);
}
.app-content-body:has(> .cnsl-application-guide-screen) {
    --layout-content-gap: 28px;
}
.subContent:has(.cnsl-application-guide-screen) > .pageTitle {
    margin-bottom: 26px;
}
@media (max-width: 1024px) {
    .styleTable.-s1 dl {
        grid-template-columns: 180px minmax(0, 1fr);
    }
    .styleTable.-s1.-last-wide dd:last-child {
        grid-column: span 1;
    }
    .styleTable.-s1 dd:nth-child(4n) {
        border-right: 1px solid var(--color-border);
    }
    .styleTable.-s1 dd:nth-child(2n) {
        border-right: 0;
    }
    .styleTable.-s1 dl > :nth-last-child(-n + 4) {
        border-bottom: 1px solid var(--color-border);
    }
    .styleTable.-s1 dl > :nth-last-child(-n + 2) {
        border-bottom: 0;
    }
}
label.required::after, .admin-form-row label.required::after {content: " *"; color: var(--color-danger);}
/* Buttons */ .button, .admin-btn, .bbs-btn {display: inline-flex; height: var(--control-height); align-items: center; justify-content: center; border: 1px solid var(--color-primary); border-radius: var(--radius-base); background: var(--color-primary); padding: 0 16px; color: var(--neutral-white); font-size: var(--font-size-base); font-weight: 600; text-decoration: none; cursor: pointer;}
.button:hover, .admin-btn.primary:hover, .bbs-btn:hover {border-color: var(--color-primary-dark); background: var(--color-primary-dark);}
.button.secondary, .admin-btn {border-color: var(--color-border); background: var(--color-surface); color: var(--color-text-secondary);}
.admin-btn {height: 36px; padding: 0 13px; font-size: var(--font-size-sm);}
.admin-btn.primary {border-color: var(--color-primary); background: var(--color-accent); color: var(--neutral-white);}
.admin-btn.danger {border-color: color-mix(in srgb, var(--color-danger) 30%, var(--neutral-white)); background: var(--color-surface); color: var(--color-danger);}
.button:disabled, .admin-btn:disabled, .bbs-btn:disabled {cursor: default; opacity: 0.5;}
/* .button 등이 display:inline-flex를 강제해 UA [hidden]{display:none}을 덮어써 버리는 문제 — 명시적으로 복구 */
.button[hidden], .admin-btn[hidden], .bbs-btn[hidden] {display: none;}
/* Custom file input — .file-box (권장), .cert-file-box (기존 alias) */
.file-box,
.cert-file-box {
    display: flex;
    align-items: center;
    gap: 8px;
}
.file-box .file-name,
.cert-file-box .cert-file-name {
    flex: 1 1 auto;
    min-width: 0;
}
.file-box .file-input,
.cert-file-box .cert-file-input {
    display: none;
}
.file-box .file-browse,
.cert-file-box .cert-file-browse {
    flex: 0 0 auto;
    margin: 0;
}
.file-hint,
.cert-file-hint {
    margin-top: 8px;
    color: var(--color-brand);
    font-size: var(--font-size-xs);
    line-height: 1.45;
}
/* Tables — 너비는 화면별 colgroup으로 관리 (table-layout: fixed) */
.table-wrap, .bbs-table-wrap {overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-base); background: var(--color-surface);}
.table, .bbs-table, .admin-table {width: 100%; border-collapse: collapse; table-layout: fixed;}
.table th, .table td, .bbs-table th, .bbs-table td, .admin-table th, .admin-table td {height: auto; min-height: 42px; border-bottom: 1px solid var(--color-border-light); padding: 8px 10px; color: var(--color-text-primary); font-size: var(--font-size-table); line-height: var(--line-height-tight); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.table th, .bbs-table th, .admin-table th {background: var(--color-surface-subtle); color: var(--color-text-muted); font-weight: 600;}
.table tr:last-child td, .bbs-table tr:last-child td {border-bottom: 0;}
.admin-table th {position: sticky; top: 0; z-index: 1;}
/* 행 클릭 동작이 있는 목록만 손가락 커서를 쓴다. data 속성으로 클릭을 거는 행은 도메인 CSS에서 지정한다. */
tr.is-clickable, tr.admin-list-row, tr[role="button"] {cursor: pointer;}
.admin-table tr:hover td, .admin-table tr.active td {background: var(--color-primary-soft);}
.admin-table .check-cell {text-align: center;}
.admin-table .select,
.admin-table .button,
.admin-table .admin-btn {font-size: var(--font-size-table);}
.admin-table .select {height: 30px; padding: 0 8px;}
.admin-table .button,
.admin-table .admin-btn {height: 30px; min-height: 30px; padding: 0 10px;}
a.link, button.link {color: var(--palette-slate); text-decoration: underline;}
button.link {border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit; text-align: left;}
.empty, .bbs-empty, .admin-empty {height: 120px; color: var(--color-text-muted); text-align: center;}
/* Pagination */ .pagination {display: flex; align-items: center; justify-content: center; gap: 2px; margin-top: 18px;}
.page-button {min-width: 30px; height: 32px; border: 0; background: transparent; padding: 0 6px; color: var(--color-text-subtle); font-size: var(--font-size-base); font-weight: 400; cursor: pointer;}
.page-button:hover:not(:disabled) {color: var(--color-primary-dark);}
.page-button.active {color: var(--color-primary); font-weight: 800;}
.page-button.active:disabled {opacity: 1;}
.page-button.navigation {color: var(--color-text-muted); font-size: 20px; line-height: 1;}
.page-button:disabled {cursor: default; opacity: 0.3;}
/* Feedback */ .global-loading {position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; background: color-mix(in srgb, var(--neutral-white) 38%, transparent); backdrop-filter: blur(1px);}
.global-loading.is-active {display: flex;}
.global-loading-box {display: flex; width: 64px; height: 64px; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--color-brand) 18%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--neutral-white) 92%, transparent); box-shadow: 0 8px 24px var(--shadow-soft);}
.global-loading-spinner {width: 30px; height: 30px; border: 3px solid color-mix(in srgb, var(--color-brand) 25%, var(--neutral-white)); border-top-color: var(--color-primary); border-radius: 50%; animation: globalLoadingSpin 0.75s linear infinite;}
@keyframes globalLoadingSpin {
    to {transform: rotate(360deg);}
}
.common-toast-container {position: fixed; right: 24px; bottom: 52px; z-index: 10020; display: flex; width: min(360px, calc(100vw - 32px)); flex-direction: column-reverse; gap: 10px; pointer-events: none;}
.common-toast {transform: translateY(28px); opacity: 0; border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary); border-radius: var(--radius-base); background: var(--neutral-white); box-shadow: 0 12px 28px var(--shadow-card); padding: 13px 16px; color: var(--color-text-primary); font-size: var(--font-size-base); font-weight: 600; line-height: 1.45; transition: transform 0.24s ease, opacity 0.24s ease;}
.common-toast.is-visible {transform: translateY(0); opacity: 1;}
.common-toast.success {border-left-color: var(--palette-olive);}
.common-toast.error {border-left-color: var(--color-danger);}
.common-toast.info {border-left-color: var(--color-primary);}
.common-confirm-overlay {position: fixed; inset: 0; z-index: 10010; display: none; align-items: center; justify-content: center; background: var(--neutral-overlay); padding: 20px;}
.common-confirm-overlay.is-visible {display: flex;}
.common-confirm-dialog {width: min(400px, 100%); border-radius: var(--radius-panel); background: var(--neutral-white); box-shadow: 0 20px 50px var(--shadow-layer); padding: 22px;}
.common-confirm-title {margin: 0 0 12px; color: var(--color-text); font-size: var(--font-size-lg); font-weight: 700;}
.common-confirm-message {margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-base); line-height: 1.6; white-space: pre-line;}
.common-confirm-actions {display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px;}
.common-confirm-button {height: 36px; border: 1px solid var(--color-border); border-radius: var(--radius-base); background: var(--neutral-white); padding: 0 15px; color: var(--color-text-secondary); font-weight: 600; cursor: pointer;}
.common-confirm-button.primary {border-color: var(--color-primary); background: var(--color-primary); color: var(--neutral-white);}
/* Shared content patterns */
.actions, .bbs-actions {display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px;}
.bbs-title-row .bbs-actions {margin-top: 0;}
.bbs-btn.secondary {border-color: var(--color-border); background: var(--color-surface); color: var(--color-text-secondary);}
.bbs-btn.danger {border-color: color-mix(in srgb, var(--color-danger) 30%, var(--neutral-white)); background: var(--color-surface); color: var(--color-danger);}
.table-wrap table {width: 100%; border-collapse: collapse; table-layout: fixed;}
.table-wrap th, .table-wrap td {height: auto; min-height: 36px; border-bottom: 1px solid var(--color-border-light); padding: 4px 6px; color: var(--color-text-primary); font-size: var(--font-size-table); text-align: left;}
.table-wrap th {background: var(--color-surface-subtle); color: var(--color-text-muted); font-weight: 600;}
.table-wrap tr:last-child td {border-bottom: 0;}
.bbs-input, .bbs-textarea {width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-base); background: var(--color-surface); padding: 8px 10px; color: var(--color-text); font-size: var(--font-size-base);}
.bbs-input {height: var(--control-height);}
.sample-form-screen .textarea {min-height: 120px; padding-top: 10px;}
/* Screen-specific compatibility */
/* sample-list-screen */ .page.sample-list-screen {max-width: 1080px; margin: 0 auto; padding: 32px 24px;}
.sample-list-screen .toolbar {display: flex; align-items: center; gap: 8px; margin-bottom: 16px;}
.sample-list-screen .search-input {width: 280px; height: 38px; border: 1px solid var(--color-border); border-radius: 4px; padding: 0 12px; background: var(--neutral-white);}
.sample-list-screen .search-select {width: 130px; height: 38px; border: 1px solid var(--color-border); border-radius: 4px; padding: 0 10px; background: var(--neutral-white);}
.page.sample-list-screen-unit-select {width: 90px; margin-left: auto;}
.sample-list-screen .empty {height: 120px; text-align: center; color: var(--color-text-muted);}
.sample-list-screen .summary {margin-top: 10px; color: var(--color-text-muted); font-size: 13px; text-align: right;}
/* sample-form-screen */ .page.sample-form-screen {max-width: 880px; margin: 0 auto; padding: 32px 24px;}
.sample-form-screen .form-panel {border: 1px solid var(--color-border); border-radius: 6px; background: var(--neutral-white);}
.sample-form-screen .form-row {display: grid; grid-template-columns: 170px 1fr; min-height: 58px; border-bottom: 1px solid var(--color-border-soft);}
.sample-form-screen .form-row:last-child {border-bottom: 0;}
.sample-form-screen .form-label {display: flex; align-items: center; padding: 0 16px; background: var(--color-surface-soft); color: var(--color-text-secondary); font-weight: 700;}
.sample-form-screen .form-field {padding: 12px 16px;}
.sample-form-screen .required {margin-left: 4px; color: var(--color-danger);}
.sample-form-screen .textarea {  resize: vertical;}
.sample-form-screen .field-error {margin-top: 6px; color: var(--color-danger); font-size: 13px; line-height: 1.45;}
.sample-form-screen .hint {margin-top: 6px; color: var(--color-text-muted); font-size: 12px; line-height: 1.45;}
.sample-form-screen .actions {display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px;}
.sample-form-screen .alert {display: none; margin-bottom: 14px; border: 1px solid color-mix(in srgb, var(--color-danger) 25%, var(--neutral-white)); border-radius: 6px; background: color-mix(in srgb, var(--color-danger) 6%, var(--neutral-white)); padding: 12px 14px; color: var(--color-danger); font-size: 14px; line-height: 1.5;}
.sample-form-screen .file-dropzone {display: flex; min-height: 86px; align-items: center; justify-content: center; border: 1px dashed var(--color-text-subtle); border-radius: 6px; background: var(--neutral-50); color: var(--color-text-secondary); font-size: 14px; cursor: pointer;}
.sample-form-screen .file-dropzone.dragover {border-color: var(--palette-slate); background: var(--color-brand-soft); color: var(--palette-slate);}
.sample-form-screen .file-input-hidden {position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none;}
.sample-form-screen .file-list-title {margin-top: 10px; color: var(--color-text-secondary); font-size: 13px; font-weight: 700;}
.sample-form-screen .current-file-section {margin-top: 12px;}
.sample-form-screen .current-file-section .file-list-title {margin-top: 0;}
.sample-form-screen .file-actions {display: inline-flex; gap: 8px; flex-shrink: 0;}
.sample-form-screen .file-link, .sample-form-screen .file-delete {border: 0; background: transparent; color: var(--palette-slate); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer;}
.sample-form-screen .file-delete {color: var(--color-danger);}
.sample-form-screen .file-list {margin: 6px 0 0; padding: 0; list-style: none;}
.sample-form-screen .file-list li {display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; border-bottom: 1px solid var(--color-border-soft); color: var(--color-text-secondary); font-size: 13px;}
.sample-form-screen .file-remove {border: 0; background: transparent; color: var(--color-danger); cursor: pointer; font-size: 12px;}
/* sample-detail-screen */ .page.sample-detail-screen {max-width: 860px; margin: 0 auto; padding: 32px 24px;}
.sample-detail-screen .detail {border: 1px solid var(--color-border); border-radius: 6px; background: var(--neutral-white);}
.sample-detail-screen .row {display: grid; grid-template-columns: 160px 1fr; min-height: 48px; border-bottom: 1px solid var(--color-border-soft);}
.sample-detail-screen .row:last-child {border-bottom: 0;}
.sample-detail-screen .label {display: flex; align-items: center; padding: 0 16px; background: var(--color-surface-soft); color: var(--color-text-secondary); font-weight: 700;}
.sample-detail-screen .value {display: flex; align-items: center; padding: 12px 16px; line-height: 1.5;}
.sample-detail-screen .actions {display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px;}
.sample-detail-screen .message {min-height: 120px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--neutral-white); padding: 36px 16px; text-align: center; color: var(--color-text-muted);}
.sample-detail-screen .file-items {width: 100%; margin: 0; padding: 0; list-style: none;}
.sample-detail-screen .file-item {display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; border-bottom: 1px solid var(--color-border-soft);}
.sample-detail-screen .file-item:last-child {border-bottom: 0;}
.sample-detail-screen .file-actions {display: inline-flex; gap: 6px; flex-shrink: 0;}
.sample-detail-screen .file-link {border: 0; background: transparent; color: var(--palette-slate); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer;}
/* bbs-list-screen */ .bbs-page.bbs-list-screen {max-width: 1280px; margin: 0 auto; padding: 32px 28px 56px;}
.bbs-list-screen .bbs-title-row {display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-bottom: 18px;}
.bbs-list-screen .bbs-actions {display: flex; gap: 8px;}
.bbs-list-screen .bbs-title-link {color: var(--color-text-primary); font-weight: 500; text-decoration: none;}
.bbs-list-screen .bbs-title-link:hover {color: var(--color-brand-font);}
.bbs-list-screen .bbs-empty {height: 140px; color: var(--color-text-muted); text-align: center;}
/* bbs-form-screen */ .bbs-page.bbs-form-screen {max-width: 960px; margin: 0 auto; padding: 32px 28px 56px;}
.bbs-form-screen .bbs-form {border: 1px solid var(--color-border-soft); border-radius: 6px; background: var(--neutral-white);}
.bbs-form-screen .bbs-form-row {display: grid; grid-template-columns: 160px 1fr; min-height: 58px; border-bottom: 1px solid var(--color-border-soft);}
.bbs-form-screen .bbs-form-row:last-child {border-bottom: 0;}
.bbs-form-screen .bbs-label {display: flex; align-items: center; padding: 0 16px; background: var(--neutral-50); color: var(--color-text-muted); font-weight: 600;}
.bbs-form-screen .bbs-label.required::after {content: " *"; color: var(--color-danger);}
.bbs-form-screen .bbs-field {padding: 12px 16px;}
.bbs-form-screen .bbs-textarea {min-height: 260px; resize: vertical;}
.bbs-form-screen .bbs-auth-list {display: flex; flex-wrap: wrap; gap: 8px;}
.bbs-form-screen .bbs-auth-chip {display: inline-flex; min-height: 32px; align-items: center; gap: 5px; border: 1px solid var(--color-border); border-radius: 16px; background: var(--neutral-50); padding: 0 10px; font-size: 13px; font-weight: 600;}
.bbs-form-screen .bbs-actions {display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px;}
.bbs-form-screen .bbs-error {display: none; margin-top: 6px; color: var(--color-danger); font-size: 13px;}
.bbs-form-screen .bbs-help {margin-top: 6px; color: var(--color-text-muted); font-size: 13px;}
.bbs-form-screen .bbs-file-list {margin: 8px 0 0; padding: 0; list-style: none;}
.bbs-form-screen .bbs-file-list li {display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: 14px;}
.bbs-form-screen .bbs-file-list .bbs-btn {height: 28px; padding: 0 10px; font-size: 13px;}
/* bbs-detail-screen */ .bbs-page.bbs-detail-screen {max-width: 1040px; margin: 0 auto; padding: 32px 28px 56px;}
.bbs-detail-screen .bbs-detail {background: var(--neutral-white);}
.bbs-detail-screen .bbs-detail-head {border-bottom: 1px solid var(--color-border-soft); padding: 22px 18px;}
.bbs-detail-screen .bbs-detail-head h1 {margin: 0; color: var(--color-text-primary); font-size: 24px; font-weight: 700;}
.bbs-detail-screen .bbs-meta {display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; color: var(--color-text-muted); font-size: 13px;}
.bbs-detail-screen .bbs-content {min-height: 260px; border-bottom: 1px solid var(--color-border-soft); padding: 24px 18px; color: var(--color-text-primary); font-size: 15px; line-height: 1.7; white-space: pre-wrap;}
.bbs-detail-screen .bbs-answer {border-bottom: 1px solid var(--color-border-soft); background: var(--neutral-white); padding: 22px 18px;}
.bbs-detail-screen .bbs-answer-title {margin: 0 0 10px; color: var(--color-text-primary); font-size: 16px; font-weight: 600;}
.bbs-detail-screen .bbs-answer-content {color: var(--color-text-primary); font-size: 15px; line-height: 1.7; white-space: pre-wrap;}
.bbs-detail-screen .bbs-files {display: grid; grid-template-columns: 140px minmax(0, 1fr); min-height: 56px; border-bottom: 1px solid var(--color-border-soft); padding: 0;}
.bbs-detail-screen .bbs-file-title {display: flex; align-items: center; align-self: stretch; margin: 0; padding: 0 18px; border-right: 1px solid var(--color-border-soft); background: var(--color-surface); color: var(--color-text-primary); font-size: 14px; font-weight: 700;}
.bbs-detail-screen .bbs-file-content {display: flex; align-items: center; min-width: 0; padding: 12px 18px; color: var(--color-text-secondary); font-size: 14px;}
.bbs-detail-screen .bbs-file-list {width: 100%; margin: 0; padding: 0; list-style: none;}
.bbs-detail-screen .bbs-file-list li {min-height: 28px; color: var(--color-text-secondary); font-size: 14px;}
.bbs-detail-screen .bbs-file-list a {color: var(--color-brand-font); font-weight: 500; text-decoration: none;}
.bbs-detail-screen .bbs-actions {display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px;}
/* 퍼블리셔 기준 샘플 게시판 공통 구성 */
.sample-list-screen .toolbar { flex-wrap:wrap;   margin-bottom:18px; padding:18px 20px; border:1px solid var(--color-border); background:var(--color-surface-soft);}
.sample-list-screen .search-input, .sample-list-screen .search-select {height:38px; border:1px solid var(--color-border); border-radius:2px; padding:0 12px; background:var(--color-panel); color:var(--color-text-primary); font-size:var(--font-size-sm);}
.sample-list-screen .search-input {min-width:240px;}
.sample-list-screen .table-wrap {overflow-x:auto; border-top:2px solid var(--color-text-primary);}
.sample-list-screen .table-wrap table {width:100%; table-layout:fixed;}
.sample-list-screen .table-wrap th {height:52px; border-bottom:1px solid var(--color-border); background:var(--color-surface); font-weight:800;}
.sample-list-screen .table-wrap td {height:52px; border-bottom:1px solid var(--color-border-soft); padding:8px 12px; text-align:center;}
.sample-list-screen .table-wrap td:nth-child(2) {text-align:left;}
.sample-list-screen .table-wrap .link {color:var(--color-text-primary); font-weight:700;}
.sample-detail-screen .detail, .sample-form-screen .form-panel {overflow:hidden; border-top:2px solid var(--color-text-primary);}
.sample-detail-screen .detail .row, .sample-form-screen .form-panel .form-row {display:grid; grid-template-columns:200px minmax(0,1fr); min-height:58px; border-bottom:1px solid var(--color-border);}
.sample-detail-screen .detail .label, .sample-form-screen .form-panel .label {display:flex; align-items:center; padding:12px 20px; background:var(--color-surface); font-weight:700;}
.sample-detail-screen .detail .value, .sample-form-screen .form-panel .value {display:flex; align-items:center; padding:12px 20px;}
.sample-detail-screen .actions, .sample-form-screen .actions {display:flex; justify-content:center; gap:8px; margin-top:28px;}
/* 로그인 화면 */
.login-page {display:flex; min-height:100vh; flex-direction:column; background:linear-gradient(90deg,var(--color-surface-soft) 0%,var(--neutral-white) 46%,var(--color-brand-soft) 100%);}
.login-page .login-header {display:flex; min-height:106px; align-items:center; justify-content:space-between; border-bottom:1px solid var(--neutral-300); background:var(--neutral-white); box-shadow:0 2px 8px rgba(0,0,0,.06); padding:0 38px;}
.login-page .login-brand {display:inline-flex; align-items:center; gap:10px; color:var(--color-brand-font);}
.login-page .login-brand-mark {display:inline-flex; width:55px; height:62px; align-items:center; justify-content:center; border:5px solid var(--color-brand); border-top-width:8px; border-radius:15px 15px 20px 20px; background:var(--neutral-white); color:var(--color-brand-font); font-size:16px; font-weight:800; line-height:.86; text-align:center;}
.login-page .login-brand-text {display:flex; flex-direction:column; gap:2px;}.login-page .login-brand-text strong {font-size:20px;}.login-page .login-brand-text small {font-size:7px; color:var(--palette-taupe);}
.login-page .login-header-links {display:flex; gap:22px; color:var(--color-text-muted); font-size:13px; font-weight:600;}
.login-page .login-main {display:grid; width:min(1120px,calc(100% - 64px)); flex:1; grid-template-columns:minmax(360px,1fr) 420px; gap:76px; align-items:center; margin:0 auto; padding:70px 0;}
.login-page .login-copy h1 {color:var(--color-brand); font-size:40px;}.login-page .login-copy p {margin-top:22px; color:var(--color-text-muted); font-size:17px; line-height:1.75;}
.login-page .login-card {border:1px solid var(--color-border-soft); border-radius:6px; background:var(--neutral-white); box-shadow:0 18px 34px rgba(70,52,25,.12); padding:38px 36px 34px;}.login-page .login-title {font-size:25px;}.login-page .login-desc {margin:8px 0 28px;color:var(--color-text-subtle);}
.login-page .form-row {margin-bottom:16px;}.login-page .form-row label {display:block;margin-bottom:8px;font-weight:600;}.login-page .form-row input {width:100%;height:46px;border:1px solid var(--color-border);padding:0 13px;background:var(--color-surface-soft);}.login-page .login-button {width:100%;height:48px;border:0;background:var(--color-brand);color:var(--neutral-white);font-weight:700;}.login-page .login-footer {padding:18px 20px;border-top:1px solid var(--neutral-200);background:var(--neutral-white);color:var(--color-text-subtle);text-align:center;}
@media (max-width:860px){.login-page .login-main{width:min(100% - 32px,480px);grid-template-columns:1fr;gap:30px;padding:44px 0;}.login-page .login-header-links{display:none;}}
/* 제목 + textarea + 글자수 카운터 */
.common-textarea-field {
    margin-bottom: 16px;
    border: 1px solid var(--color-border-soft);
    background: var(--neutral-white);
}
.common-textarea-field--bare {
    margin-bottom: 0;
    border: 0;
    background: transparent;
}
.common-textarea-field-title {
    margin: 0;
    padding: 10px 12px;
    background: var(--color-surface-soft);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    line-height: 1.45;
}
.common-textarea-field--bare .common-textarea-field-title {
    display: none;
}
.common-textarea-field-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-primary);
    resize: vertical;
    background: var(--neutral-white);
}
.common-textarea-field--bare .common-textarea-field-input {
    border: 1px solid var(--color-border);
    border-radius: 2px;
}
.common-textarea-field-input:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(182, 120, 5, 0.16);
}
.common-textarea-field-count {
    padding: 6px 12px 8px;
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.4;
}
.common-textarea-field-count-value {
    font-variant-numeric: tabular-nums;
}
/* Common modal */
.common-modal[hidden] {
    display: none;
}
.common-modal {
    position: fixed;
    z-index: 1200;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.common-modal-dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
}
.common-modal-panel {
    position: relative;
    width: min(520px, 100%);
    overflow: hidden;
    border-radius: var(--radius-base);
    background: var(--neutral-white);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
}
/* 개인정보 다운로드 사유 입력 공통 팝업 */
#personalInfoDownloadReasonModal .common-modal-panel {
    width: min(720px, 100%);
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
}
#personalInfoDownloadReasonModal .common-modal-head,
#personalInfoDownloadReasonModal .common-modal-foot {
    flex-shrink: 0;
}
#personalInfoDownloadReasonModal .common-modal-body {
    min-height: 0;
    overflow-y: auto;
}
#personalInfoDownloadReasonModal .personal-download-notice {
    margin-top: 16px;
    color: var(--color-text-primary);
    font-size: 14px;
    line-height: 1.65;
    overflow-wrap: break-word;
}
#personalInfoDownloadReasonModal .personal-download-notice p {
    margin: 0 0 6px;
}
#personalInfoDownloadReasonModal .personal-download-notice p:last-child {
    margin-bottom: 0;
}
#personalInfoDownloadReasonModal .personal-download-notice-example {
    display: block;
    padding-left: 18px;
}
#personalInfoDownloadReasonModal .personal-download-notice-example strong:first-child {
    color: #01347f;
}
.common-modal-head {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--color-border-light);
    padding: 0 20px;
}
.common-modal-head h2 {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 18px;
}
.common-modal-close {
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 26px;
    cursor: pointer;
}
.common-modal-body {
    padding: 20px;
}
.common-modal-description {
    margin: 0 0 18px;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}
.common-modal-label {
    display: block;
    margin-bottom: 8px;
    color: var(--color-text-primary);
    font-weight: 600;
}
.common-modal-body .common-textarea-field-input {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
}
.common-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--color-border-light);
    padding: 14px 20px;
    background: var(--color-surface-soft);
}

/* ==========================================================================
 * Shared sub-page controls and list helpers
 * ========================================================================== */
.labelRadioWrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--control-gap);
    min-height: calc(var(--control-control-size) + (var(--control-hit-pad-y) * 2));
    padding: var(--control-hit-pad-y) var(--control-hit-pad-x) var(--control-hit-pad-y) calc(var(--control-control-size) + var(--control-gap));
    color: var(--color-text-primary);
    font-size: var(--control-text-size);
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}

.labelCheckWrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--control-gap);
    min-height: calc(var(--control-control-size) + (var(--control-hit-pad-y) * 2));
    padding: var(--control-hit-pad-y) var(--control-hit-pad-x) var(--control-hit-pad-y) calc(var(--control-control-size) + var(--control-gap));
    color: var(--color-text-primary);
    font-size: var(--control-text-size);
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}

.labelRadioWrap::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: var(--control-control-size);
    height: var(--control-control-size);
    transform: translateY(-50%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: var(--icon-radio-empty);
}

.labelCheckWrap::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: var(--control-control-size);
    height: var(--control-control-size);
    transform: translateY(-50%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: var(--icon-check-empty);
}

.labelRadioWrap:has(input:checked)::before {
    background-image: var(--icon-radio-check);
}

.labelCheckWrap:has(input:checked)::before {
    background-image: var(--icon-check-check);
}

.labelRadioWrap.is-checked::before {
    background-image: var(--icon-radio-check);
}

.labelCheckWrap.is-checked::before {
    background-image: var(--icon-check-check);
}

.labelRadioWrap input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.labelCheckWrap input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.-icoGt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    color: inherit;
}

.-icoGt::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    transform: rotate(-45deg);
    margin-left: -4px;
    box-sizing: border-box;
}

.-icoPointer {
    background: var(--icon-layer-pointer) no-repeat center center;
    display: inline-block;
    width: 30px;
    height: 30px;
}

.searchInputWrap {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--search-control-gap);
}
/* 형제 입력칸·안내문에 밀려 버튼이 줄어들면 한글 텍스트가 글자 단위로 줄바꿈되므로 고정한다. */
.searchInputWrap > .button {
    flex-shrink: 0;
    white-space: nowrap;
}

.searchInputWrap.-lils {
    display: grid;
    gap: 0;
    grid-template-columns:
        var(--search-lils-label-first-width)
        var(--search-lils-input-width)
        var(--search-lils-group-gap)
        var(--search-lils-label-second-width)
        var(--search-lils-select-width);
}

.searchInputWrap.-lils > label:nth-of-type(2) {
    grid-column: 4;
}

.searchInputWrap.-lils > select {
    grid-column: 5;
}

.searchInputWrap.-li {
    display: grid;
    grid-template-columns:
        var(--search-li-label-width)
        var(--search-li-input-width);
}

.searchInputWrap.-lli {
    display: grid;
    grid-template-columns:
        var(--search-lli-label-first-width)
        var(--search-lli-label-second-width)
        var(--search-lli-input-width);
}

.surv-list-count {
    color: #64748b;
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
}

.surv-list-count strong {
    color: var(--color-brand);
    font-weight: 700;
}

.page-unit-wrap {
    display: inline-flex;
    align-items: center;
}

.page-unit-wrap .select {
    min-width: 120px;
}

.styleTable.-s2.-wrap > table > caption {
    display: none;
}

.styleTable.-row-head tbody th {
    padding: var(--table-row-pad-y) var(--table-row-pad-x);
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-panel);
    color: var(--color-text-primary);
    font-size: var(--ui-table-size);
    font-weight: 700;
    text-align: left;
    vertical-align: middle;
}

.styleTable.-row-head tbody th:last-child {
    border-right: 0;
}

/* ==========================================================================
 * Shared utility helpers
 * ========================================================================== */
.inline-control-text {
    display: inline-flex;
    align-items: center;
    height: var(--control-height);
    white-space: nowrap;
}

.w_80 {
    width: 80px !important;
    flex: 0 0 80px;
}

.w_100 {
    width: 100px !important;
    flex: 0 0 100px;
}

.w_120 {
    width: 120px !important;
    flex: 0 0 120px;
}

.w_160 {
    width: 160px !important;
    flex: 0 0 160px;
}

.w_full {
    width: 100% !important;
    max-width: 100%;
    min-width: 100%;
}

.flex-none {
    flex: 0 0 auto;
}

.text-nowrap {
    white-space: nowrap;
}

@import url("calendar.css");

/* ==========================================================================
 * 점수 선택 셀 공통 (평가서 등)
 * - td.common-radio-cell: 셀 안에는 라디오만 두고 셀 어디를 눌러도 선택된다(common.js).
 * - .common-radio-cell-mark: 조회 모드에서 선택한 셀에만 표시하는 기호.
 * ========================================================================== */
td.common-radio-cell {
    text-align: center;
    cursor: pointer;
}
td.common-radio-cell:hover {
    background: var(--neutral-50, #f8fafc);
}
td.common-radio-cell input[type="radio"] {
    margin: 0;
    vertical-align: middle;
    cursor: pointer;
}
.common-radio-cell-mark {
    display: inline-block;
    font-size: 16px;
    line-height: 1;
    color: var(--color-text-primary, #1e293b);
}

/* 독립 테마 선택 그룹: .colorTheme 마크업을 원하는 위치에 배치한다. */
.colorTheme {display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none;}
.colorTheme > li {display: inline-flex; margin: 0; padding: 0; list-style: none;}
.colorTheme > li > button._themeButton {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 5px 10px; border: 1px solid var(--ui-line); border-radius: 4px;
    background-color: var(--ui-white); color: var(--ui-muted);
    font-family: var(--font-family-base); font-size: 13px; font-weight: 400; line-height: 1.4; cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.colorTheme > li._active > button._themeButton {font-weight: 700; color: var(--ui-ink);}
.colorTheme button._themeButton[data-theme-value=""] {--theme-hover: var(--theme-0-primary);}
.colorTheme button._themeButton[data-theme-value="1"] {--theme-hover: var(--theme-1-primary);}
.colorTheme button._themeButton[data-theme-value="2"] {--theme-hover: var(--theme-2-primary);}
.colorTheme button._themeButton[data-theme-value="3"] {--theme-hover: var(--theme-3-primary);}
.colorTheme button._themeButton:hover,
.colorTheme button._themeButton:focus-visible {background-color: var(--theme-hover, var(--ui-primary-soft));}

.colorTheme > li > button._themeButton:focus-visible {outline: 2px solid var(--ui-primary); outline-offset: 2px;}

/* 체크·라디오 inputWrap은 시안의 16px 각진 외곽선과 8px 내부 표시를 쓴다. */
/* 동적 조사표는 tr/td/th에도 inputWrap을 사용하므로 테이블 레이아웃을 유지한다. */
.inputWrap:not(tr):not(td):not(th) {display: inline-flex; align-items: center; gap: 0;}
.inputWrap > input[type="checkbox"],
.inputWrap > input[type="radio"] {position: relative; flex: 0 0 16px; width: 16px; height: 16px; min-width: 16px; min-height: 16px; margin: 0; padding: 0; border: 0; border-radius: 0; appearance: none; -webkit-appearance: none; background: transparent; box-shadow: none; opacity: 1; pointer-events: auto; cursor: pointer;}
.inputWrap > input[type="checkbox"]::after,
.inputWrap > input[type="radio"]::after {position: absolute; left: 0; top: 1px; width: 16px; height: 16px; box-sizing: border-box; border: 1px solid #ccc; background: #fff; content: "";}
.inputWrap > input[type="radio"]::after {top: 1px; border-radius: 50%;}
/* 비활성 입력은 안쪽 배경으로 구분하고 테두리와 선택 표시는 유지한다. */
.inputWrap > input[type="checkbox"]:disabled::after,
.inputWrap > input[type="radio"]:disabled::after {background: var(--neutral-200);}
.inputWrap > input[type="checkbox"]:checked::before,
.inputWrap > input[type="radio"]:checked::before {position: absolute; z-index: 1; left: 4px; top: 5px; width: 8px; height: 8px; background: #333; content: "";}
.inputWrap > input[type="radio"]:checked::before {top: 5px; border-radius: 50%;}
/* 부분 선택은 체크 완료의 사각 표시 대신 가로선으로 구분한다. */
.inputWrap > input[type="checkbox"]:indeterminate::before {position: absolute; z-index: 1; left: 4px; top: 8px; width: 8px; height: 2px; background: #333; content: "";}
.inputWrap > input[type="checkbox"]:focus-visible,
.inputWrap > input[type="radio"]:focus-visible {outline: 2px solid #85a9e4; outline-offset: 2px;}
.inputWrap > label,
.inputWrap > input[type="checkbox"] + label,
.inputWrap > input[type="radio"] + label {width: auto; height: auto; padding-left: 10px; cursor: pointer;}
.inputWrap > input[type="checkbox"] + label::before,
.inputWrap > input[type="checkbox"]:checked + label::before {content: none; background: none;}
.inputWrap > label.sr-only,
.inputWrap > input[type="checkbox"] + label.sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}