
:root{
  --brand:oklch(20% 0.01 260);--paper:oklch(98% 0.003 90);--card:#ffffff;
  --text:oklch(18% 0.01 260);--text-soft:oklch(48% 0.01 260);--accent:oklch(55% 0.09 165);
  --accent-tint:oklch(96% 0.02 165);--line:oklch(88% 0.006 90);
}
*{box-sizing:border-box}
body{margin:0;font-family:'Pretendard',sans-serif;color:var(--text);line-height:1.8;background:var(--paper)}
.site-header{display:flex;align-items:center;justify-content:space-between;padding:22px 56px;border-bottom:1px solid var(--line);max-width:1280px;margin:0 auto}
.logo{font:900 20px/1 'Pretendard',sans-serif;letter-spacing:-.02em;color:var(--brand);text-decoration:none}
.site-header nav{display:flex;gap:26px;flex-wrap:wrap}
.site-header nav a{color:var(--text);text-decoration:none;font-size:14px;font-weight:500}
.site-header nav a:hover{color:var(--brand);font-weight:700}
.breadcrumb{max-width:1280px;margin:20px auto 0;padding:0 56px;font-size:13px;color:var(--text-soft)}
.breadcrumb a{color:var(--text-soft);text-decoration:none}
main.content{max-width:1280px;margin:0 auto;padding:44px 56px 100px}
h1{font:900 40px/1.3 'Pretendard',sans-serif;letter-spacing:-.02em;color:var(--text);margin:0 0 16px}
main.content>h1{font-size:44px}
article h2{font:700 24px/1.4 'Pretendard',sans-serif;color:var(--text);margin:40px 0 18px}
article h3{font:700 18px/1.4 'Pretendard',sans-serif;color:var(--text);margin:34px 0 14px}
article p{font:400 18px/1.9 'Pretendard',sans-serif;color:var(--text);margin:0 0 28px}
.byline{font:500 13px/1.5 'Pretendard',sans-serif;color:var(--text-soft);margin-bottom:32px}
.info-label{font:700 11px 'Pretendard',sans-serif;color:var(--text-soft);letter-spacing:.08em;margin-bottom:18px}
.info-label span{margin-left:6px;font-weight:700}
.tablewrap{overflow-x:auto;margin:0 0 36px}
table{width:100%;border-collapse:collapse;font-size:13px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
thead tr{background:var(--brand)}
th{color:#fff;font:700 13px 'Pretendard',sans-serif;padding:12px 16px;text-align:left;white-space:nowrap}
td{padding:12px 16px;border-top:1px solid var(--line)}
th:first-child,td:first-child{white-space:nowrap}
tbody tr:nth-child(even){background:var(--paper)}
.lede{color:var(--text-soft);font-size:17px;max-width:640px}
.section-label{font:700 16px 'Pretendard',sans-serif;color:var(--text);padding-bottom:12px;border-bottom:2px solid var(--brand);margin:48px 0 0}
/* 최신 발행 — 디자인 원본 그대로: 텍스트 행 리스트(이미지 없음) */
.latest-list{margin-top:0}
.latest-row{display:flex;align-items:baseline;gap:20px;padding:18px 0;border-bottom:1px solid var(--line);text-decoration:none}
.latest-dept{font:700 12px 'Pretendard',sans-serif;color:var(--text-soft);width:90px;flex:none}
.latest-title{font:700 17px 'Pretendard',sans-serif;color:var(--text);flex:1}
.latest-date{font:500 13px 'Pretendard',sans-serif;color:var(--text-soft);flex:none}
/* 번호 인덱스 리스트(진료과목/카테고리 글목록) */
.row-list{border-top:1px solid var(--line);margin-top:8px}
.row-item{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.row-idx{width:28px;flex:none;font:600 13px ui-monospace,monospace;color:var(--text-soft)}
.row-title{font:700 17px 'Pretendard',sans-serif;flex:1;color:var(--text)}
.row-meta{font:400 13px 'Pretendard',sans-serif;color:var(--text-soft)}
/* 기사 2단 레이아웃 */
.article-grid-layout{display:grid;grid-template-columns:1fr 300px;gap:56px}
@media (max-width:860px){.article-grid-layout{grid-template-columns:1fr}}
.article-aside{position:sticky;top:24px;align-self:start}
.stat-box{background:var(--accent-tint);border-radius:8px;padding:22px;margin-bottom:16px}
.stat-label{font:700 12px 'Pretendard',sans-serif;color:var(--text-soft);margin-bottom:8px}
.stat-value{font:900 30px 'Pretendard',sans-serif;letter-spacing:-.02em;color:var(--brand)}
.toc-box{border:1px solid var(--line);border-radius:8px;padding:20px}
.toc-label{font:700 12px 'Pretendard',sans-serif;color:var(--text-soft);margin-bottom:12px}
.toc-item{font:500 13px 'Pretendard',sans-serif;color:var(--text);padding:5px 0}
/* 컴포넌트 03: 디시전 트리 */
.decision-tree{border:1px solid var(--line);border-radius:8px;padding:26px 30px;margin:8px 0 36px}
.dt-label{font:700 11px 'Pretendard',sans-serif;color:var(--text-soft);letter-spacing:.08em;margin-bottom:18px}
.dt-q{font:700 15px 'Pretendard',sans-serif;color:var(--text);margin-bottom:10px}
.dt-branches{display:grid;grid-template-columns:44px 1fr;gap:8px 14px}
.dt-yn{font:800 12px 'Pretendard',sans-serif;color:var(--accent)}
.dt-yn.soft{color:var(--text-soft)}
.dt-a{font:400 14px/1.6 'Pretendard',sans-serif;color:var(--text)}
.dt-a.soft{color:var(--text-soft)}
/* 컴포넌트 05: 인용구 리스트(통념→사실) */
.myth-list{display:flex;flex-direction:column;border-top:1px solid var(--line);margin:8px 0 36px}
.myth-item{padding:18px 0;border-bottom:1px solid var(--line)}
.myth-claim{font:700 15px/1.6 'Pretendard',sans-serif;color:var(--text);margin-bottom:5px}
.myth-fact{font:400 14px/1.7 'Pretendard',sans-serif;color:var(--text-soft)}
/* 컴포넌트 08: 체크리스트(GFM task list) — marked는 별도 클래스를 안 붙이므로 :has()로 선택 */
article ul:has(> li > input[type="checkbox"]){list-style:none;padding:6px 26px;border:1px solid var(--line);border-radius:8px;margin:0 0 36px}
article ul:has(> li > input[type="checkbox"]) li{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line);font:400 15px/1.6 'Pretendard',sans-serif}
article ul:has(> li > input[type="checkbox"]) li:last-child{border-bottom:none}
article li input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:16px;height:16px;border:1.5px solid var(--brand);border-radius:3px;margin-top:3px;flex:none;cursor:default}
/* 컴포넌트 09: 3줄 요약 타이포박스 */
.summary3{background:var(--accent-tint);border-radius:8px;padding:28px 32px;margin:44px 0}
.s3-label{font:700 11px 'Pretendard',sans-serif;color:var(--text-soft);letter-spacing:.08em;margin-bottom:14px}
.s3-line{font:700 16px/1.6 'Pretendard',sans-serif;color:var(--text);margin-bottom:10px}
.s3-line:last-child{margin-bottom:0}
.faq-list{display:flex;flex-direction:column;gap:10px;margin:20px 0 40px}
.faq-item{border:1px solid var(--line);border-radius:8px;overflow:hidden}
.faq-item summary{padding:16px 18px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font:700 14px 'Pretendard',sans-serif;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-toggle::after{content:'+';color:var(--text-soft);font-size:18px}
.faq-item[open] .faq-toggle::after{content:'−'}
.faq-answer{padding:0 18px 18px;font:400 14px/1.75 'Pretendard',sans-serif;color:var(--text-soft)}
.site-footer{background:var(--brand);color:#fff;margin-top:60px}
.footer-inner{max-width:1280px;margin:0 auto;padding:48px 56px 28px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.footer-logo{font:900 17px 'Pretendard',sans-serif;margin-bottom:12px}
.footer-brand p{font:400 13px/1.7 'Pretendard',sans-serif;color:rgba(255,255,255,.6);max-width:260px;margin:0}
.footer-h{font:700 12px 'Pretendard',sans-serif;color:rgba(255,255,255,.45);letter-spacing:.04em;margin-bottom:14px}
.footer-col div{font:400 13px 'Pretendard',sans-serif;color:rgba(255,255,255,.75);margin-bottom:10px}
.footer-bottom{max-width:1280px;margin:0 auto;border-top:1px solid rgba(255,255,255,.15);padding:16px 56px;font:400 11px 'Pretendard',sans-serif;color:rgba(255,255,255,.4)}
