/* 지구의 역사 — 팔레트는 science.css 변수를 그대로 쓴다.
   대륙은 황동(--brass), 바다는 잉크, 한반도는 시안(--cyan), 사건은 붉은 계열. */
*{box-sizing:border-box}
body.eapage{margin:0;min-height:100vh;background:var(--ink);-webkit-text-size-adjust:100%}
#wrap{max-width:1240px;margin:0 auto;padding:0 18px 40px}

#head{display:flex;align-items:center;gap:12px;padding:14px 0 10px;flex-wrap:wrap}
#backbtn{width:34px;height:34px;flex:0 0 auto;font-size:17px;line-height:1;color:var(--chalk);
  background:var(--ink-2);border:1px solid var(--ink-3);border-radius:9px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;transition:.16s}
#backbtn:hover{border-color:var(--brass);color:var(--brass)}
.brandline{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--brass);
  text-decoration:none}
.brandline b{color:var(--chalk);font-weight:500}
.h-sp{flex:1}
.h-lib{font-size:12.5px;color:var(--chalk-dim);text-decoration:none;border:1px solid var(--ink-3);
  border-radius:7px;padding:6px 11px;transition:.16s}
.h-lib:hover{border-color:var(--brass);color:var(--brass)}

.pg-h{font-family:var(--disp);font-weight:700;font-size:31px;color:var(--chalk);
  margin:18px 0 16px;line-height:1.3}
.pg-sub{font-size:14.5px;line-height:1.85;color:var(--chalk-dim);word-break:keep-all;margin:14px 0 0}

/* ① 46억 년 자 — 선형이다. 로그로 그리면 88%라는 사실이 사라진다. */
#scale{padding:6px 0 30px;border-bottom:1px solid var(--ink-3);margin-bottom:26px}
#bar{display:flex;height:26px;border-radius:4px;overflow:hidden;border:1px solid var(--ink-3)}
.bar-pre{background:repeating-linear-gradient(135deg,
  rgba(154,167,191,.13) 0 7px, rgba(154,167,191,.05) 7px 14px)}
.bar-pha{background:var(--brass)}
#barlab{display:flex;margin-top:9px;font-family:var(--mono);font-size:10.5px;
  color:var(--chalk-dim);gap:10px}
.bl-pre{flex:1}
.bl-pha{color:var(--brass);text-align:right;white-space:nowrap}
#barlab em{font-style:normal;opacity:.75;margin-left:6px}

/* ② 문장 */
#sent{margin-bottom:26px}
.s-kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--brass);
  margin:0 0 12px}
#sentline{font-family:var(--disp);font-size:27px;line-height:1.75;color:var(--chalk-dim);
  margin:0 0 12px;word-break:keep-all}
.syl{font:inherit;color:var(--chalk);background:none;border:none;padding:1px 3px;
  border-bottom:2px solid rgba(201,162,39,.35);cursor:pointer;transition:.15s;border-radius:3px}
.syl:hover{color:var(--brass);border-bottom-color:var(--brass)}
.syl.on{color:var(--ink);background:var(--brass);border-bottom-color:var(--brass)}
.syl-dim{opacity:.42}
.s-credit{font-size:12.5px;color:var(--chalk-dim);opacity:.8;margin:0}
.s-credit b{color:var(--brass);font-weight:500}

/* ③ 지도 + 글 */
#lay{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:1000px){#lay{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}}

#board{min-width:0}
#maphead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:9px}
#mname{font-family:var(--disp);font-weight:700;font-size:21px;color:var(--chalk)}
#mage{font-family:var(--mono);font-size:11px;color:var(--chalk-dim)}
#map{width:100%;height:auto;display:block;background:var(--ink-2);border:1px solid var(--ink-3);
  border-radius:10px}
.sea{fill:transparent}
.rim{fill:rgba(111,183,201,.05);stroke:var(--ink-3);stroke-width:1.4}
.eq{stroke:rgba(111,183,201,.3);stroke-width:1;stroke-dasharray:6 7}
.land{fill:var(--brass);stroke:none}
.lands{filter:drop-shadow(0 0 7px rgba(201,162,39,.2))}

.mk-halo{fill:none;stroke-width:1.6}
.mk-kr .mk-halo{stroke:var(--cyan)}
.mk-kr .mk-dot{fill:var(--cyan)}
.mk-ev .mk-halo{stroke:#D9564E}
.mk-ev .mk-dot{fill:#D9564E}
.mk-t{font-family:var(--mono);font-size:15px;text-anchor:middle;fill:var(--chalk)}
.mk-ev .mk-t{fill:#E8837C}

.trace .tr-lat{stroke:rgba(111,183,201,.22);stroke-width:1;stroke-dasharray:3 6}
.trace .tr-t{font-family:var(--mono);font-size:13px;fill:rgba(111,183,201,.7)}

#mfoot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:11px}
.mf-key{font-family:var(--mono);font-size:10.5px;color:var(--chalk-dim);
  display:inline-flex;align-items:center;gap:6px}
.mf-key i{width:9px;height:9px;border-radius:50%;display:inline-block}
.k-land{background:var(--brass)}
.k-kr{background:var(--cyan)}
.k-ev{background:#D9564E}
.mf-btn{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--chalk-dim);
  background:var(--ink-2);border:1px solid var(--ink-3);border-radius:7px;padding:7px 12px;
  cursor:pointer;transition:.16s}
.mf-btn:hover{border-color:var(--cyan);color:var(--cyan)}
.mf-btn.on{border-color:var(--cyan);color:var(--cyan);background:rgba(111,183,201,.1)}

#rail{min-width:0}
.r-scene{font-family:var(--disp);font-weight:700;font-size:19px;line-height:1.65;
  color:var(--chalk);margin:0 0 15px;padding-left:13px;border-left:2px solid var(--brass);
  word-break:keep-all}
.r-body{font-size:14.5px;line-height:1.95;color:var(--chalk-dim);word-break:keep-all;
  margin-bottom:19px}
.r-facts{margin:0 0 17px;padding:15px 16px;border:1px solid var(--ink-3);border-radius:9px;
  background:var(--ink-2)}
.r-facts dt{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--brass);
  margin-bottom:5px}
.r-facts dd{margin:0 0 13px;font-size:13.5px;line-height:1.75;color:var(--chalk-dim);
  word-break:keep-all}
.r-facts dd:last-child{margin-bottom:0}
.r-ask{font-size:14.5px;line-height:1.9;color:var(--chalk);word-break:keep-all;
  padding:15px 17px;border:1px solid rgba(201,162,39,.3);border-radius:9px;
  background:rgba(201,162,39,.05);margin:0}

.ev-card{padding:15px 16px;border:1px solid rgba(217,86,78,.4);border-radius:9px;
  background:rgba(217,86,78,.07);margin-bottom:17px}
.ec-k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:#E8837C;margin:0 0 7px}
.ev-card b{display:block;font-family:var(--disp);font-weight:700;font-size:17px;
  color:var(--chalk);margin-bottom:9px}
.ec-c{font-size:13px;color:#E8837C;margin:0 0 6px}
.ec-s{font-family:var(--mono);font-size:12px;color:var(--chalk-dim);margin:0 0 10px}
.ec-n{font-size:13.5px;line-height:1.8;color:var(--chalk-dim);margin:0;word-break:keep-all}

/* ④ 사건 층 */
#tl{margin-top:38px;padding-top:26px;border-top:1px solid var(--ink-3)}
#tlbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:9px}
.ev{text-align:left;padding:13px 14px;background:var(--ink-2);border:1px solid var(--ink-3);
  border-radius:9px;cursor:pointer;transition:.16s;border-top:2px solid rgba(217,86,78,.4)}
.ev:hover{border-color:rgba(217,86,78,.7);transform:translateY(-2px)}
.ev.big{border-top-width:4px;border-top-color:#D9564E}
.ev.near{background:rgba(201,162,39,.06)}
.ev.on{border-color:#D9564E;background:rgba(217,86,78,.12)}
.ev em{display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;
  color:#E8837C;margin-bottom:5px}
.ev b{display:block;font-family:var(--disp);font-weight:700;font-size:15px;color:var(--chalk);
  margin-bottom:5px}
.ev span{display:block;font-size:12px;line-height:1.65;color:var(--chalk-dim);word-break:keep-all}
.tl-note{font-size:13px;line-height:1.85;color:var(--chalk-dim);opacity:.85;margin:15px 0 0;
  word-break:keep-all}

/* ⑤ 출처 */
#src{margin-top:38px;padding-top:24px;border-top:1px solid var(--ink-3)}
#src h2{font-family:var(--disp);font-weight:700;font-size:17px;color:var(--chalk);margin:0 0 14px}
#src ul{margin:0 0 18px;padding-left:19px}
#src li{font-size:13.5px;line-height:1.85;color:var(--chalk-dim);margin-bottom:11px;
  word-break:keep-all}
#src b{color:var(--chalk);font-weight:500}
#src a{color:var(--cyan)}
.src-warn{font-size:13px;line-height:1.85;color:var(--chalk-dim);word-break:keep-all;
  padding:13px 15px;border:1px solid var(--ink-3);border-left:2px solid var(--cyan);
  border-radius:0 8px 8px 0;background:var(--ink-2);margin:0 0 11px}
.src-warn b{color:var(--cyan);font-weight:500}

.foot-note{font-size:12.5px;line-height:1.85;color:var(--chalk-dim);opacity:.7;
  margin:34px 0 0;word-break:keep-all}

@media (max-width:640px){
  .pg-h{font-size:24px}
  #sentline{font-size:21px;line-height:1.85}
  .r-scene{font-size:17px}
  .mk-t{font-size:19px}
  .trace .tr-t{font-size:16px}
  #tlbar{grid-template-columns:1fr 1fr}
}