/*
Theme Name: 서사들의 서류가방
Theme URI: https://admin-records.com/
Author: 서사들의 서류가방
Description: 행정사 공동 기록 블로그 전용 테마. 글의 구조를 슬롯으로 고정해 레이아웃이 깨지지 않고 구조화 데이터가 항상 정확하게 출력됩니다.
Version: 1.4.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sgb
Tags: blog, one-column, custom-menu, translation-ready
*/

/* ==========================================================================
   0. 토큰
   ========================================================================== */
:root{
  --ink:#101418;        /* 본문 */
  --ink-2:#3E4952;      /* 소제목 옆 */
  --ink-3:#4A555E;      /* 보조 텍스트 */
  --mut:#6B7680;        /* 설명문 */
  --mut-2:#8C979E;      /* 날짜·메타 */
  --mut-3:#A8B2B8;      /* 아이콘 비활성 */
  --mut-4:#C2CBD1;      /* 가장 옅은 */
  --line:#DCE1E4;       /* 테두리 */
  --line-2:#EEF1F2;     /* 옅은 구분선 */
  --bg:#FFFFFF;
  --bg-2:#FAFBFB;       /* 푸터·호버 */
  --bg-3:#FCFDFD;
  --teal:#0E6B5E;       /* 주색 */
  --teal-d:#0A4E44;
  --teal-t:#E4F0EE;     /* 주색 배경 */
  --oran:#B0561F;       /* 따따부따 */
  --oran-t:#FBEDE4;
  --seal:#A4262C;       /* 관인 */
  --warn:#B4791C;
  --warn-t:#FBF3E3;

  --w:1280px;           /* 콘텐츠 최대 폭 */
  --pad:56px;           /* 데스크톱 좌우 여백 */
  --r:8px;              /* 카드 라운드 */
  --r-s:3px;            /* 칩 라운드 */
}

/* ==========================================================================
   1. 리셋 · 기본
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'IBM Plex Sans KR',-apple-system,BlinkMacSystemFont,'Segoe UI','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  font-size:16px; line-height:1.75; word-break:keep-all; overflow-wrap:break-word;
}
img{max-width:100%; height:auto; display:block;}
a{color:var(--teal); text-decoration:none;}
a:hover{color:var(--teal-d);}
button{font:inherit; cursor:pointer;}
figure{margin:0;}
table{border-collapse:collapse; width:100%;}

/* 가로 스크롤바 숨김 (드래그 칩 줄) */
.sgb-drag{overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;}
.sgb-drag::-webkit-scrollbar{display:none; width:0; height:0;}

.sgb-skip{position:absolute; left:-9999px;}
.sgb-skip:focus{left:12px; top:12px; z-index:100; background:#fff; padding:10px 16px; border:2px solid var(--teal); border-radius:var(--r-s);}

.sgb-wrap{max-width:var(--w); margin:0 auto;}
.sgb-pad{padding-left:var(--pad); padding-right:var(--pad);}

/* ==========================================================================
   2. 헤더 — 가방 로고 + 워드마크
   ========================================================================== */
.sgb-head{border-bottom:1px solid var(--line);}
.sgb-head-in{display:flex; justify-content:space-between; align-items:center; padding:22px var(--pad) 20px;}
.sgb-brand{display:flex; align-items:center; gap:16px;}
.sgb-brand-t1{font-size:12px; font-weight:700; color:var(--teal); letter-spacing:0.24em;}
.sgb-wm{
  font-family:'Gothic A1','IBM Plex Sans KR',sans-serif;
  font-weight:900; letter-spacing:-0.06em; line-height:1;
  font-size:34px; margin-top:4px; color:var(--ink);
}
.sgb-tagline{
  font-size:12.5px; line-height:1.6; color:var(--mut-2); margin:0 0 0 4px;
  padding-left:18px; border-left:1px solid var(--line); flex:1;
}
.sgb-search{display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:5px; padding:9px 13px; width:210px; background:#fff;}
.sgb-search input{border:0; outline:0; font-size:13.5px; width:100%; background:transparent; color:var(--ink);}
.sgb-search input::placeholder{color:#96A0A8;}

/* 가방 애니메이션 — 앞덮개가 위로 들리며 손잡이를 가리고 내부가 드러남 */
.lid{transform-box:view-box; animation:lidOpen 6s cubic-bezier(.34,0,.2,1) infinite;}
@keyframes lidOpen{
  0%,10%{transform:translateY(0);}
  30%,58%{transform:translateY(-13.6px);}
  71%{transform:translateY(1.2px);}
  76%{transform:translateY(-.4px);}
  81%,100%{transform:translateY(0);}
}
.pap{transform-box:view-box; animation:papRise 6s cubic-bezier(.3,.9,.3,1) infinite;}
@keyframes papRise{
  0%,18%{transform:translateY(0); opacity:0;}
  36%,56%{transform:translateY(-4.5px); opacity:1;}
  66%,100%{transform:translateY(0); opacity:0;}
}
.lat{animation:latchLock 6s linear infinite;}
@keyframes latchLock{
  0%,71%{stroke-width:1.6;} 79%{stroke-width:2.4;} 89%,100%{stroke-width:1.6;}
}

/* ==========================================================================
   3. 카테고리 아이콘 내비
   ========================================================================== */
.sgb-catnav{padding:16px var(--pad) 18px; border-bottom:1px solid var(--line);}
.sgb-catgrid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px;}
.icb{
  border:1px solid var(--line); border-radius:var(--r);
  padding:14px 8px 12px; text-align:center; background:#fff;
  transition:background .2s, border-color .2s, transform .2s;
  display:block;
}
.icb:hover{background:var(--teal-t); border-color:var(--teal); transform:translateY(-3px);}
.icb.is-on{background:var(--teal-t); border-color:var(--teal);}
.icb.is-comics:hover,.icb.is-comics.is-on{background:var(--oran-t); border-color:var(--oran);}
.icb-sub{display:block; font-size:11px; color:var(--mut-3); margin-top:3px; letter-spacing:-.01em; line-height:1.4;}
.icb:hover .icb-sub,.icb.is-on .icb-sub{color:var(--mut-2);}
.icb-name{font-size:13px; font-weight:600; margin-top:8px; letter-spacing:-.02em; color:var(--ink-2);}
.icb:hover .icb-name,.icb.is-on .icb-name{color:var(--ink);}
@keyframes drawIcon{0%,10%{stroke-dashoffset:120}40%,84%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:120}}
.ico path,.ico rect,.ico circle{stroke-dasharray:120; animation:drawIcon 6s ease-in-out infinite;}

/* 툴팁 — 다른 글자를 가리지 않도록 아래에 자리를 미리 비워둔다 */
.sgb-tipband{height:52px; position:relative;}
.sgb-tip{
  position:absolute; left:0; right:0; top:6px; text-align:center;
  font-size:13.5px; color:var(--mut); opacity:0; transition:opacity .18s;
  padding:0 var(--pad);
}
.sgb-tip.is-on{opacity:1;}

/* ==========================================================================
   4. 되돌아가기 · 이동경로
   ========================================================================== */
.sgb-backbar{display:flex; align-items:center; justify-content:space-between; padding:14px var(--pad) 0;}
.bk{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--line); border-radius:20px; padding:8px 15px 8px 12px;
  font-size:13.5px; color:var(--ink-3); background:#fff;
  transition:background .18s, border-color .18s;
}
.bk:hover{background:#F2F5F6; border-color:#B4BEC4; color:var(--ink-3);}
.sgb-crumb{padding:12px var(--pad) 0; font-size:13px; color:var(--mut-2);}
.sgb-crumb a{color:var(--mut-2);}
.sgb-crumb a:hover{color:var(--teal);}
.sgb-crumb .sep{margin:0 7px; color:var(--mut-4);}

/* ==========================================================================
   5. 칩 · 배지 · 카드
   ========================================================================== */
.chip{display:inline-block; font-size:12px; font-weight:600; color:var(--teal); background:var(--teal-t); padding:4px 10px; border-radius:var(--r-s);}
.chipo{display:inline-block; font-size:12px; font-weight:600; color:var(--oran); background:var(--oran-t); padding:4px 10px; border-radius:var(--r-s);}
.chipg{display:inline-block; font-size:12px; color:var(--mut); background:var(--line-2); padding:4px 10px; border-radius:var(--r-s);}
.pc{transition:transform .2s, box-shadow .2s, border-color .2s;}
.pc:hover{transform:translateY(-4px); box-shadow:0 10px 22px rgba(16,20,24,.08); border-color:#C9D2D6;}
.card{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:#fff;}
.row{transition:background .18s;}
.row:hover{background:var(--bg-2);}

/* 숫자 롤업 */
@property --labn{syntax:'<integer>'; initial-value:0; inherits:false;}
.roll::after{content:counter(labn); counter-reset:labn var(--labn);}

/* ==========================================================================
   6. 섹션 제목
   ========================================================================== */
.sgb-sec{display:flex; justify-content:space-between; align-items:baseline; padding-bottom:16px; border-bottom:1px solid var(--line);}
.sgb-sec h2,.sgb-sec .t{font-size:19px; font-weight:700; letter-spacing:-.02em; margin:0;}
.sgb-sec .more{font-size:14px; color:var(--teal);}

/* ==========================================================================
   7. 글 상세
   ========================================================================== */
.sgb-article-grid{display:grid; grid-template-columns:268px minmax(0,1fr); gap:44px; padding:0 var(--pad);}
.sgb-rail{position:sticky; top:24px; align-self:start; padding-top:112px;}

.sgb-toc{border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; background:#fff;}
.sgb-toc-t{font-size:13px; font-weight:700; color:var(--ink); letter-spacing:.02em; margin-bottom:12px;}
.sgb-toc ol{list-style:none; margin:0; padding:0;}
.sgb-toc li{margin:0 0 8px;}
.sgb-toc a{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px;
  font-size:13.5px; line-height:1.55; color:var(--ink-3); align-items:baseline;
}
.sgb-toc a:hover,.sgb-toc a.is-on{color:var(--teal);}
.sgb-toc a:hover .tx,.sgb-toc a.is-on .tx{font-weight:600;}

/* 계층 번호 — 1 / 1-1 / 1-1-1 */
.sgb-toc .no{
  font-size:11.5px; font-weight:600; color:var(--mut-3);
  font-variant-numeric:tabular-nums; letter-spacing:.01em; white-space:nowrap;
  padding-top:1px;
}
.sgb-toc a:hover .no,.sgb-toc a.is-on .no{color:var(--teal);}

/* 단계별 들여쓰기와 안내선 */
.sgb-toc .lv2{margin-top:12px;}
.sgb-toc .lv2:first-child{margin-top:0;}
.sgb-toc .lv2 > a{font-size:14px; color:var(--ink);}
.sgb-toc .lv2 > a .no{font-size:12px; color:var(--teal); font-weight:700;}
.sgb-toc .lv3{padding-left:11px; border-left:1px solid var(--line-2); margin-left:2px;}
.sgb-toc .lv3 > a{font-size:13px; color:var(--mut);}
.sgb-toc .lv4{padding-left:23px; border-left:1px solid var(--line-2); margin-left:2px;}
.sgb-toc .lv4 > a{font-size:12.5px; color:var(--mut-2);}

.sgb-advisor{border:1px solid var(--line); border-radius:var(--r); padding:20px; margin-top:18px; background:var(--bg-3);}
.sgb-advisor .ph{width:64px; height:64px; border-radius:50%; background:var(--line-2); object-fit:cover;}
.sgb-advisor .nm{font-size:16px; font-weight:700; margin-top:11px;}
.sgb-advisor .yr{font-size:12.5px; color:var(--mut-2); margin-top:3px;}
.sgb-advisor .bio{font-size:13px; color:var(--mut); line-height:1.7; margin-top:9px;}
.sgb-advisor .cnt{font-size:12.5px; color:var(--mut-2); margin-top:8px; padding-top:8px; border-top:1px solid var(--line-2);}
.sgb-advisor .more{display:block; margin-top:9px; font-size:13px; color:var(--teal);}
.sgb-advisor .tel{display:block; margin-top:14px; text-align:center; background:var(--teal); color:#fff; font-size:14.5px; font-weight:600; padding:10px; border-radius:5px;}
.sgb-advisor .tel:hover{background:var(--teal-d); color:#fff;}

.sgb-body{min-width:0;}
.sgb-h1{font-size:34px; font-weight:700; line-height:1.4; letter-spacing:-.035em; margin:0 0 16px;}
.sgb-byline{font-size:14px; color:var(--mut); line-height:1.7; padding-bottom:20px; border-bottom:1px solid var(--line-2);}
.sgb-byline b{color:var(--ink); font-weight:600;}

/* 슬롯 — 한 줄 답 */
.sgb-snippet{
  border-left:3px solid var(--teal); background:var(--teal-t);
  padding:18px 22px; margin:26px 0 24px; border-radius:0 var(--r) var(--r) 0;
  font-size:17px; font-weight:600; line-height:1.7; letter-spacing:-.02em; color:#0B3B34;
}

/* 슬롯 — 정보 박스 */
.sgb-infobox{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:26px 0;}
.sgb-infobox .b{border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; background:var(--bg-3);}
.sgb-infobox .lb{font-size:12.5px; font-weight:600; color:var(--mut-2); letter-spacing:.02em;}
.sgb-infobox .vl{font-size:20px; font-weight:700; margin-top:6px; letter-spacing:-.02em; color:var(--ink);}

/* 슬롯 — 이 글의 핵심 (스테퍼) */
.sgb-summary{border:1px solid var(--line); border-radius:var(--r); padding:24px 26px; margin:28px 0; background:#fff;}
.sgb-summary-t{font-size:15px; font-weight:700; margin-bottom:18px;}
.sgb-steps{display:grid; gap:0;}
.sgb-step{display:grid; grid-template-columns:34px minmax(0,1fr); gap:14px; position:relative; padding-bottom:18px;}
.sgb-step:last-child{padding-bottom:0;}
.sgb-step::before{content:''; position:absolute; left:16.5px; top:32px; bottom:0; width:1px; background:var(--line);}
.sgb-step:last-child::before{display:none;}
.sgb-step .n{width:34px; height:34px; border-radius:50%; border:1.5px solid var(--teal); color:var(--teal); background:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; position:relative; z-index:1;}
.sgb-step .lb{font-size:15.5px; font-weight:600; letter-spacing:-.02em; padding-top:5px;}
.sgb-step .vl{font-size:14.5px; color:var(--mut); line-height:1.7; margin-top:4px;}
.sgb-step .nt{font-size:13px; color:var(--mut-2); margin-top:3px;}
.sgb-boxes{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px;}
.sgb-boxes .b{border:1px solid var(--line); border-radius:var(--r); padding:15px 17px;}
.sgb-boxes .lb{font-size:12.5px; font-weight:600; color:var(--teal);}
.sgb-boxes .vl{font-size:15px; margin-top:6px; line-height:1.65;}

/* 슬롯 — 필요한 서류 */
.sgb-docs{border:1px solid var(--line); border-radius:var(--r); padding:22px 24px; margin:28px 0; background:var(--bg-3);}
.sgb-docs-t{font-size:15px; font-weight:700; margin-bottom:14px;}
.sgb-docs ul{list-style:none; margin:0; padding:0;}
.sgb-docs li{position:relative; padding-left:26px; font-size:15.5px; line-height:1.75; margin-bottom:9px;}
.sgb-docs li::before{
  content:''; position:absolute; left:0; top:8px; width:15px; height:15px;
  border:1.5px solid var(--teal); border-radius:3px;
}
.sgb-docs li::after{content:''; position:absolute; left:4px; top:11px; width:7px; height:4px; border-left:1.6px solid var(--teal); border-bottom:1.6px solid var(--teal); transform:rotate(-45deg);}

/* 슬롯 — FAQ */
.sgb-faq{margin:34px 0 0;}
.sgb-faq-t{font-size:19px; font-weight:700; letter-spacing:-.02em; padding-bottom:14px; border-bottom:1px solid var(--line);}
.sgb-faq details{border-bottom:1px solid var(--line-2); padding:0;}
.sgb-faq summary{
  list-style:none; cursor:pointer; padding:17px 34px 17px 0; position:relative;
  font-size:16px; font-weight:600; line-height:1.6; letter-spacing:-.02em;
}
.sgb-faq summary::-webkit-details-marker{display:none;}
.sgb-faq summary::after{
  content:''; position:absolute; right:6px; top:26px; width:9px; height:9px;
  border-right:1.8px solid var(--mut-3); border-bottom:1.8px solid var(--mut-3);
  transform:rotate(45deg); transition:transform .2s;
}
.sgb-faq details[open] summary::after{transform:rotate(-135deg); top:30px;}
.sgb-faq .a{font-size:15.5px; color:var(--ink-3); line-height:1.8; padding:0 0 18px;}

/* 읽은 시간 */
.sgb-readtime{border:1px solid var(--line); border-radius:var(--r); padding:20px 22px; margin:32px 0; background:var(--bg-3); font-size:14px; color:var(--mut); line-height:1.8;}
.sgb-readtime .big{font-size:17px; font-weight:700; color:var(--ink);}
@property --tsec{syntax:'<integer>'; initial-value:0; inherits:false;}
@keyframes ktsec{from{--tsec:0} to{--tsec:59}}
.tsec::after{content:counter(s); counter-reset:s var(--tsec); animation:ktsec 60s steps(60) infinite;}
@property --tmin{syntax:'<integer>'; initial-value:0; inherits:false;}
@keyframes ktmin{from{--tmin:0} to{--tmin:30}}
.tmin::after{content:counter(m); counter-reset:m var(--tmin); animation:ktmin 1800s steps(30) infinite;}

/* 읽은 시간 — 실시간 카운터 */
.sgb-elapsed{margin-top:8px; font-size:14px; color:var(--ink-3);}
.sgb-elapsed b{color:var(--teal); font-variant-numeric:tabular-nums;}

/* 모바일 접이식 목차 — 데스크톱에서는 숨김 */
.sgb-toc-m{display:none;}

/* 필자 박스 · AI 안내 · 업데이트 이력 · 출처 */
.sgb-authorbox{display:flex; gap:18px; border:1px solid var(--line); border-radius:var(--r); padding:22px 24px; margin:32px 0; background:#fff;}
.sgb-authorbox img{width:64px; height:64px; border-radius:50%; flex-shrink:0; background:var(--line-2); object-fit:cover;}
.sgb-note{border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; margin:20px 0; background:var(--bg-2); font-size:13.5px; color:var(--mut); line-height:1.85;}
.sgb-note b{color:var(--ink-3);}
.sgb-sources{margin:28px 0;}
.sgb-sources-t{font-size:15px; font-weight:700; margin-bottom:12px;}
.sgb-sources ol{margin:0; padding-left:20px;}
.sgb-sources li{font-size:14px; line-height:1.8; color:var(--ink-3); margin-bottom:6px;}
.sgb-sources .dt{color:var(--mut-2); font-size:13px;}

/* 본문 타이포 */
.sgb-content{font-size:17px; line-height:1.95; color:var(--ink);}
.sgb-content > *:first-child{margin-top:0;}
.sgb-content h2{font-size:24px; font-weight:700; line-height:1.45; letter-spacing:-.03em; margin:44px 0 16px; scroll-margin-top:112px;}
.sgb-content h3{font-size:19.5px; font-weight:700; line-height:1.5; letter-spacing:-.02em; margin:32px 0 12px; scroll-margin-top:112px;}
.sgb-content h4{font-size:17px; font-weight:600; line-height:1.55; margin:24px 0 10px; color:var(--ink-2); scroll-margin-top:112px;}
.sgb-content p{margin:0 0 20px;}
.sgb-content ul,.sgb-content ol{margin:0 0 22px; padding-left:22px;}
.sgb-content li{margin-bottom:9px;}
.sgb-content blockquote{margin:26px 0; padding:16px 22px; border-left:3px solid var(--mut-4); background:var(--bg-2); color:var(--ink-3); font-size:16px;}
.sgb-content blockquote p:last-child{margin-bottom:0;}
.sgb-content table{margin:26px 0; font-size:15.5px;}
.sgb-content th,.sgb-content td{border:1px solid var(--line); padding:11px 14px; text-align:left; vertical-align:top;}
.sgb-content th{background:var(--line-2); font-weight:600; white-space:nowrap;}
.sgb-tablewrap{overflow-x:auto; margin:26px 0;}
.sgb-tablewrap table{margin:0;}
.sgb-content figure{margin:30px 0;}
.sgb-content figcaption{font-size:13.5px; color:var(--mut-2); line-height:1.7; margin-top:10px;}
.sgb-content a{border-bottom:1px solid rgba(14,107,94,.3);}
.sgb-content a:hover{border-bottom-color:var(--teal);}

/* AI 이미지 배지 */
.sgb-figure{position:relative;}
.sgb-aibadge{
  position:absolute; right:10px; top:10px;
  background:rgba(16,20,24,.72); color:#fff;
  font-size:10.5px; font-weight:700; letter-spacing:.06em;
  padding:3px 7px; border-radius:3px; backdrop-filter:blur(2px);
}

/* 태그 */
.sgb-tags{display:flex; flex-wrap:wrap; gap:8px; margin:28px 0;}

/* 관인 도장 */
.sgb-stamp{
  position:absolute; right:22px; bottom:20px; width:78px; height:78px;
  border:3px solid var(--seal); border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--seal); background:rgba(255,255,255,.88);
  animation:stampIn 6s cubic-bezier(.3,1.4,.4,1) infinite; transform-origin:50% 50%;
}
@keyframes stampIn{
  0%,30%{opacity:0; transform:scale(2) rotate(-24deg);}
  40%{opacity:1; transform:scale(.94) rotate(-9deg);}
  46%{transform:scale(1.05) rotate(-9deg);}
  52%,88%{opacity:1; transform:scale(1) rotate(-9deg);}
  100%{opacity:0; transform:scale(2) rotate(-24deg);}
}
.sgb-stamp .l1{font-size:11.5px; font-weight:700; letter-spacing:.02em;}
.sgb-stamp .ln{width:30px; height:1.4px; background:var(--seal); margin:3px 0;}
.sgb-stamp .l2{font-size:13px; font-weight:700;}

/* ==========================================================================
   8. 아카이브 · 목록
   ========================================================================== */
.sgb-arch-grid{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:40px; padding:32px var(--pad) 0;}
.sgb-postrow{display:block; padding:22px 0; border-bottom:1px solid var(--line-2);}
.sgb-postrow .tt{font-size:19px; font-weight:600; line-height:1.5; letter-spacing:-.02em; color:var(--ink); margin-top:9px;}
.sgb-postrow:hover .tt{color:var(--teal);}
.sgb-postrow .ex{font-size:14.5px; color:var(--mut); line-height:1.7; margin-top:8px;}
.sgb-postrow .mt{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:12px; font-size:13px; color:var(--mut-2);}
.sgb-side .card{padding:20px 22px; margin-bottom:20px;}
.sgb-side-t{font-size:15px; font-weight:700; margin-bottom:14px;}
.sgb-featured{padding:0 var(--pad);}

/* 하위 카테고리 칩 줄 — 「전체」는 고정 */
.sgb-subchips{display:flex; gap:8px; padding:14px var(--pad); border-bottom:1px solid var(--line-2);}
.sgb-subchips .pin{position:sticky; left:0; z-index:2; background:#fff;}

/* 통계 4칸 */
.sgb-stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; padding-top:20px;}

/* 드래그 안내 · 정렬 */
.sgb-sortbar{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:8px var(--pad) 0; flex-wrap:wrap;
}
.sgb-draghint{font-size:12px; color:var(--mut-3);}
.sgb-sort{display:flex; gap:14px; font-size:13px;}
.sgb-sort a{color:var(--mut-2);}
.sgb-sort a:hover{color:var(--ink-3);}
.sgb-sort a.is-on{color:var(--ink); font-weight:600;}
.sgb-sort a.is-on::before{content:'· '; color:var(--teal);}

/* 해당됩니다 / 해당되지 않습니다 */
.sgb-applies{border:1px solid var(--line); border-radius:var(--r); padding:22px 24px; margin:28px 0; background:#fff;}
.sgb-applies-t{font-size:15px; font-weight:700; margin:0 0 16px;}
.sgb-applies-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.sgb-applies .col{border-radius:6px; padding:14px 16px;}
.sgb-applies .col.yes{background:var(--teal-t);}
.sgb-applies .col.no{background:var(--line-2);}
.sgb-applies .hd{font-size:13px; font-weight:700; margin-bottom:9px;}
.sgb-applies .col.yes .hd{color:var(--teal);}
.sgb-applies .col.no .hd{color:var(--mut);}
.sgb-applies ul{list-style:none; margin:0; padding:0;}
.sgb-applies li{position:relative; padding-left:17px; font-size:14.5px; line-height:1.7; margin-bottom:7px; color:var(--ink-3);}
.sgb-applies li:last-child{margin-bottom:0;}
.sgb-applies .col.yes li::before{
  content:''; position:absolute; left:1px; top:9px; width:7px; height:4px;
  border-left:1.8px solid var(--teal); border-bottom:1.8px solid var(--teal); transform:rotate(-45deg);
}
.sgb-applies .col.no li::before{
  content:''; position:absolute; left:1px; top:11px; width:8px; height:1.8px; background:var(--mut-3);
}

/* 페이지네이션 */
.sgb-pager{display:flex; gap:8px; justify-content:center; padding:32px 0;}
.sgb-pager .page-numbers{border:1px solid var(--line); border-radius:5px; padding:8px 14px; font-size:14px; color:var(--ink-3);}
.sgb-pager .page-numbers.current{background:var(--teal); border-color:var(--teal); color:#fff;}

/* 따따부따 홈 블록 — 시안 그대로 */
.sgb-ddabuda{
  margin:38px var(--pad) 0; border:1px solid var(--line); border-radius:var(--r);
  background:var(--bg-2); overflow:hidden;
}
.sgb-ddabuda .hd{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:18px 28px; border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.sgb-ddabuda .ttl{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;}
.sgb-ddabuda .ttl .t{font-size:19px; font-weight:700; letter-spacing:-.02em;}
.sgb-ddabuda .ttl .s{font-size:14px; color:var(--mut-2);}
.sgb-ddabuda .hd .more{font-size:14px; color:var(--teal);}
.sgb-ddabuda .body{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));}
.sgb-ddabuda .pane{padding:24px 28px 28px;}
.sgb-ddabuda .pane.talk{border-left:1px solid var(--line); background:#fff;}
.sgb-ddabuda .badge{display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600;}
.sgb-ddabuda .badge.o{color:var(--oran);}
.sgb-ddabuda .badge.t{color:var(--teal);}
.sgb-ddabuda .pt{
  display:block; font-size:20px; font-weight:700; margin-top:12px;
  letter-spacing:-.02em; line-height:1.45; color:var(--ink);
}
.sgb-ddabuda .pt:hover{color:var(--teal);}
.sgb-ddabuda .ex{font-size:15px; line-height:1.85; color:var(--ink-3); margin:12px 0 0;}
.sgb-ddabuda .by{font-size:13px; color:var(--mut-2); margin-top:14px;}
.sgb-ddabuda .empty{padding:40px 0; text-align:center; color:var(--mut-3); font-size:14px;}

/* 네 컷 미리보기 */
.sgb-ddabuda .cuts{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:16px;
}
.sgb-ddabuda .cut{
  height:112px; background:#fff; border:1px solid var(--line); border-radius:4px;
  overflow:hidden; display:block; animation:cutIn 6s ease-in-out infinite;
}
.sgb-ddabuda .cut img{width:100%; height:100%; object-fit:cover; object-position:top center;}
@keyframes cutIn{
  0%,6%{opacity:.25; transform:translateY(4px);}
  16%,86%{opacity:1; transform:translateY(0);}
  96%,100%{opacity:.25; transform:translateY(4px);}
}
.sgb-ddabuda .peek{display:block; position:relative; margin-top:16px; max-height:260px; overflow:hidden; border:1px solid var(--line); border-radius:4px;}
.sgb-ddabuda .peek img{width:100%; height:auto; display:block;}
.sgb-ddabuda .peek .fade{position:absolute; left:0; right:0; bottom:0; height:80px; background:linear-gradient(to bottom, rgba(250,251,251,0), var(--bg-2));}
.sgb-ddabuda .ft{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  margin-top:14px; padding-top:14px; border-top:1px solid #E4E8EA; flex-wrap:wrap;
}
.sgb-ddabuda .ft span{font-size:13px; color:var(--mut-2);}
.sgb-ddabuda .ft a{font-size:14px; font-weight:600; color:var(--teal);}

/* 지난 글 */
.sgb-ddabuda .past{margin-top:20px; padding-top:16px; border-top:1px solid #E4E8EA;}
.sgb-ddabuda .ph{font-size:13px; font-weight:600; color:var(--mut-2); letter-spacing:.04em; margin-bottom:11px;}
.sgb-ddabuda .past a{display:flex; justify-content:space-between; gap:14px; padding:5px 0;}
.sgb-ddabuda .past .tx{font-size:15px; line-height:1.5; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sgb-ddabuda .past .dt{font-size:13px; color:var(--mut-3); flex-shrink:0;}

/* 홈 히어로 안의 「이 글의 핵심」 */
.sgb-herocore{margin-top:20px; padding-top:18px; border-top:1px solid var(--line-2);}
.sgb-herocore .hd{display:flex; justify-content:space-between; align-items:baseline; gap:12px;}
.sgb-herocore .hd span:first-child{font-size:13px; font-weight:700; color:var(--ink-3);}
.sgb-herocore .nt{font-size:12px; color:var(--mut-3);}
.sgb-herocore .row{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:14px;}
.sgb-herocore .st{text-align:center; position:relative;}
.sgb-herocore .st:not(:last-child)::after{
  content:''; position:absolute; right:-5px; top:15px; width:10px; height:1px; background:var(--teal); opacity:.5;
}
.sgb-herocore .n{
  width:30px; height:30px; margin:0 auto; border-radius:50%;
  border:1.4px solid var(--teal); color:var(--teal); background:#fff;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700;
}
.sgb-herocore .lb{font-size:13.5px; font-weight:600; margin-top:8px; letter-spacing:-.02em; color:var(--ink);}
.sgb-herocore .vl{font-size:12px; color:var(--mut-2); margin-top:3px; line-height:1.5;}

/* 만화 회차 화면 */
.sgb-toon{max-width:860px; margin:0 auto; padding:8px var(--pad) 0;}
.sgb-toon .hd{padding-bottom:20px; border-bottom:1px solid var(--line-2);}
.sgb-toon .badge{display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600; color:var(--oran);}
.sgb-toon .badge .of{margin-left:4px; color:var(--mut-3); font-weight:500;}
.sgb-toon h1{font-size:31px; font-weight:700; line-height:1.4; letter-spacing:-.035em; margin:12px 0 0;}
.sgb-toon .by{font-size:14px; color:var(--mut); margin-top:12px;}
.sgb-toon .lead{font-size:16.5px; line-height:1.9; color:var(--ink-3); margin-top:22px;}
.sgb-toon .lead p{margin:0 0 14px;}
/* 만화 원고 — 컷을 세로로 이어 붙이고, 왼쪽 여백에 컷 번호를 답니다 */
.sgb-toon .strip{margin:26px 0 0; background:#F3F1EC; border:1px solid var(--line); border-radius:var(--r); padding:14px;}
.sgb-toon .strip .cut{position:relative; margin:0 0 14px;}
.sgb-toon .strip .cut:last-child{margin-bottom:0;}
.sgb-toon .strip .cut .no{
  position:absolute; top:10px; left:10px; z-index:2;
  font-size:12px; font-weight:700; color:#fff; background:rgba(16,20,24,.62);
  width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  letter-spacing:0;
}
.sgb-toon .strip figure{margin:0;}
.sgb-toon .strip img{width:100%; height:auto; display:block; border:1px solid var(--line); border-radius:4px; background:#fff;}
.sgb-toon .strip figcaption{
  font-size:13px; color:var(--mut-2); line-height:1.7; margin-top:7px; text-align:center;
}
.sgb-toon .notes .sgb-content h2{
  font-size:20px; font-weight:700; letter-spacing:-.02em; margin:0 0 14px; padding-left:13px;
  border-left:3px solid var(--oran);
}
.sgb-toon .epnav{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:28px 0 0;}
.sgb-toon .epnav a{
  border:1px solid var(--line); border-radius:var(--r); padding:14px 18px; background:#fff;
  transition:border-color .18s, background .18s;
}
.sgb-toon .epnav a:hover{border-color:var(--oran); background:var(--oran-t);}
.sgb-toon .epnav .n{text-align:right;}
.sgb-toon .epnav .l{display:block; font-size:12.5px; font-weight:600; color:var(--oran);}
.sgb-toon .epnav .t{display:block; font-size:14.5px; color:var(--ink-3); margin-top:5px; line-height:1.5;}
.sgb-toon .notes{margin-top:34px; padding-top:24px; border-top:1px solid var(--line);}
.sgb-toon .pair{
  margin-top:32px; border:1px solid #EBD9CC; border-radius:var(--r);
  padding:20px 24px; background:var(--oran-t);
}
.sgb-toon .pair .badge{color:var(--teal); font-size:13px; font-weight:600;}
.sgb-toon .pair .t{display:block; font-size:19px; font-weight:700; line-height:1.45; margin-top:10px; color:var(--ink);}
.sgb-toon .pair p{font-size:15px; line-height:1.8; color:var(--ink-3); margin:9px 0 0;}
.sgb-toon .pair .by{font-size:13px; color:var(--mut-2); margin-top:11px;}

/* ==========================================================================
   9. 푸터
   ========================================================================== */
.sgb-foot{margin-top:48px; border-top:1px solid var(--line); padding:34px var(--pad); background:var(--bg-2);}
.sgb-foot-brand{display:flex; align-items:center; gap:12px;}
.sgb-foot-t1{font-size:11px; font-weight:700; color:var(--mut-2); letter-spacing:.22em;}
.sgb-foot .sgb-wm{font-size:24px; margin-top:2px; color:var(--mut-2);}
.sgb-foot-links{display:flex; flex-wrap:wrap; gap:20px; margin-top:16px; font-size:13.5px;}
.sgb-foot-links a{color:var(--ink-3);}
.sgb-foot-note{margin-top:18px; font-size:12.5px; line-height:1.85; color:var(--mut-2);}

/* ==========================================================================
   10. 반응형 — 태블릿
   ========================================================================== */
@media (max-width:1279px){
  :root{--pad:32px;}
  .sgb-article-grid{grid-template-columns:230px minmax(0,1fr); gap:32px;}
  .sgb-arch-grid{grid-template-columns:minmax(0,1fr) 264px; gap:28px;}
  .sgb-tagline{display:none;}
  .sgb-stats{grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px;}
  .sgb-h1{font-size:30px;}
  .sgb-wm{font-size:30px;}
}

/* ==========================================================================
   11. 반응형 — 모바일
   ========================================================================== */
@media (max-width:1023px){
  :root{--pad:18px;}
  body{font-size:15px;}

  .sgb-head-in{padding:16px var(--pad) 14px;}
  .sgb-wm{font-size:26px;}
  .sgb-brand-t1{font-size:11px;}
  .sgb-search{display:none;}
  .sgb-searchbtn{display:flex;}

  /* 카테고리 — 가로 드래그 */
  .sgb-catnav{padding:12px 0 14px;}
  .sgb-catgrid{
    display:flex; gap:8px; overflow-x:auto; padding:0 var(--pad);
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .sgb-catgrid::-webkit-scrollbar{display:none; width:0; height:0;}
  .icb{flex:0 0 88px; padding:11px 6px 9px;}
  .icb-name{font-size:12px; margin-top:6px;}
  .sgb-tipband{display:none;}

  /* 글 상세 — 한 줄로. 왼쪽 레일은 숨기고 접이식 목차로 대체합니다. */
  .sgb-article-grid{grid-template-columns:minmax(0,1fr); gap:0; padding:0 var(--pad);}
  .sgb-rail{display:none;}
  .sgb-toc-m{
    display:block; border:1px solid var(--line); border-radius:var(--r);
    margin:16px 0 4px; background:var(--bg-3);
  }
  .sgb-toc-m summary{
    list-style:none; cursor:pointer; padding:13px 34px 13px 16px; position:relative;
    font-size:14px; font-weight:700; color:var(--ink);
  }
  .sgb-toc-m summary::-webkit-details-marker{display:none;}
  .sgb-toc-m summary::after{
    content:''; position:absolute; right:16px; top:19px; width:8px; height:8px;
    border-right:1.8px solid var(--mut-3); border-bottom:1.8px solid var(--mut-3);
    transform:rotate(45deg); transition:transform .2s;
  }
  .sgb-toc-m[open] summary::after{transform:rotate(-135deg); top:23px;}
  .sgb-toc-m ol{list-style:none; margin:0; padding:0 16px 14px;}
  .sgb-toc-m li{margin:0 0 8px;}
  .sgb-toc-m a{
    display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px;
    font-size:14px; line-height:1.55; color:var(--ink-3); align-items:baseline;
  }
  .sgb-toc-m .no{
    font-size:11.5px; font-weight:600; color:var(--mut-3);
    font-variant-numeric:tabular-nums; white-space:nowrap; padding-top:1px;
  }
  .sgb-toc-m .lv2{margin-top:11px;}
  .sgb-toc-m .lv2:first-child{margin-top:0;}
  .sgb-toc-m .lv2 > a{color:var(--ink);}
  .sgb-toc-m .lv2 > a .no{font-size:12px; color:var(--teal); font-weight:700;}
  .sgb-toc-m .lv3{padding-left:11px; border-left:1px solid var(--line); margin-left:2px;}
  .sgb-toc-m .lv3 > a{font-size:13.5px; color:var(--mut);}
  .sgb-toc-m .lv4{padding-left:23px; border-left:1px solid var(--line); margin-left:2px;}
  .sgb-toc-m .lv4 > a{font-size:13px; color:var(--mut-2);}
  .sgb-h1{font-size:25px; line-height:1.42; letter-spacing:-.03em;}
  .sgb-content{font-size:16px; line-height:1.9;}
  .sgb-content h2{font-size:20.5px; margin:36px 0 14px;}
  .sgb-content h3{font-size:18px; margin:26px 0 10px;}
  .sgb-content h4{font-size:16px;}
  .sgb-snippet{font-size:16px; padding:16px 18px;}
  .sgb-infobox{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
  .sgb-infobox .vl{font-size:18px;}
  .sgb-summary,.sgb-docs{padding:18px 18px;}
  .sgb-authorbox{flex-direction:column; gap:14px;}

  /* 모바일 전용: 글쓴이 아래 상담 버튼 */
  .sgb-mobile-cta{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:16px 0 4px;}
  .sgb-mobile-cta a{
    text-align:center; padding:11px; border-radius:5px; font-size:14.5px; font-weight:600;
  }
  .sgb-mobile-cta .p{background:var(--teal); color:#fff;}
  .sgb-mobile-cta .s{border:1px solid var(--teal); color:var(--teal);}

  .sgb-arch-grid{grid-template-columns:minmax(0,1fr); gap:0; padding:20px var(--pad) 0;}
  .sgb-side{margin-top:28px;}
  .sgb-foot-links{gap:14px; font-size:13px;}
}
@media (min-width:1024px){
  .sgb-mobile-cta{display:none;}
  .sgb-searchbtn{display:none;}
}

/* ==========================================================================
   12. 접근성 — 애니메이션 줄이기
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important;}
  .pap{opacity:0!important;}
}

/* 인쇄 */
@media print{
  .sgb-head,.sgb-catnav,.sgb-rail,.sgb-foot,.sgb-backbar,.sgb-pager{display:none!important;}
  .sgb-article-grid{grid-template-columns:1fr; padding:0;}
  body{font-size:11pt;}
}