/* Canonical visual system. Loaded after page-local styles so index_new is the
   single source of truth for the site chrome and neutral UI language. */
@import url("./site-theme.css");

:root {
  --site-bg: #f8f9fa;
  --site-surface: #ffffff;
  --site-border: #dee2e6;
  --site-text: #212529;
  --site-text-2: #495057;
  --site-muted: #6c757d;
  --site-accent: #3978c5;
}
html.dark {
  --site-bg: #0b0e12;
  --site-surface: #151a21;
  --site-border: #303944;
  --site-text: #eef1f4;
  --site-text-2: #b7c0c9;
  --site-muted: #84909c;
  --site-accent: #8eaed0;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  overflow-y: scroll;
  scrollbar-gutter: stable;
}
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--site-bg); }
::-webkit-scrollbar-thumb { background: var(--site-border); border-radius: 3px; }
* { scrollbar-width: thin; scrollbar-color: var(--site-border) var(--site-bg); }
body.site-page {
  margin: 0 !important;
  background: var(--site-bg) !important;
  color: var(--site-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif !important;
  -webkit-font-smoothing: antialiased;
}
body.site-page main,
body.site-page .site-main { color: var(--site-text); }
body.site-page main a,
body.site-page .site-header a { text-decoration: none; }
body.site-page input,
body.site-page select,
body.site-page textarea {
  background: var(--site-surface);
  color: var(--site-text);
  border-color: var(--site-border);
}
body.site-page button { font-family: inherit; }
body.site-page #hdr.site-header {
  border-bottom: 1.5px solid var(--site-border) !important;
  box-shadow: none !important;
}
body.site-page #hdr.site-header .brand-mark {
  box-shadow: none !important;
}

/* app2 uses the same standard sheet without Tailwind or page-local CSS. */
body.app2-index-page main {
  max-width: 980px;
  margin: 0 auto;
  padding: 78px 16px 44px;
  color: var(--site-text);
}
body.app2-index-page main > .max-w-6xl { max-width: none; width: 100%; }
body.app2-index-page .flex { display: flex; }
body.app2-index-page .flex-col { flex-direction: column; }
body.app2-index-page .items-center { align-items: center; }
body.app2-index-page .text-center { text-align: center; }
body.app2-index-page .w-full { width: 100%; }
body.app2-index-page .mx-auto { margin-left: auto; margin-right: auto; }
body.app2-index-page .max-w-md { width: min(100%, 520px); max-width: 520px; }
body.app2-index-page .max-w-2xl { width: min(100%, 672px); max-width: 672px; }
body.app2-index-page .mb-8 { margin-bottom: 32px; }
body.app2-index-page .mt-8 { margin-top: 32px; }
body.app2-index-page .mt-6 { margin-top: 24px; }
body.app2-index-page .mb-6 { margin-bottom: 24px; }
body.app2-index-page .mb-2 { margin-bottom: 8px; }
body.app2-index-page .p-6 { padding: 24px; }
body.app2-index-page .rounded-lg { border-radius: 6px; }
body.app2-index-page .bg-white { background: var(--site-surface); }
body.app2-index-page .shadow-md,
body.app2-index-page .shadow-sm { box-shadow: 0 1px 3px rgba(33,37,41,.08); }
body.app2-index-page .text-gray-900,
body.app2-index-page .text-gray-800,
body.app2-index-page .text-gray-600,
body.app2-index-page .text-gray-500,
body.app2-index-page .text-secondary-600,
body.app2-index-page .text-accent-700 { color: var(--site-muted); }
body.app2-index-page h1,
body.app2-index-page h2,
body.app2-index-page h3 { color: var(--site-text); letter-spacing: -.03em; }
body.app2-index-page h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); font-weight: 700; }
body.app2-index-page h2 { font-size: 1rem; font-weight: 700; }
body.app2-index-page .form-group { display: none; }
body.app2-index-page form { display: grid; gap: 12px; }
body.app2-index-page select,
body.app2-index-page input,
body.app2-index-page textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--site-border);
  border-radius: 6px;
  background: var(--site-surface);
  color: var(--site-text);
  font: inherit;
}
body.app2-index-page select:focus,
body.app2-index-page input:focus,
body.app2-index-page textarea:focus {
  border-color: var(--site-accent);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--site-accent) 16%,transparent);
}
body.app2-index-page button[type="submit"] {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--site-accent);
  border-radius: 6px;
  background: var(--site-accent);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
body.app2-index-page button[type="submit"]:hover { filter: brightness(1.06); }
body.app2-index-page .ad-container { width: 100%; max-width: 728px; margin: 0 auto; text-align: center; }
body.app2-index-page .modal { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.42); }
body.app2-index-page .modal-content {
  width: min(80%, 500px);
  margin: 15% auto;
  padding: 20px;
  border: 1px solid var(--site-border);
  border-radius: 6px;
  background: var(--site-surface);
  color: var(--site-text);
  box-shadow: 0 12px 32px rgba(0,0,0,.16);
}
body.app2-index-page .file-item { display:flex; justify-content:space-between; align-items:center; padding:10px; margin:8px 0; border-radius:6px; background:var(--site-bg); }
body.app2-index-page .file-item:hover { background:var(--site-surface2); }
body.app2-index2-page .grid { display: grid; }
body.app2-index2-page .grid-cols-1 { grid-template-columns: 1fr; }
body.app2-index2-page .gap-2 { gap: 8px; }
body.app2-index2-page .py-4 { padding-top: 16px; padding-bottom: 16px; }
body.app2-index2-page .border-t { border-top: 1px solid var(--site-border); }
body.app2-index2-page .border-b { border-bottom: 1px solid var(--site-border); }
body.app2-index2-page .checkbox-label { display:block; margin:8px 0; padding:6px 10px; border-radius:6px; color:var(--site-text); cursor:pointer; }
body.app2-index2-page .checkbox-label:hover { background:var(--site-surface2); }
body.app2-index2-page input[type="checkbox"] { width:18px; min-height:18px; accent-color:var(--site-accent); }
body.app2-index2-page .warning-text { margin:10px 0; color:var(--site-accent); font-size:.85rem; }
body.app2-index2-page .underline { text-decoration:none; }
body.app2-index2-page .justify-between { justify-content:space-between; }
body.app2-index2-page .justify-center { justify-content:center; }
body.app2-index2-page .inline-flex { display:inline-flex; }
body.app2-index2-page .px-4 { padding-left:16px; padding-right:16px; }
body.app2-index2-page .py-2 { padding-top:8px; padding-bottom:8px; }
body.app2-index2-page .px-6 { padding-left:24px; padding-right:24px; }
body.app2-index2-page .py-3 { padding-top:12px; padding-bottom:12px; }
body.app2-index2-page .bg-gray-200 { background:var(--site-surface2); }
body.app2-index2-page .text-gray-700 { color:var(--site-muted); }
body.app2-index2-page .bg-gray-200:hover { background:var(--site-border); }
body.app2-index2-page .selection-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
body.app2-index2-page .selection-toolbar .checkbox-label { margin:0; }
body.app2-index2-page .selection-clear,
body.app2-index2-page .bulk-select {
  border:1px solid var(--site-border);
  border-radius:4px;
  background:var(--site-surface);
  color:var(--site-muted);
  cursor:pointer;
  font-family:inherit;
  font-size:.7rem;
  font-weight:700;
  line-height:1;
}
body.app2-index2-page .selection-clear { padding:7px 9px; }
body.app2-index2-page .selection-clear:hover,
body.app2-index2-page .bulk-select:hover { border-color:var(--site-accent); color:var(--site-accent); background:var(--site-surface2); }
body.app2-index2-page .range-group {
  min-width:48px;
  padding:7px 9px;
  border:1px solid var(--site-border);
  border-radius:4px;
  background:var(--site-surface);
  color:var(--site-muted);
  cursor:pointer;
  font-family:inherit;
  font-size:.7rem;
  font-weight:700;
  line-height:1;
}
body.app2-index2-page .range-group:hover,
body.app2-index2-page .range-group.selected { border-color:var(--site-accent); background:var(--site-accent); color:#fff; }
body.app2-index2-page .range-list { display:grid; gap:10px; margin-top:10px; }
body.app2-index2-page .range-box { padding:6px; border:1px solid var(--site-border); border-radius:6px; background:var(--site-surface); transition:border-color .15s,background .15s,box-shadow .15s; }
body.app2-index2-page .range-box:hover { border-color:var(--site-accent); background:var(--site-surface2); box-shadow:0 1px 3px rgba(33,37,41,.08); }
body.app2-index2-page .range-box .range-group { width:100%; margin:0 0 4px; text-align:left; }
body.app2-index2-page .range-items { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 6px; }
body.app2-index2-page .checkbox-row { display:flex; align-items:center; gap:5px; min-width:0; border:1px solid transparent; border-radius:5px; }
body.app2-index2-page .checkbox-row:hover { border-color:var(--site-border); background:var(--site-surface2); }
body.app2-index2-page .checkbox-row .checkbox-label { flex:1; min-width:0; margin:0; padding:7px 5px; }
body.app2-index2-page .item-number { flex:0 0 26px; margin-left:7px; color:var(--site-muted); font-size:.72rem; font-variant-numeric:tabular-nums; }
body.app2-index2-page .item-zone { flex:0 0 auto; margin-right:5px; padding:2px 5px; border:1px solid var(--site-border); border-radius:3px; color:var(--site-accent); font-size:.62rem; font-weight:700; }
body.app2-index2-page .item-title { min-width:0; overflow:hidden; color:var(--site-text); font-size:.78rem; text-overflow:ellipsis; white-space:nowrap; }
body.app2-index2-page .bulk-actions { display:flex; flex:0 0 auto; gap:3px; padding-right:5px; }
body.app2-index2-page .bulk-select { padding:5px 6px; }
@media (max-width:600px) {
  body.app2-index2-page .range-items { grid-template-columns:1fr; }
  body.app2-index2-page .item-zone { display:none; }
  body.app2-index2-page .item-title { font-size:.72rem; }
  body.app2-index2-page .range-group { min-width:44px; padding:6px 7px; font-size:.64rem; }
}
body.app2-index-page .workbook-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(720px, 100%);
  margin: 0 auto 20px;
  padding: 10px 14px;
  border: 1px solid var(--site-border);
  border-radius: 6px;
  background: var(--site-surface);
  box-shadow: 0 1px 3px rgba(33,37,41,.08);
}
body.app2-index-page .workbook-step {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  color: var(--site-muted);
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
}
body.app2-index-page .workbook-step .num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: 1px solid var(--site-border);
  border-radius: 50%;
  background: var(--site-surface2);
  color: var(--site-muted);
  font-size: .75rem;
}
body.app2-index-page .workbook-step.active { color: var(--site-accent); }
body.app2-index-page .workbook-step.active .num {
  border-color: var(--site-accent);
  background: var(--site-accent);
  color: #fff;
}
body.app2-index-page .workbook-step a { color: inherit; text-decoration: none; }
body.app2-index-page .workbook-step-line {
  width: 18px;
  height: 1px;
  flex: 0 0 18px;
  background: var(--site-border);
}
body.app2-index-page .workbook-context {
  max-width: 32%;
  margin-left: auto;
  overflow: hidden;
  color: var(--site-muted);
  font-size: .75rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media (max-width:600px) {
  body.app2-index-page main { padding:72px 12px 30px; }
  body.app2-index-page .p-6 { padding:20px; }
  body.app2-index-page .workbook-steps { gap:4px; padding:8px; }
  body.app2-index-page .workbook-step { justify-content:center; font-size:.7rem; }
  body.app2-index-page .workbook-step .num { width:25px; height:25px; flex-basis:25px; }
  body.app2-index-page .workbook-step-line { width:8px; flex-basis:8px; }
  body.app2-index-page .workbook-context { display:none; }
}

/* Final workbook selection uses the same restrained card language as the
   previous two steps, while retaining its existing form and admin actions. */
body.app2-index3-page .grid { display: grid; }
body.app2-index3-page .grid-cols-1 { grid-template-columns: 1fr; }
body.app2-index3-page .gap-4 { gap: 16px; }
body.app2-index3-page .space-y-4 > * + * { margin-top: 16px; }
body.app2-index3-page .p-4 { padding: 16px; }
body.app2-index3-page .mb-3 { margin-bottom: 12px; }
body.app2-index3-page .pt-6 { padding-top: 24px; }
body.app2-index3-page .border-t { border-top: 1px solid var(--site-border); }
body.app2-index3-page .border-b { border-bottom: 1px solid var(--site-border); }
body.app2-index3-page .border-gray-200,
body.app2-index3-page .border-gray-300,
body.app2-index3-page .border-primary-200 { border-color: var(--site-border) !important; }
body.app2-index3-page [class*="bg-secondary-"],
body.app2-index3-page [class*="bg-primary-"]:not(button) { background: var(--site-surface2) !important; }
body.app2-index3-page [class*="text-secondary-"],
body.app2-index3-page [class*="text-accent-"] { color: var(--site-accent) !important; }
body.app2-index3-page .card-hover {
  border: 1px solid var(--site-border);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
body.app2-index3-page .card-hover:hover {
  transform: translateY(-1px);
  border-color: var(--site-accent);
  background: var(--site-surface);
  box-shadow: 0 4px 14px rgba(33,37,41,.10);
}
body.app2-index3-page .text-lg { font-size: 1rem; }
body.app2-index3-page .font-semibold { font-weight: 700; }
body.app2-index3-page .warning-text { color: var(--site-accent); }
/* Keep legacy utility-class markup readable when Tailwind is disabled. */
body.app2-index3-page main h2,
body.app2-index3-page main h3,
body.app2-index3-page main .text-gray-800,
body.app2-index3-page main .text-gray-700 { color: var(--site-text) !important; }
body.app2-index3-page main p:not(.text-secondary-700):not(.text-accent-700),
body.app2-index3-page main label { color: var(--site-muted) !important; }
body.app2-index3-page main .max-w-2xl a {
  color: var(--site-accent) !important;
  text-decoration: none;
}
body.app2-index3-page main .max-w-2xl a:hover {
  color: var(--site-text) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.app2-index3-page main .max-w-2xl a.workflow-back {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid var(--site-border);
  border-radius: 6px;
  background: var(--site-surface2);
  color: var(--site-muted) !important;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
}
body.app2-index3-page main .max-w-2xl a.workflow-back:hover {
  border-color: var(--site-accent);
  background: var(--site-surface);
  color: var(--site-accent) !important;
}
body.app2-index3-page form { gap: 12px; }
body.app2-index3-page form button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  border: 1px solid var(--site-border);
  border-radius: 8px;
  background: var(--site-surface) !important;
  color: var(--site-text) !important;
  font: inherit;
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(33,37,41,.05);
  transition: border-color .15s, background .15s, color .15s, transform .15s, box-shadow .15s;
}
body.app2-index3-page form button:hover {
  border-color: var(--site-accent);
  background: color-mix(in srgb, var(--site-accent) 7%, var(--site-surface)) !important;
  color: var(--site-accent) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--site-accent) 16%, transparent);
}
body.app2-index3-page form button:focus-visible {
  outline: 2px solid var(--site-accent);
  outline-offset: 2px;
}
body.app2-index3-page form button::after {
  content: "→";
  flex: 0 0 auto;
  color: var(--site-accent);
  font-size: 1rem;
  line-height: 1;
}
body.app2-index3-page form button i { display: none; }
body.app2-index3-page .underline { text-decoration: none; }

/* x_index2 follows the same restrained light/dark system as index_new while
   retaining its admin selection and launch workflow. */
body.x-index2-page {
  min-height:100vh;
  overflow-x:hidden;
}
body.x-index2-page main {
  width:min(980px,100%);
  max-width:980px;
  margin:0 auto;
  padding:78px 16px 44px !important;
  color:var(--site-text);
}
body.x-index2-page .control-panel,
body.x-index2-page main > section > div,
body.x-index2-page main > .grid > section,
body.x-index2-page main > section .bg-cockpit-light {
  background:var(--site-surface) !important;
  border:1px solid var(--site-border) !important;
  box-shadow:0 1px 3px rgba(33,37,41,.08) !important;
}
body.x-index2-page .control-panel { border-radius:8px !important; }
body.x-index2-page .glow { box-shadow:0 1px 3px rgba(33,37,41,.08) !important; }
body.x-index2-page .control-panel,
body.x-index2-page main > section > div { background-image:none !important; }
body.x-index2-page h3 { color:var(--site-text) !important; letter-spacing:-.03em; }
body.x-index2-page input,
body.x-index2-page textarea {
  min-height:40px;
  border:1px solid var(--site-border) !important;
  border-radius:6px !important;
  background:var(--site-surface) !important;
  color:var(--site-text) !important;
}
body.x-index2-page input:focus,
body.x-index2-page textarea:focus {
  border-color:var(--site-accent) !important;
  outline:0;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--site-accent) 16%,transparent) !important;
}
body.x-index2-page .bg-cockpit-dark {
  background:var(--site-surface2) !important;
  color:var(--site-text) !important;
}
body.x-index2-page .bg-gray-600 { background:var(--site-surface2) !important; }
body.x-index2-page .text-white,
body.x-index2-page .text-gray-100 { color:var(--site-text) !important; }
body.x-index2-page .text-gray-400,
body.x-index2-page .text-gray-500 { color:var(--site-muted) !important; }
body.x-index2-page .x-controls-row { align-items:center; }
body.x-index2-page .x-controls-row h3 { margin:0 !important; font-size:.86rem; }
body.x-index2-page .x-controls-row #text1 { width:min(300px,100%); }
body.x-index2-page .x-book-picker,
body.x-index2-page .x-work-picker { position:relative; flex:0 0 auto; }
body.x-index2-page .x-book-toggle {
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:40px;
  padding:8px 12px;
  border:1px solid var(--site-border) !important;
  border-radius:6px !important;
  background:var(--site-surface2) !important;
  color:var(--site-text) !important;
  font-size:.78rem;
  font-weight:700;
  cursor:pointer;
}
body.x-index2-page .x-book-toggle i:last-child { margin-left:2px; color:var(--site-muted); font-size:.65rem; }
body.x-index2-page .x-book-menu {
  position:absolute;
  top:calc(100% + 7px);
  left:0;
  z-index:220;
  width:min(300px,calc(100vw - 32px));
  max-height:310px;
  overflow:auto;
  padding:8px;
  border:1px solid var(--site-border);
  border-radius:8px;
  background:var(--site-surface);
  box-shadow:0 10px 28px rgba(33,37,41,.16);
}
body.x-index2-page .x-book-menu[hidden] { display:none !important; }
body.x-index2-page .x-book-menu-title { padding:5px 8px 8px; color:var(--site-muted); font-size:.7rem; font-weight:800; }
body.x-index2-page .x-book-option {
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px;
  border-radius:5px;
  color:var(--site-text);
  font-size:.76rem;
  cursor:pointer;
}
body.x-index2-page .x-book-option:hover { background:color-mix(in srgb,var(--site-accent) 9%,transparent); }
body.x-index2-page .x-book-option-input { width:15px !important; min-height:15px !important; flex:0 0 auto; }
body.x-index2-page .x-work-option-input { width:15px !important; min-height:15px !important; flex:0 0 auto; }
body.x-index2-page .x-book-option span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.x-index2-page button,
body.x-index2-page .nav-button {
  border:1px solid var(--site-accent) !important;
  border-radius:7px !important;
  background:var(--site-accent) !important;
  color:#fff !important;
  box-shadow:none !important;
}
body.x-index2-page button:hover,
body.x-index2-page .nav-button:hover { filter:brightness(1.06); }
body.x-index2-page #hdr.site-header .icon-btn,
body.x-index2-page #hdr.site-header .icon-btn:hover {
  border:0 !important;
  background:transparent !important;
  color:var(--site-muted) !important;
  box-shadow:none !important;
  filter:none;
}
body.x-index2-page #hdr.site-header .icon-btn:hover { color:var(--site-accent) !important; }
body.x-index2-page .bg-cockpit-warning { background:var(--site-accent) !important; color:#fff !important; }
body.x-index2-page .border-cockpit-accent { border-color:var(--site-border) !important; }
body.x-index2-page .text-cockpit-accent { color:var(--site-accent) !important; }
body.x-index2-page .border-gray-700,
body.x-index2-page .border-gray-800 { border-color:var(--site-border) !important; }
body.x-index2-page footer { margin-top:0 !important; }
@media (min-width:640px) {
  body.app2-index3-page .sm\:grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.app2-index3-page .sm\:grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width:600px) {
  body.app2-index3-page .p-4 { padding: 14px; }
  body.app2-index3-page main .max-w-2xl { width: 100%; }
}

/* WordKing keeps its learning flow and sound controls, but uses the same
   restrained cards, controls, and blue accent as index_new. */
body.app-wordking-page .game-container {
  width: min(980px, 100%);
  margin: 0 auto;
  padding: 78px 16px 44px;
}
body.app-wordking-page .game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 20px;
  padding: 16px 20px;
  border: 1px solid var(--site-border);
  border-radius: 8px;
  background: var(--site-surface);
  box-shadow: 0 1px 3px rgba(33,37,41,.08);
}
body.app-wordking-page .game-header h1 { margin:0; color:var(--site-text); font-size:1.35rem; font-weight:800; letter-spacing:.04em; }
body.app-wordking-page .game-header h1 a { color:inherit !important; }
body.app-wordking-page .header-actions { display:flex; align-items:center; gap:8px; }
body.app-wordking-page .home-link,
body.app-wordking-page .theme-toggle {
  display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:8px 12px;
  border:1px solid var(--site-border); border-radius:6px; background:var(--site-surface2); color:var(--site-muted);
  font:inherit; font-size:.78rem; font-weight:700; text-decoration:none; cursor:pointer;
}
body.app-wordking-page .theme-toggle { width:36px; padding:0; }
body.app-wordking-page .home-link:hover,
body.app-wordking-page .theme-toggle:hover { border-color:var(--site-accent); color:var(--site-accent); background:var(--site-surface); }
body.app-wordking-page .game-content { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start; }
body.app-wordking-page .card { padding:18px; border:1px solid var(--site-border); border-radius:8px; background:var(--site-surface); box-shadow:0 1px 3px rgba(33,37,41,.08); }
body.app-wordking-page .card h2,
body.app-wordking-page .card h3 { margin:0 0 12px; color:var(--site-text); font-size:1rem; }
body.app-wordking-page .game-image img { display:block; width:100%; height:auto; border-radius:6px; }
body.app-wordking-page .wordking-emblem { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:190px; gap:8px; border:1px solid var(--site-border); border-radius:6px; background:var(--site-surface2); color:var(--site-text); }
body.app-wordking-page .wordking-emblem i { color:var(--site-accent); font-size:2.8rem; }
body.app-wordking-page .wordking-emblem strong { font-size:1.25rem; letter-spacing:.08em; }
body.app-wordking-page .wordking-emblem span { color:var(--site-muted); font-size:.68rem; letter-spacing:.14em; }
body.app-wordking-page .right-column { display:grid; gap:16px; }
body.app-wordking-page .ranking-list { display:grid; gap:6px; }
body.app-wordking-page .ranking-item { padding:10px 12px; border:1px solid var(--site-border); border-radius:6px; background:var(--site-surface2); color:var(--site-text-2); font-size:.82rem; }
body.app-wordking-page .score { color:var(--site-accent); }
body.app-wordking-page .game-form { grid-column:1 / -1; }
body.app-wordking-page .form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
body.app-wordking-page .form-grid > .range-section:has(.known-toggle-wrap) { grid-column:1 / -1; grid-row:2; }
body.app-wordking-page .form-grid > .range-section:not(:has(.known-toggle-wrap)) { grid-column:1 / -1; grid-row:3; }
body.app-wordking-page .form-group,
body.app-wordking-page .range-section { display:grid; gap:8px; }
body.app-wordking-page .form-group label,
body.app-wordking-page .range-section-label,
body.app-wordking-page .range-sub-label { color:var(--site-text); font-size:.82rem; font-weight:700; }
body.app-wordking-page .range-sub-label { margin:4px 0 0; color:var(--site-muted); font-size:.74rem; }
body.app-wordking-page select { width:100%; min-height:42px; padding:9px 11px; border:1px solid var(--site-border); border-radius:6px; background:var(--site-surface); color:var(--site-text); font:inherit; }
body.app-wordking-page .chip-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); gap:6px; }
body.app-wordking-page #presetGrid { grid-template-columns:repeat(auto-fill,minmax(70px,1fr)); }
body.app-wordking-page #dayGrid { max-height:180px; overflow-y:auto; padding:2px 4px 2px 0; }
body.app-wordking-page .range-chip,
body.app-wordking-page .known-btn { min-height:36px; padding:7px 9px; border:1px solid var(--site-border); border-radius:6px; background:var(--site-surface2); color:var(--site-text-2); font:inherit; font-size:.74rem; font-weight:700; cursor:pointer; }
body.app-wordking-page .range-chip:hover,
body.app-wordking-page .known-btn:hover,
body.app-wordking-page .range-chip.sel,
body.app-wordking-page .known-btn.sel-all,
body.app-wordking-page .known-btn.sel-exclude { border-color:var(--site-accent); background:var(--site-surface); color:var(--site-accent); }
body.app-wordking-page .known-toggle-wrap { display:flex; gap:6px; flex-wrap:wrap; }
body.app-wordking-page .range-section:has(.known-toggle-wrap) { gap:5px; }
body.app-wordking-page .range-section:has(.known-toggle-wrap) .range-section-label { font-size:.76rem; }
body.app-wordking-page .known-toggle-wrap .known-btn { min-height:30px; padding:5px 9px; font-size:.7rem; font-weight:600; }
body.app-wordking-page .dot { display:none; }
body.app-wordking-page .hidden-select { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
body.app-wordking-page .mission-brief { display:flex; justify-content:space-between; gap:12px; margin-top:18px; padding:12px 14px; border:1px solid var(--site-border); border-radius:6px; background:var(--site-surface2); color:var(--site-muted); font-size:.78rem; }
body.app-wordking-page .mission-brief strong { color:var(--site-text); }
body.app-wordking-page .start-button { display:block; width:100%; min-height:48px; margin-top:14px; border:1px solid var(--site-accent); border-radius:7px; background:var(--site-accent); color:#fff; font:inherit; font-weight:800; cursor:pointer; }
body.app-wordking-page .start-button:hover { filter:brightness(1.06); }
body.app-wordking-page .sound-toggle { position:fixed; right:18px; bottom:18px; z-index:10; width:38px; height:38px; border:1px solid var(--site-border); border-radius:50%; background:var(--site-surface); color:var(--site-muted); box-shadow:0 2px 8px rgba(33,37,41,.12); cursor:pointer; }
@media (max-width:700px) {
  body.app-wordking-page .game-container { padding:72px 12px 30px; }
  body.app-wordking-page .game-header { align-items:flex-start; flex-direction:column; }
  body.app-wordking-page .game-content,
  body.app-wordking-page .form-grid { grid-template-columns:1fr; }
  body.app-wordking-page .form-grid > .range-section:has(.known-toggle-wrap),
  body.app-wordking-page .form-grid > .range-section:not(:has(.known-toggle-wrap)) { grid-column:auto; }
  body.app-wordking-page .game-form { grid-column:auto; }
  body.app-wordking-page .mission-brief { align-items:flex-start; flex-direction:column; }
}

/* WordKing quiz/result screen. */
body.app-wordking-play-page { text-align:center; background-image:none !important; }
body.app-wordking-play-page.tension-warm,
body.app-wordking-play-page.tension-high,
body.app-wordking-play-page.tension-critical { background-image:none !important; }
body.app-wordking-play-page .small-note {
  width:min(700px,calc(100% - 32px));
  margin:78px auto 16px;
  padding:10px 14px;
  border:1px solid var(--site-border);
  border-radius:6px;
  background:var(--site-surface2);
  color:var(--site-muted);
  font-size:.8rem;
  font-weight:700;
}
body.app-wordking-play-page .game-hud {
  position:sticky; top:66px; z-index:20;
  width:min(700px,calc(100% - 32px));
  margin:0 auto 14px; padding:12px 16px;
  border:1px solid var(--site-border); border-radius:7px;
  background:var(--site-surface); box-shadow:0 1px 3px rgba(33,37,41,.08);
}
body.app-wordking-play-page .hud-row { color:var(--site-text); }
body.app-wordking-play-page .game-hud progress { height:6px; margin-top:10px; background:var(--site-surface2); accent-color:var(--site-accent); }
body.app-wordking-play-page progress::-webkit-progress-bar { background:var(--site-surface2); }
body.app-wordking-play-page progress::-webkit-progress-value { background:var(--site-accent); }
body.app-wordking-play-page progress::-moz-progress-bar { background:var(--site-accent); }
body.app-wordking-play-page .quiz-timer { color:var(--site-accent); font-family:inherit; font-size:1rem; }
body.app-wordking-play-page .sound-toggle { min-height:32px; padding:6px 10px; border:1px solid var(--site-border); border-radius:5px; background:var(--site-surface2); color:var(--site-muted); font:inherit; font-size:.72rem; cursor:pointer; }
body.app-wordking-play-page .play-hint { margin:10px auto; color:var(--site-muted); font-size:.75rem; }
body.app-wordking-play-page .question-card {
  width:min(700px,calc(100% - 32px));
  margin:14px auto; padding:20px;
  border:1px solid var(--site-border); border-radius:8px;
  background:var(--site-surface); box-shadow:0 1px 3px rgba(33,37,41,.08);
  text-align:left;
}
body.app-wordking-play-page .question-number { margin-bottom:10px; color:var(--site-accent); font-size:.72rem; font-weight:800; letter-spacing:.08em; }
body.app-wordking-play-page .question-card .word { display:block; width:100%; padding:12px 8px 18px; border:0; background:transparent; color:var(--site-text); font-size:1.7rem; font-weight:700; line-height:1.3; text-align:center; cursor:pointer; }
body.app-wordking-play-page .question-card .word:hover { color:var(--site-accent); }
body.app-wordking-play-page .option { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:7px 0; padding:12px 14px; border:1px solid var(--site-border); border-radius:6px; background:var(--site-surface2); color:var(--site-text); cursor:pointer; }
body.app-wordking-play-page .option:hover,
body.app-wordking-play-page .option.is-selected { border-color:var(--site-accent); background:var(--site-surface); color:var(--site-accent); }
body.app-wordking-play-page .option input { accent-color:var(--site-accent); }
body.app-wordking-play-page .question-card input[type="text"] { width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--site-border); border-radius:6px; background:var(--site-surface); color:var(--site-text); font:inherit; }
body.app-wordking-play-page .next-btn,
body.app-wordking-play-page #finishQuiz { display:block; width:100%; margin-top:14px; padding:12px 14px; border:1px solid var(--site-accent); border-radius:6px; background:var(--site-accent); color:#fff; font:inherit; font-weight:800; text-align:center; text-decoration:none; cursor:pointer; }
body.app-wordking-play-page .next-btn:hover,
body.app-wordking-play-page #finishQuiz:hover { filter:brightness(1.06); }
@media (max-width:600px) {
  body.app-wordking-play-page .small-note { margin-top:72px; }
  body.app-wordking-play-page .question-card,
  body.app-wordking-play-page .game-hud { width:calc(100% - 24px); }
}

/* Public archive pages inherit the exact index_new neutral/blue tokens. */
body.open-data-page {
  --bg:var(--site-bg); --bg2:#f1f3f5; --surface:var(--site-surface); --surface2:#f1f3f5;
  --border:var(--site-border); --text:var(--site-text); --text-2:var(--site-text-2);
  --text-3:var(--site-muted); --accent:var(--site-accent); --accent-d:#2f66a8;
  --blue:var(--site-accent); --shadow:0 1px 3px rgba(33,37,41,.08); --shadow-h:0 4px 14px rgba(33,37,41,.10); --hh:58px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif !important;
}
body.open-data-page main { padding-top:70px; }
body.open-data-page .breadcrumb {
  display: inline-flex;
  width: fit-content;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

/* Exam archive pages use the same restrained BTStudy visual system. */
body.exams-page,
body.exam-page {
  background: var(--site-bg) !important;
  color: var(--site-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif !important;
}
body.exams-page .container,
body.exam-page .page-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 82px 22px 64px;
}
body.exams-page .hero,
body.exam-page > .hero {
  margin: 58px auto 0;
  max-width: 1080px;
  padding: 28px 22px 24px;
  background: var(--site-surface) !important;
  color: var(--site-text) !important;
  border: 1px solid var(--site-border);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(33,37,41,.08);
}
body.exams-page .hero::before,
body.exam-page .hero::before { display:none; }
body.exams-page .hero h1,
body.exam-page .hero h1 { color:var(--site-text); font-size:clamp(1.35rem,2.4vw,2rem); }
body.exams-page .hero p,
body.exam-page .hero-summary { color:var(--site-muted); }
body.exams-page .card,
body.exam-page .card,
body.exam-page .section { background:var(--site-surface); border-color:var(--site-border); box-shadow:0 1px 3px rgba(33,37,41,.08); }
body.exams-page a,
body.exam-page a { color:var(--site-accent); }
body.exams-page .breadcrumb,
body.exam-page .breadcrumb { color:var(--site-muted); }
body.exams-page .breadcrumb a,
body.exam-page .breadcrumb a { color:var(--site-accent); }
body.exams-page .hero-badge,
body.exams-page .card-hot { color:var(--site-accent); background:var(--site-surface2); border-color:var(--site-border); }
body.exams-page .grid { gap:14px; }
body.exams-page .card:hover { border-color:var(--site-accent); box-shadow:0 4px 14px rgba(33,37,41,.10); }
@media (max-width:640px) {
  body.exams-page .container,
  body.exam-page .page-wrap { padding-left:14px; padding-right:14px; }
  body.exams-page .hero,
  body.exam-page > .hero { margin-left:14px; margin-right:14px; }
}

body.lc-factory-select-page,
body.lc-factory-page { background:var(--site-bg) !important; color:var(--site-text) !important; }
body.lc-factory-select-page main,
body.lc-factory-page main { max-width:1080px; margin:0 auto; padding:82px 22px 64px; }
body.lc-factory-page main { padding-top:78px; }
body.lc-factory-select-page .exam-card,
body.lc-factory-select-page .admin-card,
body.lc-factory-page .card { background:var(--site-surface) !important; border-color:var(--site-border) !important; color:var(--site-text) !important; box-shadow:0 1px 3px rgba(33,37,41,.08); }
body.lc-factory-select-page .card-name,
body.lc-factory-select-page .card-meta,
body.lc-factory-select-page .page-title,
body.lc-factory-page .card-head-title { color:var(--site-text) !important; }
body.lc-factory-select-page .card-label,
body.lc-factory-select-page .page-sub,
body.lc-factory-page .timer-label { color:var(--site-muted) !important; }
body.lc-factory-select-page .card-icon,
body.lc-factory-select-page .card-arrow,
body.lc-factory-page .card-head-icon { color:var(--site-accent) !important; }
body.lc-factory-select-page .exam-card:hover { border-color:var(--site-accent) !important; }
body.lc-factory-select-page .admin-setting-row { display:grid; grid-template-columns:140px minmax(0,1fr) auto; align-items:center; gap:10px; margin-top:10px; }
body.lc-factory-select-page .admin-setting-row label { color:var(--site-muted); font-size:.78rem; font-weight:700; }
body.lc-factory-select-page .admin-setting-row .admin-input { min-width:0; }
@media (max-width:640px) {
  body.lc-factory-select-page main,
  body.lc-factory-page main { padding-left:14px; padding-right:14px; }
  body.lc-factory-select-page .admin-setting-row { grid-template-columns:1fr auto; }
  body.lc-factory-select-page .admin-setting-row label { grid-column:1 / -1; }
}
body.sat2-answer-page { display:flex !important; flex-direction:column !important; min-height:100vh !important; align-items:stretch !important; justify-content:flex-start !important; background:var(--site-bg) !important; color:var(--site-text) !important; }
body.sat2-answer-page .site-footer {
  flex:0 0 auto;
  margin-bottom:0;
  padding-bottom:18px;
}
body.sat2-answer-page main { max-width:520px; width:100%; flex:1 0 auto; margin:0 auto; padding:86px 20px 40px; }
body.sat2-answer-page .card { background:var(--site-surface) !important; border-color:var(--site-border) !important; color:var(--site-text) !important; box-shadow:0 1px 3px rgba(33,37,41,.08); }
body.sat2-answer-page .exam-badge { color:var(--site-accent); background:var(--site-surface2); border-color:var(--site-border); }
body.sat2-answer-page .card-title { color:var(--site-text) !important; }
body.sat2-answer-page .info-item { color:var(--site-muted); }
body.sat2-answer-page .card { display:flex; flex-direction:column; align-items:center; gap:22px; padding:30px 24px; border-radius:8px; }
body.sat2-answer-page .card-icon { display:grid; place-items:center; width:58px; height:58px; border:1px solid var(--site-border); border-radius:50%; background:var(--site-surface2); color:var(--site-accent); font-size:1.4rem; }
body.sat2-answer-page .card-title { text-align:center; font-size:1.2rem; font-weight:800; line-height:1.5; }
body.sat2-answer-page .warn-box { display:flex; width:100%; gap:12px; padding:14px; border:1px solid var(--site-border); border-radius:6px; background:var(--site-surface2); }
body.sat2-answer-page .warn-box-icon { color:var(--site-accent); margin-top:3px; }
body.sat2-answer-page .warn-box-title { color:var(--site-text); font-weight:800; }
body.sat2-answer-page .warn-box-desc,
body.sat2-answer-page .confirm-desc { color:var(--site-muted); font-size:.82rem; line-height:1.7; }
body.sat2-answer-page .info-list { display:grid; gap:9px; width:100%; }
body.sat2-answer-page .info-item { display:flex; gap:9px; align-items:center; font-size:.82rem; }
body.sat2-answer-page .info-item i { color:var(--site-accent); }
body.sat2-answer-page .submit-btn,
body.sat2-answer-page .btn-confirm,
body.sat2-answer-page .btn-cancel { border:1px solid var(--site-border); border-radius:6px; padding:12px 16px; font:inherit; cursor:pointer; }
body.sat2-answer-page .submit-btn { display:flex; justify-content:center; align-items:center; gap:10px; width:100%; background:var(--site-accent); color:#fff; font-weight:800; }
body.sat2-answer-page .overlay,
body.sat2-answer-page .success-overlay { display:none; position:fixed; inset:0; z-index:2000; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.48); }
body.sat2-answer-page .overlay.active,
body.sat2-answer-page .success-overlay.active { display:flex; }
body.sat2-answer-page .confirm-box,
body.sat2-answer-page .success-box { width:min(400px,100%); padding:24px; border:1px solid var(--site-border); border-radius:8px; background:var(--site-surface); color:var(--site-text); text-align:center; }
body.sat2-answer-page .confirm-buttons { display:flex; gap:8px; margin-top:18px; }
body.sat2-answer-page .confirm-buttons button { flex:1; }
body.sat2-answer-page .btn-confirm { background:var(--site-accent); color:#fff; }
body.sat2-answer-page .btn-cancel { background:var(--site-surface2); color:var(--site-text); }
body.sat2-answer-post-page { background:var(--site-bg) !important; color:var(--site-text) !important; }
body.sat2-answer-post-page #hdr.site-header { z-index:400 !important; }
body.sat2-answer-post-page .timer-bar { top:58px !important; z-index:300 !important; background:var(--site-surface); border-color:var(--site-border); }
body.sat2-answer-post-page main { padding-top:132px; background:transparent; }
body.sat2-answer-post-page .q-card,
body.sat2-answer-post-page .submit-section,
body.sat2-answer-post-page .page-header { background:var(--site-surface); border-color:var(--site-border); color:var(--site-text); box-shadow:0 1px 3px rgba(33,37,41,.08); }
body.sat2-answer-post-page .page-header { display:flex; align-items:center; justify-content:space-between; gap:16px; width:calc(100% - 32px); margin:0 auto 14px; padding:14px 16px; border:1px solid var(--site-border); border-radius:8px; }
body.sat2-answer-post-page .exam-title { display:flex; align-items:center; gap:8px; color:var(--site-muted); font-size:.76rem; font-weight:700; letter-spacing:.04em; }
body.sat2-answer-post-page .exam-title i { color:var(--site-accent); font-size:.9rem; }
body.sat2-answer-post-page .exam-name { color:var(--site-text); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9rem; font-weight:800; letter-spacing:.03em; }
body.sat2-answer-post-page .exam-title,
body.sat2-answer-post-page .exam-name,
body.sat2-answer-post-page .q-num-badge,
body.sat2-answer-post-page .choice-text { color:var(--site-text); }
body.sat2-answer-post-page .choice-label { background:var(--site-surface2); border-color:var(--site-border); color:var(--site-text); }
body.sat2-answer-post-page .choice-label:has(input:checked) { border-color:var(--site-accent); background:color-mix(in srgb,var(--site-accent) 10%,var(--site-surface)); }
body.sat2-answer-post-page .submit-btn { background:var(--site-accent); color:#fff; }
body.sat2-answer-post-page .incomplete-warn,
body.sat2-answer-post-page .submit-hint { color:var(--site-muted); }
body.schools-page { background:var(--site-bg) !important; color:var(--site-text) !important; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif !important; }
body.schools-page .container { max-width:1080px; margin:0 auto; padding:82px 22px 64px; }
body.schools-page .hero { margin:0 0 22px; padding:26px 22px 22px; background:var(--site-surface) !important; color:var(--site-text) !important; border:1px solid var(--site-border); border-radius:8px; box-shadow:0 1px 3px rgba(33,37,41,.08); }
body.schools-page .hero-badge { background:var(--site-surface2); border:1px solid var(--site-border); color:var(--site-accent); }
body.schools-page .hero h1 { color:var(--site-text); }
body.schools-page .hero-sub,
body.schools-page .intro-section p { color:var(--site-muted); }
body.schools-page .card,
body.schools-page .intro-section,
body.schools-page .seo-section { background:var(--site-surface); border-color:var(--site-border); color:var(--site-text); box-shadow:0 1px 3px rgba(33,37,41,.08); }
body.schools-page a { color:var(--site-accent); }
body.schools-page .grid { gap:14px; }
@media (max-width:640px) { body.schools-page .container { padding-left:14px; padding-right:14px; } }
body.alumni2-page { background:var(--site-bg) !important; color:var(--site-text) !important; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif !important; }
body.alumni2-page main { max-width:980px; margin:0 auto; padding:82px 22px 64px; }
body.alumni2-page .hero { margin:0 0 18px; padding:24px 20px; background:var(--site-surface) !important; border:1px solid var(--site-border); border-radius:8px; box-shadow:0 1px 3px rgba(33,37,41,.08); }
body.alumni2-page .hero-trophy { color:var(--site-accent); }
body.alumni2-page .hero-eyebrow,
body.alumni2-page .hero-title { color:var(--site-text); }
body.alumni2-page .hero-title span { color:var(--site-accent); }
body.alumni2-page .alumni-card,
body.alumni2-page .footer-note { background:var(--site-surface); border-color:var(--site-border); color:var(--site-text); box-shadow:0 1px 3px rgba(33,37,41,.08); }
body.alumni2-page .stats-bar { background:transparent; border:0; box-shadow:none; }
body.alumni2-page .card-name,
body.alumni2-page .card-univ,
body.alumni2-page .card-dept { color:var(--site-text); }
body.alumni2-page .card-note,
body.alumni2-page .footer-note li { color:var(--site-muted); }
@media (max-width:640px) { body.alumni2-page main { padding-left:14px; padding-right:14px; } }
body.mystudent-page { background:var(--site-bg) !important; color:var(--site-text) !important; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif !important; }
body.mystudent-page main { max-width:980px; margin:0 auto; padding:82px 22px 64px; }
body.mystudent-page .hero { margin:0 0 18px; padding:24px 20px; background:var(--site-surface) !important; border:1px solid var(--site-border); border-radius:8px; box-shadow:0 1px 3px rgba(33,37,41,.08); }
body.mystudent-page .hero-icon { color:var(--site-accent); }
body.mystudent-page .hero-eyebrow,
body.mystudent-page .hero-title { color:var(--site-text); }
body.mystudent-page .hero-title span { color:var(--site-accent); }
body.mystudent-page .hero-sub { color:var(--site-muted); }
body.mystudent-page .shuffle-btn { border-color:var(--site-border); background:var(--site-surface); color:var(--site-accent); }
body.mystudent-page .student-card { background:var(--site-surface); border-color:var(--site-border); color:var(--site-text); box-shadow:0 1px 3px rgba(33,37,41,.08); }
body.mystudent-page .card-name,
body.mystudent-page .card-detail { color:var(--site-text); }
body.mystudent-page .card-score { color:var(--site-accent); }
body.mystudent-page .exam-badge { background:var(--site-surface2); border-color:var(--site-border); color:var(--site-muted); }
@media (max-width:640px) { body.mystudent-page main { padding-left:14px; padding-right:14px; } }
body.board-read-page,
body.board-read2-page,
body:has(form[action="/board_write2"]) { background:var(--site-bg) !important; color:var(--site-text) !important; }
body.board-read-page main,
body.board-read2-page main,
body:has(form[action="/board_write2"]) form { color:var(--site-text); }
body.board-read-page .page-head,
body.board-read-page .post-row,
body.board-read2-page .post-card,
body.board-read2-page .action-card,
body:has(form[action="/board_write2"]) form { background:var(--site-surface) !important; border-color:var(--site-border) !important; color:var(--site-text) !important; box-shadow:0 1px 3px rgba(33,37,41,.08); }
body.board-read-page .page-title,
body.board-read-page .post-title,
body.board-read2-page .post-title,
body.board-read2-page .post-body { color:var(--site-text) !important; }
body.board-read-page .page-head { margin-bottom:18px; padding:22px 24px 20px; border:1px solid var(--site-border); border-radius:8px; background:var(--site-surface); box-shadow:0 1px 3px rgba(33,37,41,.08); }
body.board-read-page .page-eyebrow { color:var(--site-accent) !important; font-size:.68rem; font-weight:800; letter-spacing:.08em; }
body.board-read-page .page-title { margin:8px 0 4px; color:var(--site-text) !important; font-size:clamp(1.35rem,3vw,1.8rem); letter-spacing:-.04em; }
body.board-read-page .page-sub { color:var(--site-muted) !important; font-size:.78rem; }
body.board-read-page .board-pagination { display:flex; justify-content:center; align-items:center; gap:5px; margin:22px 0 4px; }
body.board-read-page .board-pagination a { display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:32px; padding:0 8px; border:1px solid var(--site-border); border-radius:5px; background:var(--site-surface); color:var(--site-muted); font-size:.75rem; text-decoration:none; }
body.board-read-page .board-pagination a:hover,
body.board-read-page .board-pagination a.active { border-color:var(--site-accent); background:var(--site-accent); color:#fff; }
body.board-read-page .page-sub,
body.board-read-page .post-author,
body.board-read-page .post-score,
body.board-read2-page .post-meta,
body.board-read2-page .meta-item { color:var(--site-muted) !important; }
body.board-read-page .write-btn,
body.board-read2-page .btn-edit,
body.board-read2-page .back-link,
body:has(form[action="/board_write2"]) input[type="submit"] { background:var(--site-accent) !important; color:#fff !important; border-color:var(--site-accent) !important; }
body.board-read2-page .pw-input,
body:has(form[action="/board_write2"]) textarea,
body:has(form[action="/board_write2"]) input[type="password"] { border:1px solid var(--site-border); background:var(--site-surface); color:var(--site-text); }
body.board-read2-page > header#hdr:not(.site-header) { display:none; }
body.board-read2-page main { padding-top:64px !important; }
body.intro-page { background:var(--site-bg) !important; color:var(--site-text) !important; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif !important; }
body.intro-page .hero-badge { margin-top:58px; scroll-margin-top:58px; background:linear-gradient(135deg,#254f7d 0%,var(--site-accent) 100%) !important; }
body.intro-page .rank-pill { background:#fff !important; color:#2f66a8 !important; border:1px solid rgba(255,255,255,.8); box-shadow:0 2px 10px rgba(15,55,95,.2); }
body.intro-page .hero-badge h1 span { color:#d8e6f5 !important; }
body.intro-page .cta-banner,
body.intro-page .intro-box,
body.intro-page .schedule-card,
body.intro-page .content-wrap > .card { background:var(--site-surface) !important; color:var(--site-text) !important; border-color:var(--site-border) !important; }
body.intro-page .section-title,
body.intro-page .card-header { color:var(--site-text) !important; }
body.intro-page .cta-number,
body.intro-page a { color:var(--site-accent); }
body.intro-page .img-strip { background:var(--site-bg) !important; }
html:has(body.intro-page) { scroll-snap-type:y mandatory; scroll-behavior:smooth; }
body.intro-page { scroll-snap-type:y mandatory; }
body.intro-page .img-strip { height:auto; max-height:none; overflow:visible; scroll-snap-type:none; padding:0; }
body.intro-page .hero-badge,
body.intro-page .cta-banner,
body.intro-page .img-strip img,
body.intro-page .content-wrap > * { scroll-snap-align:start; scroll-snap-stop:always; }
body.intro-page .img-strip img { display:block; width:100%; max-width:1100px; height:auto; margin:0 auto 16px; padding:0; object-fit:contain; object-position:center; border-radius:8px; box-shadow:0 2px 16px rgba(33,37,41,.08); }
body.intro-page .float-cta a { background:var(--site-accent) !important; color:#fff !important; border:1px solid rgba(255,255,255,.35); box-shadow:0 6px 20px rgba(57,120,197,.34); }
body.intro-page .float-cta a:hover { background:#2f66a8 !important; }
body.intro-page .float-cta .pulse-dot { background:#fff !important; box-shadow:0 0 0 4px rgba(255,255,255,.22); }
body.vipsearch-admin-page { background:var(--site-bg) !important; color:var(--site-text) !important; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif !important; }
body.vipsearch-admin-page {
  --bg-primary:var(--site-bg);
  --bg-secondary:var(--site-surface2);
  --bg-card:var(--site-surface);
  --text-primary:var(--site-text);
  --text-secondary:var(--site-muted);
  --border-color:var(--site-border);
  --accent-color:var(--site-accent);
  --success-color:#4a9b73;
  --danger-color:#dc3545;
  --warning-color:color-mix(in srgb,var(--site-accent) 12%,var(--site-surface));
}
body.vipsearch-admin-page main { max-width:1080px; margin:0 auto; padding:82px 22px 64px; }
body.vipsearch-admin-page .vip-container { max-width:none; padding:0; }
body.vipsearch-admin-page .header,
body.vipsearch-admin-page .card,
body.vipsearch-admin-page .info-card,
body.vipsearch-admin-page .report-card { background:var(--site-surface) !important; border-color:var(--site-border) !important; color:var(--site-text) !important; box-shadow:0 1px 3px rgba(33,37,41,.08); }
body.vipsearch-admin-page .header h1,
body.vipsearch-admin-page h2,
body.vipsearch-admin-page h3 { color:var(--site-text); }
body.vipsearch-admin-page p,
body.vipsearch-admin-page .muted,
body.vipsearch-admin-page .info-label { color:var(--site-muted); }
body.vipsearch-admin-page a { color:var(--site-accent); }
body.vipsearch-admin-page .admin-link { border-color:var(--site-border); background:var(--site-surface2); color:var(--site-accent); }
body.vipsearch-admin-page .header::before { background:linear-gradient(180deg,var(--site-accent),#8eaed0) !important; }
body.vipsearch-admin-page .notice-box { background:linear-gradient(135deg,color-mix(in srgb,var(--site-accent) 14%,var(--site-surface)),var(--site-surface2)) !important; color:var(--site-text) !important; border-color:var(--site-border) !important; }
body.vipsearch-admin-page .score-bar-success { background:linear-gradient(90deg,var(--site-accent),#8eaed0) !important; }
body.vipsearch-admin-page .score-bar-danger { background:var(--site-muted) !important; }
body.vipsearch-admin-page .score-bar-success { transform-origin:left center; animation:vip-score-fill .9s cubic-bezier(.22,.7,.25,1) both; }
@keyframes vip-score-fill { from { transform:scaleX(0); } to { transform:scaleX(1); } }
body.vipsearch-admin-page .answer-wrong { color:var(--danger-color) !important; border-color:var(--danger-color) !important; }
body.vipsearch-admin-page .wrong-answers,
body.vipsearch-admin-page .wrong-answers span { color:var(--site-muted) !important; }
body.vipsearch-admin-page .theme-toggle { background:var(--site-accent) !important; }
@media (max-width:640px) { body.vipsearch-admin-page main { padding-left:14px; padding-right:14px; } }
body.open-data-page .card { border-radius:8px; box-shadow:var(--shadow); }
body.open-data-page .search-box button { background:var(--site-accent); color:#fff; }
body.open-data-page .tag-badge { border-color:var(--site-border); background:var(--site-surface2); color:var(--site-accent); }
body.open-data-page .board-row:hover { background:var(--site-surface2); }

body.site-page .wordking-result-page { padding:78px 16px 44px; }
body.site-page .wordking-result-card {
  width:min(700px,100%); margin:0 auto; padding:28px 24px;
  border:1px solid var(--site-border); border-radius:8px;
  background:var(--site-surface); color:var(--site-text);
  box-shadow:0 1px 3px rgba(33,37,41,.08); text-align:center;
}
body.site-page .result-mark { display:grid; place-items:center; width:44px; height:44px; margin:0 auto 14px; border:1px solid var(--site-accent); border-radius:50%; color:var(--site-accent); font-size:.68rem; font-weight:800; }
body.site-page .result-kicker { margin:0 0 6px; color:var(--site-accent); font-size:.7rem; font-weight:800; letter-spacing:.1em; }
body.site-page .wordking-result-card h1 { margin:0; color:var(--site-text); font-size:1.35rem; }
body.site-page .result-test { margin:8px 0 20px; color:var(--site-muted); font-size:.78rem; overflow-wrap:anywhere; }
body.site-page .result-score { display:flex; align-items:baseline; justify-content:center; gap:12px; padding:18px 0; border-top:1px solid var(--site-border); border-bottom:1px solid var(--site-border); }
body.site-page .result-score strong { color:var(--site-accent); font-size:2.4rem; line-height:1; }
body.site-page .result-score small { margin-left:3px; font-size:.9rem; }
body.site-page .result-score span { color:var(--site-muted); font-size:.8rem; }
body.site-page .result-ox { display:flex; flex-wrap:wrap; justify-content:center; gap:4px; margin:18px auto; }
body.site-page .result-ox span { display:grid; place-items:center; width:22px; height:22px; border-radius:4px; font-size:.68rem; font-weight:800; }
body.site-page .result-ox .is-correct { background:#e8f5ef; color:#198754; }
body.site-page .result-ox .is-wrong { background:#f8e9e7; color:#c0392b; }
html.dark body.site-page .result-ox .is-correct { background:rgba(25,135,84,.18); color:#62c995; }
html.dark body.site-page .result-ox .is-wrong { background:rgba(192,57,43,.18); color:#f08d82; }
body.site-page .result-review { margin-top:20px; padding:14px; border:1px solid var(--site-border); border-radius:6px; background:var(--site-surface2); text-align:left; }
body.site-page .result-review h2 { margin:0 0 9px; color:var(--site-text); font-size:.85rem; }
body.site-page .result-review p { margin:5px 0; color:var(--site-muted); font-size:.78rem; line-height:1.55; }
body.site-page .result-good { margin:20px 0; color:var(--site-accent); font-size:.82rem; font-weight:700; }
body.site-page .result-back { display:inline-flex; align-items:center; gap:8px; margin-top:20px; padding:10px 14px; border:1px solid var(--site-accent); border-radius:6px; background:var(--site-accent); color:#fff !important; font-size:.78rem; font-weight:800; text-decoration:none; }
body.site-page .result-back:hover { filter:brightness(1.06); }
@media (max-width:600px) {
  body.site-page .wordking-result-page { padding:72px 12px 30px; }
  body.site-page .wordking-result-card { padding:24px 16px; }
  body.site-page .result-score { flex-direction:column; align-items:center; gap:6px; }
}

/* Wordy vocabulary screens use the standard palette while preserving their
   flashcard and range-selection interactions. */
body.wordy-index-page,
body.wordy-page {
  --bg: var(--site-bg);
  --surface: var(--site-surface);
  --surface2: #f1f3f5;
  --border: var(--site-border);
  --text: var(--site-text);
  --text-2: var(--site-muted);
  --text-3: #8a949f;
  --accent: var(--site-accent);
  --accent-d: #2f66a8;
  --blue: var(--site-accent);
  --blue-d: #2f66a8;
  --green: #198754;
  --red: #c0392b;
  --shadow: 0 1px 3px rgba(33,37,41,.08);
}
html.dark body.wordy-index-page,
html.dark body.wordy-page { --surface2:#1b222a; --text-3:#7d8995; --green:#62c995; --red:#f08d82; }
body.wordy-page #startScreen { padding-top:82px; }
body.wordy-page .learn-screen { padding-top:70px; }
body.wordy-index-page .wordy-emblem { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:170px; gap:8px; color:var(--text); }
body.wordy-index-page .wordy-emblem i { color:var(--site-accent); font-size:2.8rem; }
body.wordy-index-page .wordy-emblem strong { font-size:1.2rem; letter-spacing:.06em; }
body.wordy-index-page .wordy-emblem span { color:var(--text-2); font-size:.66rem; letter-spacing:.12em; }

/* Official lecture portal shell. */
body.ingang-page { --blue:var(--site-accent); --blue-bright:var(--site-accent); --blue-light:var(--site-surface2); --blue-dark:var(--site-text); --accent:var(--site-accent); --text:var(--site-text); --text-muted:var(--site-muted); --border:var(--site-border); --bg:var(--site-bg); }
body.ingang-page .topnav { display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1; }
body.ingang-page .topnav { height:42px; padding:0 20px; background:var(--site-surface); border-bottom:1px solid var(--site-border); box-shadow:none; }
body.ingang-page .topnav .home-btn { padding:6px 10px; border:1px solid var(--site-border); border-radius:5px; background:var(--site-surface2); color:var(--site-muted); font-size:.72rem; }
body.ingang-page .topnav .brand { color:var(--site-text); font-size:.8rem; }
body.ingang-page .topnav .list-toggle { padding:6px 10px; border:1px solid var(--site-border); border-radius:5px; background:var(--site-surface2); color:var(--site-muted); font-size:.72rem; }
body.ingang-page .hero { margin-top:58px; padding:26px 20px 22px; background:var(--site-surface); color:var(--site-text); border-bottom:1px solid var(--site-border); }
body.ingang-page .hero::before, body.ingang-page .hero::after { display:none; }
body.ingang-page .pill { margin-bottom:8px; padding:4px 10px; border:1px solid var(--site-border); border-radius:5px; background:var(--site-surface2); color:var(--site-accent); font-size:.68rem; }
body.ingang-page .hero h1 { color:var(--site-text); font-size:clamp(1.25rem,4vw,1.8rem); }
body.ingang-page .hero h1 span { color:var(--site-accent); }
body.ingang-page .hero p { color:var(--site-muted); }
body.ingang-page .page-wrap { display:grid; align-items:start; }
body.ingang-page .page-wrap { max-width:980px; padding:20px 16px 50px; grid-template-columns:minmax(0,1fr) 300px; gap:16px; }
body.ingang-page .player-card { overflow:hidden; }
body.ingang-page .player-header { display:flex; align-items:center; gap:10px; padding:11px 16px; }
body.ingang-page .live-dot { width:8px; height:8px; flex:0 0 8px; border-radius:50%; background:var(--site-accent); }
body.ingang-page .video-wrap { position:relative; padding-top:56.25%; background:#0b0e12; }
body.ingang-page .video-wrap iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
body.ingang-page .sidebar-header { display:flex; align-items:center; justify-content:space-between; }
body.ingang-page .search-wrap { padding:10px; }
body.ingang-page .search-box { display:flex; align-items:center; gap:7px; padding:7px 9px; border:1px solid var(--site-border); border-radius:6px; }
body.ingang-page .search-box input { min-width:0; flex:1; border:0; outline:0; background:transparent; font:inherit; font-size:.76rem; }
body.ingang-page .clear-btn { display:none; border:0; background:transparent; cursor:pointer; }
body.ingang-page .clear-btn.visible { display:block; }
body.ingang-page .search-result-count { min-height:16px; margin-top:4px; color:var(--site-muted); font-size:.68rem; }
body.ingang-page .playlist { max-height:480px; overflow-y:auto; }
body.ingang-page .playlist-item { display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer; }
body.ingang-page .item-num { display:flex; align-items:center; justify-content:center; width:26px; height:26px; flex:0 0 26px; border-radius:50%; font-size:.7rem; font-weight:800; }
body.ingang-page .item-title { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.78rem; }
body.ingang-page .play-icon { color:var(--site-accent); font-size:.72rem; opacity:0; }
body.ingang-page .playlist-item:hover .play-icon,
body.ingang-page .playlist-item.active .play-icon { opacity:1; }
body.ingang-page .status-msg { padding:24px; color:var(--site-muted); text-align:center; font-size:.8rem; }
body.ingang-page .spinner { width:24px; height:24px; margin:0 auto 10px; border:3px solid var(--site-border); border-top-color:var(--site-accent); border-radius:50%; animation:ingang-spin .8s linear infinite; }
@keyframes ingang-spin { to { transform:rotate(360deg); } }
body.ingang-page .drawer-overlay { display:none; position:fixed; inset:0; z-index:300; background:rgba(15,23,42,.42); }
body.ingang-page .drawer-overlay.open { display:block; }
body.ingang-page .drawer { position:fixed; inset:auto 0 0; z-index:301; transform:translateY(105%); transition:transform .2s; border:1px solid var(--site-border); border-bottom:0; border-radius:12px 12px 0 0; background:var(--site-surface); }
body.ingang-page .drawer.open { transform:translateY(0); }
body.ingang-page .drawer-header { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; }
body.ingang-page .drawer-header .close-btn { border:0; background:transparent; color:var(--site-muted); font-size:1rem; cursor:pointer; }
body.ingang-page .drawer-playlist { max-height:55vh; overflow-y:auto; }
body.ingang-page .bottom-bar { display:none; }
body.ingang-page .player-card,
body.ingang-page .playlist { border-color:var(--site-border); border-radius:7px; box-shadow:0 1px 3px rgba(33,37,41,.08); background:var(--site-surface); }
body.ingang-page .player-header,
body.ingang-page .sidebar-header { background:var(--site-surface2); color:var(--site-text); border-bottom:1px solid var(--site-border); }
body.ingang-page .now-title { color:var(--site-text); }
body.ingang-page .player-info { background:var(--site-surface); }
body.ingang-page .lecture-num { color:var(--site-accent); }
body.ingang-page .lecture-title { color:var(--site-text); }
body.ingang-page .instructor-tag { background:var(--site-surface2); color:var(--site-accent); }
body.ingang-page .count-badge { background:var(--site-accent); color:#fff; }
body.ingang-page .playlist-item { border-bottom-color:var(--site-border); }
body.ingang-page .playlist-item:hover { background:var(--site-surface2); }
body.ingang-page .playlist-item.active { background:var(--site-surface2); border-left-color:var(--site-accent); }
body.ingang-page .item-num { background:var(--site-surface2); color:var(--site-accent); }
body.ingang-page .playlist-item.active .item-num { background:var(--site-accent); color:#fff; }
body.ingang-page .item-title { color:var(--site-muted); }
body.ingang-page .playlist-item.active .item-title { color:var(--site-text); }
body.ingang-page .search-wrap { background:var(--site-surface); }
body.ingang-page .search-box { border-color:var(--site-border); background:var(--site-surface); }
body.ingang-page .search-box:focus-within { border-color:var(--site-accent); }
body.ingang-page .search-box input { color:var(--site-text); }
body.ingang-page .clear-btn { color:var(--site-muted); }
body.ingang-page .highlight { background:color-mix(in srgb,var(--site-accent) 16%,transparent); color:var(--site-accent); }
body.ingang-page > footer:not(.site-footer) { display:none; }
body.ingang-page .bottom-bar .bb-home,
body.ingang-page .bottom-bar .bb-list { background:var(--site-surface2); color:var(--site-text); border:1px solid var(--site-border); }
body.ingang-page .drawer { background:var(--site-surface); }
body.ingang-page .drawer-header { background:var(--site-surface2); color:var(--site-text); border-bottom-color:var(--site-border); }
@media (max-width:700px) {
  body.ingang-page .page-wrap { grid-template-columns:1fr; }
  body.ingang-page .topnav .list-toggle { display:inline-flex; }
  body.ingang-page .bottom-bar { display:flex; position:fixed; inset:auto 12px 12px; z-index:200; gap:8px; }
  body.ingang-page .bottom-bar .bb-home,
  body.ingang-page .bottom-bar .bb-list { flex:1; justify-content:center; padding:10px; border-radius:6px; text-align:center; }
}

/* Learning-training pages share the same restrained portal treatment. */
body.training-page,
body.site-page .training-page { color:var(--site-text); }
body.training-page a,
body.site-page .training-page a { color:var(--site-accent); text-decoration:none; }
body.training-page button,
body.training-page select,
body.site-page .training-page button,
body.site-page .training-page select { font-family:inherit; }
body.training-page .card,
body.training-page .panel,
body.training-page .content-card,
body.site-page .training-page .card,
body.site-page .training-page .panel,
body.site-page .training-page .content-card { border-color:var(--site-border); background:var(--site-surface); color:var(--site-text); box-shadow:0 2px 8px rgba(33,37,41,.07); }
body.training-page input,
body.training-page select,
body.site-page .training-page input,
body.site-page .training-page select { border-color:var(--site-border); background:var(--site-surface); color:var(--site-text); }
body.site-page .bubble-page { max-width:760px; margin:0 auto; padding:84px 16px 56px; }
body.site-page .bubble-card { padding:clamp(26px,5vw,48px); border:1px solid var(--site-border); border-radius:12px; background:var(--site-surface); box-shadow:0 4px 16px rgba(33,37,41,.08); }
body.site-page .bubble-heading { display:flex; align-items:center; gap:16px; padding-bottom:26px; border-bottom:1px solid var(--site-border); }
body.site-page .bubble-icon { display:grid; place-items:center; width:50px; height:50px; flex:0 0 50px; border:1px solid color-mix(in srgb,var(--site-accent) 34%,var(--site-border)); border-radius:10px; background:var(--site-surface2); color:var(--site-accent); font-size:1.2rem; }
body.site-page .bubble-eyebrow { margin:0 0 5px; color:var(--site-accent); font-size:.68rem; font-weight:800; letter-spacing:.12em; }
body.site-page .bubble-heading h1 { margin:0; color:var(--site-text); font-size:clamp(1.35rem,3vw,1.8rem); letter-spacing:-.03em; }
body.site-page .bubble-description { margin:8px 0 0; color:var(--site-muted); font-size:.84rem; }
body.site-page .bubble-form { display:grid; gap:10px; margin-top:28px; }
body.site-page .bubble-form label { color:var(--site-muted); font-size:.78rem; font-weight:700; }
body.site-page .bubble-select { width:100%; min-height:48px; padding:0 14px; border:1px solid var(--site-border); border-radius:7px; font-size:.92rem; }
body.site-page .bubble-start { display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; margin-top:10px; border:1px solid var(--site-accent); border-radius:7px; background:var(--site-accent); color:#fff; font-size:.9rem; font-weight:800; cursor:pointer; transition:filter .16s ease,transform .16s ease; }
body.site-page .bubble-start:hover { filter:brightness(.94); transform:translateY(-1px); }
body.site-page .bubble-start:focus-visible,
body.site-page .bubble-select:focus-visible { outline:3px solid color-mix(in srgb,var(--site-accent) 25%,transparent); outline-offset:2px; }
body.site-page .game-page-shell { min-height:calc(100vh - 116px); background:var(--site-bg); }
body.site-page:has(.game-page-shell) { background-image:none !important; }
body.site-page .game-page-shell {
  --bg:var(--site-bg); --card:var(--site-surface); --soft:var(--site-surface2);
  --ink:var(--site-text); --muted:var(--site-muted); --primary:var(--site-accent);
  --purple:var(--site-accent); --line:var(--site-border); --chip:var(--site-surface2);
  --chip-border:var(--site-border);
}
body.site-page .game-page-shell .game-container { max-width:1000px; padding:84px 16px 56px; }
body.site-page .game-page-shell .game-header { border:1px solid var(--site-border) !important; border-radius:10px !important; background:var(--site-surface) !important; box-shadow:0 2px 8px rgba(33,37,41,.07) !important; color:var(--site-text) !important; }
body.site-page .game-page-shell .game-header p { color:var(--site-muted) !important; }
body.site-page .game-page-shell .game-header h1 { color:var(--site-text) !important; }
body.site-page .game-page-shell .game-header h1 i { color:var(--site-accent) !important; }
body.site-page .game-page-shell .home { border-color:var(--site-border) !important; background:var(--site-surface2) !important; color:var(--site-accent) !important; }
body.site-page .game-page-shell .home { display:none !important; }
body.site-page .game-page-shell .card { border-color:var(--site-border) !important; border-radius:10px !important; background:var(--site-surface) !important; box-shadow:0 2px 8px rgba(33,37,41,.07) !important; color:var(--site-text) !important; }
body.site-page .game-page-shell .select { border-color:var(--site-border) !important; background:var(--site-surface) !important; color:var(--site-text) !important; }
body.site-page .game-page-shell .chip-grid { grid-template-columns:repeat(auto-fit,minmax(58px,1fr)); gap:6px; }
body.site-page .game-page-shell .chip { min-height:34px; padding:7px 4px !important; border-radius:6px !important; font-size:.74rem !important; }
body.site-page .game-page-shell .chip { border-color:var(--site-border) !important; border-radius:7px !important; background:var(--site-surface2) !important; color:var(--site-text) !important; }
body.site-page .game-page-shell .chip.selected { border-color:var(--site-accent) !important; background:var(--site-accent) !important; color:#fff !important; }
body.site-page .game-page-shell .start { border-radius:7px !important; background:var(--site-accent) !important; box-shadow:none !important; }
body.site-page .game-page-shell .score { background:var(--site-surface2) !important; color:var(--site-accent) !important; }
body.site-page.voice-quiz-page {
  --bg:var(--site-bg); --surface:var(--site-surface); --surface2:var(--site-surface2);
  --border:var(--site-border); --text:var(--site-text); --text-2:var(--site-text-2);
  --text-3:var(--site-muted); --accent:var(--site-accent); --accent-d:var(--site-accent);
  --blue:var(--site-accent); --amber:var(--site-accent); --green:#4a9b73;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif !important;
}
body.site-page.voice-quiz-page main { max-width:760px; }
body.site-page.voice-quiz-page .hero-title,
body.site-page.voice-quiz-page .start-btn { font-family:inherit; }
body.site-page.voice-quiz-page .mic-hero { background:var(--site-accent) !important; box-shadow:0 6px 18px color-mix(in srgb,var(--site-accent) 24%,transparent) !important; animation:none; }
body.site-page.voice-quiz-page .form-card { border-color:var(--site-border); background:var(--site-surface); box-shadow:0 2px 8px rgba(33,37,41,.07); }
body.site-page.voice-quiz-page .form-card-head { background:var(--site-surface2); border-bottom-color:var(--site-border); }
body.site-page.voice-quiz-page .form-card-head-icon.orange,
body.site-page.voice-quiz-page .form-card-head-icon.blue,
body.site-page.voice-quiz-page .form-card-head-icon.green { background:color-mix(in srgb,var(--site-accent) 10%,transparent); color:var(--site-accent); }
body.site-page.voice-quiz-page .form-card-head-title { font-family:inherit; color:var(--site-muted); }
body.site-page.voice-quiz-page .form-select { border-color:var(--site-border); background:var(--site-surface); color:var(--site-text); }
body.site-page.voice-quiz-page .form-select:focus { border-color:var(--site-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--site-accent) 14%,transparent); }
body.site-page.voice-quiz-page .range-chip,
body.site-page.voice-quiz-page .known-btn { border-color:var(--site-border); background:var(--site-surface2); color:var(--site-text-2); }
body.site-page.voice-quiz-page .range-chip:hover,
body.site-page.voice-quiz-page .range-chip.sel,
body.site-page.voice-quiz-page .known-btn.sel-all,
body.site-page.voice-quiz-page .known-btn.sel-exclude { border-color:var(--site-accent); background:var(--site-accent); color:#fff; box-shadow:none; }
body.site-page.voice-quiz-page .range-chip,
body.site-page.voice-quiz-page .sub-label { font-family:inherit; }
body.site-page.voice-quiz-page .pass-rule { background:color-mix(in srgb,var(--site-accent) 8%,transparent); border-color:color-mix(in srgb,var(--site-accent) 22%,var(--site-border)); color:var(--site-accent); }
body.site-page.voice-quiz-page .start-btn { border-radius:7px; background:var(--site-accent); box-shadow:none; }
body.site-page.voice-quiz-page .start-btn:hover { transform:translateY(-1px); box-shadow:0 4px 12px color-mix(in srgb,var(--site-accent) 22%,transparent); }
body.site-page.infinite-ranking-page { overflow-x:hidden; }
body.site-page.infinite-ranking-page {
  --bg-primary:var(--site-bg); --bg-secondary:var(--site-surface); --bg-tertiary:var(--site-surface2);
  --text-primary:var(--site-text); --text-secondary:var(--site-muted); --accent-primary:var(--site-accent);
  --accent-secondary:var(--site-accent); --accent-success:#4a9b73; --accent-warning:var(--site-accent);
  --accent-gold:var(--site-accent); --border-light:var(--site-border); --chip-bg:var(--site-surface2);
  --chip-border:var(--site-border); --chip-text:var(--site-text-2); --chip-sel-bg:var(--site-accent);
  --gradient-primary:var(--site-accent); --gradient-card:var(--site-surface); --gradient-gold:var(--site-accent);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif !important;
}
body.site-page.infinite-ranking-page .game-container { max-width:1000px; padding:84px 16px 56px; }
body.site-page.infinite-ranking-page .game-header { min-height:106px; margin-bottom:24px; padding:24px 28px !important; }
body.site-page.infinite-ranking-page .game-header h1 { font-family:inherit !important; font-size:clamp(1.25rem,4vw,1.8rem) !important; line-height:1.2 !important; text-shadow:none !important; animation:none !important; }
body.site-page.infinite-ranking-page .game-header h1 a { color:var(--site-text) !important; }
body.site-page.infinite-ranking-page .card { border-color:var(--site-border) !important; border-radius:10px !important; background:var(--site-surface) !important; box-shadow:0 2px 8px rgba(33,37,41,.07) !important; color:var(--site-text) !important; }
body.site-page.infinite-ranking-page .game-image img { animation:none; border-radius:7px; }
body.site-page.infinite-ranking-page .ranking-board h2 { font-family:inherit; background:none; -webkit-text-fill-color:initial; color:var(--site-text); }
body.site-page.infinite-ranking-page .ranking-item { border-left:4px solid var(--site-border) !important; border-radius:7px; background:var(--site-surface2); color:var(--site-text); }
body.site-page.infinite-ranking-page .ranking-item:nth-child(1),
body.site-page.infinite-ranking-page .ranking-item:nth-child(2),
body.site-page.infinite-ranking-page .ranking-item:nth-child(3) { border-left-color:var(--site-accent) !important; }
body.site-page.infinite-ranking-page .ranking-item:hover { background:var(--site-accent); color:#fff; transform:translateX(3px); }
body.site-page.infinite-ranking-page .rank-score { color:var(--site-muted); }
body.site-page.infinite-ranking-page .user-score::before { color:var(--site-accent); }
body.site-page.infinite-ranking-page .score { background:none; -webkit-text-fill-color:initial; color:var(--site-accent); }
body.site-page.infinite-ranking-page select { border:1px solid var(--site-border); border-radius:7px; background-color:var(--site-surface); color:var(--site-text); }
body.site-page.infinite-ranking-page .range-chip,
body.site-page.infinite-ranking-page .known-btn { border-color:var(--site-border); border-radius:7px; background:var(--site-surface2); color:var(--site-text-2); }
body.site-page.infinite-ranking-page .range-chip:hover,
body.site-page.infinite-ranking-page .range-chip.sel,
body.site-page.infinite-ranking-page .known-btn.sel-all,
body.site-page.infinite-ranking-page .known-btn.sel-exclude { border-color:var(--site-accent); background:var(--site-accent); color:#fff; box-shadow:none; }
body.site-page.infinite-ranking-page .start-button { border-radius:7px; background:var(--site-accent) !important; box-shadow:none; font-family:inherit; font-size:1rem; letter-spacing:0; }
body.site-page.infinite-ranking-page .start-button:hover { transform:translateY(-1px); box-shadow:0 4px 12px color-mix(in srgb,var(--site-accent) 22%,transparent); }
body.site-page.lol-page {
  --bg:var(--site-bg); --surface:var(--site-surface); --surface2:var(--site-surface2);
  --border:var(--site-border); --text:var(--site-text); --text-2:var(--site-muted);
  --text-3:var(--site-muted); --accent:var(--site-accent); --accent-d:var(--site-accent);
  --gold:var(--site-accent); --chip-bg:var(--site-surface2); --chip-border:var(--site-border);
  --chip-text:var(--site-text-2); --chip-sel:var(--site-accent);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif !important;
  background-image:none !important;
  padding-top:58px !important;
}
body.site-page.lol-page > .game-header { margin-top:0 !important; position:relative; z-index:1; }
body.site-page.lol-page .game-header { padding:22px 28px !important; margin-bottom:24px; border:1px solid var(--site-border); border-radius:10px; background:var(--site-surface) !important; box-shadow:0 2px 8px rgba(33,37,41,.07); }
body.site-page.lol-page .game-header::before { display:none; }
body.site-page.lol-page .header-title { color:var(--site-text); font-family:inherit; font-size:clamp(1.1rem,3vw,1.5rem); text-shadow:none; animation:none; }
body.site-page.lol-page .container { max-width:1000px; padding:0 16px 56px; position:relative; z-index:1; }
body.site-page.lol-page .layout { gap:16px; }
body.site-page.lol-page .card { border:1px solid var(--site-border); border-radius:10px; background:var(--site-surface); box-shadow:0 2px 8px rgba(33,37,41,.07); color:var(--site-text); }
body.site-page.lol-page .card:hover { transform:none; box-shadow:0 4px 12px rgba(33,37,41,.1); }
body.site-page.lol-page .img-card img { animation:none; filter:none; }
body.site-page.lol-page .img-card { position:relative; z-index:2; margin-top:0; }
body.site-page.lol-page .form-card-title { font-family:inherit; color:var(--site-muted); }
body.site-page.lol-page .form-card-title::before { background:var(--site-accent); }
body.site-page.lol-page .form-label { color:var(--site-muted); }
body.site-page.lol-page select { border-color:var(--site-border); border-radius:7px; background-color:var(--site-surface); color:var(--site-text); font-family:inherit; }
body.site-page.lol-page select:focus,
body.site-page.lol-page select:hover { border-color:var(--site-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--site-accent) 12%,transparent); }
body.site-page.lol-page .start-btn { border-radius:7px; background:var(--site-accent); box-shadow:none; font-family:inherit; letter-spacing:0; }
body.site-page.lol-page .start-btn:hover { transform:translateY(-1px); box-shadow:0 4px 12px color-mix(in srgb,var(--site-accent) 22%,transparent); }
body.site-page.lol-page .promise-list li { color:var(--site-muted); }
body.site-page.lol-page .promise-list li::before { color:var(--site-accent); }
body.site-page.lol-post-page {
  --bg:var(--site-bg); --surface:var(--site-surface); --surface2:var(--site-surface2);
  --border:var(--site-border); --text:var(--site-text); --text-2:var(--site-muted);
  --text-3:var(--site-muted); --accent:var(--site-accent); --accent-d:var(--site-accent);
  --blue:var(--site-accent); --green:#4a9b73; --red:#9a5c63; --gold:var(--site-accent);
  --shadow:0 2px 8px rgba(33,37,41,.07); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif !important;
  background-image:none !important;
}
body.site-page.lol-post-page .score-banner { position:sticky; top:58px; z-index:150; margin-top:58px; padding:10px 16px; border-bottom:1px solid var(--site-border); background:color-mix(in srgb,var(--site-surface) 94%,transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); font-family:inherit; }
body.site-page.lol-post-page .score-val { color:var(--site-text); }
body.site-page.lol-post-page .score-lbl { color:var(--site-muted); }
body.site-page.lol-post-page .score-dot.green,
body.site-page.lol-post-page .score-dot.total { background:var(--site-accent); }
body.site-page.lol-post-page .timer-item.warning .score-dot,
body.site-page.lol-post-page .timer-item.warning .score-val { color:#c85b64; background:#c85b64; }
body.site-page.lol-post-page .timer-item.warning .score-val { background:none; }
body.site-page.lol-post-page .main-wrap { max-width:760px; padding:24px 16px 56px; gap:18px; }
body.site-page.lol-post-page .sent-card,
body.site-page.lol-post-page .submit-section { border:1px solid var(--site-border); border-radius:10px; background:var(--site-surface); box-shadow:0 2px 8px rgba(33,37,41,.07); color:var(--site-text); scroll-margin-top:72px; }
body.site-page.lol-post-page .sent-head { background:var(--site-surface2); border-bottom-color:var(--site-border); }
body.site-page.lol-post-page .sent-num,
body.site-page.lol-post-page .sent-kor,
body.site-page.lol-post-page .clue-toggle { color:var(--site-muted); }
body.site-page.lol-post-page .sent-num span,
body.site-page.lol-post-page .clue-toggle:hover { color:var(--site-accent); }
body.site-page.lol-post-page .sent-speak-btn { background:color-mix(in srgb,var(--site-accent) 10%,transparent); color:var(--site-accent); }
body.site-page.lol-post-page .sent-speak-btn:hover { background:color-mix(in srgb,var(--site-accent) 18%,transparent); }
body.site-page.lol-post-page .blank-input { border-color:var(--site-border); background:var(--site-surface2); color:var(--site-text); }
body.site-page.lol-post-page .blank-input:focus { border-color:var(--site-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--site-accent) 14%,transparent); }
body.site-page.lol-post-page .blank-input.invalid { border-color:#c85b64 !important; background:color-mix(in srgb,#c85b64 8%,var(--site-surface)); box-shadow:0 0 0 3px color-mix(in srgb,#c85b64 14%,transparent); }
body.site-page.lol-post-page .blank-input.correct-anim { border-color:#4a9b73 !important; background:color-mix(in srgb,#4a9b73 8%,var(--site-surface)); }
body.site-page.lol-post-page .blank-speak { display:none; align-items:center; justify-content:center; width:24px; height:24px; margin-left:4px; padding:0; border:1px solid var(--site-border); border-radius:50%; background:var(--site-surface2); color:var(--site-accent); font-size:.62rem; vertical-align:middle; cursor:pointer; }
body.site-page.lol-post-page .blank-speak.show { display:inline-flex; animation:lol-speak-in .18s ease-out; }
body.site-page.lol-post-page .blank-speak:hover { border-color:var(--site-accent); background:color-mix(in srgb,var(--site-accent) 10%,var(--site-surface2)); }
@keyframes lol-speak-in { from { opacity:0; transform:scale(.8); } to { opacity:1; transform:scale(1); } }
body.site-page.lol-post-page .clue-chip,
body.site-page.lol-post-page .foot-btn { border-color:var(--site-border); background:var(--site-surface2); color:var(--site-muted); }
body.site-page.lol-post-page .clue-chip:hover,
body.site-page.lol-post-page .foot-btn:hover { border-color:var(--site-accent); color:var(--site-accent); background:var(--site-surface2); }
body.site-page.lol-post-page .clue-word-display { color:var(--site-text); }
body.site-page.lol-post-page .clue-hint-fill { background:var(--site-accent); }
body.site-page.lol-post-page .answer-reveal { background:color-mix(in srgb,var(--site-accent) 8%,transparent); border-color:color-mix(in srgb,var(--site-accent) 25%,var(--site-border)); color:var(--site-accent); }
body.site-page.lol-post-page .foot-btn.answer-btn,
body.site-page.lol-post-page .foot-btn.next-btn { border-color:var(--site-accent); color:var(--site-accent); }
body.site-page.lol-post-page .foot-btn.finish-btn,
body.site-page.lol-post-page .submit-btn { border-color:var(--site-accent); background:var(--site-accent); color:#fff; box-shadow:none; font-family:inherit; }
body.site-page.lol-post-page .submit-section { padding:22px 18px; }
body.site-page.lol-post-page .final-score { font-family:inherit; color:var(--site-text); }
body.site-page.lol-post-page .final-score span { color:var(--site-accent); }
@media (max-width:700px) {
  body.site-page .bubble-page { padding-top:68px; }
  body.site-page .bubble-card { padding:24px 18px; }
}