:root{--ink:#171717;--ink2:#4B5563;--mute:#9CA3AF;--line:#EAECEF; --paper:#fff;--tint:#F7F8FA;--card:#F2F4F6;--blue:#2F6DF6;--soft:#EAF0FE; --dark:#191F28} @media(prefers-color-scheme:dark){:root:not([data-theme="light"]){ --ink:#F2F4F6;--ink2:#B0B8C1;--mute:#6B7684;--line:#242B34; --paper:#0D1117;--tint:#141A21;--card:#1A212A;--blue:#6E9BFF;--soft:#18202C; --dark:#E5E8EB}} *{box-sizing:border-box;min-width:0} html{scroll-behavior:smooth} html,body{overflow-x:hidden;max-width:100%} body{margin:0;background:var(--paper);color:var(--ink); font-family:Pretendard,-apple-system,"Segoe UI","Malgun Gothic",sans-serif; font-size:17px;line-height:1.85;letter-spacing:-.03em; word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} img{max-width:100%;height:auto;display:block} .wrap{max-width:768px;margin:0 auto;padding:0 24px} header{position:sticky;top:0;z-index:30;background:var(--paper); border-bottom:1px solid var(--line)} /* ★★ 머리띠를 «두 줄» 로 (2026-08-14 사장님 지정). 윗줄 = 로고 + 찾기 · 아랫줄 = 메뉴 왜 — 전에는 셋이 «한 줄» 에 끼어 있어서 PC 에서도 정신없었다. 갈래가 여덟 개인데 로고(약 120px)와 찾기(190px)가 자리를 먼저 먹어 메뉴에 450px 밖에 안 남았다. 그래서 뒤쪽 갈래가 잘리거나 옆으로 밀렸다. 메뉴를 아랫줄로 내리면 768px 판의 720px 를 통째로 쓴다. 여덟 개를 재 보면 632px 라 한 줄에 넉넉히 들어간다. ★ height:64px 를 뺐다. 두 줄이 되면 키가 늘어나야 한다 — 박아 두면 아랫줄이 머리띠 밖으로 삐져나온다. */ header .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px; row-gap:8px;padding-top:11px;padding-bottom:9px} .brand{font-weight:800;font-size:18px;letter-spacing:-.04em;display:flex; align-items:center;gap:8px;white-space:nowrap;flex:none;order:1} .brand::before{content:"";width:22px;height:22px;border-radius:50% 50% 50% 4px; background:var(--blue)} .brand em{font-style:normal;color:var(--blue)} .sbox{order:2} header nav{order:3;flex-basis:100%;margin-left:0;max-width:100%; display:flex;gap:2px;overflow-x:auto;scrollbar-width:none} header nav::-webkit-scrollbar{display:none} header nav a{color:var(--ink2);padding:8px 11px;border-radius:8px;font-weight:700; font-size:14.5px;white-space:nowrap} header nav a:hover,header nav a.on{color:var(--ink);background:var(--tint)} .top{padding:44px 0 8px} h1{font-size:clamp(26px,4.8vw,36px);line-height:1.3;letter-spacing:-.045em; font-weight:800;margin:0 0 14px;text-wrap:balance} .lead{color:var(--ink2);margin:0 0 10px;font-size:17px;line-height:1.75} .pill{display:inline-block;background:var(--dark);color:var(--paper); font-size:12.5px;font-weight:800;padding:6px 14px;border-radius:5px; letter-spacing:-.03em;margin-bottom:12px} .meta{color:var(--mute);font-size:13.5px;display:flex;gap:8px;flex-wrap:wrap} /* 목록 */ .rows{margin-top:14px} .row{display:grid;grid-template-columns:100px 1fr;gap:16px;align-items:start; padding:22px 0;border-top:1px solid var(--line)} .row:first-child{border-top:0} .row .th{width:100px;height:100px;overflow:hidden;background:var(--card); border-radius:8px} .row .th img{width:100%;height:100%;object-fit:cover} .row h2{font-size:17.5px;margin:0 0 5px;line-height:1.45;letter-spacing:-.04em; font-weight:800} .row:hover h2{color:var(--blue)} .row p{margin:0;color:var(--ink2);font-size:14.5px;line-height:1.65; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical; overflow:hidden} .row .who{margin-top:7px;font-size:12.5px;color:var(--mute)} .tags{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:7px} .tag{font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:5px; background:var(--soft);color:var(--blue);letter-spacing:-.02em} /* 첫쪽 아래 «갈래 더보기» 칸 (2027-01-12) */ .more{font-size:14px;font-weight:700;padding:9px 15px;border-radius:8px; background:var(--soft);color:var(--blue);letter-spacing:-.02em; text-decoration:none;border:1px solid transparent} .more:hover{border-color:var(--blue)} /* 글 */ article{padding:8px 0 20px} article h2{font-size:24px;font-weight:800;letter-spacing:-.042em; margin:54px 0 16px;line-height:1.35;scroll-margin-top:80px} article h3{font-size:19.5px;font-weight:800;margin:36px 0 10px} article p{margin:0 0 20px} article ul,article ol{padding-left:22px;margin:0 0 20px} article li{margin:9px 0;line-height:1.85} article li::marker{color:var(--blue)} article strong{font-weight:800;color:var(--ink)} article a{color:var(--blue);font-weight:700;text-decoration:underline; text-underline-offset:.24em} article hr{border:0;height:1px;background:var(--line);margin:48px 0} figure{margin:34px 0} figure img{width:100%;border-radius:14px} .tw{overflow-x:auto;margin:0 0 26px;border:1px solid var(--line); border-radius:14px} table{border-collapse:collapse;width:100%;font-size:16px} th,td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line); vertical-align:top} th{background:var(--card);font-weight:800;font-size:14.5px;border-bottom:0; white-space:nowrap} tr:last-child td{border-bottom:0} td:first-child{font-weight:700} pre{background:var(--card);padding:18px 20px;border-radius:14px; overflow-x:auto;font-size:14.5px;line-height:1.75;margin:0 0 24px; font-family:inherit;color:var(--ink2)} /* 목차 */ .toc{background:var(--tint);border:1px solid var(--line);border-radius:14px; padding:22px 24px;margin:28px 0 34px} .toc b{display:block;font-size:14px;font-weight:800;color:var(--ink2); margin-bottom:12px;letter-spacing:-.02em} .toc ol{margin:0;padding-left:20px} .toc li{margin:7px 0;font-size:15.5px;line-height:1.6} .toc a{color:var(--ink);text-decoration:none} .toc a:hover{color:var(--blue);text-decoration:underline; text-underline-offset:.25em} /* 광고 자리 */ .adbox{margin:44px 0;padding:16px;background:var(--tint);border-radius:14px; text-align:center;color:var(--mute);font-size:12px;letter-spacing:.06em} /* 함께 보면 좋은 글 */ .more{margin-top:56px;padding-top:8px} .more h2{margin-top:0} .more a{display:block;padding:16px 18px;border-radius:12px;background:var(--tint); border:1px solid var(--line);margin-bottom:8px} .more a:hover{border-color:var(--blue)} .more b{display:block;font-size:16px;font-weight:800;letter-spacing:-.035em; line-height:1.45} .more i{font-style:normal;display:block;margin-top:5px;font-size:13.5px; color:var(--ink2);line-height:1.6} @media(max-width:600px){ .wrap{padding:0 18px} body{font-size:16px} .top{padding:32px 0 6px} article h2{font-size:21px;margin:44px 0 14px} .row{grid-template-columns:84px 1fr;gap:13px;padding:18px 0} .row .th{width:84px;height:84px} .row h2{font-size:16px} table{font-size:15px} th,td{padding:12px 13px} } /* ── 검색 (2026-08-11 사장님 지정) ───────────────────────────── ★ 남의 스크립트를 안 쓴다. 글 목록(search.json)을 미리 뽑아 두고 우리 코드가 그 자리에서 찾는다. 서버가 필요 없고 공짜다. */ .sbox{position:relative;margin-left:auto;flex:none} .sbox input{width:190px;max-width:42vw;padding:8px 34px 8px 13px;font:inherit; font-size:14.5px;border:1px solid var(--line);border-radius:9px; background:var(--tint);color:var(--ink);outline:none} .sbox input:focus{border-color:var(--blue);background:var(--paper)} .sbox input::placeholder{color:var(--mute)} .sbox .ico{position:absolute;right:11px;top:50%;transform:translateY(-50%); width:14px;height:14px;border:2px solid var(--mute);border-radius:50%; pointer-events:none} .sbox .ico::after{content:"";position:absolute;right:-5px;bottom:-4px;width:7px; height:2px;background:var(--mute);transform:rotate(45deg)} .sres{position:absolute;top:44px;right:0;width:min(420px,86vw);z-index:60; background:var(--paper);border:1px solid var(--line);border-radius:14px; box-shadow:0 12px 32px rgba(0,0,0,.14);overflow:hidden;display:none} .sres.on{display:block} .sres a{display:block;padding:13px 16px;border-top:1px solid var(--line)} .sres a:first-child{border-top:0} .sres a:hover{background:var(--tint)} .sres b{display:block;font-size:15px;font-weight:800;letter-spacing:-.035em; line-height:1.45;color:var(--ink)} .sres i{font-style:normal;display:block;margin-top:4px;font-size:12.5px; color:var(--ink2);line-height:1.55; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden} .sres .none{padding:16px;color:var(--mute);font-size:13.5px;text-align:center} @media(max-width:600px){ .sbox input{width:130px} header .wrap{gap:6px} } /* ── 폰에서는 «메뉴가 또 한 번» 접힌다 ──────────────────────────── 두 줄로 나누는 것(윗줄 로고+찾기 · 아랫줄 메뉴)은 이제 «모든 화면» 규칙이라 위쪽 기본값에 있다. 여기서는 폰에서만 더 손볼 것을 적는다. PC 는 720px 라 여덟 개(632px)가 아랫줄에 한 줄로 들어간다. 폰은 폭이 360px 남짓이라 그 한 줄로도 안 된다. 그래서 여기서 또 접는다. ① flex-wrap:wrap — 넘치면 아랫줄로 내린다 ② overflow:visible — «옆으로 밀기» 를 끈다 (이게 있어야 ①이 산다) ③ 단추 여백을 없앤다 — 글자만 남기면 여덟 개가 두 줄에 들어간다 ③ 을 안 하면 여백 때문에 세 줄이 된다. 세 가지가 한 벌이다. ★ 전에는 «옆으로 미는»(overflow-x:auto) 방식이라 뒤쪽 갈래가 잘려서 안 보였다 — 폰에서는 밀 수 있는지조차 모른다. 오방당이 같은 문제를 이렇게 풀었다(obang_build.py 의 폰 규칙). */ @media(max-width:600px){ .sbox input{width:150px} .sres{top:40px} /* ★★ «넉 줄씩 두 칸» 으로 못 박는다 (2026-08-14 사장님 지정). 그냥 흘려 보냈더니 «앞줄 여섯 · 뒷줄 둘» 로 갈려서 보기 나빴다. 글자 길이가 제각각이라 흐르는 대로 두면 자리가 안 맞는다. 그래서 흐르게 두지 않고 «네 칸짜리 격자» 로 박는다 — 여덟 개면 반드시 넉 개씩 두 줄이 된다. 1줄 전체 · 주거·자립 · 고용·창업 · 생활안정 2줄 임신·출산 · 보건·의료 · 보육·교육 · 소개 한 칸이 1fr(똑같은 폭)이라 320px 화면에서도 칸마다 72px 이 나온다. 제일 긴 「주거·자립」이 63px 이라 들어간다. ★ 칸은 «minmax(0,1fr)» 로 준다. 그냥 1fr 로 하면 «칸이 글자보다 작아질 수 없다» 는 규칙이 숨어 있어, 글꼴이 늦게 오거나 조금만 넓어도 넉 번째 칸이 화면 밖으로 밀려난다. 실제로 그렇게 나왔다 — 생활안정·소개가 안 보였다. minmax(0,…) 를 주면 칸이 필요한 만큼 줄어들어 넷이 반드시 화면 안에 든다. */ header nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); justify-items:center;overflow:visible;gap:7px 2px;padding:3px 0 4px} header nav a{padding:2px 0;font-size:14px;border-radius:0;white-space:nowrap} header nav a:hover,header nav a.on{background:none;color:var(--blue)} } /* ★ 로고 글자가 «떨어져» 보이던 것 고침 (2026-08-11 사장님 지적). .brand 가 display:flex 라 「trendon」과 「news」가 각각 조각이 되고, gap:8px 가 그 사이까지 벌려 놨다. gap 을 0 으로 두고 앞의 동그라미에만 여백을 준다. */ .brand{gap:0} .brand::before{margin-right:8px} /* ★ 목차는