/* NatureBio Science — plain portal style (system fonts, no motion) */
:root{--ink:#2e2e2c;--tx:#333;--mute:#666;--line:#d6d6d2;--line2:#e6e6e2;--bg:#e2e3df;--pane:#fff;--bar:#efefeb;--link:#1f5a8a;--acc:#3e6b1c;--acc2:#7fb241;--soft:#f4f4f1}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:15px/1.55 Arial,Helvetica,Verdana,"Malgun Gothic","Apple SD Gothic Neo",sans-serif;word-break:keep-all;overflow-wrap:break-word}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;border:0}
h1,h2,h3,h4{color:var(--ink);margin:0;font-weight:bold;line-height:1.3}
p{margin:0 0 10px}
ul,ol{margin:0;padding:0}
.page{max-width:1000px;margin:0 auto;background:var(--pane);min-height:100vh}
.wrap{padding:0 16px}
/* top bar */
.topbar{background:#3a3a38;color:#d8d8d4;font-size:12px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:26px;gap:10px}
.topbar a{color:#e8e8e4}
.topbar a.on{color:#fff;font-weight:bold}
.topbar .lang{white-space:nowrap;color:#999}
/* logo row */
.hd .wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding-top:14px;padding-bottom:12px}
.logo{display:block;color:var(--ink)}
.logo:hover{text-decoration:none}
.logo .wm{display:block;font:bold 34px/1 Arial,Helvetica,sans-serif;letter-spacing:-1px;color:var(--ink)}
.logo .wm span{color:var(--acc)}
.logo .sm{display:block;margin-top:5px;font-size:13px;color:var(--mute);border-top:1px solid #bbb;padding-top:4px}
.slogan{margin:0;font-size:13px;color:var(--mute);text-align:right}
/* nav bar */
.nav{background:var(--bar);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;min-height:42px}
.nav .mk{font:bold 16px/1 Arial,sans-serif;color:var(--acc);margin-right:18px;padding:4px 6px;border:1px solid var(--acc)}
.nav .mk:hover{text-decoration:none}
.gnb{list-style:none;display:flex}
.gi{position:relative}
.gi>a{display:block;padding:11px 14px;color:var(--ink);font-size:15px}
.gi>a i{font-style:normal;font-size:11px;color:#777}
.gi.on>a{font-weight:bold;color:var(--acc)}
.gi:hover>a{background:#e2e2dd;text-decoration:none}
.dd{display:none;position:absolute;left:0;top:100%;z-index:20;list-style:none;background:#fff;border:1px solid #bbb;min-width:180px;padding:4px 0}
.gi:hover .dd,.gi:focus-within .dd{display:block}
.dd a{display:block;padding:5px 14px;font-size:14px;color:var(--link)}
.dd a:hover{background:var(--soft)}
.menu-btn{display:none;margin-left:auto;background:#fff;border:1px solid #bbb;border-radius:2px;padding:5px 10px;font:14px Arial,"Malgun Gothic",sans-serif;color:var(--ink);cursor:pointer}
.drawer{display:none;position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.4)}
.drawer.open{display:block}
.drawer .pn{background:#fff;width:82%;max-width:320px;height:100%;overflow:auto;padding:10px 16px 30px;border-right:1px solid #999}
.drawer .x{display:block;margin-left:auto;background:#fff;border:1px solid #bbb;border-radius:2px;padding:4px 10px;font:14px Arial,"Malgun Gothic",sans-serif;cursor:pointer}
.drawer b{display:block;margin:14px 0 4px;padding-bottom:4px;border-bottom:1px solid var(--line);color:var(--acc)}
.drawer a{display:block;padding:5px 0;font-size:15px}
/* layout */
.lay{display:flex;gap:20px;align-items:flex-start;padding-top:14px;padding-bottom:30px}
.mainc{flex:1 1 auto;min-width:0}
.side{flex:0 0 300px;width:300px}
/* page heading line */
.ph{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:1px solid #c8c8c4;padding-bottom:6px;margin-bottom:14px}
.ph h1,.ph .h{font-size:21px;color:var(--ink)}
.ph>span{font-size:13px;font-style:italic;color:#555;text-align:right}
.ph>span.h{font-style:normal;font-size:19px;color:var(--ink);text-align:left;font-weight:bold}
.ph2{margin-top:6px}
.ph2 .h{font-size:17px}
.ph2 .h a{color:var(--ink)}
.crumb{font-size:12px;color:#777;margin-bottom:8px}
.crumb a{color:#555}
.lnbtabs{font-size:14px;color:#aaa;margin:-6px 0 14px;line-height:1.9}
.lnbtabs a{color:var(--link)}
.lnbtabs a.on{color:var(--ink);font-weight:bold}
/* headline items */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px 26px}
.it{overflow:hidden}
.it .th{float:left;width:84px;height:56px;margin:3px 10px 4px 0;background:#ddd center/cover no-repeat;border:1px solid #ccc}
.hl{font-size:16px;line-height:1.3;color:var(--link)}
.it .ld,.rs .ld{margin:5px 0 0;font-size:14px;line-height:1.55;color:#555;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.jn{color:#777;font-style:italic}
.morebar{text-align:right;border-top:1px solid var(--line);padding-top:8px;margin:16px 0 22px}
.mbtn{display:inline-block;border:1px solid #c4c4c0;background:#fff;color:var(--ink);font-size:12px;padding:4px 10px;border-radius:1px}
.mbtn:hover{background:var(--soft);text-decoration:none}
.hsec{margin-top:6px}
.hsplit{display:grid;grid-template-columns:1fr 1fr;gap:16px 26px}
ul.arr{list-style:none}
ul.arr li{position:relative;padding:3px 0 3px 14px;font-size:14px;line-height:1.4}
ul.arr li:before{content:"›";position:absolute;left:2px;top:2px;color:#888}
ul.arr small{color:#888}
ul.arr.wide li{font-size:15px;padding:4px 0 4px 14px;color:#555}
.cnt{font-size:13px;color:#666;margin-bottom:10px}
.empty{border:1px solid var(--line);background:var(--soft);padding:20px;text-align:center;color:#666}
.empty b{display:block}
/* sidebar */
.sb{margin-bottom:22px}
.sbh{font-size:17px;color:var(--acc);border-bottom:1px solid #c8c8c4;padding-bottom:6px;margin:0 0 8px}
.sb p{font-size:13px;color:#555;line-height:1.55}
/* article */
.atitle{font:normal 27px/1.3 Arial,Helvetica,"Malgun Gothic","Apple SD Gothic Neo",sans-serif;color:var(--link);margin:4px 0 14px}
.ameta{display:grid;grid-template-columns:70px 1fr;gap:6px 12px;margin:0 0 20px;font-size:15px}
.ameta dt{font-style:italic;color:#666;text-align:right}
.ameta dd{margin:0}
.ameta .lead{line-height:1.6}
.astory{display:grid;grid-template-columns:150px 1fr;gap:20px}
.lh{font-size:12px;color:#555;border-bottom:1px solid #ccc;padding:0 0 6px;margin:0 0 8px;font-weight:bold}
.aside-l .lh{margin-top:14px}
.aside-l .lh:first-child{margin-top:0}
.tags{list-style:none;font-size:13px;color:#666;line-height:1.7}
.cover{margin:0 0 14px}
.cover img{display:block;width:100%;max-height:330px;object-fit:cover;border:1px solid #ccc}
.prose{font-size:16px;line-height:1.7}
.prose p{margin:0 0 14px}
.prose h3{font-size:17px;margin:22px 0 8px}
.prose a{text-decoration:underline}
.prose ul{padding-left:22px;margin:0 0 14px}
.srcfig{margin:18px 0;border:1px solid var(--line);padding:8px;background:var(--soft)}
.srcfig img{display:block;margin:0 auto;background:#fff}
.srcfig figcaption{font-size:12px;color:#555;margin-top:6px;line-height:1.5}
.points{border:1px solid var(--line);background:var(--soft);padding:12px 14px;margin:18px 0}
.points b{display:block;margin-bottom:6px;color:var(--ink)}
.points ul{padding-left:20px;font-size:14px;line-height:1.6}
.caveat{font-size:14px;color:#555;border-left:3px solid #bbb;padding:2px 0 2px 10px}
.caveat b{color:var(--ink)}
.srcbox{border-top:1px solid var(--line);margin-top:24px;padding-top:14px}
.rh{font-size:15px;margin-bottom:8px}
.srcbox ol{padding-left:24px;font-size:15px;line-height:1.6;margin-bottom:10px}
.srcbox ol a{text-decoration:underline}
.btn{display:inline-block;background:var(--acc);color:#fff;border:1px solid #2f5414;padding:6px 14px;font-size:14px;border-radius:2px}
.btn:hover{background:#345c17;text-decoration:none}
.note{font-size:12px;color:#777}
.related{margin-top:22px}
.rs{margin-bottom:14px}
.rs .hl{font-weight:bold;font-size:15px}
.art-nav{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0;margin-top:16px;font-size:14px}
.art-nav p{margin:3px 0}
.art-nav b{color:#555;margin-right:6px}
/* section titles / journals */
.ttl{font-size:17px;color:var(--ink);border-bottom:1px solid #c8c8c4;padding-bottom:6px;margin:24px 0 12px}
.cont>.ttl:first-child,.cont .prose>.ttl:first-child{margin-top:0}
.jlist{list-style:none;columns:3;column-gap:20px;font-size:14px;margin-bottom:20px}
.jlist li{padding:2px 0;break-inside:avoid}
.jlist small{color:#888}
.jsec{margin-bottom:10px}
.watch{font-size:14px;color:#555}
/* summary (explainers) */
.summary{border:1px solid var(--line);background:var(--soft);padding:12px 14px;margin:0 0 18px}
.summary b{display:block;margin-bottom:4px;color:var(--acc)}
.summary p{margin:0;font-size:14px;line-height:1.6}
/* explainers */
.lead2{overflow:hidden}
.lead2 .photo{float:right;width:220px;height:150px;margin:0 0 10px 16px;background:#ddd center/cover no-repeat;border:1px solid #ccc}
.mtag{font-size:13px;color:#555;margin:6px 0 10px}
.mtag span{display:inline-block;border:1px solid #ccc;background:var(--soft);padding:1px 7px;margin:0 4px 5px 0}
.topics{list-style:none;border-top:1px solid var(--line2)}
.topics li{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line2)}
.topics li>span{color:#888;font-size:13px;min-width:22px}
.topics b{display:block;font-size:15px}
.topics p{margin:2px 0 0;font-size:14px;color:#555}
.flow>div{border-bottom:1px solid var(--line2);padding:7px 0;font-size:14px}
.flow>div b{color:#888;font-weight:normal;margin-right:8px}
.flow>div strong{margin-right:8px}
.flow>div p{display:inline;margin:0;color:#555}
.ref{border-top:1px solid var(--line);margin-top:24px;padding-top:10px;font-size:13px;color:#555}
.ref b{display:block;color:var(--ink);margin-bottom:4px;font-size:14px}
.ref ol{padding-left:22px;line-height:1.6}
/* about / CI / contact */
.cover-list{margin:0 0 14px}
.cover-list>div{border-bottom:1px solid var(--line2);padding:6px 0}
.cover-list dt{font-weight:bold;font-size:15px}
.cover-list dt em{font-style:normal;font-weight:normal;color:#777;font-size:13px;margin-right:8px}
.cover-list dd{margin:0;font-size:14px;color:#555}
.sign{margin-top:16px;color:var(--ink);font-weight:bold}
.sign small{display:block;font-weight:normal;color:#777}
.ci-marks{display:flex;gap:12px;margin-bottom:18px}
.ci-mark{width:150px;height:150px;border:1px solid var(--line);padding:14px;background:#fff}
.ci-mark.dk{background:#2e2e2c}
.swatch{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:6px 0 14px}
.swatch div{color:#fff;padding:10px;font-size:13px;border:1px solid #bbb}
.swatch b,.swatch span{display:block}
.typo{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.typo>div{border:1px solid var(--line);padding:10px}
.typo .s1{font:22px Georgia,serif;margin:0}
.typo .s2{font:bold 20px Arial,"Malgun Gothic",sans-serif;margin:0}
.typo small{color:#777}
.grid.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.card{border:1px solid var(--line);padding:12px;background:#fff}
.card .ic{color:#777;display:block;margin-bottom:4px}
.card h3{font-size:15px;margin-bottom:4px}
.card p{font-size:14px;color:#555;margin:0}
.tbwrap{overflow-x:auto;margin-top:20px}
.tb{width:100%;border-collapse:collapse;font-size:14px}
.tb th,.tb td{border:1px solid var(--line);padding:7px 9px;text-align:left;vertical-align:top}
.tb th{background:var(--soft);font-weight:bold}
.tb td.c{text-align:center}
.cat{font-size:12px;color:#555}
.st{display:inline-block;font-size:12px;border:1px solid #bbb;padding:0 5px}
.callout{border:1px solid var(--line);background:var(--soft);padding:10px 12px;margin-bottom:14px}
.policy h3{font-size:16px;margin:18px 0 6px}
.nf{padding:20px 0}
.nf .eb{color:#888;margin:0}
.nf h1{font-size:24px;margin:4px 0 10px}
/* footer */
.ft{border-top:1px solid var(--line);font-size:13px}
.fcols{background:#ededea;padding:18px 0}
.fcols .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fc h2{font-size:15px;color:var(--ink);border-bottom:1px solid #c4c4c0;padding-bottom:6px;margin-bottom:6px}
.fc a{display:block;padding:2px 0;font-size:13px}
.fbar{background:#d4d5d0;padding:12px 0 14px;text-align:center;color:#444}
.fbar nav{margin-bottom:6px;color:#777}
.fbar nav a{color:#222}
.fbar nav a.b{font-weight:bold}
.fbar address{font-style:normal;margin-bottom:4px}
.fbar .cp{margin:2px 0;font-size:12px}
/* responsive */
@media (max-width:860px){
  .lay{display:block}
  .side{width:auto;margin-top:26px;border-top:2px solid #c8c8c4;padding-top:14px}
}
@media (max-width:760px){
  .gnb{display:none}
  .menu-btn{display:block}
  .hd .wrap{display:block}
  .slogan{text-align:left;margin-top:6px}
  .logo .wm{font-size:28px}
  .grid2,.hsplit{grid-template-columns:1fr}
  .astory{grid-template-columns:1fr}
  .aside-l{order:2;border-top:1px solid var(--line);padding-top:10px}
  .ameta{grid-template-columns:52px 1fr;font-size:14px}
  .atitle{font-size:23px}
  .cover img{max-height:210px}
  .jlist{columns:2}
  .lead2 .photo{float:none;width:100%;height:160px;margin:0 0 12px}
  .grid.g3,.fcols .wrap{grid-template-columns:1fr}
  .swatch{grid-template-columns:1fr 1fr}
  .typo{grid-template-columns:1fr}
  .topbar .wrap>span:first-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
}
/* merged into style.css (redesign) */
/* merged into style.css (redesign) */