/* ── 오늘의 과학 /today/ ────────────────────────────────
   library.css 의 읽기 틀(lib-wrap 등) 위에 얹는다. 갈래 색은 --fc 로 받는다. */

.td-wrap{max-width:760px}
.td-h1{font-family:var(--disp);font-weight:700;font-size:30px;margin:0 0 14px;line-height:1.3}
.today .lib-lede{margin-bottom:34px}
.tn-today{color:var(--brass)}
/* 어린이 과학 바로 가기 — 오늘의 과학 바로 옆, 알약 모양 단추 (2026-09-29) */
.tn-kids{color:var(--cyan);border:1px solid var(--cyan);border-radius:999px;padding:4px 12px;
  line-height:1.2;white-space:nowrap}
.tn-kids:hover{background:var(--cyan);color:var(--ink)}
.topnav a{white-space:nowrap}
/* 대문 머리줄에 단추가 하나 늘어 중간 폭에서 넘친다 — 본문·꼬리말에도 있는 링크부터 접는다 */
@media (max-width:1320px){.topnav:has(.tn-kids) a[href="people/"],.topnav:has(.tn-kids) a[href="glossary/"]{display:none}}
@media (max-width:1100px){.topnav:has(.tn-kids) a[href^="#"]{display:none}}
@media (max-width:860px){.topnav:has(.tn-kids) a[href="library/"]{display:none}}
@media (max-width:740px){.topnav:has(.tn-kids) .tn-today{display:none}}
@media (max-width:400px){.tn-kids{padding:3px 9px;font-size:12.5px}}
/* 중학교 과학 바로 가기 — 어린이 과학 바로 옆 (2026-10-05). 단추가 둘이라 좁은 폭에서는 다른 링크를 조금 더 일찍 접는다 */
@media (max-width:1460px){.topnav:has(.tn-mid) a[href="people/"],.topnav:has(.tn-mid) a[href="glossary/"],.topnav:has(.tn-mid) a[href="/people/"],.topnav:has(.tn-mid) a[href="/glossary/"]{display:none}}
@media (max-width:1000px){.topnav:has(.tn-mid) a[href="library/"],.topnav:has(.tn-mid) a[href="/library/"],.topnav:has(.tn-mid) a[href="/map"],.topnav:has(.tn-mid) a[href="map"]{display:none}}
@media (max-width:860px){.topnav:has(.tn-mid) .tn-today{display:none}}
/* 휴대폰에서는 「어린이」「중학교」로 줄여 쓴다 — 낮밤·EN 단추가 밀려 나가지 않게 */
@media (max-width:520px){.topnav:has(.tn-mid) .tn-kids{padding:3px 9px;font-size:12.5px}.topnav:has(.tn-mid) .tn-x{display:none}}
@media (max-width:430px){.topbar:has(.tn-mid) .brand-mk{display:none}}
/* 오늘의 과학 지면(/today/ · /en/today/) 윗줄 메뉴 — 링크가 하나 더 있어 태블릿 폭에서 넘친다 (2026-10-05).
   본문 아래 꼬리말에도 있는 인물·용어집부터, 그다음 제 자리를 가리키는 「오늘의 과학」, 마지막으로 자료실을 접는다.
   영어는 글자가 길어 더 일찍 접는다. 400px 아래는 science.css 가 계보 지도·EN 만 남긴다.
   이름표(과학 아틀라스)는 줄지 않게 묶는다 — 묶지 않으면 「과학 아틀라 / 스」로 글자 가운데서 끊긴다 */
body.today .brand{flex-shrink:0}
body.today .brand-sub{white-space:nowrap}
@media (max-width:960px){body.today .topnav a[href$="/people/"],body.today .topnav a[href$="/glossary/"]{display:none}}
@media (max-width:730px){body.today .topnav .tn-today{display:none}}
@media (max-width:1010px){html[lang="en"] body.today .topnav a[href$="/people/"],html[lang="en"] body.today .topnav a[href$="/glossary/"]{display:none}}
@media (max-width:800px){html[lang="en"] body.today .topnav .tn-today{display:none}}
@media (max-width:680px){html[lang="en"] body.today .topnav a[href$="/library/"]{display:none}}
/* 중학교 수학 바로 가기 — 보라 알약 (2026-10-06). 「중학 과학」「중학 수학」은 폰에서도 줄이지 않는다 */
.tn-math{color:var(--d-math);border-color:var(--d-math)}
.tn-math:hover{background:var(--d-math);color:var(--ink)}
/* 알약이 셋이라 넓은 화면에서도 조금 빠듯하다 — 간격을 좁히고, 본문에도 있는 #지도·#카드 링크를 먼저 접는다 */
@media (max-width:1400px){.topnav:has(.tn-math){gap:13px}.topnav:has(.tn-math) a[href^="#"]{display:none}}
@media (max-width:900px){.topnav:has(.tn-math) .tn-kids{padding:4px 9px}}
/* 휴대폰·좁은 태블릿: 알약 셋은 둘째 줄로 내린다. 첫 줄은 이름 · 검색 · 낮밤 · EN, 둘째 줄은 어린이 과학 · 중학 과학 · 중학 수학.
   520px 에서 내리면 521~720px 이 넘쳐서(첫 화면 최대 41px) 760px 로 올림 (20261006c) */
@media (max-width:760px){
  .topnav:has(.tn-math){flex-wrap:wrap;justify-content:flex-end;row-gap:7px;gap:6px;flex:1 1 0;min-width:0}
  .topnav:has(.tn-math)>*{order:1}
  .topnav:has(.tn-math)::before{content:"";order:2;flex-basis:100%;height:0}
  .topnav:has(.tn-math) .tn-kids{order:3;display:inline-block;padding:3px 9px;font-size:12.5px}
}

.td-day{margin:0 0 44px}
.td-date{font-family:var(--disp);font-weight:700;font-size:22px;margin:0 0 10px;line-height:1.3}
.td-date a{color:inherit;text-decoration:none}
.td-date a:hover{color:var(--brass)}
h1.td-date{font-size:30px}
.td-intro{font-size:16px;line-height:1.85;color:var(--chalk-dim);margin:0 0 26px;word-break:keep-all}

.td-item{border:1px solid var(--ink-3);border-left:3px solid var(--fc,var(--brass));border-radius:12px;
  padding:20px 22px 18px;margin:0 0 18px;background:var(--ink-2)}
.td-field{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--chalk-dim);margin:0 0 6px;
  display:flex;align-items:center;gap:7px}
.td-field i{width:8px;height:8px;border-radius:50%;background:var(--fc,var(--brass));display:inline-block}
.td-title{font-family:var(--disp);font-weight:700;font-size:20px;line-height:1.4;margin:0 0 6px;word-break:keep-all}
.td-title a{color:inherit;text-decoration:none}
.td-title a:hover{color:var(--brass)}
.td-one{font-size:14.5px;line-height:1.7;color:var(--chalk-dim);margin:0 0 14px;word-break:keep-all}
.td-easy p{font-size:15.5px;line-height:1.9;margin:0 0 12px;word-break:keep-all}
.td-atlas{margin:16px 0 0;padding:14px 16px;border-radius:9px;background:rgba(200,168,107,.07);border:1px solid rgba(200,168,107,.3)}
.td-atlas>b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--brass);margin-bottom:8px;font-weight:500}
.td-atlas p{font-size:15px;line-height:1.85;margin:0 0 8px;word-break:keep-all}
.td-links{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px}
.td-links a{font-size:13px;color:var(--cyan);text-decoration:none;border-bottom:1px dotted rgba(111,183,201,.5)}
.td-links a:hover{border-bottom-style:solid}
.td-caution{font-size:13.5px;line-height:1.75;margin:14px 0 0;color:var(--chalk-dim);word-break:keep-all}
.td-caution b{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--chalk);margin-right:8px;font-weight:500}
.td-src{font-size:12px;margin:12px 0 0;color:var(--chalk-dim)}
.td-src a{color:var(--chalk-dim)}
.td-src a:hover{color:var(--brass)}

.td-pn{display:flex;justify-content:space-between;gap:12px;margin:10px 0 0;padding-top:18px;border-top:1px solid var(--ink-3)}
.td-pn a{font-size:13.5px;color:var(--chalk-dim);text-decoration:none}
.td-pn a:hover{color:var(--brass)}

.td-past{margin-top:48px;padding-top:26px;border-top:1px solid var(--ink-3)}
.td-past h2{font-family:var(--disp);font-size:20px;margin:0 0 16px}
.td-past-day{margin:0 0 16px}
.td-past-date{font-size:14px;color:var(--brass);text-decoration:none}
.td-past ul{list-style:none;margin:6px 0 0;padding:0 0 0 2px}
.td-past li{font-size:14px;line-height:1.7}
.td-past li a{color:var(--chalk);text-decoration:none}
.td-past li a:hover{color:var(--brass)}
.td-more{margin-top:14px}
.td-more a{font-size:13.5px;color:var(--cyan);text-decoration:none}

.td-month h2{font-family:var(--disp);font-size:20px;margin:26px 0 10px}
.td-month ul{list-style:none;margin:0;padding:0}
.td-month li{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--ink-3);font-size:14px;line-height:1.6}
.td-month li a{color:var(--brass);text-decoration:none;white-space:nowrap}
.td-month li span{color:var(--chalk-dim);word-break:keep-all}

/* 포털 칸 */
.section-today{padding-top:0;padding-bottom:20px}
.td-box{border:1px solid var(--ink-3);border-radius:14px;padding:26px 28px;background:var(--ink-2);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:22px 32px;align-items:start}
.td-box-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--brass);margin:0 0 8px}
.td-box-head h2{font-family:var(--disp);font-weight:700;font-size:24px;margin:0 0 10px;line-height:1.3}
.td-box-head h2 a{color:inherit;text-decoration:none}
.td-box-head h2 a:hover{color:var(--brass)}
.td-box-lede{font-size:14.5px;line-height:1.8;color:var(--chalk-dim);margin:0;word-break:keep-all}
.td-box-list{list-style:none;margin:0;padding:0}
.td-box-list li{display:flex;align-items:baseline;gap:10px;padding:8px 0;border-bottom:1px solid var(--ink-3);font-size:15px;line-height:1.55;word-break:keep-all}
.td-box-list li:last-child{border-bottom:0}
.td-box-list i{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--fc,var(--brass));position:relative;top:-1px}
.td-box-list a{color:var(--chalk);text-decoration:none}
.td-box-list a:hover{color:var(--brass)}
.td-box-more{grid-column:1/-1;margin:4px 0 0;display:flex;gap:18px}
.td-box-more a{font-size:13.5px;color:var(--cyan);text-decoration:none}
.td-box-more a+a{color:var(--chalk-dim)}

@media (max-width:720px){
  .td-box{grid-template-columns:1fr;padding:20px 18px}
  .td-month li{grid-template-columns:1fr}
  .td-h1,h1.td-date{font-size:24px}
}
.topbar:has(.tn-kids) .brand-sub{white-space:nowrap}
@media (min-width:741px){.topbar:has(.tn-kids) .brand-mk{white-space:nowrap}}