@charset "utf-8";
/* 학생/학부모 공통 */
.pagination {display: flex; align-items: center; justify-content: center; gap: 6px;}
.pagination a {display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid #E5E7EB; border-radius: 6px; background-color: #fff; font-size: 14px; font-weight: 700; color: #6B7280;}
.pagination a.active {border-color: #2563EB; background-color: #2563EB; color: #fff;}
.pagination .page-arrow {color: #9CA3AF;}
.file-list {display: flex; align-items: center; gap: 10px; flex-wrap: wrap;}
.file-btn {border: 1px dashed #CBD5E1; background-color: #EFF6FF; color: #2563EB;}
.user-page {display: flex; flex-direction: column; gap: 18px;}
.user-page-title p {font-size: 15px; font-weight: 600; color: #9CA3AF;}
.user-summary-grid {display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 18px;}
.user-summary-grid .user-summary-card {width: calc(25% - 60px / 4); margin-top: 0;}
.user-summary-card {padding: 20px 22px; display: flex; flex-direction: column; row-gap: 2px;}
.user-summary-card p {font-size: 14px; font-weight: 500; color: #8896A4;}
.user-summary-card strong {display: block; font-size: 24px; font-weight: 900; color: #0D1B2E;}
.user-summary-card strong.blue {color: #1D4ED8;}
.user-summary-card strong.green {color:#16A34A;}
.user-summary-card strong.red {color: #B91C1C;}
.user-summary-card strong.orange {color: #D97706;}
.user-summary-card span {font-size: 12px; font-weight: 400; color: #9CA3AF; display: block;}

.user-table-wrap {overflow-x: auto;}
.user-table {width: 100%; min-width: 900px; border-collapse: collapse;}
.user-table thead {background-color: #F4F6FA;}
.user-table th {padding: 12px 29px; text-align: left; font-size: 15px; font-weight: 500; color: #8896A4;}
.user-table td {padding: 18px; border-bottom: 1px solid #EDF0F5; font-size: 13px; font-weight: 400; color: #374151;}
.user-table tr:last-child td {border-bottom: 0;}
.user-table td .btn-wrap {column-gap: 6px;}
.user-table td .btn-wrap .square-btn {min-width: 56px;}


/* 학생 마이페이지 */
.student-page-title {margin-bottom: 30px;}
.student-page-title h2 {font-size: 22px; font-weight: 700; color: #1A1D23;}
.student-page-title p {word-break: keep-all; margin-top: 10px; font-size: 15px; color: #6B7280;}

.student-study-page .dashboard-card + .dashboard-card {margin-top: 24px;}

/* 현재 수강 과목 */
.student-current-course-list {display: flex; flex-direction: column; gap: 12px;}
.student-current-course-item {display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 18px; border: 1px solid #E5E7EB; border-radius: 10px; background-color: #fff;}
.student-current-course-item .course-info > strong {display: block; margin-bottom: 6px; font-size: 16px; font-weight: 700; color: #111827;}
.student-current-course-item .course-info ul {display: flex; flex-direction: column; gap: 5px; margin-top: 10px;}
.student-current-course-item .course-info li {display: flex; align-items: center; gap: 6px; font-size: 14px;}
.student-current-course-item .course-info li span {font-weight: 400; display: flex; align-items: center; column-gap: 6px; color: #6B7280;}
.student-current-course-item .course-info li b {font-weight: 700; color: #374151;}
.course-progress {font-size: 14px; font-weight: 700; color: #1D4ED8;}

/* 지난 수강 기록 */
.student-past-course-list {display: flex; flex-direction: column; gap: 12px;}
.student-past-course-item {padding: 14px 18px; border: 1px solid #E5E7EB; border-radius: 10px; background-color: #fff;}
.past-course-head {display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px;}
.past-course-head strong {font-size: 15px; font-weight: 600; color: #111827;}
.past-course-info {display: flex; flex-wrap: wrap; gap: 6px;}
.past-course-info dl {width: calc(50% - 3px);}
.past-course-info dt {margin-bottom: 4px; font-size: 12px; font-weight: 600; color: #9CA3AF;}
.past-course-info dd {font-size: 14px; font-weight: 500; color: #374151;}
.course-stop-reason {margin-top: 14px; padding: 11px 12px; border-radius: 7px; background-color: #FEF2F2; border-left: 3px solid #FCA5A5; font-size: 14px; font-weight: 400; color: #B91C1C;}

/* 월별 학습 요약 */
.student-monthly-list {display: flex; flex-direction: column; gap: 8px;}
.student-monthly-item {display: flex; align-items: center; justify-content: space-between; min-height: 46px; padding: 0 16px; border: 1px solid #E5E7EB; border-radius: 8px; background-color: #F9FAFB;}
.student-monthly-item strong {font-size: 15px; font-weight: 700; color: #374151;}
.student-monthly-item span {font-size: 15px; font-weight: 600; color: #1D4ED8;}
.student-monthly-item.active {border-color: #BFDBFE; background-color: #EFF6FF;}
.student-monthly-item.active strong {color: #1D4ED8;}

/* 학생 교재 주문 내역 */
.student-page-title.has-btn {display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;}
.student-summary-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 20px;}
.student-summary-card {margin-top: 0 !important;}
.student-summary-card strong {display: block; margin-bottom: 6px; font-size: 24px; font-weight: 900;}
.student-summary-card strong.navy {color: #0B1F45;}
.student-summary-card strong.orange {color: #D97706;}
.student-summary-card strong.green {color: #059669;}
.student-summary-card p {font-size: 14px; font-weight: 600; color: #64748B;}

.student-order-filter {display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px;}
.student-order-tabs {display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid #E2E8F0; border-radius: 9px; background-color: #fff;}
.student-order-tabs button {height: 30px; padding: 0 14px; border-radius: 6px; font-size: 14px; font-weight: 700; color: #64748B;}
.student-order-tabs button.on {background-color: #0B1F45; color: #fff;}
.student-order-controls {display: flex; align-items: center; gap: 8px;}
.student-order-controls .custom-select select {min-width: 130px;}
.student-order-controls .search-input {width: 220px;}

.student-order-card {padding: 0;}
.student-order-table .order-no {font-size: 13px; font-weight: 600; color: #8896A4;}
.student-order-table .order-book-info {display: flex; align-items: center; gap: 14px;}
.student-order-table .order-book-thumb {overflow: hidden; width: 46px; height: 46px; background-color: #F3F4F6;}
.student-order-table .order-book-thumb img {display: block; width: 100%; height: 100%; object-fit: cover;}
.student-order-table .order-book-info strong {display: block; font-size: 14px; font-weight: 700; color: #0D1B2E;}
.student-order-table .order-book-info p {margin-top: 1px; font-size: 11px; color: #8896A4;}
.student-order-table .order-date {font-size: 13px; font-weight: 400; color: #4A5568;}
.student-order-table .order-price {font-size: 14px; font-weight: 700; color: #0D1B2E;}
.student-order-table .order-action .square-btn {min-width: 76px;}

.student-order-guide {display: flex; align-items: center; gap: 30px; margin-top: 18 !important; padding: 20px 24px;}
.student-order-guide p {position: relative; padding-left: 15px; font-size: 13px; font-weight: 400; color: #4A5568;}
.student-order-guide p::before {content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background-color: #B0BAC6;}

/* 학생 교재 주문 상세 모달 */
.student-order-detail-modal {max-width: 960px;}
.student-order-detail-modal .student-order-detail-section {overflow: hidden; border: 1px solid #E4E8EF; border-radius: 12px; background-color: #fff; box-shadow: 0 1px 4px #0B1F450D;}
.student-order-detail-modal .student-order-detail-section + .student-order-detail-section {margin-top: 20px;}
.student-order-detail-modal .student-order-detail-section h4 {padding: 16px 24px; border-bottom: 1px solid #E4E8EF; font-size: 15px; font-weight: 700; color: #0B1F45;}
.student-order-detail-modal .order-summary-info {display: flex; flex-wrap: wrap; padding: 16px 0;}
.student-order-detail-modal .order-summary-info dl {width: 25%; padding: 0 18px; border-right: 1px solid #E4E8EF;}
.student-order-detail-modal .order-summary-info dl:last-child {border-right: 0;}
.student-order-detail-modal .order-summary-info dt {margin-bottom: 6px; font-size: 14px; font-weight: 500; color: #8A96AA;}
.student-order-detail-modal .order-summary-info dd {font-size: 14px; font-weight: 500; color: #0B1F45;}
.student-order-detail-modal .order-book-detail {display: flex; align-items: center; gap: 18px; padding: 20px 24px;}
.student-order-detail-modal .order-book-thumb.large {width: 70px; height: 70px;}
.student-order-detail-modal .order-book-thumb.large img {width: 100%; height: 100%; object-fit: cover;}
.student-order-detail-modal .order-book-text {flex: 1;}
.student-order-detail-modal .order-book-text strong {display: block; font-size: 16px; font-weight: 700; color: #1A2340;}
.student-order-detail-modal .order-book-text p {font-size: 11px; color: #8896A4;}
.student-order-detail-modal .order-book-price {}
.student-order-detail-modal .order-book-price span {display: block; margin-bottom: 10px; font-size: 13px; color: #8A96AA;}
.student-order-detail-modal .order-book-price strong {font-size: 18px; font-weight: 500; color: #0B1F45;}
.student-order-detail-modal .order-info-list {}
.student-order-detail-modal .order-info-list dl {padding-inline: 24px; display: grid; grid-template-columns: 130px 1fr; align-items: center; min-height: 46px; border-bottom: 1px solid #E5E7EB;}
.student-order-detail-modal .order-info-list dl:last-child {border-bottom: 0;}
.student-order-detail-modal .order-info-list dt {font-size: 14px; font-weight: 500; color: #8A96AA;}
.student-order-detail-modal .order-info-list dd {font-size: 15px; font-weight: 500; color: #1A2340;}
.student-order-detail-modal .order-info-list dd.txt-gray {font-size: 14px; color: #5A6A85;}
.student-order-detail-modal .order-cancel-guide {display: flex; flex-direction: column; gap: 10px; padding: 20px 24px;}
.student-order-detail-modal .order-cancel-guide li {font-size: 14px; color: #5A6A85;}
.student-order-detail-modal .order-cancel-guide li::before {content: '- '; color: #8A96AA;}
.student-order-detail-modal .student-order-detail-section .square-btn {margin: 0 20px 20px;}

/* 학생 과제/평가 */
.student-task-page .student-page-title {}
.student-task-tabs {display: flex; align-items: center; gap: 10px; margin-bottom: 18px;}
.student-task-tabs a {display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 16px; border: 1px solid #E5E7EB; border-radius: 999px; background-color: #fff; font-size: 14px; font-weight: 400; color: #4B5563;}
.student-task-tabs a.on {border-color: #2563EB; background-color: #2563EB; color: #fff;}
.student-task-list {gap: 10px;}
.student-task-item {justify-content: space-between; gap: 20px; min-height: 82px; padding: 10px 14px; border-color: #EDF2FA; border-radius: 10px;}
.student-task-info {flex: 1;}
.student-task-info strong {font-size: 16px; font-weight: 600; color: #1A2540;}
.student-task-info p {margin-top: 4px; font-size: 14px; font-weight: 400; color: #64748B;}
.student-task-action {display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-shrink: 0;}
.student-task-action .square-btn {height: 36px; min-width: 106px; gap: 10px; padding: 0 10px; border-radius: 10px; font-size: 15px; font-weight: 500;}
.student-task-action b {margin-left: 0; font-size: 24px; font-weight: 700; color: #2563EB;}
.student-task-action b small {font-size: 15px; font-weight: 700; color: #92B2F8;}

/* 학생 과제 작성 */
.student-task-write-page {gap: 18px;}
.student-task-write-card {padding: 16px 18px; display: flex; flex-direction: column; row-gap: 30px;}
.task-write-head {padding-bottom: 30px; border-bottom: 1px solid #E5E7EB;}
.task-write-head h2 {display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 16px; font-weight: 700; color: #111827;}
.task-write-head p {margin-top: 8px; font-size: 15px; font-weight: 400; color: #6B7280;}
.task-submit-form {display: flex; flex-direction: column; row-gap: 30px;}
.task-write-section h3 {margin-bottom: 8px; font-size: 14px; font-weight: 500; color: #6B7280;}
.task-desc-box {padding: 10px; border-radius: 10px; background-color: #F9FAFB; font-size: 15px; color: #4B5563;}
.task-write-section textarea {height: 130px;}
.task-write-bottom {gap: 30px;}
.task-write-bottom .square-btn {flex: 1; height: 50px;}
.task-write-bottom .cancel-btn {max-width: 400px;}
.task-write-bottom .submit-btn:disabled {background-color: #BFBFBF; border-color: #E6E6E6;}

/* 학생 과제 상세 */
.student-task-view-page {gap: 24px;}
.task-result-card {display: grid; grid-template-columns: 300px 1fr; padding: 0; overflow: hidden;}
.task-score-box {display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 230px; padding: 28px; background: linear-gradient(135deg, #2867EC 0%, #377CF4 100%); color: #fff;}
.task-score-box strong {font-size: 16px; font-weight: 600; text-align: center;}
.task-score-box b {display: block; margin-top: 10px; font-size: 48px; font-weight: 700;}
.task-score-box b small {font-size: 16px; font-weight: 700; color: #FFFFFFCC;}
.task-result-content {display: flex; flex-direction: column; row-gap: 30px; padding: 16px 18px;}
.submitted-file-box {display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 14px; border: 1px solid #E5E7EB; border-radius: 8px; background-color: #F7F9FC;}
.submitted-file-box > a:first-child {font-size: 15px; font-weight: 800; color: #2563EB; text-decoration: underline;}
.submitted-file-box .square-btn {height: 34px; min-width: 92px; font-size: 14px; font-weight: 800;}
.task-answer-box {padding: 20px; border-radius: 10px; background-color: #F9FAFB; font-size: 14px; font-weight: 500; color: #334155;}

/* 학생 녹화수업 */
.student-record-page {gap: 28px;}
.student-record-page .student-page-title {margin-bottom: 0;}
.student-record-list {display: flex; flex-direction: column; gap: 18px;}
.student-record-item {justify-content: space-between; min-height: 88px; padding: 18px 18px; border-color: #E2EAF5; border-radius: 12px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);}
.student-record-info {flex: 1;}
.student-record-title {display: flex; align-items: center; gap: 10px; flex-wrap: wrap;}
.student-record-title strong {font-size: 16px; font-weight: 700; color: #1E293B;}
.student-record-info p {margin-top: 10px; font-size: 15px; font-weight: 400; color: #64748B;}

/* 학생 녹화수업 상세 */
.student-record-view-page {gap: 0;}
.record-view-layout {display: flex; gap: 30px; flex-wrap: wrap; align-items: flex-start;}
.record-player-card {width: calc(100% - 40% - 30px); padding: 0; overflow: hidden;}
.record-video-box {position: relative; overflow: hidden; background-color: #000;}
.record-video {display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover;}
.record-play-btn {transition: box-shadow 0.3s; position: absolute; left: 50%; top: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; padding-left: 4px; border: 2px solid #FFFFFF; border-radius: 50%; background-color: #FFFFFF4D; color: #fff; font-size: 26px; transform: translate(-50%, -50%); backdrop-filter: blur(5px);}
.record-video-box.playing .record-play-btn {opacity: 0; pointer-events: none;}
.record-player-info {padding: 18px 20px;}
.record-player-info strong {display: block; font-size: 17px; font-weight: 800; color: #1A2540;}
.record-player-info p {margin-top: 10px; font-size: 15px; color: #5B7298;}
.record-side {width: 40%; display: flex; flex-direction: column; gap: 28px;}
.record-back-btn {width: fit-content; height: 42px; padding: 0 18px;}
.record-side-list {display: flex; flex-direction: column; gap: 18px;}
.record-side-list .student-record-item {min-height: 88px;}

/* 학생 알림 */
.student-alarm-page {gap: 10px;}
.student-alarm-list .dashboard-card + .dashboard-card {margin-top: 15px;}
.student-alarm-item {position: relative; display: flex; align-items: flex-start; gap: 18px; padding: 16px 40px 16px 18px; text-decoration: none; color: inherit; border-color: #E7EDF7;}
.student-alarm-icon {display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background-color: #FFF1D2; flex-shrink: 0;}
.student-alarm-content {flex: 1;}
.student-alarm-title {display: flex; align-items: center; gap: 10px; flex-wrap: wrap;}
.student-alarm-title strong {font-size: 15px; font-weight: 500; color: #000000;}
.student-alarm-content p {margin-top: 6px; font-size: 15px; color: #6B7A99;}
.student-alarm-date {display: flex; align-items: center; column-gap: 4px; margin-top: 6px; font-size: 15px; font-weight: 400; color: #6B7A99;}
.student-alarm-arrow {position: absolute; top: 50%; right: 18px; transform: translateY(-50%);}


/* 학생 설정 */
.student-setting-page {gap: 18px;}

/* 학부모 결제 관리 */
.parent-payment-page {max-width: 580px; margin: 0 auto;}
.parent-payment-title {display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;}
.parent-payment-title .square-btn {height: 38px; font-size: 14px; font-weight: 700;}
.parent-payment-page .parent-payment-card {overflow: hidden; padding: 24px 20px; border-radius: 18px; background-color: #fff;}
.parent-payment-page .payment-mail-setting {display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px;}
.parent-payment-page .payment-mail-setting h3 {font-size: 16px; font-weight: 500; color: #000000;}
.parent-payment-page .payment-mail-setting p {margin-top: 6px; font-size: 13px; color: #000000;}
.parent-payment-page .payment-mail-setting a {display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 500; color: #185FA5;}
.parent-payment-page .payment-switch {position: relative; flex-shrink: 0; width: 38px; height: 22px; cursor: pointer;}
.parent-payment-page .payment-switch input {position: absolute; opacity: 0; pointer-events: none;}
.parent-payment-page .payment-switch span {display: block; width: 100%; height: 100%; border-radius: 999px; background-color: #CBD5E1;}
.parent-payment-page .payment-switch span::after {content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background-color: #fff; transition: left 0.2s;}
.parent-payment-page .payment-switch input:checked + span {background-color: #1B2A6B;}
.parent-payment-page .payment-switch input:checked + span::after {left: 19px;}
.parent-payment-page .payment-child-swiper-wrap {overflow: hidden; margin-bottom: 20px;}
.parent-payment-page .payment-child-swiper-wrap.single .swiper-wrapper {display: block;}
.parent-payment-page .payment-child-swiper-wrap.single .swiper-slide {width: 100% !important;}
.parent-payment-page .payment-child-swiper-wrap .swiper-button-prev,
.parent-payment-page .payment-child-swiper-wrap .swiper-button-next {display: none;}
.parent-payment-page .payment-child-card {padding: 20px; border: 1px solid #E5E5E5; border-radius: 10px; background-color: #fff;}
.parent-payment-page .payment-child-head {display: flex; align-items: center; gap: 30px; padding-bottom: 30px; border-bottom: 1px solid #E5E5E5;}
.parent-payment-page .child-avatar {flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background-color: #4A90E2; font-size: 22px; font-weight: 600; color: #fff;}
.parent-payment-page .payment-child-head>div:not(.child-avatar) {flex: 1;}
.parent-payment-page .child-name {display: flex; align-items: center; justify-content: space-between;}
.parent-payment-page .child-name strong {font-size: 20px; font-weight: 600; color: #1A2540;}
.parent-payment-page .payment-child-head p {margin-top: 8px; font-size: 15px; color: #484848;}
.parent-payment-page .payment-child-info {display: flex; flex-direction: column; gap: 20px; padding-block: 30px;}
.parent-payment-page .payment-child-info dl {display: flex; align-items: center; justify-content: space-between;}
.parent-payment-page .payment-child-info dt {font-size: 15px; font-weight: 500; color: #000000;}
.parent-payment-page .payment-child-info dl:first-child dd {font-size: 20px; font-weight: 600; color: #000;}
.parent-payment-page .payment-child-info dd {font-size: 16px; font-weight: 500; color: #7B7B7B;}
.parent-payment-page .payment-child-info dd.txt-red {color: #A32D2D;}
.parent-payment-page .payment-child-card .square-btn {width: 100%; height: 38px; font-weight: 500;}
.parent-payment-page .payment-child-card .payment-complete-btn {pointer-events: none; background-color: #DCFCE7; color: #166534;}
.parent-payment-page .parent-card-section {margin-top: 20px; padding: 20px; border: 1px solid #E5E5E5; border-radius: 10px;}
.parent-payment-page .parent-card-head {display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;}
.parent-payment-page .parent-card-head h3 {font-size: 16px; font-weight: 500; color: #000000;}
.parent-payment-page .parent-card-head .square-btn {height: 34px;}
.parent-payment-page .parent-card-box {padding: 20px; border-radius: 12px; background: linear-gradient(120deg, #182974 0%, #4457A8 100%);}
.parent-payment-page .parent-card-box p,
.parent-payment-page .parent-card-box strong {font-size: 14px; font-weight: 400; color: #fff;}
.parent-payment-page .parent-card-box strong {font-weight: 500;}
.parent-payment-page .card-security-text {margin-top: 14px; text-align: right; font-size: 14px; color: #434343;}
.parent-payment-page .parent-card-empty-box {display: flex; flex-direction: column; align-items: center; transition: box-shadow 0.3s; padding: 18px 20px; border-radius: 10px; background-color: #FAFBFC; border: 1px dashed #D1D5DB;}
.parent-payment-page .parent-card-empty-box .card-empty-icon {width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #E2EFFE; background-color: #EDF4FD;}
.parent-payment-page .parent-card-empty-box strong {font-size: 15px; font-weight: 600; color: #2D2D2D; margin-block: 10px;}
.parent-payment-page .parent-card-empty-box p {font-size: 14px; color: #57606D;}
.parent-payment-page .payment-guide-box {margin-top: 18px; padding: 18px 20px; border: 1px solid #BFDBFE; border-radius: 10px; background-color: #EFF6FF;}
.parent-payment-page .payment-guide-box h3 {margin-bottom: 8px; font-size: 16px; font-weight: 500; color: #185FA5;}
.parent-payment-page .payment-guide-box ul {display: flex; flex-direction: column; row-gap: 6px;}
.parent-payment-page .payment-guide-box li {font-size: 15px; color: #0C447C;}
.parent-payment-page .payment-guide-box li::before {content: '- ';}

/* 학부모 결제 내역 */
.parent-payment-history-page .parent-payment-history-card {padding: 0; overflow: hidden;}
.parent-payment-history-page .section-title {padding: 20px 22px; margin-bottom: 0; border-bottom: 1px solid #EDF0F5;}
.parent-payment-history-page .section-title h3 {font-size: 16px; font-weight: 600; color: #1A2540;}
.parent-payment-history-page .parent-payment-history-table th {background-color: #fff; border-bottom: 1px solid #F0F4FA;}
.parent-payment-history-page .parent-payment-history-table td {font-size: 16px; color: #333333;}
.parent-payment-history-page .parent-payment-history-more {display: flex; justify-content: center; padding: 24px;}
.parent-payment-history-page .parent-payment-history-more .square-btn {height: 34px; min-width: 70px;}

/* 학부모 설정 */
.parent-setting-page .setting-tab-list {overflow-x: auto; display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 4px; border: 1px solid #E5E7EB; border-radius: 12px; background-color: #fff; box-shadow: 0 1px 2px #0000000A;}
.parent-setting-page .setting-tab-list button {background-color: #fff; height: 34px; padding: 0 20px; border-radius: 9px; column-gap: 6px; font-size: 14px; font-weight: 500; color: #6B7280;}
.parent-setting-page .setting-tab-list button.on {background-color: #2563EB; color: #fff;}
.parent-setting-page .setting-tab-list button.on svg path {fill: #fff;}
.parent-setting-page .setting-tab-content {display: none;}
.parent-setting-page .setting-tab-content.on {display: flex; flex-direction: column; gap: 18px;}

.parent-setting-page .setting-relation-text {display: inline-flex; align-items: center; gap: 18px;}
.parent-setting-page .parent-child-account-section .setting-section-title {display: flex; align-items: center; justify-content: space-between;}
.parent-setting-page .parent-child-account-list {display: flex; flex-direction: column; gap: 16px; padding: 18px 22px;}
.parent-setting-page .parent-child-account-item {display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 84px; padding: 18px 20px; border: 1px solid #EDF2FA; border-radius: 12px; background-color: #fff;}
.parent-setting-page .parent-child-account-item .square-btn.red {border-color: #FCA5A5; background-color: #FFF7F7; color: #EF4444;}
.parent-setting-page .setting-relation-select {max-width: 100px;}
.parent-setting-page .setting-relation-select select {padding: 0; border: 0;}
/* 
.parent-setting-page .setting-account-section {padding: 0;}
.parent-setting-page .setting-account-section .setting-section-title {padding: 16px 22px; border-bottom: 1px solid #F0F4FA;}
.parent-setting-page .setting-account-section .setting-section-title h3 {font-size: 15px; font-weight: 600; color: #1A2540;} */

/* 자녀 계정 연결 요청 모달 */
.child-register-modal {padding: 0; max-width: 410px;}
.child-register-modal .child-register-head {padding: 14px 20px; border-bottom: 1px solid #DADADA; font-size: 16px; font-weight: 600; color: #222222;}
.child-register-modal .child-register-body {padding: 20px; display: flex; flex-direction: column; row-gap: 40px;}
.child-register-modal .child-register-body .desc {padding: 14px; border-radius: 10px; background-color: #EFF6FF; border: 1px solid #DAE6FF; font-size: 15px; color: #346EEC;}
.child-register-modal .child-register-body .btn-wrap {column-gap: 10px;}
.child-register-modal .child-register-body .btn-wrap .square-btn {flex: 1;}
.child-register-modal .child-register-body .btn-wrap .admin-modal-close {max-width: 100px;}

/* 학생 대시보드 - 로드맵 */
.student-roadmap-section {padding: 24px;}
.student-roadmap-section .roadmap-status-guide {display: flex; align-items: center; gap: 30px; margin-bottom: 20px;}
.student-roadmap-section .roadmap-status-guide span {display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: #64748B;}
.student-roadmap-section .roadmap-status-guide span::before {content: ''; width: 10px; height: 10px; border-radius: 50%;}
.student-roadmap-section .roadmap-status-guide .done::before {background-color: #22C55E;}
.student-roadmap-section .roadmap-status-guide .current::before {background-color: #FDB515;}
.student-roadmap-section .roadmap-status-guide .wait::before {background-color: #CBD5E1;}
/* .student-roadmap-section .roadmap-card {padding: 24px; border-radius: 18px;}
.student-roadmap-section .roadmap-card+.roadmap-card {margin-top: 18px;}
.student-roadmap-section .roadmap-card-head {margin-bottom: 24px;} */
.student-roadmap-section .roadmap-step-item {min-height: 104px;}
.student-roadmap-section .roadmap-guide-box {display: flex; align-items: flex-start; gap: 12px; margin-top: 20px; padding: 20px; border: 1px solid #E2E8F0; border-radius: 16px; background-color: #F8FAFC;}
.student-roadmap-section .roadmap-guide-box strong {font-size: 15px; font-weight: 600; color: #0B1F45;}
.student-roadmap-section .roadmap-guide-box p {margin-top: 3px; font-size: 14px; font-weight: 400; color: #64748B;}

/* 학부모 대시보드 - 교재 소개 */
.dashboard-book-section {padding: 24px;}
.dashboard-book-section .section-title {align-items: flex-start; flex-wrap: wrap; gap: 10px;}
.dashboard-book-section .monthly-book-card {border: 0; border-radius: 0;}
.dashboard-book-section .monthly-book-item {margin: 0; min-height: 170px;}
.dashboard-book-section .monthly-book-thumb {width: 160px;}
.dashboard-book-section .monthly-book-info > p {max-width: 680px;}
.dashboard-book-section .monthly-book-bottom {margin-top: auto; border-top: 0;}

@media (hover: hover) {
    .parent-payment-page .parent-card-empty-box:hover,
    .record-play-btn:hover {box-shadow: 0 0 0 5px #ADADAD4D;}
}
/* 반응형 */
@media screen and (max-width: 1600px) {
    .record-player-card {max-width: 900px;}
    .record-player-card,.record-side {width: 100%;}
}
@media screen and (max-width: 1280px) {
    .attendance-layout {grid-template-columns: 1fr;}
    .attendance-calendar-card {max-width: 560px;}
}

@media screen and (max-width: 1024px) {
    .user-summary-grid {gap: 14px;}
    .user-summary-grid .user-summary-card {width: calc(25% - 48px / 4);}
    .student-order-filter {align-items: flex-start; flex-direction: column;}
    .student-order-controls {width: 100%;}
    .student-order-controls .search-input {width: 100%; max-width: unset;}
    .student-order-card {overflow-x: auto;}
    .student-order-table-head,
    .student-order-item {min-width: 900px;}
}

@media screen and (max-width: 768px) {
    /* 반응형 시 테이블을 카드형식으로 변경 */
    .user-table-wrap {overflow-x: hidden;}
    .user-table {display: block; min-width: unset;}
    .user-table thead {display: none;}
    .user-table tbody {display: flex; flex-direction: column; row-gap: 20px;}
    .user-table tbody tr {display: flex; flex-direction: column; padding: 16px 20px; border-radius: 10px; background-color: #fff; border: 1px solid #E5E7EB;}
    .user-table td {border-bottom: 0; padding: 0;}
    .user-table td + td {padding-top: 10px; margin-top: 10px; border-top: 1px solid #EFEFEF;}
    .user-table td::before {content: attr(data-label); display: block; flex-shrink: 0; font-size: 15px; font-weight: 500; color: #9AAABF; text-align: left; margin-bottom: 6px;}

    .user-summary-grid {gap: 10px;}
    .user-summary-grid .user-summary-card {width: calc(50% - 5px);}
    .attendance-card-head {align-items: flex-start; flex-direction: column; gap: 16px;}
    .calendar-month-control {width: 100%; justify-content: space-between;}
    .attendance-legend {gap: 12px; flex-wrap: wrap;}
    .attendance-calendar {padding-inline: 16px;}
    /* .calendar-day-list button {min-height: 54px;} */
    .attendance-detail-card {padding: 20px;}
    .attendance-class-item {align-items: flex-start; flex-direction: column;}
    .class-status {padding-left: 20px; width: 100%; justify-content: space-between;}

    .student-current-course-item {flex-direction: column;}
    .past-course-info {grid-template-columns: 1fr;}
 
    .student-page-title.has-btn {flex-direction: column;}
    .student-order-tabs {width: 100%; overflow-x: auto;}
    .student-order-tabs button {flex-shrink: 0;}
    .student-order-card {background-color: transparent; border: 0; border-radius: 0;}
    .student-order-guide {align-items: flex-start; flex-direction: column; gap: 10px;}

    .student-task-page {gap: 20px;}
    .student-task-tabs {overflow-x: auto;}
    .student-task-tabs a {flex-shrink: 0;}
    .student-task-item {align-items: flex-start; flex-direction: column;}
    .student-task-action {width: 100%; justify-content: space-between;}

    .task-write-bottom {grid-template-columns: 1fr; gap: 10px;}

    .task-result-card {grid-template-columns: 1fr;}
    .task-score-box {min-height: 180px;}
    .submitted-file-box {align-items: flex-start; flex-direction: column; padding: 14px;}
    .submitted-file-box .square-btn {width: 100%;}

    .student-order-detail-modal .order-summary-info {padding: 0;}
    .student-order-detail-modal .order-summary-info dl {display: grid; grid-template-columns: 130px 1fr; padding: 10px 18px; width: 100%; border-right: 0; border-bottom: 1px solid #E4E8EF;}
    .student-order-detail-modal .order-summary-info dl:last-child {border-bottom: 0;}
    .student-order-detail-modal .order-summary-info dt {margin-bottom: 0;}
    .student-order-detail-modal .order-info-list dl {padding-inline: 18px;}

    .parent-payment-history-page .parent-payment-history-card {background-color: transparent; border: 0; border-radius: 0;}
    .parent-payment-history-page .section-title {border-bottom: 0;}

    .parent-setting-page .parent-child-account-section .setting-section-title {align-items: flex-start; flex-direction: column; gap: 12px;}
    .parent-setting-page .parent-child-account-item {align-items: flex-start; flex-direction: column;}
    .parent-setting-page .parent-child-account-item .square-btn {align-self: flex-end;}

    /* 학생 대시보드 - 로드맵 */
    .student-roadmap-section {padding: 20px;}
    .student-roadmap-section .roadmap-status-guide {flex-wrap: wrap; gap: 12px;}
    .student-roadmap-section .roadmap-guide-box {flex-direction: column;}

    /* 학부모 대시보드 - 교재 소개 */
    .dashboard-book-section {padding: 20px;}
    .dashboard-book-section .monthly-book-item {padding-bottom: 90px;}
    .dashboard-book-section .monthly-book-buy-btn {width: 100%; margin-left: 0;}
    .dashboard-book-section .monthly-book-bottom {margin-top: 12px; border-top: 1px solid #E8EAED;}
}

@media screen and (max-width: 600px) {
    /* 학부모 대시보드 - 교재 소개 */
    .dashboard-book-section .monthly-book-thumb {width: 140px;}
}

@media screen and (max-width: 480px) {
    .attendance-title h3 {font-size: 15px;}
    .attendance-title p {font-size: 13px;}

    .student-page-title h2 {font-size: 21px;}

    .student-order-controls {flex-direction: column;}
    .student-order-controls .custom-select,
    .student-order-controls .custom-select select {width: 100%;}

    .student-task-tabs a {height: 32px; padding: 0 14px; font-size: 13px;}
    .student-task-action {align-items: flex-start; flex-direction: column;}
    .student-task-action .square-btn {width: 100%;}

    .student-order-detail-modal .order-summary-info dl,
    .student-order-detail-modal .order-info-list dl {grid-template-columns: 90px 1fr; padding-inline: 14px;}

    /* 반응형 추가 260619 */
    .student-order-detail-modal .student-order-detail-section h4 {padding: 10px 18px;}
    .student-order-detail-modal .order-cancel-guide {padding: 18px;}
    .student-order-detail-modal .student-order-detail-section .square-btn {margin: 0 18px 18px;}
    .student-order-detail-modal .order-book-detail, .student-order-detail-modal .order-summary-info dl, .student-order-detail-modal .order-info-list dl {padding: 10px 18px;}
}
@media screen and (max-width: 375px) {
    .parent-payment-title ,
    .student-record-item {flex-direction: column; align-items: flex-start; row-gap: 10px;}
    .parent-payment-page .payment-child-card {padding: 10px;}
    .parent-payment-page .payment-child-head {flex-direction: column;}
    .parent-payment-page .payment-child-head>div:not(.child-avatar) {width: 100%;}
    .parent-payment-page .payment-child-head p {font-size: 12px;}
    .parent-payment-page .payment-child-info dl {flex-direction: column; row-gap: 4px; align-items: flex-start;}
    .parent-setting-page .parent-child-account-item {align-items: center;}
    .parent-setting-page .parent-child-account-item .square-btn {align-self: center;}

    /* 반응형 추가 260619 */
    .student-current-course-item .course-info li {flex-direction: column; align-items: flex-start;}
    .past-course-info dl {width: 100%;}
    .student-order-detail-modal .student-order-detail-section h4 {padding: 10px 14px;}
    .student-order-detail-modal .order-cancel-guide {padding: 14px;}
    .student-order-detail-modal .student-order-detail-section .square-btn {margin: 0 14px 14px;}
    .student-order-detail-modal .order-book-detail,
    .student-order-detail-modal .order-summary-info dl, .student-order-detail-modal .order-info-list dl {display: flex; flex-direction: column; row-gap: 10px; align-items: flex-start; padding: 10px 14px;}
    .parent-payment-page .payment-mail-setting,
    .parent-payment-page .parent-card-head {flex-direction: column; align-items: flex-start; row-gap: 12px;}
    .parent-payment-page .card-security-text {word-break: keep-all;}
    .parent-payment-page .payment-child-swiper-wrap {position: relative;}
    .parent-payment-page .payment-child-swiper-wrap .swiper-button-prev,
    .parent-payment-page .payment-child-swiper-wrap .swiper-button-next {display: block; width: 28px; height: 28px; color: #000;}
    .student-alarm-item {flex-direction: column;}

    .past-course-head {flex-direction: column; row-gap: 6px; align-items: flex-start;}
}