@charset "utf-8";
/* ROGA Note — ROGAWORKS 공용 티스토리 스킨
   블로그별로 아래 :root 값 4개만 바꿔 쓴다.
   rideandtool  --brand:#00b4be; --ink:#0f1a24
   mobility     --brand:#4caf50; --ink:#141e1a
   biz-tax      --brand:#ffb300; --ink:#1c1828
   gov-support  --brand:#4285f4; --ink:#122030
   ai-work      --brand:#ab47bc; --ink:#18181c
*/
:root{
  --brand:#4285f4;
  --ink:#122030;
  --bg:#ffffff;
  --fg:#22252a;
  --muted:#6b7280;
  --line:#e6e8ec;
  --soft:#f6f7f9;
  --radius:12px;
  --wrap:1120px;
  --read:720px;
  --ratio:16/9;           /* 대표이미지 비율 — 전 영역 공통 */
  --font:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Malgun Gothic",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);
  font-size:17px;line-height:1.75;word-break:keep-all;overflow-wrap:anywhere}
img{max-width:100%;height:auto;border:0}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}

/* ── 헤더 ── */
.hd{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:30}
.hd-in{display:flex;align-items:center;gap:14px;min-height:60px}
.hd-logo{font-weight:800;font-size:19px;letter-spacing:-.02em;white-space:nowrap}
.hd-logo b{color:var(--brand)}
.hd-nav{margin-left:auto;overflow-x:auto;-webkit-overflow-scrolling:touch}
.hd-nav ul{display:flex;gap:4px;margin:0;padding:0;list-style:none}
.hd-nav a{display:block;padding:8px 12px;font-size:15px;color:var(--muted);border-radius:8px;white-space:nowrap}
.hd-nav a:hover{background:var(--soft);color:var(--fg);text-decoration:none}
.hd-nav li.selected>a,.hd-nav a.selected{color:var(--fg);font-weight:700}

/* ── 레이아웃 ── */
.main{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;padding:28px 0 56px}
@media (max-width:920px){.main{grid-template-columns:minmax(0,1fr);gap:32px}}

/* ── 광고 슬롯 ── */
.ad{margin:24px 0;text-align:center;min-height:1px;overflow:hidden}
.ad:empty{display:none;margin:0}

/* ── 글 카드 목록 ── */
.list-head{margin:0 0 20px}
.list-head h2{margin:0;font-size:22px;letter-spacing:-.02em}
.list-head p{margin:6px 0 0;color:var(--muted);font-size:15px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:26px;margin:0;padding:0;list-style:none}
@media (max-width:560px){.cards{grid-template-columns:1fr;gap:22px}}
.card{min-width:0}
.card-thumb{display:block;aspect-ratio:var(--ratio);border-radius:var(--radius);overflow:hidden;background:var(--soft);border:1px solid var(--line)}
.card-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.card-cat{display:inline-block;margin:12px 0 0;font-size:13px;font-weight:700;color:var(--brand)}
.card h3{margin:5px 0 0;font-size:17px;line-height:1.45;letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card p{margin:7px 0 0;font-size:14.5px;color:var(--muted);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .meta{margin:9px 0 0;font-size:13px;color:var(--muted)}

/* ── 본문 ── */
.post{max-width:var(--read)}
.post-cat{font-size:13.5px;font-weight:700;color:var(--brand)}
.post h1{margin:8px 0 10px;font-size:clamp(25px,5.2vw,34px);line-height:1.32;letter-spacing:-.025em}
.post-meta{color:var(--muted);font-size:14px;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:26px}
.post-body{font-size:17px}
.post-body img{border-radius:10px;margin:18px 0}
.post-body h2{margin:38px 0 12px;font-size:22px;letter-spacing:-.02em;line-height:1.4}
.post-body h3{margin:28px 0 10px;font-size:19px;letter-spacing:-.01em}
.post-body p{margin:0 0 16px}
.post-body table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15px;display:block;overflow-x:auto}
.post-body th,.post-body td{border:1px solid var(--line);padding:9px 11px;text-align:left}
.post-body blockquote{margin:18px 0;padding:12px 16px;border-left:3px solid var(--brand);background:var(--soft);border-radius:0 8px 8px 0}
.post-body code{background:var(--soft);padding:2px 5px;border-radius:5px;font-size:.92em}
.post-body details{margin:12px 0;border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.post-body summary{cursor:pointer;font-weight:600}
.post-tags{margin:30px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.post-tags a{font-size:13.5px;color:var(--muted);background:var(--soft);padding:5px 11px;border-radius:999px}

/* ── 사이드바 ── */
.side{min-width:0}
.side section{margin:0 0 30px}
.side h2{margin:0 0 12px;font-size:15px;font-weight:800;letter-spacing:-.01em}
.side ul{margin:0;padding:0;list-style:none}
.side .cat li{border-bottom:1px solid var(--line)}
.side .cat a{display:block;padding:9px 2px;font-size:15px}
.side .cat .c_cnt{color:var(--muted);font-size:13px}
.rct li{display:flex;gap:11px;padding:10px 0;border-bottom:1px solid var(--line)}
.rct .t{flex:1;min-width:0;font-size:14.5px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rct .d{display:block;margin-top:4px;font-size:12.5px;color:var(--muted)}
.rct .th{width:76px;flex:0 0 76px;aspect-ratio:var(--ratio);border-radius:8px;overflow:hidden;background:var(--soft);border:1px solid var(--line)}
.rct .th img{width:100%;height:100%;object-fit:cover;display:block}
.srch{display:flex;gap:8px}
.srch input{flex:1;min-width:0;border:1px solid var(--line);background:var(--bg);color:var(--fg);border-radius:9px;padding:9px 12px;font-size:15px;font-family:inherit}
.srch button{border:0;background:var(--ink);color:#fff;border-radius:9px;padding:9px 15px;font-size:14px;cursor:pointer;font-family:inherit}

/* ── 페이징 ── */
.paging{display:flex;justify-content:center;gap:6px;margin:44px 0 0;flex-wrap:wrap}
.paging a{min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:9px;font-size:14.5px;padding:0 10px}
.paging a:hover{background:var(--soft);text-decoration:none}
.paging a.selected{background:var(--ink);color:#fff;border-color:var(--ink)}
.paging a.no-more-prev,.paging a.no-more-next{opacity:.32;pointer-events:none}

/* ── 댓글·방명록 ── */
.cmt{max-width:var(--read);margin:48px 0 0;padding-top:26px;border-top:1px solid var(--line)}
.cmt h2{font-size:16px;margin:0 0 16px}
.cmt-list{margin:0;padding:0;list-style:none}
.cmt-list li{padding:14px 0;border-bottom:1px solid var(--line)}
.cmt-list .n{font-weight:700;font-size:14.5px}
.cmt-list .dt{color:var(--muted);font-size:12.5px;margin-left:8px}
.cmt-list .bd{margin:7px 0 0;font-size:15px}
.cmt-form{margin:20px 0 0;display:grid;gap:9px}
.cmt-form input,.cmt-form textarea{width:100%;border:1px solid var(--line);background:var(--bg);color:var(--fg);
  border-radius:9px;padding:10px 12px;font-size:15px;font-family:inherit}
.cmt-form textarea{min-height:110px;resize:vertical}
.cmt-form button{justify-self:start;border:0;background:var(--ink);color:#fff;border-radius:9px;
  padding:11px 22px;font-size:15px;cursor:pointer;font-family:inherit}

/* ── 푸터 ── */
.ft{border-top:1px solid var(--line);padding:28px 0 46px;color:var(--muted);font-size:13.5px}
.ft a{color:var(--muted)}
.ft nav{margin-bottom:9px;display:flex;gap:14px;flex-wrap:wrap}

/* ── 보호글 ── */
.pw{max-width:420px;margin:60px auto;text-align:center}
.pw input{border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-size:15px;background:var(--bg);color:var(--fg)}
.empty{padding:60px 0;text-align:center;color:var(--muted)}

/* ── 자동 목차 (toc.js) ── */
.rn-toc{margin:22px 0 30px;border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:var(--radius);background:var(--soft);padding:12px 16px 14px;font-size:15px}
.rn-toc-t{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:0;cursor:pointer;font-family:inherit;color:var(--ink);text-align:left}
.rn-toc-t span{font-weight:800;font-size:15.5px}
.rn-toc-t em{font-style:normal;color:var(--muted);font-size:12.5px}
.rn-toc-t::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s}
.rn-toc.is-closed .rn-toc-t::after{transform:rotate(-45deg)}
.rn-toc ol{margin:10px 0 0;padding:0 0 0 22px;counter-reset:toc}
.rn-toc ol ol{margin:4px 0 6px;padding-left:18px;font-size:14px}
.rn-toc li{margin:5px 0;line-height:1.5}
.rn-toc a{color:var(--fg);text-decoration:none;border-bottom:1px dotted transparent}
.rn-toc a:hover{color:var(--brand);border-bottom-color:var(--brand)}
.rn-toc.is-closed ol{display:none}
.post-body h2[id],.post-body h3[id]{scroll-margin-top:80px}
@media (max-width:640px){.rn-toc{padding:10px 13px 12px;font-size:14.5px}.rn-toc ol{padding-left:20px}}

/* ── 로고 마크 (2026-09-28) — [##_image_##](블로그 설정 > 블로그 이미지 = assets/brand/profile_512.png)를 그대로 쓴다. 블로그마다 따로 고칠 것 없음 ── */
.hd-logo{display:inline-flex;align-items:center;gap:9px}
.hd-mark{display:block;width:30px;height:30px;flex:0 0 30px;border-radius:7px;object-fit:cover}
.hd-name{font-weight:800;letter-spacing:-.02em}
.hd-logo:hover{text-decoration:none}
.hd-logo:hover .hd-name{text-decoration:underline}
@media (max-width:480px){.hd-mark{width:26px;height:26px;flex:0 0 26px;border-radius:6px}}

/* ── 사이드바 카테고리 목록 (기본 트리 테이블 대체) ── */
.cat-list{margin:0;padding:0;list-style:none}
.cat-list li{border-bottom:1px solid var(--line)}
.cat-list li:last-child{border-bottom:0}
.cat-list a{display:block;padding:10px 8px;font-size:15px;border-radius:8px;color:var(--fg)}
.cat-list a:hover{background:var(--soft);color:var(--brand);text-decoration:none}
.cat-list a.on{color:var(--brand);font-weight:700}
.cat-list li.d2 a{padding-left:24px;font-size:14.5px;color:var(--muted)}
.cat-list li.d3 a{padding-left:38px;font-size:14px;color:var(--muted)}