/* =========================================================
   기출문제닷컴 테마 공통 레이어
   - Bootstrap 5.1 마크업 위에 CSS 변수로 디자인을 덮어씁니다.
   - 아래 변수 기본값은 "기본형(basic)" 테마 값이고,
     각 테마 파일(blueprint.css, paper.css, bold.css)이 변수와 일부 규칙만 덮어씁니다.
   ========================================================= */

html[data-theme] {
  --q-font: 'IBM Plex Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --q-font-display: var(--q-font);
  --q-font-num: 'IBM Plex Mono', 'IBM Plex Sans KR', monospace;

  --q-bg: #F4F6F9;
  --q-bg-image: none;
  --q-bg-size: auto;
  --q-surface: #FFFFFF;
  --q-surface-alt: #F7F8FA;
  --q-ink: #14161C;
  --q-ink-2: #2B2F38;
  --q-muted: #6A7180;
  --q-border: #E3E6EC;
  --q-border-strong: #D3D8E0;

  --q-primary: #3B4FD8;
  --q-primary-hover: #2F41BE;
  --q-primary-border: #3B4FD8;
  --q-primary-weak: #EEF0FE;
  --q-on-primary: #FFFFFF;
  --q-link: #3B4FD8;

  --q-accent: #0E7C86;
  --q-accent-hover: #0B6870;
  --q-accent-border: #0E7C86;
  --q-on-accent: #FFFFFF;

  --q-pass: #12805A;
  --q-pass-weak: #E4F4EC;
  --q-wrong: #C8384A;
  --q-wrong-weak: #FDECEE;

  --q-radius: 12px;
  --q-radius-lg: 16px;
  --q-radius-pill: 999px;
  --q-bw: 1px;
  --q-shadow: 0 1px 2px rgba(16, 20, 32, .05);
  --q-shadow-pop: 0 8px 28px rgba(16, 20, 32, .12);
  --q-shadow-btn: none;
  --q-shadow-btn-active: none;
  --q-press: none;

  --q-nav-bg: #FFFFFF;
  --q-nav-ink: #14161C;
  --q-nav-muted: #6A7180;
  --q-nav-active: #3B4FD8;
  --q-nav-border-color: #E3E6EC;
  --q-toggler-filter: invert(1);

  --q-band-bg: #FFFFFF;
  --q-band-ink: #14161C;

  --q-mark: 26px;
  --q-mark-radius: 50%;
  --q-mark-bg: transparent;
  --q-mark-ink: #6A7180;
  --q-mark-border: #D3D8E0;
  --q-mark-active-bg: #3B4FD8;
  --q-mark-active-border: #3B4FD8;
  --q-mark-active-ink: #FFFFFF;

  --q-choice-bg: #FFFFFF;
  --q-choice-border: #E3E6EC;
  --q-choice-shadow: none;
  --q-choice-picked-bg: #EEF0FE;
  --q-choice-picked-border: #3B4FD8;
  --q-choice-picked-ink: #14161C;

  --q-icon-filter: none;

  --bs-body-font-family: var(--q-font);
  --bs-body-color: var(--q-ink);
  --bs-body-bg: var(--q-bg);
}

/* ---------- 기본 ---------- */
html[data-theme] body {
  font-family: var(--q-font);
  color: var(--q-ink);
  background-color: var(--q-bg);
  background-image: var(--q-bg-image);
  background-size: var(--q-bg-size);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}

html[data-theme] h1, html[data-theme] h2, html[data-theme] h3,
html[data-theme] h4, html[data-theme] h5, html[data-theme] h6 {
  font-family: var(--q-font-display);
  color: var(--q-ink);
}

html[data-theme] .container > h1,
html[data-theme] .container > h2,
html[data-theme] h1.section-title,
html[data-theme] h1.section-heading {
  margin-top: .5rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

html[data-theme] .container > h1 + p,
html[data-theme] .container > h2 + p { color: var(--q-muted); }

html[data-theme] hr { color: var(--q-border-strong); opacity: .5; margin: 2rem 0; }

html[data-theme] .text-muted { color: var(--q-muted) !important; }
html[data-theme] .text-primary { color: var(--q-link) !important; }
html[data-theme] .text-danger { color: var(--q-wrong) !important; }
html[data-theme] .text-success,
html[data-theme] .text-info { color: var(--q-pass) !important; }
html[data-theme] .link-dark { color: var(--q-ink) !important; }
html[data-theme] code { color: var(--q-wrong); }

/* ---------- 상단/하단 네비게이션 ---------- */
html[data-theme] .navbar.bg-dark {
  background: var(--q-nav-bg) !important;
  border-bottom: var(--q-bw) solid var(--q-nav-border-color);
}
html[data-theme] body > .navbar.bg-dark:last-of-type,
html[data-theme] .navbar.bg-dark:not(.navbar-expand-md) {
  border-bottom: 0;
  border-top: var(--q-bw) solid var(--q-nav-border-color);
}
html[data-theme] .navbar-brand {
  color: var(--q-nav-ink) !important;
  font-family: var(--q-font-display);
  font-weight: 700;
  letter-spacing: -.01em;
}
html[data-theme] .navbar-dark .navbar-nav .nav-link { color: var(--q-nav-muted); font-weight: 500; }
html[data-theme] .navbar-dark .navbar-nav .nav-link:hover,
html[data-theme] .navbar-dark .navbar-nav .nav-link.active { color: var(--q-nav-active); }
html[data-theme] .navbar-dark .navbar-nav .nav-link.active { font-weight: 700; }
html[data-theme] .navbar-dark .navbar-toggler { border-color: var(--q-nav-border-color); }
html[data-theme] .navbar-dark .navbar-toggler-icon { filter: var(--q-toggler-filter); }

html[data-theme] .navbar p[style],
html[data-theme] .navbar .copy,
html[data-theme] .navbar .copy a,
html[data-theme] .navbar .cp a,
html[data-theme] .navbar p a[style] { color: var(--q-nav-muted) !important; }

/* ---------- 문제풀이 상단 제목 띠 ---------- */
html[data-theme] .col-lg.bg-dark {
  background: var(--q-band-bg) !important;
  border-bottom: var(--q-bw) solid var(--q-nav-border-color);
}
html[data-theme] .col-lg.bg-dark h4 {
  color: var(--q-band-ink) !important;
  font-weight: 700;
  font-size: 1.125rem;
  margin: 0;
  padding: .35rem 0;
}

/* ---------- 테마 선택 메뉴 ---------- */
html[data-theme] .theme-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  font-family: var(--q-font);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--q-nav-ink);
  background: transparent;
  border: var(--q-bw) solid var(--q-nav-border-color);
  border-radius: var(--q-radius-pill);
}
html[data-theme] .theme-switch-label { color: var(--q-nav-muted); font-weight: 500; }
html[data-theme] .theme-switch .dropdown-menu { min-width: 9rem; }

/* ---------- 폼 ---------- */
html[data-theme] .form-control {
  min-height: 48px;
  font-family: var(--q-font);
  color: var(--q-ink);
  background-color: var(--q-surface);
  border: var(--q-bw) solid var(--q-border-strong);
  border-radius: var(--q-radius);
}
html[data-theme] .form-control::placeholder { color: var(--q-muted); }
html[data-theme] .form-control:focus {
  border-color: var(--q-primary);
  box-shadow: 0 0 0 3px var(--q-primary-weak);
}

/* ---------- 버튼 ---------- */
html[data-theme] .btn {
  min-height: 44px;
  padding: .55rem 1.15rem;
  font-family: var(--q-font);
  font-weight: 600;
  border-width: var(--q-bw);
  border-radius: var(--q-radius);
  box-shadow: var(--q-shadow-btn);
  transition: transform .08s ease, box-shadow .08s ease, background-color .12s ease;
}
html[data-theme] .btn-sm { min-height: 36px; padding: .3rem .8rem; }
html[data-theme] .btn:active,
html[data-theme] .btn.active { transform: var(--q-press); box-shadow: var(--q-shadow-btn-active); }
html[data-theme] .btn:focus-visible { outline: 2px solid var(--q-primary); outline-offset: 2px; }

html[data-theme] .btn-dark,
html[data-theme] .btn-primary {
  color: var(--q-on-primary);
  background-color: var(--q-primary);
  border-color: var(--q-primary-border);
}
html[data-theme] .btn-dark:hover,
html[data-theme] .btn-primary:hover {
  color: var(--q-on-primary);
  background-color: var(--q-primary-hover);
  border-color: var(--q-primary-border);
}

html[data-theme] .btn-secondary,
html[data-theme] .btn.default,
html[data-theme] .btn-outline-secondary {
  color: var(--q-ink);
  background-color: var(--q-surface);
  border-color: var(--q-border-strong);
}
html[data-theme] .btn-secondary:hover,
html[data-theme] .btn.default:hover,
html[data-theme] .btn-outline-secondary:hover,
html[data-theme] .btn-outline-secondary.show {
  color: var(--q-ink);
  background-color: var(--q-surface-alt);
  border-color: var(--q-border-strong);
}

html[data-theme] .btn-success {
  color: var(--q-on-accent);
  background-color: var(--q-accent);
  border-color: var(--q-accent-border);
}
html[data-theme] .btn-success:hover {
  color: var(--q-on-accent);
  background-color: var(--q-accent-hover);
  border-color: var(--q-accent-border);
}

html[data-theme] .btn:disabled,
html[data-theme] .btn.disabled { opacity: .45; box-shadow: none; transform: none; }

/* ---------- 배지 ---------- */
html[data-theme] .badge {
  font-family: var(--q-font);
  font-weight: 600;
  border-radius: calc(var(--q-radius) * .5);
  padding: .4em .65em;
}
html[data-theme] .badge.bg-dark { background: var(--q-ink) !important; color: var(--q-bg); }
html[data-theme] .badge.bg-success { background: var(--q-accent) !important; color: var(--q-on-accent); }
html[data-theme] .badge.bg-info { background: var(--q-pass) !important; color: #fff; }
html[data-theme] .badge.bg-danger { background: var(--q-wrong) !important; color: #fff; }

/* ---------- 카드 / 드롭다운 / 모달 / 아코디언 ---------- */
html[data-theme] .card {
  color: var(--q-ink);
  background-color: var(--q-surface);
  border: var(--q-bw) solid var(--q-border);
  border-radius: var(--q-radius-lg);
  box-shadow: var(--q-shadow);
  overflow: hidden;
}
html[data-theme] .card-header {
  color: var(--q-ink);
  background-color: var(--q-surface-alt);
  border-bottom: var(--q-bw) solid var(--q-border);
}
html[data-theme] .card-header h1,
html[data-theme] .card-header h4,
html[data-theme] .card-header h5 { margin: 0; font-size: 1rem; font-weight: 700; }

html[data-theme] .dropdown-menu,
html[data-theme] .modal-content {
  color: var(--q-ink);
  background-color: var(--q-surface);
  border: var(--q-bw) solid var(--q-border-strong);
  border-radius: var(--q-radius);
  box-shadow: var(--q-shadow-pop);
}
html[data-theme] .dropdown-item { color: var(--q-ink); font-family: var(--q-font); padding: .55rem 1rem; }
html[data-theme] .dropdown-item:hover,
html[data-theme] .dropdown-item:focus { color: var(--q-ink); background-color: var(--q-surface-alt); }
html[data-theme] .dropdown-item.active,
html[data-theme] .dropdown-item:active { color: var(--q-on-primary); background-color: var(--q-primary); }
html[data-theme] .modal-header,
html[data-theme] .modal-footer { border-color: var(--q-border); }
html[data-theme] .btn-close { filter: var(--q-icon-filter); }

html[data-theme] .accordion-item {
  color: var(--q-ink);
  background-color: var(--q-surface);
  border-color: var(--q-border);
}
html[data-theme] .accordion-button {
  font-family: var(--q-font);
  font-weight: 600;
  color: var(--q-ink);
  background-color: var(--q-surface);
}
html[data-theme] .accordion-button:not(.collapsed) {
  color: var(--q-ink);
  background-color: var(--q-primary-weak);
  box-shadow: inset 0 calc(-1 * var(--q-bw)) 0 var(--q-border);
}
html[data-theme] .accordion-button:focus { box-shadow: none; border-color: var(--q-primary); }
html[data-theme] .accordion-button::after { filter: var(--q-icon-filter); }

html[data-theme] .page-link {
  color: var(--q-ink);
  background-color: var(--q-surface);
  border-color: var(--q-border);
}
html[data-theme] .page-item.active .page-link {
  color: var(--q-on-primary);
  background-color: var(--q-primary);
  border-color: var(--q-primary-border);
}

/* ---------- 탭 (년도별 / 랜덤) ---------- */
html[data-theme] .nav-tabs {
  gap: 4px;
  border-bottom: var(--q-bw) solid var(--q-border-strong);
}
html[data-theme] .nav-tabs .nav-link {
  min-height: 44px;
  font-family: var(--q-font);
  font-weight: 600;
  color: var(--q-muted);
  background: transparent;
  border: 0;
  border-radius: var(--q-radius) var(--q-radius) 0 0;
}
html[data-theme] .nav-tabs .nav-link.active {
  color: var(--q-ink);
  background: var(--q-surface);
  box-shadow: inset 0 -3px 0 var(--q-primary);
}

/* ---------- 표 ---------- */
html[data-theme] .table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: var(--q-surface-alt);
  --bs-table-striped-color: var(--q-ink);
  --bs-table-hover-bg: var(--q-surface-alt);
  --bs-table-hover-color: var(--q-ink);
  color: var(--q-ink);
  border-color: var(--q-border);
}
html[data-theme] .table-light {
  --bs-table-bg: var(--q-surface-alt);
  --bs-table-striped-bg: var(--q-surface-alt);
  color: var(--q-ink);
  border-color: var(--q-border);
}
html[data-theme] .table-info {
  --bs-table-bg: var(--q-pass-weak);
  --bs-table-striped-bg: var(--q-pass-weak);
  color: var(--q-ink);
  border-color: var(--q-border);
}
html[data-theme] .table .h5 { font-size: 1rem; font-weight: 600; }

/* ---------- 종목 목록 (자격증 / 공무원 / 문제은행) : 표 → 카드 격자 ---------- */
html[data-theme] table:has(> #myTable) > thead,
html[data-theme] table:has(> #myTable2) > thead { display: none; }
html[data-theme] table:has(> #myTable) > tbody,
html[data-theme] table:has(> #myTable2) > tbody { border-top: 0; }

html[data-theme] #myTable,
html[data-theme] #myTable2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
@media (min-width: 576px) {
  html[data-theme] #myTable,
  html[data-theme] #myTable2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  html[data-theme] #myTable,
  html[data-theme] #myTable2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
html[data-theme] #myTable > tr,
html[data-theme] #myTable2 > tr { display: contents; }
html[data-theme] #myTable > tr > td,
html[data-theme] #myTable2 > tr > td {
  display: block;
  width: auto !important;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none !important;
}
html[data-theme] #myTable > tr > td:empty,
html[data-theme] #myTable2 > tr > td:empty { display: none; }
html[data-theme] #myTable > tr > td[colspan],
html[data-theme] #myTable2 > tr > td[colspan] { grid-column: 1 / -1; padding: 1rem; color: var(--q-muted); }

html[data-theme] #myTable > tr > td > a,
html[data-theme] #myTable2 > tr > td > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 100%;
  min-height: 56px;
  padding: 14px 16px;
  font-weight: 600;
  color: var(--q-ink) !important;
  background: var(--q-surface);
  border: var(--q-bw) solid var(--q-border);
  border-radius: var(--q-radius);
  box-shadow: var(--q-shadow);
  transition: border-color .12s ease, transform .08s ease, box-shadow .08s ease;
}
html[data-theme] #myTable > tr > td > a::after,
html[data-theme] #myTable2 > tr > td > a::after {
  content: '';
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--q-muted);
  border-right: 2px solid var(--q-muted);
  transform: rotate(45deg);
}
html[data-theme] #myTable > tr > td > a:hover,
html[data-theme] #myTable2 > tr > td > a:hover { border-color: var(--q-primary); }
html[data-theme] #myTable > tr > td > a:active,
html[data-theme] #myTable2 > tr > td > a:active { transform: var(--q-press); box-shadow: var(--q-shadow-btn-active); }

/* ---------- 문제 본문 (#content1, license_content / gosi_content) ---------- */
html[data-theme] #content1 > .row { margin: 0; }
html[data-theme] #content1 > .row > .col-1 {
  width: auto;
  flex: 0 0 100%;
  padding: 0;
  margin-bottom: 10px;
  text-align: left !important;
}
html[data-theme] #content1 > .row > .col-1 strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 26px;
  padding: 0 8px;
  font-family: var(--q-font-num);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--q-on-primary);
  background: var(--q-primary);
  border-radius: calc(var(--q-radius) * .5);
}
html[data-theme] #content1 > .row > .col-11 { width: 100%; flex: 0 0 100%; padding: 0; }
html[data-theme] #content1 > .row > .col-11 > strong {
  display: block;
  margin-bottom: 16px;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.75;
  color: var(--q-ink);
}

html[data-theme] #content1 ul.list-unstyled {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}
/* 보기 안에 sub/sup/img 가 섞여 있어 flex 대신 절대위치로 번호 버튼을 배치 */
html[data-theme] #content1 ul.list-unstyled > li {
  position: relative;
  min-height: 54px;
  margin: 0 !important;
  padding: 13px 14px 13px calc(14px + var(--q-mark) + 12px);
  line-height: 1.65;
  color: var(--q-ink-2);
  background: var(--q-choice-bg);
  border: var(--q-bw) solid var(--q-choice-border);
  border-radius: var(--q-radius);
  box-shadow: var(--q-choice-shadow);
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, transform .08s ease, box-shadow .08s ease;
}
html[data-theme] #content1 ul.list-unstyled > li > .a_btn {
  position: absolute;
  left: 14px;
  top: calc((54px - var(--q-mark)) / 2 - var(--q-bw));
}
html[data-theme] #content1 ul.list-unstyled > li:has(.a_btn-active) {
  font-weight: 600;
  color: var(--q-choice-picked-ink);
  background: var(--q-choice-picked-bg);
  border-color: var(--q-choice-picked-border);
}

/* ---------- 답안 번호 버튼 (q.css 의 20px 원을 대체) ---------- */
html[data-theme] .a_btn {
  width: var(--q-mark) !important;
  height: var(--q-mark) !important;
  font-family: var(--q-font-num);
  font-size: calc(var(--q-mark) * .54) !important;
  font-weight: 600;
  color: var(--q-mark-ink);
  background-color: var(--q-mark-bg);
  border: 1.5px solid var(--q-mark-border);
  border-radius: var(--q-mark-radius) !important;
}
html[data-theme] .a_btn-active {
  color: var(--q-mark-active-ink) !important;
  background-color: var(--q-mark-active-bg) !important;
  border-color: var(--q-mark-active-border) !important;
}

/* ---------- 답안표기란 ---------- */
html[data-theme] .omr-sheet .table { margin: 0; }
html[data-theme] .omr-sheet td { padding: 6px 4px !important; }
html[data-theme] .omr-sheet .ans_no strong {
  font-family: var(--q-font-num);
  font-size: .8125rem;
  color: var(--q-muted);
}
html[data-theme] .omr-sheet .a_btn { --q-mark: 24px; }

/* 5문항씩 한 줄인 표는 태블릿 이하에서 넘치므로 격자로 재배치 (휴대폰 2열, 태블릿 3열) */
@media (max-width: 991.98px) {
  html[data-theme] .omr-sheet tbody {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-theme] .omr-sheet tbody > tr { display: contents; }
  html[data-theme] .omr-sheet tbody > tr > td {
    display: block;
    width: auto !important;
    box-shadow: none !important;
    border-bottom: var(--q-bw) solid var(--q-border);
  }
  html[data-theme] .omr-sheet tbody > tr > td:empty { display: none; }
  html[data-theme] .omr-sheet .ans_no { min-width: 26px !important; margin-right: 4px !important; }
  html[data-theme] .omr-sheet .ans.me-1 { margin-right: 2px !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  html[data-theme] .omr-sheet tbody { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 기타 ---------- */
html[data-theme] a.top {
  color: var(--q-on-primary);
  background-color: var(--q-primary);
  border: var(--q-bw) solid var(--q-primary-border);
  border-radius: var(--q-radius);
}

/* ---------- 문제 해설 (class/explanation.php) ---------- */
html[data-theme] .q-expl {
  margin-top: 12px;
  padding: 14px 16px;
  color: var(--q-ink-2);
  background: var(--q-surface);
  border: var(--q-bw) solid var(--q-border);
  border-radius: var(--q-radius);
  text-align: left;
}
html[data-theme] .q-expl-label {
  display: inline-flex;
  align-items: center;
  height: 24px;
  margin-bottom: 8px;
  padding: 0 9px;
  font-size: .75rem;
  font-weight: 700;
  color: var(--q-on-primary);
  background: var(--q-primary);
  border-radius: calc(var(--q-radius) * .5);
}
html[data-theme] .q-expl-body {
  font-size: .9375rem;
  line-height: 1.75;
  word-break: keep-all;
}