:root{
--bg: #F7F5EF;
--surface: #FFFFFF;
--ink: #1E1D1A;
--ink-soft: #55524A;
--navy: #1F3C57;
--navy-deep: #16293B;
--brick: #A6491F;
--line: #DCD5C4;
--line-soft: #EAE5D8;
--focus: #1F3C57;
--font-body: 'Noto Sans KR', sans-serif;
--font-head: 'Noto Serif KR', serif;
}
*{box-sizing:border-box;}
body{
margin:0;
background:var(--bg);
color:var(--ink);
font-family:var(--font-body);
font-size:19px;
line-height:1.85;
-webkit-font-smoothing:antialiased;
}
a{color:var(--navy); text-underline-offset:3px;}
a:hover{color:var(--brick);}
:focus-visible{
outline:3px solid var(--focus);
outline-offset:2px;
border-radius:2px;
}
.skip-link{
position:absolute; left:-9999px; top:0;
background:var(--navy); color:#fff; padding:12px 18px;
z-index:200; border-radius:0 0 6px 0;
}
.skip-link:focus{left:0;}
header.masthead{
border-bottom:4px solid var(--navy-deep);
background:var(--surface);
}
.masthead-inner{
max-width:1120px;
margin:0 auto;
padding:22px 24px 16px;
}
.brand{display:flex; flex-direction:column; gap:2px;}
.brand a{color:inherit; text-decoration:none;}
.brand-mark{
font-family:var(--font-head);
font-weight:700;
font-size:2.1rem;
letter-spacing:0.02em;
color:var(--navy-deep);
}
.brand-url{
font-size:0.85rem;
letter-spacing:0.14em;
color:var(--ink-soft);
}
main{
max-width:820px;
margin:0 auto;
padding:28px 24px 56px;
}
.back{margin:0 0 18px;}
.back a{font-weight:700;}
.post-kicker{
margin:0 0 8px;
color:var(--ink-soft);
font-size:0.95rem;
}
main h1{
font-family:var(--font-head);
font-size:1.85rem;
line-height:1.45;
margin:0 0 22px;
color:var(--navy-deep);
font-weight:600;
}
.prose h2{
font-family:var(--font-head);
font-size:1.4rem;
line-height:1.45;
margin:1.6em 0 0.5em;
color:var(--navy-deep);
}
.prose h3{
font-family:var(--font-head);
font-size:1.2rem;
line-height:1.45;
margin:1.4em 0 0.45em;
color:var(--navy-deep);
}
.prose p{margin:0 0 0.9em;}
.prose ul, .prose ol{margin:0 0 1em; padding-left:1.3em;}
.prose li{margin:0 0 0.35em;}
.prose li > ul, .prose li > ol{margin-top:0.35em;}
.prose blockquote{
margin:0 0 1em;
padding:10px 16px;
border-left:4px solid var(--navy);
background:var(--surface);
}
.prose hr{border:0; border-top:1px solid var(--line); margin:1.4em 0;}
.prose code{
font-size:0.92em;
background:#F3F0E8;
padding:0.1em 0.35em;
border-radius:3px;
}
.prose pre{
overflow-x:auto;
background:#F3F0E8;
padding:14px 16px;
border-radius:6px;
line-height:1.55;
}
.prose pre code{background:none; padding:0;}
.table-wrap{overflow-x:auto; margin:0 0 1.2em; -webkit-overflow-scrolling:touch;}
.prose table{
width:100%;
border-collapse:collapse;
background:var(--surface);
font-size:1rem;
line-height:1.55;
}
.prose th, .prose td{
border:1px solid var(--line);
padding:10px 12px;
text-align:left;
vertical-align:top;
}
.prose th{background:#F3F0E8; color:var(--navy-deep);}
.source{
margin-top:28px;
padding-top:14px;
border-top:1px solid var(--line);
font-size:0.95rem;
}
footer{
border-top:4px solid var(--navy-deep);
margin-top:20px;
background:var(--surface);
}
.footer-inner{
max-width:1120px; margin:0 auto; padding:22px 24px 26px;
color:var(--ink-soft);
font-size:0.85rem;
line-height:1.6;
text-align:center;
}
.footer-inner p{margin:0 0 4px;}
.footer-links{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:6px 16px;
margin:10px 0 12px;
}
.footer-links a{font-weight:700;}
.footer-note{margin-top:2px;}
.footer-copy{margin-top:8px;}
@media (max-width:600px){
body{font-size:18px;}
main{padding:22px 16px 40px;}
main h1{font-size:1.55rem;}
.footer-inner{padding:18px 16px 22px; font-size:0.82rem;}
}