@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');
:root{
--ink:#111418;
--ink-2:#3d4650;
--muted:#6b7684;
--line:#e6e9ee;
--bg:#ffffff;
--soft:#f4f6f9;
--accent:#8ed600;
--badge:#eef1f6;
--box-sum:#eef2f7;
--box-key:#eef6e2;
--max:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;
background:var(--bg);
color:var(--ink);
font-family:Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
line-height:1.75;
word-break:keep-all;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
/* header */
.site-head{padding:34px 0 0}
.head-row{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.logo{font-size:34px;font-weight:800;letter-spacing:-.04em;line-height:1;position:relative}
.logo .dot{color:var(--accent)}
.head-sub{color:var(--ink-2);font-size:15px}
.head-right{margin-left:auto;color:var(--muted);font-size:14px}
.nav{display:flex;gap:30px;align-items:center;margin-top:26px;font-size:17px;font-weight:600}
.nav a{color:var(--ink)}
.nav a.on{color:var(--ink);border-bottom:2px solid var(--ink);padding-bottom:4px}
.nav .right{margin-left:auto;font-size:14px;font-weight:500;color:var(--muted)}
.tagline{display:flex;margin-top:46px;color:var(--muted);font-size:14px}
.tagline .r{margin-left:auto}
/* hero */
.hero{position:relative;margin-top:18px;border-radius:14px;overflow:hidden;min-height:420px;display:flex;align-items:flex-end;background:#222}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.25) 55%,rgba(0,0,0,.1) 100%)}
.hero .inner{position:relative;padding:38px;color:#fff;max-width:840px}
.badge{display:inline-block;background:rgba(255,255,255,.92);color:var(--ink);font-size:13px;font-weight:700;padding:7px 13px;border-radius:8px;margin-bottom:18px}
.hero h1{font-size:42px;line-height:1.28;margin:0 0 14px;font-weight:800;letter-spacing:-.03em}
.hero p{margin:0 0 20px;font-size:16px;color:#e8ebef}
.more{display:inline-block;font-weight:700;border-bottom:3px solid var(--accent);padding-bottom:3px}
/* list */
.sec-title{margin:64px 0 8px;font-size:22px;font-weight:800;letter-spacing:-.02em}
.sec-desc{color:var(--muted);font-size:14px;margin-bottom:22px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.card .thumb{aspect-ratio:3/2;background:var(--soft);overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card .body{padding:18px 18px 22px;display:flex;flex-direction:column;flex:1}
.card .cat{font-size:12px;font-weight:700;color:var(--ink-2);background:var(--badge);display:inline-block;padding:4px 9px;border-radius:6px;align-self:flex-start;margin-bottom:10px}
.card h3{font-size:18px;line-height:1.45;margin:0 0 8px;font-weight:700;letter-spacing:-.02em}
.card p{margin:0;color:var(--muted);font-size:14px;flex:1}
.card .date{margin-top:14px;font-size:12px;color:var(--muted)}
/* article */
.article{max-width:760px;margin:0 auto}
.art-head{margin:54px 0 28px}
.art-head .cat{font-size:13px;font-weight:700;color:var(--ink-2);background:var(--badge);display:inline-block;padding:5px 11px;border-radius:7px}
.art-head h1{font-size:36px;line-height:1.32;margin:16px 0 12px;font-weight:800;letter-spacing:-.03em}
.art-head .meta{color:var(--muted);font-size:14px}
.box-sum{background:var(--box-sum);border-radius:14px;padding:30px 34px;margin:34px 0}
.box-sum .label{font-size:13px;font-weight:700;color:#5f7a2e;margin-bottom:6px}
.box-sum h2{font-size:24px;font-weight:800;margin:0 0 18px;letter-spacing:-.02em}
.box-sum ul{margin:0;padding-left:20px}
.box-sum li{margin:10px 0;color:var(--ink-2)}
figure{margin:36px 0}
figure img{border-radius:12px;width:100%}
.article h2.sec{font-size:26px;font-weight:800;margin:46px 0 14px;letter-spacing:-.02em}
.article h2.sec .num{display:block;font-size:14px;color:var(--accent);font-weight:800;margin-bottom:6px}
.article p{margin:0 0 18px;color:var(--ink-2);font-size:17px}
table.cmp{width:100%;border-collapse:collapse;margin:26px 0;font-size:15px}
table.cmp th,table.cmp td{border:1px solid var(--line);padding:12px 14px;text-align:left}
table.cmp th{background:var(--soft);font-weight:700}
.box-num{background:var(--soft);border-radius:12px;padding:22px 26px;margin:26px 0}
.box-num .n{font-size:30px;font-weight:800;letter-spacing:-.02em}
.box-num .t{color:var(--muted);font-size:14px;margin-top:4px}
.quote{border-left:4px solid var(--accent);padding:6px 0 6px 18px;margin:28px 0;font-size:19px;font-weight:600;color:var(--ink)}
.box-key{background:var(--box-key);border-radius:14px;padding:30px 34px;margin:44px 0}
.box-key h2{font-size:24px;font-weight:800;margin:0 0 16px;letter-spacing:-.02em}
.box-key ul{margin:0;padding-left:20px}
.box-key li{margin:10px 0;color:var(--ink-2)}
.src{color:var(--muted);font-size:14px;margin-top:30px}
/* footer */
.site-foot{border-top:1px solid var(--line);margin-top:80px;padding:38px 0 70px;display:flex;gap:40px;flex-wrap:wrap}
.site-foot .l{max-width:280px}
.site-foot .flogo{font-size:26px;font-weight:800;letter-spacing:-.04em}
.site-foot .flogo .dot{color:var(--accent)}
.site-foot .fsub{color:var(--muted);font-size:14px;margin-top:6px}
.site-foot .r{max-width:520px;color:var(--muted);font-size:14px}
.site-foot .r p{margin:0 0 10px}
@media (max-width:860px){
.grid{grid-template-columns:1fr 1fr}
.hero h1{font-size:30px}
.hero .inner{padding:26px}
.art-head h1{font-size:28px}
}
@media (max-width:560px){
.wrap{padding:0 18px}
.grid{grid-template-columns:1fr}
.logo{font-size:28px}
.nav{gap:20px;font-size:16px;overflow-x:auto}
.box-sum,.box-key{padding:24px 20px}
}
/* --- 추가 --- */
a.logo{display:inline-block}
.foot-in{display:flex;gap:40px;flex-wrap:wrap;width:100%}
.empty{margin:70px 0;color:var(--muted)}
.art-head .lead{color:var(--ink-2);font-size:18px;margin:0 0 12px}
.tbl{overflow-x:auto;margin:26px 0}
table.cmp{margin:0;min-width:520px}
table.cmp caption{text-align:left;font-weight:700;padding-bottom:10px;color:var(--ink)}
.box-num .mlabel{font-size:14px;color:var(--muted);margin-bottom:6px}
.box-num .n .u{font-size:16px;font-weight:600;color:var(--muted);margin-left:6px}
.oneline{background:var(--soft);border-radius:12px;padding:22px 26px;margin:34px 0;font-size:18px;font-weight:600;line-height:1.6}
/* --- 와이드 피처 --- */
.feature{display:grid;grid-template-columns:1.15fr 1fr;gap:0;margin:34px 0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.feature .fimg{display:block;aspect-ratio:16/10;overflow:hidden}
.feature .fimg img{width:100%;height:100%;object-fit:cover}
.feature .ftext{padding:34px 36px;display:flex;flex-direction:column;justify-content:center}
.feature .ftext .cat{font-size:12px;font-weight:700;color:var(--ink-2);background:var(--badge);display:inline-block;padding:4px 9px;border-radius:6px;align-self:flex-start;margin-bottom:12px}
.feature .ftext h3{font-size:27px;line-height:1.35;margin:0 0 12px;font-weight:800;letter-spacing:-.03em}
.feature .ftext p{margin:0 0 18px;color:var(--muted);font-size:15px}
.more.dark{color:var(--ink)}
/* --- 페이지 넘기기 --- */
.pager{display:flex;gap:8px;justify-content:center;align-items:center;margin:56px 0 10px;flex-wrap:wrap}
.pager a,.pager span{min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:9px;font-size:15px;font-weight:600;padding:0 10px}
.pager a:hover{background:var(--soft)}
.pager span.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pager .pv{font-weight:500;color:var(--muted)}
@media (max-width:860px){
.feature{grid-template-columns:1fr}
.feature .ftext{padding:24px 22px}
.feature .ftext h3{font-size:22px}
}
/* =========================================================
분야별 색 · 구역 배경 · 글 하단 이동 (2026-09 개편)
========================================================= */
:root{
--c-economy:#1668c7; --c-economy-bg:#e8f1fc;
--c-society:#6d4bd6; --c-society-bg:#eee9fb;
--c-technology:#0f8a63; --c-technology-bg:#e4f4ee;
--c-environment:#0a7f96; --c-environment-bg:#e2f2f5;
--tone:#4b5563; --tone-bg:var(--badge);
}
.c-economy{--tone:var(--c-economy);--tone-bg:var(--c-economy-bg)}
.c-society{--tone:var(--c-society);--tone-bg:var(--c-society-bg)}
.c-technology{--tone:var(--c-technology);--tone-bg:var(--c-technology-bg)}
.c-environment{--tone:var(--c-environment);--tone-bg:var(--c-environment-bg)}
/* 분야 이름표에 색 입히기 */
.card .cat,.feature .ftext .cat,.art-head .cat{
background:var(--tone-bg);color:var(--tone);letter-spacing:.01em;
}
/* 카드: 위쪽에 분야 색 띠 + 살짝 뜨는 느낌 */
.card{position:relative;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--tone);z-index:2}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(17,20,24,.10);border-color:#d8dde5}
.card .thumb img{transition:transform .35s ease}
.card:hover .thumb img{transform:scale(1.04)}
.card h3 a{background-image:linear-gradient(var(--tone),var(--tone));background-size:0 2px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .25s ease}
.card:hover h3 a{background-size:100% 2px}
/* 목록 구역에 옅은 배경 — 허전함 없애기 */
.band{background:linear-gradient(180deg,#fbfcfd 0%,#f5f7fa 100%);border-top:1px solid var(--line);margin-top:64px;padding:8px 0 64px}
.band .sec-title{margin:46px 0 6px}
.sec-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:26px;padding-bottom:16px;border-bottom:2px solid var(--ink)}
.sec-head .sec-title{margin:0;font-size:24px}
.sec-head .sec-desc{margin:0;margin-left:auto}
.band .card,.band .feature{background:#fff}
/* 대문 기사 조금 더 크고 진하게 */
.hero{min-height:460px;box-shadow:0 18px 40px rgba(17,20,24,.16)}
.hero .shade{background:linear-gradient(to top,rgba(8,12,18,.82) 0%,rgba(8,12,18,.38) 50%,rgba(8,12,18,.10) 100%)}
.hero h1{font-size:46px}
.hero .badge{background:var(--tone);color:#fff}
.hero .more{border-bottom-color:var(--accent)}
/* 와이드 기사 */
.feature{box-shadow:0 8px 24px rgba(17,20,24,.05)}
.feature .ftext .more.dark{border-bottom-color:var(--tone)}
/* 본문 강조 요소에 분야 색 반영 */
.article h2.sec .num{color:var(--tone)}
.quote{border-left-color:var(--tone);background:linear-gradient(90deg,var(--tone-bg),transparent);border-radius:0 10px 10px 0;padding:14px 18px 14px 18px}
.box-sum{background:var(--tone-bg)}
.box-sum .label{color:var(--tone)}
.box-num{border-left:4px solid var(--tone)}
.box-num .n{color:var(--tone)}
/* 글 하단 이동 */
.artnav{max-width:760px;margin:52px auto 0;padding-top:30px;border-top:1px solid var(--line)}
.artnav .sides{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.artnav .side{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:#fff;transition:border-color .16s ease,background .16s ease}
.artnav a.side:hover{border-color:var(--ink);background:var(--soft)}
.artnav .side.r{text-align:right;align-items:flex-end}
.artnav .side.empty{border:1px dashed var(--line);background:transparent}
.artnav .lb{font-size:12px;font-weight:700;color:var(--muted)}
.artnav .tt{font-size:15px;font-weight:700;line-height:1.45;letter-spacing:-.02em}
.artnav .tolist{display:flex;gap:10px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.artnav .btn{display:inline-flex;align-items:center;height:44px;padding:0 22px;border-radius:10px;background:var(--ink);color:#fff;font-weight:700;font-size:15px}
.artnav .btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.artnav .btn.ghost:hover{border-color:var(--ink)}
/* 글 페이지의 '같은 분야 해설' */
main.wrap > .sec-title{max-width:1120px;margin:66px auto 22px;padding-bottom:14px;border-bottom:2px solid var(--ink)}
/* 위쪽 메뉴에 현재 분야 색 */
.nav a.on{border-bottom-color:var(--ink)}
/* 바닥글 */
.site-foot{background:#0f1319;color:#aeb6c0;border-top:none;padding:46px 0 64px;margin-top:0}
.site-foot .wrap,.site-foot .foot-in{color:inherit}
.site-foot .flogo{color:#fff}
.site-foot .fsub,.site-foot .r{color:#8d97a3}
@media (max-width:860px){
.hero{min-height:360px}
.hero h1{font-size:30px}
.sec-head{display:block}
.sec-head .sec-desc{margin-top:6px}
.artnav .sides{grid-template-columns:1fr}
.artnav .side.r{text-align:left;align-items:flex-start}
.artnav .side.empty{display:none}
}
/* =========================================================
카드 전체를 누를 수 있게 · 머리말 보강 (2026-09 2차)
========================================================= */
/* 카드 — 하나로 바뀌었다 */
a.card{display:flex;flex-direction:column;color:inherit}
a.card .thumb{display:block;aspect-ratio:3/2;background:var(--soft);overflow:hidden}
a.card .thumb img{width:100%;height:100%;object-fit:cover}
a.card .body{display:flex;flex-direction:column;flex:1;padding:18px 18px 22px}
a.card .cat{align-self:flex-start;display:inline-block;font-size:12px;font-weight:700;padding:4px 9px;border-radius:6px;margin-bottom:10px}
a.card .h3{display:block;font-size:18px;line-height:1.45;margin:0 0 8px;font-weight:700;letter-spacing:-.02em;
background-image:linear-gradient(var(--tone),var(--tone));background-size:0 2px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .25s ease}
a.card:hover .h3{background-size:100% 2px}
a.card .p{display:block;margin:0;color:var(--muted);font-size:14px;flex:1;line-height:1.7}
a.card .date{display:block;margin-top:14px;font-size:12px;color:var(--muted)}
/* 대문 — 하나로 */
a.hero{display:flex;align-items:flex-end;color:#fff}
a.hero .shade{display:block}
a.hero .inner{display:block;position:relative;padding:38px;max-width:840px}
a.hero .badge{display:inline-block}
a.hero .h1{display:block;font-size:46px;line-height:1.28;margin:0 0 14px;font-weight:800;letter-spacing:-.03em}
a.hero .p{display:block;margin:0 0 20px;font-size:16px;color:#e8ebef;line-height:1.7}
a.hero .more{display:inline-block;font-weight:700;border-bottom:3px solid var(--accent);padding-bottom:3px}
a.hero:hover img{transform:scale(1.03)}
a.hero img{transition:transform .5s ease}
/* 와이드 — 하나로 */
a.feature{display:grid;grid-template-columns:1.15fr 1fr;color:inherit}
a.feature .fimg{display:block;aspect-ratio:16/10;overflow:hidden}
a.feature .fimg img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
a.feature:hover .fimg img{transform:scale(1.03)}
a.feature .ftext{display:flex;flex-direction:column;justify-content:center;padding:34px 36px}
a.feature .cat{align-self:flex-start;display:inline-block;font-size:12px;font-weight:700;padding:4px 9px;border-radius:6px;margin-bottom:12px}
a.feature .h3{display:block;font-size:27px;line-height:1.35;margin:0 0 12px;font-weight:800;letter-spacing:-.03em}
a.feature .p{display:block;margin:0 0 18px;color:var(--muted);font-size:15px;line-height:1.7}
a.feature .more.dark{display:inline-block;align-self:flex-start;font-weight:700;color:var(--ink);border-bottom:3px solid var(--tone);padding-bottom:3px}
/* 머리말 — 휑함 덜기 */
.site-head{padding:26px 0 0;background:#fff}
.head-row{align-items:center}
.logo{font-size:36px}
.head-sub{padding-left:16px;margin-left:2px;border-left:1px solid var(--line);color:var(--ink-2)}
.head-right{display:flex;align-items:center;gap:14px;margin-left:auto;font-size:13px;color:var(--muted)}
.hd-date{white-space:nowrap}
.hd-count{background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:5px 13px;white-space:nowrap}
.hd-count b{color:var(--ink);font-weight:800}
.nav{margin-top:22px;padding-bottom:0}
.nav a{padding-bottom:12px;border-bottom:2px solid transparent}
.nav a.on{border-bottom:2px solid var(--ink);padding-bottom:12px}
.nav .right{font-size:13px}
.head-line{height:3px;background:linear-gradient(90deg,var(--c-economy) 0%,var(--c-society) 34%,var(--c-technology) 67%,var(--c-environment) 100%);opacity:.9}
.tagline{margin-top:30px}
@media (max-width:700px){
.head-sub{display:none}
.head-right{width:100%;margin:10px 0 0;order:3}
a.hero .h1{font-size:28px}
a.hero .inner{padding:24px}
a.feature{grid-template-columns:1fr}
a.feature .ftext{padding:24px 22px}
a.feature .h3{font-size:22px}
}
.tagline .lead-label{font-weight:800;color:var(--ink);font-size:15px;letter-spacing:-.02em}
.tagline .lead-label::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:8px;vertical-align:middle}
/* =========================================================
분야 6개로 확장 · 메뉴 정리 (2026-09 3차)
========================================================= */
:root{
--c-living:#c2410c; --c-living-bg:#fbeae2;
--c-policy:#9d2ba8; --c-policy-bg:#f7e7f9;
}
.c-living{--tone:var(--c-living);--tone-bg:var(--c-living-bg)}
.c-policy{--tone:var(--c-policy);--tone-bg:var(--c-policy-bg)}
/* 메뉴 — 분야 색을 띤 알약 모양 */
.nav{gap:6px;flex-wrap:wrap;margin-top:20px}
.nav a.nv{
padding:9px 16px;border-radius:999px;border:1px solid transparent;
font-size:16px;font-weight:700;color:var(--ink-2);line-height:1;
}
.nav a.nv:hover{background:var(--tone-bg);color:var(--tone)}
.nav a.nv.on{background:var(--tone,#111418);color:#fff;border-color:transparent;padding-bottom:9px}
.nav a.nv:first-child.on{background:var(--ink)}
.nav a.nv:first-child:hover{background:var(--soft);color:var(--ink)}
/* 머리말 여백 정리 */
.site-head{padding:24px 0 14px}
.tagline{margin-top:26px;display:block}
.head-line{margin-top:0}
/* =========================================================
머리말 위쪽 고정 (2026-09 4차)
스크롤해도 로고·메뉴가 화면 맨 위에 남는다.
========================================================= */
.site-head{
position:sticky; top:0; z-index:60;
background:#fff; padding:18px 0 0;
box-shadow:0 6px 20px rgba(17,20,24,.06);
}
.head-row{gap:14px}
.logo{font-size:30px}
.head-right{font-size:12.5px;gap:10px}
.hd-count{padding:4px 11px}
/* 메뉴와 색 띠 사이 숨통 */
.nav{margin-top:14px;padding-bottom:12px}
.nav a.nv{padding:8px 15px;font-size:15.5px}
/* 색 띠는 머리말의 아래 테두리 역할 */
.head-line{height:2px;opacity:.95}
/* 고정된 머리말에 본문이 가리지 않도록 */
.tagline{margin-top:22px}
.article .art-head{margin-top:34px}
/* 글 안에서 제목으로 바로 이동할 때 가려지지 않게 */
:target{scroll-margin-top:120px}
@media (max-width:700px){
.site-head{padding:12px 0 0}
.logo{font-size:25px}
.nav{margin-top:10px;padding-bottom:9px;gap:5px}
.nav a.nv{padding:7px 12px;font-size:14.5px}
.head-right{margin:6px 0 0;font-size:12px}
}
/* =========================================================
상징 마크 · 검색 · 바닥글 개편 (2026-09 5차)
========================================================= */
/* 로고에 상징 */
.logo{display:inline-flex;align-items:center;gap:11px}
.logo .mark{width:27px;height:27px;color:var(--ink);flex:none}
.flogo{display:inline-flex;align-items:center;gap:8px}
.flogo .mark{width:23px;height:23px;color:#fff}
/* 머리말 오른쪽 — 검색 */
.search{margin-left:auto;display:flex;align-items:center;gap:7px;
border:1px solid var(--line);border-radius:999px;padding:7px 14px;background:var(--soft);
transition:border-color .15s ease,background .15s ease}
.search:focus-within{border-color:var(--ink);background:#fff}
.search svg{width:15px;height:15px;color:var(--muted);flex:none}
.search input{border:0;background:transparent;outline:0;font:inherit;font-size:14px;width:130px;color:var(--ink)}
.search input::placeholder{color:var(--muted)}
/* 메뉴 줄 오른쪽 — 날짜와 편수 */
.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
.head-right{display:none}
/* 검색 페이지 */
.searchpage{padding:40px 0 20px}
.searchpage h1{font-size:30px;font-weight:800;letter-spacing:-.03em;margin:0 0 18px}
.searchpage #q{width:100%;max-width:560px;font:inherit;font-size:17px;padding:14px 18px;
border:1px solid var(--line);border-radius:12px;outline:0}
.searchpage #q:focus{border-color:var(--ink)}
.scount{color:var(--muted);font-size:14px;margin:16px 0 22px}
/* 안내 페이지 */
.article.plain .art-head .cat{background:var(--soft);color:var(--ink-2)}
.article.plain h2.sec{font-size:21px;margin:38px 0 12px}
.article.plain p{font-size:16.5px}
/* 바닥글 */
.site-foot{display:block;padding:52px 0 40px}
.foot-top{display:grid;grid-template-columns:1.4fr .7fr .9fr 1.6fr;gap:36px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.10)}
.fcol h4{font-size:13px;font-weight:700;color:#fff;margin:0 0 14px;letter-spacing:.02em}
.fcol ul{list-style:none;margin:0;padding:0}
.fcol li{margin:0 0 9px}
.fcol a{color:#9aa4b0;font-size:14px}
.fcol a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.fcol.brand .flogo{font-size:24px;font-weight:800;letter-spacing:-.04em;color:#fff}
.fcol.brand .fsub{margin:12px 0 4px;font-size:14px;color:#9aa4b0}
.fcol.brand .fsub2{margin:0;font-size:13px;color:#6f7885}
.fnote{margin:0;font-size:13.5px;line-height:1.8;color:#8d97a3}
.foot-bottom{display:flex;gap:18px;flex-wrap:wrap;padding-top:22px;font-size:13px;color:#6f7885}
.fmail{margin-left:auto}
@media (max-width:980px){
.foot-top{grid-template-columns:1fr 1fr}
.fcol.wide{grid-column:1 / -1}
}
@media (max-width:700px){
.search{width:100%;order:3;margin:10px 0 0}
.search input{width:100%}
.nav-right{width:100%;margin:8px 0 0;order:9}
.logo .mark{width:22px;height:22px}
.foot-top{grid-template-columns:1fr;gap:26px}
.foot-bottom{display:block}
.fmail{display:block;margin:8px 0 0}
}
/* 바닥글 3단으로 (분야 칸 제거) */
.foot-top{grid-template-columns:1.5fr 1fr 1.9fr;gap:44px;padding-bottom:28px}
.fcol ul{display:block}
.fcol li{margin:0 0 8px}
.site-foot{padding:44px 0 34px}
@media (max-width:980px){ .foot-top{grid-template-columns:1fr 1fr} }
@media (max-width:700px){ .foot-top{grid-template-columns:1fr;gap:24px} }
/* =========================================================
바닥글 슬림하게 — 고지문을 오른쪽 끝까지 (2026-09 6차)
========================================================= */
.site-foot{padding:36px 0 26px}
.foot-top{grid-template-columns:0.95fr 0.65fr 2.4fr;gap:40px;padding-bottom:22px;align-items:start}
.fcol.brand .flogo{font-size:22px}
.fcol.brand .fsub{margin:10px 0 3px;font-size:13.5px}
.fcol.brand .fsub2{font-size:12.5px}
.fcol h4{margin:0 0 11px}
.fcol li{margin:0 0 7px}
.fcol a{font-size:13.5px}
.fnote{font-size:13px;line-height:1.75;max-width:none}
.foot-bottom{padding-top:18px;font-size:12.5px}
@media (max-width:1100px){
.foot-top{grid-template-columns:1fr 1fr;gap:28px}
.fcol.wide{grid-column:1 / -1}
}
@media (max-width:700px){
.foot-top{grid-template-columns:1fr;gap:22px}
}
/* 안내 링크를 두 줄로 접어 바닥글 높이를 낮춘다 */
.fcol ul{display:grid;grid-template-columns:auto auto;gap:7px 20px;justify-content:start}
.fcol li{margin:0}
@media (max-width:700px){ .fcol ul{grid-template-columns:1fr} }
/* 안내 링크는 줄바꿈 없이 딱 두 줄 */
.foot-top{grid-template-columns:0.9fr 0.9fr 2.25fr}
.fcol a{white-space:nowrap}
/* =========================================================
NEW 배지 · 출처 링크 · 배너 자리 (2026-09 7차)
========================================================= */
/* 새 글 표시 */
.new{
display:inline-block;margin-left:7px;vertical-align:middle;
background:#e8342d;color:#fff;font-size:10.5px;font-weight:800;
letter-spacing:.06em;line-height:1;padding:4px 7px;border-radius:5px;
}
a.card .new{align-self:flex-start;margin:0 0 10px 7px}
a.card .body{flex-direction:column}
a.card .cat, a.feature .cat{display:inline-block}
a.card .body, a.feature .ftext{position:relative}
a.hero .badge + .new{margin-left:8px;font-size:12px;padding:6px 9px;vertical-align:baseline}
/* 카드 제목 줄 위에 이름표와 NEW 를 한 줄로 */
a.card .cat, a.card .new, a.feature .cat, a.feature .new{margin-bottom:10px}
/* 출처 링크 */
.srcs{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px;
margin-top:34px;padding-top:16px;border-top:1px solid var(--line)}
.srcs b{font-weight:700;color:var(--ink-2);font-size:13.5px;margin-right:3px}
.srcs a{color:var(--tone);font-size:13.5px;border-bottom:1px solid transparent}
.srcs a:hover{border-bottom-color:var(--tone)}
.srcs i{font-style:normal;color:var(--line)}
.srcs span{font-size:13.5px}
/* 배너 자리 */
.bnr{display:flex;flex-direction:column;gap:14px;margin:34px 0}
.bnr-listMid{max-width:var(--max);margin:26px auto 34px}
.bnr-item{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff}
.bnr-item img{width:100%;height:auto;display:block}
.bnr-belowArticle{max-width:760px;margin:40px auto 0}
.bnr-inArticle{margin:34px 0}
/* =========================================================
NEW 배지 다듬기 (2026-09 8차)
========================================================= */
.chips{display:flex;align-items:center;gap:7px;margin-bottom:11px}
a.card .chips, a.feature .chips{align-self:flex-start}
a.card .cat, a.feature .cat, a.card .new, a.feature .new{margin:0}
.new{
display:inline-flex;align-items:center;gap:5px;
background:transparent;border:1px solid #e6b9b6;color:#c0453e;
font-size:10px;font-weight:800;letter-spacing:.09em;line-height:1;
padding:4px 8px 4px 7px;border-radius:999px;white-space:nowrap;
}
.new::before{content:"";width:4px;height:4px;border-radius:50%;background:#d4544c}
/* 대문(어두운 사진 위)에서는 흰색으로 */
a.hero .new{
margin-left:8px;vertical-align:middle;
background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.45);color:#fff;
padding:5px 10px 5px 9px;font-size:10.5px;
}
a.hero .new::before{background:#ff8a80}
a.hero .badge{vertical-align:middle}
/* =========================================================
이름표와 NEW 를 같은 알약 모양·같은 크기로 (2026-09 9차)
========================================================= */
a.card .cat, a.feature .cat, .art-head .cat, .new{
display:inline-flex;align-items:center;justify-content:center;
height:26px;padding:0 12px;border-radius:999px;
font-size:11.5px;font-weight:800;line-height:1;letter-spacing:.01em;
border:1px solid transparent;box-sizing:border-box;margin:0;white-space:nowrap;
}
a.card .cat, a.feature .cat, .art-head .cat{
background:var(--tone-bg);color:var(--tone);
}
.new{
gap:5px;padding:0 11px 0 9px;
background:transparent;border-color:#e4b5b1;color:#bf443d;
}
.new::before{content:"";width:4px;height:4px;border-radius:50%;background:#d4544c;flex:none}
/* 글 본문 머리의 이름표는 조금 크게 */
.art-head .cat{height:29px;padding:0 14px;font-size:12.5px}
/* 대문(사진 위)은 흰 알약 */
a.hero .badge{
display:inline-flex;align-items:center;height:30px;padding:0 14px;
border-radius:999px;font-size:12.5px;font-weight:800;line-height:1;
margin-bottom:18px;border:1px solid transparent;box-sizing:border-box;
}
a.hero .new{height:30px;padding:0 13px 0 11px;font-size:11.5px;vertical-align:middle;margin-left:8px}
/* =========================================================
카드를 띄우고, 바닥글과 사이를 벌린다 (2026-09 10차)
========================================================= */
main.wrap{padding-bottom:86px} /* 기사·안내·검색 페이지 */
.band{padding-bottom:86px} /* 목록 페이지 */
/* 카드가 지면 위에 떠 있게 */
a.card{
border-radius:16px;
box-shadow:0 2px 6px rgba(17,20,24,.05), 0 10px 24px rgba(17,20,24,.07);
border-color:#eceff3;
}
a.card:hover{
transform:translateY(-5px);
box-shadow:0 4px 10px rgba(17,20,24,.06), 0 20px 42px rgba(17,20,24,.14);
border-color:#e3e7ec;
}
a.card::before{border-radius:16px 16px 0 0}
a.feature{
border-radius:16px;
box-shadow:0 2px 6px rgba(17,20,24,.05), 0 12px 28px rgba(17,20,24,.07);
border-color:#eceff3;
}
a.feature:hover{box-shadow:0 4px 10px rgba(17,20,24,.06), 0 22px 46px rgba(17,20,24,.12)}
/* 기사 하단 '같은 분야 해설' 은 조금 더 띄워서 시작 */
main.wrap > .sec-title{margin-top:72px}
main.wrap > .grid{margin-bottom:8px}
/* =========================================================
대문 줄맞춤 · 와이드 이름표 알약 (2026-09 11차)
========================================================= */
/* 와이드 기사 — 예전 규칙보다 우선하도록 선택자를 맞춘다 */
a.feature .ftext .cat{
display:inline-flex;align-items:center;justify-content:center;
height:26px;padding:0 12px;border-radius:999px;
font-size:11.5px;font-weight:800;line-height:1;
background:var(--tone-bg);color:var(--tone);
border:1px solid transparent;box-sizing:border-box;margin:0;white-space:nowrap;
}
a.feature .ftext .chips{display:flex;align-items:center;gap:7px;margin-bottom:14px;align-self:flex-start}
/* 대문 — 이름표와 NEW 를 한 줄로 묶어 높이를 맞춘다 */
a.hero .hchips{display:flex;align-items:center;gap:9px;margin-bottom:18px}
a.hero .badge{margin-bottom:0;margin-right:0}
a.hero .new{margin-left:0}
/* =========================================================
대문·와이드 넘기기 · 날짜줄 · 군더더기 정리 (2026-09 12차)
========================================================= */
/* 날짜와 NEW 를 한 줄로 */
.meta-row{display:flex;align-items:center;gap:8px;margin-top:14px}
a.card .meta-row{margin-top:auto;padding-top:14px}
a.feature .meta-row{margin:2px 0 16px}
a.hero .meta-row{margin:0 0 18px}
.meta-row .date{margin:0;font-size:12.5px;color:var(--muted)}
.meta-row .date.basic{color:var(--tone)}
.meta-row.light .date{color:rgba(255,255,255,.82)}
a.card .chips{margin-bottom:11px}
/* 넘기는 틀 */
.carousel{position:relative}
.carousel .viewport{overflow:hidden;border-radius:16px}
.carousel .track{display:flex;transition:transform .48s cubic-bezier(.4,.05,.2,1)}
.carousel .slide{flex:0 0 100%;min-width:0}
.carousel .slide > a{margin:0}
/* 좌우 화살표 */
.cnav{
position:absolute;top:50%;transform:translateY(-50%);z-index:3;
width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.4);
background:rgba(17,20,24,.45);color:#fff;font-size:22px;line-height:1;
cursor:pointer;display:flex;align-items:center;justify-content:center;
padding:0 0 3px;transition:background .15s ease,opacity .15s ease;opacity:0;
}
.carousel:hover .cnav{opacity:1}
.cnav:hover{background:rgba(17,20,24,.75)}
.cnav.prev{left:16px}
.cnav.next{right:16px}
/* 와이드 기사 쪽 화살표는 밝은 바탕이라 반대로 */
.c-feat .cnav{background:rgba(255,255,255,.9);color:var(--ink);border-color:var(--line);
box-shadow:0 4px 14px rgba(17,20,24,.14)}
.c-feat .cnav:hover{background:#fff}
/* 점 */
.carousel .dots{display:flex;justify-content:center;gap:8px;margin-top:16px}
.carousel .dot{
width:8px;height:8px;border-radius:50%;border:0;padding:0;cursor:pointer;
background:#cdd4dc;transition:width .2s ease,background .2s ease;
}
.carousel .dot.on{width:24px;border-radius:999px;background:var(--ink)}
.c-hero .dots{margin-top:14px}
.c-feat{margin:34px 0}
.c-feat .dots{margin-top:14px}
@media (max-width:700px){
.cnav{opacity:1;width:34px;height:34px;font-size:18px}
.cnav.prev{left:8px}
.cnav.next{right:8px}
}
/* =========================================================
점을 사진 안으로 · 5장으로 · 날짜줄 줄맞춤 (2026-09 13차)
========================================================= */
/* 날짜와 NEW 줄맞춤 — 옛 규칙보다 우선하도록 */
a.card .meta-row .date, a.feature .meta-row .date, a.hero .meta-row .date{
margin:0;display:inline-flex;align-items:center;line-height:1;
}
a.card .meta-row, a.feature .meta-row, a.hero .meta-row{align-items:center}
a.card .meta-row{margin-top:auto;padding-top:16px}
/* 점을 사진 안쪽 아래로 */
.carousel{position:relative}
.carousel .dots{
position:absolute;z-index:4;margin:0;
display:flex;gap:7px;align-items:center;
padding:8px 12px;border-radius:999px;
background:rgba(12,16,22,.42);backdrop-filter:blur(6px);
}
.carousel .dot{
width:7px;height:7px;border-radius:50%;border:0;padding:0;cursor:pointer;
background:rgba(255,255,255,.55);transition:width .2s ease,background .2s ease;
}
.carousel .dot.on{width:22px;border-radius:999px;background:#fff}
/* 대문 — 가운데 아래 */
.c-hero .dots{left:50%;transform:translateX(-50%);bottom:20px}
/* 와이드 — 사진 쪽 왼쪽 아래 */
.c-feat .dots{left:20px;bottom:20px}
/* 화살표도 사진 안쪽에 맞춰 */
.c-feat .cnav{background:rgba(12,16,22,.42);color:#fff;border-color:rgba(255,255,255,.35);
box-shadow:none;backdrop-filter:blur(6px)}
.c-feat .cnav:hover{background:rgba(12,16,22,.72)}
.c-feat .cnav.next{right:auto;left:calc(53.5% - 58px)} /* 사진 오른쪽 끝 안쪽 */
.c-feat{margin:34px 0}
@media (max-width:860px){
.c-feat .cnav.next{right:16px;left:auto}
.c-feat .dots{left:50%;transform:translateX(-50%)}
}
/* =========================================================
공유 줄 (2026-09 14차)
========================================================= */
.share{margin:0}
.share svg{width:17px;height:17px;flex:none}
.sbtn.only{width:38px;padding:0;justify-content:center}
.sbtns{display:flex;flex-wrap:wrap;gap:8px}
.sbtn{
display:inline-flex;align-items:center;gap:7px;
height:38px;padding:0 14px;border-radius:999px;
border:1px solid var(--line);background:#fff;color:var(--ink-2);
font-family:inherit;font-size:13.5px;font-weight:600;letter-spacing:-.01em;
cursor:pointer;transition:border-color .16s ease,color .16s ease,background .16s ease;
}
.sbtn:hover{border-color:var(--ink);color:var(--ink)}
.sbtn.ok{border-color:var(--accent);color:var(--ink);background:#f7fce9}
.sbtn.wide{background:var(--ink);border-color:var(--ink);color:#fff}
.sbtn.wide:hover{background:#000;color:#fff}
/* 머리 쪽 — 제목 아래에 조용히 */
.sh-top{margin-top:20px}
.sh-top .sbtn{height:34px;padding:0 12px;font-size:12.5px}
.sh-top .sbtn.only{width:34px;padding:0}
.sh-top .sbtn span{display:none}
.sh-top .sbtn.wide span,.sh-top .sbtn[data-act="copy"] span{display:inline}
/* 글 끝 — 상자로 */
.sh-foot{
margin:44px 0 0;padding:24px 26px;border-radius:14px;
background:var(--soft);border:1px solid var(--line);
}
.sh-foot .shead{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:16px}
.sh-foot .shead b{font-size:16px;font-weight:700;letter-spacing:-.02em}
.sh-foot .shead span{font-size:13.5px;color:var(--muted)}
@media (max-width:640px){
.sh-top .sbtn span{display:none}
.sh-top .sbtn.wide span{display:inline}
.sh-foot{padding:20px 18px}
.sh-foot .sbtn{flex:0 0 auto}
.sh-foot .sbtn.wide{flex:1 1 100%;height:44px;justify-content:center;font-size:14.5px}
}
/* 인쇄·PDF 저장 */
@media print{
.site-head,.site-foot,.artnav,.share,.bnr,.sec-title,.grid,.carousel{display:none !important}
body{font-size:11.5pt;line-height:1.6}
.wrap{max-width:none;padding:0}
.article figure{break-inside:avoid}
.article img{max-height:9cm;object-fit:cover}
a{text-decoration:none;color:#000}
.srcs a::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}
/* =========================================================
없는 주소 화면 (404)
========================================================= */
.nf{max-width:640px;margin:60px auto 0;text-align:center}
.nf-num{
font-size:96px;font-weight:800;letter-spacing:-.05em;line-height:1;
color:var(--line);margin-bottom:10px;
}
.nf h1{font-size:30px;letter-spacing:-.03em;margin:0 0 14px}
.nf-lead{color:var(--muted);font-size:16px;line-height:1.7;margin:0 0 30px}
.nf-search{display:flex;gap:8px;max-width:420px;margin:0 auto 26px}
.nf-search input{
flex:1;height:48px;padding:0 16px;border:1px solid var(--line);border-radius:10px;
font-family:inherit;font-size:15px;background:#fff;color:var(--ink);
}
.nf-search input:focus{outline:none;border-color:var(--ink)}
.nf-search button{
height:48px;padding:0 20px;border:0;border-radius:10px;background:var(--ink);color:#fff;
font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;
}
.nf-cats{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:28px}
.nf-cat{
display:inline-flex;align-items:center;height:36px;padding:0 15px;border-radius:999px;
border:1px solid var(--line);font-size:14px;font-weight:600;color:var(--ink-2);
transition:border-color .16s ease,color .16s ease;
}
.nf-cat:hover{border-color:var(--ink);color:var(--ink)}
.nf .btn.nf-home{
display:inline-flex;align-items:center;height:46px;padding:0 24px;border-radius:10px;
background:var(--ink);color:#fff;font-weight:700;font-size:15px;
}
.nf + .sec-title{margin-top:64px}
@media (max-width:640px){
.nf{margin-top:36px}
.nf-num{font-size:72px}
.nf h1{font-size:24px}
}
/* =========================================================
지표 띠 · 편집 노트 · 오늘 같이 읽기 · 용어 사전 (2026-09 15차)
========================================================= */
/* 지표 띠 — 머리말 선 바로 아래 */
.mkband{border-bottom:1px solid var(--line);background:var(--soft)}
.mkrow{
display:flex;align-items:center;gap:22px;flex-wrap:wrap;
padding:10px 0;font-size:13px;line-height:1;
}
.mk{display:inline-flex;align-items:baseline;gap:7px;white-space:nowrap;flex:none}
.mk b{font-weight:700;color:var(--muted);font-size:12.5px;white-space:nowrap}
.mk i{font-style:normal;font-weight:700;color:var(--ink);font-size:13.5px;letter-spacing:-.01em}
.mk u{text-decoration:none;font-size:12px;font-weight:600;white-space:nowrap}
.mk.up u{color:#d1453b}
.mk.down u{color:#1462d1}
.mk.flat u{color:var(--muted)}
.mkat{margin-left:auto;color:var(--muted);font-size:11.5px;letter-spacing:-.01em}
@media (max-width:760px){
.mkrow{gap:14px;overflow-x:auto;flex-wrap:nowrap;padding:9px 0;-webkit-overflow-scrolling:touch}
.mkrow::-webkit-scrollbar{display:none}
.mkat{display:none}
}
/* 편집 노트 */
.enote{
display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
margin:26px 0 4px;padding:16px 20px;
border-left:3px solid var(--accent);background:var(--soft);border-radius:0 12px 12px 0;
}
.enote .elab{
flex:none;font-size:11.5px;font-weight:800;letter-spacing:.04em;
color:var(--ink-2);text-transform:none;
}
.enote p{margin:0;flex:1 1 320px;font-size:15.5px;line-height:1.65;color:var(--ink)}
.enote .edate{flex:none;color:var(--muted);font-size:12.5px}
/* 오늘 같이 읽으면 좋은 해설 */
.picks{padding:8px 0 56px}
.picks .sec-head{margin-bottom:6px}
.picks .sec-desc{margin:8px 0 0;color:var(--muted);font-size:14.5px;line-height:1.6}
.picks .grid{margin-top:22px}
/* 용어 사전 */
.words{margin:34px 0 0}
.words dt{
font-size:18px;font-weight:700;letter-spacing:-.02em;
padding-top:22px;margin-top:22px;border-top:1px solid var(--line);
}
.words dt:first-of-type{border-top:0;margin-top:0;padding-top:0}
.words dd{margin:8px 0 0;color:var(--ink-2);font-size:16px;line-height:1.75}
.words .wlink{
display:inline-block;margin-left:6px;font-size:13.5px;font-weight:600;
color:var(--muted);border-bottom:1px solid transparent;
}
.words .wlink:hover{color:var(--ink);border-bottom-color:var(--line)}
/* 발행 시각 */
.hd-pub{color:var(--muted);font-size:13px;margin-right:14px}
@media (max-width:760px){ .hd-pub{display:none} }
/* 머리말 오른쪽 두 글자를 같은 크기·같은 색으로 맞춘다 */
.nav-right{gap:0}
.nav-right .hd-pub,
.nav-right .hd-date{
font-size:12.5px;font-weight:600;color:var(--muted);
letter-spacing:-.01em;line-height:1;white-space:nowrap;
}
.nav-right .hd-pub{
position:relative;margin:0 13px 0 0;padding-right:13px;
}
.nav-right .hd-pub::after{
content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);
width:1px;height:11px;background:var(--line);
}
/* 메뉴 끝의 용어 사전 — 분야가 아니라 도구라서 살짝 떼어놓는다 */
.nav a.nv-side{
position:relative;margin-left:16px;padding-left:16px;
color:var(--muted);font-weight:600;
}
.nav a.nv-side::before{
content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
width:1px;height:14px;background:var(--line);
}
.nav a.nv-side:hover{color:var(--ink)}
.nav a.nv-side.on{background:var(--ink);border-color:var(--ink);color:#fff}
.nav a.nv-side.on:hover{background:#000;color:#fff}
@media (max-width:760px){
.nav a.nv-side{margin-left:8px;padding-left:10px}
.nav a.nv-side::before{height:12px}
}
/* =========================================================
용어 사전 — 첫소리 나누기 + 찾기 (2026-09 16차)
========================================================= */
.wordspage .art-head{padding-bottom:0}
.wtop{
margin:28px 0 8px;padding:18px 20px;
background:var(--soft);border:1px solid var(--line);border-radius:14px;
}
.wtop #wq{
width:100%;height:46px;padding:0 16px;
border:1px solid var(--line);border-radius:10px;background:#fff;
font-family:inherit;font-size:15px;color:var(--ink);
}
.wtop #wq:focus{outline:none;border-color:var(--ink)}
.wnav{margin-top:14px}
.wrow{display:flex;flex-wrap:wrap;gap:5px}
/* 한글 14칸, 영어 13칸 — 두 격자의 폭이 같아 좌우 끝이 맞물린다 */
.wgrid{display:grid;gap:5px;margin-top:7px}
.wgrid.ko{grid-template-columns:repeat(14,1fr)}
.wgrid.en{grid-template-columns:repeat(13,1fr)}
.wb{
min-width:0;height:28px;padding:0;
border:1px solid var(--line);border-radius:7px;background:#fff;
font-family:inherit;font-size:13px;font-weight:700;color:var(--ink-2);
cursor:pointer;transition:background .14s ease,color .14s ease,border-color .14s ease;
}
.wb.all{min-width:auto;padding:0 14px}
.wb:hover:not(.off){border-color:var(--ink);color:var(--ink)}
.wb.on{background:var(--ink);border-color:var(--ink);color:#fff}
.wb.off{
color:#c7cdd5;border-color:#eef1f5;background:#fbfcfd;
cursor:default;pointer-events:none;
}
.wgroup{margin-top:38px}
.wglabel{
margin:0 0 4px;font-size:15px;font-weight:800;color:var(--accent);
letter-spacing:.02em;
}
.words{margin:0}
.wi{padding-top:20px;margin-top:20px;border-top:1px solid var(--line)}
.wgroup .wi:first-child{border-top:0;margin-top:8px;padding-top:0}
.words dt{font-size:18px;font-weight:700;letter-spacing:-.02em;margin:0;padding:0;border:0}
.words dd{margin:8px 0 0;color:var(--ink-2);font-size:16px;line-height:1.75}
@media (max-width:640px){
.wtop{padding:14px 14px}
.wb{height:26px;font-size:11.5px;border-radius:6px}
.wb.all{padding:0 12px;font-size:12.5px}
.wrow,.wgrid{gap:3px}
.words dt{font-size:17px}
.words dd{font-size:15.5px}
}
/* =========================================================
줄 끝에 낱말 하나만 남는 것 막기 (2026-09 17차)
편집자가 손으로 엔터 치던 일을 브라우저가 대신한다.
========================================================= */
p, dd, li, figcaption, .lead, .intro, .etext,
.art-head .lead, .enote p, .words dd, .sec-desc, .src{
text-wrap:pretty;
}
h1, h2, h3, h4,
.hero .h1, a.card .h3, a.feature .h2, .sec-title, .wglabel,
.box-sum h2, .box-key h2, .oneline, .quote, .nf h1{
text-wrap:balance;
}
/* =========================================================
지표 흐름
========================================================= */
a.mkband{display:block;color:inherit}
a.mkband:hover{background:#eef1f5}
a.mkband:hover .mkat{color:var(--ink-2)}
.marketpage .art-head{padding-bottom:0}
.mkgrid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:32px}
@media (max-width:760px){ .mkgrid{grid-template-columns:1fr;gap:22px} }
.mkchart{margin:0;padding:18px 18px 14px;border:1px solid var(--line);border-radius:14px;background:#fff}
.mkchart figcaption{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.mkchart figcaption b{font-size:14px;font-weight:700;color:var(--muted)}
.mkchart .now{font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.mkchart .chg{margin-left:auto;font-size:12.5px;font-weight:700}
.mkchart .chg i{font-style:normal;font-weight:600;color:var(--muted);margin-left:4px}
.mkchart .chg.up{color:#d1453b}
.mkchart .chg.down{color:#1462d1}
.mkchart .chg.flat{color:var(--muted)}
.mkchart .plot{position:relative}
.mkchart svg{display:block;width:100%;height:110px}
.mkchart .base{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.mkchart .area{fill:#eef2f7}
.mkchart .ln{fill:none;stroke:var(--ink-2);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.mkchart .dot{fill:var(--ink);stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke}
.mkchart .cross{stroke:#c3cad3;stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
/* SVG 안에서는 hidden 이 저절로 먹지 않아서 직접 감춘다 */
.mkchart svg [hidden]{display:none}
.mkchart .hov{fill:var(--accent);stroke:var(--ink);stroke-width:2;vector-effect:non-scaling-stroke}
.mkchart .tip{
position:absolute;top:-4px;pointer-events:none;white-space:nowrap;
background:var(--ink);color:#fff;font-size:12px;font-weight:700;
padding:5px 9px;border-radius:7px;
}
.mkchart .ends{display:flex;justify-content:space-between;margin-top:6px;color:var(--muted);font-size:11.5px}
.mktable-h{margin-top:48px}
.mktable{font-variant-numeric:tabular-nums}
.mktable th[scope="row"]{color:var(--muted);font-weight:600;white-space:nowrap}
/* =========================================================
편집 노트 기록장
========================================================= */
.notespage .art-head{padding-bottom:0}
.enote-item{
padding-top:26px;margin-top:26px;border-top:1px solid var(--line);
}
.notespage .art-head + .enote-item{border-top:0;margin-top:14px}
.enote-item .edate{font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:8px}
.enote-item .etext{margin:0;font-size:17.5px;line-height:1.75;color:var(--ink)}
.epicks{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.epicks li a{
display:inline-block;padding:7px 13px;border-radius:999px;
border:1px solid var(--line);background:var(--soft);
font-size:13.5px;font-weight:600;color:var(--ink-2);
}
.epicks li a:hover{border-color:var(--ink);color:var(--ink);background:#fff}
/* =========================================================
메뉴 두 줄 나누기 · 지표 띠를 전자 시세판으로 (2026-09 18차)
========================================================= */
/* 넓은 화면: 홈 → 분야 6개 → 용어 사전 순서로 보이게 한다 */
.nav{flex-wrap:wrap}
.nav .nv-home{order:1}
/* display:contents 를 쓰면 묶음의 순서는 무시되고 안쪽 것들이 0번이 된다.
그래서 안쪽 링크에 직접 순서를 준다. */
.nav .nv-cats{display:contents}
.nav .nv-cats > a{order:2}
.nav .nv-side{order:3}
.nav .nav-right{order:4}
@media (max-width:760px){
/* 좁은 화면: 첫 줄에 홈·용어 사전, 둘째 줄에 분야 6개 */
.nav .nv-side{order:2;margin-left:12px;padding-left:12px}
/* 여섯 분야가 한 줄에 다 들어가도록 좁힌다 */
.nav .nv-cats{
display:flex;flex-wrap:nowrap;gap:0 4px;
width:100%;margin-top:6px;order:3;
}
.nav .nv-cats > a.nv{
order:0;flex:none;padding:6px 9px;font-size:14.5px;white-space:nowrap;
}
.nav .nav-right{order:4}
}
/* ---- 지표 띠 ---- */
.mkband{
background:#0f1319;border-bottom:0;
border-top:1px solid rgba(255,255,255,.06);
}
a.mkband:hover{background:#151b23}
.mkset{display:contents}
.mkdup{display:none}
.mkrow{font-variant-numeric:tabular-nums}
.mk b{color:#7d8896}
.mk i{color:#fff}
.mk.up u{color:#ff7a70}
.mk.down u{color:#7db3ff}
.mk.flat u{color:#7d8896}
.mkat{color:#6b7684}
a.mkband:hover .mkat{color:#98a3b1}
@media (max-width:760px){
/* 시세판처럼 천천히 흘러간다. 손을 대면 멈춘다. */
.mkband .wrap{padding:0;overflow:hidden}
.mkrow{flex-wrap:nowrap;width:max-content;padding-left:24px;overflow:visible}
.mkdup{display:contents}
.mkband:active .mkrow{animation-play-state:paused}
}
@media (max-width:760px) and (prefers-reduced-motion: no-preference){
.mkrow{animation:mkroll 30s linear infinite}
}
@keyframes mkroll{
from{transform:translateX(0)}
to{transform:translateX(-50%)}
}
/* =========================================================
원문 표시 · 정정 기록 (2026-09 19차)
========================================================= */
.srcs .pri{
display:inline-block;margin-right:5px;padding:1px 6px;border-radius:5px;
background:var(--ink);color:#fff;font-style:normal;font-size:10.5px;font-weight:800;
letter-spacing:.02em;vertical-align:1px;
}
.srcs a.is-pri{color:var(--ink);font-weight:600}
.corr-box{
margin:26px 0 0;padding:16px 20px;border-radius:12px;
background:#fff7ed;border:1px solid #f4dcc0;
}
.corr-box b{display:block;font-size:12.5px;font-weight:800;color:#9a5b16;margin-bottom:6px}
.corr-box p{margin:0;font-size:15px;line-height:1.7;color:var(--ink-2)}
.corr-box p + p{margin-top:6px}
.corr-box .cdate,
.corrlist .cdate{color:var(--muted);font-size:13px;font-weight:700;margin-right:6px}
.corrpage .art-head{padding-bottom:0}
.corrlist{margin:30px 0 0}
.corr-item{padding-top:20px;margin-top:20px;border-top:1px solid var(--line)}
.corr-item:first-child{border-top:0;margin-top:8px;padding-top:0}
.corrlist dt{font-size:16.5px;font-weight:700;letter-spacing:-.02em;margin:0}
.corrlist dd{margin:8px 0 0;color:var(--ink-2);font-size:15.5px;line-height:1.75}
.corrlist .cwhy{display:block;margin-top:4px;color:var(--muted);font-size:14px}
.corr-ask{
margin-top:44px;padding:22px 24px;border-radius:14px;
background:var(--soft);border:1px solid var(--line);
}
.corr-ask b{display:block;font-size:16px;font-weight:700;margin-bottom:8px}
.corr-ask p{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.75}
.corr-ask a{border-bottom:1px solid var(--line);color:var(--ink)}
/* 글 끝 서명 */
.byline{
display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
margin-top:40px;padding-top:20px;border-top:1px solid var(--line);
}
.bl-name{font-size:15.5px;font-weight:700;letter-spacing:-.02em}
.bl-role{color:var(--muted);font-size:13.5px}
.bl-more{margin-left:auto;font-size:13.5px;font-weight:600;color:var(--ink-2);border-bottom:1px solid var(--line)}
.bl-more:hover{color:var(--ink);border-bottom-color:var(--ink)}
@media (max-width:640px){ .bl-more{margin-left:0} }