/* ============================================================
   PLISM Grove Design System 612 overlay
   왜: Resin 학생 화면의 기존 DOM과 동작은 그대로 두고 색, 표면, 포커스만
   PLISM Grove 기준으로 맞춥니다.
   ============================================================ */

:root {
	--green: #0E7A57;
	--green-deep: #0A5B41;
	--green-ink: #0B3D2E;
	--green-50: #E9F4EF;
	--green-100: #D3E9DF;
	--kopo: #1E3F8F;
	--kopo-deep: #16306E;
	--kopo-50: #EAEEF8;
	--kopo-100: #D5DDF1;
	--n0: #FCFDFC;
	--n50: #F5F7F6;
	--n100: #EBEFED;
	--n200: #DBE1DE;
	--n300: #BFC9C4;
	--n500: #80908A;
	--n600: #5F6F69;
	--n700: #44534D;
	--n800: #2C3833;
	--n900: #1B2521;
	--st-going: #0E7A57;
	--st-going-bg: #E9F4EF;
	--st-done: #2C6E7E;
	--st-done-bg: #E8F1F3;
	--st-wait: #8A9490;
	--st-wait-bg: #F0F2F1;
	--st-due: #B5832F;
	--st-due-bg: #F9F2E4;
	--st-risk: #BB4A5C;
	--st-risk-bg: #F9ECEE;
	--season: #5C9B6E;
	--season-soft: #A9CBB3;
	--season-tint: #EFF6F0;
	--season-deep: #3E7D5C;
	--role: var(--green);
	--role-deep: var(--green-deep);
	--role-50: var(--green-50);
	--r-s: 8px;
	--r-m: 12px;
	--r-l: 16px;
	--r-xl: 24px;
	--sh-1: 0 1px 2px rgba(27, 37, 33, .05), 0 2px 8px rgba(27, 37, 33, .06);
	--sh-2: 0 6px 16px rgba(27, 37, 33, .10), 0 16px 40px rgba(27, 37, 33, .12);
	--ease: cubic-bezier(.2, .7, .2, 1);
	--dur: 220ms;
	--layout-container: 1320px;
	--layout-margin: clamp(20px, 4vw, 40px);
	--gnb-h: 64px;
	--touch-min: 44px;
	--font: Pretendard, 'Noto Sans KR', sans-serif;
	--fs-title: clamp(20px, 1.6vw + 12px, 24px);
	--fs-section: 20px;
	--fs-body: 15px;
	--fs-sub: 13px;
	--fs-label: 14px;
}

:root[data-season="spring"] { --season: #C2738B; --season-soft: #E8B9C6; --season-tint: #FBF2F4; --season-deep: #9A4F66; }
:root[data-season="early"] { --season: #5C9B6E; --season-soft: #A9CBB3; --season-tint: #EFF6F0; --season-deep: #3E7D5C; }
:root[data-season="summer"] { --season: #2F7E63; --season-soft: #7DB39A; --season-tint: #EBF3EE; --season-deep: #1E5C47; }
:root[data-season="autumn"] { --season: #C77E3B; --season-soft: #E3B97F; --season-tint: #FAF2E6; --season-deep: #8A4F35; }
:root[data-season="late"] { --season: #9A7E5F; --season-soft: #C8B49B; --season-tint: #F7F3ED; --season-deep: #6E5740; }
:root[data-season="winter"] { --season: #7E96B5; --season-soft: #B7C7DA; --season-tint: #F0F4F8; --season-deep: #4E6B8A; }

*, *::before, *::after { box-sizing: border-box; }

body,
.new-main-fullscreen,
.new-classroom-page {
	font-family: var(--font) !important;
	font-size: var(--fs-body);
	color: var(--n800) !important;
	background:
		linear-gradient(180deg, var(--season-tint) 0, var(--n50) 220px),
		var(--n50) !important;
}

:focus-visible {
	outline: 2px solid var(--role) !important;
	outline-offset: 2px !important;
}

.nm-page-body,
#container.classroom { max-width: var(--layout-container) !important; }

/* 왜: 헤더는 학생 화면의 핵심 이동 영역이라 Evergreen 단색 기준으로 통일합니다. */
.nm-header {
	height: var(--gnb-h) !important;
	background: rgba(252, 253, 252, .96) !important;
	border-bottom: 1px solid var(--n100) !important;
	box-shadow: var(--sh-1) !important;
	backdrop-filter: blur(10px);
}

.nm-header__logo-text,
.nm-mobile-panel__logo,
.nm-login-modal__logo,
.nm-footer__title { color: var(--green-ink) !important; }

.nm-header__nav-item,
.nm-header__text-link,
.nm-header__dropdown-toggle,
.nm-header__dropdown-item,
.nm-mobile-panel__link,
.nm-mobile-panel__sub,
.nm-header__user,
.nm-header__user-menu-item { color: var(--n700) !important; }

.nm-header__nav-item:hover,
.nm-header__text-link:hover,
.nm-header__nav-item.active,
.nm-header__dropdown-toggle:hover,
.nm-header__dropdown-item:hover,
.nm-mobile-panel__link:hover,
.nm-mobile-panel__sub:hover,
.nm-header__user-menu-item:hover,
.nm-header__icon-btn:hover,
.nm-header__search button:hover,
.cr-htab:hover,
.cr-htab.active { color: var(--role) !important; }

.nm-header__nav-item:hover,
.nm-header__text-link:hover,
.nm-header__dropdown-toggle:hover,
.nm-header__dropdown-item:hover,
.nm-mobile-panel__link:hover,
.nm-mobile-panel__sub:hover,
.nm-header__icon-btn:hover,
.nm-header__user-menu-item:hover { background: var(--green-50) !important; }

.nm-header__dropdown-menu,
.nm-header__user-menu,
.nm-mobile-panel,
.sub_top_classroom,
.cr-htabs,
.nm-login-modal,
.nm-table,
.crai-modal,
.crai-social-section,
.crai-feed-item {
	background: var(--n0) !important;
	border-color: var(--n100) !important;
	box-shadow: var(--sh-1) !important;
}

.nm-header__user-avatar,
.nm-header__login-btn,
.nm-mobile-panel__login-btn,
.nm-login-modal__submit,
.nm-login-modal__sso-primary,
.nm-btn--secondary,
.cr-pager .page-item.active a,
.crai-chat-send,
.crai-fab,
.crai-modal__header {
	background: var(--role) !important;
	color: var(--n0) !important;
	border-color: var(--role) !important;
}

.nm-header__login-btn:hover,
.nm-mobile-panel__login-btn:hover,
.nm-login-modal__submit:hover,
.nm-login-modal__sso-primary:hover,
.nm-btn--secondary:hover,
.crai-chat-send:hover,
.crai-fab:hover {
	background: var(--role-deep) !important;
	box-shadow: var(--sh-2) !important;
}

.nm-btn,
.button,
button,
input[type="button"],
input[type="submit"] { border-radius: var(--r-m); }

.nm-btn,
.nm-login-modal__submit,
.nm-login-modal__sso-primary,
.nm-header__login-btn,
.nm-mobile-panel__login-btn {
	min-height: 40px;
	font-weight: 700;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease) !important;
}

.nm-login-modal__submit { min-height: 52px; }

.nm-header__search input,
.nm-login-modal__input,
.crai-chat-input,
input[type="text"],
input[type="password"],
input[type="search"],
select,
textarea {
	border-color: var(--n200) !important;
	color: var(--n800) !important;
	background: var(--n0) !important;
	border-radius: var(--r-m) !important;
}

.nm-header__search input:focus,
.nm-login-modal__input:focus,
.crai-chat-input:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
	border-color: var(--role) !important;
	box-shadow: 0 0 0 3px var(--role-50) !important;
	outline: none !important;
}

/* 왜: 상단 우측 보조 이동은 버튼 박스보다 텍스트 링크가 헤더 흐름을 덜 방해합니다. */
.nm-header__text-link {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 2px;
	color: var(--n700) !important;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none !important;
	white-space: nowrap;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	transition: color var(--dur) var(--ease) !important;
}

.nm-header__text-link:hover,
.nm-header__text-link:focus-visible {
	color: var(--role) !important;
	background: transparent !important;
	box-shadow: none !important;
}

/* 왜: 로그인 로직은 그대로 두고, 모달의 계절 장식은 배경 영역에만 제한합니다. */
.nm-modal-overlay { background: rgba(27, 37, 33, .46) !important; }

.nm-login-modal {
	border: 1px solid var(--n100) !important;
	border-radius: var(--r-xl) !important;
}

.nm-login-modal__header {
	background:
		linear-gradient(180deg, rgba(252, 253, 252, .18), rgba(252, 253, 252, 0)),
		var(--role) !important;
	color: var(--n0) !important;
}

.nm-login-modal__welcome { color: var(--green-50) !important; }

.nm-login-modal__divider,
.nm-login-modal__hint,
.nm-login-modal__sso-hint,
.crai-feed-meta,
.crai-feedback-meta { color: var(--n600) !important; }

.nm-login-modal__error,
.nm-header__user-menu-item--danger,
.crai-live-badge,
.nm-badge--warning {
	background: var(--st-risk-bg) !important;
	color: var(--st-risk) !important;
}

.nm-login-modal__passwd-notice,
.nm-login-modal__forgot-panel,
.nm-login-modal__signup-inner,
.nm-busan-help__tooltip,
.crai-pulse-bar {
	background: var(--green-50) !important;
	border-color: var(--green-100) !important;
	color: var(--green-ink) !important;
}

/* 왜: 카드와 표는 레거시 폭을 유지하되 Grove의 흰 표면, 얕은 그림자로 정리합니다. */
.sub_top_classroom { border-radius: var(--r-l) var(--r-l) 0 0 !important; }
.cr-htabs { border-radius: 0 0 var(--r-l) var(--r-l) !important; }
.cr-htab { color: var(--n600) !important; border-bottom-color: transparent !important; }
.cr-htab.active { border-bottom-color: var(--role) !important; font-weight: 800 !important; }
.top_title .em1 { color: var(--n600) !important; }

.top_title .em2,
.crai-feed-title,
.crai-feedback-text,
.crai-prog-val { color: var(--n900) !important; }

.top_state {
	background: var(--green-50) !important;
	color: var(--green-ink) !important;
	border: 1px solid var(--green-100);
	box-shadow: none !important;
}

.top_state li,
.top_state li b { color: var(--green-ink) !important; }

.top_state li + li::before { color: var(--green) !important; }

.nm-table th {
	background: var(--n50) !important;
	color: var(--n700) !important;
	border-bottom-color: var(--n100) !important;
}

.nm-table td {
	color: var(--n800) !important;
	border-bottom-color: var(--n100) !important;
}

.nm-table tr:hover td { background: var(--green-50) !important; }

.nm-badge,
.badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: 99px;
	font-weight: 700;
}

.nm-badge::before,
.badge::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.nm-badge--primary,
.badge-going,
.nm-badge--success {
	background: var(--st-going-bg) !important;
	color: var(--st-going) !important;
}

.badge-done { background: var(--st-done-bg) !important; color: var(--st-done) !important; }
.nm-badge--gray,
.badge-wait { background: var(--st-wait-bg) !important; color: var(--n600) !important; }
.badge-due { background: var(--st-due-bg) !important; color: var(--st-due) !important; }
.badge-risk { background: var(--st-risk-bg) !important; color: var(--st-risk) !important; }

/* 왜: 학생 화면의 AI 보조 패널도 보라 계열 대신 Evergreen 토널로 보이게 합니다. */
.crai-overlay { background: rgba(27, 37, 33, .46) !important; }
.crai-modal { background: var(--n0) !important; }
.crai-modal__header::before { background: none !important; }

.crai-ptab {
	background: var(--green-50) !important;
	color: var(--green-ink) !important;
	box-shadow: none !important;
}

.crai-ptab.active,
.crai-ptab:hover {
	background: var(--n0) !important;
	color: var(--role) !important;
	box-shadow: var(--sh-1) !important;
}

.crai-feed-type--notice,
.crai-feed-type--qna,
.crai-feed-type--al,
.crai-feedback-type-badge {
	background: var(--green-50) !important;
	color: var(--green-deep) !important;
}

.crai-feed-type--homework { background: var(--st-due-bg) !important; color: var(--st-due) !important; }
.crai-feed-type--exam { background: var(--st-done-bg) !important; color: var(--st-done) !important; }

.crai-chat-msg--ai .crai-chat-avatar,
.crai-chat-msg--user .crai-chat-bubble,
.crai-prog-bar--me { background: var(--role) !important; }

.crai-chat-msg--ai .crai-chat-bubble,
.crai-prog-bar-wrap {
	background: var(--green-50) !important;
	color: var(--green-ink) !important;
}

.crai-feedback-item {
	border-color: var(--n100) !important;
}

.crai-pulse-dot { background: var(--st-going) !important; }
.crai-live-dot { background: var(--st-risk) !important; }
.crai-spin { border-color: var(--green-100) !important; border-top-color: var(--role) !important; }

.nm-footer {
	background: var(--green-ink) !important;
	color: var(--green-100) !important;
}

.nm-footer a,
.nm-footer__desc-highlight { color: var(--n0) !important; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation: none !important;
		transition: none !important;
	}
}

@media (max-width: 768px) {
	.nm-btn,
	.nm-header__icon-btn,
	.nm-header__mobile-btn,
	.nm-login-modal__close,
	.nm-login-modal__forgot-link,
	.nm-login-modal__signup-toggle { min-height: var(--touch-min); }
}