@import url("fonts.css"); /* 프리텐다드 조각판·swap(2026-10-15 — 예전 한 덩어리 2MB·optional 은 첫 화면에서 대체 글꼴로 남았다. 까닭은 fonts.css 머리말) */
/* T0-3 — 정본 src/components.css의 정적 규칙을 공개 사이트 훅으로 이식.
 * 색·크기 선택은 루트 토큰만 담당한다. layers/sets/guides의 공통 진입점.
 * 단독 링크도 가능하며 조립 스크립트와 새 자리표가 필요 없다. */

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--background); color-scheme: var(--color-scheme); }
html body {
  min-width: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.75;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
:where(button, input, select, textarea) { font-family: inherit; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
:where(img, svg, video) { max-width: 100%; }
:where([hidden]) { display: none !important; }

/* button / select / tab / menu / option / disclosure — 실제 누르는 상자 */
body :is(a[href], button, select, textarea, input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]), summary, [role="button"], [role="tab"], .opt-item, .opt, .calc-mode) {
  min-height: var(--touch-min);
}
body :is(a[href], summary) { display: inline-flex; align-items: center; }
body :is(button, select, [role="button"], [role="tab"], .opt-item, .opt) { min-width: var(--touch-min); }
body a.guide-card, body a.set-nav-guide-card { display: block; }
body :is(a[href], button, select, summary) { max-width: 100%; }
body :is(button, summary, .opt-item) { white-space: normal; }
body :is(.site-nav-link, .foot-nav-link, .crumbs-link, .q-nav-btn, .set-nav-btn) { line-height: 1.4; }

/* site-header / site-footer — 고정 높이 대신 줄바꿈; 작은 화면에서도 메뉴 노출 */
body .site-head { height: auto; min-height: var(--touch-min); padding-top: .35em; padding-bottom: .35em; flex-wrap: wrap; }
body .site-logo { flex: 0 1 auto; min-width: 0; flex-wrap: wrap; }
body .site-nav { display: flex; min-width: 0; }
body .site-nav-list { flex-wrap: wrap; gap: .25em .5em; }
body .head-set-select { min-width: 0; flex-wrap: wrap; }
body .head-set-picker { min-width: var(--touch-min); max-width: 100%; }
body .site-logo-sub { line-height: 1.5; }
body .site-logo-icon { color: var(--primary-foreground); }
/* T0-8: 회원 입구는 좁은 화면에서도 노출하고 필요하면 다음 줄로 보낸다. */
body .head-member { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; gap: .25em; max-width: 100%; margin-inline-start: auto; }
body .head-member a { min-width: var(--touch-min); min-height: var(--touch-min); padding: .5em .75em; border-radius: var(--radius-sm); color: var(--link); font-size: var(--text-sm); line-height: 1.4; text-decoration: none; }
body .head-member a:hover { background: var(--accent); color: var(--accent-foreground); }
body .head-member a[data-label="signupLink"] { border: 1px solid var(--input); }
body .foot-brand { min-width: 0; }
body .site-foot { grid-template-columns: minmax(0, 1fr); }
body .site-foot :is(.foot-brand, .foot-nav, .foot-copy, .ai-notice) { grid-column: 1; grid-row: auto; justify-self: start; }
body .foot-copy { line-height: 1.6; }
body .ai-notice { font-size: 11px; line-height: 1.5; color: var(--muted-foreground); }

/* card / badge / article-body — 글자 확대 시 카드와 설명도 자연스럽게 높아진다 */
body :is(.set-summary, .set-summary-title-wrap, .set-body-layout, .set-question-col, .set-sidebar, .cbt-question-box, .question-card, .exam-timer, .omr-nav, .guide-body, .guide-card, .formula, .calc-widget) { min-width: 0; }
body :is(.set-summary-head, .q-header, .exam-timer-head, .omr-nav-head, .q-nav, .calc-control) { flex-wrap: wrap; gap: .5em; }
body :is(.q-nav-pos, .exam-timer-total, .omr-nav-count) { white-space: normal; }
body :is(.q-stem, .exp-body, .set-nav-desc, .set-nav-guide-desc, .guide-body, .guide-body p, .guide-body .section-title, .guide-body .guide-subhead, .guide-hero .page-title, .guide-hero .page-lead, .guide-card-title, .guide-card-desc, .related-guides .link-list, .cta-text) { line-height: 1.75; }
body :is(.q-num-chip, .q-subject-chip, .q-calc-chip, .set-pass-badge, .exp-answer-badge) { max-width: 100%; line-height: 1.45; }
body .q-subject-chip { background: var(--subject-badge); color: var(--subject-badge-foreground); }
body .question-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); color: var(--card-foreground); padding: 1.5rem; }

/* T0-8: 문항별 즐겨찾기. 운영은 aria-pressed/aria-label과 notice의 hidden을 연결한다. */
body .q-header { align-items: center; justify-content: flex-start; }
body .q-fav {
  display: inline-flex; flex: 0 1 auto; align-items: center; justify-content: center; gap: .5em;
  min-width: var(--touch-min); min-height: var(--touch-min); max-width: 100%; margin-inline-start: auto;
  padding: .5em .75em; border: 1px solid var(--input); border-radius: var(--radius-sm);
  background: var(--card); color: var(--link); font: inherit; line-height: 1.4; cursor: pointer;
}
body .q-fav-icon { display: inline-flex; flex: 0 0 1em; }
body .q-fav-icon svg { display: block; width: 1em; height: 1em; fill: none; }
body .q-fav:hover { background: var(--accent); color: var(--accent-foreground); }
body .q-fav [data-fav-label="remove"],
body .q-fav[aria-pressed="true"] [data-fav-label="add"] { display: none; }
body .q-fav[aria-pressed="true"] [data-fav-label="remove"] { display: inline; }
body .q-fav[aria-pressed="true"] { background: var(--accent); color: var(--link); border-color: var(--ring); }
body .q-fav[aria-pressed="true"] .q-fav-icon svg { fill: currentColor; }
body .q-fav-notice { margin-block: 1em; padding: .75em 1em; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--muted); color: var(--foreground); font-size: var(--text-base); line-height: 1.75; }
body .q-fav-notice a { display: flex; width: fit-content; max-width: 100%; min-height: var(--touch-min); min-width: var(--touch-min); padding-block: .5em; color: var(--link); text-decoration: underline; text-underline-offset: .2em; }

/* option — 현재 ol/opt-item과 구형 label/opt 모두 정적 지원 */
body .q-options { flex-wrap: wrap; }
body :is(.opt-item, .opt) { min-width: 0; max-width: 100%; align-items: flex-start; }
body .opt-item::before { flex: 0 0 1.5em; }
body .opt {
  display: flex; gap: .75em; padding: .75em 1em;
  border: 1px solid var(--input); border-radius: var(--radius-md);
  background: var(--card); color: var(--foreground); cursor: pointer; line-height: 1.65;
}
body .opt > :not(input) { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
/* 라디오 자체도 라벨의 48/64px 누르는 영역 안에서 같은 크기로 측정된다. */
body :is(input[type="radio"], input[type="checkbox"]) { min-height: var(--touch-min); height: var(--touch-min); }
body .calc-mode input { width: 1.25em; margin: 0; accent-color: var(--primary); }
body .opt input[type="radio"] { flex: 0 0 1.25em; width: 1.25em; height: var(--touch-min); margin: 0; accent-color: var(--primary); }
body .opt.is-correct { border-color: var(--correct-strong); background: var(--correct-soft); }
body .opt.is-wrong { border-color: var(--wrong-strong); background: var(--wrong-soft); }
body .question-card fieldset { min-width: 0; border: 0; padding: 0; }
body .question-card fieldset .opt + .opt { margin-top: .625em; }
body .opt-item { border-color: var(--input); }
body :is(.opt-item, .opt):hover { border-color: var(--ring); background: var(--accent); }
body :is(.cbt-explanation, .question-card details) { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--background); }
body .question-card summary { width: 100%; justify-content: space-between; padding: .75em 1em; color: var(--primary-strong); }

/* omr-nav — 고정 6열 대신 칸 최소 폭으로 열 수 결정(높이뿐 아니라 폭도 touch-min) */
body .omr-grid { grid-template-columns: repeat(auto-fit, minmax(var(--omr-cell), 1fr)); gap: var(--omr-gap); }
body .omr-cell { min-width: var(--touch-min); min-height: var(--touch-min); height: auto; line-height: 1.4; background: var(--omr-empty); color: var(--foreground); border-color: var(--input); }
body .omr-cell.is-current { background: var(--omr-current); color: var(--foreground); }
body .omr-cell.is-correct { background: var(--correct); color: var(--correct-foreground); }
body .omr-cell.is-wrong { background: var(--wrong); color: var(--wrong-foreground); }

/* table / formula-box — 긴 표·수식은 해당 상자 안에서만 스크롤 */
body :is(.data-table-wrap, .data-table, .count-table, .formula-vars, .formula, .guide-formula, .formula-latex, .calc-formula-math, .katex math[display="block"]) { max-width: 100%; overflow-x: auto; }
body :is(.count-table, .formula-vars) { display: block; }
body :is(.formula, .guide-formula) { border: 1px solid var(--input); border-radius: var(--radius); background: var(--muted); color: var(--foreground); padding: .6em .9em; }
body .data-table :is(th, td) { line-height: 1.6; }

/* ad-slot — DD-27의 rect / band, 기존 A/B/C 훅도 같은 계약 */
body :is(.ad-slot, .ad-slot-a, .ad-slot-b, .ad-slot-c) {
  position: relative; display: block; width: 100%; max-width: 100%;
  height: var(--ad-h-rect); min-height: var(--ad-h-rect);
  margin: 48px 0; background: var(--ad-bg); border: 0;
  overflow: clip; contain: size layout;
}
body :is(.ad-slot[data-variant="band"], .ad-slot-b, .ad-slot-c) { height: var(--ad-h-band); min-height: var(--ad-h-band); }
body .ad-slot-a { max-width: min(100%, 300px); }
body :is(.ad-slot-b, .ad-slot-c) { max-width: min(100%, 728px); margin-left: auto; margin-right: auto; }
body :is(.ad-slot, .ad-slot-a, .ad-slot-b, .ad-slot-c) .adsbygoogle { display: block; max-width: 100%; }

/* timer — native progress.value 갱신, 인라인 style 불필요 */
body progress.exam-timer-track {
  appearance: none; display: block; width: 100%; height: 6px; border: 0;
  border-radius: var(--radius-full); background: var(--muted); color: var(--primary);
}
body progress.exam-timer-track::-webkit-progress-bar { background: var(--muted); border-radius: var(--radius-full); }
body progress.exam-timer-track::-webkit-progress-value { background: var(--primary); border-radius: var(--radius-full); }
body progress.exam-timer-track::-moz-progress-bar { background: var(--primary); border-radius: var(--radius-full); }
body progress.exam-timer-track.is-urgent::-webkit-progress-value { background: var(--timer-warn); }
body progress.exam-timer-track.is-urgent::-moz-progress-bar { background: var(--timer-warn); }

/* 좁은 카드에서는 번호와 4개 보기가 한 줄 폭을 강제하지 않는다. */
@media (max-width: 767px) {
  body .site-logo-sub { display: none; }
  body .q-nav { justify-content: flex-start; }
  body .q-nav-pos { flex: 1 1 100%; order: 3; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* LP-1 — S7 정본의 검색·segmented·종목 카드 최소 정적 이식.
 * 공개 T0 토큰 이름에 맞춤: text-meta → text-sm, touch-pad → text-base.
 * 기존 공개 클래스 규칙은 유지. 아래 data-slot 훅은 다른 입구에서도 재사용 가능하다.
 * 선·간격도 기존 토큰으로 계산하며 새 색·크기·모서리 토큰을 선언하지 않는다. */
[data-slot="button"] {
  display: inline-flex; align-items: center; justify-content: center;
  gap: calc(var(--text-base) / 2);
  min-width: var(--touch-min); min-height: var(--touch-min);
  padding: calc(var(--text-base) / 2) var(--text-base);
  border: calc(var(--text-base) / 8) solid var(--primary);
  border-radius: var(--radius);
  background: var(--primary); color: var(--primary-foreground);
  font-size: var(--text-base); font-weight: 700; line-height: 1.4;
  text-align: center; text-decoration: none; cursor: pointer;
}
[data-slot="button"][data-variant="outline"] {
  border-color: var(--input); background: var(--card); color: var(--card-foreground);
}
[data-slot="button"][data-variant="outline"]:hover {
  background: var(--accent); color: var(--accent-foreground);
}
[data-slot="button"][aria-disabled="true"] {
  border-color: var(--input); border-style: dashed;
  background: var(--muted); color: var(--muted-foreground); cursor: default;
}
[data-slot="badge"] {
  display: inline-flex; align-items: center; max-width: 100%;
  padding: calc(var(--text-base) / 8) calc(var(--text-base) / 2);
  border: calc(var(--text-base) / 16) solid var(--input);
  border-radius: var(--radius-full);
  background: var(--card); color: var(--card-foreground);
  font-size: var(--text-sm); font-weight: 700; line-height: 1.45;
}
[data-slot="badge"][data-variant="subject"] {
  border-color: var(--subject-badge); background: var(--subject-badge);
  color: var(--subject-badge-foreground);
}
[data-slot="segmented"] {
  display: inline-flex; flex-wrap: wrap; max-width: 100%;
  gap: calc(var(--text-base) / 8); padding: calc(var(--text-base) / 8);
  border: calc(var(--text-base) / 16) solid var(--input);
  border-radius: var(--radius-md); background: var(--card); color: var(--card-foreground);
}
[data-slot="segmented-item"] {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--touch-min); min-height: var(--touch-min);
  padding: calc(var(--text-base) / 4) calc(var(--text-base) / 2);
  border: 0; border-radius: var(--radius);
  background: var(--card); color: var(--card-foreground);
  font-size: var(--text-sm); font-weight: 800; line-height: 1.4; cursor: pointer;
}
[data-slot="segmented-item"]:hover { background: var(--accent); color: var(--accent-foreground); }
[data-slot="segmented-item"][aria-pressed="true"] { background: var(--primary); color: var(--primary-foreground); }
[data-slot="s7-search-label"], [data-slot="s7-filter-label"] {
  font-size: var(--text-base); font-weight: 800; line-height: 1.4;
}
[data-slot="s7-search-control"] {
  display: flex; align-items: stretch;
  min-width: 0; min-height: var(--touch-min);
  border: calc(var(--text-base) / 8) solid var(--input); border-radius: var(--radius);
  background: var(--card); color: var(--card-foreground); overflow: hidden;
}
[data-slot="s7-search-control"]:has(:focus-visible) {
  outline: calc(var(--text-base) / 5) solid var(--ring); outline-offset: calc(var(--text-base) / 8);
}
[data-slot="s7-search-input"] {
  width: 100%; min-width: 0; min-height: var(--touch-min);
  padding: calc(var(--text-base) / 2) var(--text-base);
  border: 0; background: var(--card); color: var(--card-foreground);
  font-size: var(--text-base); font-weight: 700; line-height: 1.4; appearance: none;
}
[data-slot="s7-search-input"]:focus-visible { outline: none; }
[data-slot="s7-search-input"]::placeholder { color: var(--muted-foreground); opacity: 1; }
[data-slot="s7-search-input"]::-webkit-search-cancel-button { appearance: none; display: none; }
[data-slot="card"], [data-slot="cert-card"] {
  display: grid; gap: var(--text-base); min-width: 0;
  padding: var(--text-lg);
  border: calc(var(--text-base) / 16) solid var(--border); border-radius: var(--radius-md);
  background: var(--card); color: var(--card-foreground);
}
[data-slot="cert-card"] { border-top: calc(var(--text-base) / 4) solid var(--primary); }
[data-slot="cert-card-title"] { font-size: var(--text-xl); font-weight: 800; line-height: 1.35; }
[data-slot="cert-card-subjects"] { display: flex; flex-wrap: wrap; gap: calc(var(--text-base) / 2); }
[data-slot="card-title"] { font-size: var(--text-lg); font-weight: 800; line-height: 1.4; }
[data-slot="section-title"] { font-size: var(--text-xl); font-weight: 800; line-height: 1.4; }
[data-slot="page-title"] { font-size: var(--text-2xl); font-weight: 800; line-height: 1.35; }
[data-slot="page-lead"] { font-size: var(--text-lg); color: var(--foreground); line-height: 1.75; }
[data-slot="card-description"] { font-size: var(--text-sm); color: var(--muted-foreground); line-height: 1.75; }
[data-slot="empty"] { padding: var(--text-xl); border: calc(var(--text-base) / 16) dashed var(--input); border-radius: var(--radius-md); }
[data-slot="skip-link"] {
  position: absolute; z-index: 50; inset-inline-start: var(--text-base); top: 0;
  padding: calc(var(--text-base) / 2) var(--text-base);
  background: var(--primary); color: var(--primary-foreground);
  transform: translateY(-100%);
}
[data-slot="skip-link"]:focus { transform: translateY(0); }

/* ══ 풀기 띠 (solve-cta) — DSN-R2 작업 C · 2026-10-13 ═══════════════════════════
 * 홈이 아닌 쪽(개념·가이드·시험 정보·계산기·과목·과평)에서 그 종목 문제로 가는 길.
 * 마크업(스크립트 없음 · 띠 전체가 링크 하나 · 자리: <main> 안 빵부스러기 바로 뒤):
 *   <a data-slot="solve-cta" href="/cert/<slug>/…">
 *     <span data-slot="solve-cta-name">전기기능사</span>
 *     <span data-slot="solve-cta-label">이 종목 문제 풀기 <span aria-hidden="true">→</span></span>
 *   </a>
 * 넓은 화면: 본문 위 한 줄 띠.  폰(≤640px): 같은 요소가 화면 아래에 붙는다 — 가려지는
 * 만큼 body 아래 여백·scroll-padding 을 :has() 로 잡는다(:has 를 모르는 브라우저는 붙이지
 * 않고 위 띠 그대로). data-variant="inline" 은 폰에서도 붙지 않는다(문항이 같은 쪽에 있는
 * 과평 단위 쪽). 색·크기는 토큰만 — 어둠·큰 글씨는 루트 변수 교체로 따라온다. */
body a[data-slot="solve-cta"] {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: calc(var(--text-base) / 4) var(--text-base);
  min-height: var(--touch-min); max-width: 100%;
  margin: 0 0 var(--text-base);
  padding: calc(var(--text-base) / 2) calc(var(--text-base) / 2) calc(var(--text-base) / 2) var(--text-base);
  border: calc(var(--text-base) / 16) solid var(--border); border-radius: var(--radius-md);
  background: var(--primary-soft); color: var(--foreground);
  font-size: var(--text-base); line-height: 1.4; text-decoration: none;
}
[data-slot="solve-cta-name"] { flex: 0 1 auto; min-width: 0; font-weight: 800; }
[data-slot="solve-cta-label"] {
  flex: 0 0 auto; max-width: 100%;
  padding: calc(var(--text-base) / 4) var(--text-base);
  border-radius: var(--radius);
  background: var(--primary); color: var(--primary-foreground);
  font-weight: 800; white-space: nowrap;
}
body a[data-slot="solve-cta"]:hover { border-color: var(--primary); }
body a[data-slot="solve-cta"]:hover [data-slot="solve-cta-label"] { text-decoration: underline; text-underline-offset: .2em; }

@media (max-width: 640px) {
  @supports selector(:has(*)) {
    /* 한 줄 고정: 단추가 먼저(오른쪽), 종목 이름은 남는 자리에. 이름이 한 줄에 못 들어가면(큰 글씨·긴 종목명)
     * 줄이 바뀌어 잘린 높이 밖으로 나간다 — 말줄임 「전…」 대신 단추만 온전히 남긴다. */
    body a[data-slot="solve-cta"]:not([data-variant="inline"]) {
      position: fixed; z-index: 40; inset-inline: 0; bottom: 0;
      flex-flow: row-reverse wrap; justify-content: flex-start; align-content: flex-start;
      row-gap: var(--touch-min); overflow: hidden; margin: 0;
      height: calc(var(--text-base) / 16 + var(--text-base) / 2 + var(--text-base) * 1.9 + var(--text-base) / 2 + env(safe-area-inset-bottom, 0px));
      padding: calc(var(--text-base) / 2) var(--text-base);
      padding-bottom: calc(var(--text-base) / 2 + env(safe-area-inset-bottom, 0px));
      padding-inline: max(var(--text-base), env(safe-area-inset-left, 0px)) max(var(--text-base), env(safe-area-inset-right, 0px));
      border-width: calc(var(--text-base) / 16) 0 0; border-radius: 0;
      background: var(--card); color: var(--card-foreground);
    }
    body a[data-slot="solve-cta"]:not([data-variant="inline"]) [data-slot="solve-cta-label"] { order: -1; }
    body a[data-slot="solve-cta"]:not([data-variant="inline"]) [data-slot="solve-cta-name"] {
      flex: 1 0 auto; align-self: center; white-space: nowrap; font-size: var(--text-sm);
    }
    /* 붙은 띠 높이(누르는 최소 높이 + 글자 한 줄 여유 + 안전 영역)만큼 쪽 끝을 비운다. */
    body:has(a[data-slot="solve-cta"]:not([data-variant="inline"])) {
      padding-bottom: calc(var(--touch-min) + var(--text-base) + env(safe-area-inset-bottom, 0px));
    }
    html:has(a[data-slot="solve-cta"]:not([data-variant="inline"])) {
      scroll-padding-bottom: calc(var(--touch-min) + var(--text-base) + env(safe-area-inset-bottom, 0px));
    }
  }
}
@media print {
  body a[data-slot="solve-cta"] { display: none; }
  body:has(a[data-slot="solve-cta"]) { padding-bottom: 0; }
}
/* ══ 풀기 띠 끝 ═══════════════════════════════════════════════════════════════ */