/* GN Blog 글 공용 스타일 — 모든 .html 글이 로 이걸 쓴다.
글 파일마다 CSS를 복사해 넣지 않는다. 여기만 고치면 모든 글에 반영된다.
원본: AI 활용 가이드 시리즈의 디자인. 작성 규격은 저장소 STYLE.md 참고. */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@500;600&display=swap');
:root { --bg:#FFFFFF; --text:#212529; --muted:#868E96; --accent:#12B886; --accent-bright:#20C997; --box:#F8F9FA; --pill-bg:#F1F3F5; --rule:#E9ECEF; --code-inline:#E9ECEF; --tborder:#DEE2E6; --danger:#FA5252; --warn:#F59F00; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#121212; --text:#ECECEC; --muted:#ACACAC; --accent:#20C997; --accent-bright:#20C997; --box:#1E1E1E; --pill-bg:#252525; --rule:#2A2A2A; --code-inline:#2A2A2A; --tborder:#333333; --danger:#FF8787; --warn:#FCC419; } }
:root[data-theme="dark"] { --bg:#121212; --text:#ECECEC; --muted:#ACACAC; --accent:#20C997; --accent-bright:#20C997; --box:#1E1E1E; --pill-bg:#252525; --rule:#2A2A2A; --code-inline:#2A2A2A; --tborder:#333333; --danger:#FF8787; --warn:#FCC419; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Malgun Gothic","Helvetica Neue",sans-serif; font-size:1.125rem; line-height:1.7; word-break:keep-all; -webkit-font-smoothing:antialiased; }
/* 스크롤해도 상단 바는 따라온다. 폭을 화면 끝까지 늘리되 좌우 padding으로
로고·오른쪽 문구 위치는 예전(가운데 1200px 기준) 그대로 유지한다. */
header.top { height:64px; display:flex; align-items:center; justify-content:space-between;
position:sticky; top:0; z-index:900; background:var(--bg);
border-bottom:1px solid var(--rule);
padding:0 max(24px, calc(50% - 600px + 24px)); }
header.top .right { margin-right:320px; } /* 오른쪽 위 고정 액션바 자리 */
@media (max-width:700px) { header.top .right { display:none; } }
header.top .logo { font-family:"Fira Code",monospace; font-weight:600; font-size:1.3125rem; color:var(--text); letter-spacing:-0.02em; }
header.top .right { font-size:0.875rem; color:var(--muted); }
.wrap { max-width:768px; margin:0 auto; padding:2rem 1rem 8rem; }
h1 { font-size:clamp(2rem,6vw,3rem); font-weight:800; line-height:1.25; letter-spacing:-0.02em; margin:1rem 0 1.5rem; text-wrap:balance; }
.tags { display:flex; flex-wrap:wrap; gap:0.6rem; margin-bottom:1rem; }
.tags .tag { display:inline-flex; align-items:center; height:2rem; padding:0 1rem; border-radius:1rem; background:var(--pill-bg); color:var(--accent); font-size:1rem; white-space:nowrap; }
.meta { font-size:1rem; color:var(--muted); margin-bottom:2rem; }
.meta b { color:var(--text); font-weight:600; }
.series { background:var(--box); padding:1.5rem 2rem; border-radius:4px; margin-bottom:3rem; }
.series .label { font-size:0.75rem; letter-spacing:0.08em; color:var(--muted); display:block; margin-bottom:0.25rem; }
.series .name { font-size:1.125rem; font-weight:700; }
.series .idx { float:right; color:var(--muted); font-size:0.9375rem; }
blockquote { margin:2rem 0; padding:1rem 1rem 1rem 1.5rem; border-left:4px solid var(--accent-bright); background:var(--box); border-radius:0 4px 4px 0; }
blockquote p { margin:0; }
blockquote p + p { margin-top:0.5rem; }
blockquote.danger { border-left-color:var(--danger); }
blockquote.danger .bq-label { color:var(--danger); }
blockquote.warn { border-left-color:var(--warn); }
blockquote.warn .bq-label { color:var(--warn); }
.bq-label { font-weight:700; color:var(--accent); }
.toc-inline { background:var(--box); border-radius:4px; padding:1.25rem 1.75rem; margin:0 0 3rem; font-size:1rem; }
.toc-inline .label { font-weight:700; display:block; margin-bottom:0.5rem; }
.toc-inline ol { margin:0; padding-left:1.25rem; }
.toc-inline li { margin:0.25rem 0; }
.toc-inline a { color:var(--text); text-decoration:none; }
.toc-inline a:hover { color:var(--accent); text-decoration:underline; }
section { scroll-margin-top:5.5rem; } /* 고정된 상단 바에 가리지 않게 */
h2 { font-size:1.75rem; font-weight:700; letter-spacing:-0.01em; margin:4rem 0 1.25rem; line-height:1.4; }
h3 { font-size:1.25rem; font-weight:700; margin:2.5rem 0 0.75rem; }
p { margin:0 0 1.25rem; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
ol, ul { margin:0 0 1.25rem; padding-left:1.5rem; }
li { margin:0.4rem 0; }
li::marker { color:var(--accent); font-weight:600; }
pre { background:var(--box); border-radius:4px; padding:1rem 1.25rem; overflow-x:auto; margin:0 0 1.25rem; }
pre code { font-family:"Fira Code",Consolas,monospace; font-size:0.875rem; line-height:1.7; color:var(--text); background:none; padding:0; }
code { font-family:"Fira Code",Consolas,monospace; font-size:0.85em; background:var(--code-inline); border-radius:3px; padding:0.1rem 0.4rem; }
.tablewrap { overflow-x:auto; margin:0 0 1.25rem; }
table { border-collapse:collapse; width:100%; min-width:540px; font-size:1rem; }
th, td { border:1px solid var(--tborder); padding:0.5rem 0.75rem; text-align:left; vertical-align:top; }
th { background:var(--box); font-weight:700; }
td b { color:var(--accent); }
.faq p.q { font-weight:700; margin-bottom:0.25rem; }
.faq p.q::before { content:"Q. "; color:var(--accent); }
.faq p.a { color:var(--text); margin-bottom:1.5rem; }
.faq p.a::before { content:"A. "; color:var(--muted); font-weight:700; }
hr { border:none; height:1px; background:var(--rule); margin:4rem 0 2rem; }
footer.refs { font-size:0.9375rem; color:var(--muted); }
footer.refs ul { list-style:none; padding:0; }
footer.refs li { margin:0.25rem 0; }
footer.refs .stamp { font-size:0.8125rem; margin-top:1.5rem; }
/* 첨부파일 링크 — 서버가 class="filechip" 을 붙여 준다 (app.py mark_file_links) */
.wrap a.filechip {
display:inline-flex; align-items:center; gap:0.45rem; max-width:100%;
border:1px solid var(--tborder); border-radius:6px; padding:0.5rem 0.9rem;
background:var(--box); color:var(--text); text-decoration:none; font-size:0.9375rem; font-weight:700;
word-break:break-all;
}
.wrap a.filechip::before { content:"📎"; font-size:0.9em; }
.wrap a.filechip:hover { border-color:var(--accent); color:var(--accent); text-decoration:none; }
/* 글 끝 '첨부파일' 절 — 칩만 있는 줄은 불릿을 뺀다 */
.wrap li:has(> a.filechip:only-child) { list-style:none; margin-left:-1.5rem; margin-bottom:0.5rem; }
/* 공용화하면서 추가 — 본문 이미지, 로고 링크 */
header.top .logo { text-decoration:none; }
.wrap img { max-width:100%; border-radius:4px; border:1px solid var(--rule); display:block; margin:2rem auto; }