/* 스미스 ○○ 연구소 공용 디자인 (고장·자동차·직업) — 원본 smithlab/_pipeline/labkit/site.css. 색은 site.json accent·accent2·tint 로 빌드가 :root 에 넣어요 */
:root{--ink:#16181d;--muted:#5d6472;--line:#e3e6ec;--bg:#fff;--panel:#fff;--soft:#f6f7f9;--r:14px;--warn:#b42318;--warnbg:#fef3f2;--tipbg:#effaf5;--tip:#05603a;
  --sh:0 1px 2px rgba(16,24,40,.05),0 6px 18px rgba(16,24,40,.06);font-family:'Pretendard Variable',Pretendard,system-ui,-apple-system,'Apple SD Gothic Neo','Noto Sans KR',sans-serif}
@media (prefers-color-scheme:dark){:root{--ink:#eceef2;--muted:#a3a9b5;--line:#2b2f37;--bg:#111317;--panel:#181b20;--soft:#1d2026;--warnbg:#3a1714;--warn:#ffb4ab;--tipbg:#0f2a1f;--tip:#8ee2b8;--tint:#1b1e24!important}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-size:16.5px;line-height:1.75;word-break:keep-all;overflow-wrap:anywhere}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.main{padding-top:18px;padding-bottom:48px;min-height:60vh}
/* 머리말 */
.nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:12px;height:58px}
.logo{display:flex;align-items:center;gap:9px;color:var(--ink);font-weight:800;letter-spacing:-.02em;min-width:0}
.logo:hover{text-decoration:none}.logo img{border-radius:9px;flex:none}
.logo b{font-size:17px;white-space:nowrap}.logo small{color:var(--muted);font-weight:600;font-size:12px;white-space:nowrap}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:4px;flex:none}
.nav-links>a{color:var(--ink);font-size:14px;font-weight:600;padding:7px 10px;border-radius:9px;white-space:nowrap}
.nav-links>a:hover{background:var(--soft);text-decoration:none}
.nav-links select{max-width:110px}
.cat-bar{border-top:1px solid var(--line)}
.cat-bar .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-top:6px;padding-bottom:6px}
.cat-bar .wrap::-webkit-scrollbar{display:none}
.cat-bar a{flex:none;color:var(--muted);font-size:14px;font-weight:600;padding:5px 11px;border-radius:99px;white-space:nowrap}
.cat-bar a span{margin-right:4px}
.cat-bar a:hover{background:var(--soft);color:var(--ink);text-decoration:none}
.cat-bar a.on{background:var(--accent);color:#fff}
@media (max-width:560px){.logo small{display:none}.logo b{font-size:15.5px}.nav-links>a{padding:6px 7px;font-size:13px}}
@media (max-width:400px){.nav-links>a[href="/tools/"]{display:none}}
/* 공통 */
h1,h2,h3{letter-spacing:-.025em;line-height:1.35}
h1{font-size:clamp(26px,4.2vw,36px);margin:.2em 0 .35em}
h2{font-size:clamp(20px,2.8vw,24px);margin:2.1em 0 .6em}
h2 small{color:var(--muted);font-size:.65em;font-weight:600;margin-left:4px}
.meta{color:var(--muted);font-size:14px;margin:0}
.crumbs{font-size:13.5px;color:var(--muted);margin:2px 0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumbs a{color:var(--muted)}.crumbs span{margin:0 2px;opacity:.6}.crumbs b{font-weight:600}
.badge{display:inline-block;font-size:12.5px;font-weight:700;color:var(--accent);background:color-mix(in srgb,var(--accent) 11%,transparent);padding:3px 10px;border-radius:99px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.card{display:flex;flex-direction:column;gap:7px;padding:16px 17px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);color:var(--ink);box-shadow:var(--sh);transition:transform .15s,border-color .15s}
.card:hover{text-decoration:none;transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.card .badge{align-self:flex-start}.card b{font-size:16.5px;line-height:1.45}.card small{color:var(--muted);font-size:14px;line-height:1.55}
.card.tool .ico{font-size:28px;line-height:1}
/* 홈 */
.hero{margin:10px 0 8px;padding:42px 28px;border-radius:24px;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));position:relative;overflow:hidden}
.hero:after{content:'';position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.12)}
.hero h1{color:#fff;font-size:clamp(28px,5vw,44px);margin:.15em 0 .3em;max-width:760px}
.hero p{max-width:680px;opacity:.95;margin:0 0 12px}
.hero .eyebrow{font-size:13px;font-weight:800;letter-spacing:.12em;opacity:.85}
.hero a{color:#fff}
.hero-search{display:flex;gap:8px;max-width:620px;margin:20px 0 10px;position:relative;z-index:1}
.hero-search input{flex:1;min-width:0;font:inherit;font-size:16px;padding:13px 16px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--ink)}
.hero-search button{font:inherit;font-weight:700;padding:0 20px;border:0;border-radius:12px;background:var(--ink);color:var(--bg);cursor:pointer}
.hero .hero-search input{border:0}
.chips{display:flex;flex-wrap:wrap;gap:6px;position:relative;z-index:1}
.chips a{font-size:13.5px;padding:4px 11px;border-radius:99px;background:rgba(255,255,255,.18);color:#fff}
.stat{font-size:14px;margin-top:16px!important;opacity:.9}
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.cat{display:flex;flex-direction:column;gap:2px;padding:16px;border-radius:var(--r);background:var(--tint);color:var(--ink);border:1px solid var(--line)}
.cat:hover{text-decoration:none;border-color:var(--accent)}
.cat span{font-size:26px}.cat b{font-size:15.5px}.cat small{color:var(--muted);font-size:13px}
.pers{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:4px 28px}
.per h2{font-size:19px;display:flex;align-items:baseline;gap:8px}.per h2 a{color:var(--ink)}.per .more{margin-left:auto;font-size:13px;color:var(--accent)!important;font-weight:600}
.list{list-style:none;margin:0;padding:0}.list li{border-bottom:1px solid var(--line)}
.list a{display:block;padding:9px 2px;color:var(--ink);font-size:15.5px}
/* 허브 */
.hub-h{padding:6px 0 4px}.hub-h .big{font-size:44px}.hub-h h1{margin-top:4px}.hub-h p{color:var(--muted);max-width:760px}
.empty{color:var(--muted)}
/* 글 */
.doc{max-width:760px}
.doc-h h1{margin-top:10px}
.lead{font-size:18px;line-height:1.8;margin:20px 0}
.summary{background:var(--tint);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--r);padding:14px 18px;margin:18px 0}
.summary ul{margin:6px 0 0;padding-left:20px}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin:18px 0}
.facts div{border:1px solid var(--line);border-radius:12px;padding:10px 13px;background:var(--panel)}
.facts dt{font-size:12.5px;color:var(--muted);font-weight:700}.facts dd{margin:2px 0 0;font-weight:600;font-size:15px;line-height:1.5}
.toc{border:1px solid var(--line);border-radius:var(--r);padding:12px 18px;margin:20px 0;background:var(--soft)}
.toc ol{margin:6px 0 0;padding-left:22px;font-size:15px}.toc a{color:var(--ink)}
.doc ul,.doc ol{padding-left:22px}.doc li{margin:4px 0}
.steps{counter-reset:s;list-style:none;padding:0!important}
.steps li{counter-increment:s;position:relative;padding:10px 12px 10px 48px;margin:8px 0;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.steps li:before{content:counter(s);position:absolute;left:12px;top:10px;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;font-size:14px;display:grid;place-items:center}
.tbl{overflow-x:auto;margin:14px 0;border:1px solid var(--line);border-radius:12px}
table{border-collapse:collapse;width:100%;font-size:15px;min-width:480px}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:var(--soft);font-size:13.5px;white-space:nowrap}tr:last-child td{border-bottom:0}
.box{border-radius:12px;padding:12px 16px;margin:14px 0}.box p{margin:4px 0 0}
.tip{background:var(--tipbg);color:var(--tip)}.warn{background:var(--warnbg);color:var(--warn)}
.tip a,.warn a{color:inherit;text-decoration:underline}
.faq details{border:1px solid var(--line);border-radius:12px;margin:8px 0;background:var(--panel)}
.faq summary{cursor:pointer;padding:13px 16px;font-weight:700;list-style:none}
.faq summary::-webkit-details-marker{display:none}.faq summary:before{content:'Q. ';color:var(--accent)}
.faq details p{margin:0;padding:0 16px 14px;color:var(--ink)}
.src ul{font-size:14.5px}.notice{font-size:13.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px;margin-top:34px}
.rel{max-width:1080px}
.plain h2{font-size:20px}.mail{font-size:18px;font-weight:700}
/* 도구 공통 (content/tools/*.html 이 쓰는 class) */
.tool-body .card{display:block;transform:none!important;margin:14px 0}
.tool-body .field{display:flex;flex-direction:column;gap:5px;margin:10px 0}
.tool-body label{font-weight:700;font-size:14.5px}
.tool-body input,.tool-body select,.tool-body textarea{font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);max-width:100%}
.tool-body .btn,.tool-body button{font:inherit;font-weight:700;padding:12px 20px;border:0;border-radius:12px;background:var(--accent);color:#fff;cursor:pointer}
.tool-body .btn:hover,.tool-body button:hover{filter:brightness(1.07)}
.tool-body .result{border:2px solid var(--accent);border-radius:var(--r);padding:16px 18px;margin:16px 0;background:var(--tint)}
/* 광고 */
.ad{margin:22px auto;text-align:center;max-width:100%;overflow:hidden}.ad span{display:block;font-size:11px;color:var(--muted);margin-bottom:3px}
.ad-pc_top{margin:10px auto 0}.ad-rail{position:fixed;right:12px;top:130px;display:none}
@media (min-width:1500px){.ad-rail{display:block}}@media (max-width:760px){.ad-pc_top{display:none}}
/* 바닥글 */
.foot{border-top:1px solid var(--line);background:var(--soft);padding:30px 0 40px;margin-top:30px;font-size:14px;color:var(--muted)}
.fam-h{font-weight:700;color:var(--ink);margin:0 0 10px}
.fam{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.fam a{display:flex;flex-direction:column;padding:10px 12px;border-radius:10px;background:var(--panel);border:1px solid var(--line);color:var(--ink)}
.fam a small{color:var(--muted);font-size:12.5px}.fam a:hover{text-decoration:none;border-color:var(--accent)}
.foot .links{display:flex;flex-wrap:wrap;gap:4px 14px;margin:20px 0 6px}.foot .links a{color:var(--muted)}
.copy{margin:0;font-size:13px}