/* D-100 백엔드 정리 노트 · 디자인 시스템
   원칙: 본문 가독성이 먼저. 색은 잉크·회색·빨간 펜(외울 답) 하나. 컨셉 장치는 '빨간 펜 + 암기 시트' 하나만.
   토큰만 쓰고, 컴포넌트에 임의 값(색·크기)을 새로 넣지 않는다. 설계 문서: ../design.md "8. 정리 노트 사이트" */
:root{
 /* 색 */
 --bg:#FFFFFF;--surface:#F6F6F4;--text:#1D1F24;--text-2:#5F6470;--text-3:#8A8F99;--border:#E7E7E3;
 --red:#C8102E;--sheet:rgba(200,16,46,.9);--focus:#2457D6;
 /* 글자 */
 --font:"Pretendard Variable",Pretendard,system-ui,-apple-system,sans-serif;
 --fs-xs:13px;--fs-sm:14px;--fs-base:17px;--fs-lg:19px;--fs-h2:20px;--fs-h1:30px;--fs-display:34px;
 /* 간격(4의 배수) */
 --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
 /* 폭·모서리 */
 --measure:680px;--radius:10px;--hd:56px;
 color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{
 --bg:#141518;--surface:#1C1E22;--text:#E7E8EB;--text-2:#A3A7B0;--text-3:#7A7F89;--border:#2C2F35;
 --red:#FF7A85;--sheet:rgba(214,52,70,.92);--focus:#7AA2FF}}
@media (max-width:640px){:root{--fs-base:16.5px;--fs-h1:26px;--fs-display:28px}}

/* 기본 */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hd) + var(--s4))}
body{margin:0;background:var(--bg);color:var(--text);font:var(--fs-base)/1.8 var(--font);word-break:keep-all;overflow-wrap:break-word;font-feature-settings:"tnum"}
h1,h2,h3{line-height:1.35;letter-spacing:-.015em;margin:0}
p,ul,ol,dl{margin:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-999px}.skip:focus{left:var(--s3);top:var(--s3);z-index:99;background:var(--bg);padding:var(--s2) var(--s3)}
.empty{color:var(--text-2)}
.btn{display:inline-block;font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer;border:1px solid var(--text);background:var(--text);color:var(--bg);border-radius:8px;padding:var(--s2) var(--s4)}
.btn.ghost{background:transparent;color:var(--text)}
.link-btn{font:inherit;color:inherit;background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* 작은 부품 */
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c);margin-right:var(--s2);vertical-align:.12em;flex:none}
.sec{font-weight:600;color:var(--text-3);margin-right:var(--s2)}
.pv{font-size:var(--fs-xs);font-weight:600;color:var(--red);margin-left:var(--s2)}
.label{font-size:var(--fs-sm);font-weight:700;color:var(--text-2);margin-bottom:var(--s3)}
.meta{font-size:var(--fs-sm);color:var(--text-2)}

/* 빨간 펜과 암기 시트 */
.red{color:var(--red)}
.peek{border-radius:3px}
.sheet .peek{background:var(--sheet);cursor:pointer;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.sheet .peek .red,.sheet .peek .red *{color:transparent}
.sheet .peek.open{background:transparent}.sheet .peek.open .red,.sheet .peek.open .red *{color:var(--red)}

/* 머리글 */
.hd{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.hd-in{max-width:1200px;margin:0 auto;padding:0 var(--s5);height:var(--hd);display:flex;align-items:center;gap:var(--s6)}
.brand{font-weight:700;white-space:nowrap}.brand b{color:var(--red)}
.hd-nav{display:flex;gap:var(--s5);font-size:var(--fs-sm);color:var(--text-2)}
.hd-nav a:hover,.hd-nav a[aria-current]{color:var(--text)}.hd-nav a[aria-current]{font-weight:600}
.hd-tools{margin-left:auto;display:flex;gap:var(--s2)}
.icon-btn,.sheet-btn{height:34px;display:inline-flex;align-items:center;gap:var(--s2);padding:0 var(--s3);font:inherit;font-size:var(--fs-sm);color:var(--text);background:transparent;border:1px solid var(--border);border-radius:8px;cursor:pointer;white-space:nowrap}
.icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
/* 답 가리기 스위치: 머리글·본문·훈련에서 같은 모양, 같은 상태 */
.sw{position:relative;width:28px;height:16px;border-radius:999px;background:var(--border);flex:none;transition:background-color .15s}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--bg);transition:transform .15s}
.sheet-btn[aria-pressed="true"] .sw{background:var(--red)}.sheet-btn[aria-pressed="true"] .sw::after{transform:translateX(12px)}
.sheet-btn[aria-pressed="true"]{border-color:color-mix(in srgb,var(--red) 45%,var(--border))}
.sheet-btn.sm{height:30px;font-size:var(--fs-xs);padding:0 var(--s2);gap:6px}
@media (max-width:760px){.hd-in{padding:0 var(--s4);gap:var(--s4)}.hd-nav{display:none}.hd .sheet-btn{display:none}} /* 모바일은 답이 있는 자리의 토글만 */

/* 검색 */
.search{position:fixed;inset:0;z-index:50;background:rgba(10,12,16,.4);padding:12vh var(--s4) 0}
.search-box{max-width:600px;margin:0 auto;background:var(--bg);border:1px solid var(--border);border-radius:12px;overflow:hidden}
#q{width:100%;font:inherit;font-size:var(--fs-lg);padding:var(--s4);border:0;border-bottom:1px solid var(--border);background:transparent;color:var(--text);outline:none}
#res{list-style:none;padding:0;max-height:55vh;overflow:auto}
#res a,#res .off,#res .none{display:block;padding:var(--s3) var(--s4);border-bottom:1px solid var(--border)}
#res a:hover{background:var(--surface)}#res small{display:block;color:var(--text-2);font-size:var(--fs-sm);line-height:1.5}
#res .off,#res .none{color:var(--text-3)}

/* 목록 행: 섹션 번호 · 제목 · 보조 정보 */
.list,.cnav,.topics,.tools,.ch-list{list-style:none;padding:0}
.row{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s2);align-items:baseline;padding:var(--s3) 0;border-bottom:1px solid var(--border)}
a.row:hover .row-t{text-decoration:underline;text-underline-offset:3px}
.row-x{font-size:var(--fs-sm);color:var(--text-3);white-space:nowrap}
.row.off{color:var(--text-3)}

/* 홈 */
.home{max-width:1200px;margin:0 auto;padding:var(--s7) var(--s5) var(--s6);display:grid;gap:var(--s7)}
@media (min-width:960px){.home{grid-template-columns:minmax(0,1fr) 300px;gap:var(--s8)}}
@media (max-width:640px){.home{padding:var(--s6) var(--s4) var(--s5)}}
.home-main{display:grid;gap:var(--s7);align-content:start}
.intro h1{font-size:var(--fs-display);font-weight:800}
.intro p{color:var(--text-2);margin-top:var(--s2);max-width:36em}
.status{display:flex;gap:var(--s4);font-size:var(--fs-sm);margin-top:var(--s3)!important}
.status span+span::before{content:"";display:inline-block;width:1px;height:12px;background:var(--border);margin-right:var(--s4);vertical-align:-1px}
.status b{color:var(--text)}
.feature{display:grid;gap:var(--s2);padding:var(--s5);border:1px solid var(--border);border-radius:var(--radius)}
.feature:hover{border-color:var(--text-3)}
.feature-t{font-size:24px;font-weight:700;line-height:1.35}
.feature-q{color:var(--text-2)}
.feature-a{font-size:15px;color:var(--text-2);padding:var(--s3) var(--s4);background:var(--surface);border-radius:8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.more{font-size:var(--fs-sm);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.home-side{display:grid;gap:var(--s6);align-content:start}
.topics a{display:flex;align-items:baseline;padding:var(--s2) 0;border-bottom:1px solid var(--border);font-size:15px}
.topics a:hover .tp-t{text-decoration:underline;text-underline-offset:3px}
.tp-n{width:1.4em;color:var(--text-3);font-weight:600}.tp-t{flex:1}.tp-c{font-size:var(--fs-xs);color:var(--text-3)}
.tools{display:grid;gap:var(--s2)}
.tools a{display:grid;padding:var(--s3) var(--s4);border:1px solid var(--border);border-radius:var(--radius);line-height:1.5}
.tools a:hover{border-color:var(--text-3)}.tools span{font-size:var(--fs-sm);color:var(--text-2)}

/* 답 블록 제목줄 · 툴바 · 노트 끝 */
.blk-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s3)}
.blk-h h2{margin:0!important}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-bottom:var(--s5)}
.btn.sm{padding:4px var(--s3);font-size:var(--fs-xs);height:30px}
.btn:disabled{opacity:.35;cursor:default}
.btn[aria-pressed="true"]{background:var(--text);color:var(--bg)}
.note-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:var(--s6);padding:var(--s4) 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.sel select{font:inherit;font-size:var(--fs-sm);height:30px;padding:0 var(--s6) 0 var(--s3);border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* 주차 체크 · 일정 예고: 잠긴 콘텐츠 대신 '같이 공부하는 진도'와 '다음 일정'을 보여 준다 */
.week-h{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s3)}
.week-h h2{font-size:var(--fs-h2);font-weight:700}.week-h span{font-size:var(--fs-sm);color:var(--text-2)}
.wk-count{margin-left:auto;color:var(--text)!important;font-weight:600}
.chks{list-style:none;padding:0;border-top:1px solid var(--text)}
.chk{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:start;padding:var(--s4) 0;border-bottom:1px solid var(--border)}
.chk input,.done input{width:20px;height:20px;margin:4px 0 0;accent-color:var(--text);cursor:pointer}
.chk a{display:grid;gap:2px}.chk b{font-size:var(--fs-lg);line-height:1.45}.chk a:hover b{text-decoration:underline;text-underline-offset:3px}
.chk-q{color:var(--text-2);font-size:15px;line-height:1.6}
.chk:has(input:checked) b{color:var(--text-2)}
.soons{display:grid;gap:var(--s2)}
.soon{display:grid;gap:2px;padding:var(--s3) var(--s4);border:1px dashed var(--border);border-radius:var(--radius);color:var(--text-2);line-height:1.5}
.soon small{font-size:var(--fs-xs);color:var(--text-3)}
.more-p{margin-top:var(--s3)!important}
.done{display:inline-flex;gap:var(--s2);align-items:center;font-size:15px;font-weight:600;cursor:pointer}.done input{margin:0}
.page .soon{margin-bottom:var(--s6)}.page .week{margin-bottom:var(--s7)}.ch-list+.soon{margin-top:var(--s5)}
.pn .soon{text-align:right}

/* 일반 페이지(주제별·장·요약·훈련) */
.page{max-width:calc(var(--measure) + 2*var(--s5));margin:0 auto;padding:var(--s7) var(--s5) var(--s6)}
@media (max-width:640px){.page{padding:var(--s6) var(--s4) var(--s5)}}
.page h1{font-size:var(--fs-h1);font-weight:800}
.lead{color:var(--text-2);margin:var(--s2) 0 var(--s6)}
.crumb{font-size:var(--fs-sm);color:var(--text-2);margin-bottom:var(--s2)}
.toc-ch{margin-bottom:var(--s6)}.toc-ch h2{font-size:var(--fs-lg);margin-bottom:var(--s1)}
.ch-list a,.ch-list .off{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s2);padding:var(--s4) 0;border-bottom:1px solid var(--border);align-items:baseline}
.ch-list small{display:block;color:var(--text-2);font-size:15px;line-height:1.6}
.ch-list a:hover b{text-decoration:underline;text-underline-offset:3px}.ch-list .off{color:var(--text-3)}
.cheat{margin-bottom:var(--s7)}.cheat>h2{font-size:var(--fs-lg);padding-bottom:var(--s2);border-bottom:1px solid var(--text)}
.cheat-it{padding:var(--s4) 0;border-bottom:1px solid var(--border)}
.cheat-it h3{font-size:var(--fs-base);margin-bottom:var(--s2)}.cheat-it h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.cheat-it ol{padding-left:0;list-style:none;display:grid;gap:var(--s1)}
.cheat-it li b,.answer li b{display:block;font-size:var(--fs-sm);color:var(--text-2);font-weight:600}
.quiz-filter{margin-bottom:var(--s3)}
.qz-scope{font-size:var(--fs-sm);color:var(--text-2);background:var(--surface);border-radius:8px;padding:var(--s2) var(--s3);margin-bottom:var(--s3)!important}
.quiz{border:1px solid var(--border);border-radius:var(--radius);padding:var(--s5);display:grid;gap:var(--s4)}
.qz-top{display:flex;justify-content:space-between;font-size:var(--fs-sm);color:var(--text-2)}#qz-n{font-weight:600;color:var(--text)}
.qz-bar{height:3px;background:var(--border);border-radius:99px;margin-top:calc(-1*var(--s2));overflow:hidden}.qz-bar i{display:block;height:100%;background:var(--text);transition:width .2s}
.qz-src{font-size:var(--fs-sm);color:var(--text-3)}.qz-src a:hover{text-decoration:underline;text-underline-offset:3px}
.qz-q{font-size:22px;font-weight:700;line-height:1.5;min-height:3em}
.qz-a{min-height:7.2em}
.qz-a .peek{display:block;padding:var(--s3) var(--s4);border-radius:8px;background:var(--surface);line-height:1.8}
.sheet .qz-a .peek{background:var(--sheet)}.sheet .qz-a .peek.open{background:var(--surface)}
.sheet .qz-a .peek:not(.open)::before{content:"눌러서 답 보기";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:var(--fs-sm);font-weight:600;opacity:.9}
.qz-a .peek{position:relative}
.qz-a .peek b,.sheet .qz-a .peek.open b{color:var(--text-2);font-weight:600}.sheet .qz-a .peek:not(.open) b{color:transparent}
.qz-act{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:var(--s2)}.qz-act .btn{height:44px;font-size:15px}
.qz-act .btn[hidden]{display:block;visibility:hidden}
.qz-foot{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;font-size:var(--fs-sm)}
#qz-note{font-weight:600;text-decoration:underline;text-underline-offset:3px}.qz-keys{color:var(--text-3)}
@media (hover:none){.qz-keys{display:none}}
.quiz.is-empty .qz-a,.quiz.is-empty .qz-act,.quiz.is-empty .qz-foot,.quiz.is-empty .qz-src,.quiz.is-empty .qz-bar{display:none}

/* 노트 읽기: 좌 목록 · 본문 · 우 목차 */
.read{max-width:1200px;margin:0 auto;padding:var(--s7) var(--s5) var(--s6);display:grid;grid-template-columns:minmax(0,var(--measure));justify-content:center;gap:var(--s7)}
@media (min-width:960px){.read{grid-template-columns:220px minmax(0,var(--measure))}}
@media (min-width:1240px){.read{grid-template-columns:220px minmax(0,var(--measure)) 180px}}
@media (max-width:640px){.read{padding:var(--s4) var(--s4) var(--s5)}}
.read-nav,.read-toc{display:none;position:sticky;top:calc(var(--hd) + var(--s6));align-self:start;font-size:var(--fs-sm);line-height:1.5;max-height:calc(100vh - var(--hd) - var(--s7));overflow:auto}
@media (min-width:960px){.read-nav{display:block}}@media (min-width:1240px){.read-toc{display:block}}
.read-ch{display:block;font-weight:700;margin-bottom:var(--s2)}
.cnav .row{grid-template-columns:auto 1fr;padding:var(--s2) var(--s2);border:0;border-radius:6px;font-size:var(--fs-sm);line-height:1.5}
.read .cnav .row-x{display:none} /* 노트 화면의 목록은 제목만. 공개일은 주제별·장 페이지에서 */
.cnav a.row:hover{background:var(--surface)}.cnav a.row:hover .row-t{text-decoration:none}
.cnav [aria-current] .row{background:var(--surface);font-weight:700}
.nav-next{margin:var(--s2) var(--s2) 0!important;font-size:var(--fs-xs);color:var(--text-3)}
.read-all{display:block;margin-top:var(--s4);color:var(--text-2);font-size:var(--fs-sm)}
.read-toc p{font-weight:700;margin-bottom:var(--s2)}.read-toc ol{list-style:none;padding:0;display:grid;gap:var(--s2)}
.read-toc a{color:var(--text-3)}.read-toc a:hover{color:var(--text)}
.mnav{display:block;margin-bottom:var(--s5);border:1px solid var(--border);border-radius:var(--radius);font-size:var(--fs-sm)}
@media (min-width:960px){.mnav{display:none}}
.mnav summary{cursor:pointer;padding:var(--s3) var(--s4);display:flex;align-items:center;list-style:none;font-weight:600}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary span{margin-left:auto;color:var(--text-3);font-weight:400}.mnav summary span::after{content:"목록";margin-left:var(--s2);text-decoration:underline;text-underline-offset:3px;color:var(--text-2)}
.mnav[open] summary{border-bottom:1px solid var(--border)}.mnav .cnav{padding:var(--s2)}

.note-h{margin-bottom:var(--s6)}
.note-h h1{font-size:var(--fs-h1);font-weight:800;margin-top:var(--s1)}
.note-q{margin-top:var(--s3);padding-left:var(--s4);border-left:3px solid var(--text);font-size:var(--fs-lg);font-weight:600;line-height:1.6}
.note section{margin-top:var(--s7)}
.note section:first-of-type{margin-top:0}
.note h2{font-size:var(--fs-h2);font-weight:700;margin-bottom:var(--s3)}
.note ul,.note ol{padding-left:1.25em}.note li+li{margin-top:var(--s1)}
.note strong{font-weight:700}
.note code{font-size:.9em;background:var(--surface);padding:1px 6px;border-radius:4px}
.answer{background:var(--surface);border-radius:var(--radius);padding:var(--s5)}
.answer ol{list-style:none;padding:0;display:grid;gap:var(--s4)}
.tail dl{display:grid;gap:var(--s1)}.tail dt{font-weight:700}.tail dt:not(:first-child){margin-top:var(--s4)}.tail dd{margin:0}
.myth ul{list-style:none;padding:0;display:grid;gap:var(--s4)}.myth li{display:grid}
.myth s{color:var(--text-3);text-decoration-thickness:1.5px}
.tw{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius)}
table{border-collapse:collapse;width:100%;min-width:540px;font-size:15px;line-height:1.6}
th,td{padding:var(--s2) var(--s3);text-align:left;vertical-align:top;border-bottom:1px solid var(--border)}
th{font-size:var(--fs-sm);font-weight:600;color:var(--text-2);background:var(--surface);white-space:nowrap}
tr:last-child td{border-bottom:0}
.rel .list{padding:0}
.kw{margin-top:var(--s6);display:flex;flex-wrap:wrap;gap:var(--s2)}
.kw span{font-size:var(--fs-xs);color:var(--text-2);background:var(--surface);border-radius:999px;padding:2px var(--s3)}
.vids{margin-top:var(--s4);font-size:var(--fs-sm);color:var(--text-2);display:flex;gap:var(--s3)}.vids a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s7)}
.pn a{display:grid;gap:var(--s1);padding:var(--s4);border:1px solid var(--border);border-radius:var(--radius);line-height:1.5}
.pn a:hover{border-color:var(--text-3)}.pn small{color:var(--text-3)}.pn-next{text-align:right}

.ft{max-width:1200px;margin:0 auto;padding:var(--s6) var(--s5) var(--s7);border-top:1px solid var(--border);font-size:var(--fs-sm);color:var(--text-2)}
.ft p+p{margin-top:var(--s2)}.ft a{margin-right:var(--s4)}.ft a:hover{color:var(--text)}

@media print{
 .hd,.search,.ft,.read-nav,.read-toc,.mnav,.pn,.btn,.link-btn,.home-side{display:none!important}
 body{font-size:11pt;background:#fff;color:#000}.read,.page{display:block;padding:0;max-width:none}
 .sheet .peek{background:none}.sheet .peek .red,.sheet .peek .red *{color:#c00}.cheat-it,.answer{break-inside:avoid}}