@charset "utf-8";
/* 마이페이지 공통 */
.admin-filter-box .custom-select {max-width: 100%; width: fit-content;}
input[type="url"], input[type="tel"], input[type="file"], input[type="text"], input[type="password"], input[type="email"], input[type="number"], .custom-select select {transition: border 0.3s; height: 38px; padding: 8px 14px; border-radius: 8px;}
textarea {transition: border 0.3s; border: 1px solid #D1D5DB; border-radius: 7px;}
.datepicker {transition: border 0.3s; height: 38px; border-radius: 8px;}
.search-input {width: 340px; background-color: #F9FAFB; border-color: #E5E7EB; padding-left: 37px !important; background-image: url(../img/search-ico.svg); background-position: 14px center; background-repeat: no-repeat;}
.search-input::placeholder {color: #9CA3AF; font-size: 13px;}
.url-input {padding-left: 44px !important; background-image: url(../img/link-ico.svg); background-repeat: no-repeat; background-position: 14px center;}
.url-input.valid {background-image: url(../img/link-ico-success.svg); border-color: #16A34A; background-color: #F0FDF4;}
.url-input.valid::placeholder {color: #1A1D23;}
.url-input:not(.valid) ~ .admin-modal-guide.valid {display: none;}
.url-input.valid ~ .admin-modal-guide.valid {color: #16A34A;}
.url-input.valid ~ .admin-modal-guide:not(.valid) {display: none;}
.required {color: #E74C3C;}

/* common - admin switch */
.admin-switch {position: relative; display: inline-flex; width: 40px; height: 22px; flex-shrink: 0; cursor: pointer;}
.admin-switch input {position: absolute; opacity: 0; pointer-events: none;}
.admin-switch span {display: block; width: 100%; height: 100%; border-radius: 999px; background-color: #CBD5E1; transition: background-color 0.2s;}
.admin-switch span::after {content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background-color: #fff; transition: left 0.2s;}
.admin-switch input:checked + span {background-color: #2563EB;}
.admin-switch input:checked + span::after {left: 21px;}

.site-header,.site-footer {display: none !important;}
.main-container {padding-top: 58px; margin-top: 0;}
.mypage-layout {display: flex; min-height: calc(100vh - 58px); background-color: #f5f8fc;}
.mypage-container {width: calc(100% - 220px); margin-left: 220px; padding: 24px 28px 60px;}
.mypage-aside {position: fixed; top: 0; left: 0; z-index: 100; width: 220px; height: 100vh; padding: 24px 0; border-right: 1px solid #E2E4EA; background-color: #fff;}
.mypage-aside .aside-logo {padding: 0 10px 10px;}
.parent-type .mypage-aside .aside-logo {text-align: center;}
.mypage-aside .aside-logo img {width: 120px; max-width: 100%;}
.mypage-aside .aside-logo p {margin-top: 10px; font-size: 15px; font-weight: 600; color: #141414;}
.mypage-aside .aside-student-select {position: relative; margin: 0 10px 10px;}
.mypage-aside .aside-student-btn {display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 62px; padding: 11px 12px; border: 1px solid #e5edf8; border-radius: 10px; background-color: #fff; text-align: left;}
.mypage-aside .aside-student-btn span {display: block;}
.mypage-aside .aside-student-btn strong {display: block; font-size: 14px; font-weight: 800; color: #1e293b;}
.mypage-aside .aside-student-btn em {display: block; margin-top: 4px; font-style: normal; font-size: 12px; font-weight: 600; color: #7b8aa1;}
.mypage-aside .aside-student-btn i {display: block; width: 8px; height: 8px; margin-right: 3px; border-right: 2px solid #111827; border-bottom: 2px solid #111827; transform: rotate(45deg) translateY(-2px);}
.mypage-aside .aside-student-select.open .aside-student-btn i {transform: rotate(225deg) translate(-2px, -2px);}
.mypage-aside .aside-student-list {display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; padding: 6px; border: 1px solid #e5edf8; border-radius: 10px; background-color: #fff; box-shadow: 0 10px 24px rgba(15, 23, 42, .08);}
.mypage-aside .aside-student-select.open .aside-student-list {display: block;}
.mypage-aside .aside-student-list li + li {margin-top: 4px;}
.mypage-aside .aside-student-list button {width: 100%; padding: 9px 8px; border-radius: 8px; text-align: left; font-size: 13px; font-weight: 800; color: #1e293b;}
.mypage-aside .aside-student-list button em {display: block; margin-top: 3px; font-style: normal; font-size: 11px; font-weight: 600; color: #7b8aa1;}
.mypage-aside .aside-student-list button:hover, .mypage-aside .aside-student-list button.on {background-color: #eaf3ff; color: #4a8fe7;}
.mypage-aside .aside-nav {height: calc(100vh - 200px); overflow-y: auto;}
.parent-type .mypage-aside .aside-nav {height: calc(100vh - 250px - 72px);}
.mypage-aside .aside-menu-group {margin-bottom: 26px;}
.mypage-aside .aside-menu-title {display: block; padding: 10px 20px; font-size: 14px; font-weight: 600; color: #9DAFC8;}
.mypage-aside .aside-menu-list {display: flex; flex-direction: column;}
.mypage-aside .aside-menu-list a {transition: background-color 0.2s; display: flex; align-items: center; justify-content: space-between; min-height: 38px; padding: 10px 20px; border-radius: 0; font-size: 15px; font-weight: 500; color: #5B7298; border-left: 3px solid transparent;}
.mypage-aside .aside-menu-list a span {display: flex; align-items: center; gap: 10px;}
.mypage-aside .aside-menu-list a.on {background-color: #EDF4FD; color: #4A90E2; border-color: #4A90E2;}
.mypage-aside .aside-menu-list a b {display: flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background-color: #4A90E2; font-size: 14px; font-weight: 700; color: #fff;}
.mypage-aside .aside-bottom {width: 100%; padding: 10px 10px 24px; position: absolute; left: 0; bottom: 0; background-color: #fff;}
.mypage-aside .aside-bottom-user {display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background-color: #F4F7FB;}
.mypage-aside .aside-bottom-user .user-avatar {width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: #4A90E2; background: linear-gradient(135deg, rgba(74, 144, 226, 1) 0%, rgba(103, 176, 255, 1) 100%); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #fff;}
.mypage-aside .aside-bottom-user .user-avatar img {width: 100%; height: 100%; object-fit: cover;}
.mypage-aside .aside-bottom-user strong {display: block; font-size: 15px; font-weight: 500; color: #1A2540;}
.mypage-aside .aside-bottom-user p {margin-top: 4px; font-size: 14px; color: #9DAFC8;}

.square-btn {min-width: 68px; flex-shrink: 0;}

.square-label {padding: 2px 9px; border-radius: 5px; font-size: 16px; font-weight: 700;}
.square-label.navy {color: #2A3A8A; background-color: #EEF2FF;}

.label {padding: 4px 10px; font-size: 13.5px; font-weight: 600; flex-shrink: 0;}
.label.scheduled,
.label.good,
.label.do {background-color: #E6F4EA; color: #2E7D32;}
.label.done {background-color: #DCFCE7; color: #15803D;}
.label.done2 {background-color: #E8F0FE; color: #2563EB;}
.label.none {background-color: #FEE2E2; color: #991B1B;}
.label.completed,
.label.warning {background-color: #FEF3C7; color: #92400E;}
.label.stopped {background-color: #F3F4F6; color: #6B7280;}
.label.not-submitted {background-color: #FFF1F2; color: #EF4444;}
.label.submitted {background-color: #D1FAE5; color: #047857;}
.label.undo {background-color: #DBEAFE; color: #1D4ED8;}
.label.blue {background-color: #DBEAFE; color: #1D4ED8;}
.label.blue2 {background-color: #F0F4FF; color: #3730A3;}
.label.blue3 {background-color: #EEF3FF; color: #1D4ED8;}
.label.light-blue {background-color: #EBF3FD; color: #4A90E2;}
.label.purple {background-color: #FDF4FF; color: #7E22CE;}
.label.red {background-color: #FEE2E2; color: #B91C1C;}

.txt-gray {color: #9CA3AF;}
.txt-d-gray {color: #6B7280;}
.txt-dart {color: #1A1D23;}


.label.provided {background-color: #E6F4EA; color: #2E7D32;}
.label.not_provided {background-color: #F3F4F6; color: #6B7280;}

.mypage-layout.admin-type .mypage-aside .aside-logo,
.mypage-layout.student-type .mypage-aside .aside-logo {text-align: left;}
.mypage-layout.admin-type .mypage-aside .aside-logo p,
.mypage-layout.student-type .mypage-aside .aside-logo p,
.mypage-layout.admin-type .mypage-aside .aside-student-select,
.mypage-layout.student-type .mypage-aside .aside-student-select {display: none;}
/* .mypage-layout.admin-type .mypage-aside .aside-nav,
.mypage-layout.student-type .mypage-aside .aside-nav {height: calc(100vh - 245px);} */

.file-upload-box {border-radius: 8px; padding: 18px; background-color: #FAFBFC; border: 1px dashed #D1D5DB; display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: border .2s ease, background-color .2s ease, box-shadow 0.2s;}
.file-upload-box p {font-size: 15px; color: #6B7280; margin-block: 6px 2px;}
.file-upload-box span {font-size: 14px; color: #9CA3AF;}
.file-upload-box.dragover {border-color: #2563EB; background-color: #EFF6FF;}
.upload-file-list {display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap;}
/* .feedback-file-item {display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 16px; border: 1px solid #E2E4EA; border-radius: 8px; background-color: #F5F6FA;} */
.feedback-file-item {transition: border 0.2s, box-shadow 0.2s; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 15px; border: 1px dashed #D1D5DB; border-radius: 8px; background-color: #F5F6FA;}
.feedback-file-item a {font-size: 15px; font-weight: 500; color: #2563EB; text-decoration: underline;}
.feedback-file-item strong {font-size: 14px; font-weight: 700; color: #1F2937;}
.feedback-file-item span {font-size: 13px; color: #9CA3AF;}
.feedback-file-item .file-remove-btn {transition: opacity 0.2s; opacity: 0.5; font-size: 0; width: 20px; height: 20px; background-image: url(../img/delete-ico.svg); background-repeat: no-repeat; background-position: center center;}

/* 아이콘 */
.mypage-aside .aside-menu-list a:not(.on) svg path {fill: #B9C3D4;}

/* 상단 */
.mypage-head {position: fixed; top: 0; left: 220px; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 28px; border-bottom: 1px solid #e5edf8; background-color: #fff;}
.mypage-head-left {display: flex; align-items: center; gap: 8px;}
.mypage-head-left .aside-open-btn {display: none; position: relative;}
.mypage-head-left .aside-open-btn span,
.mypage-head-left .aside-open-btn span:before,
.mypage-head-left .aside-open-btn span:after {display:block; position:absolute; left:0; transform:translate(0,-50%); width:16px; height:2px;border-radius: 2px; background:#111111; transition:all 0.3s;}
.mypage-head-left .aside-open-btn span {width: 12px; left: 8px; top:50%; transform:translate(0,-50%);}
.mypage-head-left .aside-open-btn span:before,
.mypage-head-left .aside-open-btn span:after {content:'';}
.mypage-head-left .aside-open-btn span:before {top:-4px;}
.mypage-head-left .aside-open-btn span:after {top:6px;}
.mypage-head-left .aside-open-btn.open span {background:transparent !important;}
.mypage-head-left .aside-open-btn.open span:before {top:0;transform:translate(0,-50%) rotate(45deg);}
.mypage-head-left .aside-open-btn.open span:after {top:0;transform:translate(0,-50%) rotate(-45deg);}
.mypage-head-left .student-info {display: flex; align-items: center; column-gap: 12px;}
.mypage-head-left .student-info strong {font-size: 15px; font-weight: 600; color: #1A2540;}
.mypage-head-left .student-info .label {background-color: #EBF3FD; color: #4A90E2; font-size: 14px; font-weight: 600;}
.mypage-head-left .page-info {font-size: 12px; color: #64748B;}
.mypage-head-right {display: flex; align-items: center; gap: 12px;}
.mypage-head-right p {font-size: 15px; color: #9AAABF;}
.head-alarm-btn {position: relative; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background-color: #F0F4FA;}
.head-alarm-btn::after {content: ""; position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border: 1px solid #fff; border-radius: 50%; background-color: #F4646B;}
.head-profile-btn {display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #4A90E2; background: linear-gradient(135deg, rgba(74, 144, 226, 1) 0%, rgba(103, 176, 255, 1) 100%); font-size: 13px; font-weight: 600; color: #fff;}

/* 학생&학부모 대시보드 공통 */
/* 대시보드 카드 */
.dashboard-card {overflow: hidden; padding: 20px; border: 1px solid #E8EFF8; border-radius: 14px; background-color: #fff;}
.dashboard-card + .dashboard-card {margin-top: 24px;}
.section-title {display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;}
.section-title h3 {font-size: 15px; font-weight: 800; color: #1A2540;}
.section-title h3 em {margin-left: 10px;}
.section-title a {font-size: 14px; font-weight: 500; color: #4A90E2;}
/* 수업 리스트 */
.class-list {display: flex; flex-direction: column; gap: 10px;}
.class-item {display: flex; align-items: center; min-height: 66px; padding: 12px 14px; border: 1px solid #E2E4EA; border-radius: 10px; background-color: #fff;}
.class-item.active {background-color: #fff; border: 1px solid transparent; background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, rgba(37, 99, 235, 1) 0%, rgba(48, 115, 241, 1) 49%, rgba(96, 165, 250, 1) 100%); background-origin: border-box; background-clip: padding-box, border-box;}
.class-item > div:first-child {width: 74px; flex-shrink: 0;}
.class-item > div:first-child strong {display: block; font-size: 15px; font-weight: 500; color: #000000;}
.class-item > div:first-child p {margin-top: 6px; font-size: 14px; color: #64748B;}
.class-item > div:nth-child(2) {flex: 1;}
.class-item h4 {font-size: 15px; font-weight: 500; color: #000;}
.class-item h4 + p {margin-top: 6px; font-size: 14px; color: #64748B;}
.class-item {}
/* 최근 과제 */
.task-list {display: flex; flex-direction: column; gap: 10px;}
.task-item {display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 20px 14px; border: 1px solid #EDF2FA; border-radius: 10px; background-color: #fff;}
.task-item > div {flex: 1;}
.task-item strong {display: block; font-size: 16px; font-weight: 600; color: #1A2540;}
.task-item p {margin-top: 4px; font-size: 14px; color: #64748B;}
.task-item button {font-size: 15px; font-weight: 500; color: #0B1F45 !important;}
.task-item b {margin-left: 12px; font-size: 22px; font-weight: 900; color: #2f6bff;}
.task-item b small {font-size: 13px; font-weight: 700; color: #6ea1ff;}
/* 학부모 결제 배너 */
.payment-banner {display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; padding: 22px 24px; border: 1px solid #E2E4EA; border-radius: 14px; background-color: #fff;}
.payment-banner p {margin-bottom: 10px; font-size: 15px; font-weight: 500;}
.payment-banner p.unpaid {color: #B91C1C;}
.payment-banner p.paid {color: #6B7280;}
.payment-banner strong {margin-right: 16px; font-size: 25px; font-weight: 900; color: #111827;}
.payment-banner span {font-size: 13px; color: #64748b;}
.payment-banner span em {font-style: normal; font-weight: 800; color: #ef4444;}
.payment-banner a {font-size: 16px; font-weight: 700; padding: 10px 13px;}
.payment-banner .payment-status {display: flex; align-items: center; column-gap: 10px; font-size: 16px; font-weight: 700; color: #27AE60;}


/* 마이페이지 모달 공통 */
html:has(.admin-modal.open) {overflow-y: hidden;}
.admin-modal {display: none; position: fixed; top: 50%; left: 50%; z-index: 999999; width: 90%; max-width: 560px; max-height: 90vh; overflow-y: auto; padding: 28px; border-radius: 14px; background-color: #fff; border: 1px solid #E2E4EA; transform: translate(-50%, -50%);}
.admin-modal.open {display: block;}
.admin-modal-bg {display: none; position: fixed; inset: 0; z-index: 999998; background-color: rgba(0, 0, 0, 0.45);}
.admin-modal-bg.open {display: block;}
.admin-modal-head {display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; column-gap: 6px;}
.admin-modal-head2 {display: flex; flex-direction: column; margin-bottom: 20px;}
.admin-modal-head2 .admin-modal-title {margin-block: 16px 8px;}
.admin-modal-head2 p {font-size: 14px; color: #6B7280;}
.admin-modal-head2 .modal-ico {width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center;}
.admin-modal-head2 .modal-ico.red {background-color: #FEE2E2;}
.admin-modal-head2 .modal-ico.blue {background-color: #EEF3FF;}
.admin-modal-title {display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #1A1D23;}
.admin-modal-title:has(p) {flex-direction: column; row-gap: 2px; align-items: flex-start;}
.admin-modal-title p {font-size: 14px; font-weight: 400; color: #5A6A85;}
.admin-modal-title svg {flex-shrink: 0;}
.admin-modal-title.success,
.admin-modal.success .admin-modal-title:not(.success) {display: none;}
.admin-modal.success .admin-modal-title.success {display: flex; color: #2E7D32;}
.admin-modal-close:not(.square-btn) {flex-shrink: 0; width: 30px; height: 30px; border: 1px solid #E2E4EA; border-radius: 7px; background-color: #F5F6FA;}
.admin-modal-info {display: flex; gap: 8px 10px; flex-wrap: wrap; margin-bottom: 28px; padding: 22px; border-radius: 16px; background-color: #F5F7FB;}
.admin-modal-info dl {margin: 0; width: calc(50% - 5px);}
.admin-modal-info dt {margin-bottom: 3px; font-size: 12px; line-height: 18px; font-weight: 600; color: #9CA3AF;}
.admin-modal-info dd {margin: 0; font-size: 15px; font-weight: 600; color: #1A1D23;}
.admin-modal-line {height: 1px; margin: 20px 0; background-color: #F3F4F6;}
.admin-modal .input-list {row-gap: 18px;}
.admin-modal .input-row {align-items: flex-start;}
.admin-modal-bottom {column-gap: 10px; justify-content: space-between; margin-top: 20px; padding-top: 26px; border-top: 1px solid #F3F4F6;}
.admin-modal-bottom.right {justify-content: flex-end;}
.admin-modal-bottom .desc {display: flex; align-items: center; column-gap: 5px; font-size: 14px; color: #9CA3AF;}
.admin-modal-bottom.success,
.admin-modal.success .admin-modal-bottom:not(.success) {display: none;}
.admin-modal.success .admin-modal-bottom.success {display: flex;}
.admin-modal-bottom .square-btn {padding: 10px 18px; font-weight: 700;}
.admin-modal-guide {font-size: 14px; color: #9CA3AF; display: flex; align-items: center; column-gap: 4px;}
.admin-modal-success-box {display: flex; align-items: center; gap: 18px; margin-bottom: 26px; padding: 22px; border: 1px solid #A7DDB4; border-radius: 16px; background-color: #EAF8ED;}
.admin-modal-success-box i {display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 14px; background-color: #2E7D32; color: #fff; font-style: normal; font-size: 26px; font-weight: 900;}
.admin-modal-success-box strong {display: block; font-size: 22px; font-weight: 800; color: #2E7D32;}
.admin-modal-success-box p {margin-top: 6px; font-size: 17px; color: #4F8C5A;}
.admin-modal-link-box {display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid #DDE2EA; border-radius: 12px; background-color: #F7F8FB;}
.admin-modal-link-box a {font-size: 18px; font-weight: 700; color: #1D4ED8; word-break: break-all;}
.admin-modal-link-box button {flex-shrink: 0;}
.admin-modal-note {margin-top: 16px; font-size: 16px; color: #6B7280;}
.admin-alert-modal {max-width: 420px; text-align: center;}
.admin-alert-modal .admin-alert-icon {display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0 auto 12px; border-radius: 12px; background-color: #FEF9C3;}
.admin-alert-modal h3 {font-size: 17px; font-weight: 700; color: #1A1D23;}
.admin-alert-modal > p {margin-top: 6px; font-size: 14px; line-height: 1.5; color: #6B7280;}
.admin-alert-modal .alert-notice-box {margin-top: 12px; padding: 10px 14px; border: 1px solid #FDE047; border-radius: 8px; background-color: #FEF9C3; text-align: left;}
.admin-alert-modal .alert-notice-box p {font-size: 14px; line-height: 1.5; color: #854D0E;}
.admin-alert-modal .alert-notice-box strong {font-weight: 700;}

/* 설정페이지 */
.setting-section {padding: 0 !important;}
.setting-section .setting-profile-head {display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; border-bottom: 1px solid #F0F4FA;}
.setting-section .setting-profile-user {display: flex; align-items: center; gap: 18px;}
.setting-section .setting-avatar {position: relative; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: #4A90E2; font-size: 22px; font-weight: 600; color: #fff;}
.setting-section .setting-avatar .avatar-chage-btn {position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; border: 1px solid #E8EDF5; border-radius: 50%; background-color: #fff;}
.setting-section .setting-avatar .avatar-chage-btn svg {width: 10px; height: 10px;}
.setting-section .setting-profile-user strong {display: block; font-size: 18px; font-weight: 600; color: #1A2540;}
.setting-section .setting-profile-user p {margin-top: 4px; font-size: 15px; font-weight: 400; color: #9AAABF;}
.setting-section .setting-info-list {padding: 18px 22px;}
.setting-section .setting-info-list dl {display: grid; grid-template-columns: 120px 1fr; align-items: center; min-height: 47px; border-bottom: 1px solid #F5F7FC;}
.setting-section .setting-info-list dl:last-child {border-bottom: 0;}
.setting-section .setting-info-list dt {font-size: 15px; font-weight: 500; color: #9AAABF;}
.setting-section .setting-info-list dd {font-size: 15px; font-weight: 500; color: #1A2540;}
.setting-section .setting-section-title {padding: 16px 22px; border-bottom: 1px solid #F0F4FA;}
.setting-section .setting-section-title h3 {display: inline-flex; align-items: center; column-gap: 8px; font-size: 15px; font-weight: 600; color: #1A2540;}
.setting-section .setting-section-title.red h3 {color: #EF4444;}
.setting-section .setting-form-block {padding-top: 18px; padding-inline: 22px;}
.setting-section .setting-form-block h4,.setting-connect-block h4 {margin-bottom: 14px; font-size: 15px; font-weight: 500; color: #1A2540;}
.setting-section .setting-form-block .input-list {gap: 14px;}
.setting-section .setting-form-block .input-wrap label {display: block; margin-bottom: -2px; font-size: 15px; font-weight: 500; color: #6B7A99;}
.setting-section .setting-form-block input {width: 100%; background-color: #F8FAFC;}
.setting-section .setting-form-block .input-guide {margin-top: -2px; font-size: 11px; font-weight: 400; color: #9AAABF;}
.setting-section .password-change-btn {margin-top: 14px;}
.setting-section .setting-connect-block {margin-top: 20px; padding-block: 14px 18px; padding-inline: 22px; border-top: 1px solid #F0F4FA;}
.setting-section .setting-connect-block .mini-btn.white-btn {font-size: 14px; font-weight: 400; color: #8191A7;}
.setting-section .setting-connect-block dl {display: grid; grid-template-columns: 120px 1fr; align-items: center; min-height: 46px; border-bottom: 1px solid #F5F7FC;}
.setting-section .setting-connect-block dl:last-child {border-bottom: 0;}
.setting-section .setting-connect-block dt {font-size: 15px; font-weight: 500; color: #9AAABF;}
.setting-section .setting-connect-block dd {display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 400; color: #1A2540;}
.setting-section .kakao-badge {display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background-color: #FEE500;}
.setting-logout-section,
.setting-logout-section .setting-section-title {border-color: #FDE8E8; }
.setting-section .setting-logout-content {display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px;}
.setting-section .setting-logout-content p {font-size: 15px; font-weight: 400; color: #6B7A99;}
.setting-logout-section .logout-btn {border-color: #F7C1C1; font-weight: 600;}

/* 선생님 코멘트 */
.teacher-comment-box {padding: 14px 16px; border-left: 3px solid #2563EB; background-color: #F0F6FF;}
.teacher-comment-box p {font-size: 15px; color: #374151;}
.teacher-comment-box span {display: inline-flex; column-gap: 5px; align-items: center; margin-top: 8px; font-size: 13px; color: #6B7280;}


/* 출결 관리(캘린더) */
.attendance-layout {display: grid; grid-template-columns: 520px 1fr; gap: 24px; align-items: flex-start;}
.attendance-layout .dashboard-card + .dashboard-card {margin-top: 0;}
.attendance-calendar-card {padding: 0 !important; border-color: #C8D7F099;}
.attendance-card-head {display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; background: linear-gradient(135deg, #F8FAFF 0%, #fff 100%);}
.attendance-title {display: flex; align-items: center; gap: 12px;}
.attendance-icon {display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background-color: #EDF4FD;}
.attendance-title h3 {font-size: 16px; font-weight: 600; color: #1E2B45;}
.attendance-title p {margin-top: 4px; font-size: 15px; color: #8FA3C0;}
.calendar-month-control {display: flex; align-items: center; gap: 16px;}
.calendar-month-control .icon-btn {width: 32px; height: 32px; border: 1px solid #DDE6F5; border-radius: 8px; background-color: #F7FAFF;}
.attendance-legend {display: flex; align-items: center; gap: 20px; padding: 10px 24px; border-top: 1px solid #EDF1FA; border-bottom: 1px solid #EDF1FA; background-color: #F9FBFF;}
.attendance-legend span {display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #6A85B0;}
.attendance-legend i {width: 15px; height: 15px; border-radius: 5px;}
.attendance-legend i.present {background-color: #C8DCF8; border: 1px solid #A5C4F0;}
.attendance-legend i.absent {background-color: #FCCACA; border: 1px solid #F5A5A5;}
.attendance-legend i.late {background-color: #FDE8A8; border: 1px solid #F8D46A;}
.attendance-calendar {padding: 16px 20px 20px;}
.calendar-week {display: grid; grid-template-columns: repeat(7, 1fr); height: 27px; margin-bottom: 4px;}
.calendar-week span {text-align: center; font-size: 14px; color: #A0B2CC; line-height: 27px;}
.calendar-week span.saturday {color: #6A9AE8;}
.calendar-week span.sunday {color: #EF4444;}
.calendar-day-list {display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;}
.calendar-day-list button {position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 64px; border: 2px solid transparent; border-radius: 10px; font-size: 15px; font-weight: 600; color: #1A2540;}
.calendar-day-list button span {position: relative; z-index: 2;}
.calendar-day-list button i {display: block; width: 4px; height: 4px; margin-top: 9px; border-radius: 50%;}
.calendar-day-list button.muted {color: #CBD5E1 !important;}
.calendar-day-list button.present {background-color: #EAF2FE; color: #3A70D4;}
.calendar-day-list button.present i {background-color: #3A70D499;}
.calendar-day-list button.absent {background-color: #FEECEC; color: #D44040;}
.calendar-day-list button.absent i {background-color: #D4404099;}
.calendar-day-list button.late {background-color: #FEF7E0; color: #B08020;}
.calendar-day-list button.late i {background-color: #B0802099;}
.calendar-day-list button.active {border-color: #5B8EF0;}
.calendar-day-list button:nth-child(7n + 1):not(.present):not(.absent):not(.late) span {color: #E07A7A;}
.calendar-day-list button:nth-child(7n):not(.present):not(.absent):not(.late) span {color: #6A9AE8;}
.attendance-detail-card {padding: 28px 20px;}
.attendance-detail-date h3 {font-size: 15px; font-weight: 700; color: #2C3E68;}
.attendance-class-list {display: flex; flex-direction: column; gap: 14px; margin-top: 20px;}
.attendance-class-item {display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 62px; padding: 10px 14px; border: 1px solid #EDF2FA; border-radius: 10px; background-color: #fff;}
.attendance-class-item .class-info {display: flex; align-items: center; gap: 12px;}
.attendance-class-item .class-info > i {width: 8px; height: 8px; border-radius: 50%; background-color: #4A90E2;}
.attendance-class-item strong {display: block; font-size: 15px; font-weight: 500; color: #000;}
.attendance-class-item p {margin-top: 6px; font-size: 14px; color: #64748B;}
.class-status {display: flex; align-items: center; gap: 12px; flex-shrink: 0;}
.class-status span {font-size: 14px; font-weight: 500; color: #64748B;}
.class-status em {display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 10px; border-radius: 10px; font-style: normal; font-size: 15px; font-weight: 700;}
.class-status em.present {background-color: #EAF3FF; color: #2D6BE4;}
.class-status em.absent {background-color: #FEECEC; color: #D44040;}
.class-status em.late {background-color: #FEF7E0; color: #B08020;}

/* common - 국어 · 논술 로드맵 */
.roadmap-section {padding: 20px;}
.roadmap-section .roadmap-card {padding: 24px; border: 1px solid #E8EDF5; border-radius: 24px; background-color: #fff; box-shadow: 0 8px 24px #0B1F450F;}
.roadmap-section .roadmap-card+.roadmap-card {margin-top: 30px;}
.roadmap-card-head {display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px;}
.roadmap-title-wrap {display: flex; align-items: center; gap: 10px;}
.roadmap-ico {display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background-color: #0B1F45;}
.roadmap-title-wrap h3 {font-size: 15px; font-weight: 600; color: #0B1F45;}
.roadmap-title-wrap p {margin-top: 2px; font-size: 14px; font-weight: 400; color: #94A3B8;}
.roadmap-step-list {display: flex; align-items: center; gap: 20px;}
.roadmap-step-item {width: calc((100% - (20px * 6) - (24px * 3)) / 4); position: relative; min-height: 158px; padding: 14px 10px; border: 2px solid #E2E8F0; border-radius: 16px; background-color: #F8FAFC; display: flex; flex-direction: column; justify-content: center; row-gap: 10px;}
.roadmap-step-item.done {border-color: #86EFAC; background-color: #F0FDF4;}
.roadmap-step-item.current {box-shadow: 0 0 0 4px #FDB5151F; border-color: #FDB515; background-color: #FFFBEB;}
.roadmap-step-item.wait {border-color: #E2E8F0; background-color: #F8FAFC;}
.roadmap-check {display: none; position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background-color: #22C55E; border: 2px solid #fff; align-items: center; justify-content: center;}
.roadmap-step-item.done .roadmap-check {display: flex;}
.roadmap-step-item strong {display: block; text-align: center; font-size: 14px; font-weight: 600; color: #9CA3AF;}
.roadmap-step-item h4 {text-align: center; font-size: 15px; font-weight: 700; color: #0B1F45;}
.roadmap-step-item em {display: flex; align-items: center; justify-content: center; width: fit-content; margin-inline: auto; padding: 6px 10px; border-radius: 999px; background-color: #DCFCE7; font-style: normal; font-size: 14px; font-weight: 600; color: #166534;}
.roadmap-step-item.current em {background-color: #FEF3C7; color: #92400E;}
.roadmap-step-item.wait em {background-color: #F1F5F9; color: #94A3B8;}
.roadmap-step-item.current b {display: inline-flex; align-items: center; justify-content: center; column-gap: 6px; width: fit-content; margin-inline: auto; padding: 6px 10px; border-radius: 999px; background-color: #FACC15; font-size: 14px; font-weight: 600; color: #111827;}
/* .roadmap-step-item.current b img {width: 13px;} */
.roadmap-step-item .input-list {row-gap: 10px;}
.roadmap-step-item .custom-select {width: 100%;}
.roadmap-timeline {margin-top: 24px;}
.roadmap-timeline p {margin-bottom: 10px; font-size: 16px; font-weight: 600; color: #94A3B8;}
.roadmap-timeline-bar {display: grid; grid-template-columns: repeat(4, 1fr); align-items: center;}
.roadmap-timeline-bar span {position: relative; height: 6px; background-color: #E2E8F0;}
.roadmap-timeline-bar span.done {background-color: #22C55E;}
.roadmap-timeline-bar span.current {background-color: #FDB515;}
.roadmap-timeline-bar span::after {content: ''; position: absolute; top: 50%; right: -5px; z-index: 2; width: 16px; height: 16px; border-radius: 50%; background-color: #CBD5E1; border: 2px solid #fff; transform: translateY(-50%);}
.roadmap-timeline-bar span.done::after {background-color: #22C55E;}
.roadmap-timeline-bar span.current::after {width: 20px; height: 20px; background-color: #FDB515; box-shadow: 0 0 0 3px #FDB5154D;}
.roadmap-timeline-date {display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 16px;}
.roadmap-timeline-date span {text-align: center; font-size: 13px; font-weight: 700; color: #94A3B8;}
.roadmap-timeline-date span.current {color: #F59E0B;}

/* common - 교재 소개 카드 */
.monthly-book-section .section-title {margin-bottom: 16px;}
.monthly-book-section .section-title p {margin-top: 4px; font-size: 14px; font-weight: 400; color: #6B7280;}
.monthly-book-card {overflow: hidden; border: 1px solid #E5E7EB; border-radius: 12px; background-color: #fff;}
.monthly-book-card .admin-section-head {padding: 16px 20px; margin-bottom: 0; border-bottom: 1px solid #F0F2F5;}
.monthly-book-card .admin-section-head h3 {gap: 10px;}
.monthly-book-card .admin-section-head h3 .label-list {display: flex; align-items: center; column-gap: 10px;}
.monthly-book-card .label {padding: 10px 14px; font-size: 14px; font-weight: 500;}
.monthly-book-card .label.gray {border: 1px solid #E9E9E9; background-color: #fff; color: #2F2F2F;}
.monthly-book-empty {padding-block: 20px; text-align: center; font-size: 16px; font-weight: 500; color: #999999;}
.monthly-book-item {display: flex; align-items: center; gap: 30px; margin: 20px; padding: 20px; border: 1px solid #E8EAED; border-radius: 12px; background-color: #fff;}
.monthly-book-thumb {overflow: hidden; width: 200px; height: auto; aspect-ratio: 220 / 228; flex-shrink: 0; background-color: #F9FBFE;}
.monthly-book-thumb img {display: block; width: 100%; height: 100%; object-fit: contain;}
.monthly-book-info {min-width: 0; flex: 1;}
.monthly-book-badge {display: inline-flex; align-items: center; justify-content: center; min-height: 26px; margin-bottom: 10px; padding: 0 10px; border-radius: 999px; background-color: #EBF2FF; font-size: 13px; font-weight: 600; color: #2563EB;}
.monthly-book-title {display: flex; align-items: center; gap: 10px; margin-bottom: 10px;}
.monthly-book-title h4 {font-size: 16px; font-weight: 600; color: #111827;}
.monthly-book-info ul {display: flex; flex-direction: column; row-gap: 4px; margin-bottom: 12px;}
.monthly-book-info li {font-size: 16px; font-weight: 400; color: #6B7280;}
.monthly-book-info > p {width: fit-content; padding: 10px; border-left: 3px solid #2563EB; background-color: #F8F9FA; font-size: 15px; font-weight: 500; color: #6B7280; word-break: keep-all;}
.monthly-book-bottom {display: flex; align-items: center; gap: 20px; justify-content: space-between; margin-top: 12px; padding-block: 12px; border-top: 1px solid #E8EAED;}
.monthly-book-bottom p {display: flex; align-items: center; gap: 0 20px; flex-wrap: wrap;}
.monthly-book-bottom strong {font-size: 20px; font-weight: 700; color: #111827;}
.monthly-book-link {display: inline-flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 500; color: #00882D;}
.monthly-book-btns {column-gap: 10px;}
.monthly-book-btns .mini-btn {padding: 10px 18px; font-size: 15px; font-weight: 400; height: unset;}
.monthly-book-buy-btn {margin-left: auto; flex-shrink: 0; padding-inline: 22px;}

@media (hover: hover) {
    .feedback-file-item .file-remove-btn:hover {opacity: 1;}
    .admin-table-bottom .admin-pagination a:hover {box-shadow: 0 0 0 2px #ADADAD4D;}
    .feedback-file-item:has(.file-remove-btn:hover),
    .file-upload-box:hover {border-style: solid; box-shadow: 0 0 0 5px #ADADAD4D;}
    .mypage-aside .aside-menu-list a:hover {background-color: #EDF4FD;}
    .mini-btn:hover {box-shadow: 0 0 0 2px #ADADAD4D;}
    .datepicker:hover, .radio-item:hover, input[type="url"]:hover, input[type="tel"]:hover, input[type="file"]:hover, input[type="text"]:hover, input[type="password"]:hover, input[type="email"]:hover, input[type="number"]:hover, .custom-radio label:hover, .custom-select select:hover, .search-form:hover, textarea:hover {box-shadow: unset; border: 1px dashed #c0c5ce;}
}
/* 반응형 */
@media screen and (max-width: 1600px) {
    /* common - 국어 · 논술 로드맵 */
    .roadmap-step-list {display: flex; flex-wrap: wrap; gap: 18px; align-items: center;}
    .roadmap-step-item {width: calc(50% - 9px);}
    .roadmap-arrow {display: none;}
    /* common - 교재 소개 카드 */
    .monthly-book-item {gap: 24px;}
    .monthly-book-thumb {width: 170px;}
}
@media screen and (max-width: 1024px) {
    .mypage-head-left .aside-open-btn {display: flex; width: 36px; height: 36px;}
    .mypage-head {left: 0; width: 100%;}
    .mypage-aside {left: -220px; transition: left 0.3s; height: calc(100vh - 60px); top: 60px;}
    .mypage-aside.open {left: 0;}
    .mypage-container {width: 100%; margin-left: 0;}
}
@media screen and (max-width: 768px) {
    .admin-modal {padding: 24px;}
    .dashboard-card {padding: 16px;}
    .mypage-head,.mypage-container {padding-inline: 24px;}
    .search-input {max-width: calc(100% - 250px - 30px);}

    /* common - 국어 · 논술 로드맵 */
    /* .roadmap-section {padding: 0 !important;} */
    .roadmap-card-head {align-items: stretch; flex-direction: column; margin-bottom: 22px;}
    .roadmap-card-head .square-btn {width: 100%;}
    .roadmap-step-item {width: 100%; min-height: unset;}

    /* common - 교재 소개 카드 */
    .monthly-book-item {position: relative; padding: 16px; padding-bottom: 100px;}
    .monthly-book-bottom {position: absolute; left: 0; bottom: 0; width: 100%; padding: 16px;}
    .monthly-book-thumb {width: 140px;}
    .monthly-book-btns {width: 100%; flex-direction: row; align-self: stretch; margin-left: 0;}
    .monthly-book-btns .mini-btn {flex: 1;}
}
@media screen and (max-width: 600px) {
    /* common - 교재 소개 카드 */
    .monthly-book-item {flex-direction: column; align-items: flex-start;}

    /* 반응형 추가 260622 */
    .input-list {row-gap: 12px;}
    .input-row {flex-direction: column; row-gap: 12px;}
}
@media screen and (max-width: 480px) {
    .calendar-day-list {gap: 2px;}
    .calendar-day-list button {min-height: 46px; font-size: 13px; border-radius: 8px;}

    .admin-modal {padding: 16px;}
    .mini-btn {font-size: 14px; padding-inline: 5px;}
    input[type="url"],input[type="tel"],input[type="file"],input[type="text"],input[type="password"],input[type="email"],input[type="number"],.datepicker,.custom-select select {font-size: 14px; padding-inline: 8px;}
    .dashboard-card {padding: 14px;}
    .mypage-head,.mypage-container {padding-inline: 16px;}
    .mypage-head-left .student-info,
    .mypage-head-left .page-info {display: none;}
    .search-input {width: 100%; max-width: unset;}

    .setting-section .setting-profile-user,
    .setting-section .setting-logout-content {flex-direction: column; align-items: flex-start;}

    /* common - 국어 · 논술 로드맵 */
    .roadmap-section .roadmap-card {padding: 16px;}
    .roadmap-timeline-date span {font-size: 12px;}

    /* common - 교재 소개 카드 */
    .monthly-book-item {padding-bottom: 124px;}
    .monthly-book-title {align-items: flex-start; flex-direction: column;}
    .monthly-book-title h4 {font-size: 16px;}
    .monthly-book-info li,
    .monthly-book-info > p,
    .monthly-book-link {font-size: 14px;}
    .monthly-book-bottom {align-items: flex-start; flex-direction: column; gap: 10px;}
    .monthly-book-bottom strong {font-size: 20px;}

    /* 반응형 추가 260619 */
    .calendar-day-list button {min-height: unset; aspect-ratio: 1/1;}
    .calendar-day-list button i {margin-top: 1.5vw;}
    .attendance-card-head {flex-direction: column; row-gap: 12px; align-items: flex-start;}
}

@media screen and (max-width: 375px) {
    .task-item,
    .class-item {flex-direction: column; align-items: flex-start; row-gap: 6px;}
    .payment-banner {flex-direction: column; align-items: flex-start; row-gap: 10px;}
    .parent-payment-page .parent-payment-card {padding: 0; border-radius: 0; background-color: transparent;}

    .setting-section .setting-profile-head {flex-direction: column;}
    .setting-section .setting-profile-user {align-items: center; text-align: center;}
    .setting-section .setting-profile-user p {text-align: center;}
    .setting-section .setting-connect-block dl,
    .setting-section .setting-info-list dl {display: flex; flex-direction: column; align-items: flex-start; row-gap: 6px; padding-block: 4px;}

    .monthly-book-card .admin-section-head h3 {flex-wrap: wrap;}
    .monthly-book-card .admin-section-head h3 > *:not(.label) {width: 100%;}
    .monthly-book-item {padding-bottom: 140px;}

    /* 반응형 추가 260619 */
    .calendar-day-list button i {margin-top: 0;}
    .roadmap-timeline-date span {display: none;}
    .admin-modal-info dl {width: 100%;}
}