/* SORIZAVA UI REFRESH 2026-06-11
   범위: 학습 화면 UI 스타일만 보정. 기능 JS/ID/이벤트는 변경하지 않음. */
:root {
  --ui-bg: #F6F8FD;
  --ui-bg-2: #EEF4FF;
  --ui-surface: rgba(255,255,255,.94);
  --ui-surface-solid: #FFFFFF;
  --ui-border: #DDE5F2;
  --ui-border-soft: #EEF2F8;
  --ui-text: #182234;
  --ui-muted: #6B7486;
  --ui-primary: #5F46E8;
  --ui-primary-2: #7C5CFF;
  --ui-primary-soft: #F1EDFF;
  --ui-blue: #3B82F6;
  --ui-green: #10B981;
  --ui-orange: #F59E0B;
  --ui-red: #EF4444;
  --ui-shadow: 0 16px 40px rgba(30, 41, 59, .08);
  --ui-shadow-sm: 0 8px 22px rgba(30, 41, 59, .06);
  --ui-radius-xl: 22px;
  --ui-radius-lg: 18px;
  --ui-radius-md: 14px;
}

* { box-sizing: border-box; }
html, body { max-width: 100%; }
body {
  background:
    radial-gradient(circle at 82% 0%, rgba(124, 92, 255, .09), transparent 30%),
    radial-gradient(circle at 2% 18%, rgba(59, 130, 246, .08), transparent 28%),
    linear-gradient(180deg, #F8FAFF 0%, var(--ui-bg) 100%) !important;
  color: var(--ui-text) !important;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  letter-spacing: -0.025em;
}

#app-wrapper { background: transparent !important; }
.main-content {
  padding: 28px 34px !important;
  gap: 18px !important;
  min-width: 0;
}

/* 공통 사이드바: 기존 마크업 유지, 시각 요소만 정리 */
.sidebar {
  width: 248px !important;
  min-width: 248px !important;
  max-width: 248px !important;
  padding: 22px 14px !important;
  background: rgba(255,255,255,.92) !important;
  border-right: 1px solid #E5EAF3 !important;
  box-shadow: 10px 0 32px rgba(15, 23, 42, .04) !important;
  backdrop-filter: blur(14px);
}
.sidebar .logo {
  margin: 0 0 18px 0 !important;
  padding: 0 8px !important;
  height: 34px;
  color: var(--ui-primary) !important;
  font-size: 1.06rem !important;
  font-weight: 950 !important;
  letter-spacing: -0.04em !important;
}
.nav-list.nav-groups { padding-right: 0 !important; }
.nav-section {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  margin: 0 0 8px !important;
  padding: 0 0 7px !important;
  border-bottom: 1px solid #EEF2F8 !important;
}
.nav-section:last-child { border-bottom: 0 !important; }
.nav-section-title {
  height: 38px !important;
  padding: 0 6px !important;
  color: #475166 !important;
  font-size: .86rem !important;
  font-weight: 900 !important;
  background: transparent !important;
  border: 0 !important;
}
.nav-section-title::-webkit-details-marker { display: none; }
.nav-section-list { gap: 6px !important; padding: 3px 0 0 !important; }
.sidebar .nav-item {
  min-height: 44px !important;
  margin: 0 0 6px !important;
  padding: 0 12px !important;
  border: 1px solid transparent !important;
  border-radius: 13px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #293246 !important;
  font-weight: 850 !important;
  transform: none !important;
}
.sidebar .nav-item:hover {
  background: #F4F6FB !important;
  border-color: #E9EEF6 !important;
  color: var(--ui-primary) !important;
}
.sidebar .nav-item.active {
  background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-2)) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.24) !important;
  box-shadow: 0 12px 24px rgba(95,70,232,.25) !important;
}
.sidebar .nav-icon { width: 22px !important; opacity: .95; }
.sidebar-footer { padding: 10px 2px 0 !important; }
.profile-card {
  border: 1px solid #E5EAF3 !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(15,23,42,.05) !important;
  padding: 11px 12px !important;
  transform: none !important;
}
.profile-card .avatar, .avatar {
  background: linear-gradient(135deg, #B783FF, #7C5CFF) !important;
  color: #fff !important;
  border-radius: 12px !important;
}
.profile-name { color: var(--ui-text) !important; font-weight: 900 !important; }
.profile-action { color: var(--ui-muted) !important; font-weight: 750 !important; }

/* 공통 카드/버튼/폼 */
.page-header, .header,
.card-box, .level-card, .material-card, .mode-card, .source-panel, .practice-card,
.audio-panel, .history-card, .admin-card, .progress-card, .panel, .study-panel,
.toksori-guide-strip, .toksori-work-card, .result-card, .review-card,
.podium-card, .sparta-intro, .stats-grid .stat-card, .stat-item, .study-stat,
.wrong-random-card, .wrong-random-details {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-xl) !important;
  box-shadow: var(--ui-shadow-sm) !important;
}
.page-header, .header {
  padding: 22px 24px !important;
  align-items: center !important;
}
.page-title h1, .page-title h2, .welcome h1 {
  color: var(--ui-text) !important;
  font-weight: 950 !important;
  letter-spacing: -0.06em !important;
  line-height: 1.1 !important;
}
.page-title p, .welcome p, .panel-head p, .section-subtitle, .tip-text,
.material-meta, .level-help, .progress-head p {
  color: var(--ui-muted) !important;
  font-weight: 650 !important;
}
button, .btn, .btn-primary, .primary-btn, .btn-start, .file-label,
.import-label, .wrong-random-primary, .mode-btn.active {
  border-radius: 13px !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em;
}
.btn-primary, .primary-btn, .btn-start, .mode-btn.active,
.wrong-random-primary, .file-label, .import-label, .btn-rank {
  background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-2)) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  box-shadow: 0 12px 24px rgba(95,70,232,.24) !important;
}
.btn-secondary, .btn-ghost, .ghost-btn, .secondary-btn, .wrong-random-secondary,
button.ghost, .btn-reset {
  background: #fff !important;
  color: #334155 !important;
  border: 1px solid var(--ui-border) !important;
  box-shadow: 0 6px 14px rgba(15,23,42,.04) !important;
}
.btn-danger, .btn-reset { color: var(--ui-red) !important; border-color: rgba(239,68,68,.35) !important; }
input[type="text"], input[type="number"], select, textarea, .styled-input, .styled-textarea {
  border: 1px solid var(--ui-border) !important;
  border-radius: 13px !important;
  background: #fff !important;
  color: var(--ui-text) !important;
  outline: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important;
}
input:focus, select:focus, textarea:focus, #typing-input:focus, #input-field:focus, .wrong-random-input:focus {
  border-color: var(--ui-primary) !important;
  box-shadow: 0 0 0 4px rgba(95,70,232,.12), 0 12px 24px rgba(95,70,232,.08) !important;
}
input[type="range"] { accent-color: var(--ui-primary); }
.count-badge, .hint-label, .date-badge, .section-kicker, .stat-label {
  border-radius: 999px !important;
  font-weight: 900 !important;
}

/* 중급/고급/급수 공부방: 선택 영역과 입력 영역 우선순위 정리 */
body:has(.study-layout) .main-content {
  display: grid !important;
  grid-template-columns: minmax(440px, .92fr) minmax(520px, 1.08fr) !important;
  align-items: start;
}
body:has(.study-layout) .page-header,
body:has(.study-layout) .admin-card,
body:has(.study-layout) .progress-card,
body:has(.study-layout) .history-card,
body:has(.study-layout) .study-layout { grid-column: 1 / -1; }
body:has(.study-layout) .page-header {
  min-height: 150px;
  position: relative;
  overflow: hidden;
}
body:has(.study-layout) .page-header::after {
  content: '⏱️📝';
  position: absolute;
  right: 28px;
  top: 26px;
  font-size: 4.625rem;
  opacity: .18;
  transform: rotate(-6deg);
}
body:has(.study-layout) .header-actions { position: relative; z-index: 1; }
body:has(.study-layout) .progress-card { padding: 15px 18px !important; }
body:has(.study-layout) .progress-summary { gap: 10px !important; }
body:has(.study-layout) .progress-pill { border-radius: 14px !important; background:#FBFCFF !important; }
body:has(.study-layout) .level-card,
body:has(.study-layout) .material-card,
body:has(.study-layout) .mode-card {
  min-height: 132px;
  margin: 0 !important;
  padding: 18px !important;
}
body:has(.study-layout) .level-list { grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 8px !important; }
body:has(.study-layout) .level-btn {
  min-height: 46px !important;
  border-radius: 12px !important;
  background: #fff !important;
}
body:has(.study-layout) .level-btn.active {
  background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-2)) !important;
  box-shadow: 0 10px 20px rgba(95,70,232,.24) !important;
}
body:has(.study-layout) .material-card { flex-direction: column !important; align-items: stretch !important; }
body:has(.study-layout) .mode-card { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; align-content: center; }
body:has(.study-layout) .mode-btn { min-height: 56px !important; border-radius: 14px !important; }
body:has(.study-layout) .paragraph-card { grid-column: 1 / -1; }
body:has(.study-layout) .study-layout {
  display: grid !important;
  grid-template-columns: minmax(420px, .9fr) minmax(560px, 1.1fr) !important;
  gap: 16px !important;
  align-items: stretch;
}
body:has(.study-layout) .source-panel,
body:has(.study-layout) .practice-card { padding: 18px !important; }
.source-readonly {
  min-height: 360px !important;
  font-size: 1.05rem !important;
  line-height: 1.86 !important;
  border-radius: 16px !important;
  border: 1px solid #E2E8F0 !important;
  background: linear-gradient(180deg,#fff,#FBFCFF) !important;
}
.practice-card .stats-grid { grid-template-columns: repeat(5, 1fr) !important; gap: 8px !important; }
.practice-card .stat-card {
  border: 1px solid var(--ui-border-soft) !important;
  border-radius: 14px !important;
  background: #FBFCFF !important;
}
.practice-card #typingArea {
  min-height: 255px !important;
  font-size: 1.08rem !important;
  line-height: 1.8 !important;
  border-width: 2px !important;
  border-color: rgba(95,70,232,.58) !important;
  box-shadow: 0 0 0 4px rgba(95,70,232,.06) !important;
}
.practice-actions { align-items: center !important; }
.history-card table, .table { border-collapse: separate !important; border-spacing: 0 !important; }

/* 입문반 졸업시험: 문제와 입력칸 중심 */
body:has(#typing-input):has(#text-display) .main-content { padding: 30px 42px !important; }
body:has(#typing-input):has(#text-display) .page-header {
  display: flex !important;
  min-height: 108px;
  margin-bottom: 0 !important;
}
body:has(#typing-input):has(#text-display) .card-box { padding: 30px !important; }
body:has(#typing-input):has(#text-display) .toolbar {
  background: #fff !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 18px !important;
  padding: 16px 18px !important;
  box-shadow: var(--ui-shadow-sm) !important;
}
#set-selector { min-width: 160px; min-height: 52px; padding: 0 16px !important; font-size: 1rem !important; font-weight: 900; }
body:has(#typing-input):has(#text-display) #text-display {
  min-height: 132px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 18px 0 18px !important;
  padding: 24px 30px !important;
  border: 1px solid rgba(95,70,232,.22) !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #FFFFFF 0%, #F7F4FF 100%) !important;
  color: #172033 !important;
  font-size: clamp(2rem, 3.2vw, 3.15rem) !important;
  font-weight: 950 !important;
  letter-spacing: -0.07em !important;
  text-align: center;
}
body:has(#typing-input):has(#text-display) #typing-input {
  width: 100% !important;
  height: 74px !important;
  padding: 0 24px !important;
  border: 2px solid var(--ui-primary) !important;
  font-size: 1.18rem !important;
  font-weight: 800 !important;
}
body:has(#typing-input):has(#text-display) #history-section {
  margin-top: 22px !important;
  border-radius: 18px !important;
  background: #fff !important;
}

/* 똑소리2: 두 입력 영역을 채점실처럼 정렬 */
.toksori-page { max-width: 1500px; margin: 0 auto; width: 100%; }
.toksori-header { min-height: 110px; }
.toksori-guide-strip { display: grid !important; grid-template-columns: repeat(3,1fr); gap: 14px !important; padding: 18px !important; }
.guide-step { border: 0 !important; background: transparent !important; }
.toksori-work-card { padding: 22px !important; }
.toksori-work-card .workspace-grid, .toksori-work-card .input-layout-col,
.clean-input-area { gap: 16px !important; }
.styled-textarea, #original, #studentPre, #studentPost {
  min-height: 255px !important;
  font-size: 1rem !important;
  line-height: 1.72 !important;
}
#studentPre, #studentPost { border-color: rgba(245,158,11,.38) !important; }
#studentPre:focus, #studentPost:focus { border-color: var(--ui-orange) !important; box-shadow: 0 0 0 4px rgba(245,158,11,.12) !important; }
.calculate-btn, #compareBtn, button[onclick*="compareTexts"] {
  min-height: 70px !important;
  font-size: 1.15rem !important;
}

/* 오답노트 */
body.study-tools-body .main-content { padding: 28px 34px !important; }
body.study-tools-body .header { min-height: 118px; }
.wrong-note-only-shell { display: grid !important; gap: 16px !important; }
.wrong-random-status {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
}
.wrong-random-status span, .wrong-random-counts span {
  border: 1px solid var(--ui-border) !important;
  border-radius: 14px !important;
  background: #FBFCFF !important;
  padding: 14px 18px !important;
  text-align: center;
  font-weight: 850;
}
.wrong-random-card { padding: 30px !important; }
.wrong-random-question strong, .abbr-display {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 126px !important;
  border: 1px solid rgba(95,70,232,.25) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #FFFFFF, #F7F4FF) !important;
  font-size: clamp(2rem, 3.2vw, 3.15rem) !important;
  font-weight: 950 !important;
  letter-spacing: -0.06em !important;
  color: #172033 !important;
}
.wrong-random-input {
  width: 100% !important;
  height: 88px !important;
  margin-top: 18px !important;
  border: 3px solid var(--ui-primary) !important;
  border-radius: 18px !important;
  text-align: center !important;
  font-size: 1.35rem !important;
  font-weight: 900 !important;
}
.wrong-random-actions { justify-content: center !important; gap: 14px !important; }
.wrong-random-actions button { min-width: 150px; min-height: 52px; }

/* 약어사전 */
body:has(#keyboardMount) .main-content { padding: 22px 30px !important; }
body:has(#keyboardMount) .page-header { min-height: 104px; }
body:has(#keyboardMount) .stats-grid { grid-template-columns: repeat(4,1fr) !important; gap: 14px !important; }
body:has(#keyboardMount) .stat-card { min-height: 98px; padding: 20px 24px !important; }
.dictionary-layout { display: grid !important; grid-template-columns: minmax(560px,1.15fr) minmax(380px,.85fr) !important; gap: 18px !important; }
.keyboard-stage {
  min-height: 570px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg,#fff,#FBFCFF) !important;
  border: 1px solid #E1E7F1 !important;
}
.table-scroll { border-radius: 16px !important; border: 1px solid #E6ECF5 !important; }
.table th { background: #F8FAFF !important; color: #334155 !important; }
.table td { border-bottom: 1px solid #EEF2F8 !important; }

/* 자수측정 */
body:has(#typingArea):has(#seekBar):has(#audioVal) .card-box { padding: 24px !important; }
body:has(#typingArea):has(#seekBar):has(#audioVal) .stats-grid { grid-template-columns: repeat(4,1fr) !important; gap: 18px !important; }
body:has(#typingArea):has(#seekBar):has(#audioVal) .stat-card {
  min-height: 112px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
}
body:has(#typingArea):has(#seekBar):has(#audioVal) #typingArea {
  min-height: 305px !important;
  border: 2px solid rgba(95,70,232,.62) !important;
  font-size: 1.06rem !important;
  line-height: 1.72 !important;
}
.audio-bar-container, .control-bar {
  border: 1px solid var(--ui-border) !important;
  border-radius: 16px !important;
  background: #fff !important;
  padding: 14px 16px !important;
}

/* 스파르타 */
.sparta-intro {
  color: #C2410C !important;
  border-color: rgba(249,115,22,.32) !important;
  background: linear-gradient(135deg,#FFF7ED,#FFFDF8) !important;
  padding: 20px 24px !important;
}
.controls-bar, .game-info-bar, .settings-row {
  background: #fff !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 16px !important;
  padding: 16px 18px !important;
}
.stats-row { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 14px !important; }
.sparta-intro + .card-box .target-box, #target-box.target-box {
  min-height: 110px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #D8E2EF !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg,#fff,#F8FAFC) !important;
  font-size: clamp(1.8rem, 2.8vw, 3rem) !important;
  font-weight: 950 !important;
  letter-spacing: -0.06em !important;
}
#input-field {
  width: 100% !important;
  height: 86px !important;
  border: 3px solid var(--ui-primary) !important;
  border-radius: 18px !important;
  font-size: 1.35rem !important;
  font-weight: 850 !important;
  padding: 0 22px !important;
}

/* 타자왕 */
body:has(#input-wrapper):has(#chunk-slider) .main-content { padding: 24px 28px !important; }
.podium-card {
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  align-items: center !important;
  padding: 18px 22px !important;
}
.podium-item { border-right: 1px solid #EEF2F8; }
.podium-item:last-child { border-right: 0; }
body:has(#input-wrapper):has(#chunk-slider) .card-box { padding: 24px !important; }
body:has(#input-wrapper):has(#chunk-slider) .target-box {
  min-height: 250px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(59,130,246,.18) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg,#fff,#F8FBFF) !important;
  font-size: clamp(2.1rem, 3.2vw, 3.35rem) !important;
  font-weight: 950 !important;
  letter-spacing: -0.07em !important;
  text-align: center !important;
}
#input-wrapper input, #input-wrapper textarea, .typing-input {
  min-height: 92px !important;
  border: 3px solid var(--ui-primary) !important;
  border-radius: 18px !important;
  font-size: 1.3rem !important;
  font-weight: 850 !important;
}
body:has(#input-wrapper):has(#chunk-slider) .btn-group {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 18px !important;
}
body:has(#input-wrapper):has(#chunk-slider) .btn-group .btn { min-height: 64px !important; }

/* 표/기록 영역 공통 */
table { width: 100%; }
th, td { border-color: #EEF2F8 !important; }
th { color: #475166 !important; font-weight: 900 !important; }
td { color: #263244 !important; font-weight: 700; }
.history-list, #historyList { border-radius: 16px !important; }

@media (max-width: 1200px) {
  .main-content { padding: 22px 18px !important; }
  body:has(.study-layout) .main-content,
  body:has(.study-layout) .study-layout,
  .dictionary-layout { grid-template-columns: 1fr !important; }
  body:has(.study-layout) .level-card,
  body:has(.study-layout) .material-card,
  body:has(.study-layout) .mode-card { grid-column: 1 / -1; }
  .stats-row, .practice-card .stats-grid, body:has(#typingArea):has(#seekBar):has(#audioVal) .stats-grid { grid-template-columns: repeat(2,1fr) !important; }
}

@media (max-width: 768px) {
  .main-content { padding: 72px 14px 18px !important; }
  .page-header, .header { flex-direction: column !important; align-items: stretch !important; }
  .header-actions, .top-actions { justify-content: stretch !important; }
  .header-actions > *, .top-actions > * { flex: 1 1 auto; }
  body:has(.study-layout) .level-list { grid-template-columns: repeat(2,1fr) !important; }
  .toksori-guide-strip, .wrong-random-status, .podium-card { grid-template-columns: 1fr !important; }
}