:root {
color-scheme: light dark;
--font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
"Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", Roboto, sans-serif;
--fg: #16181d; --fg-2: #3f4650; --muted: #6b7280;
--bg: #ffffff; --bg-2: #f6f7f9; --soft: #f1f2f4;
--line: #e5e7eb; --line-strong: #cfd3d9;
--accent: #1d5fb4; --accent-soft: #e8f0fb; --accent-fg: #ffffff;
--radius: 12px; --radius-sm: 8px; --radius-pill: 999px;
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 24px; --space-6: 32px; --space-7: 48px;
--measure: 740px;
}
@media (prefers-color-scheme: dark) {
:root {
--fg: #e9eaee; --fg-2: #c5c9d1; --muted: #9aa0a8;
--bg: #101216; --bg-2: #171a20; --soft: #1b1f26;
--line: #262a32; --line-strong: #363b46;
--accent: #80b3f2; --accent-soft: #1a2740; --accent-fg: #0d1117;
}
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0 auto; max-width: var(--measure); padding: 0 var(--space-4) var(--space-7);
font-family: var(--font-sans); font-size: 16px; line-height: 1.75;
color: var(--fg); background: var(--bg); word-break: keep-all; overflow-wrap: anywhere;
}
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
img { max-width: 100%; height: auto; }
h1 { font-size: 1.7rem; line-height: 1.3; margin: var(--space-3) 0 var(--space-2);
letter-spacing: -.02em; font-weight: 800; }
h2 { font-size: 1.18rem; margin: var(--space-6) 0 var(--space-2); letter-spacing: -.01em; font-weight: 700; }
h3 { font-size: 1.02rem; margin: var(--space-4) 0 var(--space-1); font-weight: 700; }
p { margin: 0 0 var(--space-4); }
article ul, article ol { margin: 0 0 var(--space-4); padding-left: 20px; }
article li { margin-bottom: 6px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 10; padding: 8px 12px;
background: var(--fg); color: var(--bg); border-radius: var(--radius-sm); }
.skip:focus { left: 8px; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition: none !important; animation: none !important; }
}
.masthead { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap;
padding: var(--space-5) 0 var(--space-3); }
.masthead .brand { color: inherit; text-decoration: none; font-weight: 800; font-size: 1.2rem;
letter-spacing: -.03em; }
.masthead .brand::before { content: ""; display: inline-block; width: 10px; height: 10px;
border-radius: 3px; background: var(--accent); margin-right: 8px; }
.masthead .tag { color: var(--muted); font-size: .84rem; }
.topnav { display: flex; gap: 6px; overflow-x: auto; padding-bottom: var(--space-3);
border-bottom: 1px solid var(--line); margin-bottom: var(--space-4);
scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.topnav::-webkit-scrollbar { display: none; }
.topnav a { flex: 0 0 auto; color: var(--fg-2); text-decoration: none; font-size: .88rem;
font-weight: 500; padding: 6px 13px; border-radius: var(--radius-pill);
border: 1px solid var(--line); background: var(--bg);
transition: background .15s, border-color .15s; }
.topnav a:hover { background: var(--soft); border-color: var(--line-strong); }
.topnav a.on { color: var(--accent-fg); background: var(--fg); border-color: var(--fg); font-weight: 600; }
.crumb { font-size: .78rem; color: var(--muted); margin: var(--space-3) 0; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.ad { margin: var(--space-5) 0; }
.ad:empty { display: none; }
.ad-placeholder { border: 2px dashed var(--line); color: var(--muted); text-align: center;
padding: 26px 0; font-size: .82rem; border-radius: var(--radius); }
.site-footer { margin-top: var(--space-7); padding-top: var(--space-4);
border-top: 1px solid var(--line); font-size: .8rem; color: var(--muted); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: var(--space-3); }
.site-footer nav a { color: var(--muted); text-decoration: none; }
.site-footer nav a:hover { text-decoration: underline; }
.site-footer p { margin: 0; line-height: 1.7; }
.intro { border-bottom: 1px solid var(--line); padding-bottom: var(--space-3);
margin-bottom: var(--space-2); font-size: .93rem; }
.intro .meta { color: var(--muted); font-size: .82rem; margin: 0; }
#q { width: 100%; margin: var(--space-4) 0 var(--space-1); padding: 11px 14px 11px 40px;
font: inherit; font-size: 1rem; color: inherit; border: 1px solid var(--line);
border-radius: var(--radius); background-color: var(--bg-2);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: 14px center; }
#q:focus { background-color: var(--bg); border-color: var(--accent); outline: none;
box-shadow: 0 0 0 3px var(--accent-soft); }
#list .empty { padding: var(--space-5) 0; color: var(--muted); }
.item { display: grid; grid-template-columns: 136px 1fr; gap: var(--space-4);
padding: var(--space-4) 0; border-bottom: 1px solid var(--line); align-items: start; }
.item.noimg { grid-template-columns: 1fr; }
.item img { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover;
border-radius: var(--radius-sm); background: var(--soft); }
.item .t { color: inherit; text-decoration: none; font-weight: 700; font-size: 1.06rem;
line-height: 1.4; display: block; letter-spacing: -.01em; }
.item .t:hover { color: var(--accent); }
.item p { margin: 6px 0 0; color: var(--muted); font-size: .88rem;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item .meta { display: flex; gap: var(--space-2); align-items: center; font-size: .76rem;
margin-top: var(--space-2); overflow: visible; }
.item .cat { color: var(--accent); background: var(--accent-soft); text-decoration: none;
padding: 2px 9px; border-radius: var(--radius-pill); font-weight: 600; }
.item time { color: var(--muted); }
@media (max-width: 480px) {
.item { grid-template-columns: 104px 1fr; gap: var(--space-3); }
.item .t { font-size: 1rem; }
}
.pager { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px;
margin: var(--space-6) 0 var(--space-4); font-size: .92rem; }
.pager .pg { display: inline-flex; align-items: center; justify-content: center;
min-width: 38px; height: 38px; padding: 0 10px; border-radius: var(--radius-sm);
border: 1px solid var(--line); color: var(--fg-2); text-decoration: none;
font-variant-numeric: tabular-nums; transition: background .15s, border-color .15s; }
.pager a.pg:hover { background: var(--soft); border-color: var(--line-strong); color: var(--fg); }
.pager .pg.cur { background: var(--fg); color: var(--accent-fg); border-color: var(--fg); font-weight: 700; }
.pager .pg.off { color: var(--line-strong); pointer-events: none; }
.pager .pg.gap { border: 0; min-width: 20px; padding: 0; color: var(--muted); }
.pager .pg.first, .pager .pg.prev, .pager .pg.next, .pager .pg.last { font-size: 1.15rem; }
.pager .info { width: 100%; text-align: center; color: var(--muted); font-size: .78rem; margin-top: 2px; }
@media (max-width: 480px) {
.pager { gap: 5px; }
.pager .pg { min-width: 36px; height: 36px; padding: 0 8px; }
.pager .pg.far, .pager .pg.edge, .pager .pg.gap { display: none; }
}
.byline { color: var(--muted); font-size: .82rem; margin: 0 0 var(--space-1);
display: flex; gap: var(--space-3); flex-wrap: wrap; }
.byline .author { font-weight: 600; color: var(--fg); }
.summary { color: var(--fg-2); font-size: 1.02rem; margin-bottom: var(--space-4);
border-left: 3px solid var(--accent); padding-left: 12px; }
.hero { margin: var(--space-4) 0; }
.hero img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.hero figcaption { font-size: .72rem; color: var(--muted); text-align: right; margin-top: 4px; }
.keypoints { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
padding: var(--space-4) 18px; margin: var(--space-5) 0; }
.keypoints h2 { margin: 0 0 var(--space-2); font-size: .82rem; letter-spacing: .06em; color: var(--muted); }
.keypoints ul { margin: 0; padding-left: 18px; }
.keypoints li { margin-bottom: 6px; }
article > h2::before { content: ""; display: block; width: 28px; height: 3px; margin-bottom: 10px;
background: var(--accent); border-radius: 2px; }
.faq { margin-top: var(--space-6); border-top: 1px solid var(--line); padding-top: var(--space-2); }
.faq .qa { margin-bottom: var(--space-3); padding: 12px 14px; background: var(--bg-2);
border-radius: var(--radius-sm); }
.faq h3 { font-size: .98rem; margin: 0 0 4px; }
.faq h3::before { content: "Q"; display: inline-block; font-size: .72rem; font-weight: 800;
color: var(--accent); background: var(--accent-soft); border-radius: 4px;
padding: 0 5px; margin-right: 8px; vertical-align: 2px; }
.faq p { margin: 0; color: var(--fg-2); }
.disclaimer, .ai-notice, .disclosure { font-size: .78rem; color: var(--muted); }
.ai-notice { border-left: 3px solid var(--line-strong); padding: 2px 0 2px 12px; margin: var(--space-5) 0 0; }
.disclosure { margin: 8px 0 0; }
.tags { margin: var(--space-5) 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tags:empty { display: none; }
.tags span { background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius-pill);
padding: 3px 10px; font-size: .76rem; color: var(--muted); }
.related { margin-top: var(--space-6); font-size: .92rem; padding: var(--space-4);
border: 1px solid var(--line); border-radius: var(--radius); }
.related ul { margin: var(--space-2) 0 0; padding-left: 18px; }
.related li { margin-bottom: 4px; }
.sources { font-size: .84rem; color: var(--muted); border-top: 1px solid var(--line);
margin-top: var(--space-5); padding-top: var(--space-3); }
.sources ul { margin: 8px 0 0; padding-left: 18px; }
.sources li { margin-bottom: 4px; }
.back { display: inline-block; margin-top: var(--space-4); color: var(--muted); font-size: .88rem;
text-decoration: none; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.back:hover { background: var(--soft); color: var(--fg); }
.page-title { font-size: 1.45rem; margin: var(--space-2) 0 var(--space-3); }
.page-title small { font-weight: 500; color: var(--muted); font-size: .8rem; margin-left: 8px; }
.lead { font-size: 1.02rem; color: var(--fg-2); }
.series-badge { font-size: .78rem; color: var(--muted); margin: 0 0 2px; }
.series-badge a { font-weight: 600; }
.cards { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
margin: var(--space-4) 0; }
.card { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); background: var(--bg); }
.card a.t { font-weight: 700; color: inherit; text-decoration: none; font-size: 1.02rem; }
.card a.t:hover { color: var(--accent); }
.card p { margin: 6px 0 0; color: var(--muted); font-size: .86rem; }
.toolbox { margin-top: var(--space-5); padding: var(--space-4); border: 1px solid var(--line);
border-radius: var(--radius); background: var(--bg-2); font-size: .92rem; }
.toolbox ul { margin: var(--space-2) 0 0; padding-left: 18px; }
.toolbox li { margin-bottom: 4px; }
.tool-form { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
padding: var(--space-4); margin: var(--space-4) 0; }
.tool-form .grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.tool-form label { display: flex; flex-direction: column; gap: 4px; font-size: .86rem; color: var(--fg-2); font-weight: 600; }
.tool-form .hint { font-weight: 400; color: var(--muted); font-size: .76rem; }
.tool-form input, .tool-form select { font: inherit; font-size: 1rem; padding: 9px 11px; min-width: 0; width: 100%;
border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
background: var(--bg); color: var(--fg); }
.tool-form input:focus, .tool-form select:focus { outline: none; border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft); }
.tool-form label.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; align-self: end; }
.tool-form label.check input { width: auto; }
.tool-form .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tool-result { border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius);
padding: var(--space-4); margin: var(--space-4) 0 var(--space-5); }
.tool-result .verdict { font-size: 1.05rem; margin: 0 0 var(--space-3); }
.tool-result dl { margin: 0; }
.tool-result .r { display: flex; justify-content: space-between; gap: var(--space-3); padding: 7px 0;
border-top: 1px solid var(--line); font-size: .92rem; }
.tool-result dt { color: var(--muted); }
.tool-result dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; }
.tool-result .r.em dd { color: var(--accent); }
.tool-result .r.cmp { background: var(--soft); margin-top: 6px; padding: 8px 10px; border-radius: var(--radius-sm); border-top: 0; }
.tool-result .bar { height: 10px; background: var(--soft); border-radius: 999px; overflow: hidden; margin-bottom: var(--space-3); }
.tool-result .bar span { display: block; height: 100%; background: var(--accent); }
.notes { font-size: .94rem; }
.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; margin: var(--space-3) 0 var(--space-4); }
.tbl th, .tbl td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.tbl th { background: var(--bg-2); font-weight: 600; }
.tbl small { color: var(--muted); font-weight: 400; }
.updates { padding-left: 18px; }
.updates li { margin-bottom: 8px; }
.updates .d { color: var(--muted); font-size: .8rem; margin-left: 6px; white-space: nowrap; }