@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@500;600;700;900&family=Pretendard:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

/* ---------- Tokens ---------- */
:root{
  --ink:#1c2541;
  --paper:#f7f5f0;
  --paper-alt:#efece3;
  --chem:#2e7d6b;
  --chem-soft:#e2efec;
  --bio:#b5473d;
  --bio-soft:#f4e6e3;
  --gold:#b8901f;
  --gold-soft:#f3e9cf;
  --gray:#6b6b63;
  --line: rgba(28,37,65,.14);
  --radius: 3px;
  --serif: 'Noto Serif KR', serif;
  --sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;}
a{color:inherit;}
h1,h2,h3,h4{font-family:var(--serif); line-height:1.3; margin:0 0 .5em; letter-spacing:-.01em;}
p{margin:0 0 1em;}
.container{max-width:1080px; margin:0 auto; padding:0 24px;}
.eyebrow{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gray); display:inline-flex; align-items:center; gap:8px; margin-bottom:14px;
}
.eyebrow::before{content:""; width:18px; height:1px; background:currentColor; display:inline-block;}

/* ---------- Header ---------- */
.site-header{
  border-bottom:1px solid var(--line);
  background:var(--paper);
  position:sticky; top:0; z-index:50;
}
.site-header .bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; max-width:1080px; margin:0 auto;
}
.logo{
  font-family:var(--serif); font-weight:700; font-size:19px; text-decoration:none; color:var(--ink);
  display:flex; align-items:center; gap:9px;
}
.logo .mark{
  width:26px; height:26px; border-radius:50%;
  background:conic-gradient(from 200deg, var(--chem), var(--bio));
  display:inline-block; position:relative;
}
.logo .mark::after{content:""; position:absolute; inset:6px; background:var(--paper); border-radius:50%;}
nav.main-nav{display:flex; gap:28px; align-items:center;}
nav.main-nav a{
  text-decoration:none; font-size:14.5px; font-weight:600; color:var(--ink); opacity:.75;
  padding-bottom:3px; border-bottom:2px solid transparent; transition:.15s;
}
nav.main-nav a:hover, nav.main-nav a.active{opacity:1; border-color:var(--gold);}
.nav-toggle{display:none; background:none; border:1px solid var(--line); border-radius:var(--radius); padding:8px 10px; font-size:18px; cursor:pointer;}

@media (max-width:820px){
  nav.main-nav{
    position:absolute; top:100%; left:0; right:0; background:var(--paper);
    flex-direction:column; align-items:flex-start; gap:0; border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  nav.main-nav.open{max-height:400px;}
  nav.main-nav a{width:100%; padding:14px 24px; border-bottom:1px solid var(--line); border-left:2px solid transparent;}
  nav.main-nav a.active, nav.main-nav a:hover{border-left-color:var(--gold); border-bottom-color:var(--line);}
  .nav-toggle{display:inline-block;}
}

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  font-family:var(--mono); font-size:12px; color:var(--gray); padding:14px 0; letter-spacing:.02em;
}
.breadcrumb a{text-decoration:none; border-bottom:1px dotted var(--gray);}

/* ---------- Hero ---------- */
.hero{padding:56px 0 40px; border-bottom:1px solid var(--line);}
.hero h1{font-size:clamp(28px,4.4vw,44px); max-width:820px;}
.hero .lede{font-size:18px; color:#3d4258; max-width:680px;}
.hero .tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px;}
.tag{
  font-family:var(--mono); font-size:11.5px; padding:5px 10px; border-radius:20px;
  border:1px solid var(--line); color:var(--gray);
}

/* ---------- Scale / signature illustration ---------- */
.scale-wrap{display:flex; justify-content:center; margin:32px 0 8px;}

/* ---------- Sections ---------- */
section{padding:44px 0;}
section.alt{background:var(--paper-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
h2.section-title{font-size:clamp(22px,3vw,30px);}
.section-intro{max-width:720px; color:#3d4258;}

/* ---------- Compare table (ledger style) ---------- */
.ledger{
  display:grid; grid-template-columns: 200px 1fr 1fr; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; margin:28px 0; background:#fff;
}
.ledger .head{background:var(--ink); color:var(--paper); font-family:var(--serif); font-weight:600; padding:14px 16px; font-size:15px;}
.ledger .head.chem{background:var(--chem);}
.ledger .head.bio{background:var(--bio);}
.ledger .head.corner{background:var(--ink);}
.ledger .row-label{
  font-family:var(--mono); font-size:12.5px; color:var(--gray); padding:14px 16px; border-top:1px solid var(--line);
  display:flex; align-items:center; background:var(--paper-alt);
}
.ledger .cell{padding:14px 16px; border-top:1px solid var(--line); border-left:1px solid var(--line); font-size:14.5px;}
.ledger .cell.chem{background:var(--chem-soft);}
.ledger .cell.bio{background:var(--bio-soft);}
@media (max-width:720px){
  .ledger{grid-template-columns:1fr;}
  .ledger .row-label{border-left:none;}
  .ledger .cell{border-left:none;}
}

/* ---------- Rank list (priority) ---------- */
.rank-list{list-style:none; margin:28px 0; padding:0; counter-reset:rank;}
.rank-item{
  counter-increment:rank; display:grid; grid-template-columns:64px 1fr; gap:18px;
  border:1px solid var(--line); border-radius:var(--radius); background:#fff; margin-bottom:14px; padding:18px;
  align-items:start;
}
.rank-item .seal{
  width:46px; height:46px; border-radius:50%; border:2px solid var(--gold);
  display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:700; font-size:19px;
  color:var(--gold); position:relative;
}
.rank-item h3{margin-bottom:4px; font-size:18px;}
.rank-item .meta{font-family:var(--mono); font-size:11.5px; color:var(--gray); margin-bottom:8px;}

/* ---------- Callout / stamp box ---------- */
.callout{
  border:1px solid var(--line); border-left:4px solid var(--gold); background:var(--gold-soft);
  padding:20px 22px; border-radius:var(--radius); margin:26px 0;
}
.callout .label{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:6px; display:block;}

.callout.chem{border-left-color:var(--chem); background:var(--chem-soft);}
.callout.chem .label{color:var(--chem);}
.callout.bio{border-left-color:var(--bio); background:var(--bio-soft);}
.callout.bio .label{color:var(--bio);}

/* ---------- Two-column ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
@media (max-width:720px){.split{grid-template-columns:1fr;}}
.card{border:1px solid var(--line); border-radius:var(--radius); background:#fff; padding:22px;}
.card h3{font-size:17px; display:flex; align-items:center; gap:8px;}
.dot{width:9px; height:9px; border-radius:50%; display:inline-block;}
.dot.chem{background:var(--chem);}
.dot.bio{background:var(--bio);}

/* ---------- FAQ ---------- */
details.faq{border-bottom:1px solid var(--line); padding:16px 0;}
details.faq summary{
  cursor:pointer; font-family:var(--serif); font-weight:600; font-size:16.5px; list-style:none;
  display:flex; justify-content:space-between; gap:12px;
}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary::after{content:"+"; font-family:var(--mono); color:var(--gold); font-size:20px;}
details.faq[open] summary::after{content:"–";}
details.faq p{margin-top:10px; color:#3d4258;}

/* ---------- Table (data) ---------- */
table.data{width:100%; border-collapse:collapse; margin:22px 0; font-size:14px;}
table.data th, table.data td{border:1px solid var(--line); padding:10px 12px; text-align:left;}
table.data th{background:var(--ink); color:var(--paper); font-family:var(--mono); font-size:12px; letter-spacing:.05em;}
table.data td{background:#fff;}
table.data tr:nth-child(even) td{background:var(--paper-alt);}

/* ---------- CTA links ---------- */
.link-cards{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:24px 0;}
@media (max-width:720px){.link-cards{grid-template-columns:1fr;}}
.link-card{
  display:block; text-decoration:none; color:var(--ink); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; background:#fff; transition:.15s; position:relative; overflow:hidden;
}
.link-card:hover{border-color:var(--gold); transform:translateY(-2px);}
.link-card .k{font-family:var(--mono); font-size:11px; color:var(--gray); letter-spacing:.08em; text-transform:uppercase;}
.link-card h3{margin:8px 0 6px; font-size:19px;}
.link-card p{color:#3d4258; font-size:14px; margin:0;}

/* ---------- TOC ---------- */
.toc{border:1px solid var(--line); background:#fff; border-radius:var(--radius); padding:18px 22px; margin:24px 0;}
.toc .label{font-family:var(--mono); font-size:11.5px; color:var(--gray); text-transform:uppercase; letter-spacing:.1em; margin-bottom:8px; display:block;}
.toc ol{margin:0; padding-left:20px;}
.toc a{text-decoration:none; border-bottom:1px dotted var(--line);}

/* ---------- Footer ---------- */
footer.site-footer{
  border-top:1px solid var(--line); background:var(--ink); color:var(--paper); padding:40px 0 26px; margin-top:40px;
}
footer.site-footer .grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:24px;}
@media (max-width:720px){footer.site-footer .grid{grid-template-columns:1fr; gap:28px;}}
footer.site-footer h4{color:var(--paper); font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; opacity:.7; margin-bottom:12px;}
footer.site-footer a{color:var(--paper); opacity:.85; text-decoration:none; display:block; margin-bottom:8px; font-size:14px;}
footer.site-footer a:hover{opacity:1; text-decoration:underline;}
footer.site-footer .bottom{margin-top:28px; padding-top:20px; border-top:1px solid rgba(247,245,240,.15); font-size:12.5px; opacity:.6;}
footer.site-footer p{opacity:.85; font-size:14px;}

/* ---------- Utility ---------- */
.mt-0{margin-top:0;}
.small{font-size:13px; color:var(--gray);}
.center{text-align:center;}