:root{
  --text:#111827; --text-2:#475569; --text-3:#6b7280;
  --border:#D6DCE3; --border-strong:#D1D5DB;
  --success:#0B875A; --danger:#C2413F;
  --primary:#2451DF; --primary-border:#3157D7;
  --bg:#F5F6F8; --surface:#ffffff;
  --ui-font:"Pretendard Variable",Pretendard,"Noto Sans KR",system-ui,sans-serif;
}
#screen-study{
  --exam-serif-font:"Nanum Myeongjo", "Noto Serif CJK KR", "Noto Serif KR", "Batang", "바탕", "AppleMyungjo", serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{background:var(--bg);}
body{color:var(--text);font-family:var(--ui-font);line-height:1.6;-webkit-text-size-adjust:100%;}

.seo-attribution{font-family:var(--ui-font);font-size:11px;color:#94a3b8;text-align:right;margin-top:14px;}
/* 시험지 카드와 가로 폭·좌우 정렬을 정확히 일치시킨다
   (카드 = --study-paper-width + 56px, 내부 텍스트는 카드 padding 28px 안쪽에서 시작) */
.seo-wrap{width:calc(var(--study-paper-width) + 56px);max-width:calc(100vw - 20px);margin:0 auto;padding:18px 28px 0;box-sizing:border-box;}
.seo-crumb{font-family:var(--ui-font);font-size:12px;color:#9aa2af;margin-bottom:10px;word-break:keep-all;}
.seo-crumb a{color:#9aa2af;text-decoration:none;} .seo-crumb b{color:var(--primary);font-weight:700;}
.seo-tags{display:flex;gap:8px;flex-wrap:wrap;}
.seo-tag{font-family:var(--ui-font);font-size:12.5px;font-weight:800;color:var(--primary);background:rgba(36,81,223,.10);border-radius:999px;padding:4px 12px;}
.seo-tag.g{color:#64748b;background:#eef1f6;}
.seo-after{width:calc(var(--study-paper-width) + 56px);max-width:calc(100vw - 20px);margin:0 auto;padding:0 0 60px;box-sizing:border-box;}
.seo-ans{font-family:var(--ui-font);font-size:14px;font-weight:800;color:var(--text);margin:18px 0 0;display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.seo-ans .n{color:var(--success);font-size:16px;}
.seo-badge{font-family:var(--ui-font);font-size:11px;font-weight:800;color:#fff;background:var(--primary);border-radius:6px;padding:3px 8px;}
.seo-card{background:var(--bg);border:1px solid var(--border);border-radius:14px;box-shadow:0 6px 22px rgba(15,23,42,.06);padding:22px 24px;margin-top:14px;}
.seo-card-h{font-family:var(--ui-font);font-size:16px;font-weight:800;color:var(--text);margin-bottom:10px;letter-spacing:-.2px;}
.seo-card-h .now{color:var(--primary);}
.seo-tzr{font-family:"Nanum Myeongjo","Noto Serif CJK KR","Noto Serif KR",Batang,serif;font-size:18px;line-height:1.75;color:#1f2937;word-break:keep-all;}
.seo-gate{position:relative;margin-top:16px;border:1px solid var(--border);border-radius:12px;overflow:hidden;}
.seo-gate-blur{padding:16px 16px 30px;filter:blur(4.5px);user-select:none;color:#8b93a1;font-family:"Nanum Myeongjo",serif;font-size:17px;line-height:1.9;}
.seo-gate-over{position:absolute;inset:0;background:linear-gradient(180deg,rgba(245,246,248,.30),rgba(245,246,248,.97));display:flex;align-items:flex-end;justify-content:center;padding:0 14px 16px;}
.seo-gate-t{font-family:var(--ui-font);font-size:14.5px;color:#475569;font-weight:700;word-break:keep-all;text-align:center;line-height:1.6;}
.seo-cta-wrap{text-align:center;margin-top:22px;}
.seo-cta{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 26px;background:var(--primary);color:#fff;font-family:var(--ui-font);font-size:15px;font-weight:800;border-radius:12px;text-decoration:none;box-shadow:0 8px 22px rgba(36,81,223,.26);word-break:keep-all;}
.seo-cta-sub{font-family:var(--ui-font);font-size:13px;color:#94a3b8;margin-top:10px;}
.seo-rel{margin-top:30px;} .seo-card-h,.seo-rel-h,.seo-cur-h{margin-top:0;}
.seo-rel-h{font-family:var(--ui-font);font-size:13px;font-weight:800;color:#6b7280;margin-bottom:10px;}
.seo-rel a{display:block;font-family:var(--ui-font);font-size:13.5px;color:#334155;text-decoration:none;padding:11px 13px;border:1px solid var(--border);border-radius:10px;margin-bottom:8px;background:#fff;word-break:keep-all;}
.seo-foot{font-family:var(--ui-font);margin-top:34px;font-size:11px;color:#9aa2af;line-height:1.8;text-align:center;}
.seo-foot-fam{margin-bottom:10px;line-height:2.0;word-break:keep-all;}
.seo-foot-fam a{color:#64748b;text-decoration:none;}
.seo-foot-fam a:hover{text-decoration:underline;}
/* 문제 페이지 제목 — 검색어와 같은 문자열(7sage 방식) */
.seo-q-h1{font-family:var(--ui-font);font-size:17px;font-weight:800;color:var(--text);margin:0 0 8px;word-break:keep-all;line-height:1.45;}
/* 이전/다음 문제 */
.seo-nav{display:flex;gap:8px;align-items:stretch;margin-top:22px;}
.seo-nav-a{flex:none;display:inline-flex;align-items:center;justify-content:center;font-family:var(--ui-font);font-size:13.5px;font-weight:700;color:#334155;text-decoration:none;padding:11px 16px;border:1px solid var(--border);border-radius:10px;background:#fff;white-space:nowrap;}
.seo-nav-a.mid{flex:1;color:var(--primary);}
.seo-nav-a.off{color:#cbd5e1;background:transparent;}
/* 현행화로 문언을 교체한 선지 — 원문을 HTML에 넣지 않고 블록으로 대체 */
.seo-mask{color:#cfd6e0;letter-spacing:-.06em;user-select:none;}
/* 현행화로 문언을 교체한 선지 — 현행 문언(시험지 안)과 출제 당시 문언(아래)을 함께 노출.
   둘 다 HTML에 있으므로 두 문언 모두 검색에 걸린다(숨김 텍스트가 아니다). */
.seo-cur{margin-top:14px;border:1px solid rgba(36,81,223,.22);background:rgba(36,81,223,.045);border-radius:14px;padding:18px 20px;}
.seo-cur-h{font-family:var(--ui-font);font-size:13px;font-weight:800;color:var(--primary);margin-bottom:12px;word-break:keep-all;}
.seo-cur-row{margin-top:10px;}
.seo-cur-lab{font-family:var(--ui-font);font-size:11.5px;font-weight:800;color:#64748b;margin-bottom:4px;}
.seo-cur-org{font-family:"Nanum Myeongjo","Noto Serif CJK KR",Batang,serif;font-size:17px;line-height:1.7;color:#475569;word-break:keep-all;}
.seo-cur-foot{font-family:var(--ui-font);font-size:12px;color:#64748b;margin-top:12px;line-height:1.7;word-break:keep-all;}
.seo-gate-lead{font-family:var(--ui-font);font-size:15px;color:#475569;line-height:1.75;word-break:keep-all;}
/* 등급별 안내 — 문구는 supabase/functions/gated-problems/index.ts 의 실제 정책과 맞춘다.
   ★서버가 바뀌면 여기도 바꿔야 한다(feedback_trial_wording_vs_server: 문구가 6곳에 흩어져 있다). */
.seo-tier{margin-top:26px;border:1px solid var(--border);border-radius:14px;background:#fff;padding:18px 20px 16px;}
.seo-tier-h{font-family:var(--ui-font);font-size:13.5px;font-weight:800;color:#334155;margin-bottom:6px;word-break:keep-all;}
.seo-tier-row{display:flex;gap:12px;padding:10px 0 9px;border-top:1px solid #eef1f6;}
.seo-tier-n{flex:none;width:96px;font-family:var(--ui-font);font-size:12.5px;font-weight:800;color:var(--primary);word-break:keep-all;line-height:1.6;}
.seo-tier-n.g{color:#94a3b8;}
.seo-tier-d{flex:1;font-family:var(--ui-font);font-size:12.5px;color:#475569;line-height:1.7;word-break:keep-all;}
.seo-tier-note{font-family:var(--ui-font);font-size:11.5px;color:#94a3b8;line-height:1.7;margin-top:10px;word-break:keep-all;}
@media (max-width:520px){.seo-tier-row{flex-direction:column;gap:2px;} .seo-tier-n{width:auto;}}
/* 검찰개혁 형소법 반영 배지 — 형사법 페이지에만 붙는다 */
.seo-rev{margin-top:14px;border:1px solid rgba(202,138,4,.30);background:rgba(250,204,21,.09);border-radius:14px;padding:16px 18px;}
.seo-rev-h{font-family:var(--ui-font);font-size:13px;font-weight:800;color:#a16207;margin-bottom:7px;word-break:keep-all;}
.seo-rev-b{font-family:var(--ui-font);font-size:12.5px;color:#57534e;line-height:1.75;word-break:keep-all;}
/* 목록 페이지 */
.seo-list-h1{font-family:var(--ui-font);font-size:22px;font-weight:800;color:var(--text);margin:6px 0 6px;word-break:keep-all;}
.seo-list-sub{font-family:var(--ui-font);font-size:13.5px;color:#64748b;margin-bottom:18px;line-height:1.7;word-break:keep-all;}
.seo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;}
.seo-grid a{font-family:var(--ui-font);font-size:14px;font-weight:700;color:#334155;text-decoration:none;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:#fff;word-break:keep-all;}
.seo-qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px;}
.seo-qgrid a{font-family:var(--ui-font);font-size:13.5px;color:#334155;text-decoration:none;padding:11px 13px;border:1px solid var(--border);border-radius:10px;background:#fff;word-break:keep-all;line-height:1.5;}
.seo-qgrid a b{color:var(--primary);font-weight:800;}
@media (max-width:767px){
  .seo-wrap{padding:14px 16px 0;} .seo-after{padding:0 0 48px;} .seo-card{padding:18px 16px;} .seo-tzr{font-size:17px;}
}