body, input.text, input.title, input[type=email], input[type=password], input[type=tel], input[type=text], select, textarea {color:#333; font-weight:600}
input::placeholder {color:#bbb; font-weight:500;}
a {cursor:pointer;}
span.material-symbols-outlined {vertical-align:middle; font-size:100%}
.for-print {display:none !important;}
.mr0 {margin-right:0}
.mr10{margin-right:10px;}
.mb10{margin-bottom:10px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}

/* 수정된 행 스타일 */
.changed {
    background-color: #fff9c4 !important;
    transition: background-color 0.3s ease;
}

.controls { margin-top: 20px; text-align: right; }
button { padding: 10px 20px; cursor: pointer; background: #4CAF50; color: white; border: none; border-radius: 4px; }
button:hover { background: #45a049; }
label input {vertical-align:middle}

.container.sl-manage {width:100%; max-width:100%; padding:40px 0 40px 120px}
/*.container.sl-manage.timetable-std-container{padding-right:40px;}*/
.sl-manage.timetable-container .time-table-grid {display:grid;grid-template-columns: 390px 1fr; gap:0;}
.sl-manage .time-table-grid {background-color:#e8eff9; padding:0; border-radius: 30px 0 0 30px; box-shadow:0 0 30px 10px rgba(0, 0, 0, 0.15)}
.sl-manage .time-table-grid .grid-item {padding:0; position:relative}
.sl-manage .time-table-grid .grid-item.column-timetable {background-color:#fff; padding:40px;box-shadow:10px 10px 10px 10px rgba(0, 0, 0, 0.2)}
.column-classes .classes-wrapper,
.column-students .students-wrapper {display: flex; flex-wrap: wrap; gap: 10px; margin-right:-10px; border-top:1px solid #acddf8; margin-top:10px; margin-bottom:40px; padding-top:30px; padding-bottom:30px; max-height:600px; overflow-y: auto;}
.column-classes .classes-wrapper .class-item,
.column-students .students-wrapper .std-list-item {flex: 0 0 calc(33.33% - 10px); box-sizing:border-box; overflow:hidden}
.break-line {
    flex-basis: 100%;
    height: 0;
    margin: 0;
    border: none;
}
.column-timetable .sub-title-section {position:relative; margin-top:0;}
.column-timetable .day-tabs {text-align:right; }
.column-timetable .day-tab {position: relative;cursor:pointer;display:inline-block; font-weight:800; width:40px; height:40px; border-radius:20px; background-color:#e8eff9; margin-right:10px; line-height:40px; vertical-align: middle; text-align:center;}
.column-timetable .day-tab:hover {color:#022f64;}
.column-timetable .day-tab.current {background-color:#022f64; color:#fff; }
.column-timetable .day-tab.current:hover {color:#fff;}
.column-timetable .day-tab.onair:after{display:block; width:8px; height:8px; border-radius:4px;background-color:#ff1981; position:absolute; top:-12px; left:16px;content:"";animation: blinker 1s linear infinite;}
.column-timetable .day-tab .empty-flag{position:absolute; bottom:-24px; left:12px; color:#acddf8; font-size:18px;}
button.icon-button {padding:0; background:none;}
.icon-button.add-timeset {color:#2ea3f2; vertical-align:middle}
.icon-button.add-timeset:hover {color:#022f64}
.title-wrapper {padding-right:40px;}
.title-wrapper.has-2col {display: grid; grid-template-columns: 1fr 1.5fr; position:relative;}
.timetable-container .title-wrapper .discription {position:absolute; top:-30px; right:40px; display:inline-block;}
.timetable-container .title-wrapper select, .timetable-container .title-wrapper input {border-radius:20px; background-color:#e8eff9; border:none; }
.title-wrapper h1 {display:inline-block; margin-right:20px; vertical-align:middle; padding-bottom:0}
.title-wrapper h1 svg{vertical-align: middle; height:30px; width:30px; fill:#333;}
.timetable-container .title-wrapper .select-timeset-wrapper {display:inline-block; vertical-align: middle; background-color:#e8eff9; border-radius:20px; padding-right:20px;}
.timetable-container .date-selects {text-align:right; }
.timetable-container .date-selects .date-select {display:inline-block; width:240px; }
.timetable-container .date-selects input{width:140px; margin-left:5px; font-size:14px; font-weight:800; padding:10px 12px;}
.timetable-container select.select-timeset {padding:10px 12px; width:auto; font-size:16px; letter-spacing: -1px; font-weight:800;margin-right:10px;}
.title-section .select-timeset-wrapper .empty-all {font-size:22px;}
.title-section .select-timeset-wrapper .empty-all:hover {color:#022f64}
.title-section .select-timeset-wrapper .empty-all.aria[aria-label]:hover::after {left:calc(100% + 73px); padding:5px 8px}
.title-section .select-timeset-wrapper .empty-all.aria[aria-label]:hover::before {
    content: "";
    position: absolute;
    top: 50%;            /* 세로 중앙 정렬 시작점 */
    left: 100%;         /* 박스 왼쪽에 딱 붙임 */
    margin-top: -5px;    /* 두께(5px)의 절반만큼 올려서 정확히 중앙 정렬 */

    /* 삼각형 만들기 */
    border-width: 7px;
    border-style: solid;
    /* 상, 우, 하, 좌 순서: 오른쪽만 색을 주고 나머지는 투명(transparent) */
    border-color: transparent #333 transparent transparent;
}

.grid-left .cls-std-switch.off {display:none;}
.grid-left .cls-std-switch > span {vertical-align:-6px;}
.grid-left .column-students {box-shadow:0 0 5px 5px rgba(0,0,0,0.1);transition-duration:0.3s; transition-delay:0.1s; border-radius:30px 0 0 30px; position:absolute; top:0; left:calc(100%); height:100%;width:calc(100% - 20px); background-color:#faf1f2; animation-duration: 0.5s;animation-name: slidein;}
.std-on.grid-left .column-students{left:40px;}
.std-on.grid-left .cls-std-switch.off{display:block}
.std-on.grid-left .cls-std-switch.on{display:none}
.grid-left .grid-left-inner, .time-table-grid .grid-inner {padding:40px; height:100%}
.grid-left-inner .content-wrapper {padding-top:10px; position:sticky; top:0;}
.admin-bar .grid-left-inner .content-wrapper {top:30px}
.column-students .switch-box {padding:2px 5px 7px 12px; transform:rotate(270deg); position:absolute; left:-67px; top:70px;background-color: #faf1f2; border-radius: 10px 10px 0 0;box-shadow:0 -4px 4px 0 rgba(0,0,0,0.1)}
.column-students .std-filter {display:grid; grid-template-columns: 1fr 1fr; gap:10px 15px;}
.column-students .std-filter .gr-wrapper {grid-column: span 2;}
.column-students .std-filter .sch-wrapper label {display:block; width:100%; line-height:28px; font-weight:600}
.column-students .std-filter .sch-wrapper label .selection {font-weight:normal}
.column-students .std-filter .sch-wrapper label .selection button{padding:0}
.column-students .std-filter select{padding:5px; }
.column-students .std-filter select,
.column-students .std-filter .select2-container{width:calc(100% - 33px) !important; float:right}
.column-students .std-filter .select2-container--default .select2-selection--single {border-radius:0;}
.column-students .std-filter .select2-container--default .select2-selection--single .select2-selection__rendered {line-height:28px; padding-right:0}
.column-students .std-filter .select2-container--default .select2-selection--single .select2-selection__arrow {height:26px;}
.std-list-item {position:relative;}
.std-list-item .std-name:hover {cursor:pointer; border:2px solid pink; border-radius:5px; padding:5px;}
.std-class-container .search-wrapper {display:grid; grid-template-columns: 1fr 78px 1fr 1fr 1fr 1fr 1fr 25px; gap:10px }
.boardList .order-btn {display:block;}
.boardList .order-btn span {font-size:14px; vertical-align:middle; color:#999; float:right;}
.title-wrapper select {border:none; background-color:#e8eff9; padding:7px 10px; border-radius:20px; letter-spacing:-1px; font-weight:600}
.title-wrapper select.checked {background-color:#001e41; color:#fff; font-weight:800;}
.title-wrapper .icon-button{font-size:22px; padding-top:4px;}

    /** 테이블 설정 */
table.boardList { width: 100%; border-collapse: separate; border-spacing:0 }
.boardList th, .boardList td { border: 1px solid #022f64; padding: 7px; text-align: left; vertical-align:middle; }
.boardList th { background-color: rgba(232, 239, 249,0.9); padding-top:16px; padding-bottom:16px; border-width:4px 0 2px 0; font-size: 105%; font-weight:600}
.boardList td {padding:0; border-width:0 0 1px 1px; border-color:#022f64}
.boardList td:first-child {border-left:none;}
.boardList tr:last-child td {border-bottom-width: 2px;}
#timetable-tbl .class-item {border:none; border-radius:0;}
#timetable-tbl th, #timetable-tbl td {width:100px;}
#timetable-tbl td {height:72px;}
#timetable-tbl .class-item span.grade {display:none;}
table.boardList .select2-container {width:100%}
table.boardList input, table.boardList select {background-color:transparent; font-size:100%; }
table.boardList th input, table.boardList th select {font-weight:600 }
table.boardList input, table.boardList select,
table.boardList .select2-container--default .select2-selection--multiple {border:none; border-radius:0;padding:0; width:100%; vertical-align:middle;}
table.boardList .select2-container--default .select2-selection--multiple .select2-selection__choice {margin-top:0; margin-bottom:0}
table.boardList .select2-container--default .select2-selection--multiple .select2-selection__choice:first-child {margin-left:0}
table.boardList .btn {padding:0}
table.boardList .select2-container .select2-selection--multiple {min-height:0}
.tbl-bottom {margin-top:10px; margin-bottom:10px;text-align:right}
#students-tbl th, #classes-tbl th {position:sticky; top:0; z-index:9}
.admin-bar #students-tbl th, .admin-bar #classes-tbl th {top:30px;}
#user-table .user-login {width:100px; padding-left:15px}
#user-table .user-role {width:110px; }
#user-table .user-name {width:80px; }
#user-table .buttons {width:120px; }
#msg-table .date-time {width:160px; }
#msg-table .std-name {width:80px; }

.sub-title-section {margin-bottom:30px;display:grid; grid-template-columns: 1fr 1fr}
.sub-title-section .date-select {text-align:right}
.sub-title-section .date-select > * {display:inline-block}
.sub-title-section .date-select input {padding: 5px 7px; max-width:120px; margin-left:10px;}
.sub-title-section .discription {text-align:right}
.sub-title-section .col-title {display:inline-block;}
h2.col-title svg {fill:#333; width: 26px; height:26px; vertical-align: middle}
a svg.hover {fill:#2ea3f2}
a:hover svg.hover {fill:#022f64}
.boardList .is-changed td {background-color:lightpink}
table.boardList .is-changed input, table.boardList .is-changed select,
table.boardList .is-changed .select2-container--default .select2-selection--multiple {background-color:transparent}
table.boardList .buttons .icon-button{font-weight:normal; font-size:100%}
table.boardList .chk {width:40px;}
table.boardList .name {width:80px;}
table.boardList .school {width:100px;}
table.boardList .phone {width:120px;}
table.boardList .grade {width:60px;}
table.boardList .buttons {width:100px;}
table.boardList .teacher {min-width:100px;}
table.boardList .subj {width:60px;}
table.boardList .class {width:115px;}
table.boardList .class.ma {width:230px;}
table.boardList .class.sc {width:160px;}
table.boardList .select2-container--default .select2-selection--single {border:none;}
table.boardList .select2-container--default .select2-selection--single .select2-selection__rendered {line-height:17px}
table.boardList .select2-container .select2-search--inline .select2-search__field {margin-top:0; cursor:pointer;}
table.boardList .select2-container--default .select2-selection--single .select2-selection__arrow,
table.boardList .select2-container .select2-selection--single {height:17px; background-color:transparent}
table.boardList .select2-container--default .select2-selection--single .select2-selection__arrow {top:-2px; display:none}
table.boardList .select2-container--default .select2-selection--multiple .select2-selection__choice {background-color:transparent; border:none;}
table.boardList .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {display:none}
table.boardList .select2-container--default .select2-selection--multiple {cursor: pointer}
table.boardList .memo a {float:right; margin-right:15px}

th .icon-button {font-size:100%}
.icon-button {font-weight:600; display:inline-block;}
.icon-button:hover {color:#022f64}
.icon-button span {font-weight:normal; margin-right:0.3em; vertical-align: middle; font-size:120%;}
.table-controls.top {margin-bottom:5px;}
.table-controls {font-weight:600; font-size:110%}
.table-controls.has-2cols div:last-child {text-align: right}
.table-controls.has-2cols {display: grid; grid-template-columns: 1fr 1fr}
.table-controls.bottom {margin-top:10px}
.page-container > * {margin:0 5px;}
.icon-button svg{vertical-align: middle}
.page-container a:hover {color:#022f64}
.table-controls .icon-button svg{vertical-align:middle; height:20px; width:20px;}

#classes-tbl td.students {display:flex; align-items: flex-start;}
#classes-tbl .std-list-wrapper {
    display: flex;             /* flex 레이아웃 적용 */
    flex-wrap: wrap;           /* 자식 요소가 줄을 넘어가도록 설정 */
    gap: 4px 6px;                  /* 항목 간의 간격 (이미지처럼 띄우기) */
    list-style: none;          /* 불렛 포인트 제거 */
    padding: 0;
    margin: 0;
    flex:1; min-width:0;
}
#classes-tbl .std-list-wrapper .std-item {
    display: inline-flex;      /* 내부 텍스트와 'x' 버튼 정렬 */
    align-items: center;
    white-space: nowrap;
    border:1px solid #ddd; border-radius:3px; padding:1px 3px 0 4px; }
#classes-tbl .std-list-wrapper .btn-edit-stds {font-size:20px; vertical-align: middle; margin-right:8px; flex-shrink: 0;}
#classes-tbl .std-list-wrapper .btn-edit-stds:hover {color:#1e51a4}
.view #classes-tbl .std-list-wrapper .std-item {border:none;}

.std-list-wrapper .del-std {border:none; background-color:transparent; margin-left:5px;}
.ui-draggable-dragging .del-std {display: none !important;}
.timetable-std-container .class-item > a,
.timetable-tch-container .class-item > a.btn-remove-assigned {display:none;}

.std-class-container #classes-tbl-wrapper {padding-bottom:40px;}
.std-class-container .boardList td{background-color:#fff}
.std-class-container .boardList .is-changed td {background-color:#e8eff9}
.sl-manage .title-wrapper {margin-bottom:30px; padding-left:30px;}
h1 .material-symbols-outlined {vertical-align: middle; font-size:100%}
.std-class-container .boardList td {height:auto; min-height:40px; padding:5px;}
.boardList td.buttons {text-align:center}
.boardList td.buttons .btn-reset, .boardList td.buttons .btn-save {display:none}
.boardList .is-changed td.buttons .btn-reset, .boardList .is-changed td.buttons .btn-save {display:inline-block}
.boardList td.buttons a:hover {color:#1e51a4}
.std-class-container.sl-manage .time-table-grid .grid-item {padding-right:50px;}

.ui-dialog.sl-dialog {font-family:'NanumSquare'; box-shadow:2px 0px 10px 5px rgba(0,0,0,0.12); padding:0 !important; border:none !important;}
.ui-dialog.sl-dialog .ui-widget-header {border:none !important; border-radius:0 !important; background-color:#1e51a4; color:#fff; font-size:105%}
.ui-dialog.sl-dialog.chk-std-box ul {display:grid; grid-template-columns: 1fr 1fr 1fr}
.ui-dialog.sl-dialog.chk-std-box li input{width:auto;}
.ui-dialog.sl-dialog.chk-std-box li small {display:none;}
.ui-dialog.sl-dialog label{letter-spacing:0}
.ui-dialog.sl-dialog .gr-filters {padding:10px; border-bottom:1px solid #2ea3f2}
.ui-dialog.sl-dialog .gr-filters label {display:inline-block; width:auto; font-weight:800; font-size:115%;margin-right:5px;}
.ui-dialog.sl-dialog .gr-filters label input {width:auto}.select2-container--default.select2-container--disabled .select2-selection--multiple

select.select2-element {display:none;}

    /* 드롭 가능한 영역 강조 */
.std-list-wrapper.ui-droppable {
    min-height: 26px;
    border: 1px dashed transparent;
    transition: all 0.2s;
}
.std-list-wrapper.ui-droppable-active {
    border-color: #aaa;
    background-color: #f9f9f9;
    display:block;
}
.std-list-wrapper.drop-hover {
    border-color: #0073aa;
    background-color: #f0f8ff;
}
/* 복제된(아직 저장 안 된) 학생 스타일 */
.std-item.is-new-mapping {
    color: #0073aa;
    font-weight: bold;
    border: 1px solid #0073aa;
}

/* 드래그되는 아이템과 그 부모 영역에서 텍스트 선택 방지 */
.std-item,
#classes-tbl {
    -webkit-user-select: none;  /* Safari */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Standard */
}

/* 드래그 중인 헬퍼(분신) 스타일 */
.ui-draggable-dragging {
    cursor: move;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    border: 1px solid #0073aa;
    z-index: 9999;
}



/* 타임테이블 페이지 */
.class-item h4 {font-size:14px; font-family: sans-serif,'NanumSquare'; font-weight:800; color:#022f64; padding:5px 0 6px 0; border-bottom:1px dashed #acddf8; margin-bottom:5px;}
.class-item h4, .class-item .teacher-name {font-size:15px; letter-spacing:-1px; font-weight:800}
.class-item[tch_id="3"] .teacher-name, .class-item[tch_id="3"] h4 {color:darkblue; border-color:darkblue} /* 부원장 */
.class-item[tch_id="4"] .teacher-name, .class-item[tch_id="4"] h4 {color:darkslategray; border-color:darkslategray} /* 홍샘 */
.class-item[tch_id="5"] .teacher-name, .class-item[tch_id="5"] h4 {color:#2ea3f2; border-color:#2ea3f2} /* 강샘 */
.class-item[tch_id="8"] .teacher-name, .class-item[tch_id="8"] h4 {color:#126eac; border-color:#126eac} /* 근샘 */
.class-item[tch_id="9"] .teacher-name, .class-item[tch_id="9"] h4 {color:darkmagenta; border-color:darkmagenta} /* 민정샘 */
.class-item[tch_id="11"] .teacher-name, .class-item[tch_id="11"] h4 {color:green; border-color:green} /* 효림샘 */
.class-item[tch_id="12"] .teacher-name, .class-item[tch_id="12"] h4 {color:blue; border-color:blue} /* 장샘 */
.class-item[tch_id="10"] .teacher-name, .class-item[tch_id="10"] h4 {color:purple; border-color:purple} /* 백샘 */
.class-item[tch_id="13"] .teacher-name, .class-item[tch_id="13"] h4 {color:darkolivegreen; border-color:darkolivegreen} /* 양샘 */
.class-item[tch_id="14"] .teacher-name, .class-item[tch_id="14"] h4 {color:darkgreen; border-color:darkgreen} /* 이샘 */
.class-item[tch_id="15"] .teacher-name, .class-item[tch_id="15"] h4 {color:darkorange; border-color:darkorange} /* 과학장샘 */
.class-item[tch_id="19"] .teacher-name, .class-item[tch_id="19"] h4 {color:#555; border-color:#555} /* 과학장샘 */

.time-table-grid .class-item {display:inline-block; border:1px solid #ddd; border-radius:10px; margin:0; padding:5px 7px; width:100%; white-space: nowrap; background-color:#fff; cursor:pointer; vertical-align:top; position:relative;
    -webkit-user-select: none;  /* Safari */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Standard */
    background-clip:border-box;
}
.on-air.box {padding:8px 10px; border-radius:5px; background-color:#ff1981; color:#fff; font-weight:800; vertical-align:4px; margin-left:5px;}
.class-item .btn-remove-assigned {font-size:16px; position:absolute; bottom:-3px; right:0}
.class-item .btn-remove-assigned:hover {opacity:1;}
.class-item .btn-edit-added {top:5px; right:0}
.column-classes .class-item .btn-remove-assigned {display:none;}
.class-item.cls-code-ma, .class-item.cls-code-ma * {background-color:#E0F7FA !important}
.class-item.cls-code-en, .class-item.cls-code-en * {background-color:#FCE4EC !important}
.class-item.cls-code-ko, .class-item.cls-code-ko * {background-color:#E8F5E9 !important}
.class-item.cls-code-sc, .class-item.cls-code-sc * {background-color:#FFFFE3 !important}
.time-table-grid .class-item .std-lists {height:0; position:absolute; background-color:#fff; overflow:hidden; border:none; padding-left:15px; }
.time-table-grid .time-cell .class-item .std-lists {overflow:visible}
.time-table-grid .class-item.visible .std-lists {z-index:999; height:auto; border-width:0 1px 1px 1px; border-color:#ddd; border-style:solid; border-radius:0 0 3px 3px;left:-1px; right:-1px; }
.time-table-grid .class-item .btn-open-list {font-size:18px; position:absolute; top:38px; right:8px;}
.time-table-grid .class-item .btn-open-list {opacity: 0.5;}
.time-table-grid.teacher .class-item .std-lists{height:auto;position:relative; padding-left:0; display:grid; grid-template-columns: 1fr 1fr}
.time-table-grid.teacher .class-item .btn-open-list {display:none;}

.class-item.empty .btn-open-list {display:none !important}
.personal #timetable-tbl .class-item.visible {border:2px solid #ff1981}
.personal #timetable-tbl .class-item.visible .std-lists {border-width:0 2px 2px 2px; left:-2px; right:-2px; border-color:#ff1981}
.personal .class-item .btn-time-ctrl.btn-remove-assigned,
.personal .class-item .btn-time-ctrl.btn-edit-added{display:none !important;}
.time-table-grid .class-item .btn-open-list:hover {opacity:1}
.time-table-grid .column-timetable .class-item .btn-open-list {top:40px; right:4px;}
.sl-manage .time-table-grid.day-table {box-shadow: none; border-radius: 0}

.time-table-wrapper td {vertical-align:top; position:relative}
.time-table-wrapper .class-item .std-lists {height:auto; position:relative; color:#333}
.edit .time-table-wrapper .class-item .std-lists {display:none;}
.edit .time-table-wrapper .class-item.visible .std-lists {display:block; border:none; background-color:transparent}
.edit .time-table-wrapper .class-item .btn-open-list {display:inline-block; top:7px}
.edit .time-table-wrapper .class-item.temp-class .btn-open-list {top:30px}
.time-table-wrapper .class-item .std-lists .added {height:auto; position:relative; color:#1e51a4}
.time-table-wrapper .class-item .btn-open-list {display:none}
.column-students .std-list-item .del-me {display:none;}
.std-list-item .del-me {font-size:16px; vertical-align:-3px; opacity: 0.3; }
.std-list-item .del-me:hover {opacity: 1}
.view .time-table-grid .time-cell .class-item ul.std-lists {font-size:95%; margin-top:3px;padding-left:5px; display:grid; grid-template-columns: 1fr 1fr}

.time-table-wrapper {position:relative;}
.table-controls.top .btn-add-room{position:absolute;transform: rotate(90deg); top:70px; right:-60px}
.table-controls .search-wrapper {display:inline-block;}
.table-controls .search-wrapper select {width:100px;}
#timetable-tbl th input {text-align:center;}
#timetable-tbl th p.for-print{text-align:center; padding:0; margin:0}
#timetable-tbl td.times input {text-align:center; vertical-align: middle; min-height:50px; font-weight:800}
#timetable-tbl .btn-room-ctrl,#timetable-tbl .btn-time-ctrl {position:absolute; padding:3px; font-weight:normal; cursor:pointer; display:none; font-size:16px; color:#2ea3f2;letter-spacing:-1px;}
#timetable-tbl .btn-time-ctrl {display:inline-block; opacity:0.3}
#timetable-tbl .btn-time-ctrl:hover {opacity:1}
#timetable-tbl .btn-add-std {left:auto; right:2px; bottom:4px; z-index:99}

#timetable-tbl .time-cell:hover .btn-room-ctrl, #timetable-tbl td.times:hover .btn-time-ctrl {display:block;}
#timetable-tbl .btn-del-room {top:0; right:0;}
#timetable-tbl .btn-mov-room {top:0; left:0;}
#timetable-tbl .btn-del-time {bottom: -4px; right:0;}
#timetable-tbl td.times {position:relative}
#timetable-tbl th {position:sticky; top:0; z-index:9}
.admin-bar #timetable-tbl th {top:30px;}
#timetable-tbl-wrapper {position:relative;}
.grid-left input[type='checkbox']{width:auto;}
#timetable-tbl .class-item {display:block !important; height:100%;}

.mode-flag {font-weight:800; position:fixed; top:0; left:calc(50% - 50px); z-index:99; padding:3px 30px 5px; background-color:#022f64; border-radius:0 0 5px 5px; display:inline-block; color:#fff; box-shadow:0 2px 10px 5px rgba(0,0,0,0.2)}
.admin-bar .mode-flag {top:30px;}
.mode-flag span {margin-right:15px;}
.mode-flag a.icon-button, .mode-flag a.icon-button svg{color:#2ea3f2; fill:#2ea3f2;}
.mode-flag a.icon-button:hover, .mode-flag a.icon-button:hover svg{color:#fff; fill:#fff;}

.view.sl-manage.timetable-container .time-table-grid {display:block; border-radius:30px 0 0 30px; overflow:hidden;}
.view.sl-manage th a, .view.sl-manage td a, .view.sl-manage .class-item a {display:none !important}
.view.sl-manage .std-list-wrapper .std-item {border:none;}
.view.sl-manage #classes-tbl select:disabled,
.view.sl-manage #students-tbl select:disabled {-webkit-appearance: none; -moz-appearance: none; appearance: none;}
.view .select2-container--default.select2-container--disabled .select2-selection--multiple {background-color: transparent}
.view.sl-manage th a.order-btn {display:inline-block !important;}
.view .time-table-wrapper .class-item .std-lists .added:after{ position:absolute; content:"*"}
.view input[type="text"]:disabled,
.view select:disabled{ opacity: 1}

    /* 강의실 좌우 드래그 */
.ui-state-highlight {
    background: #f0f0f0;
    border: 1px dashed #ccc;
    visibility: visible !important;
    height: 50px;
}
.btn-mov-room {
    cursor: grab;
}
.btn-mov-room:active {
    cursor: grabbing;

}
/* 드래그 중인 실제 요소(Helper) 스타일 */
.ui-sortable-helper {
    background-color: #ffffff !important; /* 배경을 불투명하게 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* 떠 있는 느낌의 그림자 */
    display: table; /* 테이블 셀 형태 유지 */
    border: 1px solid #ddd;
}

/* 들어갈 자리를 표시하는 가이드 박스 */
.ui-state-highlight {
    background: #f8f9fa !important;
    border: 2px dashed #007bff !important;
    visibility: visible !important;
    min-width: 100px;
}


/* 클래스 배치 (시간표 작성)
 */
/* 드롭 가능한 영역 강조 */
.time-cell.drop-hover {
    background-color: #e3f2fd !important;
    border: 2px dashed #2196f3 !important;
}


/* 좌측 메뉴 */
.left-menu-pole {z-index:2;position:fixed; display:inline-block; background-color:#001e41; left:0; top:0; height:100%; text-align:center; padding-top:10px;}
.left-menu-pole .logo img {width:70px; margin-top:30px; max-width:70%}
.left-menu-pole .menu-pole-box {position:sticky; top:50px; text-align:center; margin:50px 10px 0; width:50px;}
.left-menu-pole .menu-box {text-align:center; margin-bottom:15px;}
.left-menu-pole .menu-box a {color:#fff}
.material-symbols-outlined {font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 24}



/* 스피너 */
#global-loader {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 배경 어둡게 */
    z-index: 9999; /* 최상단 유지 */
}
.loader-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* Flexbox 설정: 수직 중앙 정렬 */
    display: flex;
    flex-direction: column; /* 위에서 아래로 배치 */
    align-items: center;    /* 가로축 중앙 정렬 */
    justify-content: center;/* 세로축 중앙 정렬 */

    color: #fff;
    width: 100%; /* 너비 확보 */
}
.loading-msg {
    margin: 0; /* 기본 여백 제거 */
    font-size: 16px;
    font-weight: 800;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3); /* 가독성 확보 */
}
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.3); /* 배경을 살짝 투명하게 하면 더 예쁩니다 */
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px; /* 글자와의 간격 */
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }



.blink {animation: blinker 1s linear infinite;}
@keyframes blinker {50% { opacity: 0; }}



.sl-manage .time-table-grid.day-table {padding-top:0; margin-top:0}
/* 가로 스크롤을 위한 컨테이너 */
.timetable-scroll-wrapper {
    width: 100%;
    overflow-x: auto; /* 가로 스크롤 활성화 */
    -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
    padding-bottom: 15px;
}
.day-column .tbl-wrapper {border-width:0 0 2px; border-style:solid; border-color:#022f64}
/* 7개 요일을 일렬로 나열 */
.timetable-flex-container {
    display: flex;
    min-width: 1050px; /* 각 컬럼이 최소 150px일 때 (7 * 150) */
    gap: 5px;
}

/* 각 요일별 독립 컬럼 */
.day-column {
    flex: 1;
    min-width: 150px;
    background: #fff;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

.day-header {
    background: #022f64;
    color: #fff;
    text-align: center;
    padding: 15px 0;
    margin: 0;
    font-size: 1.2em;
    position: relative;
    z-index: 1;
}
.day-header.today{background-color:#ff1981}

.day-table {
    width: 100%;
    border-collapse: collapse;
}

.day-table td {
    border-bottom: 1px solid #acddf8;
    padding: 0;
    height: 70px;
    vertical-align: middle;
    text-align: center;
}
.day-table tr:last-child td {border-bottom:none;}
.day-table .class-item {border-radius:0 !important}
/* 시간 컬럼 (왼쪽) */
.time-col {
    width: 35%;
    background: #fcfcfc;
    color: #666;
    border-right: 1px solid #eee;
}
.time-col p {font-size:100%; letter-spacing: -1px; line-height:1.2em; padding-bottom:0.5em}
.time-col p:not(.has-background):last-of-type {padding-bottom:0}
.time-col p.time {font-weight:600; color:#022f64; font-size:95%}
.time-table-grid .class-col .class-item {border:none; height:100%}

/* 클래스 정보 컬럼 (오른쪽) */
.class-col {width: 65%;font-size: 0.9em;}
.empty-cell {color: #ccc;}
/* 기본 상태 (PC/태블릿): 7개를 한 줄에 모두 보여줌 */
.myTimetable {width: 100%;}
.swiper-wrapper {display: flex !important; /* Swiper의 고정폭을 풀고 flex로 나열 */flex-wrap: nowrap;}
.swiper-slide {width: calc(100% / 7) !important; /* 7개로 1/7씩 너비 할당 */height: auto !important;}
/* 슬라이드 크기 계산 방식을 테두리 포함으로 변경 */
.myTimetable .swiper-slide {
    box-sizing: border-box !important;
    display: flex;
    flex-direction: column;
}
/* 내부 컨텐츠가 슬라이드 영역을 넘지 않도록 설정 */
.day-column {
    width: 100% !important;
    box-sizing: border-box;
    margin: 0; /* 외부 여백 제거 */
}
/* 테이블이 부모 너비를 넘지 않게 고정 */
.day-table {
    width: 100% !important;
    table-layout: fixed; /* 테이블 너비 강제 고정 */
}




/* 학생 드래그 */
/* 평소에는 높이 0, 드래그 시에만 확보 */
#timetable-tbl .std-lists.added {
    min-height: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}

#timetable-tbl .std-lists.added.drag-active {
    min-height: 35px; /* 드롭을 유도하는 최소 높이 */
    border: 1px dashed #666;
    background: rgba(0,0,0,0.02);
}

/* 드래그 중인 셀 위로 올라갔을 때 피드백 */
#timetable-tbl td.time-cell.ui-state-highlight {
    background-color: #e3f2fd;
    border: 2px solid #2196f3;
}

/* ul 안의 li가 block이 아니라 inline-block이어야 합니다 */
#timetable-tbl .std-lists.added li {
    display: inline-block !important; /* 이게 중요합니다 */
    width: auto !important;           /* 너비 자동 조절 */
    min-width: 50px;
    margin: 2px;
}
/* 마우스 드래그 시 텍스트 파랗게 선택되는 것 방지 */
.std-list-item, #timetable-tbl .std-lists.added li {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    cursor: grab;
}

/* 드래그 중일 때 커서 모양 */
.is-dragging {
    cursor: grabbing !important;
}

.ui-draggable-dragging {
    white-space: nowrap !important; /* 줄바꿈 금지 */
    overflow: hidden !important;
    text-overflow: ellipsis;
    background: #fff !important;
    border: 1px solid #ccc !important;
    padding: 5px !important;
    cursor: grabbing !important;
}
.class-item.ui-draggable-dragging,
.std-lists.ui-draggable-dragging,
.dragging-origin {
    top: 0 !important;
    left: 0 !important;
}


/* a 태그 스타일 설정 */
a.aria[aria-label] {
    position: relative;
    text-decoration: none;
}

/* 마우스를 올렸을 때 aria-label 내용을 표시 */
a.aria[aria-label]:hover::after {
    content: attr(aria-label); /* aria-label의 텍스트를 가져옴 */
    position: absolute;
    bottom: -5px; /* 태그 위쪽에 표시 */
    left: 80px;
    transform: translateX(-50%);
    background-color: #001e41;
    color: #fff;
    padding: 8px 15px 8px;
    border-radius: 10px;
    white-space: nowrap;
    font-size: 14px;
    z-index: 10;
    font-weight:600;
    vertical-align: middle;
}

.timetable2.sl-manage .time-table-grid .grid-item.column-timetable {border-radius:30px 0 0 30px;}
.timetable2.sl-manage.timetable-container .time-table-grid {display:block}
.timetable2 td.time-cell:focus {outline: 3px dashed darkblue;z-index:99}
.timetable2 td.time-cell .class-item:focus {outline: 3px dashed darkorange; z-index:99}
.timetable2 td.time-cell .class-item .std-list-item:focus {outline:2px dashed darkblue; z-index:99}
.timetable2 td.time-cell .class-item .std-lists {display:block}
.timetable2 td.time-cell .class-item .btn-open-list {display:none;}
.timetable2 .time-table-grid .time-cell .class-item ul.std-lists {    font-size: 95%;
    margin-top: 3px;
    padding-left: 5px;
    display: grid;
    grid-template-columns: 1fr 1fr;}




@media print {
    @page {
        size: landscape; /* 가로 방향 강제 */
        /*margin: 10mm;    /* 여백 설정 (선택 사항) */
    }
    select {
        -webkit-appearance: none;  /* 크롬, 사파리 */
        -moz-appearance: none;     /* 파이어폭스 */
        appearance: none;          /* 표준 */
        background: none;          /* 배경 이미지로 넣은 화살표가 있다면 제거 */
    }
    table tr {
        page-break-inside: avoid; /* 구형 브라우저 대응 */
        break-inside: avoid;      /* 최신 브라우저 표준 */
    }
    thead {
        display: table-header-group !important;
    }
    thead th input {
        -webkit-print-color-adjust: exact; /* 크롬, 사파리 등 배경색/모양 강제 인쇄 */
        print-color-adjust: exact;
        display: inline-block !important;
        visibility: visible !important;
    }
    .for-print {display:block !important}
    #timetable-tbl th input {display:none !important;}
    .left-menu-pole,
    .table-controls,
    .search-wrapper,
    .icon-button,
    .empty-all,
    th.chk, td.chk,
    .grid-item.grid-left,
    .title-wrapper .description,
    #timetable-tbl .btn-time-ctrl,
    .column-timetable .sub-title-section,
    .mode-flag,
    .btn.del-std{display:none !important}
    .container.sl-manage {padding:0;}
    td.buttons {display:none;}
    td.memo {min-width:50px;}
    .sl-manage .title-wrapper {margin-bottom:10px; margin-top:15px; padding-left:5px;}
    .sl-manage .title-wrapper h1 {font-size:20px;}
    .grid-left .grid-left-inner, .time-table-grid .grid-inner {padding:0}
    .sl-manage .time-table-grid,
    .sl-manage .time-table-grid .grid-item.column-timetable {background-color:transparent; border-radius: 0; box-shadow: none; padding:0}
    .std-list-wrapper .std-item {border:none; margin-right:0; padding-left:0}
    th.name, td.name, th.class_name, td.class_name {border-left:none !important;}
    .sl-manage.timetable-container .time-table-grid, .sub-title-section {display:block;}
    .column-timetable .sub-title-section {width:100%}

}

@media (max-width: 1791px) { /*********** 노트북 태블릿 ****************************************/
    .sl-manage .time-table-grid{grid-template-columns: 230px 1fr}
    .column-classes .classes-wrapper {grid-template-columns: 1fr 1fr}
}

@media (max-width: 980px) { /************* 모바일 전용 (화면이 좁을 때만 Swiper 동작) **********/
    #wpadminbar,
    .left-menu-pole{display:none;}
    .container.sl-manage{width:auto; padding:0 5px;}

}

    @media (max-width: 767px) { /************* 모바일 전용 (화면이 좁을 때만 Swiper 동작) **********/
    body{letter-spacing:-1px;}
    .container.sl-manage.personal {padding:0}
    .personal .swiper {padding-left:5px; padding-right:5px}
    .personal.sl-manage .title-wrapper {background-color:#022f64; color:#fff; padding:10px; margin-bottom:15px}
        .personal.sl-manage .title-wrapper h1 {font-size:18px; letter-spacing:-1px;}
    .personal.sl-manage .title-wrapper h1, .personal.sl-manage .title-wrapper h1 svg {color:#fff; fill:#fff}
    .swiper-wrapper {display: flex !important;flex-wrap: nowrap;}
    .swiper-slide {width: 50% !important; /* 모바일에서는 2개씩 노출 */}



}