/* VTOON 블로그 · 시안 A 작업대
   공학용 모눈 위의 명판, 마스킹 테이프, 라벨 테이프. 본문은 모눈 위에 놓인 종이 한 장. */
:root{
  --paper:#E7EAE2; --sheet:#F7F8F3; --ink:#171915; --mute:#585E52; --rule:#C8CDBF; --grid:#DCE0D5;
  --tape:#FFD23A; --blue:#2347DF; --red:#E0442F; --led:#1FBF5B; --hl:#FFF4C2;
  --code-bg:#1D1F1B; --code-ink:#E9EBE4;
  --f-body:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --f-wide:"Archivo","IBM Plex Sans KR",system-ui,sans-serif;
  --gut:clamp(16px,4vw,44px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;word-break:keep-all;overflow-wrap:anywhere;background:var(--paper);color:var(--ink);font:16px/1.65 var(--f-body);-webkit-font-smoothing:antialiased;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px}
img{max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{text-wrap:balance}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
[hidden]{display:none!important}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--sheet);padding:8px 12px;z-index:99}
.skip:focus{left:8px}
.i{width:18px;height:18px;flex:none}
.in{max-width:1240px;margin:0 auto;padding:0 var(--gut)}

/* ---------- 머리 ---------- */
.top{position:sticky;top:0;z-index:30;background:var(--sheet);border-bottom:2px solid var(--ink)}
.top-in{max-width:1240px;margin:0 auto;padding:12px var(--gut);display:flex;align-items:center;gap:18px}
.mark{display:flex;align-items:baseline;gap:10px;text-decoration:none;min-width:0;flex:none}
.mark b{font-family:var(--f-wide);font-variation-settings:"wdth" 125;font-weight:900;font-size:25px;letter-spacing:-.02em;line-height:1;white-space:nowrap}
.mark b i{font-style:normal;color:var(--red)}
.mark span{font:500 12px var(--f-mono);color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav{margin-left:auto;min-width:0}
.nav ul{list-style:none;margin:0;padding:0}
.nav-l1{display:flex;align-items:center;gap:2px}
.nav .mi{position:relative;display:flex;align-items:center}
.nav a{display:flex;align-items:center;gap:5px;text-decoration:none;font:500 14px var(--f-body);padding:7px 9px;border-radius:5px;white-space:nowrap}
.nav a .i{width:13px;height:13px;color:var(--mute)}
.nav-l1 > .mi > a:hover,.nav-l1 > .mi.on > a{background:var(--ink);color:var(--sheet)}
.nav-l1 > .mi.on > a .i{color:var(--sheet)}
.sub-btn{appearance:none;border:0;background:none;padding:4px;margin-left:-6px;cursor:pointer;color:var(--mute);display:grid;place-items:center;border-radius:4px}
.sub-btn .i{width:14px;height:14px}
.nav-l2,.nav-l3{position:absolute;top:100%;left:0;min-width:220px;background:var(--sheet);border:1.5px solid var(--ink);border-radius:8px;padding:6px;box-shadow:5px 5px 0 var(--ink);display:none;z-index:5}
.nav-l3{top:-8px;left:100%;margin-left:6px}
.nav-l2 a,.nav-l3 a{padding:7px 10px;font-size:14px}
.nav-l2 a:hover,.nav-l3 a:hover{background:var(--hl)}
.nav-l2 .mi,.nav-l3 .mi{justify-content:space-between}
.nav-l2 .sub-btn .i{transform:rotate(-90deg)}
.mi.has-kids:hover > ul,.mi.has-kids:focus-within > ul,.mi.open > ul{display:block}
.top-r{display:flex;align-items:center;gap:8px;flex:none}
.social{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.ic{width:34px;height:34px;display:grid;place-items:center;border-radius:6px;color:var(--mute);background:none;border:0;cursor:pointer}
.ic:hover{background:var(--paper);color:var(--ink)}
.kbtn{appearance:none;flex:none;white-space:nowrap;display:flex;align-items:center;gap:7px;font:500 13px var(--f-body);color:var(--ink);border:1.5px solid var(--ink);border-radius:6px;padding:5px 9px;background:var(--sheet);cursor:pointer}
.kbtn .i{width:15px;height:15px}
.kbtn kbd{font:500 11px var(--f-mono);color:var(--mute)}
.menu-btn{display:none;margin-left:auto}

/* ---------- 공통 조각 ---------- */
.eyebrow{font:600 12px var(--f-mono);letter-spacing:.12em;color:var(--mute);display:flex;align-items:center;gap:10px;margin:0}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--red);flex:none}
.btns{display:flex;gap:10px;flex-wrap:wrap}
.btn{appearance:none;font:600 14px var(--f-body);background:var(--ink);color:var(--sheet);padding:11px 18px;border-radius:6px;box-shadow:3px 3px 0 var(--tape);text-decoration:none;border:0;cursor:pointer;display:inline-block}
.btn.ghost{background:var(--sheet);color:var(--ink);border:1.5px solid var(--ink);box-shadow:none;padding:9.5px 16.5px}
.dymo{display:inline-flex;align-items:center;background:var(--ink);color:#F4F5EF;font:700 13px var(--f-mono);letter-spacing:.18em;padding:6px 12px 6px 14px;border-radius:3px;margin:0;box-shadow:inset 0 -2px 0 rgba(255,255,255,.12),0 2px 0 rgba(0,0,0,.15)}
.tape{position:absolute;z-index:2;background:var(--tape);color:var(--ink);font:600 11.5px var(--f-mono);letter-spacing:.04em;padding:4px 12px;transform:rotate(-2.5deg);clip-path:polygon(2% 0,100% 4%,98% 100%,0 96%);box-shadow:0 1px 2px rgba(0,0,0,.12);white-space:nowrap}
.spec{display:inline-flex;flex-wrap:wrap;font:500 12px var(--f-mono);border:1px solid var(--rule);border-radius:5px;overflow:hidden;max-width:100%;background:var(--sheet)}
.spec span{padding:5px 10px;border-right:1px solid var(--rule);white-space:nowrap}
.spec span:last-child{border-right:0}
.spec b{color:var(--mute);font-weight:500;margin-right:5px}
.led{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--led);box-shadow:0 0 0 3px rgba(31,191,91,.22);margin-right:6px;animation:blink 2.4s infinite;vertical-align:middle}
@keyframes blink{50%{opacity:.35}}
.sec{padding-block:26px}
.sec-h{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.sec-h .ln{flex:1;border-top:1.5px dashed var(--rule)}
.sec-h a{font:500 12.5px var(--f-mono);color:var(--mute);text-decoration:none}

/* ---------- 홈 ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:40px;padding-block:56px 44px;align-items:center}
.hero h1{font-weight:700;font-size:clamp(34px,5.4vw,64px);line-height:1.12;letter-spacing:-.035em;margin:16px 0 18px}
.hero h1 em{font-style:normal;background:linear-gradient(transparent 58%,var(--tape) 58% 92%,transparent 92%);padding:0 .08em}
.lede{font-size:17px;color:var(--mute);max-width:46ch;margin:0 0 22px;line-height:1.7}
.plate{position:relative;background:linear-gradient(160deg,#DADDD5,#C5C9BF);border:1.5px solid #8F9488;border-radius:10px;padding:22px 24px 18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 14px 30px -18px rgba(0,0,0,.45);font-family:var(--f-mono);transform:rotate(1.2deg)}
.plate .rv{position:absolute;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#F4F5F1,#8A8F84);box-shadow:0 0 0 1px #7C8176}
.plate .rv:nth-child(1){top:9px;left:9px}.plate .rv:nth-child(2){top:9px;right:9px}.plate .rv:nth-child(3){bottom:9px;left:9px}.plate .rv:nth-child(4){bottom:9px;right:9px}
.plate h2{margin:0 0 12px;font:700 11px var(--f-mono);letter-spacing:.14em;display:flex;justify-content:space-between;border-bottom:1.5px solid #6F7469;padding-bottom:8px}
.plate dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-size:12.5px}
.plate dt{color:#4E5348;letter-spacing:.06em}
.plate dd{margin:0;font-weight:500}
.plate .bc{margin-top:16px;display:flex;align-items:end;gap:12px}
.plate .bc i{flex:1;height:30px;background:repeating-linear-gradient(90deg,#1b1d19 0 2px,transparent 2px 4px,#1b1d19 4px 5px,transparent 5px 8px,#1b1d19 8px 11px,transparent 11px 12px)}
.plate .bc span{font-size:10.5px;letter-spacing:.1em}
.feat{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:30px;background:var(--sheet);border:1.5px solid var(--ink);border-radius:10px;padding:22px;position:relative;box-shadow:6px 6px 0 var(--ink);text-decoration:none;align-items:center}
.feat .tape{top:-12px;left:22px}
.shot{position:relative;display:block}
.shot img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--ink);border-radius:4px}
.shot::before,.shot::after{content:"";position:absolute;width:14px;height:14px;border:1.5px solid var(--red)}
.shot::before{top:-7px;left:-7px;border-right:0;border-bottom:0}
.shot::after{bottom:-7px;right:-7px;border-left:0;border-top:0}
.feat h3{font-size:clamp(22px,2.6vw,30px);line-height:1.3;letter-spacing:-.02em;margin:4px 0 12px}
.feat p{color:var(--mute);margin:0 0 16px;line-height:1.75}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 22px;margin-top:34px}
.cards.three{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0}
.card{background:var(--sheet);border:1.5px solid var(--ink);border-radius:8px;padding:14px 14px 16px;position:relative;display:flex;flex-direction:column;gap:10px;text-decoration:none;transition:transform .15s,box-shadow .15s;min-width:0}
.card:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.card .tape{top:-11px;right:12px;transform:rotate(2deg)}
.card img,.card .noimg{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:3px;border:1px solid var(--rule)}
.card .noimg{display:grid;place-items:center;background:var(--paper);font:700 40px var(--f-wide);color:var(--rule)}
.card h3{margin:0;font-size:16px;line-height:1.45;letter-spacing:-.01em}
.card .m{font:500 11.5px var(--f-mono);color:var(--mute);display:flex;justify-content:space-between;margin-top:auto}
.board-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pj{background:var(--sheet);border:1.5px solid var(--ink);border-radius:8px;padding:18px;display:flex;flex-direction:column;gap:10px;min-width:0}
.pj.big{background:var(--ink);color:var(--sheet)}
.pj .st{font:600 11.5px var(--f-mono);letter-spacing:.06em;display:flex;align-items:center;color:var(--mute)}
.pj.big .st{color:#C2C6BC}
.pj h3{margin:0;font-size:20px;letter-spacing:-.01em}
.pj h3 a{text-decoration:none}
.pj h3 a:hover{text-decoration:underline;text-decoration-color:var(--tape)}
.series{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.series a{display:block;padding:7px 0;border-top:1px solid #34372F;text-decoration:none;font-size:14.5px;color:#E4E6DE}
.series a:hover{color:var(--tape)}
.cats{list-style:none;margin:0;padding:0}
.cats a{display:flex;justify-content:space-between;padding:7px 0;border-top:1px solid var(--grid);text-decoration:none;font-size:15px}
.cats a:hover{color:var(--blue)}
.cats i{font:500 12px var(--f-mono);font-style:normal;color:var(--mute)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags a,.ptags a{font:500 12.5px var(--f-mono);text-decoration:none;border:1px solid var(--rule);border-radius:4px;padding:3px 8px;color:var(--mute);background:var(--sheet)}
.tags a:hover,.ptags a:hover{border-color:var(--ink);color:var(--ink)}
.log{background:var(--sheet);border:1.5px solid var(--ink);border-radius:8px;overflow:hidden}
.log .yr{padding:10px 16px;background:repeating-linear-gradient(90deg,var(--rule) 0 1px,transparent 1px 10px) bottom/100% 6px no-repeat,var(--paper);font:700 13px var(--f-mono);letter-spacing:.1em;border-bottom:1px solid var(--rule)}
.log a{display:grid;grid-template-columns:64px 58px 52px minmax(0,1fr) 50px;gap:12px;padding:10px 16px;border-bottom:1px solid var(--grid);font-size:15px;align-items:baseline;text-decoration:none}
.log a:last-child{border-bottom:0}
.log a:hover{background:var(--hl)}
.log .no{font:500 12px var(--f-mono);color:var(--red)}
.log time,.log .len{font:500 12px var(--f-mono);color:var(--mute)}
.log .c{font:600 11px var(--f-mono);color:var(--blue)}
.log .len{text-align:right}

/* ---------- 글 · 페이지 ---------- */
.doc{max-width:1000px;margin:28px auto 0;background:var(--sheet);border:1.5px solid var(--ink);border-radius:10px;padding:52px clamp(18px,6vw,80px) 44px;position:relative}
.doc-h{position:relative;max-width:760px}
.crumb{font:500 12.5px var(--f-mono);color:var(--mute);display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.crumb a{text-decoration:none}.crumb a:hover{color:var(--ink);text-decoration:underline}
.doc-h .tape{position:relative;display:inline-block;top:0;left:0;margin-bottom:6px}
.doc-h h1{font-size:clamp(28px,4.2vw,44px);line-height:1.25;letter-spacing:-.03em;margin:14px 0 14px}
.dek{font-size:18px;color:var(--mute);margin:0 0 18px;line-height:1.7}
.hero-img{margin:30px 0 0}
.hero-img img{display:block;width:100%;border:1px solid var(--ink);border-radius:6px}
.doc-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;margin-top:34px}
.doc-grid.has-toc{grid-template-columns:minmax(0,1fr) 200px}
.toc{position:sticky;top:96px;align-self:start;font-size:13.5px;border-left:1.5px dashed var(--rule);padding-left:14px}
.toc b{display:block;font:600 11.5px var(--f-mono);letter-spacing:.1em;color:var(--mute);margin-bottom:8px}
.toc a{display:block;padding:4px 0;text-decoration:none;color:var(--mute);line-height:1.45}
.toc a:hover,.toc a.on{color:var(--ink)}
.toc a.on{font-weight:600}
.toc a.d3{padding-left:12px;font-size:13px}

/* 본문 (WordPress 블록 HTML과 Markdown 렌더링 둘 다) */
.prose{font-size:17.5px;line-height:1.9;min-width:0;overflow-wrap:break-word}
.prose > *:first-child{margin-top:0}
.prose p{margin:0 0 1.1em}
.prose h2{font-size:25px;letter-spacing:-.02em;line-height:1.4;margin:1.8em 0 .6em;display:flex;gap:10px;align-items:baseline}
.prose h2::before{content:"§";font:600 18px var(--f-mono);color:var(--red)}
.prose h3{font-size:20px;letter-spacing:-.01em;margin:1.6em 0 .5em}
.prose h4{font-size:17.5px;margin:1.4em 0 .4em}
.prose a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose strong{font-weight:700;background:linear-gradient(transparent 62%,var(--hl) 62%)}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.2em}
.prose li{margin:.3em 0}
.prose li::marker{color:var(--red);font-family:var(--f-mono)}
.prose blockquote,.prose .wp-block-quote{margin:0 0 1.3em;padding:14px 18px;border-left:4px solid var(--ink);background:var(--paper);font-size:17px}
.prose blockquote p:last-child{margin:0}
.prose cite{display:block;font:500 13px var(--f-mono);color:var(--mute);font-style:normal;margin-top:6px}
.prose figure{margin:0 0 1.5em}
.prose img{border-radius:4px;border:1px solid var(--rule)}
.prose figcaption,.prose .wp-element-caption{font:500 12.5px var(--f-mono);color:var(--mute);margin-top:8px;text-align:center}
.prose .aligncenter{margin-left:auto;margin-right:auto;text-align:center}
.prose .aligncenter img{margin:0 auto}
.prose .alignright{float:right;margin:0 0 1em 1.4em;max-width:45%}
.prose .alignleft{float:left;margin:0 1.4em 1em 0;max-width:45%}
.prose .has-text-align-center{text-align:center}
.prose .has-text-align-right{text-align:right}
.prose .tw{overflow-x:auto;border:1.5px solid var(--ink);border-radius:6px;margin:0 0 1.4em;background:var(--sheet)}
.prose .wp-block-table{margin:0 0 1.4em}
.prose .wp-block-table .tw{margin:0}
.prose table{border-collapse:collapse;width:100%;font-size:15px;font-variant-numeric:tabular-nums;min-width:440px}
.prose th,.prose thead td{font:600 12.5px var(--f-mono);letter-spacing:.04em;text-align:left;background:var(--ink);color:var(--sheet);padding:9px 12px}
.prose td{padding:9px 12px;border-top:1px solid var(--rule);vertical-align:top}
.prose code{font:500 .86em var(--f-mono);background:var(--paper);border:1px solid var(--rule);border-radius:4px;padding:.05em .35em}
.prose pre{background:var(--code-bg);color:var(--code-ink);border-radius:8px;padding:16px 18px;overflow-x:auto;font:13.5px/1.7 var(--f-mono);margin:0 0 1.4em}
.prose pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit}
.prose hr,.prose .wp-block-separator{border:0;border-top:1.5px dashed var(--rule);margin:2.2em 0}
.prose .embed,.prose .wp-block-embed__wrapper{position:relative;aspect-ratio:16/9;margin:0 0 1.4em}
.prose .embed iframe,.prose .wp-block-embed__wrapper iframe{position:absolute;inset:0;width:100%;height:100%;border:1.5px solid var(--ink);border-radius:6px}
.prose .wp-block-buttons{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 1.4em}
.prose .wp-block-button__link{display:inline-block;background:var(--ink);color:var(--sheet);text-decoration:none;font:600 15px var(--f-body);padding:11px 18px;border-radius:6px;box-shadow:3px 3px 0 var(--tape)}
.prose .wp-block-file{display:flex;gap:12px;align-items:center;flex-wrap:wrap;border:1.5px solid var(--ink);border-radius:8px;padding:12px 14px;margin:0 0 1.4em}
.prose .wp-block-file__button{background:var(--ink);color:var(--sheet);text-decoration:none;font-size:14px;padding:6px 12px;border-radius:5px}
.prose .wp-block-columns{display:flex;gap:24px;flex-wrap:wrap;margin:0 0 1.2em}
.prose .wp-block-column{flex:1 1 240px;min-width:0}
.prose .wp-block-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.prose .wp-block-gallery figure{margin:0}
.prose::after{content:"";display:block;clear:both}
/* Pygments */
.prose .k,.prose .kn,.prose .kd{color:#FFB86B}.prose .s,.prose .s1,.prose .s2{color:#A7E3A0}.prose .c,.prose .c1,.prose .cm{color:#8A9086}.prose .nf,.prose .nc{color:#8FC7FF}.prose .mi,.prose .mf{color:#F7A8D0}

.ptags{display:flex;flex-wrap:wrap;gap:6px;margin:34px 0 0}
.cmts{margin-top:40px;border-top:1.5px dashed var(--rule);padding-top:26px}
.cmt{padding:14px 0;border-bottom:1px solid var(--grid)}
.cmt b{margin-right:10px}
.cmt time{font:500 12px var(--f-mono);color:var(--mute)}
.cmt p{margin:6px 0 0}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px;padding-top:24px;border-top:1.5px solid var(--ink)}
.pn a{text-decoration:none;min-width:0}
.pn span{display:block;font:500 12px var(--f-mono);color:var(--mute);margin-bottom:4px}
.pn b{font-weight:600;line-height:1.45}
.pn a:hover b{text-decoration:underline;text-decoration-color:var(--tape);text-decoration-thickness:3px}
.pn .nx{text-align:right}
.kids{margin-top:40px}
.kids ol{margin:16px 0 0;padding:0;list-style:none;counter-reset:k;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.kids li{counter-increment:k}
.kids a{display:flex;gap:12px;align-items:baseline;border:1.5px solid var(--ink);border-radius:8px;padding:12px 14px;text-decoration:none;background:var(--sheet)}
.kids a::before{content:counter(k,decimal-leading-zero);font:600 12px var(--f-mono);color:var(--red)}
.kids a:hover{box-shadow:3px 3px 0 var(--ink)}

/* ---------- 목록 ---------- */
.arch-h{padding-block:48px 8px;display:flex;flex-direction:column;gap:6px}
.arch-h h1{font-size:clamp(30px,4.6vw,48px);letter-spacing:-.03em;line-height:1.2;margin:8px 0 0}
.arch-h .count{font:500 13px var(--f-mono);color:var(--mute);margin:0}
.sform{display:flex;gap:8px;margin-top:14px;max-width:520px}
.sform input{flex:1;min-width:0;font:16px var(--f-body);border:1.5px solid var(--ink);border-radius:6px;padding:10px 12px;background:var(--sheet)}
.pager{display:flex;justify-content:space-between;align-items:center;margin:40px 0 10px;font:500 13px var(--f-mono)}
.pager a{text-decoration:none;border:1.5px solid var(--ink);border-radius:6px;padding:8px 14px;background:var(--sheet)}
.pager a:hover{box-shadow:3px 3px 0 var(--ink)}
.empty{padding:40px 0;color:var(--mute)}
.nf{padding-block:70px 40px}
.nf h1{font-size:clamp(30px,5vw,52px);letter-spacing:-.03em;margin:14px 0 12px}

/* ---------- 바닥 ---------- */
.foot{margin-top:60px;border-top:2px solid var(--ink);background:var(--sheet)}
.foot-in{max-width:1240px;margin:0 auto;padding:26px var(--gut) 34px;display:flex;justify-content:space-between;align-items:center;gap:16px 28px;flex-wrap:wrap;font-size:13.5px}
.foot-mark{font-family:var(--f-wide);font-variation-settings:"wdth" 125;font-weight:900;font-size:18px}
.foot p{margin:2px 0 0;font:500 12px var(--f-mono);color:var(--mute)}
.foot nav{display:flex;gap:16px;flex-wrap:wrap}
.foot nav a{text-decoration:none;color:var(--mute)}
.foot nav a:hover{color:var(--ink)}
.foot small{font:500 12px var(--f-mono);color:var(--mute)}

/* ---------- ⌘K 검색 ---------- */
.pal{position:fixed;inset:0;z-index:60;background:rgba(23,25,21,.35);display:flex;justify-content:center;align-items:flex-start;padding:12vh 16px 16px}
.pal-box{width:min(600px,100%);background:var(--sheet);border:1.5px solid var(--ink);border-radius:12px;box-shadow:8px 8px 0 var(--ink);overflow:hidden}
.pal-q{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1.5px solid var(--ink)}
.pal-q input{flex:1;min-width:0;border:0;outline:0;background:none;font:17px var(--f-body);color:var(--ink)}
.pal-q kbd{font:500 11px var(--f-mono);color:var(--mute);border:1px solid var(--rule);border-radius:4px;padding:1px 6px}
.pal-list{max-height:min(60vh,460px);overflow-y:auto;padding:6px}
.pal-list .g{font:600 11px var(--f-mono);letter-spacing:.08em;color:var(--mute);padding:8px 10px 4px}
.pal-list a{display:flex;gap:10px;align-items:baseline;padding:9px 10px;border-radius:6px;text-decoration:none;font-size:15px}
.pal-list a small{margin-left:auto;font:500 11.5px var(--f-mono);color:var(--mute);white-space:nowrap}
.pal-list a.on{background:var(--hl)}
.pal-list mark{background:var(--tape);color:inherit;border-radius:2px;padding:0 1px}
.pal-hint{margin:0;padding:14px 10px;color:var(--mute);font-size:14px}

/* ---------- 반응형 ---------- */
@media (max-width:1500px){ .mark span{display:none} }
@media (max-width:1320px){ .social{display:none} }
@media (max-width:1080px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1000px){
  .menu-btn{display:grid}
  .nav{position:fixed;inset:60px 0 auto 0;background:var(--sheet);border-bottom:2px solid var(--ink);max-height:calc(100vh - 60px);overflow-y:auto;padding:10px var(--gut) 18px;display:none;margin:0}
  .nav.open{display:block}
  .nav-l1{flex-direction:column;align-items:stretch}
  .nav .mi{flex-wrap:wrap}
  .nav .mi > a{flex:1}
  .nav-l2,.nav-l3{position:static;display:none;width:100%;box-shadow:none;border:0;border-left:2px solid var(--rule);border-radius:0;margin:0 0 6px 10px;padding:0 0 0 6px;min-width:0}
  .mi.has-kids:hover > ul,.mi.has-kids:focus-within > ul{display:none}
  .mi.open > ul{display:block!important}
  .nav-l2 .sub-btn .i{transform:none}
  .mi.open > .sub-btn .i{transform:rotate(180deg)}
  .top-r{margin-left:0}
  .kbtn span,.kbtn kbd{display:none}
  .hero,.feat{grid-template-columns:1fr}
  .plate{transform:none}
  .board-grid{grid-template-columns:1fr 1fr}
  .board-grid .big{grid-column:span 2}
  .doc-grid.has-toc{grid-template-columns:minmax(0,1fr)}
  .toc{display:none}
  .cards.three{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .mark span{display:none}
  .cards,.cards.three,.board-grid{grid-template-columns:1fr}
  .board-grid .big{grid-column:auto}
  .log a{grid-template-columns:52px minmax(0,1fr) 40px}
  .log time,.log .c{display:none}
  .doc{border-radius:0;border-inline:0;margin-top:0;padding-top:34px}
  .pn{grid-template-columns:1fr}.pn .nx{text-align:left}
  .prose{font-size:17px}
  .prose .alignright,.prose .alignleft{float:none;max-width:100%;margin:0 0 1em}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* 본문 속 내 글 카드 (WordPress 글 embed) */
.prose .lcard{display:grid;grid-template-columns:160px minmax(0,1fr);gap:16px;align-items:center;border:1.5px solid var(--ink);border-radius:8px;padding:12px;margin:0 0 1.4em;text-decoration:none;color:var(--ink);background:var(--sheet);transition:box-shadow .15s}
.prose .lcard:hover{box-shadow:4px 4px 0 var(--ink)}
.prose .lcard img{width:160px;aspect-ratio:16/10;object-fit:cover;border-radius:4px;margin:0}
.prose .lcard b{display:block;font-size:16.5px;line-height:1.4}
.prose .lcard small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;color:var(--mute);line-height:1.6;margin-top:4px}
.prose .lcard i{display:block;font:500 11.5px var(--f-mono);font-style:normal;color:var(--mute);margin-top:6px}
@media (max-width:600px){.prose .lcard{grid-template-columns:1fr}.prose .lcard img{width:100%}}
.prose .lcard.noimg{grid-template-columns:minmax(0,1fr)}

/* 시리즈 페이지 이동 (실전 영어 대화 01~08 등) */
.series-nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:4px 0 16px}
.sn-h{font:600 12px var(--f-mono);letter-spacing:.06em;color:var(--mute)}
.series-nav ol{display:flex;gap:4px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.series-nav a{display:grid;place-items:center;min-width:30px;height:30px;padding:0 6px;border:1.5px solid var(--ink);border-radius:5px;text-decoration:none;font:600 12.5px var(--f-mono);background:var(--sheet)}
.series-nav a:hover{background:var(--hl)}
.series-nav a[aria-current]{background:var(--ink);color:var(--sheet)}

/* AdSense 직접 슬롯: 높이를 미리 잡아 둔다 */
.ad{position:relative;margin:28px 0;min-height:120px;border:1.5px dashed var(--rule);border-radius:8px;padding:18px 10px 10px;background:var(--sheet)}
.ad-l{position:absolute;top:4px;left:10px;font:600 10px var(--f-mono);letter-spacing:.14em;color:var(--mute)}
.ad-home_infeed{min-height:150px}
.prose .ad{margin:1.6em 0}
.prose .ad-post_mid{min-height:200px}
/* 자동 광고가 넣는 요소가 레이아웃을 넘치지 않도록 */
.google-auto-placed{max-width:100%;overflow:hidden}

/* 동영상 (wp-block-video: 실전 영어 대화의 세로 영상 1080×1920 등) */
.prose video{display:block;max-width:100%;width:auto;height:auto;max-height:78vh;margin:0 auto;border-radius:6px;border:1.5px solid var(--ink);background:#000}
.prose .wp-block-video{margin:0 0 1.5em;text-align:center}
.prose iframe{max-width:100%}

/* WordPress 소셜 링크 블록 */
.prose .wp-block-social-links{display:flex;gap:8px;flex-wrap:wrap;list-style:none;padding:0;margin:0 0 1.4em}
.prose .wp-block-social-links li::marker{content:none}
.prose .wp-social-link a{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--ink);border-radius:6px;padding:7px 12px;text-decoration:none;color:var(--ink);font:500 14px var(--f-body);background:var(--sheet)}
.prose .wp-social-link a:hover{box-shadow:3px 3px 0 var(--ink)}
.prose .wp-social-link svg{width:18px;height:18px}

.series .eps{display:flex;flex-wrap:wrap;gap:4px;padding:2px 0 10px}
.series .eps a{display:grid;place-items:center;min-width:28px;height:28px;padding:0;border:1px solid #4a4e44;border-radius:4px;font:600 12px var(--f-mono);color:#E4E6DE}
.series .eps a:hover{background:var(--tape);color:var(--ink);border-color:var(--tape)}

.preview-bar{position:sticky;top:0;z-index:40;background:#6A4CF2;color:#fff;text-align:center;font:600 13px var(--f-body);padding:7px 12px}

/* 작업 현황 (VNote '기록 현황'과 같은 구성) */
.st-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.st-heat{grid-column:1/-1}
.st-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.st-h b{font-size:16px}
.st-h span{font:500 12px var(--f-mono);color:var(--mute)}
.hm-scroll{overflow-x:auto;padding-bottom:4px}
.hm{display:inline-flex;flex-direction:column;gap:4px;min-width:max-content}
.hm-m{display:flex;gap:3px;font:500 10.5px var(--f-mono);color:var(--mute);height:14px}
.hm-m span{width:13px;white-space:nowrap;overflow:visible}
.hm-g{display:flex;gap:3px}
.hm-w{display:flex;flex-direction:column;gap:3px}
.hm-c{width:13px;height:13px;border-radius:2px;display:block;background:var(--grid)}
.hm-c.out{background:transparent}
.hm-c.l1{background:#FFE89A}.hm-c.l2{background:#FFD23A}.hm-c.l3{background:#E0A800}.hm-c.l4{background:var(--ink)}
a.hm-c:hover{outline:2px solid var(--red);outline-offset:1px}
.hm-leg{display:flex;gap:4px;align-items:center;justify-content:flex-end;font:500 11px var(--f-mono);color:var(--mute)}
.pop{list-style:none;margin:0;padding:0}
.pop a{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:8px 0;border-top:1px solid var(--grid);text-decoration:none}
.pop li:first-child a{border-top:0}
.pop a:hover .tt{text-decoration:underline;text-decoration-color:var(--tape);text-decoration-thickness:3px}
.pop .rk{font:700 13px var(--f-mono);color:var(--red)}
.pop .tt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14.5px}
.pop .vw{font:500 12px var(--f-mono);color:var(--mute)}
.vis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0}
.vis div{border:1px solid var(--rule);border-radius:6px;padding:8px 10px;background:var(--paper)}
.vis dt{font:600 11px var(--f-mono);letter-spacing:.06em;color:var(--mute)}
.vis dd{margin:2px 0 0;font:700 20px var(--f-mono);font-variant-numeric:tabular-nums}
.bars{display:flex;align-items:flex-end;gap:2px;height:90px;border-bottom:1.5px solid var(--ink);margin-top:6px}
.bars span{flex:1;background:var(--ink);min-height:2px;border-radius:2px 2px 0 0}
.bars span:last-child{background:var(--red)}
.bars span:hover{background:var(--tape)}
.bars-x{display:flex;justify-content:space-between;font:500 11px var(--f-mono);color:var(--mute)}
@media (max-width:860px){.st-grid{grid-template-columns:1fr}}