@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:#14213D;
  --leaf:#2E6F5E;
  --amber:#B4762B;
  --paper:#F7F8F6;
  --surface:#FFFFFF;
  --line:#D6DBD8;
  --mute:#5C6B66;
  --serif:'Nanum Myeongjo','Noto Serif KR',serif;
  --sans:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  --mono:'IBM Plex Mono','D2Coding',monospace;
  --wrap:1120px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.75;
  -webkit-text-size-adjust:100%;
}
a{color:var(--leaf); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--amber); outline-offset:2px}

/* ---------- navbar (모든 페이지 동일 · 위치 고정) ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:var(--ink); color:#fff;
  border-bottom:3px solid var(--leaf);
}
.nav-in{max-width:var(--wrap); margin:0 auto; padding:0 20px;
  display:flex; align-items:center; gap:22px; height:62px}
.brand{font-family:var(--serif); font-weight:800; font-size:18px; color:#fff; white-space:nowrap}
.brand:hover{text-decoration:none}
.brand em{font-style:normal; color:#8FD3BC}
.nav ul{list-style:none; display:flex; gap:2px; margin:0; padding:0; flex:1; overflow-x:auto}
.nav ul a{
  display:block; padding:8px 13px; color:#D8E2DE; font-size:14.5px;
  border-radius:3px; white-space:nowrap;
}
.nav ul a:hover{background:rgba(255,255,255,.10); color:#fff; text-decoration:none}
.nav ul a[aria-current="page"]{background:var(--leaf); color:#fff; font-weight:700}
.nav-auth{display:flex; gap:8px}
.nav-auth a{padding:7px 14px; font-size:14px; border-radius:3px; border:1px solid rgba(255,255,255,.35); color:#fff}
.nav-auth a.solid{background:var(--leaf); border-color:var(--leaf)}
.nav-auth a:hover{text-decoration:none; background:rgba(255,255,255,.14)}

/* ---------- page shell ---------- */
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
main{padding:38px 0 70px; min-height:60vh}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--leaf); margin:0 0 8px}
h1{font-family:var(--serif); font-size:34px; line-height:1.3; margin:0 0 10px; font-weight:800}
h2{font-family:var(--serif); font-size:23px; margin:38px 0 12px; font-weight:700;
  padding-bottom:8px; border-bottom:1px solid var(--line)}
h3{font-size:17px; margin:24px 0 8px; font-weight:700}
.lead{font-size:17.5px; color:#35404F; max-width:760px; margin:0 0 26px}
p{margin:0 0 14px; max-width:800px}
.mute{color:var(--mute); font-size:14.5px}

/* ---------- signature: 근거등급 배지 ---------- */
.grade{
  display:inline-block; font-family:var(--mono); font-size:11px; font-weight:500;
  padding:2px 7px; border-radius:2px; letter-spacing:.04em; vertical-align:2px;
}
.g-ok{background:#E4F0EB; color:var(--leaf); border:1px solid #B9DACD}
.g-un{background:#FBF1E2; color:var(--amber); border:1px solid #E8D4B0}
.g-neg{background:#F6E7E7; color:#9A3B3B; border:1px solid #E2C2C2}

/* ---------- signature: 케톤율 게이지 ---------- */
.kr{display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:13px}
.kr-bar{width:92px; height:7px; background:#E5E9E7; border-radius:4px; overflow:hidden}
.kr-fill{height:100%; background:linear-gradient(90deg,var(--leaf),#5FA98E)}

/* ---------- cards / tables ---------- */
.grid{display:grid; gap:16px; margin:20px 0}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--surface); border:1px solid var(--line); border-radius:5px; padding:18px 20px}
.card h3{margin-top:0}
.card p{margin-bottom:0; font-size:14.5px; color:#3B4753}

table{width:100%; border-collapse:collapse; margin:16px 0; font-size:14.5px; background:var(--surface)}
th,td{border:1px solid var(--line); padding:9px 11px; text-align:left; vertical-align:top}
th{background:#EDF1EF; font-weight:700; font-size:13.5px}
td.num{font-family:var(--mono); text-align:right; white-space:nowrap}
.scroll{overflow-x:auto}

/* ---------- 서브탭 (교육강좌) ---------- */
.subtabs{display:flex; gap:6px; margin:0 0 24px; border-bottom:1px solid var(--line); padding-bottom:0}
.subtabs a{padding:9px 18px; font-size:14.5px; color:var(--mute);
  border:1px solid transparent; border-bottom:none; border-radius:4px 4px 0 0; margin-bottom:-1px}
.subtabs a:hover{color:var(--ink); text-decoration:none; background:#EDF1EF}
.subtabs a[aria-current="page"]{
  background:var(--surface); border-color:var(--line); border-bottom-color:var(--surface);
  color:var(--ink); font-weight:700}

/* ---------- notice ---------- */
.note{border-left:3px solid var(--amber); background:#FCF7EF; padding:14px 18px; margin:20px 0; font-size:14.5px}
.note strong{color:var(--amber)}

/* ---------- forms ---------- */
.form{max-width:400px; background:var(--surface); border:1px solid var(--line); border-radius:5px; padding:26px}
.form label{display:block; font-size:13.5px; font-weight:700; margin:14px 0 5px}
.form input{width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:4px; font-size:15px; font-family:var(--sans)}
.btn{display:block; width:100%; margin-top:20px; padding:12px; background:var(--leaf); color:#fff;
  border:none; border-radius:4px; font-size:15px; font-weight:700; cursor:pointer; font-family:var(--sans)}
.btn:hover{background:#25594B}
.social{margin-top:18px; padding-top:18px; border-top:1px solid var(--line)}
.social a{display:block; text-align:center; padding:11px; margin-bottom:8px; border-radius:4px;
  font-size:14.5px; font-weight:700; color:#fff}
.social a:hover{text-decoration:none; opacity:.9}
.s-naver{background:#03C75A}
.s-kakao{background:#FEE500; color:#3C1E1E !important}
.s-google{background:#fff; color:#3B4753 !important; border:1px solid var(--line)}

/* ---------- footer ---------- */
footer{background:#0F1A2E; color:#9FB0AA; font-size:13px; padding:32px 0 40px; line-height:1.9}
footer .wrap{max-width:var(--wrap)}
footer a{color:#B9DACD}
footer .biz{margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.12)}
footer .flinks{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:6px}

@media (max-width:820px){
  .nav-in{height:auto; flex-wrap:wrap; padding:10px 16px; gap:10px}
  .nav ul{order:3; width:100%}
  .nav-auth{margin-left:auto}
  .g2,.g3{grid-template-columns:1fr}
  h1{font-size:27px}
  .lead{font-size:16px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}