:root{
  --ink:#151B2B; --muted:#5F6B80; --paper:#FFFFFF; --bg:#F6F7FB; --soft:#EFF2F8;
  --line:#E1E5EE; --blue:#3157E0; --blue-soft:#E9EEFF; --stamp:#C8322B; --warn:#B26A00; --good:#1F7A4D;
  --violet:#6A4FD8; --sky:#1584C5; --amber:#D27A12; --green:#18915F; --teal:#0E8C8C; --rose:#D0476B;
  --card:#FFFFFF; --shadow:0 1px 2px rgba(20,27,45,.04), 0 6px 20px rgba(20,27,45,.06);
  --shadow-up:0 2px 4px rgba(20,27,45,.05), 0 14px 32px rgba(20,27,45,.10);
  --side:248px; --rail:272px; --head-h:56px; --r:14px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#E8EBF2; --muted:#9AA4B6; --paper:#141821; --bg:#0F1218; --soft:#1C2230;
    --line:#2A3242; --blue:#8AA4FF; --blue-soft:#1E2742; --stamp:#F0675F; --warn:#E3A23B; --good:#5CC48E;
    --violet:#A894FF; --sky:#5BB8EE; --amber:#F0A54A; --green:#4FCB94; --teal:#4CC9C9; --rose:#F07A98;
    --card:#171C27; --shadow:0 1px 2px rgba(0,0,0,.3); --shadow-up:0 8px 28px rgba(0,0,0,.45);
  }
}
*,*::before,*::after{box-sizing:inherit}
[hidden]{display:none !important}   /* .field·.row 처럼 display 를 정한 요소도 hidden 이면 숨김 */
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + var(--head-h) + 8px)}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased}
:focus-visible{outline:3px solid var(--blue); outline-offset:2px}
a{color:var(--blue)}
.ic{width:18px; height:18px; flex:none}
.tone-violet{--tone:var(--violet)} .tone-sky{--tone:var(--sky)} .tone-amber{--tone:var(--amber)} .tone-green{--tone:var(--green)} .tone-teal{--tone:var(--teal)} .tone-rose{--tone:var(--rose)}

/* 브랜드 */
.brand{display:inline-flex; align-items:center; gap:9px; font-weight:800; font-size:19px; letter-spacing:-0.02em; color:var(--ink); text-decoration:none; white-space:nowrap}
.brand-mark{display:grid; place-items:center; width:30px; height:30px; border-radius:9px; color:#fff;
  background:linear-gradient(135deg,#5B7CFA 0%,#3157E0 55%,#6A4FD8 100%); box-shadow:0 4px 10px rgba(49,87,224,.3)}
.brand-mark .ic{width:17px; height:17px; fill:currentColor; stroke-width:1.5}

/* 모바일 상단 바 */
.site-head{position:sticky; top:env(safe-area-inset-top,0px); z-index:30; height:var(--head-h); display:flex; align-items:center; justify-content:space-between;
  padding:0 12px 0 16px; background:color-mix(in srgb,var(--paper) 88%,transparent); backdrop-filter:saturate(1.6) blur(12px); -webkit-backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid var(--line)}
.nav-toggle,.nav-close{display:grid; place-items:center; width:42px; height:42px; border:0; border-radius:10px; background:transparent; color:var(--ink); cursor:pointer}
.nav-toggle:hover,.nav-close:hover{background:var(--soft)}
.nav-toggle .ic,.nav-close .ic{width:22px; height:22px}

/* 좌측 메뉴 */
.side-nav{position:fixed; z-index:40; top:0; bottom:0; left:0; width:min(300px,86vw); overflow-y:auto; overscroll-behavior:contain;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 12px calc(env(safe-area-inset-bottom,0px) + 24px);
  background:var(--paper); border-right:1px solid var(--line); transform:translateX(-102%); transition:transform .22s ease; scrollbar-width:thin}
.nav-open .side-nav{transform:none; box-shadow:var(--shadow-up)}
.nav-dim{position:fixed; inset:0; z-index:35; background:rgba(10,14,24,.45); opacity:0; pointer-events:none; transition:opacity .2s}
.nav-open .nav-dim{opacity:1; pointer-events:auto}
.nav-open body{overflow:hidden}
.side-top{display:flex; align-items:center; justify-content:space-between; padding:4px 4px 12px 6px}
.side-nav a{display:flex; align-items:center; gap:10px; padding:8px 10px; margin:1px 0; border-radius:9px; color:var(--muted); text-decoration:none; font-size:15px; font-weight:500}
.side-nav a .ic{color:var(--tone,var(--muted)); opacity:.85}
.side-nav a:hover{background:var(--soft); color:var(--ink)}
.side-nav a[aria-current="page"]{background:color-mix(in srgb,var(--tone,var(--blue)) 12%,transparent); color:var(--ink); font-weight:700}
.side-nav a[aria-current="page"] .ic{opacity:1}
.side-nav .brand{padding:0; margin:0; font-size:19px; font-weight:800; color:var(--ink); gap:9px}
.side-nav .brand:hover{background:transparent}
.side-nav .brand .ic{color:#fff; opacity:1}
.side-home{--tone:var(--blue)}
.side-find{position:relative; margin:2px 2px 10px}
.side-find .ic{position:absolute; left:11px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--muted); pointer-events:none}
.side-find input[type=search]{font-size:14px; padding:8px 10px 8px 34px; border-radius:9px; border-width:1px; background:var(--paper)}
.side-group{margin-top:6px; padding-top:6px; border-top:1px solid var(--line)}
.side-group[hidden]{display:none}
.side-label{display:flex; align-items:center; gap:7px; width:100%; margin:0; padding:8px 10px; border:0; border-radius:9px; background:transparent; cursor:pointer;
  font:inherit; font-size:12.5px; font-weight:800; letter-spacing:.04em; color:var(--tone,var(--muted)); text-align:left}
.side-label:hover{background:var(--soft)}
.side-label .ic{width:15px; height:15px; color:var(--tone,var(--muted))}
.side-label span{flex:1}
.side-label small{font-size:11px; font-weight:700; color:var(--muted); background:var(--soft); border-radius:999px; padding:0 7px; line-height:18px}
.side-label .chev{width:16px; height:16px; color:var(--muted); transition:transform .18s}
.side-group.open .side-label .chev{transform:rotate(180deg)}
.side-items{display:none; margin:2px 0 6px 16px; padding-left:6px; border-left:2px solid color-mix(in srgb,var(--tone,var(--line)) 28%,transparent)}
.side-group.open .side-items{display:block}
.side-items a{padding-left:10px}
.side-items a[hidden]{display:none}
.side-blogs{margin-top:18px; padding-top:16px; border-top:1px solid var(--line)}
.side-blogs .side-label{color:var(--muted); cursor:default; padding:0 10px 4px}
.side-blogs .side-label:hover{background:transparent}
.side-blogs a{font-size:14px}
.side-contact{margin-top:14px; padding-top:14px; border-top:1px solid var(--line)}
.side-contact .side-label{color:var(--muted); cursor:default; padding:0 10px 4px}
.side-contact .side-label:hover{background:transparent}
.side-contact a{font-size:14px; word-break:break-all}
.side-contact a .ic{color:var(--blue)}
.side-note{margin:2px 10px 0; font-size:12px; color:var(--muted)}
.side-blogs img{width:28px; height:28px; border-radius:50%; object-fit:cover; border:1px solid var(--line); background:#fff}

@media (min-width:1024px){
  :root{--head-h:0px}
  .site-head,.nav-close,.nav-dim{display:none}
  .side-nav{width:var(--side); transform:none; transition:none; background:var(--bg); padding-top:calc(env(safe-area-inset-top,0px) + 18px)}
  .side-top{padding-bottom:16px}
  body{padding-left:var(--side)}
  .nav-open body{overflow:visible}
}

/* 본문 */
main{max-width:800px; margin:0 auto; padding:32px 20px 56px}
h1{font-size:32px; line-height:1.25; margin:0 0 10px; letter-spacing:-0.03em}
.lead{color:var(--muted); margin:0 0 28px; font-size:17px}
h2{font-size:20px; margin:44px 0 14px; letter-spacing:-0.02em}
.note{color:var(--muted); font-size:14px}
.note p{margin:0 0 8px}
@media (min-width:1024px){ main{padding-top:44px} }

/* 도구 페이지 머리 */
.tool-head{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.tool-icon{display:grid; place-items:center; width:48px; height:48px; border-radius:14px; color:var(--tone);
  background:color-mix(in srgb,var(--tone) 13%,transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tone) 22%,transparent)}
.tool-icon .ic{width:24px; height:24px}
.crumb{display:flex; align-items:center; gap:4px; margin:0; font-size:14px; color:var(--muted)}
.crumb a{color:var(--muted); text-decoration:none}
.crumb a:hover{color:var(--ink); text-decoration:underline}
.crumb .ic{width:14px; height:14px}
.crumb span{color:var(--tone); font-weight:600}

/* 입력 */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.field label{font-size:14px; font-weight:600}
.row{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px}
input[type=text],input[type=number],input[type=date],input[type=time],input[type=search],select,textarea{
  font:inherit; font-size:17px; padding:11px 13px; width:100%;
  border:1.5px solid var(--line); border-radius:10px; background:var(--paper); color:var(--ink); transition:border-color .15s, box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--blue); box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 15%,transparent); outline:none}
textarea{min-height:220px; resize:vertical; line-height:1.6}
.seg{display:inline-flex; padding:3px; gap:2px; border-radius:10px; background:var(--soft); margin-bottom:14px}
.seg button{border:0; background:transparent; color:var(--muted); font:inherit; font-size:14px; font-weight:500; padding:7px 14px; border-radius:8px; cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--paper); color:var(--ink); font-weight:700; box-shadow:0 1px 3px rgba(20,27,45,.12)}

/* 결과 */
.big{font-size:34px; font-weight:800; letter-spacing:-0.02em; line-height:1.2}
.big small{font-size:16px; font-weight:500; color:var(--muted); margin-left:6px}
.panel{background:linear-gradient(180deg,var(--blue-soft),color-mix(in srgb,var(--blue-soft) 40%,var(--paper))); border:1px solid color-mix(in srgb,var(--blue) 14%,transparent); border-radius:var(--r); padding:22px; margin:18px 0}
.kv{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
.kv th,.kv td{padding:9px 4px; border-bottom:1px solid var(--line); text-align:left; font-weight:400}
.kv td{text-align:right}
.kv tr.total th,.kv tr.total td{font-weight:800; border-bottom:0}
.tbl-wrap{overflow-x:auto}
table.list{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; font-size:15px}
table.list th,table.list td{padding:8px 6px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap}
table.list th:first-child,table.list td:first-child{text-align:left}
table.list thead th{color:var(--muted); font-weight:600}

/* 첫 화면 */
.hero{display:grid; grid-template-columns:1fr; gap:8px; align-items:center; padding:28px 24px; margin:0 0 8px; border-radius:22px; overflow:hidden; position:relative;
  background:radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--violet) 18%,transparent) 0%,transparent 55%),
             radial-gradient(120% 120% at 0% 100%,color-mix(in srgb,var(--sky) 16%,transparent) 0%,transparent 55%),var(--blue-soft)}
.hero h1{font-size:34px}
.hero .lead{margin-bottom:18px}
.hero-art{width:100%; max-width:300px; height:auto; justify-self:center}
.hero-badges{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none}
.hero-badges li{display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px; font-size:13px; font-weight:600; background:var(--paper); color:var(--ink); box-shadow:var(--shadow)}
.hero-badges .ic{width:15px; height:15px; color:var(--blue)}
@media (min-width:700px){
  .hero{grid-template-columns:1.25fr 1fr; padding:40px 36px}
  .hero h1{font-size:40px}
}
.find{position:relative; margin:22px 0 4px}
.find input[type=search]{padding-left:44px; font-size:17px; border-radius:12px; box-shadow:var(--shadow)}
.find .ic{position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none}
.group-h{display:flex; align-items:center; gap:10px}
.group-h .ic{width:20px; height:20px; color:var(--tone)}
.group-h small{font-size:14px; font-weight:500; color:var(--muted)}

/* 도구 카드 */
.tools{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px}
.tools a{display:flex; flex-direction:column; gap:4px; height:100%; padding:18px; border-radius:var(--r); background:var(--card); border:1px solid var(--line);
  text-decoration:none; color:var(--ink); box-shadow:var(--shadow); transition:transform .15s, box-shadow .15s, border-color .15s}
.tools a > .ic{width:40px; height:40px; padding:9px; margin-bottom:8px; border-radius:12px; color:var(--tone); background:color-mix(in srgb,var(--tone) 13%,transparent)}
.tools a strong{display:block; font-size:16px; letter-spacing:-0.01em}
.tools a span{color:var(--muted); font-size:14px; line-height:1.5}
.tools a:hover{transform:translateY(-2px); box-shadow:var(--shadow-up); border-color:color-mix(in srgb,var(--tone,var(--blue)) 40%,var(--line))}
.tools li[hidden]{display:none}
.empty{color:var(--muted)}

/* 블로그 글 목록 */
.post-list{display:grid; grid-template-columns:1fr; column-gap:32px; border-top:1px solid var(--line)}
@media (min-width:760px){ .post-list{grid-template-columns:repeat(2,minmax(0,1fr))} }
.post{display:flex; align-items:center; gap:16px; padding:16px 2px; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); min-width:0}
.post-body{display:flex; flex-direction:column; gap:5px; flex:1; min-width:0}
.post-body b{font-size:16px; line-height:1.45; font-weight:700; letter-spacing:-0.01em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.post:hover .post-body b{color:var(--blue); text-decoration:underline; text-underline-offset:3px}
.post-body .ex{color:var(--muted); font-size:14px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.post-body small{display:flex; align-items:center; gap:6px; color:var(--muted); font-size:12.5px}
.post-body small img{width:16px; height:16px; border-radius:50%; object-fit:cover}
.post .thumb{flex:none; width:96px; height:96px; border-radius:12px; overflow:hidden; background:linear-gradient(135deg,var(--blue-soft),color-mix(in srgb,var(--violet) 14%,var(--soft))); border:1px solid var(--line)}
.post .thumb img{display:block; width:100%; height:100%; object-fit:cover}
.post-tag{display:inline-block; padding:1px 7px; border-radius:999px; font-style:normal; font-size:11.5px; font-weight:800; color:#fff; background:var(--blue)}
@media (max-width:480px){ .post{gap:12px; padding:14px 0} .post .thumb{width:84px; height:84px} .post-body b{font-size:15px} .post-body .ex{-webkit-line-clamp:1} }
.post.mini{gap:10px; padding:8px; border:0; border-radius:10px}
.post.mini:hover{background:var(--card)}
.post.mini .thumb{order:-1; width:60px; height:60px; border-radius:10px}
.post.mini .post-body{gap:4px}
.post.mini .post-body b{font-size:13.5px; font-weight:600}
.post.mini:hover .post-body b{text-decoration:none}
.post.mini .post-body small{font-size:12px}

/* 관련 영역 */
.rel{margin-top:56px; padding-top:8px; border-top:1px solid var(--line)}
.rel h2{margin-top:32px; margin-bottom:4px; display:flex; align-items:center; gap:8px}
.rel h2 .ic{width:20px; height:20px}
.rel-h .ic{color:var(--blue)} .new-h .ic{color:var(--muted)}
.rel-sub{margin:0 0 14px; color:var(--muted); font-size:14px}
.rel-posts{padding:4px 0 0}

.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips a{display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--ink); text-decoration:none; font-size:14px; font-weight:600}
.chips a .ic{width:16px; height:16px; color:var(--tone)}
.chips a:hover{border-color:var(--tone); color:var(--tone)}

/* 블로그 소개 */
.blogs{background:linear-gradient(180deg,var(--bg),color-mix(in srgb,var(--blue-soft) 70%,var(--bg))); border-top:1px solid var(--line); padding:48px 20px 52px}
.blogs-in{max-width:1000px; margin:0 auto}
.eyebrow{margin:0 0 6px; font-size:13px; font-weight:700; color:var(--blue); letter-spacing:.02em}
.blogs h2{margin:0 0 24px; font-size:24px; line-height:1.35}
.blog-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px}
.blog-card{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:22px; border-radius:18px; background:var(--card); border:1px solid var(--line);
  text-decoration:none; color:var(--ink); box-shadow:var(--shadow); transition:transform .15s, box-shadow .15s}
.blog-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-up)}
.blog-card.is-rel{border:2px solid var(--blue); padding:21px}
.badge{position:absolute; top:16px; right:16px; padding:3px 9px; border-radius:999px; font-size:12px; font-weight:700; color:#fff; background:var(--blue)}
.avatar{width:72px; height:72px; border-radius:50%; object-fit:cover; background:#fff; border:3px solid var(--paper); box-shadow:0 0 0 1px var(--line), 0 6px 16px rgba(20,27,45,.12); margin-bottom:6px}
.blog-card b{font-size:18px; letter-spacing:-0.02em}
.blog-card .desc{color:var(--muted); font-size:14px; line-height:1.55}
.tags{display:flex; flex-wrap:wrap; gap:6px}
.tags i{font-style:normal; font-size:12px; font-weight:600; padding:3px 8px; border-radius:6px; background:var(--soft); color:var(--muted)}
.go{display:inline-flex; align-items:center; gap:4px; margin-top:auto; padding-top:8px; font-size:14px; font-weight:700; color:var(--blue)}
.go .ic{width:16px; height:16px}

/* 배너 */
.bn{max-width:800px; margin:0 auto; padding:0 20px}
.bn-top{margin-top:16px}
.bn-right{display:none}
.bn-disclosure{color:var(--muted); font-size:12px; margin-top:6px}
@media (min-width:1440px){
  body{padding-right:var(--rail)}
  .bn-right{display:block; position:fixed; top:0; right:0; bottom:0; width:var(--rail); padding:24px 16px; overflow-y:auto; border-left:1px solid var(--line); background:var(--bg)}
  .bn-right:empty{display:none}
}
.rail-title{margin:0 0 8px 8px; font-size:13px; font-weight:700; color:var(--muted)}

footer.site-foot{padding:28px 20px 40px; font-size:14px; color:var(--muted); background:var(--bg); border-top:1px solid var(--line)}
footer.site-foot > *{max-width:1000px; margin-left:auto; margin-right:auto}
footer.site-foot p{margin:0 0 10px}
.foot-brand{display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px}
.foot-brand .brand{font-size:16px}
.foot-brand .brand-mark{width:24px; height:24px; border-radius:7px}
.foot-brand .brand-mark .ic{width:14px; height:14px}
.foot-safe{display:flex; align-items:flex-start; gap:6px}
.foot-safe .ic{width:16px; height:16px; margin-top:2px; color:var(--good)}
.foot-links{display:flex; flex-wrap:wrap; gap:6px 16px}
.foot-links a{color:var(--muted)}
@media (max-width:480px){ h1{font-size:26px} .hero h1{font-size:28px} .big{font-size:28px} .blogs h2{font-size:20px} }

/* 버튼·파일 도구 */
.btn{font:inherit; font-weight:700; padding:11px 20px; border-radius:10px; border:0; background:var(--blue); color:#fff; cursor:pointer; box-shadow:0 4px 12px color-mix(in srgb,var(--blue) 28%,transparent); transition:filter .15s}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.5; cursor:not-allowed; box-shadow:none}
.btn.sub{background:var(--paper); color:var(--ink); border:1px solid var(--line); font-weight:600; box-shadow:none}
.btns{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0}
.drop{display:block; border:2px dashed var(--line); border-radius:var(--r); padding:36px 16px; text-align:center; cursor:pointer; color:var(--muted); background:var(--bg); transition:border-color .15s, background .15s}
.drop.over,.drop:hover{border-color:var(--blue); color:var(--ink); background:var(--blue-soft)}
.drop input{display:none}
.drop b{display:block; color:var(--ink); font-size:17px; margin-bottom:4px}
.flist{list-style:none; margin:16px 0; padding:0}
.flist li{display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); font-size:15px}
.flist .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.flist .meta{color:var(--muted); font-size:13px; white-space:nowrap}
.flist button{font:inherit; font-size:13px; padding:4px 8px; border:1px solid var(--line); border-radius:6px; background:transparent; color:var(--ink); cursor:pointer}
.flist a{font-size:14px; white-space:nowrap}
.toast{position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--ink); color:var(--paper); padding:10px 16px; border-radius:10px; font-size:15px; opacity:0; transition:opacity .15s; pointer-events:none; z-index:50}
.toast.on{opacity:1}
@media (prefers-reduced-motion:reduce){
  .toast,.side-nav,.nav-dim,.tools a,.post,.blog-card{transition:none}
  .tools a:hover,.blog-card:hover{transform:none}
}

/* 검색 로봇용 정적 도구 링크(자바스크립트가 꺼져 있을 때만 보임) */
.static-nav{max-width:800px; margin:0 auto; padding:24px 20px 40px; font-size:14px; border-top:1px solid var(--line)}
.static-nav h2{font-size:15px; margin:18px 0 6px}
.static-nav ul{display:flex; flex-wrap:wrap; gap:4px 14px; margin:0; padding:0; list-style:none}

/* 자주 묻는 질문 */
.faq details{border:1px solid var(--line); border-radius:12px; padding:0 16px; margin-bottom:8px; background:var(--card)}
.faq summary{cursor:pointer; padding:14px 0; font-weight:700; list-style:none; display:flex; justify-content:space-between; gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; color:var(--muted); font-weight:500}
.faq details[open] summary::after{content:'−'}
.faq details p{margin:0 0 14px; color:var(--muted); font-size:15px; line-height:1.65}