/* 기출바다 : 상세 페이지 (M3 토큰 축약판, 시드 #0C8296) */
:root{
  --primary:#0C8296; --on-primary:#fff; --primary-container:#CFF1F6; --on-primary-container:#04262C;
  --surface:#F9FBFC; --on-surface:#0E1013; --surface-container:#EDF1F3; --surface-low:#F3F6F8;
  --on-variant:#414952; --outline:#C2CAD1; --error:#D93025; --warn:#B45309;
  --r-s:8px; --r-m:12px; --r-l:16px; --r-f:999px;
}
@media(prefers-color-scheme:dark){
  :root{
    --primary:#5BCFE0; --on-primary:#053A43; --primary-container:#07606E; --on-primary-container:#CFF1F6;
    --surface:#0E1013; --on-surface:#E2E7EA; --surface-container:#1C2024; --surface-low:#16191D;
    --on-variant:#C2CAD1; --outline:#414952; --error:#FF9B90; --warn:#F5C26B;
  }
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--surface);color:var(--on-surface);line-height:1.6;
  font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  -webkit-font-smoothing:antialiased;font-size:16px}
a{color:inherit;text-decoration:none}
main{max-width:760px;margin:0 auto;padding:20px 16px 56px}

.bar{position:sticky;top:0;z-index:10;background:var(--surface);border-bottom:1px solid var(--outline);
  display:flex;align-items:center;gap:12px;padding:0 16px;height:60px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:18px;letter-spacing:-.03em}
.brand .mark{width:30px;height:30px;border-radius:9px;display:block;flex:0 0 auto;background:none;
  overflow:hidden}
.bar .dl{margin-left:auto;font-size:14px;font-weight:600;color:var(--primary);
  border:1px solid var(--outline);border-radius:var(--r-f);padding:9px 16px}

.crumb{font-size:12.5px;color:var(--on-variant);margin-bottom:14px}
.crumb a{color:var(--primary)}
h1{font-size:26px;line-height:1.3;letter-spacing:-.03em;font-weight:800;margin-bottom:8px}
h2{font-size:17px;font-weight:700;letter-spacing:-.02em;margin:28px 0 10px}
.sub{color:var(--on-variant);font-size:14px;margin-bottom:8px}
.note{font-size:13.5px;color:var(--on-variant);background:var(--surface-low);
  border-radius:var(--r-m);padding:11px 14px;margin:12px 0}
.note b{color:var(--on-surface)}
.claim{font-size:15px;background:var(--primary-container);color:var(--on-primary-container);
  border-radius:var(--r-m);padding:14px 16px;line-height:1.65}

.answer{display:flex;align-items:center;gap:14px;border:1px solid var(--outline);
  border-radius:var(--r-l);padding:18px 20px;margin-top:16px;background:var(--surface-low)}
.answer .big{font-size:42px;font-weight:800;line-height:1}
.answer .lab{font-size:13px;color:var(--on-variant)}
.answer .rate{margin-left:auto;text-align:right}
.answer .rate .v{font-size:24px;font-weight:800;display:block}
.answer .rate .l{font-size:11.5px;color:var(--on-variant)}

.hard{color:var(--error);font-weight:800}.mid{color:var(--warn);font-weight:700}
.ok{color:var(--on-variant)}.n{color:var(--outline)}

.dist .drow{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.dist .c{width:20px;font-weight:700;color:var(--on-variant)}
.dist .bar{flex:1;height:10px;border-radius:5px;background:var(--surface-container);overflow:hidden}
.dist .bar i{display:block;height:100%;background:var(--outline)}
.dist .right .bar i{background:var(--primary)}
.dist .p{width:44px;text-align:right;font-size:13px;font-weight:700;color:var(--on-variant)}
.dist .right .p,.dist .right .c{color:var(--primary)}

.vocab{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:6px 16px}
.vocab li{font-size:14px;color:var(--on-variant);padding:5px 0;border-bottom:1px solid var(--surface-container)}
.vocab b{color:var(--on-surface)}

.links{list-style:none}
.links li{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--surface-container)}
.links li a{flex:1;font-size:14.5px;font-weight:600;color:var(--primary)}
.links .r{font-size:13px;font-weight:700}
.links.big li{padding:13px 0}
ol.links{counter-reset:i;list-style:none}

.agrid{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid var(--outline);
  border-radius:var(--r-l);overflow:hidden}
.acell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  padding:11px 2px;border-right:1px solid var(--outline);border-bottom:1px solid var(--outline);
  background:var(--surface-low)}
.acell:hover{background:var(--primary-container)}
.acell:nth-child(7n){border-right:0}
.acell .n{font-size:11.5px;color:var(--on-variant);font-weight:600}
.acell .a{font-size:21px;font-weight:800;line-height:1.1}
.acell .r{font-size:11px;font-weight:700}

.hard-list,ol.hard{list-style:none;counter-reset:h}
ol.hard li{display:flex;align-items:center;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--surface-container);font-size:14px}
ol.hard li a{flex:0 0 auto;font-weight:700;color:var(--primary);min-width:110px}
ol.hard .bar{flex:1;height:8px;border-radius:4px;background:var(--surface-container);overflow:hidden}
ol.hard .bar i{display:block;height:100%;background:var(--error)}
ol.hard .p{font-size:12.5px;font-weight:700;color:var(--error);width:82px;text-align:right}

table.ty{width:100%;border-collapse:collapse;font-size:14px}
table.ty th,table.ty td{border-bottom:1px solid var(--surface-container);padding:9px 6px;text-align:left}
table.ty th{font-size:12.5px;color:var(--on-variant);font-weight:700}
table.ty td:last-child,table.ty th:last-child{text-align:right;font-weight:700}
table.ty a{color:var(--primary);font-weight:600}

.pn{display:flex;gap:8px;margin-top:28px;flex-wrap:wrap}
.pn a{flex:1;text-align:center;border:1px solid var(--outline);border-radius:var(--r-f);
  padding:12px 10px;font-size:13.5px;font-weight:600;color:var(--primary);min-width:120px}
.cta{margin-top:24px}
.btn{display:block;text-align:center;background:var(--primary);color:var(--on-primary);
  border-radius:var(--r-f);padding:15px;font-weight:700;font-size:15px}

footer{border-top:1px solid var(--outline);background:var(--surface-low);padding:26px 16px 40px;
  text-align:center;font-size:13px;color:var(--on-variant)}
footer a{color:var(--primary)}
footer .fine{margin-top:10px;font-size:12px;line-height:1.7;max-width:640px;
  margin-left:auto;margin-right:auto;opacity:.85}

@media(max-width:560px){
  h1{font-size:22px}
  .agrid{grid-template-columns:repeat(5,1fr)}
  .acell:nth-child(7n){border-right:1px solid var(--outline)}
  .acell:nth-child(5n){border-right:0}
  .vocab{grid-template-columns:1fr}
  ol.hard li{flex-wrap:wrap}
  ol.hard li a{min-width:0;flex:1 1 100%}
}

/* 문서 페이지 */
.doc h2{margin:26px 0 8px;font-size:16px}
.doc p,.doc li{font-size:14.5px;line-height:1.8;color:var(--on-variant)}
.doc p{margin-bottom:10px}
.doc ul{padding-left:20px;margin-bottom:12px}
.doc li{margin-bottom:4px}
.doc b{color:var(--on-surface)}
.doc a{color:var(--primary)}
.doc table.ty{margin:12px 0}

/* 공식 출처 안내 */
.srcbox{border:1px solid var(--outline);border-radius:var(--r-l);padding:16px 18px;margin-top:28px;
  background:var(--surface-low)}
.srcbox .h{font-size:15px;font-weight:800;margin-bottom:6px}
.srcbox p{font-size:13.5px;color:var(--on-variant);line-height:1.7}
.srcbox b{color:var(--on-surface)}
.srclinks{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.src{display:inline-flex;align-items:center;border:1px solid var(--primary);color:var(--primary);
  border-radius:var(--r-f);padding:10px 16px;font-size:13.5px;font-weight:700}
.srcline{font-size:12.5px;color:var(--on-variant);margin-top:22px;
  display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.srcline .src{padding:7px 13px;font-size:12.5px}

/* 문서 페이지 */
.doc h2{margin:26px 0 8px;font-size:16px}
.doc p,.doc li{font-size:14.5px;line-height:1.8;color:var(--on-variant)}
.doc p{margin-bottom:10px}
.doc ul{padding-left:20px;margin-bottom:12px}
.doc li{margin-bottom:4px}
.doc b{color:var(--on-surface)}
.doc a{color:var(--primary)}
.doc table.ty{margin:12px 0}