/* ============ 폰트(Pretendard Variable, 콘텐츠 서브셋 셀프호스트) ============ */
@font-face{
  font-family:"Pretendard Variable";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("/fonts/pretendard-guide.woff2") format("woff2");
}

/* ============ 토큰 ============ */
:root{
  --bg:#F6F8F6; --surface:#FFFFFF; --surface-2:#EFF4F0;
  --ink:#172119; --ink-2:#56675C; --ink-3:#8A988F;
  --line:#E2E8E3; --line-strong:#CBD6CE;
  --pine:#0C6B45; --pine-strong:#095538; --pine-soft:#E9F4EE; --pine-line:#BFDECD;
  --hero:#0A3D2A; --hero-2:#0D4A33; --hero-ink:#F2F7F3; --hero-dim:#A8C7B5;
  --amber-ink:#9A5B00; --amber-bg:#FBF1DF; --amber-line:#EBD9B4;
  --warn-bg:#F4F5F4; --warn-line:#D9DEDA;
  --shadow-1:0 1px 3px rgba(16,32,22,.07);
  --shadow-2:0 10px 30px rgba(16,32,22,.10);
  --kbd-bg:#EFF2EF; --kbd-line:#D5DCD6;
  --radius:14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0E1411; --surface:#161D18; --surface-2:#1B241E;
    --ink:#E6ECE7; --ink-2:#9DAFA3; --ink-3:#6D7E72;
    --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.17);
    --pine:#5BC78E; --pine-strong:#7BDCA8; --pine-soft:rgba(91,199,142,.13); --pine-line:rgba(91,199,142,.35);
    --hero:#0B2C1F; --hero-2:#0E3A29; --hero-ink:#EAF4EC; --hero-dim:#8FB49E;
    --amber-ink:#E5B36A; --amber-bg:rgba(229,179,106,.13); --amber-line:rgba(229,179,106,.35);
    --warn-bg:rgba(255,255,255,.05); --warn-line:rgba(255,255,255,.14);
    --shadow-1:0 1px 3px rgba(0,0,0,.4);
    --shadow-2:0 12px 34px rgba(0,0,0,.5);
    --kbd-bg:rgba(255,255,255,.08); --kbd-line:rgba(255,255,255,.16);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1411; --surface:#161D18; --surface-2:#1B241E;
  --ink:#E6ECE7; --ink-2:#9DAFA3; --ink-3:#6D7E72;
  --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.17);
  --pine:#5BC78E; --pine-strong:#7BDCA8; --pine-soft:rgba(91,199,142,.13); --pine-line:rgba(91,199,142,.35);
  --hero:#0B2C1F; --hero-2:#0E3A29; --hero-ink:#EAF4EC; --hero-dim:#8FB49E;
  --amber-ink:#E5B36A; --amber-bg:rgba(229,179,106,.13); --amber-line:rgba(229,179,106,.35);
  --warn-bg:rgba(255,255,255,.05); --warn-line:rgba(255,255,255,.14);
  --shadow-1:0 1px 3px rgba(0,0,0,.4);
  --shadow-2:0 12px 34px rgba(0,0,0,.5);
  --kbd-bg:rgba(255,255,255,.08); --kbd-line:rgba(255,255,255,.16);
  color-scheme: dark;
}
:root[data-theme="light"]{
  --bg:#F6F8F6; --surface:#FFFFFF; --surface-2:#EFF4F0;
  --ink:#172119; --ink-2:#56675C; --ink-3:#8A988F;
  --line:#E2E8E3; --line-strong:#CBD6CE;
  --pine:#0C6B45; --pine-strong:#095538; --pine-soft:#E9F4EE; --pine-line:#BFDECD;
  --hero:#0A3D2A; --hero-2:#0D4A33; --hero-ink:#F2F7F3; --hero-dim:#A8C7B5;
  --amber-ink:#9A5B00; --amber-bg:#FBF1DF; --amber-line:#EBD9B4;
  --warn-bg:#F4F5F4; --warn-line:#D9DEDA;
  --shadow-1:0 1px 3px rgba(16,32,22,.07);
  --shadow-2:0 10px 30px rgba(16,32,22,.10);
  --kbd-bg:#EFF2EF; --kbd-line:#D5DCD6;
  color-scheme: light;
}

/* ============ 베이스 ============ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Noto Sans KR",system-ui,-apple-system,sans-serif;
  font-size:16.5px; line-height:1.75; word-break:keep-all;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{line-height:1.32; text-wrap:balance; margin:0}
p{margin:0 0 1em}
a{color:var(--pine); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
:focus-visible{outline:2px solid var(--pine); outline-offset:2px; border-radius:6px}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer; padding:0}
img{max-width:100%; display:block}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px}
@media (max-width:640px){ .wrap{padding:0 18px} }

/* ============ 헤더 ============ */
.topbar{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar-in{display:flex; align-items:center; gap:14px; height:60px}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:750; font-size:16px; letter-spacing:-.01em}
.brand:hover{text-decoration:none}
.logo-img{width:22px; height:22px; border-radius:6px; display:block}
.brand small{font-weight:600; color:var(--ink-2); font-size:13.5px; margin-left:2px; letter-spacing:.02em}
.topbar .sp{flex:1}
.searchbtn{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-3);
  height:36px; padding:0 12px; border-radius:10px; font-size:14px; min-width:180px;
  box-shadow:var(--shadow-1);
}
.searchbtn:hover{border-color:var(--line-strong)}
.searchbtn .k{margin-left:auto}
.applink{
  display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px;
  border-radius:10px; background:var(--pine); color:#fff; font-size:14px; font-weight:650;
}
.applink:hover{background:var(--pine-strong); text-decoration:none}
.themebtn{
  width:36px; height:36px; flex:none;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-2);
  border-radius:10px; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-1);
}
.themebtn:hover{border-color:var(--line-strong); color:var(--ink)}
.themebtn .tt-sun{display:none}
.themebtn .tt-moon{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tt-sun{display:block}
  :root:not([data-theme="light"]) .tt-moon{display:none}
}
:root[data-theme="dark"] .tt-sun{display:block}
:root[data-theme="dark"] .tt-moon{display:none}
:root[data-theme="light"] .tt-sun{display:none}
:root[data-theme="light"] .tt-moon{display:block}
:root[data-theme="dark"] .applink, :root:not([data-theme="light"]) .applink{color:var(--bg)}
:root[data-theme="light"] .applink{color:#fff}
@media (max-width:720px){ .searchbtn{min-width:0} .searchbtn .hint{display:none} .applink span{display:none} }

/* ============ 히어로 ============ */
.hero{padding:34px 0 8px}
.hero-panel{
  position:relative; overflow:hidden;
  background:linear-gradient(140deg, var(--hero) 0%, var(--hero-2) 100%);
  border-radius:24px; padding:clamp(36px,6vw,64px) clamp(24px,5vw,64px);
  color:var(--hero-ink);
}
.hero-doors{position:absolute; right:-40px; top:-70px; opacity:.5; pointer-events:none}
.hero-doors i{position:absolute; border-radius:18px; border:1.5px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04)}
.hero-doors i:nth-child(1){width:150px; height:260px; right:150px; top:60px; transform:rotate(-14deg)}
.hero-doors i:nth-child(2){width:150px; height:290px; right:90px; top:40px; transform:rotate(-7deg); background:rgba(255,255,255,.06)}
.hero-doors i:nth-child(3){width:150px; height:320px; right:20px; top:20px; background:rgba(255,255,255,.09)}
.hero-eyebrow{font-size:13px; font-weight:700; letter-spacing:.14em; color:var(--hero-dim); margin-bottom:14px}
.hero h1{font-size:clamp(28px,4.6vw,44px); font-weight:780; letter-spacing:-.02em; color:var(--hero-ink)}
.hero .sub{margin:14px 0 26px; font-size:clamp(15px,1.8vw,17.5px); color:var(--hero-dim); max-width:560px}
.hero-search{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:10px; width:min(620px,100%);
  background:var(--surface); border:1px solid transparent; border-radius:16px; height:58px; padding:0 18px;
  color:var(--ink-3); font-size:16px; text-align:left;
  box-shadow:0 14px 40px rgba(0,0,0,.22);
}
.hero-search:hover{border-color:var(--pine-line)}
.hero-search .k{margin-left:auto}
.hero-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; position:relative; z-index:1}
.hero-chips span{font-size:13px; color:var(--hero-dim); align-self:center; margin-right:2px}
.chip{
  display:inline-flex; align-items:center; height:32px; padding:0 13px; border-radius:999px;
  border:1px solid rgba(255,255,255,.22); color:var(--hero-ink); font-size:13.5px; font-weight:550;
}
.chip:hover{background:rgba(255,255,255,.1); text-decoration:none}

/* ============ 공통 섹션 ============ */
section.home-sec{padding:34px 0 6px}
.sec-head{display:flex; align-items:baseline; gap:12px; margin-bottom:18px}
.sec-head h2{font-size:22px; font-weight:750; letter-spacing:-.01em}
.sec-head .desc{color:var(--ink-2); font-size:14.5px}
.k{
  display:inline-flex; align-items:center; height:20px; padding:0 6px; border-radius:5px;
  background:var(--kbd-bg); border:1px solid var(--kbd-line); border-bottom-width:2px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; color:var(--ink-2);
}

/* 시작 여정 */
.journey{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; counter-reset:step}
@media (max-width:900px){ .journey{grid-template-columns:repeat(2,1fr)} }
@media (max-width:540px){ .journey{grid-template-columns:1fr} }
.jcard{
  position:relative; display:block; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px 20px 18px; box-shadow:var(--shadow-1);
  transition:border-color .18s ease-out, transform .18s ease-out, box-shadow .18s ease-out;
  counter-increment:step; color:var(--ink);
}
.jcard:hover{border-color:var(--pine-line); transform:translateY(-2px); box-shadow:var(--shadow-2); text-decoration:none}
.jcard::before{
  content:counter(step,decimal-leading-zero);
  display:block; font-family:ui-monospace,Menlo,monospace; font-size:12.5px; font-weight:700;
  color:var(--pine); margin-bottom:12px; letter-spacing:.06em;
}
.jcard b{display:block; font-size:16px; font-weight:700; margin-bottom:5px}
.jcard p{margin:0; font-size:13.8px; color:var(--ink-2); line-height:1.6}
.jcard .go{position:absolute; right:16px; top:16px; color:var(--ink-3); font-size:15px; transition:transform .18s ease-out}
.jcard:hover .go{color:var(--pine); transform:translateX(2px)}

/* 카테고리 그리드 */
.cats{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:940px){ .cats{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .cats{grid-template-columns:1fr} }
.cat{
  display:flex; flex-direction:column; gap:11px; background:var(--surface); border:1px solid var(--line);
  border-radius:16px; padding:22px 22px 20px; box-shadow:var(--shadow-1); color:var(--ink);
  transition:border-color .18s ease-out, transform .18s ease-out, box-shadow .18s ease-out;
}
.cat:hover{border-color:var(--pine-line); transform:translateY(-2px); box-shadow:var(--shadow-2); text-decoration:none}
.cat-top{display:flex; align-items:center; gap:10px}
.cat-ico{
  width:38px; height:38px; border-radius:11px; background:var(--pine-soft); color:var(--pine);
  display:inline-flex; align-items:center; justify-content:center; flex:none;
}
.cat-ico svg{width:19px; height:19px}
.cat b{font-size:16.5px; font-weight:720; letter-spacing:-.01em}
.cat p{margin:0; font-size:14px; color:var(--ink-2); line-height:1.62}
.cat .foot{margin-top:auto; padding-top:4px; font-size:13px; color:var(--ink-3); display:flex; align-items:center; gap:8px}
.badge-pro{
  display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:999px;
  font-size:11.5px; font-weight:750; letter-spacing:.04em;
  color:var(--amber-ink); background:var(--amber-bg); border:1px solid var(--amber-line);
}
.badge-free{
  display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:999px;
  font-size:11.5px; font-weight:700; color:var(--pine); background:var(--pine-soft); border:1px solid var(--pine-line);
}

/* 인기 문서 */
.pops{display:grid; grid-template-columns:1fr 1fr; gap:0 32px; border-top:1px solid var(--line)}
@media (max-width:760px){ .pops{grid-template-columns:1fr} }
.pop{
  display:flex; align-items:center; gap:12px; padding:15px 4px; border-bottom:1px solid var(--line); color:var(--ink);
}
.pop:hover{text-decoration:none}
.pop:hover b{color:var(--pine)}
.pop .n{
  font-family:ui-monospace,Menlo,monospace; font-size:12px; color:var(--ink-3); width:22px; flex:none;
  font-variant-numeric:tabular-nums;
}
.pop b{font-size:15px; font-weight:620; transition:color .15s}
.pop small{margin-left:auto; color:var(--ink-3); font-size:12.5px; flex:none}

/* 플랜 비교 */
.plan-band{
  background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-1);
  padding:26px 26px 10px; overflow:hidden;
}
.plan-band .cols{display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:8px 20px; align-items:start}
@media (max-width:760px){ .plan-band .cols{grid-template-columns:1fr} }
.plan-col h3{font-size:16px; font-weight:750; display:flex; align-items:center; gap:8px; margin-bottom:8px}
.plan-col p{font-size:13.8px; color:var(--ink-2)}
.plan-col ul{list-style:none; margin:0 0 16px; padding:0}
.plan-col li{
  font-size:14px; padding:7px 0 7px 24px; position:relative; border-bottom:1px dashed var(--line); color:var(--ink);
}
.plan-col li:last-child{border-bottom:none}
.plan-col li::before{content:"✓"; position:absolute; left:2px; color:var(--pine); font-weight:700}
.plan-note{font-size:13px; color:var(--ink-3); border-top:1px solid var(--line); margin:8px -26px 0; padding:14px 26px}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:12px;
  padding:17px 4px; font-size:15.5px; font-weight:640;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q"; color:var(--pine); font-weight:800; font-size:14px; font-family:ui-monospace,Menlo,monospace}
.faq summary::after{content:"+"; margin-left:auto; color:var(--ink-3); font-size:18px; font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 4px 18px 30px; color:var(--ink-2); font-size:14.5px; max-width:720px}
.faq .a p{margin:0 0 .6em}

/* 푸터 */
.cta-band{
  margin:44px 0 0; border-radius:20px; background:var(--pine-soft); border:1px solid var(--pine-line);
  padding:30px clamp(22px,4vw,40px); display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.cta-band b{font-size:18px; font-weight:750}
.cta-band p{margin:4px 0 0; color:var(--ink-2); font-size:14.5px}
.cta-band .sp{flex:1}
.cta-band a.mail{
  display:inline-flex; align-items:center; height:42px; padding:0 20px; border-radius:12px;
  background:var(--pine); color:#fff; font-weight:650; font-size:14.5px; flex:none;
}
:root:not([data-theme="light"]) .cta-band a.mail{color:var(--bg)}
:root[data-theme="light"] .cta-band a.mail{color:#fff}
.cta-band a.mail:hover{background:var(--pine-strong); text-decoration:none}
footer{padding:34px 0 46px; color:var(--ink-3); font-size:13px}
footer .row{display:flex; gap:18px; flex-wrap:wrap; align-items:center}
footer .sp{flex:1}

/* ============ 아티클 ============ */
.article-layout{display:grid; grid-template-columns:minmax(0,720px) 220px; gap:56px; justify-content:center; padding:36px 0 10px}
@media (max-width:1080px){ .article-layout{grid-template-columns:minmax(0,720px); justify-content:center} .toc{display:none} }
.crumbs{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-3); margin-bottom:18px; flex-wrap:wrap}
.crumbs a{color:var(--ink-2)}
.crumbs .sep{color:var(--ink-3)}
.art-head .plan-tag{margin-bottom:14px; display:flex; gap:8px; align-items:center}
.art-head h1{font-size:clamp(26px,3.6vw,34px); font-weight:780; letter-spacing:-.02em}
.art-head .lead{margin:14px 0 8px; font-size:17px; color:var(--ink-2); line-height:1.7}
.art-head .meta{font-size:13px; color:var(--ink-3); padding-bottom:22px; border-bottom:1px solid var(--line); margin-bottom:8px}
.art-body h2{font-size:21.5px; font-weight:750; letter-spacing:-.01em; margin:44px 0 14px; scroll-margin-top:80px}
.art-body h3{font-size:17px; font-weight:700; margin:28px 0 10px; scroll-margin-top:80px}
.art-body p{color:var(--ink); font-size:16px}
.art-body .dim{color:var(--ink-2)}
.art-body ul{padding-left:22px; margin:0 0 1.1em}
.art-body li{margin-bottom:.4em; font-size:15.5px}
.art-body b{font-weight:700}
.path{
  display:inline-block; padding:1px 7px; border-radius:7px; background:var(--surface-2);
  border:1px solid var(--line); font-size:.92em; font-weight:600; color:var(--ink); white-space:nowrap;
}
.steps{list-style:none; padding:0; margin:18px 0 22px; counter-reset:st}
.steps>li{
  position:relative; padding:0 0 20px 44px; margin:0; counter-increment:st; font-size:15.8px;
}
.steps>li::before{
  content:counter(st); position:absolute; left:0; top:-1px;
  width:28px; height:28px; border-radius:999px; background:var(--pine-soft); color:var(--pine);
  border:1px solid var(--pine-line); font-size:13.5px; font-weight:750;
  display:flex; align-items:center; justify-content:center;
}
.steps>li::after{
  content:""; position:absolute; left:13.5px; top:30px; bottom:2px; width:1px; background:var(--line-strong);
}
.steps>li:last-child::after{display:none}
.steps b{font-weight:700}
.callout{
  display:flex; gap:11px; border-radius:12px; padding:14px 16px; margin:18px 0 22px; font-size:14.5px; line-height:1.65;
}
.callout p{margin:0}
.callout.tip{background:var(--pine-soft); border:1px solid var(--pine-line)}
.callout.tip .ci{color:var(--pine)}
.callout.warn{background:var(--warn-bg); border:1px solid var(--warn-line)}
.callout.warn .ci{color:var(--ink-2)}
.callout.pro{background:var(--amber-bg); border:1px solid var(--amber-line)}
.callout.pro .ci{color:var(--amber-ink)}
.callout .ci{flex:none; font-weight:800; font-size:13px; padding-top:2px; letter-spacing:.02em}
figure.shot{margin:22px 0 26px}
figure.shot .imgwrap{
  border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:var(--shadow-1);
  cursor:zoom-in; position:relative; background:var(--surface-2);
}
figure.shot img{width:100%; height:auto}
figure.shot figcaption{margin-top:9px; font-size:13px; color:var(--ink-3); text-align:center}
.hotspots{position:absolute; inset:0}
.hot{
  position:absolute; width:26px; height:26px; border-radius:999px; transform:translate(-50%,-50%);
  background:var(--pine); color:#fff; font-size:13px; font-weight:750;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--pine) 25%, transparent), 0 2px 6px rgba(0,0,0,.3);
}
.legend{list-style:none; padding:0; margin:14px 0 22px; display:grid; grid-template-columns:1fr 1fr; gap:8px 24px}
@media (max-width:640px){ .legend{grid-template-columns:1fr} }
.legend li{display:flex; gap:10px; font-size:14.5px; align-items:baseline}
.legend .n{
  flex:none; width:22px; height:22px; border-radius:999px; background:var(--pine-soft); color:var(--pine);
  border:1px solid var(--pine-line); font-size:12px; font-weight:750; display:inline-flex; align-items:center; justify-content:center;
  transform:translateY(3px);
}
.art-table{width:100%; border-collapse:collapse; font-size:14.5px; margin:16px 0 24px}
.art-table th{
  text-align:left; font-size:13px; color:var(--ink-2); font-weight:700;
  border-bottom:1px solid var(--line-strong); padding:8px 12px 8px 0;
}
.art-table td{border-bottom:1px solid var(--line); padding:10px 12px 10px 0; vertical-align:top}
.art-table td:first-child{font-weight:650; white-space:nowrap}
.tablewrap{overflow-x:auto}
.next-nav{
  display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:52px 0 8px; padding-top:26px; border-top:1px solid var(--line);
}
@media (max-width:600px){ .next-nav{grid-template-columns:1fr} }
.next-nav a{
  display:block; border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:14px 18px;
  color:var(--ink); box-shadow:var(--shadow-1);
}
.next-nav a:hover{border-color:var(--pine-line); text-decoration:none}
.next-nav small{display:block; color:var(--ink-3); font-size:12px; margin-bottom:3px}
.next-nav b{font-size:14.5px; font-weight:650}
.next-nav a.next{text-align:right}
.toc{position:sticky; top:84px; align-self:start; font-size:13.5px}
.toc .toc-title{font-size:12px; font-weight:750; letter-spacing:.1em; color:var(--ink-3); margin-bottom:10px}
.toc ol{list-style:none; margin:0; padding:0; border-left:1px solid var(--line)}
.toc a{
  display:block; padding:5px 0 5px 14px; color:var(--ink-2); border-left:2px solid transparent; margin-left:-1.5px;
  line-height:1.45;
}
.toc a:hover{color:var(--ink); text-decoration:none}
.toc a.on{color:var(--pine); border-left-color:var(--pine); font-weight:650}

/* ============ 사이트 푸터 (사업자 표기) ============ */
.sitefoot{
  margin-top:64px; border-top:1px solid var(--line);
  padding:30px 0 44px; color:var(--ink-3); font-size:12.5px; line-height:1.7;
}
.sitefoot .sf-brand{font-size:13.5px; font-weight:750; color:var(--ink-2); margin-bottom:8px}
.sitefoot .sf-info{display:flex; flex-wrap:wrap; gap:4px 8px}
.sitefoot .sf-info b{font-weight:650; color:var(--ink-2)}
.sitefoot .sep{color:var(--line-strong)}
.sitefoot a{color:var(--ink-2)}
.sitefoot .sf-links{display:flex; gap:16px; margin-top:12px}
.sitefoot .sf-links a{font-weight:650; color:var(--ink-2)}
.sitefoot .sf-copy{margin-top:12px; font-size:12px}

/* ============ 검색 오버레이 ============ */
.search-overlay{
  position:fixed; inset:0; z-index:100; display:none;
  background:color-mix(in srgb, var(--ink) 22%, transparent);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  padding:min(14vh,120px) 18px 18px;
}
.search-overlay.open{display:block}
.search-panel{
  max-width:640px; margin:0 auto; background:var(--surface); border-radius:18px; border:1px solid var(--line);
  box-shadow:var(--shadow-2); overflow:hidden;
}
.search-row{display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--line)}
.search-row svg{color:var(--ink-3); flex:none}
#searchInput{
  flex:1; border:none; outline:none; background:transparent; font:inherit; font-size:16.5px; color:var(--ink);
}
#searchInput::placeholder{color:var(--ink-3)}
.search-results{max-height:min(52vh,480px); overflow-y:auto; padding:8px; scrollbar-width:thin; scrollbar-color:rgba(128,140,132,.35) transparent}
.search-results::-webkit-scrollbar{width:8px}
.search-results::-webkit-scrollbar-track{background:transparent}
.search-results::-webkit-scrollbar-thumb{background:rgba(128,140,132,.35); border-radius:8px}
.sr{display:block; padding:11px 12px; border-radius:10px; color:var(--ink)}
.sr:hover,.sr.sel{background:var(--pine-soft); text-decoration:none}
.sr .cat-name{font-size:11.5px; color:var(--pine); font-weight:700; letter-spacing:.02em}
.sr b{display:block; font-size:14.5px; font-weight:650; margin:1px 0 2px}
.sr small{display:block; color:var(--ink-2); font-size:12.8px; line-height:1.5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sr-empty{padding:28px 16px 32px; text-align:center; color:var(--ink-3); font-size:14px}
.search-foot{border-top:1px solid var(--line); padding:9px 16px; display:flex; gap:14px; font-size:12px; color:var(--ink-3)}

/* ============ 라이트박스 ============ */
.lightbox{
  position:fixed; inset:0; z-index:110; display:none; background:rgba(10,16,12,.88);
  align-items:center; justify-content:center; padding:28px; cursor:zoom-out;
}
.lightbox.open{display:flex}
.lightbox img{max-width:100%; max-height:92vh; border-radius:10px; box-shadow:0 20px 80px rgba(0,0,0,.5)}

/* 홈/아티클 전환 */
#viewHome,#viewArticle{display:none}
#viewHome.on,#viewArticle.on{display:block}
.reveal{animation:rise .45s ease-out both}
@keyframes rise{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}