/* 과목별 풀이 설정 — design_handoff_subject_solve */
:root{
  --indigo:#4d5bf0;
  --indigo-deep:#3b48d8;
  --indigo-soft:#eef0fe;
  --indigo-line:#dfe2fb;
  --bg:#f6f7fc;
  --card:#fff;
  --text:#1B1F2E;
  --sub:#5b6070;
  --muted:#6b7180;
  --faint:#9196a3;
  --dim:#a4a9b8;
  --border:#e6e8ef;
  --border-soft:#e2e4ee;
  --chip:#f1f2f6;
  --chip-n:#e2e4ee;
  --violet:#7c3aed;
  --violet-soft:#f3ebfe;
  --energy:#c85a1c;
  --energy-soft:#fdefe4;
  --g9:#4d5bf0;
  --g7:#118049;
  --g7-soft:#e7f5ee;
  --hae:#0369a1;
  --hae-soft:#e6f2fb;
  --page-max:880px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-sans);
  line-height:1.5;-webkit-font-smoothing:antialiased;
  /* 바가 흐름 안 sticky 라 자리를 스스로 차지한다 — 별도 하단 예약 불필요 */
  padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));
}
a{color:var(--indigo);text-decoration:none}
a:hover{color:var(--indigo-deep)}
button{font-family:inherit}

/* Header */
.ss-hd{
  position:sticky;top:0;z-index:40;
  background:#fff;border-bottom:1px solid #eceef2;
}
.ss-hd-inner{
  max-width:var(--page-max);margin:0 auto;padding:12px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
@media(min-width:720px){.ss-hd-inner{padding:14px 24px}}
.ss-hd-left{display:flex;align-items:center;gap:12px;min-width:0}
.ss-back{
  width:32px;height:32px;border-radius:10px;border:0;background:#f1f2f6;color:#5b6070;
  display:inline-flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;
  cursor:pointer;text-decoration:none;flex-shrink:0;line-height:1;
}
.ss-back:hover{background:#e8eaef;color:var(--text);text-decoration:none}
.ss-title-wrap{display:flex;align-items:center;gap:9px;min-width:0;flex-wrap:wrap}
.ss-title{font-size:16px;font-weight:900;color:var(--text);letter-spacing:-.3px;white-space:nowrap}
.ss-track-pill{
  font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap;
}
.ss-track-pill.gisa{color:var(--violet);background:var(--violet-soft)}
.ss-track-pill.energy{color:var(--energy);background:var(--energy-soft)}
.ss-track-pill.g9{color:var(--g9);background:var(--indigo-soft)}
.ss-track-pill.g7{color:var(--g7);background:var(--g7-soft)}
.ss-track-pill.hae,.ss-track-pill.haegyeong{color:var(--hae);background:var(--hae-soft)}
.ss-track-pill.gongjo{color:#0369a1;background:#e0f2fe}
.ss-track-pill.labsafety{color:#047857;background:#ecfdf5}
.ss-track-pill.electricity{color:#b45309;background:#fef3c7}
.ss-track-pill.gas{color:#0f766e;background:#ccfbf1}
.ss-track-pill.saneop{color:#be123c;background:#ffe4e6}
.ss-track-pill.jeongbo{color:#334155;background:#e2e8f0}
.ss-av{
  width:30px;height:30px;border-radius:50%;background:var(--indigo-soft);color:var(--indigo-deep);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;
  text-decoration:none;flex-shrink:0;
}
.ss-av:hover{text-decoration:none}

/* Body */
.ss-body{
  max-width:var(--page-max);margin:0 auto;padding:20px 16px 24px;
}
@media(min-width:720px){.ss-body{padding:28px 24px 32px}}

.ss-card{
  background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px 16px;
}
@media(min-width:560px){.ss-card{padding:22px}}
.ss-card + .ss-card{margin-top:14px}
.ss-card-hd{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
.ss-card-hd b{font-size:14px;font-weight:800;color:var(--text)}
.ss-card-hd .cap{font-size:11.5px;color:var(--faint);white-space:nowrap;font-weight:600}

/* 시행처 탭 — 국가직·지방직·서울시 (허브 「회차 고르기」와 같은 축) */
.ss-orgwrap{margin-top:12px}
.ss-orgwrap[hidden]{display:none !important}
.ss-orglab{font-size:var(--fs-sm,12px);font-weight:700;color:var(--sub);margin:0 0 7px}
.ss-orgs{display:flex;gap:6px}
.ss-orgs button{
  flex:1;text-align:center;padding:9px 0;border:0;border-radius:11px;
  font-size:var(--fs-md,14px);font-weight:700;cursor:pointer;
  background:var(--chip);color:var(--dim);
}
.ss-orgs button.on{background:var(--indigo);color:#fff;font-weight:800}
.ss-orgs button:not(.on):hover{background:#e8eaef;color:var(--sub)}

/* Subject chips */
.ss-subs{
  display:grid;grid-template-columns:1fr;gap:9px;margin-top:12px;
}
@media(min-width:520px){.ss-subs{grid-template-columns:1fr 1fr}}
.ss-sub{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  border:0;border-radius:12px;padding:13px 14px;cursor:pointer;text-align:left;
  background:var(--chip);color:var(--muted);font-weight:700;width:100%;
  min-width:0;
}
.ss-sub .left{display:flex;align-items:center;gap:9px;min-width:0}
.ss-sub .n{
  flex:none;width:21px;height:21px;border-radius:6px;
  background:var(--chip-n);color:var(--dim);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;
}
.ss-sub .lab{
  font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ss-sub .meta{
  flex-shrink:0;font-size:11px;font-weight:700;color:var(--faint);white-space:nowrap;
}
.ss-sub.on{background:var(--indigo);color:#fff}
.ss-sub.on .n{background:rgba(255,255,255,.25);color:#fff}
.ss-sub.on .lab{font-weight:800;color:#fff}
.ss-sub.on .meta{color:rgba(255,255,255,.85)}
.ss-sub:not(.on):hover{background:#e8eaef;color:var(--sub)}
.ss-sub.wide,.ss-sub-wrap.wide{grid-column:1 / -1}

/* 개편 전/후 세그먼트 — 두 선택지를 같은 무게로 (2026-08-21).
   예전 .ss-legacy 는 과목 목록 아래 11px 회색 줄이라 아무도 못 봤다. */
.ss-era{display:flex;gap:4px;background:#eceef5;border-radius:10px;padding:3px}
.ss-era[hidden]{display:none !important}
.ss-era button{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  font-family:inherit;cursor:pointer;border:0;background:transparent;
  border-radius:8px;padding:6px 12px;color:var(--sub);text-align:left;
}
.ss-era button .t{font-size:12.5px;font-weight:800;white-space:nowrap}
.ss-era button .n{font-size:11px;font-weight:600;color:var(--faint);white-space:nowrap;font-variant-numeric:tabular-nums}
.ss-era button:hover{color:var(--indigo-deep,#3b48d8)}
.ss-era button.on{background:#fff;color:var(--text);box-shadow:0 1px 3px rgba(20,24,40,.14)}
.ss-era button.on .n{color:var(--indigo,#4d5bf0)}
@media(max-width:420px){
  .ss-era{width:100%}
  .ss-era button{flex:1}
}

/* Chips common */
.ss-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.ss-chips button{
  border:1px solid var(--border-soft);background:#fff;color:var(--muted);
  padding:8px 14px;border-radius:999px;font-size:12.5px;font-weight:700;
  cursor:pointer;white-space:nowrap;line-height:1.2;
}
.ss-chips button.on{
  border-color:var(--indigo);background:var(--indigo);color:#fff;font-weight:800;
}
.ss-chips button:not(.on):hover{background:#f4f5fb;color:var(--text)}
.ss-chips.filter button.on{
  border-color:var(--indigo-line);background:var(--indigo-soft);color:var(--indigo-deep);
}
.ss-year-pick{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;
}
.ss-year-pick[hidden]{display:none !important}
.ss-year-pick button{
  border:1px solid var(--border-soft);background:#fff;color:var(--muted);
  padding:6px 12px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;
}
.ss-year-pick button.on{background:var(--indigo);border-color:var(--indigo);color:#fff}

/* Mode cards */
.ss-modes{
  display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px;
}
@media(min-width:520px){.ss-modes{grid-template-columns:1fr 1fr}}
.ss-mode{
  border:1.5px solid var(--border);background:#fff;border-radius:13px;padding:15px;
  cursor:pointer;text-align:left;width:100%;font-family:inherit;
}
.ss-mode .t{font-size:13.5px;font-weight:700;color:var(--sub);white-space:nowrap}
.ss-mode .d{font-size:11.5px;color:var(--faint);margin-top:4px;line-height:1.5}
.ss-mode.on{
  border:2px solid var(--indigo);background:var(--indigo-soft);padding:14.5px;
}
.ss-mode.on .t{color:var(--indigo-deep);font-weight:800}
.ss-mode.on .d{color:var(--sub)}
.ss-mode:not(.on):hover{border-color:#d0d4e0}

.ss-count-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-top:12px;background:var(--bg);border:1px solid var(--border);
  border-radius:11px;padding:12px 14px;
}
.ss-count-row .lab{font-size:12.5px;font-weight:700;color:var(--sub);white-space:nowrap}
.ss-counts{display:flex;gap:6px;flex-wrap:wrap}
.ss-counts button{
  border:1px solid var(--border-soft);background:#fff;color:var(--muted);
  padding:6px 13px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;
}
.ss-counts button.on{background:var(--indigo);border-color:var(--indigo);color:#fff;font-weight:800}

/* Sticky start bar — 시안 B: 세부 선택 완료 후에만 표시 (body.ss-bar-on)
   본문 흐름 안 sticky 다. fixed 였을 땐 세로로 긴 화면에서 내용이 위에서 끝나도
   바만 화면 맨 밑에 홀로 남아 한참 떨어져 보였다 (2026-08-21 운영자). */
.ss-bar-wrap{
  position:sticky;bottom:max(12px,env(safe-area-inset-bottom));z-index:50;
  margin-top:16px;
  pointer-events:none;
}
.ss-bar-wrap[hidden],
body:not(.ss-bar-on) .ss-bar-wrap{
  display:none !important;
}
.ss-bar{
  pointer-events:auto;
  max-width:var(--page-max);margin:0 auto;
  background:#fff;border:1px solid var(--border);border-radius:16px;
  padding:14px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  box-shadow:0 -8px 24px -18px rgba(20,24,44,.2),0 8px 28px -16px rgba(20,24,44,.18);
}
@media(min-width:560px){.ss-bar{padding:16px 22px}}
.ss-bar .sum-t{
  font-size:13.5px;font-weight:800;color:var(--text);
  line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ss-bar .sum-s{font-size:11.5px;color:var(--faint);margin-top:2px;font-weight:600}
.ss-start{
  flex-shrink:0;border:0;background:var(--indigo);color:#fff;
  font-weight:800;font-size:14.5px;padding:13px 22px;border-radius:13px;cursor:pointer;
  white-space:nowrap;box-shadow:0 12px 26px -12px rgba(61,72,216,.6);
  text-decoration:none;display:inline-flex;align-items:center;
}
@media(min-width:560px){.ss-start{font-size:15px;padding:14px 34px}}
.ss-start:hover{filter:brightness(1.04);color:#fff;text-decoration:none}
.ss-start:disabled,.ss-start.is-off{
  opacity:.45;cursor:not-allowed;box-shadow:none;pointer-events:none;
}

.ss-note{
  margin-top:10px;font-size:12px;color:var(--faint);font-weight:600;line-height:1.45;
}

/* 과목 칩 래퍼 (세부 버튼 제거 · 칩 클릭=모달) */
.ss-sub-wrap{display:flex;flex-direction:column;gap:0;min-width:0}

/* 세부과목 선택 완료 요약 */
/* display:flex/grid 가 UA [hidden] 을 덮어써서 빈 카드·「문제 없어요」가 항상 보이던 버그 수정 */
.ss-pick-sum[hidden],
.ss-yd-wrap[hidden],
.ss-yd[hidden]{display:none !important}
.ss-pick-sum{
  background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px 16px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
@media(min-width:560px){.ss-pick-sum{padding:20px 22px}}
.ss-pick-sum .ps-title{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
}
.ss-pick-sum .ps-title b{font-size:15px;font-weight:900;color:var(--text)}
.ss-pick-sum .ps-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.ss-pick-sum .ps-chip{
  font-size:12px;font-weight:700;color:var(--indigo-deep);background:var(--indigo-soft);
  border:1px solid var(--indigo-line);padding:5px 12px;border-radius:8px;white-space:nowrap;
}
.ss-pick-sum .ps-edit{
  flex-shrink:0;border:1px solid var(--border-soft);background:#fff;color:var(--sub);
  font-weight:700;font-size:12.5px;padding:10px 16px;border-radius:10px;cursor:pointer;
  white-space:nowrap;font-family:inherit;
}
.ss-pick-sum .ps-edit:hover{border-color:#d0d4e0;color:var(--text)}

/* 연도·난이도 2열 */
.ss-yd{
  background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px 16px;margin-top:14px;
  display:grid;grid-template-columns:1fr;gap:22px;
}
@media(min-width:720px){
  .ss-yd{grid-template-columns:1fr 1fr;gap:28px;padding:22px}
  .ss-yd.no-diff{grid-template-columns:1fr}
}
.ss-yd h3{margin:0;font-size:14px;font-weight:800;color:var(--text)}
.ss-yd h3 .req{font-size:11px;font-weight:700;color:#d64545;margin-left:4px}
.ss-yd h3 .opt{font-size:11px;font-weight:700;color:var(--faint);margin-left:4px}
.ss-yd-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.ss-yd-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1.5px solid var(--border);background:#fff;border-radius:12px;padding:13px 15px;
  cursor:pointer;width:100%;text-align:left;font-family:inherit;
}
.ss-yd-row .lab{font-size:13.5px;font-weight:700;color:var(--sub);white-space:nowrap}
.ss-yd-row .cnt{font-size:11.5px;font-weight:700;color:var(--faint);white-space:nowrap}
.ss-yd-row .chk{
  width:19px;height:19px;border-radius:6px;border:1.5px solid #e2e4ee;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;
}
.ss-yd-row.on{
  border:2px solid var(--indigo);background:var(--indigo-soft);padding:12.5px 14.5px;
}
.ss-yd-row.on .lab{color:var(--text);font-weight:800}
.ss-yd-row.on .cnt{color:var(--indigo-deep)}
.ss-yd-row.on .chk{background:var(--indigo);border-color:var(--indigo)}
.ss-yd-start{
  width:100%;margin-top:16px;border:0;background:var(--indigo);color:#fff;
  font-weight:800;font-size:15px;padding:15px;border-radius:13px;cursor:pointer;
  white-space:nowrap;box-shadow:0 12px 26px -12px rgba(61,72,216,.6);
  font-family:inherit;text-decoration:none;display:block;text-align:center;
}
.ss-yd-start:hover{filter:brightness(1.04);color:#fff;text-decoration:none}
.ss-yd-start.is-off{opacity:.45;cursor:not-allowed;box-shadow:none;pointer-events:none}

/* —— 세부과목 모달 —— */
.st-overlay{
  display:none;position:fixed;inset:0;z-index:200;
  background:rgba(20,24,44,.45);
  align-items:flex-start;justify-content:center;
  padding:max(16px,env(safe-area-inset-top)) 12px max(16px,env(safe-area-inset-bottom));
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.st-overlay.show{display:flex}
body.st-modal-open{overflow:hidden}
.st-modal{
  width:100%;max-width:960px;margin:auto;
  background:#fff;border-radius:20px;padding:22px 18px 20px;
  box-shadow:0 40px 90px -30px rgba(20,24,44,.5);
  /* 세로 반응형 — 화면이 허락하는 만큼 길게 (2026-07-31 운영자 지시).
     ⛔ 목록에 고정 px 높이 캡을 다시 두지 말 것: 큰 모니터에서 아래가 400px 넘게 비고,
     세부 단원은 스크롤 안에 숨는다. 머리·CTA 는 고정, 남는 높이는 .st-panels 가 흡수한다.
     max-height 100% = 오버레이 안쪽(패딩·safe-area 제외) → dvh 계산 없이 노치까지 안전. */
  display:flex;flex-direction:column;
  max-height:100%;
  /* 최후 보루 — 가로모드처럼 아주 낮은 화면에서 .st-panels 바닥값까지 줄여도
     안 들어가면 카드 자체가 스크롤한다. 없으면 CTA 가 카드 밖으로 삐져나온다. */
  overflow-y:auto;
}
@media(min-width:720px){
  /* margin 24px 상하 = 48px 을 빼야 그림자까지 화면 안에 들어온다 */
  .st-modal{padding:28px 30px;margin:24px auto;max-height:calc(100% - 48px)}
}
.st-modal-hd{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  flex-shrink:0;
}
.st-modal-hd .left{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0}
.st-modal-hd h2{margin:0;font-size:18px;font-weight:900;color:var(--text);white-space:nowrap}
.st-modal-hd .pill{
  font-size:11px;font-weight:700;color:var(--violet);background:var(--violet-soft);
  padding:3px 9px;border-radius:999px;white-space:nowrap;
}
.st-close{
  width:30px;height:30px;border-radius:9px;border:0;background:#f1f2f6;color:#6b7180;
  display:inline-flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;
  flex-shrink:0;font-family:inherit;
}
.st-close:hover{background:#e8eaef;color:var(--text)}
.st-modal-sub{font-size:12.5px;color:#8990a3;margin:6px 0 0;font-weight:500;flex-shrink:0}

.st-panels{
  display:grid;grid-template-columns:1fr;gap:0;margin-top:16px;
  border:1px solid #eceef2;border-radius:14px;overflow:hidden;
  /* 모달의 남는 세로 공간을 전부 흡수. min-height 는 「짧은 화면에서도
     최소한 이만큼」인 바닥값이라 뷰포트에 비례시킨다 (가로 모드에서 모달 터짐 방지) */
  flex:1 1 auto;min-height:min(240px,34dvh);
  /* 모바일 1열: 과목 목록은 내용만큼, 세부 목록이 나머지를 채운다 */
  grid-template-rows:auto minmax(0,1fr);
}
@media(min-width:720px){
  .st-panels{grid-template-columns:1fr 1.2fr;grid-template-rows:minmax(0,1fr);min-height:min(320px,38dvh)}
}
.st-units{
  background:#fafbfd;border-bottom:1px solid #eceef2;
  /* 그리드 자식이 스크롤하려면 min-height:0 이 필요하다 (기본 auto 는 내용만큼 벌어짐) */
  min-height:0;max-height:min(30dvh,220px);overflow-y:auto;
}
@media(min-width:720px){
  .st-units{border-bottom:0;border-right:1px solid #eceef2;max-height:none}
}
.st-unit{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;padding:13px 14px;border:0;background:transparent;cursor:pointer;
  text-align:left;font-family:inherit;border-left:3px solid transparent;
}
.st-unit .nm{font-size:13.5px;font-weight:700;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-unit .right{display:flex;align-items:center;gap:7px;flex-shrink:0}
.st-unit .badge{
  font-size:11px;font-weight:700;color:var(--faint);background:#f1f2f6;
  padding:3px 9px;border-radius:8px;white-space:nowrap;
}
.st-unit .chev{font-size:11px;color:#c2c6d2}
.st-unit.on{
  background:var(--indigo-soft);border-left-color:var(--indigo);
}
.st-unit.on .nm{color:var(--text);font-weight:800}
.st-unit.on .badge{color:var(--indigo-deep);background:#fff}
.st-unit.on .chev{color:var(--faint)}
.st-unit:not(.on):hover{background:#f3f4f8}

/* 진도 뱃지: 푼/전체 — 0 회색 · 진행 중 빨강 · 완료 파랑 */
.st-prog{
  font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums;
  padding:4px 9px;border-radius:8px;white-space:nowrap;flex-shrink:0;
  letter-spacing:-0.02em;
}
.st-prog.is-zero{color:#8b90a0;background:#f1f2f6}
.st-prog.is-partial{color:#e11d48;background:#fff1f2}
.st-prog.is-done{color:#2563eb;background:#eff6ff}
.st-unit.on .st-prog.is-zero{background:#fff;color:#8b90a0}
.st-unit.on .st-prog.is-partial{background:#fff;color:#e11d48}
.st-unit.on .st-prog.is-done{background:#fff;color:#2563eb}

.st-topics{
  /* 스크롤 주체는 계속 .st-topics — .st-master 의 position:sticky 가 여기에 붙는다 (S3-G) */
  background:#fff;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.st-topic{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;padding:12px 16px;border:0;border-bottom:1px solid #f6f7fa;
  background:#fff;cursor:pointer;text-align:left;font-family:inherit;
}
.st-topic:last-child{border-bottom:0}
.st-topic.is-all{background:#f6f7fc;border-bottom-color:#f0f1f5}
.st-topic .left{display:flex;align-items:center;gap:10px;min-width:0}
.st-topic .box{
  width:19px;height:19px;border-radius:6px;border:1.5px solid #d3d7e2;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:#fff;background:transparent;
}
.st-topic .lab{font-size:13px;font-weight:600;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-topic .cnt{font-size:11px;font-weight:700;color:var(--faint);white-space:nowrap;flex-shrink:0}
.st-topic.on .box{background:var(--indigo);border-color:var(--indigo)}
.st-topic.on .lab{color:var(--text);font-weight:800}
.st-topic.is-all.on .lab{font-weight:800}
.st-topic.is-disabled{opacity:.45;cursor:default}
.st-topic:not(.is-disabled):hover{background:#fafbff}
.st-topic.is-all:not(.is-disabled):hover{background:#f0f1f6}

.st-done{
  width:100%;margin-top:16px;border:0;background:var(--indigo);color:#fff;
  font-weight:800;font-size:15px;padding:15px;border-radius:13px;cursor:pointer;
  white-space:nowrap;font-family:inherit;
  flex-shrink:0; /* 목록이 길어져도 CTA 는 눌리지 않는다 */
}
.st-done:hover{filter:brightness(1.04)}
.st-done:disabled,.st-done.is-off{
  background:#c5c9d6;cursor:not-allowed;filter:none;
}

/* 모바일: 과목 목록은 화면 비율로만 제한, 나머지 높이는 세부 목록이 갖는다.
   ⛔ 여기에 .st-topics{max-height:260px} 를 되살리지 말 것 — 세로가 긴 폰에서
      아래가 그만큼 비고 세부 단원이 스크롤 뒤로 숨는다 (2026-07-31 운영자 지적) */
@media(max-width:719px){
  .st-units{max-height:min(26dvh,180px)}
}

/* ── 마스터 카드(과목 전체) + 범위 게이지 ──
   전체 선택을 「리스트의 한 줄」이 아니라 카드로 올려 상태를 즉시 읽히게 한다.
   게이지는 단원을 **문항 수 비례**로 나눠, 무엇을 얼마나 골랐는지 한눈에 보여준다. */
.st-master{
  display:block;width:100%;padding:14px 16px 12px;border:0;border-bottom:1px solid var(--indigo-line);
  background:linear-gradient(180deg,#f7f8ff,#fff);text-align:left;font-family:inherit;
  /* 목록을 스크롤해도 범위 게이지는 붙어 있어야 한다 */
  position:sticky;top:0;z-index:3;
}
.st-master.on{background:linear-gradient(180deg,var(--indigo-soft),#f8f9ff)}
/* 누를 수 있는 곳 = 체크박스+과목명 행만. 게이지·캡션은 표시 전용이라
   호버/커서도 이 행에만 준다 (카드 전체가 눌리던 것 수정) */
.st-master .m-top{
  display:flex;align-items:center;gap:10px;
  width:100%;padding:0;border:0;background:none;text-align:left;font-family:inherit;cursor:pointer;
}
.st-master .m-top:hover{filter:brightness(.99)}
.st-master .box{
  width:21px;height:21px;border-radius:7px;border:1.5px solid #d3d7e2;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;color:#fff;background:transparent;line-height:1;
}
.st-master.on .box,.st-master.is-mixed .box{background:var(--indigo);border-color:var(--indigo)}
.st-master .m-lab{font-size:14px;font-weight:850;color:var(--text);min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-master .m-state{
  margin-left:auto;flex-shrink:0;font-size:11.5px;font-weight:800;color:var(--indigo-deep);
  background:#fff;border:1px solid var(--indigo-line);padding:4px 10px;border-radius:999px;
  font-variant-numeric:tabular-nums;
}
.st-master.is-off .m-state{color:#6b7280;border-color:#e5e7eb;background:#f8f9fb}
.st-gauge{display:flex;gap:2px;height:4px;margin-top:11px}
.st-gauge i{display:block;min-width:3px;border-radius:2px;background:#e3e6ef;transition:background .16s}
.st-gauge i.on{background:var(--indigo)}
.st-gauge-cap{display:flex;justify-content:space-between;gap:8px;margin-top:7px;
  font-size:11px;font-weight:700;color:var(--faint)}
.st-gauge-cap b{color:var(--indigo-deep);font-variant-numeric:tabular-nums}

/* 세부 단원: 마스터 아래로 들여쓰기 + 세로 레일 (부모–자식 관계) */
.st-kids{position:relative}
/* z-index: 행 배경 위로 그려야 레일이 보인다 (행은 자체 background 를 가짐) */
.st-kids:before{content:'';position:absolute;left:26px;top:0;bottom:0;width:2px;background:#e6e9f2;z-index:2}
.st-kids.all-on:before{background:var(--indigo-line)}
.st-kids .st-topic{padding-left:40px}
.st-kids .st-topic.on{background:#f7f8ff}
.st-kids .st-topic-sub{padding-left:62px!important}

/* 세부 영역 하위 항목 */
.st-topic-sub{padding-left:22px!important;opacity:.95}
.st-topic-sub .lab{font-weight:650!important;font-size:13px!important}
.st-units .nm{font-weight:800}

.ss-yd-wrap{margin-top:14px}
.ss-yd-wrap[hidden]{display:none!important}
.ss-yd-title{margin:0 0 10px;font-size:15px;font-weight:850;color:var(--text)}
.ss-yd-col{}
@media(min-width:720px){
  .ss-yd{grid-template-columns:1fr 1fr;gap:0;padding:0}
  .ss-yd-col{padding:22px 24px}
  .ss-yd-col+.ss-yd-col{border-left:1px solid var(--border)}
}
.ss-yd-row .cnt{font-size:12px;font-weight:800;color:#e11d48;background:#fff1f2;padding:3px 8px;border-radius:8px}
.ss-yd-row .cnt.is-zero{color:var(--faint);background:#f3f4f8}
.ss-yd-row.on{border:2px solid #1B1F2E;box-shadow:0 0 0 1px #1B1F2E}
.ss-yd-row .chk{border-radius:50%}
.ss-yd-row.on .chk{background:#1B1F2E;border-color:#1B1F2E}
.ss-yd-start{background:#1B1F2E;border-radius:14px;font-size:15.5px;padding:16px;margin-top:14px}

/* —— 문제 이어풀기 확인 모달 (시안: 새로 풀기 / 이어서 풀기) —— */
.ss-resume-overlay{
  display:none;position:fixed;inset:0;z-index:220;
  background:rgba(20,24,44,.48);
  align-items:center;justify-content:center;
  padding:max(16px,env(safe-area-inset-top)) 20px max(16px,env(safe-area-inset-bottom));
}
.ss-resume-overlay.show{display:flex}
.ss-resume-modal{
  width:100%;max-width:360px;
  background:#fff;border-radius:16px;
  padding:22px 20px 18px;
  box-shadow:0 28px 60px -20px rgba(20,24,44,.45);
  animation:ssResumeIn .18s ease-out;
}
@keyframes ssResumeIn{
  from{opacity:0;transform:translateY(8px) scale(.98)}
  to{opacity:1;transform:none}
}
.ss-resume-hd{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:10px;
}
.ss-resume-hd h3{
  margin:0;font-size:17px;font-weight:800;color:var(--text);letter-spacing:-.02em;
}
.ss-resume-x{
  width:32px;height:32px;border:0;border-radius:10px;background:transparent;
  color:#8b91a0;font-size:22px;line-height:1;cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;justify-content:center;
}
.ss-resume-x:hover{background:#f3f4f8;color:var(--text)}
.ss-resume-body{
  margin:0 0 18px;font-size:14.5px;font-weight:500;color:#5b6070;line-height:1.55;
}
.ss-resume-actions{
  display:flex;gap:10px;
}
.ss-resume-btn{
  flex:1;min-height:48px;border-radius:12px;font-size:15px;font-weight:700;
  font-family:inherit;cursor:pointer;padding:12px 14px;
  transition:filter .12s,background .12s;
}
.ss-resume-btn.ghost{
  border:1.5px solid #e2e4ee;background:#fff;color:var(--text);
}
.ss-resume-btn.ghost:hover{background:#f7f8fb}
.ss-resume-btn.primary{
  border:0;background:#1b1f2e;color:#fff;
  box-shadow:0 10px 22px -12px rgba(20,24,44,.55);
}
.ss-resume-btn.primary:hover{filter:brightness(1.08)}
body.ss-resume-open{overflow:hidden}

/* 이어하기 클릭 직후 ~ app 이동: resume-enter 와 같은 #qbResumeBootOverlay (S2-P181) */
html.resume-boot body{overflow:hidden!important}
html.resume-boot body > *:not(#qbResumeBootOverlay){
  visibility:hidden!important;pointer-events:none!important;opacity:0!important;
}
#qbResumeBootOverlay.resume-boot-show{
  visibility:visible!important;pointer-events:none!important;opacity:1!important;
  display:block!important;position:fixed!important;inset:0!important;z-index:99999!important;
  background:linear-gradient(180deg,#e8edff 0%,#f6f7fc 100%);
}
#qbResumeBootOverlay[hidden]{display:none!important}