/* essay.chocolab.co.kr — 입시 자료 화면
   학원 사이트의 site.css 를 먼저 읽고, 이 파일이 덧붙습니다. */

:root{
  --c-map:#4F8FCE;   --b-map:#E8F1FB;
  --c-sheet:#8A78BE; --b-sheet:#F1ECFA;
  --c-exam:#E0823A;  --b-exam:#FDF0E2;
  --tint:var(--c-map); --wash:var(--b-map);
}

/* ── 페이지 머리 ─────────────────────────────── */
.page-head{background:var(--cream);border-bottom:1px solid var(--line);padding-block:34px 30px}
.page-head h1{color:var(--ink);font-size:clamp(1.5rem,4vw,2.1rem);line-height:1.25}
.page-head .lede{margin-top:8px;font-size:.95rem;color:var(--body);max-width:44em}
.page-head .crumb{font-size:.83rem;color:var(--muted);margin-bottom:8px}
.page-head .crumb a:hover{color:var(--ink);text-decoration:underline}

/* ── 탭 ──────────────────────────────────────── */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-block:22px 18px}
.tabs button{
  padding:9px 18px;border-radius:22px;border:1px solid var(--line);
  background:var(--paper);color:var(--body);font-size:.9rem;font-weight:500;
  transition:background .15s,color .15s,border-color .15s;
}
.tabs button:hover{border-color:var(--tint);color:var(--ink)}
.tabs button[aria-selected="true"]{background:var(--tint);border-color:var(--tint);color:#fff;font-weight:700}

/* ── 지도 ────────────────────────────────────── */
.mapbox{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:10px}
.mapbox svg{width:100%;height:auto;display:block;touch-action:manipulation}
.mapbox .zone{fill:var(--b-map);stroke:var(--paper);stroke-width:1.2;transition:fill .15s}
.mapbox .zone.metro{fill:var(--sunken)}
.mapbox .zname{font-size:9.5px;fill:var(--muted);text-anchor:middle;pointer-events:none;user-select:none}
.mapbox .pin{cursor:pointer}
.mapbox .pin circle{fill:var(--paper);stroke:var(--c-map);stroke-width:2.2;transition:r .12s,fill .12s}
.mapbox .pin:hover circle,.mapbox .pin.on circle{fill:var(--c-map)}
.mapbox .pin text{
  font-size:10.5px;font-weight:700;fill:var(--ink);text-anchor:middle;
  paint-order:stroke;stroke:var(--paper);stroke-width:3.4px;stroke-linejoin:round;
  pointer-events:none;user-select:none;
}
.mapbox .pin.dim{opacity:.28}
.mapbox .pin.nolabel text{opacity:0;transition:opacity .12s}
.mapbox .pin.nolabel:hover text,.mapbox .pin.nolabel:focus text,.mapbox .pin.nolabel.on text{opacity:1}
.mapbox .pin.on circle{r:6.6}
.mapbox .pin.on text{fill:var(--c-map)}
.maphint{margin-top:10px;font-size:.83rem;color:var(--muted);text-align:center}

/* 고른 대학 안내 */
.picked{
  position:sticky;bottom:12px;margin-top:14px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  box-shadow:0 6px 24px rgba(36,31,26,.09);
}
.picked b{color:var(--ink);font-size:1.12rem}
.picked .sp{flex:1}
.btn{
  display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border-radius:12px;
  font-size:.9rem;font-weight:700;border:1px solid var(--line);color:var(--ink);background:var(--paper);
}
.btn:hover{border-color:var(--tint)}
.btn.main{background:var(--tint);border-color:var(--tint);color:#fff}
.btn.main:hover{filter:brightness(1.06)}

/* ── 대학 버튼 목록 ──────────────────────────── */
.searchbar{display:flex;gap:10px;margin-bottom:18px}
.searchbar input{
  flex:1;padding:12px 16px;border:1px solid var(--line);border-radius:12px;
  background:var(--paper);color:var(--ink);font:inherit;font-size:.95rem;
}
.searchbar input:focus{outline:none;border-color:var(--tint)}
.reg{margin-bottom:26px}
.reg h3{color:var(--ink);font-size:1rem;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.reg h3 .n{font-size:.8rem;color:var(--muted);font-weight:400}
.ubtns{display:flex;flex-wrap:wrap;gap:8px}
.ubtn{
  padding:8px 15px;border:1px solid var(--line);border-radius:20px;background:var(--paper);
  color:var(--body);font-size:.88rem;transition:.15s;
}
.ubtn:hover{border-color:var(--tint);color:var(--ink);background:var(--wash)}

/* ── 자료 시트 ───────────────────────────────── */
.sheet-menu{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.sheet-menu button{
  padding:10px 16px;border:1px solid var(--line);border-radius:12px;background:var(--paper);
  color:var(--body);font-size:.9rem;font-weight:500;
}
.sheet-menu button[aria-selected="true"]{background:var(--c-sheet);border-color:var(--c-sheet);color:#fff;font-weight:700}
.sheet-menu button:disabled{opacity:.38;cursor:default}

.sheet{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px}
.sheet h2{color:var(--ink);font-size:1.2rem;margin-bottom:4px}
.sheet .src{font-size:.8rem;color:var(--muted);margin-bottom:18px}
.sheet .it-heading{color:var(--ink);font-weight:700;font-size:1rem;margin:22px 0 8px;padding-left:11px;border-left:3px solid var(--c-sheet)}
.sheet .it-heading:first-child{margin-top:0}
.sheet .it-text{font-size:.92rem;margin:6px 0;white-space:pre-wrap}
.sheet .it-none{font-size:.92rem;color:var(--muted);margin:6px 0}
.sheet .it-box{background:var(--sunken);border-radius:12px;padding:14px 16px;margin:12px 0}
.sheet .it-box b{display:block;color:var(--ink);font-size:.92rem;margin-bottom:6px}
.sheet .it-box p{font-size:.9rem;white-space:pre-wrap}

.tw{overflow-x:auto;margin:12px 0 18px;-webkit-overflow-scrolling:touch}
table.grid{border-collapse:collapse;width:100%;min-width:max-content;font-size:.86rem}
table.grid th,table.grid td{
  border:1px solid var(--line);padding:7px 10px;text-align:center;
  color:var(--body);vertical-align:middle;white-space:pre-wrap;
}
table.grid tr:first-child th,table.grid th{background:var(--sunken);color:var(--ink);font-weight:700}
table.grid td.lead{text-align:left;color:var(--ink);font-weight:500;background:var(--paper)}
table.grid tbody tr:hover td{background:var(--cream)}

/* 입결 표 */
.res-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.res-head .sw{display:flex;align-items:center;gap:7px;font-size:.86rem;color:var(--body)}
.res-head .sw input{width:16px;height:16px;accent-color:var(--c-sheet)}
table.res{border-collapse:separate;border-spacing:0;width:100%;min-width:max-content;font-size:.85rem}
table.res th,table.res td{border-bottom:1px solid var(--line);border-right:1px solid var(--line-soft);padding:7px 11px;text-align:center;white-space:nowrap}
table.res thead th{background:var(--sunken);color:var(--ink);font-weight:700;border-bottom:1px solid var(--line)}
table.res thead tr:first-child th{font-size:.82rem}
table.res thead th.trk{background:var(--b-sheet);color:var(--c-sheet)}
table.res td.dept{text-align:left;color:var(--ink);font-weight:500;position:sticky;left:0;background:var(--paper);z-index:1;border-right:1px solid var(--line)}
table.res tbody tr:hover td{background:var(--cream)}
table.res tbody tr:hover td.dept{background:var(--cream)}
table.res td.g5{color:var(--c-sheet);font-weight:700}
table.res td em{font-style:normal;color:var(--muted);font-size:.8rem}
.empty{padding:36px 10px;text-align:center;color:var(--muted);font-size:.93rem}

/* ── 전형별 자료 ─────────────────────────────── */
.guide-nav{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.guide-nav button{padding:8px 14px;border:1px solid var(--line);border-radius:20px;background:var(--paper);color:var(--body);font-size:.86rem}
.guide-nav button[aria-selected="true"]{background:var(--c-exam);border-color:var(--c-exam);color:#fff;font-weight:700}
.gblock{margin-bottom:30px}
.gblock h3{color:var(--ink);font-size:1.05rem;margin-bottom:10px;display:flex;align-items:center;gap:9px}
.gblock h3 .dot{width:8px;height:8px;border-radius:50%;background:var(--c-exam);flex:none}
.unis{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.unis a{font-size:.78rem;padding:4px 10px;border-radius:14px;background:var(--sunken);color:var(--body)}
.unis a:hover{background:var(--b-sheet);color:var(--c-sheet)}

/* ── 인쇄 ────────────────────────────────────── */
.tools{display:flex;gap:8px;margin-left:auto}
@media print{
  .site-header,.tabs,.sheet-menu,.tools,.picked,.guide-nav,.searchbar,.maphint,footer,.crumb{display:none!important}
  .sheet,.mapbox{border:none;padding:0}
  .page-head{background:none;border:none;padding-block:0 12px}
  .tw{overflow:visible}
  table.grid,table.res{font-size:8.6pt;min-width:0;width:100%}
  table.res td.dept{position:static}
  body{font-size:10pt}
  .gblock{break-inside:avoid}
}

@media(max-width:640px){
  .sheet{padding:20px 15px}
  .picked{position:static;box-shadow:none}
  .picked .btn{flex:1;justify-content:center}
}