#overview-quiz-main #design .design-emphasis {
  border-color: var(--accent) !important; /* 보라???�두�?*/
  box-shadow: 0 0 0 2px rgba(83, 52, 131, 0.35);
}

/* 과학 모형 빈칸 주변 텍스트 보라색 스타일 */
.science-model-purple-text {
  color: var(--accent) !important; /* 보라색 텍스트 */
}
:root {
  --bg-dark: #0A122A; /* 짙은 네이비 - 메인 배경색 */
  --bg-light: #16213e;
  --primary: #DC143C; /* 레드 - 버튼 및 강조 요소 (Crimson Red) */
  --secondary: #000000; /* 검은색 - 외곽선 */
  --accent: #DC143C; /* 레드 - 포인트 컬러 */
  --text-light: #FFFFFF; /* 흰색 - 텍스트 (가독성 향상) */
  --text-dark: #E0E0E0; /* 밝은 회색 - 비활성 상태 */
  --correct: #2ECC71; /* 에메랄드 그린 - 정답 (개선안 3) */
  --incorrect: #DC143C; /* 빨간색 - 오답 */
  --retrying: #FF9800; /* 주황색 - 재시도 (개선안 3) */
  --revealed: #00BCD4; /* 시안색 - 정답 보기 (개선안 3) */
  --subject-high-accuracy: #DC143C; /* 레드 - 과목 정답률 10% 이상 */

  /* Typography */
  --font-base: 'Noto Sans KR', sans-serif;
  --font-display: 'Galmuri9', 'Galmuri11', 'Press Start 2P', cursive;
  --font-mono: 'Galmuri9', monospace;

  /* Spacing scale */
  --space-xs: 0.4rem; /* 4px */
  --space-sm: 0.8rem; /* 8px */
  --space-md: 1.6rem; /* 16px */
  --space-lg: 2.4rem; /* 24px */
  --space-xl: 3.2rem; /* 32px */

  font-size: 10px; /* Base font size for rem units */
}

/* Start modal: ensure first row lists four primary topics in order */
#start-modal .topic-selector {
  display: grid;
  gap: 1rem;
}
@media (min-width: 900px) {
  #start-modal .topic-selector {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-base);
  background-color: var(--bg-dark);
  color: var(--text-light);
  line-height: 1.7;
  overflow-x: hidden;
  font-weight: 400;
  /* 실크스크린 인쇄물 같은 미세한 질감 효과 */
  background-image: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.03) 2px,
      rgba(0, 0, 0, 0.03) 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.03) 2px,
      rgba(0, 0, 0, 0.03) 4px
    );
}

/* Global UX enhancements */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 12rem; /* keep focused content clear of fixed header */
  -webkit-text-size-adjust: 100%;
}

/* Accessible skip link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--primary);
  color: var(--text-light);
  padding: 0.8rem 1.2rem;
  z-index: 1000;
  transition: top 0.2s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 0;
  outline: 3px solid var(--revealed);
  outline-offset: 2px;
}

/* Focus visible rings for keyboard users */
.btn:focus-visible,
.tab:focus-visible,
input:focus-visible,
.slot-machine .reel:focus-visible,
.competency-tab:focus-visible {
  outline: 3px solid var(--revealed);
  outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto;
  }
}

/* Visually hidden utility for screen reader only text */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#combo-counter {
  font-family: var(--font-display);
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--bg-light);
  border-bottom: 4px solid var(--primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-lg);
  z-index: 100;
  flex-wrap: wrap;
}

.hud-left,
.hud-center,
.hud-right {
  flex: 1;
  display: flex;
  align-items: center;
}

.hud-left {
  justify-content: flex-start;
}

.hud-center {
  justify-content: center;
  gap: 2rem;
}

.hud-right {
  justify-content: flex-end;
  gap: 1.5rem;
}

/* Top-right header buttons use display font */
.hud-right .btn {
  font-family: var(--font-display);
}

header h1 {
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--primary);
  text-shadow: 3px 3px 0px var(--secondary);
}

.kitsch-box {
  background: var(--secondary);
  padding: var(--space-sm) var(--space-md);
  border: 3px solid var(--primary);
  box-shadow: 4px 4px 0px var(--bg-dark);
  border-radius: var(--space-sm);
}

#time {
  font-family: var(--font-mono);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text-light);
}

#bar {
  width: 16rem;
  height: 1rem;
  background: var(--bg-dark);
  border: 2px solid var(--primary);
  overflow: hidden;
  margin-top: 0.5rem;
  border-radius: 4px;
}

#bar > div {
  height: 100%;
  width: 100%;
  background: var(--primary) !important;
  background-image: none !important;
  transition: width 1s linear;
  border-radius: 2px;
}

.slot-machine {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.slot-machine .reel {
  width: 3rem;
  height: 3rem;
  background: var(--secondary);
  border: 3px solid var(--primary);
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  font-family: 'Press Start 2P', cursive;
  transition: transform 0.3s, opacity 0.3s;
}

.slot-machine .reel.revealed {
  animation: reel-pop 0.3s ease-out;
}

@keyframes reel-pop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.slot-machine.hidden {
  display: none;
}

/* Flash reels when the slot machine hits a win */
.slot-machine.win {
  animation: slot-win-rotate 1s ease-out;
}

.slot-machine.win .reel {
  animation: reel-win-flash 0.4s ease-out 0s 2;
}

@keyframes slot-win-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes reel-win-flash {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 var(--accent);
  }
  50% {
    transform: scale(1.3);
    box-shadow: 0 0 15px var(--accent);
  }
}
.slot-machine.win-lights {
  box-shadow: 0 0 10px var(--accent);
  animation: win-lights-glow 0.4s ease-in-out 0s 2;
}

.slot-machine.win.win-lights {
  animation: slot-win-rotate 1s ease-out, win-lights-glow 0.4s ease-in-out 0s 2;
}

@keyframes win-lights-glow {
  0% {
    box-shadow: 0 0 5px var(--accent);
  }
  50% {
    box-shadow: 0 0 20px var(--accent);
  }
  100% {
    box-shadow: 0 0 5px var(--accent);
  }
}

.btn {
  cursor: pointer;
  font-family: var(--font-base);
  font-weight: 700;
  color: var(--text-light);
  background: var(--primary); /* 레드 배경 */
  border: 3px solid #000000; /* 검은색 외곽선 - 버섯 캐릭터와 동일 두께 */
  padding: var(--space-sm) var(--space-md);
  box-shadow: none; /* 평면 디자인 - 그림자 제거 */
  transition: transform 0.1s;
  font-size: 1.4rem;
  white-space: nowrap;
  border-radius: 0; /* 완전한 평면 형태 */
}
.btn:hover {
  transform: none; /* 평면 디자인 - 호버 시 변환 없음 */
  box-shadow: none;
}
.btn:active {
  transform: translateY(2px); /* 클릭 시 아래로만 이동 */
  box-shadow: none;
}
.btn.hidden {
  display: none;
}
.btn:disabled {
  background: rgba(0, 0, 0, 0.3);
  color: var(--text-dark); /* 크림색 - 비활성 상태 */
  cursor: not-allowed;
  border-color: #000000; /* 검은색 외곽선 유지 */
  box-shadow: none;
  transform: none;
}

#combo-counter {
  color: var(--incorrect); /* 레드 */
  font-size: 2.2rem; /* Match H1 size */
  font-weight: 800;
  text-shadow: none; /* 평면 디자인 - 텍스트 그림자 제거 */
}
.combo-pop {
  animation: combo-pop-animation 0.3s ease-out;
}
@keyframes combo-pop-animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1);
  }
}
.hidden {
  display: none;
}

main,
.container {
  padding: 12rem var(--space-md) var(--space-lg);
  max-width: 1024px;
  margin: 0 auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-md);
}

.icon {
  width: 2.4rem;
  height: 2.4rem;
  fill: currentColor;
}

.tabs {
  display: flex;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.tab {
  flex: 1;
  text-align: center;
  padding: 1.2rem 0;
  background: rgba(10, 18, 42, 0.5); /* 네이비 배경 */
  border: 3px solid #000000; /* 검은색 외곽선 */
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-dark); /* 크림색 텍스트 */
  transition: all 0.2s;
  border-radius: 0; /* 평면 형태 */
  box-shadow: none; /* 그림자 제거 */
}
.tab.active {
  background: var(--primary); /* 레드 배경 */
  color: var(--text-light); /* 크림색 텍스트 */
  transform: none; /* 평면 디자인 */
  box-shadow: none;
  border: 4px solid #000000; /* 두꺼운 검은색 테두리 */
}
/* Blur titles for disabled sections in Practical model */
/* Generic blur for disabled tabs across all model subjects */
.tabs .tab.practical-disabled {
  filter: blur(8px);
  opacity: 0.2;
  pointer-events: none;
}

/* Generic blur for disabled sections across all model subjects */
section.practical-section-disabled {
  filter: blur(8px);
}

.accordion {
  display: flex;
  flex-direction: column;
}

section {
  display: none;
}
section.active {
  display: block;
}

h2 {
  text-align: center;
  color: var(--text-light); /* 크림색 텍스트 */
  margin: 2rem 0 3rem 0;
  font-size: 2.4rem;
  font-weight: 900;
  background: var(--primary); /* 레드 배경 */
  padding: 1.5rem;
  border: 3px solid #000000; /* 검은색 외곽선 */
  border-radius: 0; /* 평면 형태 */
  box-shadow: none; /* 그림자 제거 */
}

.grade-container {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.grade-container > div {
  flex: 1;
  min-width: 280px;
  background: rgba(10, 18, 42, 0.7); /* 네이비 배경 */
  border: 3px solid #000000; /* 검은색 외곽선 */
  padding: 2rem;
  border-radius: 0; /* 평면 형태 */
  box-shadow: none; /* 그림자 제거 */
}
.grade-title {
  background: var(--primary); /* 레드 배경 */
  padding: 1rem;
  font-size: 1.8rem;
  font-weight: 900;
  text-align: center;
  color: var(--text-light); /* 크림색 텍스트 */
  margin: -2rem -2rem 2rem -2rem;
  border-bottom: 3px solid #000000; /* 검은색 외곽선 */
  border-radius: 0; /* 평면 형태 */
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 1.5rem;
  table-layout: fixed; /* prevent wide content from expanding container */
}
th,
td {
  padding: 0;
  text-align: left;
  vertical-align: top;
  border-bottom: none;
  font-size: 1.6rem;
  font-weight: 700;
}
th {
  padding-right: 1.5rem;
  color: var(--text-dark);
  min-width: 7rem; /* Ensure header text is fully visible */
  width: 11rem; /* Reduce header column width so inputs can expand */
  white-space: nowrap;
}

td {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* Consistent spacing between inputs */
  word-break: break-word; /* ensure long text wraps within cell */
}

.two-col-answers,
td.two-col-answers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

td.one-col-answers {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

td.one-col-answers input {
  width: 100%;
  box-sizing: border-box;
}

/* Force one-column layout for model topic sections */
#ethics-quiz-main td.two-col-answers,
#practical-quiz-main td.two-col-answers {
  display: flex;
  flex-direction: column;
}

@media (max-width: 480px) {
  .two-col-answers,
  td.two-col-answers {
    grid-template-columns: 1fr;
  }
}

td input {
  width: 100%;
  padding: 1.2rem;
  font-size: 1.4rem;
  border: 3px solid #000000; /* 검은색 외곽선 - 모던 레트로 스타일 */
  background: var(--bg-dark);
  color: var(--text-light);
  font-family: 'Noto Sans KR', sans-serif;
  caret-color: var(--primary);
  margin-bottom: 0; /* Removed margin as gap is used now */
  transition: all 0.2s ease;
  border-radius: 0; /* 평면 형태 */
}
td input.fit-answer {
  width: auto;
  display: inline-block;
  min-width: 14ch;
}

/* 홈 프로젝트 파트 빈칸 너비 강제 고정 - 최고 우선순위 */
.home-project-part input,
.home-project-part input.correct,
.home-project-part input.incorrect,
.home-project-part input.retrying,
.home-project-part input.revealed,
.home-project-part input.fit-answer,
.home-project-part input[style] {
  width: 100% !important;
  display: block !important;
}
td input:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--secondary);
  box-shadow: 0 0 10px rgba(233, 69, 96, 0.5);
}
td input.correct {
  border-color: var(--correct);
  color: var(--correct);
  background: transparent;
}
td input.incorrect {
  border-color: var(--incorrect);
  color: var(--incorrect);
  background: transparent;
}
td input.retrying {
  border-color: var(--retrying);
  color: var(--retrying);
  background: transparent;
}
td input.revealed {
  color: var(--revealed);
  border-color: var(--revealed);
  background: rgba(142, 68, 173, 0.1);
  box-shadow: 0 0 0 2px rgba(142, 68, 173, 0.2);
}

td input.shake {
  animation: dori-dori 0.3s;
}

@keyframes dori-dori {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}

/* Correct answer subtle pulse (distinct from wrong shake) - COMPLETELY DISABLED */
td input.correct.correct-pulse {
  /* animation: correct-pulse 420ms ease-out; */
  animation: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* DISABLED KEYFRAMES */
/*
@keyframes correct-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(57, 255, 20, 0);
  }
  40% {
    transform: scale(1.02);
    box-shadow: 0 0 12px rgba(57, 255, 20, 0.45);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(57, 255, 20, 0);
  }
}
*/

th.sub-area-cell {
  min-width: 22rem;
}

/* Make sub-area inputs styled consistently regardless of container */
input.sub-area-input {
  width: 100%;
  padding: 1.2rem;
  font-size: 1.4rem;
  border: 3px solid var(--accent);
  background: var(--primary);
  color: var(--text-light);
  border-radius: 4px;
  font-weight: 600;
  transition: all 0.3s ease;
}

/* Universal sub-area input state styles - CRITICAL OVERRIDE */
.sub-area-input.correct,
input.sub-area-input.correct,
th.sub-area-cell .sub-area-input.correct {
  border: 3px solid #39ff14 !important;
  color: #39ff14 !important;
  background: transparent !important;
  font-weight: 700 !important;
  box-shadow: 0 0 8px rgba(57, 255, 20, 0.5) !important;
}

.sub-area-input.incorrect,
input.sub-area-input.incorrect,
th.sub-area-cell .sub-area-input.incorrect {
  border: 3px solid #ff5733 !important;
  color: #ff5733 !important;
  background: transparent !important;
  font-weight: 700 !important;
  box-shadow: 0 0 8px rgba(255, 87, 51, 0.5) !important;
}

.sub-area-input.retrying,
input.sub-area-input.retrying,
th.sub-area-cell .sub-area-input.retrying {
  border: 3px solid #ffc300 !important;
  color: #ffc300 !important;
  background: transparent !important;
  font-weight: 700 !important;
  box-shadow: 0 0 8px rgba(255, 195, 0, 0.5) !important;
}

.sub-area-input.revealed,
input.sub-area-input.revealed,
th.sub-area-cell .sub-area-input.revealed {
  border: 3px solid #00ffff !important;
  color: #00ffff !important;
  background: rgba(142, 68, 173, 0.1) !important;
  font-weight: 700 !important;
  box-shadow: 0 0 0 2px rgba(142, 68, 173, 0.2) !important;
}

/* Fix overlap and unify UI in PE > ?�체?�동 ?�시 and Physical Activity */
#pe-quiz-main #activity-examples table,
#physical-activity-quiz-main table {
  table-layout: fixed; /* keep wide second column for inputs */
}
#pe-quiz-main #activity-examples th.sub-area-cell,
#physical-activity-quiz-main th.sub-area-cell {
  width: 20rem; /* narrower than before to free space for right column */
}
#pe-quiz-main #activity-examples th.sub-area-cell,
#pe-quiz-main #activity-examples td,
#physical-activity-quiz-main th.sub-area-cell,
#physical-activity-quiz-main td {
  vertical-align: top;
}
#pe-quiz-main #activity-examples td,
#physical-activity-quiz-main td {
  display: flex; /* ensure column layout fills full width */
  flex-direction: column;
}
#pe-quiz-main #activity-examples .activity-group,
#physical-activity-quiz-main .activity-group {
  width: 100%; /* groups span entire td width */
}
#pe-quiz-main #activity-examples .activity-group,
#physical-activity-quiz-main .activity-group {
  display: flex;
  flex-direction: column; /* place activity first, examples below */
}
#pe-quiz-main #activity-examples .activity-group > .activity-input,
#physical-activity-quiz-main .activity-group > .activity-input {
  display: block;
  width: 100%;
  margin-bottom: 0.8rem; /* separate from examples */
  border: 3px solid #8A2BE2 !important;
}
#pe-quiz-main #activity-examples .activity-group > .example-input,
#physical-activity-quiz-main .activity-group > .example-input {
  width: auto;
}
#pe-quiz-main #activity-examples th.sub-area-cell .sub-area-input,
#physical-activity-quiz-main th.sub-area-cell .sub-area-input {
  display: block;
  width: 100%;
  transition: all 0.2s ease; /* match other inputs */
}
/* Physical activity sections use consistent base styling */
/* Ensure state colors are clearly visible for sub-area inputs - High specificity */
#pe-quiz-main #activity-examples th.sub-area-cell input.sub-area-input.correct,
#physical-activity-quiz-main th.sub-area-cell input.sub-area-input.correct {
  border-color: var(--correct) !important;
  color: var(--correct) !important;
  background: rgba(57, 255, 20, 0.2) !important;
  box-shadow: 0 0 8px rgba(57, 255, 20, 0.3) !important;
}
#pe-quiz-main #activity-examples th.sub-area-cell input.sub-area-input.incorrect,
#physical-activity-quiz-main th.sub-area-cell input.sub-area-input.incorrect {
  border-color: var(--incorrect) !important;
  color: var(--incorrect) !important;
  background: rgba(255, 87, 51, 0.2) !important;
  box-shadow: 0 0 8px rgba(255, 87, 51, 0.3) !important;
}
#pe-quiz-main #activity-examples th.sub-area-cell input.sub-area-input.retrying,
#physical-activity-quiz-main th.sub-area-cell input.sub-area-input.retrying {
  border-color: var(--retrying) !important;
  color: var(--retrying) !important;
  background: rgba(255, 195, 0, 0.2) !important;
  box-shadow: 0 0 8px rgba(255, 195, 0, 0.3) !important;
}
#pe-quiz-main #activity-examples th.sub-area-cell input.sub-area-input.revealed,
#physical-activity-quiz-main th.sub-area-cell input.sub-area-input.revealed {
  border-color: var(--revealed) !important;
  color: var(--revealed) !important;
  background: rgba(142, 68, 173, 0.2) !important;
  box-shadow: 0 0 8px rgba(142, 68, 173, 0.3) !important;
}

/* 체육 과목 activity-input 보라색 테두리 */
.activity-input-purple {
  border: 3px solid #8A2BE2 !important;
}

td input.activity-input {
  border: 3px solid #8A2BE2;
  background: var(--primary);
  font-weight: 800;
  color: var(--text-light);
}

td input.activity-input.correct {
  border-color: var(--correct);
  color: var(--correct);
}

td input.activity-input.incorrect {
  border-color: var(--incorrect);
  color: var(--incorrect);
}

td input.activity-input.retrying {
  border-color: var(--retrying);
  color: var(--retrying);
}

td input.activity-input.revealed {
  border-color: var(--revealed);
  color: var(--revealed);
  background: rgba(142, 68, 173, 0.1);
  box-shadow: 0 0 0 2px rgba(142, 68, 173, 0.2);
}

td input.example-input {
  border: 2px dashed var(--text-dark);
  background: var(--bg-light);
  margin-left: 0;
  border-left: none;
}

td input.example-input.correct {
  border-color: var(--correct);
  color: var(--correct);
  border-style: solid;
}

td input.example-input.incorrect {
  border-color: var(--incorrect);
  color: var(--incorrect);
  border-style: solid;
}

td input.example-input.retrying {
  border-color: var(--retrying);
  color: var(--retrying);
  border-style: solid;
}

td input.example-input.revealed {
  border-color: var(--revealed);
  color: var(--revealed);
  background: rgba(142, 68, 173, 0.1);
  border-style: solid;
  box-shadow: 0 0 0 2px rgba(142, 68, 173, 0.2);
}

td input.sub-step {
  margin-left: 1rem;
  width: calc(100% - 1rem);
  border: 2px dashed var(--primary);
  background: var(--bg-light);
}

/* Ensure dashed sub-step inputs in PSR (개인?�⋅?�회??책임�?지??모형) section */
#psr-pe td input.sub-step,
#psr-pe td input[placeholder="?�계 ?�명"] {
  border-style: dashed;
  border-color: var(--primary);
  background: var(--bg-light);
}

td input.activity-input:not(:first-child) {
  margin-top: 1.5rem;
}
.activity-group {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1.2rem;
  border: 2px dashed var(--secondary);
  border-radius: 8px;
  margin-bottom: 1rem; /* prevent overlap with next group */
}

.activity-group .activity-input {
  width: 100%;
  margin-bottom: 0.5rem;
  border: 3px solid #8A2BE2 !important;
}

.activity-group .example-input {
  width: auto;
  min-width: 12ch;
  max-width: 20ch;
  text-align: center;
  padding: 1.2rem;
  margin: 0.2rem 0.3rem;
  display: inline-block;
}

.activity-group + .activity-group {
  margin-top: 1.5rem;
}

/* Additional improvements for physical activity sections */
#physical-activity-quiz-main .activity-group .example-input {
  margin: 0.3rem 0.4rem;
  min-width: 10ch;
  max-width: 18ch;
  font-size: 1.1rem;
  display: inline-block;
  vertical-align: top;
}

#physical-activity-quiz-main .activity-group {
  margin-bottom: 1.5rem;
  padding: 1.4rem;
}

/* 예시 입력 필드들을 위한 컨테이너 */
.activity-group .examples-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
  align-items: flex-start;
}

#physical-activity-quiz-main td {
  padding: 1rem;
}

/* 기타 주제 신체활동 예시 개선된 레이아웃 */
.activity-group .activity-input + .example-input {
  margin-top: 0.8rem;
}

.activity-group .example-input:first-of-type {
  margin-left: 0;
}

/* 예시 입력 필드들 간의 일관된 간격 */
.activity-group .example-input + .example-input {
  margin-left: 0.5rem;
}

/* 더 나은 시각적 구분을 위한 스타일 */
.activity-group {
  background: rgba(255, 255, 255, 0.02);
  border: 2px dashed rgba(255, 255, 255, 0.3);
}

.activity-group:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.5);
  transition: all 0.2s ease;
}

/* 신체활동 예시 빈칸 보라색 테두리 - 최우선 적용 */
#physical-activity-quiz-main input.activity-input,
.activity-group input.activity-input,
input.activity-input {
  border: 3px solid #8A2BE2 !important;
}

.grade-container table tr:not(:last-child) > * {
  border-bottom: 3px dotted var(--secondary);
  padding-bottom: 1.5rem;
}

/* 통합 섹션의 박스에 빨간색 테두리 적용 */
#integrated .grade-container > div {
  border: 3px solid var(--primary);
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 200;
  opacity: 0;
  transition: opacity 0.3s ease;
  overflow-y: auto; /* allow vertical scrolling when content exceeds viewport */
  overscroll-behavior: contain; /* prevent background scroll chaining on mobile */
}
.modal-overlay.active {
  display: flex;
  opacity: 1;
}
.modal-content {
  background: var(--bg-light);
  padding: 1.5rem var(--space-xl);
  text-align: center;
  border: 4px solid var(--primary);
  box-shadow: 10px 10px 0px var(--secondary);
  transform: scale(0.9);
  transition: transform 0.3s ease;
  width: 90%;
  max-width: 600px;
  border-radius: var(--space-md);
  max-height: 90vh; /* keep inside viewport on mobile */
  overflow-y: auto; /* enable internal scroll if needed */
  
  /* 커스텀 스크롤바 스타일 */
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: var(--accent) rgba(255, 255, 255, 0.1); /* Firefox */
}

/* Webkit 기반 브라우저 (Chrome, Safari, Edge) 스크롤바 커스터마이징 */
.modal-content::-webkit-scrollbar {
  width: 12px;
}

.modal-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  border: 2px solid var(--bg-light);
}

.modal-content::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 6px;
  border: 2px solid var(--bg-light);
  transition: background 0.2s ease;
}

.modal-content::-webkit-scrollbar-thumb:hover {
  background: var(--secondary);
}

.modal-content::-webkit-scrollbar-thumb:active {
  background: var(--primary);
}

.modal-overlay.active .modal-content {
  transform: scale(1);
}
.modal-content h2 {
  color: var(--primary);
  font-size: 3rem;
  margin-bottom: 1.2rem;
  margin-top: 0;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-display);
}
.modal-content p {
  font-family: var(--font-base);
  color: var(--text-light);
  font-size: 1.8rem;
  margin-bottom: 2rem;
}

#guide-modal .modal-content {
  text-align: left;
  padding: 3rem 3.5rem;
}
#guide-modal h3 {
  text-align: center;
  font-family: var(--font-display);
  color: var(--correct);
  margin-bottom: 3rem;
  font-size: 2.4rem;
}
.guide-steps {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.guide-step {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px dotted var(--secondary);
}
.guide-steps .guide-step:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.guide-label {
  font-family: var(--font-display);
  color: var(--primary);
  font-size: 1.4rem;
  flex-shrink: 0;
  padding-top: 2px;
}
.guide-text {
  font-size: 1.6rem;
  line-height: 1.7;
}
.guide-text strong {
  color: var(--revealed);
  font-weight: 700;
}
#guide-modal .tip {
  font-size: 1.4rem;
  text-align: center;
  color: var(--text-dark);
  margin-top: 3rem;
  background: var(--secondary);
  padding: 1rem;
  border-radius: 8px;
}
#close-guide-btn {
  display: block;
  margin: 2.5rem auto 0;
  font-family: var(--font-display);
}
#result-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.8rem;
  margin-bottom: 2rem;
  flex: 1;
  justify-content: center;
}
#result-details {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}
#result-info p {
  font-size: 1.6rem;
  margin: 0;
  background: var(--secondary);
  padding: 0.5rem 1rem;
  border: 2px solid var(--primary);
  box-shadow: 2px 2px 0 var(--bg-dark);
  border-radius: 6px;
  flex-shrink: 0;
  white-space: nowrap;
}
#result-info .label {
  font-weight: bold;
  margin-right: 0.5rem;
}
.progress-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  width: 100%;
  max-width: 400px;
}
.progress-bar {
  flex: 1;
  height: 20px;
  background: var(--bg-dark);
  border: 2px solid var(--primary);
  box-shadow: 2px 2px 0 var(--secondary);
  border-radius: 10px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--primary);
  transition: width 0.3s ease;
}
#result-percentage {
  font-size: 1.6rem;
  min-width: 3rem;
  text-align: right;
  font-family: var(--font-display);
}

/* Result modal: force all content to use display font (Galmuri9) */
#progress-modal .modal-content,
#progress-modal .modal-content * {
  font-family: var(--font-display) !important;
}

.result-buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.result-buttons .btn {
  width: 12rem;
  font-family: var(--font-display);
}

/* 난이도와 제한 시간 2열 배치 */
.mode-time-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.8rem;
  margin: 0;
}

.mode-section,
.time-section,
.sound-section {
  background: rgba(255, 255, 255, 0.03);
  border: 2px solid var(--accent);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  box-shadow: 2px 2px 0px var(--secondary);
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 100%;
  overflow: hidden;
  height: 98px;
  min-height: 98px;
  max-height: 98px;
}

.mode-section h2,
.time-section h2,
.sound-section h2 {
  font-size: 1.4rem;
  margin: 0 0 0.3rem 0;
  text-align: center;
  color: var(--accent);
  font-family: var(--font-display);
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
}

.mode-section .mode-selector {
  display: flex;
  flex-direction: row;
  gap: 0.6rem;
  margin: 0.3rem 0 0 0; /* 위로 올리기 - margin-top 증가 */
  justify-content: center;
}

.time-section {
  /* flex 컨테이너로서 자식 요소 중앙 정렬을 위해 */
  justify-content: center;
}

.time-section #time-setter-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

.time-section #time-setter-wrapper h2 {
  margin-bottom: 0.3rem;
}

.time-section #time-setter-wrapper .time-setter {
  margin-top: 0.1rem;
}

.time-section #time-setter-wrapper.hidden {
  display: none;
}


.mode-time-grid .time-setter {
  margin: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.6rem !important;
  flex-wrap: nowrap !important;
}

/* 반응형: 작은 화면에서는 세로 배치 */
@media (max-width: 768px) {
  .mode-time-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .mode-section .mode-selector {
    flex-direction: row;
    gap: 0.8rem;
  }
  
  .mode-btn-group .mode-btn {
    min-width: 60px;
    max-width: 80px;
    font-size: 1rem;
    padding: 0.4rem 0.6rem;
  }
  
  .mode-btn-group::before {
    border-radius: 4px;
  }
  
  .mode-section,
  .time-section,
  .sound-section {
    padding: 0.4rem 0.6rem;
    height: auto;
    min-height: 60px;
    max-height: none;
  }
  
  .mode-time-grid .time-control-btn {
    font-size: 1.4rem;
    padding: 0.4rem 0.6rem;
  }
  
  .mode-time-grid #time-setting-display {
    font-size: 1.6rem;
  }
}

.time-setter,
.mode-selector,
.topic-selector {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin: 0 0 2.5rem 0;
  flex-wrap: wrap;
}

.subject-break {
  flex-basis: 100%;
  height: 0;
}

/* Group two subject buttons as a minimal segmented control */
.subject-btn-group {
  display: inline-flex;
  gap: 0;
  border: 2px solid var(--primary);
  border-radius: 8px;
  overflow: hidden;
}
.subject-btn-group .subject-btn {
  border-radius: 0;
  margin: 0;
}
.subject-btn-group .subject-btn + .subject-btn {
  border-left: 2px solid var(--primary);
}

/* 모드 버튼 세그먼트 스타일 - 평면 디자인 */
.mode-btn-group {
  display: inline-flex;
  gap: 0;
  border: 3px solid #000000; /* 검은색 외곽선 */
  border-radius: 0; /* 평면 형태 */
  overflow: visible;
  box-shadow: none; /* 평면 디자인 */
  background: rgba(10, 18, 42, 0.5); /* 네이비 배경 */
  position: relative;
}

/* 슬라이딩 배경 제거 */
.mode-btn-group::before {
  display: none;
}

/* Hard 모드 선택 시 - 사용 안 함 */
.mode-btn-group[data-selected="hard-core"]::before {
  display: none;
}

.mode-btn-group .mode-btn {
  border-radius: 0; /* 평면 형태 */
  margin: 0;
  border: none !important;
  box-shadow: none;
  background: transparent;
  color: var(--text-dark); /* 비활성 상태 */
  min-width: 70px;
  max-width: 90px;
  padding: 0.5rem 0.8rem;
  font-size: 1.2rem;
  transition: all 0.2s ease;
  position: relative;
  z-index: 1;
}

.mode-btn-group .mode-btn:hover {
  transform: none;
  box-shadow: none;
  background: transparent;
  color: var(--text-light);
}

.mode-btn-group .mode-btn:active {
  transform: translateY(2px); /* 클릭 시 아래로만 이동 */
  box-shadow: none;
}

.mode-btn-group .mode-btn + .mode-btn {
  border-left: 3px solid #000000 !important; /* 버튼 사이 구분선 */
}

.mode-btn-group .mode-btn.selected {
  color: var(--text-light) !important; /* 흰색 텍스트 */
  font-weight: 900;
  background: var(--primary) !important; /* 레드 배경 */
  transform: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Group curriculum buttons (총론, 창체) with visual grouping */
.curriculum-group {
  display: inline-flex;
  gap: 0;
  border: 3px solid var(--primary);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  position: relative;
}
.curriculum-group .subject-btn {
  border-radius: 0;
  margin: 0;
  border: none !important;
  box-shadow: none !important;
  position: relative;
}
.curriculum-group .subject-btn:hover {
  transform: none !important;
  box-shadow: none !important;
}
.curriculum-group .subject-btn + .subject-btn {
  border-left: 2px solid var(--primary) !important;
}
.curriculum-group .subject-btn:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.curriculum-group .subject-btn:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

/* Arrange topic buttons in two rows with up to four per row */
.topic-selector {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.topic-btn {
  width: 100%;
}
#time-setting-display {
  font-family: var(--font-mono);
  font-size: 3rem;
  color: var(--text-light);
  width: 8ch;
  text-align: center;
  flex-shrink: 0;
}

.mode-time-grid #time-setting-display {
  font-size: 1.8rem;
  width: 5ch;
}
.time-control-btn {
  font-size: 1.6rem;
  padding: 0.5rem 0.8rem;
  min-width: 40px;
  flex-shrink: 0;
  border-color: var(--accent) !important;
}

.mode-time-grid .time-control-btn {
  font-size: 1.6rem;
  padding: 0.5rem 0.8rem;
  min-width: 35px;
}
.subject-btn,
.mode-btn,
.topic-btn,
#random-subject-btn {
  font-size: 1.6rem;
}
.subject-btn,
.mode-btn,
.topic-btn,
#random-subject-btn,
#start-game-btn,
.time-control-btn {
  font-family: var(--font-display);
}
.subject-btn.selected,
.mode-btn.selected,
.topic-btn.selected {
  /* 점 패턴 제거 - 단순한 레드 배경 */
  background: var(--primary) !important; /* 레드 배경 */
  color: var(--text-light) !important; /* 흰색 텍스트 */
  font-weight: 900;
  transform: none;
  box-shadow: none; /* 평면 디자인 */
  border: 4px solid #000000 !important; /* 두꺼운 검은색 테두리 */
  border-radius: 0; /* 평면 형태 */
}

/* 비선택된 버튼 스타일 강화 - 평면 디자인 */
.subject-btn:not(.selected),
.topic-btn:not(.selected) {
  background: rgba(10, 18, 42, 0.5) !important; /* 네이비 배경 */
  border: 3px solid #000000 !important; /* 검은색 외곽선 */
  color: var(--text-dark) !important; /* 크림색 텍스트 (비활성) */
  border-radius: 0; /* 평면 형태 */
  box-shadow: none; /* 그림자 제거 */
}

.subject-btn:not(.selected):hover,
.topic-btn:not(.selected):hover {
  background: rgba(10, 18, 42, 0.7) !important;
  border: 3px solid #000000 !important;
  color: var(--text-light) !important; /* 호버 시 밝은 크림색 */
  transform: none; /* 평면 디자인 */
  box-shadow: none;
}

/* 하위 메뉴 버튼 비선택 상태 스타일 - .btn 기본 스타일 덮어쓰기 */
[id$="-submenu"] .btn.topic-sub-btn:not(.selected),
[id$="-submenu"] button.btn.topic-sub-btn:not(.selected),
[id$="-submenu"] .topic-sub-btn:not(.selected),
[id$="-submenu"] button.topic-sub-btn:not(.selected),
.btn.topic-sub-btn:not(.selected),
button.btn.topic-sub-btn:not(.selected),
.topic-sub-btn:not(.selected),
button.topic-sub-btn:not(.selected) {
  font-size: 1.2rem !important;
  padding: 0.5rem 0.6rem !important;
  transition: all 0.2s ease !important;
  background: rgba(10, 18, 42, 0.5) !important; /* 네이비 배경 */
  border: 3px solid #000000 !important; /* 검은색 외곽선 */
  border-color: #000000 !important;
  color: var(--text-dark) !important; /* 크림색 텍스트 (비활성) */
  box-shadow: none !important; /* 평면 디자인 */
  font-weight: normal !important;
  white-space: nowrap !important;
  border-radius: 0 !important; /* 평면 형태 */
  cursor: pointer !important;
}

[id$="-submenu"] .btn.topic-sub-btn:not(.selected):hover,
[id$="-submenu"] button.btn.topic-sub-btn:not(.selected):hover,
[id$="-submenu"] .topic-sub-btn:not(.selected):hover,
[id$="-submenu"] button.topic-sub-btn:not(.selected):hover,
.btn.topic-sub-btn:not(.selected):hover,
button.btn.topic-sub-btn:not(.selected):hover,
.topic-sub-btn:not(.selected):hover,
button.topic-sub-btn:not(.selected):hover {
  background: rgba(10, 18, 42, 0.7) !important;
  border: 3px solid #000000 !important;
  color: var(--text-light) !important; /* 호버 시 밝은 크림색 */
  transform: none !important; /* 평면 디자인 */
  box-shadow: none !important;
}

[id$="-submenu"] .btn.topic-sub-btn:not(.selected):active,
[id$="-submenu"] button.btn.topic-sub-btn:not(.selected):active,
[id$="-submenu"] .topic-sub-btn:not(.selected):active,
[id$="-submenu"] button.topic-sub-btn:not(.selected):active,
.btn.topic-sub-btn:not(.selected):active,
button.btn.topic-sub-btn:not(.selected):active,
.topic-sub-btn:not(.selected):active,
button.topic-sub-btn:not(.selected):active {
  transform: translateY(2px) !important; /* 클릭 시 아래로만 이동 */
  box-shadow: none !important;
}

.subject-btn.is-selecting {
  background: var(--primary); /* 레드 배경 */
  transform: none; /* 평면 디자인 */
  box-shadow: none;
  transition: all 0.1s ease-in-out;
  border: 4px solid #000000; /* 두꺼운 검은색 테두리 */
}

.subject-btn:active {
  transform: translateY(2px); /* 클릭 시 아래로만 이동 */
  box-shadow: none; /* 평면 디자인 */
}

.subject-btn.high-accuracy {
  border-color: #000000 !important; /* 검은색 외곽선 */
  border-width: 4px !important; /* 두꺼운 테두리 */
  color: var(--text-light);
  position: relative;
  box-shadow: none; /* 평면 디자인 */
}

.subject-btn.high-accuracy:hover {
  border-color: #000000 !important;
  transform: none; /* 평면 디자인 */
  box-shadow: none;
}

.subject-btn.high-accuracy:active {
  border-color: #000000 !important;
  transform: translateY(2px); /* 클릭 시 아래로만 이동 */
  box-shadow: none;
}
#random-subject-btn {
  background-color: #524360; /* 채도가 ??? 보라??*/
}


#start-game-btn {
  background: var(--primary); /* 레드 배경 - 단순한 평면 */
  color: var(--text-light); /* 크림색 텍스트 */
  padding: 1.5rem 3.5rem;
  margin-top: 1rem;
  margin-bottom: 0;
  font-size: 2.6rem;
  font-weight: 900;
  text-shadow: none; /* 평면 디자인 - 텍스트 그림자 제거 */
  border: 5px solid #000000; /* 굵은 검은색 테두리 - 버섯 캐릭터 몸통처럼 */
  width: 100%;
  justify-self: center;
  box-shadow: none; /* 평면 디자인 - 그림자 제거 */
  position: relative;
  overflow: visible;
  animation: none; /* 애니메이션 제거 */
  z-index: 10;
  border-radius: 0; /* 완전한 직사각형 */
  transition: transform 0.1s ease; /* 클릭 피드백만 */
}

#start-game-btn::before {
  display: none; /* ::before 제거 */
}

#start-game-btn:hover {
  transform: none; /* 호버 시 변화 없음 */
  box-shadow: none;
  animation: none;
}

#start-game-btn:active {
  transform: translateY(3px); /* 클릭 시 아래로만 이동 */
  box-shadow: none;
}

/* pulse-start-btn 애니메이션 제거 */
@keyframes gradient-shift {
  /* 제거됨 */
}

@keyframes shine {
  /* 제거됨 */
    left: 100%;
    top: 100%;
  }
}

#hard-core-description {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  flex: 1;
  min-height: 0; /* 부모 높이에 맞춤 */
  height: 100%; /* 부모의 전체 높이 사용 */
}

#hard-core-description.hidden {
  display: none;
}

#hard-core-description h2 {
  font-size: 2rem;
  margin: 0 0 1rem 0;
  text-align: center;
  color: var(--accent);
  font-family: var(--font-display);
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.3);
}

#hard-core-description p {
  margin: 0;
  padding: 0;
  font-size: 1.5rem;
  font-family: var(--font-display);
  color: var(--text-light);
  text-align: center;
  line-height: 1.8;
  /* flex 컨테이너의 중앙 정렬을 위해 */
  align-self: center;
}

/* Activity Heatmap - 모던 레트로 스타일 */
#activity-heatmap {
  /* Minimal, GitHub-like grid */
  --heatmap-cell-size: 18px;
  --heatmap-gap: 8px;
  --heatmap-neutral: rgba(10, 18, 42, 0.6); /* 네이비 중립 배경 */
  --heatmap-l1: #FFB6C1; /* 매우 연한 핑크 - 레벨 1 (명확한 구분) */
  --heatmap-l2: #FF7F7F; /* 연한 레드 - 레벨 2 */
  --heatmap-l3: #FF4444; /* 중간 레드 - 레벨 3 */
  --heatmap-l4: #B71C1C; /* 매우 진한 레드 - 레벨 4 (포인트 컬러, 레벨 3과 명확한 위계) */

  display: grid;
  grid-template-columns: repeat(7, var(--heatmap-cell-size));
  grid-auto-rows: var(--heatmap-cell-size);
  gap: var(--heatmap-gap);
  justify-content: center;
  margin: 1rem auto 0;
}
.heatmap-cell {
  width: var(--heatmap-cell-size);
  height: var(--heatmap-cell-size);
  background: var(--heatmap-neutral);
  border-radius: 0; /* 평면 형태 */
  border: 1px solid #000000; /* 검은색 외곽선 */
  transition: transform 0.06s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  box-shadow: none; /* 평면 디자인 */
}
.heatmap-cell:hover {
  transform: scale(1.05); /* 약한 확대만 */
  box-shadow: 0 0 0 1px #000000; /* 검은색 외곽선 강조 */
  border: 1px solid #000000;
}
.heatmap-cell:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.heatmap-cell.level-1 { 
  background: var(--heatmap-l1); 
  border: 1px solid #000000;
}
.heatmap-cell.level-2 { 
  background: var(--heatmap-l2); 
  border: 1px solid #000000;
}
.heatmap-cell.level-3 { 
  background: var(--heatmap-l3); 
  border: 1px solid #000000;
}
.heatmap-cell.level-4 { 
  background: var(--heatmap-l4); 
  border: 2px solid #000000; /* 최고 레벨은 두꺼운 테두리 */
}
.heatmap-cell.empty {
  background: rgba(10, 18, 42, 0.3); /* 네이비 - 투명도 높임 */
  border-color: rgba(0, 0, 0, 0.3); /* 연한 검은색 테두리 */
}

/* Heatmap panel placement next to settings */
#start-modal .modal-boxes {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  flex-wrap: wrap;
}
#settings-panel {
  position: relative;
  width: 600px;
  max-width: 600px;
  flex-shrink: 0;
  overflow-y: visible;
  padding: 2rem 1.5rem !important;
  min-height: auto !important;
  height: auto !important;
  max-height: none !important;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

#settings-panel h2 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--primary);
  text-align: left;
  padding: 0.8rem 1rem;
  padding-bottom: 0.8rem;
  background: rgba(233, 69, 96, 0.15);
  border-bottom: 3px solid rgba(233, 69, 96, 0.5);
  border-radius: 6px 6px 0 0;
  font-family: var(--font-display);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#settings-panel h2:first-of-type {
  margin-top: 0;
}
#heatmap-panel {
  max-width: 260px;
  text-align: center;
  flex-shrink: 0;
}
#heatmap-group {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  max-width: 260px;
}

/* Responsive: stack panels and allow full width on small screens */
@media (max-width: 900px) {
  #settings-panel {
    width: 100%;
    max-width: none;
  }
  #heatmap-group,
  #heatmap-panel,
  #dday-panel {
    max-width: none;
    width: 100%;
  }
  #heatmap-panel,
  #dday-panel {
    box-sizing: border-box;
  }
  #activity-heatmap {
    --heatmap-cell-size: 16px;
    --heatmap-gap: 6px;
  }
}

@media (max-width: 600px) {
  #activity-heatmap {
    --heatmap-cell-size: 14px;
    --heatmap-gap: 5px;
  }
  #dday {
    font-size: 2rem;
  }
}

@media (max-width: 420px) {
  #activity-heatmap {
    --heatmap-cell-size: 12px;
    --heatmap-gap: 4px;
  }
  #dday {
    font-size: 1.8rem;
  }
}

/* If screen space is insufficient, hide heatmap and D-Day to prioritize buttons */
@media (max-width: 900px), (max-height: 750px) {
  #heatmap-group {
    display: none !important;
  }
}
#dday-panel {
  max-width: 260px;
  text-align: center;
  flex-shrink: 0;
}
#heatmap-panel {
  position: relative;
}

#heatmap-panel h2 {
  margin-bottom: 1rem;
  font-size: 2.2rem;
  font-family: var(--font-display);
  word-break: keep-all;
  color: var(--primary);
}

/* Heatmap title: emphasize label in red */
#heatmap-panel .heatmap-label { color: var(--primary); font-weight: 700; }
#heatmap-panel #heatmap-count { color: var(--primary); font-weight: 700; }

/* 히트맵 확장 버튼 */
.expand-heatmap-btn {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 22px;
  height: 22px;
  background: var(--primary);
  color: var(--text-light);
  border: 2px solid var(--secondary);
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 0px var(--secondary);
}

.expand-heatmap-btn:hover {
  background: var(--accent);
  transform: scale(1.1);
  box-shadow: 3px 3px 0px var(--secondary);
}

.expand-heatmap-btn:active {
  transform: scale(0.95) translate(2px, 2px);
  box-shadow: 0px 0px 0px var(--secondary);
}

/* D-Day display below heatmap */
#dday {
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: var(--primary);
  letter-spacing: 1px;
  opacity: 0;
  transition: opacity 0.3s ease-in 0.6s; /* 애니메이션 중간에 표시 */
}

#dday.visible {
  opacity: 1;
}

/* D-Day Race (D-365 트랙) */
#dday-race {
  position: relative;
  margin-top: 1.2rem; /* 간격 증가 */
  margin-bottom: 0.4rem; /* 하단 여백 추가 */
  height: 90px; /* 세로 길이 증가로 가독성 향상 */
}
#dday-race::before { content: none; }
.dday-track-labels { display: none; }
.dday-runner {
  position: absolute;
  left: 0%;
  top: calc(50% - 18px); /* 위로 더 올려서 라벨과 충분한 간격 확보 */
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  z-index: 10;
  transition: left 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.dday-runner canvas { width: 32px; height: 32px; image-rendering: pixelated; image-rendering: crisp-edges; }

/* 버섯 떠다니는 애니메이션 (더 작고 하찮게) */
@keyframes dday-runner-float {
  0%, 100% { transform: translate(-50%, -50%) translateY(0px); }
  50% { transform: translate(-50%, -50%) translateY(-2px); }
}

/* finish flag */
.dday-finish-flag {
  position: absolute;
  display: none; /* 피니시 마커 제거 */
}

/* minimal ticks at 0/50/100 */
.dday-tick {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 18px; /* 통일된 높이 */
  background: rgba(255,255,255,0.25);
}
/* D-365 위치 세로선 - 왼쪽 끝, 붉게 표기 */
.dday-tick.dday-tick-start {
  background: var(--primary);
  box-shadow: 0 0 4px var(--primary);
  width: 2px;
  height: 18px; /* 다른 세로선과 동일한 높이 */
}
/* D-200 위치 세로선 (중간 표시용) */
.dday-tick.d200-tick {
  background: rgba(255,255,255,0.25);
  width: 2px;
  height: 18px; /* 다른 세로선과 동일한 높이 */
}
/* D-365 위치 세로선 (중간 표시용) */
.dday-tick.d100-tick {
  background: rgba(255,255,255,0.25);
  width: 2px;
  height: 18px; /* 다른 세로선과 동일한 높이 */
}
/* D-Day 위치 세로선 - 일반 색상 */
.dday-tick.dday-tick-end {
  background: rgba(255,255,255,0.25);
  box-shadow: none;
  width: 2px;
  height: 18px; /* 다른 세로선과 동일한 높이 */
}

/* 중앙 주로 선 */
.dday-line {
  position: absolute;
  left: 0;
  right: 0; /* 끝까지 */
  top: 50%;
  height: 3px; /* 두껍게 */
  transform: translateY(-50%);
  background: var(--secondary);
  z-index: 0;
}

/* 진행 채움선 */
.dday-progress {
  position: absolute;
  left: 0;
  top: 50%;
  height: 3px; /* 라인과 동일 두께 */
  transform: translateY(-50%);
  background: var(--primary);
  width: 0;
  z-index: 1; /* 베이스선 위로 */
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 좌/우 라벨 */
.dday-label {
  position: absolute;
  top: calc(50% + 20px); /* 캐릭터와 충분한 간격 확보 */
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-light);
  white-space: nowrap; /* 줄바꿈 방지 */
  text-shadow: 1px 1px 0px var(--bg-dark);
  background: rgba(0, 0, 0, 0.3);
  padding: 2px 5px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-family: var(--font-display);
  z-index: 3;
}
.dday-label.left { 
  left: 0; 
  transform: translateX(calc(-50% + 1px)); /* 라벨 중앙이 좌측 세로선(2px 너비)의 중앙에 오도록 */
}
/* D-200 라벨 - 중간 위치에 배치 */
.dday-label.d200-label {
  left: 45.2%; /* D-200 위치 (165/365 * 100) */
  transform: translateX(calc(-50% + 1px)); /* 라벨 중앙이 D-200 세로선(2px 너비)의 중앙에 오도록 */
}
/* D-100 라벨 - 중간 위치에 배치 */
.dday-label.d100-label {
  left: 72.6%; /* D-100 위치 (265/365 * 100) */
  transform: translateX(calc(-50% + 1px)); /* 라벨 중앙이 D-100 세로선(2px 너비)의 중앙에 오도록 */
}
/* D-Day 라벨 강조 - 우측 끝 세로선에 라벨 중앙이 위치하도록 */
.dday-label.right {
  right: 1px; /* 세로선 중앙 위치 (우측 끝에서 1px 왼쪽) */
  transform: translateX(50%); /* 라벨 중앙이 세로선 중앙에 오도록 */
  font-size: 0.9rem; /* 다른 라벨과 동일한 크기 */
  font-weight: 600; /* 다른 라벨과 동일한 굵기 */
  color: var(--primary); /* 이전 색상으로 복원 */
  background: rgba(0, 0, 0, 0.3); /* 다른 라벨과 동일한 배경 */
  padding: 2px 5px; /* 다른 라벨과 동일한 패딩 */
  border: 1px solid rgba(255, 255, 255, 0.15); /* 다른 라벨과 동일한 테두리 */
  box-shadow: none; /* 그림자 제거 */
  text-shadow: 1px 1px 0px var(--bg-dark); /* 다른 라벨과 동일한 텍스트 그림자 */
  z-index: 3; /* 다른 라벨과 동일한 z-index */
}
/* D-365 마커 스타일 */
.dday-label.d100-marker {
  transform: translateX(-50%);
  font-size: 0.9rem; /* D-365와 동일한 크기 */
  font-weight: 600; /* D-365와 동일한 굵기 */
  color: var(--text-light); /* D-365와 동일한 색상 */
  opacity: 1; /* D-365와 동일한 투명도 */
  background: rgba(0, 0, 0, 0.3); /* D-365와 동일한 배경 */
  padding: 2px 5px; /* D-365와 동일한 패딩 */
  border: 1px solid rgba(255, 255, 255, 0.15); /* D-365와 동일한 테두리 */
  border-radius: 3px; /* D-365와 동일한 둥근 모서리 */
  box-shadow: none;
  z-index: 3;
  top: calc(50% + 20px); /* D-365와 동일한 높이 */
}
.dday-label.d100-marker .d100-line {
  position: absolute;
  top: -18px; /* 진행 바 중앙에서 위로 9px */
  left: 50%;
  transform: translateX(-50%);
  width: 2px; /* 다른 세로선과 동일한 두께 */
  height: 18px; /* 다른 세로선과 동일한 높이 */
  background: rgba(255, 255, 255, 0.25); /* 다른 세로선과 동일한 색상 */
  box-shadow: none;
}

/* 퍼센트 칩 */
.dday-percent,
.dday-chip {
  position: absolute;
  top: calc(50% - 58px); /* 캐릭터와 충분한 간격 확보 (캐릭터가 32px 높이 + 여유 공간) */
  transform: translateX(-50%);
  background: var(--bg-dark);
  border: 3px solid var(--primary);
  color: var(--text-light);
  padding: 5px 10px;
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap; /* 줄바꿈 방지 */
  text-shadow: 2px 2px 0px var(--bg-dark);
  box-shadow: 0 0 10px var(--primary), 2px 2px 0px var(--secondary);
  z-index: 11;
  opacity: 0;
  transition: opacity 0.3s ease-in 0.6s, left 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.dday-chip.visible {
  opacity: 1;
}

/* 진행 바 구분선 컨테이너 */
.dday-divider-container {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 24px; /* 진행 바 주변으로만 제한 */
  pointer-events: none;
  z-index: 2;
}

/* 진행 바 구분선 (30일 단위) */
.dday-divider {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2px; /* 다른 세로선과 동일한 두께 */
  height: 18px; /* 다른 세로선과 동일한 높이 */
  background: rgba(255, 255, 255, 0.25); /* 다른 세로선과 동일한 색상 */
}

/* D-365 위치의 구분선은 약간 더 밝게 */
.dday-divider:nth-child(9) { /* 270일 = 9 * 30일, D-365 근처 */
  width: 2px; /* 동일한 두께 유지 */
  height: 18px; /* 동일한 높이 유지 */
  background: rgba(255, 255, 255, 0.3); /* 약간 더 밝게만 */
}

@media (max-width: 600px) {
  #dday-race { height: 80px; } /* 모바일에서도 충분한 높이 유지 */
  .dday-runner { width: 30px; height: 30px; }
  .dday-runner .mushroom { width: 30px; height: 30px; }
  
  /* 모바일에서 캐릭터 어시스턴트 크기 조정 */
  #character-assistant {
    width: 60px;
    height: 60px;
    bottom: 15px;
    right: 15px;
  }
}

/* 더 작은 모바일 화면을 위한 추가 조정 */
@media (max-width: 480px) {
  #character-assistant {
    width: 50px;
    height: 50px;
    bottom: 10px;
    right: 10px;
  }
  
  /* 캐릭터 내부 요소들 크기 조정 */
  #character-assistant .mushroom-cap .dot {
    width: 8px;
    height: 8px;
    border: 1px solid #000;
  }
  
  #character-assistant .character-eye {
    width: 4px;
    height: 5px;
  }
}

/* 매우 작은 화면 (iPhone SE 등)을 위한 최소 크기 조정 */
@media (max-width: 375px) {
  #character-assistant {
    width: 40px;
    height: 40px;
    bottom: 8px;
    right: 8px;
  }
  
  /* 더 작은 내부 요소들 */
  #character-assistant .mushroom-cap .dot {
    width: 6px;
    height: 6px;
    border: 1px solid #000;
  }
  
  #character-assistant .character-eye {
    width: 3px;
    height: 4px;
  }
  
  #character-assistant .mushroom-cap {
    border: 2px solid #000;
  }
  
  #character-assistant .mushroom-stem {
    border: 2px solid #000;
    border-bottom: none;
  }
}

/* 모바일 가로 모드에서 캐릭터가 화면 밖으로 나가지 않도록 조정 */
@media (max-height: 500px) and (orientation: landscape) {
  #character-assistant {
    width: 45px;
    height: 45px;
    bottom: 5px;
    right: 5px;
  }
}

/* 작은 높이에서는 캐릭터 크기를 더 줄임 */
@media (max-height: 400px) {
  #character-assistant {
    width: 35px;
    height: 35px;
    bottom: 5px;
    right: 5px;
  }
  
  #character-assistant .mushroom-cap .dot {
    width: 4px;
    height: 4px;
    border: 1px solid #000;
  }
  
  #character-assistant .character-eye {
    width: 2px;
    height: 3px;
  }
  
  #character-assistant .mushroom-cap,
  #character-assistant .mushroom-stem {
    border: 1px solid #000;
  }
  
  #character-assistant .mushroom-stem {
    border-bottom: none;
  }
}

/* Character Assistant Styles */
#character-assistant {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 80px;
  height: 80px;
  z-index: 99;
  transition: all 0.5s ease-in-out;
}
.mushroom {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 0.3s ease-out;
}
.mushroom-cap {
  width: 100%;
  height: 65%;
  background: var(--primary); /* #DC143C - 웹사이트 포인트 컬러 */
  border: 3px solid #000;
  border-radius: 50% 50% 20% 20%;
  position: absolute;
  top: 0;
  z-index: 2;
  transition: background-color 0.3s, box-shadow 0.3s;
}
.mushroom-cap .dot {
  position: absolute;
  width: 15px;
  height: 15px;
  background: white;
  border-radius: 50%;
  border: 2px solid #000;
}
.mushroom-cap .dot:nth-child(1) {
  top: 15%;
  left: 25%;
}
.mushroom-cap .dot:nth-child(2) {
  top: 30%;
  left: 60%;
}
.mushroom-cap .dot:nth-child(3) {
  top: 45%;
  left: 20%;
}

.mushroom-stem {
  width: 50%;
  height: 50%;
  background: #f7e5d3;
  border: 3px solid #000;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.character-eye {
  position: absolute;
  width: 6px;
  height: 8px;
  background-color: #000;
  border-radius: 50%;
  top: 40%;
  transition: all 0.2s ease;
  z-index: 3;
}
.character-eye.left {
  left: 30%;
}
.character-eye.right {
  right: 30%;
}

.spore {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0;
  animation: spore-float 1.2s ease-out forwards;
}

/* Character Animations */
#character-assistant.idle .mushroom {
  animation: idle-sway 3s ease-in-out infinite;
}
@keyframes idle-sway {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(10deg);
  }
}

#character-assistant.happy .mushroom {
  animation: happy-hop 0.6s ease-out;
}
@keyframes happy-hop {
  0%,
  100% {
    transform: translateY(0) scale(1, 1);
  }
  20% {
    transform: translateY(5px) scale(1.1, 0.9);
  } /* Squish down */
  50% {
    transform: translateY(-20px) scale(0.9, 1.1);
  } /* Jump up and stretch */
  80% {
    transform: translateY(2px) scale(1.05, 0.95);
  } /* Land and squish again */
}

@keyframes spore-float {
  0% {
    transform: translate(0, 0) scale(0);
    opacity: 0.5;
  }
  20% {
    transform: translate(var(--x-1), -20px) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--x-2), -80px) scale(0);
    opacity: 0;
  }
}

#character-assistant.sad .mushroom-cap {
  background-color: rgba(10, 18, 42, 0.8); /* 네이비 - 슬픔 상태에서 어둡게 */
}
#character-assistant.sad .mushroom {
  transform: rotate(-15deg) translateY(5px);
}

#character-assistant.worried .mushroom {
  animation: worried-shake 0.3s linear infinite;
}
@keyframes worried-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-2px);
  }
  75% {
    transform: translateX(2px);
  }
}

#character-assistant.cheer .mushroom {
  animation: cheer-dance 1.2s ease-in-out infinite;
}
@keyframes cheer-dance {
  0%,
  100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-20deg);
  }
  75% {
    transform: rotate(20deg);
  }
}

/* Combo Growth Styles */
#character-assistant.combo-level-1 .mushroom {
  transform: scale(1.1);
}
#character-assistant.combo-level-2 .mushroom {
  transform: scale(1.2);
}
#character-assistant.combo-level-2 .mushroom-cap {
  box-shadow: 0 0 10px gold, 0 0 15px gold;
}
#character-assistant.combo-level-3 .mushroom {
  transform: scale(1.3);
}
#character-assistant.combo-level-3 .mushroom-cap {
  animation: rainbow-glow 2s infinite alternate;
}

@keyframes rainbow-glow {
  0% {
    box-shadow: 0 0 8px #ff0000, 0 0 12px #ff7f00;
  }
  20% {
    box-shadow: 0 0 8px #ff7f00, 0 0 12px #ffff00;
  }
  40% {
    box-shadow: 0 0 8px #ffff00, 0 0 12px #00ff00;
  }
  60% {
    box-shadow: 0 0 8px #00ff00, 0 0 12px #0000ff;
  }
  80% {
    box-shadow: 0 0 8px #0000ff, 0 0 12px #4b0082;
  }
  100% {
    box-shadow: 0 0 8px #4b0082, 0 0 12px #9400d3;
  }
}

/* Devil Mode Styles */
.devil-horns,
.fire-effect {
  display: none;
}
#character-assistant.devil-mode .devil-horns {
  display: block;
}
#character-assistant.devil-mode .mushroom-cap {
  background: #a00000;
}
#character-assistant.devil-mode.happy .fire-effect {
  display: flex;
}

#character-assistant.devil-mode.sad .mushroom-cap {
  background: #2c003e; /* Very dark, menacing purple */
  box-shadow: 0 0 15px #ff0000, inset 0 0 10px #000;
}
#character-assistant.devil-mode.sad .character-eye {
  background: #ff0000; /* Glowing red eyes */
  box-shadow: 0 0 10px #ff0000;
}

.devil-horns {
  position: absolute;
  width: 100%;
  top: -5px;
  z-index: 3;
}
.horn {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 20px solid #4d0000;
}
.horn.left {
  left: 10px;
  transform: rotate(-20deg);
}
.horn.right {
  right: 10px;
  transform: rotate(20deg);
}

.fire-effect {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 150%;
  height: 50px;
  justify-content: center;
  filter: blur(1px);
  z-index: 0;
}
.flame {
  width: 15px;
  height: 25px;
  background: orangered;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  animation: burn 0.8s forwards infinite;
  margin: 0 -4px;
}
.flame:nth-child(2) {
  animation-delay: 0.2s;
}
.flame:nth-child(3) {
  animation-delay: 0.1s;
}
.flame:nth-child(4) {
  animation-delay: 0.3s;
}
.flame:nth-child(5) {
  animation-delay: 0.15s;
}

@keyframes burn {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.9;
  }
  50% {
    transform: translateY(-40px) scale(1.5);
    opacity: 1;
  }
  100% {
    transform: translateY(-80px) scale(0);
    opacity: 0;
  }
}

/* Result Modal Enhancements */
#progress-modal .modal-content {
  position: relative;
  padding-top: 1rem;
  width: min(80vmin, 500px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
}
#result-character-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  min-height: 100px;
  flex: 1;
}
#modal-character-placeholder {
  width: 80px;
  height: 80px;
  position: relative;
}
#modal-character-placeholder > #character-assistant {
  position: static; /* Override fixed positioning */
  bottom: auto;
  right: auto;
}
.speech-bubble {
  position: relative;
  background: var(--bg-dark);
  border-radius: 0.4em;
  padding: 1.5rem;
  min-width: 250px;
  max-width: 90vw;
  text-align: left;
  border: 2px solid var(--primary);
}
.speech-bubble:after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-right-color: var(--primary);
  border-left: 0;
  border-bottom: 0;
  margin-top: -10px;
  margin-left: -22px;
}
#result-dialogue {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.6;
  white-space: pre-line;
  word-break: keep-all;
}
#result-title {
  font-size: 2.5rem !important;
  margin-bottom: 1rem !important;
  font-family: var(--font-display);
  color: var(--primary);
  text-shadow: 3px 3px 0 var(--secondary);
}

/* Responsive Styles */
@media (max-width: 768px) {
  :root {
    font-size: 8px;
  }
  /* Avoid horizontal scroll due to large fixed widths */
  body {
    overflow-x: hidden;
  }
  header {
    padding: 1rem;
    flex-direction: column;
    height: auto;
    gap: 1rem;
  }
  .hud-left,
  .hud-center,
  .hud-right {
    flex: none;
    width: 100%;
    justify-content: center;
  }
  .hud-right {
    flex-wrap: wrap;
  }
  header h1 {
    margin-bottom: 1rem;
  }
  main {
    padding-top: 22rem; /* Adjust based on new header height */
  }
  .tabs {
    flex-wrap: wrap;
  }
  .tab {
    flex-basis: 48%;
  }
  .grade-container {
    flex-direction: column;
  }
  #character-assistant {
    width: 60px;
    height: 60px;
    bottom: 10px;
    right: 10px;
  }
}
@media (max-width: 480px) {
  .hud-center {
    flex-direction: column;
  }
  main {
    padding-top: 28rem;
  }
  #result-character-container {
    flex-direction: column;
  }
  .speech-bubble {
    max-width: 90vw;
  }
  #result-dialogue {
    font-size: 1.4rem;
  }
  .speech-bubble:after {
    top: 0;
    left: 50%;
    border: 20px solid transparent;
    border-bottom-color: var(--primary);
    border-top: 0;
    border-right: 0;
    margin-left: -10px;
    margin-top: -20px;
  }
}

/* Competency Section Enhancements */

.competency-ui .accordion-header {
  width: 100%;
  text-align: left;
  padding: 1.2rem;
  background: var(--secondary);
  border: 3px solid var(--primary);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-light);
  cursor: pointer;
  border-radius: 8px;
  position: relative;
  margin-top: 1rem;
}

.competency-ui .accordion-header::after {
  content: '\25BC';
  position: absolute;
  right: 1rem;
  transition: transform 0.3s;
}

.competency-ui .accordion-header[aria-expanded='true']::after {
  transform: rotate(180deg);
}

.competency-ui .grade-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
}

.competency-ui .grade-container > div {
  border-color: var(--accent);
}

.competency-ui th {
  color: var(--primary);
}

.competency-ui .competency-tab-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.competency-ui .competency-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3rem;
}

.competency-ui .competency-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.competency-ui .competency-column .column-title {
  font-weight: 700;
}
.competency-ui .competency-tab {
  flex: 0 0 auto;
  padding: 0.8rem 1.4rem;
  font-size: 1.4rem;
  line-height: 1.2;
  white-space: nowrap;
}
.competency-ui .competency-tab.cleared {
  background: var(--correct);
  color: var(--bg-dark);
}

.competency-ui .integrated-sections {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.competency-ui .integrated-sections section {
  flex: 1;
  min-width: 260px;
}

.competency-ui .integrated-sections section:first-child {
  flex: 0 0 100%;
}

.inline-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.inline-item input {
  flex: 0 0 auto;
  width: auto;
}

/* Arrange English acquisition blocks vertically */
#english-quiz-main #acquisition .grade-container {
  flex-direction: column;
}
#english-quiz-main #acquisition .grade-container > div {
  flex: none;
  width: 100%;
}

/* English: 기능�??�어 지?�는 ??�� 1???�로) 배치 */
#english-quiz-main #functional .grade-container {
  flex-direction: column;
}
#english-quiz-main #functional .grade-container > div {
  flex: none;
  width: 100%;
  min-width: 100%;
}

/* English: ?�소�??�어 지??- �?블록(Culture)?� ?�독 ?�으�?분리 배치 */
#english-quiz-main #element .grade-container > div:first-child {
  flex: none;
  width: 100%;
  min-width: 100%;
}

/* English: 활동 중심 수업 - 'Chant & Song'을 독립 열으로 분리 배치 */
#english-quiz-main #activity .grade-container > div:first-child {
  flex: none;
  width: 100%;
  min-width: 100%;
}

/* English: 모든 섹션을 1열 배치로 설정 */
#english-quiz-main .grade-container {
  flex-direction: column;
}
#english-quiz-main .grade-container > div {
  flex: none;
  width: 100%;
  min-width: 100%;
}

.inline-answers {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.assessment-list {
  list-style-type: disc;
  margin: 0 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sub-list {
  list-style-type: circle;
  margin-left: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#moral-principles .assessment-list {
  flex-direction: row;
  flex-wrap: wrap;
}

#moral-principles .assessment-list .inline-item {
  flex: 1 1 300px;
}

#moral-methods .methods-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

#moral-methods .method-column {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#moral-principles-quiz-main .assessment-list {
  list-style: none;
  margin: 0;
  gap: 0.5rem;
}

#moral-principles-quiz-main .sub-list {
  list-style: none;
  margin-left: 1rem;
  gap: 0.5rem;
}

#moral-principles-quiz-main .grade-container {
  gap: 1.5rem;
}

#moral-principles-quiz-main .grade-container > div {
  padding: 1rem;
}

/* Deeper sub-list levels for English quiz */
#english-quiz-main .sub-list .sub-list {
  margin-left: 3rem;
  list-style-type: square;
}

#english-quiz-main .sub-list .sub-list .sub-list {
  margin-left: 4rem;
  list-style-type: disc;
}

/* Visual separators for English quiz hierarchy */
#english-quiz-main .assessment-list > li:not(:last-child) {
  border-bottom: 2px solid var(--text-dark); /* subtle gray border */
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

#english-quiz-main .sub-list {
  border-left: 2px dashed var(--secondary);
  padding-left: 1rem;
}

/* English: Full redesign for readability & hierarchy (?�면 개편) */
/* 1) 리스??기본�?리셋 �?간격 ?�장 */
#english-quiz-main .assessment-list,
#english-quiz-main .sub-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

#english-quiz-main .assessment-list {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

/* 기존 ?�단 분리???�거 (카드?�로 ?��? */
#english-quiz-main .assessment-list > li:not(:last-child) {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* 2) 최상????��: 카드 ?�태 + 좌측 가?�드 ?�인 */
#english-quiz-main .assessment-list > li {
  background: var(--bg-light);
  border: 2px solid var(--secondary);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  padding: 1.2rem 1.2rem 1.2rem 1.4rem;
}

/* 3) ?�위 ??��: 좌측 가?�드 + ?�여?�기 ?�장 */
#english-quiz-main .sub-list {
  display: flex;
  flex-direction: column;
  gap: 1.2rem; /* ?�위 ??�� ?�로 간격 ?��? */
  border-left: 2px dashed var(--secondary);
  padding-left: 1.2rem;
}
#english-quiz-main .sub-list .sub-list {
  border-left: 2px dotted var(--text-dark);
  padding-left: 1.2rem;
}
#english-quiz-main .sub-list .sub-list .sub-list {
  border-left: 2px dotted rgba(255, 255, 255, 0.25);
  padding-left: 1.2rem;
}

/* 4) 문장/?�라??그룹 간격 �??�간 ?�장 */
#english-quiz-main li,
#english-quiz-main .inline-item {
  line-height: 1.9;
}
#english-quiz-main .inline-item {
  gap: 1.4rem; /* 가�?간격 증�? */
  row-gap: 1.6rem; /* 줄바�????�로 간격 추�? ?��? */
}

/* 5) ?�력�?빈칸) ?�설�? ?�백/줄간�??�렬 개선, ?�계�??�기 차등 */
#english-quiz-main input.fit-answer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.8rem;
  margin: 0.5rem 0.6rem; /* ?�·아???�백 추�? ?��? */
  padding-bottom: 0.6rem; /* ?��? ?�래 ?�백 ?�보(배�? 겹침 방�?) */
  line-height: 1.9;
  background: var(--bg-light);
  border-radius: 8px;
}

/* ???�서 ?�기 가?�성: ?�살?��? 좌우 ??��?� 줄바�??�이 붙여???�시 */
#english-quiz-main .arrow-seq {
  white-space: nowrap;
}

/* 줄바�??�에???�살?��? ?�줄 ?�에 ?��? ?�도�??��? ????���?묶어�?*/
#english-quiz-main .arrow-keep {
  white-space: nowrap;
}

/* 미니 ?�답 배�? ?�용 ???�력�??��? 공간 ?�보 */
#english-quiz-main .reveal-wrapper input.fit-answer {
  padding-right: 2.6rem; /* 배�? ??��???�측 ?�유 */
}

/* ?�벨�?차등: ?�위?�수�??�게/?�껍�??�게 */
#english-quiz-main .assessment-list > li input.fit-answer {
  font-size: 1.6rem;
  font-weight: 800;
  min-width: 18ch;
  border-width: 3px;
}
#english-quiz-main .sub-list > li input.fit-answer {
  font-size: 1.45rem;
  font-weight: 700;
  min-width: 14ch;
}
#english-quiz-main .sub-list .sub-list > li input.fit-answer {
  font-size: 1.35rem;
  font-weight: 600;
  min-width: 12ch;
}
#english-quiz-main .sub-list .sub-list .sub-list > li input.fit-answer {
  font-size: 1.25rem;
  font-weight: 600;
  min-width: 10ch;
}

/* Creative subject readability tweaks */

/* English: 기본?�론 계층 가?�성 강화 (?�트 마커 ?�외) */
/* ?�벨�??�로 가?�드 굵기 차등 */
#english-quiz-main .sub-list {
  border-left-width: 3px; /* 1�??�벨 */
}
#english-quiz-main .sub-list .sub-list {
  border-left-width: 2px; /* 2�??�벨 */
}
#english-quiz-main .sub-list .sub-list .sub-list {
  border-left-width: 1px; /* 3�??�벨 */
}

/* ?�여?�기 ?��?: ?�위?�서 ?�위�?갈수�??�백 ?�적 */
#english-quiz-main .assessment-list > li > .sub-list {
  padding-left: 1.4rem;
}
#english-quiz-main .sub-list > li > .sub-list {
  padding-left: 1.2rem;
}

/* 문장+빈칸 ?�름 ?�돈: 기�????�렬 */
#english-quiz-main .inline-item {
  align-items: baseline;
}

/* 영어 과목 스펠링 가독성 향상: 빈칸 내부 텍스트 크기 대폭 증가 */
#english-quiz-main input.fit-answer {
  font-size: 2.4rem !important; /* 기본 입력 필드 크기 대폭 증가 */
  font-weight: 800 !important;
  line-height: 1.4 !important;
  padding: 1rem 1.2rem !important;
  letter-spacing: 0.08em !important; /* 글자 간격 증가로 가독성 향상 */
  height: auto !important;
  min-height: 3.2rem !important; /* 최소 높이 보장 */
}

/* 계층별 크기 재정의 - 모든 레벨을 훨씬 크게 */
#english-quiz-main .assessment-list > li input.fit-answer {
  font-size: 2.8rem !important; /* 최상위 레벨을 가장 크게 */
  font-weight: 900 !important;
  min-width: 11.2ch !important; /* 20% 축소 */
  border-width: 4px !important;
  letter-spacing: 0.1em !important;
  min-height: 3.8rem !important;
  padding: 1.2rem 1.4rem !important;
}

#english-quiz-main .sub-list > li input.fit-answer {
  font-size: 2.6rem !important; /* 2번째 레벨 */
  font-weight: 850 !important;
  min-width: 9.6ch !important; /* 20% 축소 */
  letter-spacing: 0.09em !important;
  min-height: 3.6rem !important;
  padding: 1.1rem 1.3rem !important;
}

#english-quiz-main .sub-list .sub-list > li input.fit-answer {
  font-size: 2.4rem !important; /* 3번째 레벨 */
  font-weight: 800 !important;
  min-width: 8ch !important; /* 20% 축소 */
  letter-spacing: 0.08em !important;
  min-height: 3.4rem !important;
  padding: 1rem 1.2rem !important;
}

#english-quiz-main .sub-list .sub-list .sub-list > li input.fit-answer {
  font-size: 2.2rem !important; /* 4번째 레벨도 충분히 크게 */
  font-weight: 800 !important;
  min-width: 6.4ch !important; /* 20% 축소 */
  letter-spacing: 0.07em !important;
  min-height: 3.2rem !important;
  padding: 0.9rem 1.1rem !important;
}

/* 모든 영어 입력 필드에 적용 (다양한 선택자 커버) */
#english-quiz-main input[data-answer],
#english-quiz-main input[placeholder],
#english-quiz-main input[type="text"] {
  font-size: 2.4rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  padding: 1rem 1.2rem !important;
  min-height: 3.2rem !important;
}

/* 영어 과목의 일반 텍스트도 가독성 향상 */
#english-quiz-main li,
#english-quiz-main .inline-item {
  font-size: 2rem !important; /* 주변 텍스트도 크게 */
  line-height: 2.4 !important;
}

/* 영어 과목 제목 및 라벨 크기 증가 */
#english-quiz-main h2,
#english-quiz-main h3 {
  font-size: 2.8rem !important;
  line-height: 1.4 !important;
}

#english-quiz-main .grade-title {
  font-size: 2.2rem !important;
  font-weight: 800 !important;
}

/* 영어 과목 탭 메뉴도 크게 */
body:has(#english-quiz-main:not(.hidden)) .tabs .tab {
  font-size: 1.8rem !important;
  padding: 1rem 1.5rem !important;
}
#creative-quiz-main .creative-block {
  margin-bottom: 2rem;
  padding: 1rem;
  background: var(--bg-light);
  border: 2px solid var(--secondary);
  border-radius: 8px;
}
#overview-quiz-main .creative-block,
#integrated-course-quiz-main .creative-block,
#social-course-quiz-main .creative-block,
#moral-course-quiz-main .creative-block,
#science-course-quiz-main .creative-block,
#korean-course-quiz-main .creative-block,
#english-course-quiz-main .creative-block,
#practical-course-quiz-main .creative-block,
#music-course-quiz-main .creative-block,
#pe-course-quiz-main .creative-block,
#art-course-quiz-main .creative-block {
  margin-bottom: 2rem;
  padding: 1rem;
  background: var(--bg-light);
  border: 2px solid var(--secondary);
  border-radius: 8px;
}

/* 체육 과목 major-section 시각적 구분 */
#pe-course-quiz-main .major-section {
  margin: 2rem 0;
  padding: 1.5rem;
  background: rgba(15, 52, 96, 0.1); /* secondary 색상의 투명 버전 */
  border: 1px solid rgba(15, 52, 96, 0.3); /* secondary 색상의 연한 테두리 */
  border-left: 3px solid var(--secondary); /* 왼쪽은 더 진한 테두리 */
  border-radius: 6px;
}

#science-std-quiz-main .achievement-block,
#english-std-quiz-main .achievement-block,
#practical-std-quiz-main .achievement-block,
#practical-std-quiz-main #info-education .achievement-block,
#social-34-quiz-main .achievement-block,
#social-56-quiz-main .achievement-block,
#life-achievement-quiz-main .achievement-block,
#wise-achievement-quiz-main .achievement-block,
#joy-achievement-quiz-main .achievement-block,
#music-std-quiz-main .achievement-block,
#art-std-quiz-main .achievement-block,
#math-operation-quiz-main .achievement-block,
#change-relation-quiz-main .achievement-block,
#geometry-measure-quiz-main .achievement-block,
#data-probability-quiz-main .achievement-block {
  margin: 3rem 0 2rem;
  padding: 1rem;
  background: var(--bg-light);
  border: 3px solid var(--secondary);
  border-radius: 8px;
  position: relative;
}
#science-std-quiz-main .achievement-block::before,
#english-std-quiz-main .achievement-block::before,
#art-std-quiz-main .achievement-block::before,
#math-operation-quiz-main .achievement-block::before,
#change-relation-quiz-main .achievement-block::before,
#geometry-measure-quiz-main .achievement-block::before,
#data-probability-quiz-main .achievement-block::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  height: 6px;
  background: var(--accent);
  border-radius: 8px 8px 0 0;
}

#science-std-quiz-main .topic-divider,
#english-std-quiz-main .topic-divider {
  height: 14px;
  margin: 1.6rem 0 0.8rem;
  background: linear-gradient(90deg, transparent, var(--secondary) 14%, var(--secondary) 86%, transparent);
  border-radius: 8px;
}
#creative-quiz-main .outline-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--primary);
}
#science-std-quiz-main .outline-title,
#english-std-quiz-main .outline-title,
#practical-std-quiz-main .outline-title,
#practical-std-quiz-main #info-education .outline-title,
#social-34-quiz-main .outline-title,
#social-56-quiz-main .outline-title,
#life-achievement-quiz-main .outline-title,
#wise-achievement-quiz-main .outline-title,
#joy-achievement-quiz-main .outline-title,
#korean-std-quiz-main .outline-title,
#music-std-quiz-main .outline-title,
#art-std-quiz-main .outline-title,
#math-operation-quiz-main .outline-title,
#change-relation-quiz-main .outline-title,
#geometry-measure-quiz-main .outline-title,
#data-probability-quiz-main .outline-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #ff5555;
}

/* 과학 ?�션 주제 ?�목 ?�기 ?�향 - # ?�기가 ?�는 것만 */
#science-std-quiz-main .outline-title[data-is-topic="true"] {
  font-size: 2.6rem;
}
#science-std-quiz-main .activity-box {
  border: 2px solid var(--accent);
  border-radius: 12px;
  padding: 0.8rem 0.8rem 0.2rem;
  margin-bottom: 2rem;
  background: transparent;
}
#science-std-quiz-main .activity-box .overview-question {
  margin-bottom: 1.2rem;
}
#science-std-quiz-main .activity-box .overview-question:last-child {
  margin-bottom: 0.6rem;
}
#overview-quiz-main .outline-title,
#integrated-course-quiz-main .outline-title,
#social-course-quiz-main .outline-title,
#moral-course-quiz-main .outline-title,
#science-course-quiz-main .outline-title,
#korean-course-quiz-main .outline-title,
#english-course-quiz-main .outline-title,
#practical-course-quiz-main .outline-title,
#music-course-quiz-main .outline-title,
#pe-course-quiz-main .outline-title,
#art-course-quiz-main .outline-title,
#spelling-quiz-main .outline-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--primary);
}
#overview-quiz-main .sub-title,
#integrated-course-quiz-main .sub-title,
#social-course-quiz-main .sub-title,
#moral-course-quiz-main .sub-title,
#science-course-quiz-main .sub-title,
#korean-course-quiz-main .sub-title,
#english-course-quiz-main .sub-title,
#practical-course-quiz-main .sub-title,
#music-course-quiz-main .sub-title,
#pe-course-quiz-main .sub-title,
#art-course-quiz-main .sub-title,
#spelling-quiz-main .sub-title {
  font-size: 1.8rem;
  font-weight: 600;
  margin: 1rem 0;
  color: var(--accent);
}
#creative-quiz-main .creative-question {
  display: block;
  line-height: 2.2; /* �?간격 ?��? */
  font-size: 2rem;
  font-weight: 500;
  overflow-wrap: anywhere; /* handle long questions gracefully */
  padding: 2.5rem; /* ?�하좌우 ?�딩 추�? */
  background: var(--bg-light); /* 배경??추�? */
  border: 2px solid var(--secondary);
  border-radius: 12px; /* 모서�??��?�?*/
  margin-bottom: 2.5rem; /* 문단 �?간격 조정 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 그림???�과 */
  position: relative;
}
#overview-quiz-main .overview-question,
#integrated-course-quiz-main .overview-question,
#social-course-quiz-main .overview-question,
#moral-course-quiz-main .overview-question,
#eastern-ethics-quiz-main .overview-question,
#western-ethics-quiz-main .overview-question,
#moral-psychology-quiz-main .overview-question,
#science-course-quiz-main .overview-question,
#korean-course-quiz-main .overview-question,
#english-course-quiz-main .overview-question,
#practical-course-quiz-main .overview-question,
#music-course-quiz-main .overview-question,
#pe-course-quiz-main .overview-question,
#art-course-quiz-main .overview-question,
#science-std-quiz-main .overview-question,
#english-std-quiz-main .overview-question,
#practical-std-quiz-main .overview-question,
#practical-std-quiz-main #info-education .overview-question,
#social-34-quiz-main .overview-question,
#social-56-quiz-main .overview-question,
#geometry-quiz-main .overview-question,
#life-achievement-quiz-main .overview-question,
#wise-achievement-quiz-main .overview-question,
#joy-achievement-quiz-main .overview-question,
#korean-std-quiz-main .overview-question,
#music-std-quiz-main .overview-question,
#art-std-quiz-main .overview-question,
#math-operation-quiz-main .overview-question,
#practical-quiz-main .overview-question,
#math-course-quiz-main .overview-question,
#spelling-quiz-main .overview-question,
#change-relation-quiz-main .overview-question,
#geometry-measure-quiz-main .overview-question,
#data-probability-quiz-main .overview-question,
#integrated-guide-overview .overview-question {
  display: block;
  line-height: 2.2; /* �?간격 ?��? */
  font-size: 2rem;
  font-weight: 500;
  overflow-wrap: anywhere; /* handle long questions gracefully */
  padding: 2.5rem; /* ?�하좌우 ?�딩 추�? */
  background: var(--bg-light); /* 배경??추�? */
  border: 2px solid var(--secondary);
  border-radius: 12px; /* 모서�??��?�?*/
  margin-bottom: 2.5rem; /* 문단 �?간격 조정 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 그림???�과 */
  position: relative;
}

/* III > 2. 초등?�교: ?�위 ?�자??�� 강조 */
#overview-quiz-main #standard .standard-emphasis,
#math-core-idea .standard-emphasis,
#math-teaching-competency .standard-emphasis {
  border-color: var(--accent) !important; /* 보라???�두�?*/
  box-shadow: 0 0 0 2px rgba(83, 52, 131, 0.35);
}
#creative-quiz-main .creative-question:last-child {
  margin-bottom: 1rem; /* 마�?�?문단???�단 ?�백 조정 */
}
#overview-quiz-main .overview-question:last-child,
#integrated-course-quiz-main .overview-question:last-child,
#social-course-quiz-main .overview-question:last-child,
#moral-course-quiz-main .overview-question:last-child,
#eastern-ethics-quiz-main .overview-question:last-child,
#western-ethics-quiz-main .overview-question:last-child,
#moral-psychology-quiz-main .overview-question:last-child,
#science-course-quiz-main .overview-question:last-child,
#english-course-quiz-main .overview-question:last-child,
#practical-course-quiz-main .overview-question:last-child,
#music-course-quiz-main .overview-question:last-child,
#pe-course-quiz-main .overview-question:last-child,
#art-course-quiz-main .overview-question:last-child,
#korean-course-quiz-main .overview-question:last-child,
#science-std-quiz-main .overview-question:last-child,
#english-std-quiz-main .overview-question:last-child,
#practical-std-quiz-main .overview-question:last-child,
#art-std-quiz-main .overview-question:last-child,
#math-operation-quiz-main .overview-question:last-child,
#geometry-measure-quiz-main .overview-question:last-child,
#data-probability-quiz-main .overview-question:last-child,
#practical-quiz-main .overview-question:last-child,
#math-course-quiz-main .overview-question:last-child,
#spelling-quiz-main .overview-question:last-child,
#change-relation-quiz-main .overview-question:last-child,
#integrated-guide-overview .overview-question:last-child {
  margin-bottom: 1rem; /* 마�?�?문단???�단 ?�백 조정 */
}

/* Overview (총론, 동양윤리) 계층 ?�여?�기 */
/* Overview (총론, 동양윤리) 계층 들여쓰기 - 모든 섹션에 일관성 있게 적용 */
/* 총론의 5가지 섹션(교육과정의 성격, 구성의 방향, 설계와 운영, 편성·운영, 학교 교육과정 지원) 모두 동일한 들여쓰기 적용 */
/* 상위 항목(overview-top): 2rem, 하위 항목(overview-sub): 0rem (들여쓰기 없음) */
#overview-quiz-main .overview-question.overview-top,
#eastern-ethics-quiz-main .overview-question.overview-top,
#western-ethics-quiz-main .overview-question.overview-top,
#moral-psychology-quiz-main .overview-question.overview-top,
#integrated-guide-overview .overview-question.overview-top {
  margin-left: 2rem;
}
#overview-quiz-main .overview-question.overview-sub,
#eastern-ethics-quiz-main .overview-question.overview-sub,
#western-ethics-quiz-main .overview-question.overview-sub,
#moral-psychology-quiz-main .overview-question.overview-sub,
#integrated-guide-overview .overview-question.overview-sub {
  margin-left: 0;
}

/* 총론 섹션의 말머리 기호 스타일 - 덜 눈에 띄게 */
#overview-quiz-main .overview-question .label {
  color: rgba(255, 255, 255, 0.6); /* 본문보다 약간 어둡게 */
  font-weight: 400; /* 기본 굵기 */
  opacity: 0.7; /* 약간 투명하게 */
}

/* 동양윤리, 서양윤리, 도덕 심리학 Title 강조 스타일 */
#eastern-ethics-quiz-main .overview-question.title-highlight,
#western-ethics-quiz-main .overview-question.title-highlight,
#moral-psychology-quiz-main .overview-question.title-highlight {
  border: 3px solid var(--accent) !important;
  border-radius: 8px;
  padding: 1rem 1.5rem;
  margin: 1rem 0;
  background: rgba(83, 52, 131, 0.05);
  box-shadow: 0 0 0 2px rgba(83, 52, 131, 0.2);
}

/* 동양윤리, 서양윤리, 도덕 심리학 빈칸 스타일 - 총론과 동일하게 적용 */
#eastern-ethics-quiz-main .overview-question input,
#western-ethics-quiz-main .overview-question input,
#moral-psychology-quiz-main .overview-question input {
  font-size: 1.9rem;
  padding: 0.6rem 1rem;
  margin: 0 0.6rem;
  border: 2px solid var(--secondary);
  border-radius: 8px;
  background: var(--bg-light);
  color: var(--text-light);
  text-align: center;  /* 중앙 정렬 적용 */
  width: auto;
  min-width: 10ch !important;  /* 좁은 최소 너비 적용 */
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  resize: horizontal;
  overflow: hidden;
}



/* 모바??반응???�자??개선 */
@media (max-width: 768px) {
  #creative-quiz-main .creative-question,
  #overview-quiz-main .overview-question,
  #integrated-course-quiz-main .overview-question,
  #social-course-quiz-main .overview-question,
  #moral-course-quiz-main .overview-question,
    #science-course-quiz-main .overview-question,
    #korean-course-quiz-main .overview-question,
    #english-course-quiz-main .overview-question,
    #practical-course-quiz-main .overview-question,
    #music-course-quiz-main .overview-question,
    #pe-course-quiz-main .overview-question,
    #art-course-quiz-main .overview-question,
    #science-std-quiz-main .overview-question,
    #english-std-quiz-main .overview-question,
    #practical-std-quiz-main .overview-question,
#practical-std-quiz-main #info-education .overview-question,
#social-34-quiz-main .overview-question,
#social-56-quiz-main .overview-question,
#life-achievement-quiz-main .overview-question,
#wise-achievement-quiz-main .overview-question,
#joy-achievement-quiz-main .overview-question,
#korean-std-quiz-main .overview-question,
#music-std-quiz-main .overview-question,
    #art-std-quiz-main .overview-question,
    #math-operation-quiz-main .overview-question,
    #change-relation-quiz-main .overview-question,
    #geometry-measure-quiz-main .overview-question,
    #data-probability-quiz-main .overview-question,
    #practical-quiz-main .overview-question,
  #math-course-quiz-main .overview-question,
  #spelling-quiz-main .overview-question {
    padding: 2rem 1.5rem; /* 모바?�에???�딩 조정 */
    font-size: 1.7rem; /* 모바?�에???�트 ?�기 조정 */
    line-height: 2; /* �?간격 조정 */
  }
  
  #creative-quiz-main .creative-question input,
  #overview-quiz-main .overview-question input,
  #eastern-ethics-quiz-main .overview-question input,
  #western-ethics-quiz-main .overview-question input,
  #moral-psychology-quiz-main .overview-question input,
  #integrated-course-quiz-main .overview-question input,
  #social-course-quiz-main .overview-question input,
  #moral-course-quiz-main .overview-question input,
    #science-course-quiz-main .overview-question input,
    #korean-course-quiz-main .overview-question input,
    #english-course-quiz-main .overview-question input,
    #practical-course-quiz-main .overview-question input,
    #music-course-quiz-main .overview-question input,
#pe-course-quiz-main .overview-question input,
    #art-course-quiz-main .overview-question input,
    #science-std-quiz-main .overview-question input,
    #english-std-quiz-main .overview-question input,
    #practical-std-quiz-main .overview-question input,
#practical-std-quiz-main #info-education .overview-question input,
    #art-std-quiz-main .overview-question input,
    #math-operation-quiz-main .overview-question input,
    #change-relation-quiz-main .overview-question input,
    #geometry-measure-quiz-main .overview-question input,
    #data-probability-quiz-main .overview-question input,
    #practical-quiz-main .overview-question input,
  #math-course-quiz-main .overview-question input,
  #korean-model-quiz-main .overview-question input,
  #pe-model-quiz-main .overview-question input,
  #spelling-quiz-main .overview-question input,
  #social-34-quiz-main .overview-question input,
  #social-56-quiz-main .overview-question input,
#life-achievement-quiz-main .overview-question input,
#wise-achievement-quiz-main .overview-question input,
#joy-achievement-quiz-main .overview-question input,
  #korean-std-quiz-main .overview-question input,
  #music-std-quiz-main .overview-question input {
    font-size: 1.6rem; /* 모바?�에???�력 ?�드 ?�트 ?�기 */
    padding: 0.5rem 0.8rem; /* 모바?�에???�딩 조정 */
    margin: 0.2rem 0.4rem; /* 모바?�에??마진 조정 */
    min-width: 8ch; /* 모바?�에??최소 ?�비 조정 */
  }
  
  /* 창체 ?�역�??�동 모바??최적??*/
  #creative-quiz-main .assessment-list {
    grid-template-columns: 1fr; /* 모바?�에???�일 ??*/
    gap: 1.5rem;
  }
  
  #creative-quiz-main .sub-list {
    grid-template-columns: 1fr; /* 모바?�에???�위 목록???�일 ??*/
    gap: 0.5rem;
  }
  
  /* 모바?�에???�력 ?�드 ?�기 조정 */
  #creative-quiz-main .assessment-list > li > input.fit-answer:first-child {
    min-width: 150px;
    font-size: 1.6rem;
  }
  
  #creative-quiz-main .assessment-list > li > ul > li > input.fit-answer:first-child {
    width: 140px !important;
    min-width: 140px !important;
    font-size: 1.3rem;
  }
  
  #creative-quiz-main .assessment-list input.fit-answer {
    font-size: 1.2rem;
    padding: 0.4rem 0.6rem;
    min-width: 80px !important;
    max-width: 100px !important;
  }
  
  #creative-quiz-main .sub-list .inline-item input.fit-answer {
    min-width: 80px !important;
    font-size: 1.2rem;
  }

}
#creative-quiz-main .creative-question input {
  font-size: 1.9rem;
  padding: 0.6rem 1rem; /* ?�딩 ?��? */
  margin: 0 0.6rem; /* 좌우 마진 ?��? */
  border: 2px solid var(--secondary); /* ?�두�?강화 */
  border-radius: 8px; /* 모서�??��?�?*/
  background: var(--bg-light); /* ?�마 ?�환 배경??*/
  color: var(--text-light); /* ?�마 ?�환 ?�스???�상 */
  text-align: center;
  width: auto;
  min-width: 10ch; /* 최소 ?�비 ?��? */
  /* max-width: 100%; */ /* 최대 너비 제한 해제 */
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); /* ?��? 그림??*/
  transition: all 0.2s ease; /* 부?�러???�환 ?�과 */
}
#overview-quiz-main .overview-question input,
#integrated-course-quiz-main .overview-question input,
#social-course-quiz-main .overview-question input,
#moral-course-quiz-main .overview-question input,
#science-course-quiz-main .overview-question input,
#korean-course-quiz-main .overview-question input,
#english-course-quiz-main .overview-question input,
#practical-course-quiz-main .overview-question input,
#music-course-quiz-main .overview-question input,
#pe-course-quiz-main .overview-question input,
#art-course-quiz-main .overview-question input,
#science-std-quiz-main .overview-question input,
#english-std-quiz-main .overview-question input,
#practical-std-quiz-main .overview-question input,
#practical-std-quiz-main #info-education .overview-question input,
#art-std-quiz-main .overview-question input,
#math-operation-quiz-main .overview-question input,
#change-relation-quiz-main .overview-question input,
#geometry-measure-quiz-main .overview-question input,
#data-probability-quiz-main .overview-question input,
#practical-quiz-main .overview-question input,
#math-course-quiz-main .overview-question input,
#korean-model-quiz-main .overview-question input,
  #pe-model-quiz-main .overview-question input,
  #spelling-quiz-main .overview-question input,
  #geometry-quiz-main .overview-question input,
  #social-34-quiz-main .overview-question input,
  #social-56-quiz-main .overview-question input,
#life-achievement-quiz-main .overview-question input,
#wise-achievement-quiz-main .overview-question input,
#joy-achievement-quiz-main .overview-question input,
  #korean-std-quiz-main .overview-question input,
  #music-std-quiz-main .overview-question input,
  #social-quiz-main .overview-question input,
  #science-quiz-main .overview-question input,
#integrated-guide-overview .overview-question input {
  font-size: 1.9rem;
  padding: 0.6rem 1rem;
  margin: 0 0.6rem;
  border: 2px solid var(--secondary);
  border-radius: 8px;
  background: var(--bg-light);
  color: var(--text-light);
  text-align: center;
  width: auto;
  min-width: 10ch !important; /* 기본 최소 너비를 적절하게 조정 */
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  resize: horizontal;
  overflow: hidden;
}

/* 요쇼 섹션 입력 너비 고정 (충분히 넓게) */
#integrated-guide-overview #basic-movement .overview-question input,
#integrated-guide-overview #safety-elements .overview-question input {
  width: 26ch !important;
  min-width: 26ch !important;
}

/* 요쇼(legacy) 섹션만 고정 너비 적용 */
#integrated-guide-overview #yosho .overview-question input {
  width: 26ch !important;
  min-width: 26ch !important;
}


/* 맞춤법 빈칸 섹션 - 우선순위를 높여서 적용 */
#spelling-blank .overview-question input {
  min-width: 4ch !important; /* 최소 너비 축소 */
  width: auto !important;
  max-width: 10ch !important; /* 최대 너비 축소 */
}

#social-course-quiz-main .overview-question input {
  min-width: 5ch;
}



/* ?�과 모형: ?�라??빈칸�?카드 ?�기 축소 (총론 ?��? */
#practical-quiz-main .overview-question {
  padding: 1.6rem; /* 카드 ?�딩 축소 */
  font-size: 1.7rem; /* 문장 ?�트 축소 */
  line-height: 2; /* �?간격 ?�간 축소 */
}
#practical-quiz-main .overview-question input {
  font-size: 1.6rem; /* ?�풋 ?�트 축소 */
  padding: 0.4rem 0.7rem; /* ?�풋 ?�딩 축소 */
  min-width: 5ch; /* ?�짝 ?�유 */
  margin: 0 0.4rem; /* 좌우 마진 축소 */
}

/* 기술??문제?�결과정 ?��? ?�용: 2???�이?�웃 */
#practical-quiz-main #technical-problem-solving-detail td {
  display: grid;
  grid-template-columns: repeat(2, minmax(300px, 1fr));
  gap: 1rem 1.5rem;
}
@media (max-width: 768px) {
  #practical-quiz-main #technical-problem-solving-detail td {
    grid-template-columns: 1fr; /* 모바??1??*/
  }
}

/* 문장????��??줄바꿈과 밀??개선 */
#practical-quiz-main #technical-problem-solving-detail .overview-question {
  display: inline-flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
  margin: 0; /* td gap ?�용 */
}

/* 짧�?/중간 길이 ?�풋 ??축소 ?�션 */
#practical-quiz-main #technical-problem-solving-detail .overview-question input.fit-sm {
  width: auto;
  min-width: 5ch;
}
#practical-quiz-main #technical-problem-solving-detail .overview-question input.fit-md {
  width: auto;
  min-width: 10ch;
}

@media (max-width: 768px) {
  #practical-quiz-main .overview-question {
    padding: 1.2rem; /* 모바?�에????컴팩??*/
    font-size: 1.55rem;
    line-height: 1.9;
  }
  #practical-quiz-main .overview-question input {
    font-size: 1.45rem;
    padding: 0.35rem 0.6rem;
    min-width: 4ch; /* 모바?�도 ?�간 ?�유 */
    margin: 0 0.35rem;
  }
}

#creative-quiz-main .creative-question input:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--bg-light); /* ?�커???�에???�마 배경???��? */
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2), inset 0 1px 3px rgba(0, 0, 0, 0.1); /* ?��? 글로우 ?�과 */
  transform: translateY(-1px); /* 미세???�승 ?�과 */
}
#overview-quiz-main .overview-question input:focus,
#eastern-ethics-quiz-main .overview-question input:focus,
#western-ethics-quiz-main .overview-question input:focus,
#moral-psychology-quiz-main .overview-question input:focus,
#integrated-course-quiz-main .overview-question input:focus,
#social-course-quiz-main .overview-question input:focus,
#moral-course-quiz-main .overview-question input:focus,
#science-course-quiz-main .overview-question input:focus,
#korean-course-quiz-main .overview-question input:focus,
#english-course-quiz-main .overview-question input:focus,
#practical-course-quiz-main .overview-question input:focus,
#music-course-quiz-main .overview-question input:focus,
#pe-course-quiz-main .overview-question input:focus,
#art-course-quiz-main .overview-question input:focus,
#science-std-quiz-main .overview-question input:focus,
#english-std-quiz-main .overview-question input:focus,
#practical-std-quiz-main .overview-question input:focus,
#practical-std-quiz-main #info-education .overview-question input:focus,
#integrated-guide-overview .overview-question input:focus,
#art-std-quiz-main .overview-question input:focus,
#math-operation-quiz-main .overview-question input:focus,
#change-relation-quiz-main .overview-question input:focus,
#geometry-measure-quiz-main .overview-question input:focus,
#data-probability-quiz-main .overview-question input:focus,
#practical-quiz-main .overview-question input:focus,
#math-course-quiz-main .overview-question input:focus,
#korean-model-quiz-main .overview-question input:focus,
  #pe-model-quiz-main .overview-question input:focus,
  #spelling-quiz-main .overview-question input:focus,
  #social-34-quiz-main .overview-question input:focus,
  #social-56-quiz-main .overview-question input:focus,
#life-achievement-quiz-main .overview-question input:focus,
#wise-achievement-quiz-main .overview-question input:focus,
#joy-achievement-quiz-main .overview-question input:focus,
#korean-std-quiz-main .overview-question input:focus,
#music-std-quiz-main .overview-question input:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--bg-light); /* ?�커???�에???�마 배경???��? */
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2), inset 0 1px 3px rgba(0, 0, 0, 0.1); /* ?��? 글로우 ?�과 */
  transform: translateY(-1px); /* 미세???�승 ?�과 */
}

#creative-quiz-main .creative-question input.correct {
  border-color: var(--correct);
  color: var(--correct);
  background: rgba(46, 204, 113, 0.1); /* ?�공 배경??*/
  box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.2);
}
#overview-quiz-main .overview-question input.correct,
#eastern-ethics-quiz-main .overview-question input.correct,
#western-ethics-quiz-main .overview-question input.correct,
#moral-psychology-quiz-main .overview-question input.correct,
#integrated-course-quiz-main .overview-question input.correct,
#social-course-quiz-main .overview-question input.correct,
#moral-course-quiz-main .overview-question input.correct,
#science-course-quiz-main .overview-question input.correct,
#korean-course-quiz-main .overview-question input.correct,
#english-course-quiz-main .overview-question input.correct,
#practical-course-quiz-main .overview-question input.correct,
#music-course-quiz-main .overview-question input.correct,
#art-course-quiz-main .overview-question input.correct,
#science-std-quiz-main .overview-question input.correct,
#english-std-quiz-main .overview-question input.correct,
#practical-std-quiz-main .overview-question input.correct,
#practical-std-quiz-main #info-education .overview-question input.correct,
#art-std-quiz-main .overview-question input.correct,
#math-operation-quiz-main .overview-question input.correct,
#change-relation-quiz-main .overview-question input.correct,
#geometry-measure-quiz-main .overview-question input.correct,
#data-probability-quiz-main .overview-question input.correct,
#practical-quiz-main .overview-question input.correct,
#math-course-quiz-main .overview-question input.correct,
#korean-model-quiz-main .overview-question input.correct,
  #pe-model-quiz-main .overview-question input.correct,
  #social-34-quiz-main .overview-question input.correct,
  #social-56-quiz-main .overview-question input.correct,
#life-achievement-quiz-main .overview-question input.correct,
#wise-achievement-quiz-main .overview-question input.correct,
#joy-achievement-quiz-main .overview-question input.correct,
#korean-std-quiz-main .overview-question input.correct,
#music-std-quiz-main .overview-question input.correct,
#spelling-quiz-main .overview-question input.correct {
  border-color: var(--correct);
  color: var(--correct);
  background: rgba(46, 204, 113, 0.1); /* ?�공 배경??*/
  box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.2);
}

#creative-quiz-main .creative-question input.incorrect {
  border-color: var(--incorrect);
  color: var(--incorrect);
  background: rgba(231, 76, 60, 0.1); /* ?�답 배경??*/
  box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.2);
}
#overview-quiz-main .overview-question input.incorrect,
#eastern-ethics-quiz-main .overview-question input.incorrect,
#western-ethics-quiz-main .overview-question input.incorrect,
#moral-psychology-quiz-main .overview-question input.incorrect,
#integrated-course-quiz-main .overview-question input.incorrect,
#social-course-quiz-main .overview-question input.incorrect,
#moral-course-quiz-main .overview-question input.incorrect,
#science-course-quiz-main .overview-question input.incorrect,
#korean-course-quiz-main .overview-question input.incorrect,
#english-course-quiz-main .overview-question input.incorrect,
#practical-course-quiz-main .overview-question input.incorrect,
#music-course-quiz-main .overview-question input.incorrect,
#art-course-quiz-main .overview-question input.incorrect,
#science-std-quiz-main .overview-question input.incorrect,
#english-std-quiz-main .overview-question input.incorrect,
#practical-std-quiz-main .overview-question input.incorrect,
#practical-std-quiz-main #info-education .overview-question input.incorrect,
#art-std-quiz-main .overview-question input.incorrect,
#math-operation-quiz-main .overview-question input.incorrect,
#change-relation-quiz-main .overview-question input.incorrect,
#geometry-measure-quiz-main .overview-question input.incorrect,
#data-probability-quiz-main .overview-question input.incorrect,
#practical-quiz-main .overview-question input.incorrect,
#math-course-quiz-main .overview-question input.incorrect,
#korean-model-quiz-main .overview-question input.incorrect,
#social-34-quiz-main .overview-question input.incorrect,
#social-56-quiz-main .overview-question input.incorrect,
#life-achievement-quiz-main .overview-question input.incorrect,
#wise-achievement-quiz-main .overview-question input.incorrect,
#joy-achievement-quiz-main .overview-question input.incorrect,
#korean-std-quiz-main .overview-question input.incorrect,
#music-std-quiz-main .overview-question input.incorrect,
#pe-model-quiz-main .overview-question input.incorrect,
#spelling-quiz-main .overview-question input.incorrect {
  border-color: var(--incorrect);
  color: var(--incorrect);
  background: rgba(231, 76, 60, 0.1); /* ?�답 배경??*/
  box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.2);
}

#creative-quiz-main .creative-question input.retrying {
  border-color: var(--retrying);
  color: var(--retrying);
  background: rgba(243, 156, 18, 0.1); /* ?�시??배경??*/
  box-shadow: 0 0 0 2px rgba(243, 156, 18, 0.2);
}
#overview-quiz-main .overview-question input.retrying,
#integrated-course-quiz-main .overview-question input.retrying,
#social-course-quiz-main .overview-question input.retrying,
#moral-course-quiz-main .overview-question input.retrying,
#science-course-quiz-main .overview-question input.retrying,
#korean-course-quiz-main .overview-question input.retrying,
#english-course-quiz-main .overview-question input.retrying,
#practical-course-quiz-main .overview-question input.retrying,
#music-course-quiz-main .overview-question input.retrying,
#art-course-quiz-main .overview-question input.retrying,
#science-std-quiz-main .overview-question input.retrying,
#art-std-quiz-main .overview-question input.retrying,
#english-std-quiz-main .overview-question input.retrying,
#practical-std-quiz-main .overview-question input.retrying,
#practical-std-quiz-main #info-education .overview-question input.retrying,
#math-operation-quiz-main .overview-question input.retrying,
#change-relation-quiz-main .overview-question input.retrying,
#geometry-measure-quiz-main .overview-question input.retrying,
#data-probability-quiz-main .overview-question input.retrying,
#practical-quiz-main .overview-question input.retrying,
#math-course-quiz-main .overview-question input.retrying,
#korean-model-quiz-main .overview-question input.retrying,
#social-34-quiz-main .overview-question input.retrying,
#social-56-quiz-main .overview-question input.retrying,
#life-achievement-quiz-main .overview-question input.retrying,
#wise-achievement-quiz-main .overview-question input.retrying,
#joy-achievement-quiz-main .overview-question input.retrying,
#korean-std-quiz-main .overview-question input.retrying,
#music-std-quiz-main .overview-question input.retrying,
#pe-model-quiz-main .overview-question input.retrying,
#spelling-quiz-main .overview-question input.retrying {
  border-color: var(--retrying);
  color: var(--retrying);
}

#creative-quiz-main .creative-question input.revealed {
  color: var(--revealed);
  border-color: var(--revealed);
  background: rgba(142, 68, 173, 0.1); /* ?�답 공개 배경??*/
  box-shadow: 0 0 0 2px rgba(142, 68, 173, 0.2);
}
#overview-quiz-main .overview-question input.revealed,
#eastern-ethics-quiz-main .overview-question input.revealed,
#western-ethics-quiz-main .overview-question input.revealed,
#moral-psychology-quiz-main .overview-question input.revealed,
#integrated-course-quiz-main .overview-question input.revealed,
#social-course-quiz-main .overview-question input.revealed,
#moral-course-quiz-main .overview-question input.revealed,
#science-course-quiz-main .overview-question input.revealed,
#korean-course-quiz-main .overview-question input.revealed,
#english-course-quiz-main .overview-question input.revealed,
#practical-course-quiz-main .overview-question input.revealed,
#music-course-quiz-main .overview-question input.revealed,
#art-course-quiz-main .overview-question input.revealed,
#science-std-quiz-main .overview-question input.revealed,
#english-std-quiz-main .overview-question input.revealed,
#practical-std-quiz-main .overview-question input.revealed,
#practical-std-quiz-main #info-education .overview-question input.revealed,
#math-operation-quiz-main .overview-question input.revealed,
#change-relation-quiz-main .overview-question input.revealed,
#geometry-measure-quiz-main .overview-question input.revealed,
#data-probability-quiz-main .overview-question input.revealed,
#practical-quiz-main .overview-question input.revealed,
#math-course-quiz-main .overview-question input.revealed,
#korean-model-quiz-main .overview-question input.revealed,
  #pe-model-quiz-main .overview-question input.revealed,
  #spelling-quiz-main .overview-question input.revealed,
  #geometry-quiz-main .overview-question input.revealed,
  #social-34-quiz-main .overview-question input.revealed,
  #social-56-quiz-main .overview-question input.revealed,
#life-achievement-quiz-main .overview-question input.revealed,
#wise-achievement-quiz-main .overview-question input.revealed,
#joy-achievement-quiz-main .overview-question input.revealed,
  #korean-std-quiz-main .overview-question input.revealed,
  #music-std-quiz-main .overview-question input.revealed {
  color: var(--revealed);
  border-color: var(--revealed);
  background: rgba(142, 68, 173, 0.1); /* 정답 공개 배경 */
  box-shadow: 0 0 0 2px rgba(142, 68, 173, 0.2);
}




#moral .moral-wrapper {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

#moral .moral-block {
  flex: 1;
  min-width: 260px;
}

#moral .moral-block h3 {
  margin: 0 0 1rem;
}

#moral .grade-container > div {
  padding: 1rem;
}

/* Art Basic (미술 기본?�론) readability + input width normalization */
#art-basic-quiz-main .tabs {
  margin-bottom: 1.6rem;
}

#art-basic-quiz-main h2 {
  margin: 1.2rem 0 2rem;
  padding: 1.2rem;
}

#art-basic-quiz-main .grade-container > div {
  padding: 1.2rem;
}

#art-basic-quiz-main table {
  border-spacing: 0 0.8rem;
}

#art-basic-quiz-main td {
  gap: 0.6rem;
}
#art-basic-quiz-main td input {
  width: auto; /* prevent 100% width inside Art Basic */
}

#art-basic-quiz-main .assessment-list,
#art-basic-quiz-main .sub-list {
  list-style: none;
  margin-left: 0;
  gap: 0.6rem;
}

#art-basic-quiz-main .inline-item {
  gap: 0.4rem;
  flex-wrap: nowrap;
}

/* 창체 ?�역�??�동 ?�션???�력 ?�드 최적??*/
/* 2�??�벨: 중간 카테고리 ?�력 ?�드 */
#creative-quiz-main .assessment-list > li > ul > li > input.fit-answer:first-child {
  width: 140px !important;
  min-width: 140px !important;
  max-width: 140px !important;
  padding: 0.6rem 1rem;
  margin: 0.3rem 0;
  font-size: 1.5rem;
  font-weight: 600;
  border: 2px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: var(--text-light);
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
}

/* 3�??�벨: ?��? ??�� ?�력 ?�드 */
#creative-quiz-main .assessment-list input.fit-answer {
  width: auto !important;
  min-width: 80px !important;
  max-width: 120px !important;
  padding: 0.4rem 0.6rem;
  margin: 0.2rem 0.3rem;
  font-size: 1.3rem;
  border: 1px solid var(--text-dark);
  border-radius: 4px;
  background: var(--secondary);
  color: var(--text-light);
  text-align: center;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

#creative-quiz-main .assessment-list input.fit-answer:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2), inset 0 1px 2px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

/* Unify blanks width across Art Basic; override scattered inline min-widths */
#art-basic-quiz-main .inline-item input.fit-answer {
  width: 12ch !important;
  min-width: 12ch !important;
  max-width: 100%;
  text-align: center;
}

/* Apply same width even when input is not wrapped by .inline-item */
#art-basic-quiz-main input.fit-answer {
  width: 12ch !important;
  min-width: 12ch !important;
  max-width: 100%;
  text-align: center;
}

#art-basic-quiz-main .sub-list .inline-item input.fit-answer {
  width: 12ch !important;
  min-width: 12ch !important;
}

/* 창체 ?�역�??�동 ?�션???�열 카드 ?�이?�웃 */
#creative-quiz-main .assessment-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3�??�역???�일??비율�?*/
  gap: 1.5rem;
  margin: 2rem 0;
  align-items: start; /* ?�이가 ?��? ???�단 ?�렬 */
}

#creative-quiz-main .assessment-list > li {
  background: var(--bg-light);
  border: 1px solid var(--secondary);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
  position: relative;
}

#creative-quiz-main .assessment-list > li:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  border-color: var(--primary);
}

#creative-quiz-main .assessment-list > li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--primary);
  border-radius: 8px 8px 0 0;
}

#creative-quiz-main .assessment-list > li > input.fit-answer:first-child {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text-light);
  background: var(--primary);
  border: 2px solid var(--primary);
  border-radius: 8px;
  margin-bottom: 1.5rem;
  width: 100%;
  max-width: none;
  padding: 1rem 1.2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  min-width: 250px;
}

/* 창체 ?�위 목록 ?��???*/
#creative-quiz-main .sub-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1rem 0 0.5rem 0;
  list-style: none;
  align-items: start;
}

/* 중간 카테고리 ?�목 (?�율?�동, ?�치?�동) - 별도 배경 */
#creative-quiz-main .assessment-list > li > ul > li > input.fit-answer:first-child {
  background: var(--accent);
  color: var(--text-light);
  font-weight: 600;
  font-size: 1.5rem;
  border: 2px solid var(--accent);
  border-radius: 6px;
  padding: 0.8rem 1rem;
  margin-bottom: 1.5rem;
  width: 100%;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* ?��? ??��?�의 그룹 배경 (주제?�구, ?�응?�동, 봉사?�동???�께) */
#creative-quiz-main .assessment-list > li > ul > li > ul.sub-list {
  background: var(--bg-dark);
  border: 1px solid var(--secondary);
  border-radius: 6px;
  padding: 1.5rem;
  margin: 0;
  transition: all 0.2s ease;
}

#creative-quiz-main .assessment-list > li > ul > li > ul.sub-list:hover {
  background: var(--bg-light);
  border-color: var(--primary);
  box-shadow: 0 2px 6px rgba(233, 69, 96, 0.2);
}

/* ?�위 카테고리 그룹 (?�율?�동, ?�치?�동 ?�체 그룹) */
#creative-quiz-main .assessment-list > li > ul > li {
  background: transparent; /* ?�위 그룹?� 배경 ?�음 */
  border: none;
  padding: 0;
  margin-bottom: 2rem; /* ?�율?�동�??�치?�동 ?�이 간격 */
}

/* ?��? ??��?�의 컨테?�너 */
#creative-quiz-main .sub-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin: 0;
  list-style: none;
  align-items: start;
}

/* ?��? ??��??(주제?�구?�동, ?�응?�동 ?? - 개별 배경 ?�거 */
#creative-quiz-main .sub-list .inline-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: transparent; /* 배경 ?�거 */
  border: none; /* ?�두�??�거 */
  border-radius: 0;
  padding: 0.5rem;
  min-height: auto;
  height: auto;
  transition: all 0.2s ease;
  justify-content: flex-start;
}

/* 개별 ??�� ?�버 ?�과 ?�거 - 그룹 ?�위로만 ?�버 */

#creative-quiz-main .sub-list .inline-item input.fit-answer {
  width: 100% !important;
  min-width: 80px !important;
  max-width: 100% !important;
  margin: 0.2rem 0;
  font-size: 1.2rem;
  border: 1px solid var(--secondary);
  border-radius: 4px;
  padding: 0.6rem 0.8rem;
  background: var(--bg-light);
  color: var(--text-light);
  transition: all 0.2s ease;
  text-align: center;
  flex-shrink: 0;
}

#creative-quiz-main .sub-list .inline-item input.fit-answer:focus {
  border-color: var(--primary);
  background: var(--bg-light);
  box-shadow: 0 0 0 2px rgba(233, 69, 96, 0.3);
  outline: none;
}

/* ?�시 ?�스???��???*/
#creative-quiz-main .example-text {
  font-size: 1.2rem;
  color: var(--text-dark);
  font-style: italic;
  margin-top: 0.3rem;
  display: block;
  opacity: 0.7;
}

#creative-quiz-main .example-text input.fit-answer {
  display: inline-block;
  width: auto !important;
  min-width: 80px !important;
  max-width: 120px !important;
  margin: 0 0.3rem;
  font-size: 1.1rem;
  font-style: normal;
  background: var(--bg-dark);
  border: 1px solid var(--text-dark);
  color: var(--text-dark);
  padding: 0.3rem 0.5rem;
  opacity: 0.8;
}

/* Multi-column card layout for Art Basic lists */
#art-basic-quiz-main .assessment-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
}

#art-basic-quiz-main .assessment-list > li {
  background: var(--bg-light);
  border: 2px solid var(--secondary);
  border-radius: 10px;
  padding: 1rem 1.2rem;
}

#art-basic-quiz-main .sub-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20ch, 1fr));
  gap: 0.6rem 1rem;
  margin-left: 0;
}

#art-basic-quiz-main .sub-list .inline-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
/* Integrated Model combined section layout */
#integrated-model-quiz-main #integrated-all td {
  display: grid;
  grid-template-columns: repeat(2, minmax(12ch, 1fr));
  gap: 0.6rem 1rem; /* row-gap, col-gap */
  align-items: start;
}
#integrated-model-quiz-main #integrated-all td input {
  width: 100%;
}

/* CRITICAL: Sub-area input color override - HIGHEST SPECIFICITY */
[id*="quiz-main"] th.sub-area-cell input.sub-area-input.correct,
[id*="quiz-main"] input.sub-area-input.correct {
  border-color: #39ff14 !important;
  color: #39ff14 !important;
  background-color: rgba(57, 255, 20, 0.25) !important;
  text-shadow: 0 0 4px rgba(57, 255, 20, 0.5) !important;
}

[id*="quiz-main"] th.sub-area-cell input.sub-area-input.incorrect,
[id*="quiz-main"] input.sub-area-input.incorrect {
  border-color: #ff5733 !important;
  color: #ff5733 !important;
  background-color: rgba(255, 87, 51, 0.25) !important;
  text-shadow: 0 0 4px rgba(255, 87, 51, 0.5) !important;
}

[id*="quiz-main"] th.sub-area-cell input.sub-area-input.retrying,
[id*="quiz-main"] input.sub-area-input.retrying {
  border-color: #ffc300 !important;
  color: #ffc300 !important;
  background-color: rgba(255, 195, 0, 0.25) !important;
  text-shadow: 0 0 4px rgba(255, 195, 0, 0.5) !important;
}

[id*="quiz-main"] th.sub-area-cell input.sub-area-input.revealed,
[id*="quiz-main"] input.sub-area-input.revealed {
  border-color: #00ffff !important;
  color: #00ffff !important;
  background-color: rgba(142, 68, 173, 0.1) !important;
  text-shadow: 0 0 4px rgba(142, 68, 173, 0.3) !important;
}

/* Mini reveal button (2nd wrong attempt) */
.reveal-wrapper {
  position: relative;
  display: inline-block;
}
.mini-reveal-btn {
  position: absolute;
  right: 2px;
  bottom: 2px;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--secondary);
  background: var(--bg-light);
  color: var(--text-dark);
  border-radius: 4px;
  cursor: pointer;
  display: none; /* 기본 ?��? */
  z-index: 2;
}
.reveal-wrapper > input.incorrect + .mini-reveal-btn {
  display: inline-block; /* 2�??�답(빨간 ?�두�????�만 ?�출 */
}
.mini-reveal-btn:hover {
  background: var(--secondary);
  color: var(--text-light);
}

/* Practical model title modal removed */

/* ?�블�?반응??(768px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
  #creative-quiz-main .assessment-list {
    grid-template-columns: repeat(2, 1fr); /* ?�블릿에??2??*/
    gap: 1.5rem;
  }
  
  #creative-quiz-main .sub-list {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.8rem;
  }
}

@media (max-width: 520px) {
  #integrated-model-quiz-main #integrated-all td {
    grid-template-columns: 1fr; /* ?��? ?�면?�서??1??*/
  }
  
  /* Math Operation & Change Relation 모바일 최적화 */
  #math-operation-quiz-main .tabs,
  #change-relation-quiz-main .tabs,
  #geometry-measure-quiz-main .tabs,
  #data-probability-quiz-main .tabs {
    flex-direction: column;
    gap: 0.5rem;
  }

  #math-operation-quiz-main .tab,
  #change-relation-quiz-main .tab,
  #geometry-measure-quiz-main .tab,
  #data-probability-quiz-main .tab {
    padding: 0.6rem 1rem;
    font-size: 1.4rem;
  }
}

/* Model: 단계명 vs 세부 단계 테두리 스타일 구분 */
input[placeholder="단계명"] {
  border-width: 2px;
  border-style: solid;
}
input[placeholder="세부 단계"] {
  border-width: 1px;
  border-style: dashed;
}

/* Moral: 가치 분석 수업모형 '검사이름/검사 이름'도 세부 단계처럼 점선 표기 */
#moral-course-quiz-main input[placeholder="검사이름"],
#moral-course-quiz-main input[placeholder="검사 이름"] {
  border-width: 1px !important;
  border-style: dashed !important;
}

/* Moral: 세부 단계가 테마 기본 테두리에 덮이지 않도록 우선순위 보강 */
#moral-course-quiz-main input[placeholder="세부 단계"] {
  border-width: 1px !important;
  border-style: dashed !important;
}

/* Moral: '검사'를 포함한 placeholder(검사 이름 등) 점선 처리 */
#moral-course-quiz-main input[placeholder*="검사"] {
  border-width: 1px !important;
  border-style: dashed !important;
}

/* Practical(실과): 기술적 문제해결 과정의 하위 단계 점선 처리 */
#practical-quiz-main #technical-problem-solving input.sub-step,
#practical-quiz-main #technical-problem-solving input[placeholder="하위 단계"],
#practical-quiz-main #technical-problem-solving ul.sub-list .inline-item input[placeholder="활동"] {
  border-width: 1px !important;
  border-style: dashed !important;
}

/* Practical: 기술??문제?�결 과정 ?�위 ?�계 �?리스???�이?�웃 */
#practical-quiz-main #technical-problem-solving .sub-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.6rem;
  margin: 0.6rem 0 1rem 0;
  list-style: none;
}
#practical-quiz-main #technical-problem-solving .sub-list .inline-item input.fit-answer {
  width: auto;
  min-width: 120px;
  max-width: 100%;
}

/* Math Operation, Change Relation & Geometry Measure: 과목 탭 스타일 */
#math-operation-quiz-main .tabs,
#change-relation-quiz-main .tabs,
#geometry-measure-quiz-main .tabs,
#data-probability-quiz-main .tabs {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--secondary);
  padding-bottom: 1rem;
}

#math-operation-quiz-main .tab,
#change-relation-quiz-main .tab,
#geometry-measure-quiz-main .tab,
#data-probability-quiz-main .tab {
  padding: 0.8rem 1.5rem;
  background: var(--bg-light);
  border: 2px solid var(--secondary);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
  color: var(--text-dark);
}

  #math-operation-quiz-main .tab:hover,
  #change-relation-quiz-main .tab:hover,
  #geometry-measure-quiz-main .tab:hover,
  #data-probability-quiz-main .tab:hover {
  background: var(--secondary);
  color: var(--text-light);
  transform: translateY(-2px);
}

  #math-operation-quiz-main .tab.active,
  #change-relation-quiz-main .tab.active,
  #geometry-measure-quiz-main .tab.active,
  #data-probability-quiz-main .tab.active {
  background: var(--primary);
  color: var(--text-light);
  border-color: var(--primary);
  box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
}

/* Global fallback: '검사 이름' 류 필드가 어느 섹션이든 점선 유지 */
input[placeholder="검사 이름"],
input[placeholder="검사이름"],
input[placeholder*="검사 "],
input[placeholder*="검사" i] {
  border-width: 1px !important;
  border-style: dashed !important;
}

/* Typing particles (정답/오답 무음 파티클) */
.typing-particle {
  position: fixed;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: typing-pop 450ms ease-out forwards;
  z-index: 9999;
}

@keyframes typing-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.9) translate(0, 0); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1) translate(var(--tx), var(--ty)); }
}

/* Mini confetti (콤보 보상) */
.confetti-piece {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: confetti-pop 600ms ease-out forwards;
  z-index: 9999;
}

@keyframes confetti-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) rotate(0); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) rotate(var(--dr)); }
}

/* 모바일에서 파티클 효과 비활성화 */
@media (max-width: 768px) {
  .typing-particle,
  .confetti-piece {
    display: none !important;
  }
}

/* 배터리 절약 모드나 저성능 기기에서 파티클 비활성화 */
@media (prefers-reduced-motion: reduce) {
  .typing-particle,
  .confetti-piece {
    display: none !important;
  }
}

/* ------------------------------------------------------------
   Mobile responsive baseline enhancements
   - Fluid media elements
   - Prevent iOS Safari input zoom (font-size >= 16px)
   - Ensure comfortable touch targets for buttons/tabs
------------------------------------------------------------ */
img, video, canvas, svg {
  max-width: 100%;
  height: auto;
}
iframe {
  max-width: 100%;
}

/* iOS Safari: prevent auto-zoom on focus when font-size < 16px */
@supports (-webkit-touch-callout: none) {
  input, select, textarea, button {
    font-size: 16px;
  }
}

/* 달크로즈 섹션 전용 스타일 - 2열 배치 및 긴 답안들을 위한 레이아웃 최적화 */
#dalcroze .grade-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  width: 100%;
}

#dalcroze .grade-container > div {
  min-width: 0; /* Grid에서 자동 크기 조정을 위해 */
  width: 100%;
}

#dalcroze .assessment-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  width: 100%;
}

#dalcroze .inline-item {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 0.5rem;
}

#dalcroze input.fit-answer {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0.6rem 1rem;
  font-size: 1.2rem;
  line-height: 1.4;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 특별히 긴 답안들을 위한 스타일 */
#dalcroze input.fit-answer[data-answer*="음악적 리듬을 몸동작으로 표현하는"],
#dalcroze input.fit-answer[data-answer*="내청능력(악보를 읽고 음 떠올리는 능력)"],
#dalcroze input.fit-answer[data-answer*="유리드 믹스, 솔페즈에서의"] {
  font-size: 1.1rem;
  padding: 0.8rem 1rem;
  height: auto;
  min-height: 2.5rem;
}

/* 달크로즈 섹션의 테이블 레이아웃 개선 */
#dalcroze table {
  width: 100%;
  table-layout: fixed;
}

#dalcroze td {
  padding: 0.5rem;
  vertical-align: top;
  width: 100%;
}

/* 실천적 문제 중심 학습 섹션의 빈칸 너비 조정 - 답안 길이에 비례 */
#practical-quiz-main .overview-question input[data-answer] {
  width: auto !important;
  min-width: max(8ch, calc(var(--answer-length, 10) * 1.2ch + 2rem)) !important;
  max-width: 25ch !important;
}

/* 특정 답안들에 대한 개별 너비 조정 */
#practical-quiz-main .overview-question input[data-answer="개인"],
#practical-quiz-main .overview-question input[data-answer="타인"],
#practical-quiz-main .overview-question input[data-answer="사회"] {
  width: auto !important;
  min-width: 6ch !important;
  max-width: 8ch !important;
}

#practical-quiz-main .overview-question input[data-answer="가치판단"] {
  width: auto !important;
  min-width: 8ch !important;
  max-width: 12ch !important;
}

#practical-quiz-main .overview-question input[data-answer="실천적 추론"] {
  width: auto !important;
  min-width: 12ch !important;
  max-width: 18ch !important;
}

#practical-quiz-main .overview-question input[data-answer="실천적 문제해결"] {
  width: auto !important;
  min-width: 14ch !important;
  max-width: 20ch !important;
}

/* 기술적 문제해결 과정 섹션의 빈칸 너비 조정 - 답안 길이에 비례 */
#practical-quiz-main .overview-question input[data-answer="불편함"],
#practical-quiz-main .overview-question input[data-answer="결점"],
#practical-quiz-main .overview-question input[data-answer="개선"] {
  width: auto !important;
  min-width: 6ch !important;
  max-width: 8ch !important;
}

#practical-quiz-main .overview-question input[data-answer="발명"] {
  width: auto !important;
  min-width: 6ch !important;
  max-width: 8ch !important;
}

#practical-quiz-main .overview-question input[data-answer="기술적 문제해결 능력"] {
  width: auto !important;
  min-width: 16ch !important;
  max-width: 22ch !important;
}

@media (max-width: 768px) {
  /* Guarantee minimum tap target height */
  .btn, .tab {
    min-height: 44px;
  }
  /* Keep controls readable without triggering zoom */
  input, select, textarea, button {
    font-size: 16px;
  }
  
  /* 맞춤법 이지선다 모바일 최적화 */
  #spelling-quiz-main h2 {
    font-size: 2.2rem !important;
    margin-bottom: var(--space-lg) !important;
    letter-spacing: 0.1rem !important;
    padding: 0 var(--space-md) !important;
    text-align: center !important;
  }
  
  .spelling-question {
    font-size: 1.6rem !important;
    line-height: 1.8 !important;
    padding: 2.5rem 1.5rem !important;
    margin-bottom: 2rem !important;
    min-height: 150px !important;
  }
  
  .spelling-question-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: var(--space-lg) !important;
    padding: var(--space-md) !important;
    font-size: 1.6rem !important;
    line-height: 1.7 !important;
  }
  
  .spelling-choice-btn {
    margin: var(--space-xs) var(--space-xs) !important;
    padding: var(--space-lg) var(--space-md) !important;
    font-size: 1.5rem !important;
    min-width: 12rem !important;
    min-height: 5rem !important;
    line-height: 1.3 !important;
    flex: 1 !important;
    max-width: calc(50% - var(--space-sm)) !important;
    
    /* 모바일 터치 개선 */
    -webkit-tap-highlight-color: transparent !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    touch-action: manipulation !important;
    
    /* 터치 반응성 개선 */
    transition: all 0.2s ease !important;
  }
  
  .spelling-choice-btn:active {
    transform: translateY(-1px) scale(0.98) !important;
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
  }
  
  .spelling-choice-btn:hover {
    transform: none !important; /* 모바일에서는 호버 효과 비활성화 */
  }
  
  /* 데이터셋 선택 화면 모바일 최적화 */
  .dataset-selection h3 {
    font-size: 2rem !important;
    margin-bottom: var(--space-lg) !important;
    text-align: center !important;
    padding: 0 var(--space-md) !important;
  }
  
  .dataset-options {
    gap: var(--space-md) !important;
  }
  
  .dataset-btn {
    padding: var(--space-lg) var(--space-md) !important;
    min-height: 7rem !important;
    touch-action: manipulation !important;
  }
  
  .dataset-title {
    font-size: 1.8rem !important;
  }
  
  .dataset-description {
    font-size: 1.4rem !important;
  }
  
  /* 맞춤법 진행도 모바일 최적화 */
  #spelling-progress-container {
    padding: var(--space-md) !important;
    margin-bottom: var(--space-lg) !important;
  }

  #spelling-progress-text {
    font-size: 1.4rem !important;
    margin-bottom: var(--space-sm) !important;
    text-align: center !important;
  }

  #spelling-progress-bar {
    height: 1rem !important;
    border-radius: 0.5rem !important;
  }
  
  /* 뒤로가기 버튼 모바일 최적화 */
  #spelling-back-btn {
    margin-top: var(--space-lg) !important;
    padding: var(--space-md) var(--space-lg) !important;
    font-size: 1.4rem !important;
    min-height: 5rem !important;
    touch-action: manipulation !important;
  }
  
  /* 달크로즈 모바일 반응형 */
  #dalcroze .grade-container {
    grid-template-columns: 1fr; /* 모바일에서는 1열 배치 */
    gap: 1.5rem;
  }
  
  #dalcroze input.fit-answer {
    font-size: 1.1rem;
    padding: 0.5rem 0.8rem;
  }
  
  #dalcroze input.fit-answer[data-answer*="음악적 리듬을 몸동작으로 표현하는"],
  #dalcroze input.fit-answer[data-answer*="내청능력(악보를 읽고 음 떠올리는 능력)"],
  #dalcroze input.fit-answer[data-answer*="유리드 믹스, 솔페즈에서의"] {
    font-size: 1rem;
    padding: 0.6rem 0.8rem;
  }
}

/* 맞춤법 빈칸 섹션 강제 적용 - 파일 끝에서 최고 우선순위 */
section#spelling-blank .overview-question input[data-answer] {
  min-width: 6ch !important;
  width: auto !important;
  /* max-width: 12ch !important; */ /* 최대 너비 제한 해제 */
}

/* 도형 과목 outline-title - 기본 스타일 (# 없는 경우만) */
#geometry-quiz-main .outline-title:not([data-is-topic="true"]) {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--primary);
}

/* # 파트별 시각적 구분 - 기존 사이트 스타일과 조화 */
#geometry-quiz-main .creative-block {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
}

/* # 기호로 시작하는 주요 섹션 강조 - 붉은색 강제 적용 */
#geometry-quiz-main .creative-block .outline-title[data-is-topic="true"],
#geometry-quiz-main .outline-title[data-is-topic="true"] {
  font-size: 2.6rem !important;
  color: #ff5555 !important;
  margin: 2rem 0 1.5rem 0 !important;
  position: relative;
  font-weight: 700 !important;
}

/* # 문자로 시작하는 모든 outline-title (백업 선택자) */
#geometry-quiz-main .outline-title:is([data-is-topic="true"], :where([data-is-topic]:not([data-is-topic="false"]))) {
  font-size: 2.6rem !important;
  color: #ff5555 !important;
  margin: 2rem 0 1.5rem 0 !important;
  position: relative;
  font-weight: 700 !important;
}

/* # 섹션 하단에 구분선 추가 */
#geometry-quiz-main .creative-block:has(.outline-title[data-is-topic="true"])::after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  margin: 1.5rem 0;
  background: linear-gradient(90deg, transparent, var(--secondary) 20%, var(--secondary) 80%, transparent);
  border-radius: 1px;
}

/* 하위 섹션 ([방법1], [학문 수학] 등) 스타일 - 기본 스타일 덮어쓰기 */
#geometry-quiz-main .outline-title:not([data-is-topic="true"]):contains("[") {
  font-size: 1.8rem !important;
  color: var(--secondary) !important;
  margin: 1rem 0 0.8rem 0 !important;
  font-weight: 600 !important;
}

/* 체육(뒷교) 전용 스타일 */
.pe-back-section {
  margin-bottom: 2.5rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  padding: 1.5rem;
  border-left: 4px solid var(--primary);
}

.pe-back-section-title {
  font-size: 1.8rem;
  color: var(--primary);
  margin-bottom: 1.5rem;
  font-weight: bold;
  display: block;
}

.pe-back-section-content {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.pe-back-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  line-height: 1.6;
  font-size: 1.6rem;
}

.pe-back-subsection {
  margin-bottom: 1.8rem;
}

.pe-back-sublist {
  margin-left: 2rem;
  margin-top: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.pe-back-main-item {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.pe-back-sub-item {
  padding-left: 1rem;
  color: rgba(255, 255, 255, 0.9);
}

.pe-back-input {
  flex: 1;
  min-width: 20ch !important;
  max-width: 50ch !important;
  padding: 0.6rem 1rem !important;
  border: 2px solid var(--secondary) !important;
  border-radius: 6px !important;
  background: var(--bg-dark) !important;
  color: var(--text-light) !important;
  font-size: 1.4rem !important;
  font-family: var(--font-display) !important;
  transition: all 0.2s ease !important;
}

.pe-back-input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px rgba(0, 255, 127, 0.2) !important;
  outline: none !important;
}

.pe-back-input.correct {
  border-color: var(--success) !important;
  background: rgba(0, 255, 127, 0.1) !important;
}

.pe-back-input.incorrect {
  border-color: var(--danger) !important;
  background: rgba(255, 71, 87, 0.1) !important;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
  .pe-back-section {
    padding: 1rem;
    margin-bottom: 2rem;
  }
  
  .pe-back-section-title {
    font-size: 1.6rem;
    margin-bottom: 1rem;
  }
  
  .pe-back-item {
    font-size: 1.4rem;
    gap: 0.6rem;
  }
  
  .pe-back-input {
    min-width: 15ch !important;
    max-width: 40ch !important;
    font-size: 1.3rem !important;
    padding: 0.5rem 0.8rem !important;
  }
  
  .pe-back-sublist {
    margin-left: 1rem;
  }
}

/* 오늘 푼 빈칸 수 표시 스타일 */
.today-blank-count {
  position: fixed;
  right: 20px;
  bottom: 110px; /* 버섯 캐릭터(80px) 위쪽에 여유 공간 확보 */
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%);
  border: 2px solid rgba(233, 69, 96, 0.3);
  border-radius: 16px;
  padding: 12px 20px;
  font-size: 1.4rem;
  color: var(--text-light);
  font-weight: 600;
  font-family: var(--font-display);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  white-space: nowrap;
  cursor: default;
  z-index: 1000;
  opacity: 0;
  transform: translateY(10px);
}

.today-blank-count.hidden {
  display: none;
}

/* 개수 블럭 표시 애니메이션 */
.today-blank-count:not(.hidden) {
  opacity: 1;
  transform: translateY(0);
}

.today-blank-count:hover {
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.98) 0%, rgba(22, 33, 62, 0.98) 100%);
  border-color: rgba(233, 69, 96, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

/* 개수 블럭 내 숫자 강조 */
.count-highlight {
  color: var(--primary);
  font-weight: 900;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
  .today-blank-count {
    right: 15px;
    bottom: 85px; /* 모바일 캐릭터(60px) 위쪽에 여유 공간 확보 */
    font-size: 16px;
    padding: 10px 16px;
    border-radius: 14px;
  }
}

/* === 오답노트 시각적 표시 === */
input.wrong-answer-indicator {
  background: rgba(233, 69, 96, 0.15) !important;  /* 연한 분홍색 배경 */
}

/* === 오답 기록 초기화 버튼 === */
#clear-wrong-answers-btn {
  position: static;
  background: var(--secondary);
  border: 2px solid var(--accent);
  color: var(--text-light);
  font-size: 1rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  box-shadow: 2px 2px 0px var(--bg-dark);
  align-self: flex-start;
  transition: transform 0.1s, box-shadow 0.1s;
  border-radius: 6px;
  width: auto;
  min-width: auto;
  cursor: pointer;
}

#clear-wrong-answers-btn:hover {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0px var(--bg-dark);
  background: var(--accent);
}

#clear-wrong-answers-btn:active {
  transform: translate(3px, 3px);
  box-shadow: 0px 0px 0px var(--bg-dark);
}

/* 특별 빈칸 수 팝업 스타일 */
.special-blank-count-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: white;
  padding: 2rem 3rem;
  border-radius: 20px;
  font-size: 2rem;
  font-weight: 700;
  font-family: var(--font-display);
  text-align: center;
  z-index: 10000;
  box-shadow:
    0 0 30px rgba(233, 69, 96, 0.6),
    0 0 60px rgba(83, 51, 131, 0.4),
    0 0 90px rgba(83, 51, 131, 0.2);
  animation: special-popup-appear 0.5s ease-out, special-popup-float 3s ease-in-out infinite;
  border: 3px solid rgba(255, 255, 255, 0.3);
}

.special-count-highlight {
  font-size: 2.8rem;
  font-weight: 900;
  background: linear-gradient(135deg, #ffd700, #ffed4a, #ffd700);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow:
    0 0 20px rgba(255, 215, 0, 0.8),
    0 0 40px rgba(255, 215, 0, 0.6),
    0 0 60px rgba(255, 215, 0, 0.4);
  animation: count-glow 2.5s ease-in-out infinite alternate, count-pulse 3s ease-in-out infinite;
  display: inline-block;
  transform-origin: center;
}

.special-popup-sparkles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 20px;
}

.sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #ffd700;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
  animation: sparkle-twinkle 2s ease-in-out infinite;
}

.sparkle:nth-child(1) {
  top: 20%;
  left: 20%;
  animation-delay: 0s;
}

.sparkle:nth-child(2) {
  top: 30%;
  right: 25%;
  animation-delay: 0.3s;
}

.sparkle:nth-child(3) {
  bottom: 25%;
  left: 25%;
  animation-delay: 0.6s;
}

.sparkle:nth-child(4) {
  top: 25%;
  right: 20%;
  animation-delay: 0.9s;
}

.sparkle:nth-child(5) {
  bottom: 20%;
  left: 30%;
  animation-delay: 1.2s;
}

.sparkle:nth-child(6) {
  top: 35%;
  left: 35%;
  animation-delay: 0.15s;
}

@keyframes special-popup-appear {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes special-popup-float {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0px);
  }
  25% {
    transform: translate(-50%, -50%) translateY(-10px);
  }
  50% {
    transform: translate(-50%, -50%) translateY(0px);
  }
  75% {
    transform: translate(-50%, -50%) translateY(5px);
  }
}

@keyframes sparkle-twinkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes count-glow {
  0% {
    text-shadow:
      0 0 20px rgba(255, 215, 0, 0.8),
      0 0 40px rgba(255, 215, 0, 0.6),
      0 0 60px rgba(255, 215, 0, 0.4);
  }
  100% {
    text-shadow:
      0 0 30px rgba(255, 215, 0, 1),
      0 0 60px rgba(255, 215, 0, 0.8),
      0 0 90px rgba(255, 215, 0, 0.6);
  }
}

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

@keyframes shimmer {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  50% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
  100% {
    transform: translateX(200%) translateY(200%) rotate(45deg);
  }
}

/* 반응형 디자인 */
@media (max-width: 600px) {
  .special-blank-count-popup {
    font-size: 1.4rem;
    padding: 2rem 2.5rem;
    border-radius: 20px;
  }

  .special-count-highlight {
    font-size: 2.2rem;
  }
}

@media (max-width: 400px) {
  .special-blank-count-popup {
    font-size: 1.2rem;
    padding: 1.5rem 2rem;
    border-radius: 18px;
  }

  .special-count-highlight {
    font-size: 1.8rem;
  }
}

/* === 6개월 히트맵 팝업 모달 === */
#six-month-heatmap-modal {
  z-index: 10000;
}

#six-month-heatmap-modal.hidden {
  display: none;
}

.six-month-heatmap-content {
  position: relative;
  background: var(--bg-dark);
  border: 4px solid var(--primary);
  border-radius: 16px;
  padding: 3rem;
  width: 95vw;
  max-width: 1400px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 
    8px 8px 0px var(--secondary),
    0 0 40px rgba(233, 69, 96, 0.4);
}

.six-month-heatmap-content h2 {
  font-family: var(--font-display);
  font-size: 2.8rem;
  color: var(--text-light);
  text-align: center;
  margin-bottom: 2rem;
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
}

.close-modal-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  background: var(--primary);
  color: var(--text-light);
  border: 2px solid var(--secondary);
  border-radius: 50%;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 0px var(--secondary);
}

.close-modal-btn:hover {
  background: var(--accent);
  transform: scale(1.1) rotate(90deg);
  box-shadow: 3px 3px 0px var(--secondary);
}

.close-modal-btn:active {
  transform: scale(0.95) rotate(90deg) translate(2px, 2px);
  box-shadow: 0px 0px 0px var(--secondary);
}

#six-month-heatmap-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 1rem;
}

@media (max-width: 1200px) {
  #six-month-heatmap-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

.month-heatmap-section {
  background: rgba(255, 255, 255, 0.03);
  border: 2px solid rgba(233, 69, 96, 0.3);
  border-radius: 12px;
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.month-heatmap-section:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(233, 69, 96, 0.2);
}

.month-title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--primary);
  text-align: center;
  margin-bottom: 1rem;
  font-weight: 700;
}

.month-heatmap-grid {
  /* 히트맵 색상 변수 - 모던 레트로 스타일 */
  --heatmap-neutral: rgba(10, 18, 42, 0.6); /* 네이비 중립 배경 */
  --heatmap-l1: #FFB6C1; /* 매우 연한 핑크 - 레벨 1 (명확한 구분) */
  --heatmap-l2: #FF7F7F; /* 연한 레드 - 레벨 2 */
  --heatmap-l3: #FF4444; /* 중간 레드 - 레벨 3 */
  --heatmap-l4: #B71C1C; /* 매우 진한 레드 - 레벨 4 (포인트 컬러, 레벨 3과 명확한 위계) */
  
  display: grid;
  grid-template-columns: repeat(7, 24px);
  grid-auto-rows: 24px;
  gap: 8px;
  justify-content: center;
}

.month-heatmap-grid .heatmap-cell {
  width: 24px;
  height: 24px;
  background: var(--heatmap-neutral); /* 네이비 중립 배경 */
  border-radius: 0; /* 평면 형태 */
  border: 1px solid #000000; /* 검은색 외곽선 */
  transition: transform 0.06s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  box-shadow: none; /* 평면 디자인 */
}

.month-heatmap-grid .heatmap-cell:hover {
  transform: scale(1.05); /* 약한 확대만 */
  box-shadow: 0 0 0 1px #000000; /* 검은색 외곽선 강조 */
  border: 1px solid #000000;
}

.month-heatmap-grid .heatmap-cell.level-1 { 
  background: var(--heatmap-l1); 
  border: 1px solid #000000;
}
.month-heatmap-grid .heatmap-cell.level-2 { 
  background: var(--heatmap-l2); 
  border: 1px solid #000000;
}
.month-heatmap-grid .heatmap-cell.level-3 { 
  background: var(--heatmap-l3); 
  border: 1px solid #000000;
}
.month-heatmap-grid .heatmap-cell.level-4 { 
  background: var(--heatmap-l4); 
  border: 2px solid #000000; /* 최고 레벨은 두꺼운 테두리 */
}
.month-heatmap-grid .heatmap-cell.empty {
  background: rgba(10, 18, 42, 0.3); /* 네이비 - 투명도 높임 */
  border-color: rgba(0, 0, 0, 0.3); /* 연한 검은색 테두리 */
}

/* 반응형 디자인 */
@media (max-width: 768px) {
  .six-month-heatmap-content {
    padding: 2rem;
    max-width: 95vw;
  }
  
  .six-month-heatmap-content h2 {
    font-size: 2.2rem;
  }
  
  #six-month-heatmap-container {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .month-heatmap-grid {
    grid-template-columns: repeat(7, 18px);
    grid-auto-rows: 18px;
    gap: 5px;
  }
  
  .month-heatmap-grid .heatmap-cell {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 480px) {
  .six-month-heatmap-content {
    padding: 1.5rem;
  }
  
  .six-month-heatmap-content h2 {
    font-size: 1.8rem;
  }
  
  .month-heatmap-grid {
    grid-template-columns: repeat(7, 14px);
    grid-auto-rows: 14px;
    gap: 4px;
  }
  
  .month-heatmap-grid .heatmap-cell {
    width: 14px;
    height: 14px;
  }
}

/* 배지 스타일 */
.activity-badge {
  display: inline-block;
  background-color: var(--primary);
  color: var(--text-light);
  padding: 0.3rem 0.8rem;
  border-radius: 0.4rem;
  font-size: 1.4rem;
  font-weight: 600;
  margin-right: 0.8rem;
  border: 1px solid var(--secondary);
}