* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; background: #667eea; min-height: 100vh; padding: 20px; }
.container { max-width: 1200px; margin: 0 auto; background: white; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.header { background: #667eea; color: white; padding: 30px; text-align: center; }
.header h1 { font-size: 2.5em; margin-bottom: 10px; }
.version-badge { background: rgba(255,255,255,0.2); padding: 5px 15px; border-radius: 20px; display: inline-block; margin-top: 10px; }
.main-content { padding: 30px; }
h2 { font-size: 1.5em; color: #333; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid #667eea; }
textarea { width: 100%; padding: 12px; border: 2px solid #ddd; border-radius: 8px; font-family: 'Pretendard', sans-serif; font-size: 18px; min-height: 90px; height: auto; resize: vertical; }
textarea:focus { outline: none; border-color: #667eea; }
.btn { width: 100%; padding: 15px; background: #667eea; color: white; border: none; border-radius: 8px; font-size: 1.2em; font-weight: 600; cursor: pointer; margin-top: 20px; }
.btn:hover { background: #5567d8; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.loading, .error, .result-section { display: none; }
.active { display: block !important; }
.tabs { display: flex; gap: 10px; margin-bottom: 20px; border-bottom: 2px solid #667eea; }
.tab { padding: 10px 20px; cursor: pointer; background: #f5f5f5; border: none; font-size: 1.1em; }
.tab.active { background: #667eea; color: white; }
.tab-content { display: none; }
.tab-content.active { display: block; }
.result-box { background: #f9f9f9; border: 2px solid #667eea; border-radius: 10px; padding: 15px; font-size: 18px; line-height: 1.8; min-height: 150px; height: auto; max-height: none; overflow-y: visible; }
.result-box br { display: block; margin: 10px 0; content: ""; }
.rule-explanation-box { background: #f0f4f8; border: 2px solid #667eea; border-radius: 10px; padding: 20px; margin-top: 20px; display: none; }
.rule-columns { display: flex; gap: 20px; }
.rule-column { flex: 1; background: white; border-radius: 8px; padding: 15px; min-height: 150px; }
.rule-column-title { font-size: 16px; font-weight: bold; margin-bottom: 15px; padding: 8px; border-radius: 5px; text-align: center; }
.rule-column-title.slash { background: #ffebee; color: #c62828; }
.rule-column-title.hash { background: #e3f2fd; color: #1565c0; }
.rule-list { font-size: 14px; line-height: 1.8; }
.rule-item { margin-bottom: 8px; padding: 5px 8px; background: #f8f9fa; border-left: 3px solid #ddd; border-radius: 3px; }
.rule-item.slash-rule { border-left-color: #e74c3c; }
.rule-item.hash-rule { border-left-color: #3498db; }
.slash { color: #e74c3c; font-weight: bold; font-size: 1.3em; }
.hash { color: #3498db; font-weight: bold; font-size: 1.3em; }
.debug-item { margin: 2px 0; padding: 4px 8px; background: white; border-radius: 3px; display: flex; gap: 10px; align-items: center; font-size: 0.85em; line-height: 1.3; }
.loading { text-align: center; color: #667eea; font-size: 1.1em; padding: 20px; }
.error { background: #f44336; color: white; padding: 15px; border-radius: 8px; margin: 20px 0; }

/* 학생 모드 추가 스타일 */
.student-mode-container { 
	display: none; 
	/*background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);*/
	/*min-height: 100vh;*/
}
.student-mode-container.active { 
	display: block !important; 
}

/* 특허 배지 */
.patent-badge {
	position: absolute;
	top: 20px;
	left: 20px;
	background: linear-gradient(135deg, #ff6b6b, #ee5a6f);
	color: white;
	padding: 8px 16px;
	border-radius: 25px;
	font-weight: bold;
	font-size: 13px;
	box-shadow: 0 4px 15px rgba(238, 90, 111, 0.4);
	z-index: 100;
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.05); }
}

/* 학생 모드 컨테이너 */
.student-container {
	max-width: 900px;
	margin: 20px auto;
	background: white;
	border-radius: 15px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

/* 학생 모드 헤더 */
.student-header {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	padding: 20px 30px;
	text-align: center;
	border-radius: 15px 15px 0 0;
}

.student-header h1 {
	font-size: 24px;
	margin-bottom: 15px;
}

/* 진행바 */
.student-progress-bar {
	display: flex;
	gap: 8px;
	padding: 10px;
	background: rgba(255,255,255,0.15);
	border-radius: 10px;
	justify-content: center;
}

.progress-item {
	width: 40px;
	height: 32px;
	background: rgba(255,255,255,0.25);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: rgba(255,255,255,0.7);
	font-weight: 600;
	transition: all 0.3s ease;
}

.progress-item.completed {
	background: #4CAF50;
	color: white;
}

.progress-item.current {
	background: white;
	color: #667eea;
	transform: scale(1.15);
	font-weight: 700;
}

/* 학생 메인 콘텐츠 */
.student-main {
	padding: 25px 30px 50px;
}

/* 학습 박스 */
.study-box {
	background: #f8f9fa;
	padding: 20px 35px;
	border-radius: 10px 10px 0 0;
	border: 2px solid #dee2e6;
	border-bottom: none;
	min-height: 100px;
}

/* 정답 박스 */
.answer-display-box {
	background: #e8f5e9;
	padding: 20px;
	border-radius: 0 0 10px 10px;
	border: 2px solid #4CAF50;
	display: none;
}

.answer-display-box.show {
	display: block;
	animation: slideDown 0.3s ease;
}

@keyframes slideDown {
	from { opacity: 0; transform: translateY(-10px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

/* 모바일 반응형 스타일 */
@media screen and (max-width: 768px) {
	body {
		padding: 0;
		background: #f5f5f5;
	}

	/* 관리자 모드 */
	.container {
		border-radius: 0;
		box-shadow: none;
	}
	.header {
		padding: 15px 12px;
	}
	.header h1 {
		font-size: 1.5em;
	}
	.main-content {
		padding: 12px;
	}
	h2 {
		font-size: 1.1em;
	}
	textarea {
		font-size: 16px;
		min-height: 80px;
	}
	.btn {
		padding: 12px;
		font-size: 1em;
	}
	.tabs {
		flex-wrap: wrap;
	}
	.tab {
		flex: 1;
		min-width: 80px;
		padding: 8px 10px;
		font-size: 0.9em;
	}
	.result-box {
		font-size: 15px;
		padding: 10px;
	}
	.rule-columns {
		flex-direction: column;
		gap: 10px;
	}
	.rule-column {
		min-height: auto;
		padding: 10px;
	}
	.debug-item {
		font-size: 0.75em;
	}

	/* ===== 학생/온라인 모드 모바일 ===== */
	.student-mode-container {
		background: #f5f5f5 !important;
	}
	.student-container {
		margin: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		max-width: 100% !important;
	}
	.student-header {
		padding: 12px 15px !important;
		border-radius: 0 !important;
	}
	.student-header h1 {
		font-size: 17px !important;
		margin-bottom: 10px !important;
	}

	/* 진행바 모바일 */
	.student-progress-bar {
		gap: 5px;
		padding: 8px;
		flex-wrap: wrap;
	}
	.progress-item {
		width: 28px;
		height: 26px;
		font-size: 11px;
		border-radius: 6px;
	}

	/* 메인 콘텐츠 */
	.student-main {
		padding: 12px 12px 70px !important;
	}

	/* 문제 헤더 영역 */
	.student-main > div:first-child {
		padding-bottom: 8px !important;
	}
	/* 강좌/레슨 뱃지 숨기기 (모바일에서 공간 절약) */
	.student-main span[style*="background: linear-gradient"][style*="border-radius: 12px"] {
		font-size: 11px !important;
		padding: 3px 8px !important;
	}

	/* 학습 박스 */
	.study-box {
		padding: 12px 15px !important;
		min-height: 70px;
	}
	.student-word {
		font-size: 16px !important;
		padding: 3px 1px !important;
	}
	.student-gap {
		width: 14px !important;
		height: 28px !important;
	}
	.student-gap.marked {
		width: 18px !important;
	}
	.student-gap.marked::after {
		font-size: 18px !important;
	}

	/* 정답/결과 박스 */
	.answer-display-box {
		padding: 10px !important;
	}

	/* ===== JS 인라인 스타일 오버라이드 ===== */

	/* 시작화면 타이틀 */
	#studentStartScreen h1 {
		font-size: 24px !important;
		line-height: 1.3 !important;
	}
	#studentStartScreen p {
		font-size: 15px !important;
	}
	/* 시작화면 패딩 */
	#studentStartScreen > div {
		padding: 20px 15px !important;
	}
	/* 학습 시작 버튼 */
	#studentStartScreen div[onclick] {
		padding: 20px 15px !important;
	}
	#studentStartScreen div[onclick] > div:first-child {
		font-size: 18px !important;
	}
	/* 주의사항 박스 */
	#studentStartScreen div[style*="background: #fff3cd"] {
		padding: 15px !important;
	}
	#studentStartScreen div[style*="background: #fff3cd"] h3 {
		font-size: 15px !important;
	}
	#studentStartScreen div[style*="background: #fff3cd"] div {
		font-size: 13px !important;
	}

	/* 문제 헤더 - 타이머/뱃지 영역 */
	#studentLearningScreen div[style*="justify-content: space-between"] {
		flex-direction: column !important;
		gap: 8px !important;
		align-items: flex-start !important;
	}
	#studentLearningScreen div[style*="gap: 15px"] {
		gap: 8px !important;
	}
	#studentLearningScreen div[style*="gap: 10px"]:has(span[style*="border-radius: 12px"]) {
		gap: 6px !important;
	}
	/* 끊어읽기 안내 텍스트 */
	#studentLearningScreen span[style*="font-size: 16px"] {
		font-size: 14px !important;
	}

	/* ===== 결과 화면 인라인 오버라이드 ===== */

	/* 나의 끊어읽기 / 영비 추천 박스 */
	#studentAnswerContent > div > div[style*="padding: 12px"] {
		padding: 10px !important;
	}
	/* 끊어읽기 결과 텍스트 */
	#studentAnswerContent div[style*="font-size: 17px"] {
		font-size: 15px !important;
		line-height: 24px !important;
	}
	/* 번역 텍스트 */
	#studentAnswerContent div[style*="font-size: 16px"] {
		font-size: 14px !important;
		line-height: 22px !important;
	}
	#studentAnswerContent .student-translation-text,
	#studentAnswerContent .translation-text {
		font-size: 14px !important;
		line-height: 22px !important;
	}

	/* 점수/통계 영역 */
	#studentAnswerContent div[style*="justify-content: space-between"] {
		flex-direction: column !important;
		gap: 8px !important;
	}
	#studentAnswerContent div[style*="gap: 15px"] {
		gap: 8px !important;
		flex-wrap: wrap !important;
	}
	/* 정확도 퍼센트 */
	#studentAnswerContent div[style*="font-size: 32px"] {
		font-size: 26px !important;
	}
	#studentAnswerContent span[style*="font-size: 17px"] {
		font-size: 15px !important;
	}
	/* 부호안내 텍스트 */
	#studentAnswerContent div[style*="margin-top: -15px"] {
		margin-top: 0px !important;
		font-size: 12px !important;
	}

	/* 오답 설명 영역 */
	#studentAnswerContent div[style*="display: flex"][style*="gap: 20px"] {
		flex-direction: column !important;
		gap: 10px !important;
	}
	#studentAnswerContent div[style*="background: #ffebee"],
	#studentAnswerContent div[style*="background: #e3f2fd"] {
		padding: 10px !important;
	}
	#studentAnswerContent div[style*="font-size: 14px"][style*="font-weight: bold"] {
		font-size: 13px !important;
	}
	#studentAnswerContent div[style*="font-size: 13px"] {
		font-size: 12px !important;
	}

	/* 오류신고 버튼 */
	#studentAnswerContent button[onclick*="report_mistake"] {
		width: 100% !important;
		font-size: 12px !important;
	}

	/* 버튼 그룹 - 제출/다음 */
	#studentLearningScreen > div > div > div:last-child[style*="display: flex"][style*="gap: 10px"] {
		flex-direction: row !important;
		flex-wrap: wrap !important;
	}
	#studentLearningScreen button[id] {
		flex: 1 !important;
		min-width: 120px !important;
		padding: 12px 15px !important;
		font-size: 15px !important;
	}

	/* ===== 최종 결과 화면 ===== */
	/* 큰 점수 표시 */
	div[style*="font-size: 60px"] {
		font-size: 40px !important;
	}
	div[style*="font-size: 48px"] {
		font-size: 32px !important;
	}
	div[style*="font-size: 36px"] {
		font-size: 24px !important;
	}
	/* 결과 컨테이너 패딩 */
	div[style*="padding: 20px 25px"] {
		padding: 12px !important;
	}
	div[style*="padding: 25px"] {
		padding: 12px !important;
	}
	/* 아코디언 문제 목록 */
	div[style*="padding: 18px 25px"] {
		padding: 12px 15px !important;
	}
	div[style*="padding: 15px 25px"] {
		padding: 10px 12px !important;
	}
	/* 아코디언 내 텍스트 */
	span[style*="font-size: 15px"][style*="word-break: keep-all"] {
		font-size: 13px !important;
	}
	span[style*="min-width: 80px"] {
		min-width: 60px !important;
		font-size: 13px !important;
	}
	/* 점수 원형 뱃지 */
	span[style*="min-width: 35px"][style*="width: 35px"] {
		min-width: 28px !important;
		width: 28px !important;
		height: 28px !important;
		line-height: 28px !important;
		font-size: 12px !important;
		margin-right: 8px !important;
	}
	span[style*="min-width: 55px"] {
		min-width: 45px !important;
		font-size: 15px !important;
	}

	/* 특허 배지 모바일 */
	.patent-badge {
		font-size: 11px !important;
		padding: 5px 10px !important;
		top: 10px !important;
		left: 10px !important;
	}
	#patentBadge {
		font-size: 10px !important;
		padding: 4px 10px !important;
		left: 15px !important;
		top: 15px !important;
	}

	/* 온라인 모드 입력 화면 */
	#onlineSentenceInput {
		font-size: 16px !important;
		min-height: 60px !important;
	}
	/* 이용안내 박스 */
	div[style*="background: #fff3cd"][style*="border-left: 4px"] {
		padding: 12px !important;
		font-size: 13px !important;
	}
	div[style*="background: #fff3cd"] h3 {
		font-size: 15px !important;
	}
}

/* 소형 모바일 (400px 이하) */
@media screen and (max-width: 400px) {
	.header h1 {
		font-size: 1.3em;
	}
	.student-header h1 {
		font-size: 15px !important;
	}
	.progress-item {
		width: 24px;
		height: 24px;
		font-size: 10px;
	}
	.student-word {
		font-size: 15px !important;
	}
	.student-main {
		padding: 10px 10px 70px !important;
	}
	.study-box {
		padding: 10px 12px !important;
	}
	textarea {
		font-size: 14px;
	}
	.btn {
		font-size: 0.9em;
		padding: 10px;
	}
	#studentStartScreen h1 {
		font-size: 20px !important;
	}
	#studentAnswerContent div[style*="font-size: 17px"] {
		font-size: 14px !important;
	}
	#studentAnswerContent div[style*="font-size: 32px"] {
		font-size: 22px !important;
	}
}

/* 인쇄 스타일 */
@media print {
	body {
		background: white !important;
		padding: 0 !important;
	}
	.student-mode-container {
		background: white !important;
		min-height: auto !important;
	}
	.mode-toggle-btn {
		display: none !important;
	}
	.patent-badge {
		display: none !important;
	}
	button {
		display: none !important;
	}
	.student-container {
		box-shadow: none !important;
		margin: 0 !important;
	}
	/* 배경 그라데이션 제거 */
	div[style*="background: linear-gradient"] {
		background: white !important;
		color: black !important;
	}
	/* 색상 박스를 흰색으로 */
	div[style*="background: #"] {
		background: white !important;
		border: 1px solid #ddd !important;
	}
}
.admin-container { transition: all 0.3s; }
.admin-container.hidden { display: none; }
/* 모드 전환 버튼 스타일 제거됨 */
.student-sentence { background: #f8f9fa; padding: 20px; border-radius: 10px; margin: 20px 0; font-size: 20px; line-height: 2; }
.student-word { display: inline-block; padding: 4px 2px; }
.student-gap { display: inline-block; width: 20px; margin: 0 -3px; cursor: pointer; position: relative; vertical-align: middle; }
.student-gap.marked::after { content: '/'; color: #e74c3c; font-size: 20px; font-weight: bold; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.student-result { background: #e8f5e9; padding: 20px; border-radius: 10px; margin: 20px 0; display: none; }
.student-result.show { display: block; }
.score-display { font-size: 24px; font-weight: bold; color: #4CAF50; text-align: center; margin: 20px 0; }