/* 슬롭툰 — 시안 A '호수 목차' 확정판
   화면 성격: Explore(보관함) + 읽기. 랜딩 아님: 히어로·기능 카드·그라데이션 없음.
   종이 #F2EEE5 / 먹 #17171A / 강조 주홍 #B4432C 하나. 제목 Hahmlet, 본문 IBM Plex Sans KR, 번호 Plex Mono. */
:root{
  --paper:#F2EEE5; --paper-2:#EAE5D9; --ink:#17171A; --ink-2:#3A3934; --muted:#736D65;
  --rule:#D6CFBF; --rule-strong:#17171A; --accent:#B4432C;
  --serif:"Hahmlet",serif; --sans:"IBM Plex Sans KR",sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
  --col:min(1120px, 100% - 48px); --gut:168px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;word-break:keep-all;overflow-wrap:anywhere}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
[hidden]{display:none!important}

/* 제호 */
.mast{width:var(--col);margin:0 auto;padding:26px 0 0}
.mast-top{display:flex;justify-content:space-between;gap:16px;font:500 12px/1 var(--mono);letter-spacing:.03em;color:var(--muted);padding-bottom:14px;border-bottom:3px solid var(--rule-strong)}
.mast h1{font:800 clamp(52px,8vw,104px)/.9 var(--serif);letter-spacing:-.04em;padding:18px 0 0}
.lede{font:400 15px/1.6 var(--sans);color:var(--ink-2);margin:16px 0 22px;max-width:30em}
.mast-bar{display:flex;align-items:center;gap:28px;border-top:1px solid var(--rule-strong);border-bottom:1px solid var(--rule-strong);min-height:44px;font:500 14px/1 var(--sans)}
.mast-bar .sect{display:flex;gap:22px}
.mast-bar .sect a[aria-current]{color:var(--accent)}
.mast-bar .sect a:hover{color:var(--accent)}
.genres{display:flex;gap:4px;flex-wrap:wrap}
.genres button{white-space:nowrap;flex:0 0 auto}
.genres button{padding:6px 10px;font-size:13px;color:var(--ink-2);border-radius:2px}
.genres button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.genres button:hover:not([aria-pressed="true"]){color:var(--accent)}
.count{margin-left:auto;font:400 12px/1 var(--mono);color:var(--muted)}

/* 목차 */
.index{width:var(--col);margin:0 auto 104px}
.day{display:grid;grid-template-columns:var(--gut) 1fr;gap:0 40px;padding-top:44px}
.day-h{font:700 15px/1.3 var(--serif);position:sticky;top:22px;align-self:start}
.day-h b{display:block;font:800 44px/1 var(--serif);letter-spacing:-.035em;margin-bottom:8px}
.day-h .n{display:block;font:400 12px/1 var(--mono);color:var(--muted);margin-top:10px}
.list{list-style:none;border-top:1px solid var(--rule-strong)}
.entry{border-bottom:1px solid var(--rule)}
.entry .e-grid{display:grid;grid-template-columns:1fr 132px;gap:32px;padding:24px 0 26px;align-items:start}
.no{font:500 12px/1 var(--mono);color:var(--muted);display:flex;gap:12px;flex-wrap:wrap}
.no{color:var(--ink)}
.no span{color:var(--muted)}
.t{font:700 25px/1.28 var(--serif);letter-spacing:-.02em;margin-top:12px;text-wrap:balance;transition:color .15s}
.h{margin-top:8px;color:var(--ink-2);font-size:15px;line-height:1.55;max-width:34em;text-wrap:pretty}
.meta{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px 16px;font:400 12px/1 var(--mono);color:var(--muted)}
.meta .rec{color:var(--accent)}
.thumb{aspect-ratio:4/5;overflow:hidden;background:#fff;border:1px solid var(--rule)}
.thumb img{width:100%;height:100%;object-fit:cover;object-position:50% 0;filter:saturate(.9) contrast(.98);transition:filter .2s}
.entry:hover .t{color:var(--accent)}
.entry:hover .thumb img{filter:none}
/* 그날의 머리기사: 크게, 그러나 목록 문법 안에서 */
.entry.lead .e-grid{grid-template-columns:1fr 340px;gap:40px;padding:28px 0 32px}
.entry.lead .t{font-size:clamp(30px,3.2vw,40px);line-height:1.16;letter-spacing:-.03em}
.entry.lead .h{font-size:17px;margin-top:12px}
.entry.lead .thumb{aspect-ratio:17/13}
.more{padding:36px 0 0 calc(var(--gut) + 40px);font:600 15px/1 var(--sans)}
.more a{border-bottom:1px solid currentColor;padding-bottom:3px}
.more a:hover{color:var(--accent)}

/* 월별 보관함 */
.months{display:grid;grid-template-columns:var(--gut) 1fr;gap:0 40px;padding-top:44px}
.mlist{list-style:none;border-top:1px solid var(--rule-strong)}
.mlist a{display:flex;justify-content:space-between;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--rule)}
.mlist b{font:700 26px/1 var(--serif);letter-spacing:-.02em}
.mlist span{font:400 13px/1 var(--mono);color:var(--muted)}
.mlist a:hover b{color:var(--accent)}

/* 읽기 */
.r-bar{position:sticky;top:0;z-index:3;background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:saturate(1.2) blur(6px);
  border-bottom:1px solid var(--rule-strong)}
.r-bar{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;height:48px;padding:0 max(24px,(100% - 1120px)/2)}
.r-home{font:800 22px/1 var(--serif);letter-spacing:-.03em}
.r-back{font:500 13px/1 var(--sans);color:var(--ink-2)}
.r-back:hover,.r-home:hover{color:var(--accent)}
.r-head{width:min(760px,100% - 48px);margin:0 auto;padding:44px 0 30px}
.r-title{font:800 clamp(30px,4.4vw,52px)/1.12 var(--serif);letter-spacing:-.035em;margin-top:16px;text-wrap:balance}
.r-sub{margin-top:14px;font-size:18px;color:var(--ink-2);text-wrap:pretty}
.r-meta{margin-top:20px;padding-top:16px;border-top:1px solid var(--rule-strong);display:flex;flex-wrap:wrap;gap:8px 18px;font:400 12px/1 var(--mono);color:var(--muted)}
.r-meta a{margin-left:auto;color:var(--ink);font:600 13px/1 var(--sans);border-bottom:1px solid currentColor;padding-bottom:3px}
.r-meta a:hover{color:var(--accent)}
.strip{width:min(760px,100%);margin:0 auto;background:#fff;box-shadow:0 0 0 1px var(--rule)}
.strip img{width:100%;height:auto}
.r-foot{width:min(760px,100% - 48px);margin:56px auto 0;display:grid;grid-template-columns:1fr 1fr;border-top:3px solid var(--rule-strong)}
.r-foot a{padding:22px 0;display:block}
.r-foot a.newer{text-align:right;border-left:1px solid var(--rule);padding-left:24px;grid-column:2}
.r-foot small{display:block;font:500 12px/1 var(--mono);color:var(--muted);margin-bottom:10px}
.r-foot strong{font:700 19px/1.35 var(--serif);letter-spacing:-.015em}
.r-foot a:hover strong{color:var(--accent)}
.related{width:min(760px,100% - 48px);margin:8px auto 0;border-top:1px solid var(--rule-strong);padding-top:18px}
.related h2{font:500 12px/1 var(--mono);color:var(--muted);letter-spacing:.03em}
.related ul{list-style:none;margin-top:8px}
.related a{display:flex;gap:16px;padding:12px 0;border-bottom:1px solid var(--rule);font:600 16px/1.4 var(--sans)}
.related a span{font:400 12px/1.9 var(--mono);color:var(--muted);flex:none}
.related a:hover{color:var(--accent)}

.foot{width:var(--col);margin:72px auto 0;padding:22px 0 44px;border-top:1px solid var(--rule-strong);font:400 12px/1.7 var(--sans);color:var(--muted);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.reading .foot{width:min(1120px,100% - 48px);margin-top:48px}


/* ── 목록 도구: 갈래 / 정렬 / 보기 ─────────────────────────────── */
.tools{width:var(--col);margin:18px auto 0;display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap}
.tools .genres button{padding:6px 10px;font-size:13px;color:var(--ink-2);border-radius:2px}
.tools .genres button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.tools .genres button:hover:not([aria-pressed="true"]){color:var(--accent)}
.ctrl{display:flex;gap:10px;margin-left:auto}
.seg{display:flex;border:1px solid var(--rule-strong);border-radius:2px;overflow:hidden}
.seg button{padding:7px 12px;font:500 13px/1 var(--sans);color:var(--ink-2)}
.seg button+button{border-left:1px solid var(--rule-strong)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.seg button:hover:not([aria-pressed="true"]){color:var(--accent)}
html:not(.js) .tools{display:none}
/* 보기·정렬 선택: 빌드 때 네 가지 목록을 다 만들어 두고 하나만 보인다 */
.v-board,.by-rec{display:none}
html[data-view="board"] .v-article{display:none}
html[data-view="board"] .v-board{display:block}
html[data-sort="rec"] .by-new{display:none}
html[data-sort="rec"] .by-rec{display:block}
.no time{color:var(--muted)}

/* ── 게시판형: 디시 개념글 목록 문법 ───────────────────────────── */
.b-wrap{padding-top:28px}
.b-tabs{display:flex;align-items:flex-end;gap:12px;border-bottom:2px solid #3b4890}
.b-tabs .on{background:#3b4890;color:#fff;font:700 14px/1 var(--sans);padding:10px 16px 9px;border-radius:3px 3px 0 0}
.b-tabs .b-lab{margin-left:auto;font:400 12px/1 var(--mono);color:var(--muted);padding-bottom:8px}
.b-list{width:100%;border-collapse:collapse;table-layout:fixed;background:#fff;font:400 13px/1.4 var(--sans)}
.b-list col.c1{width:78px} .b-list col.c2{width:92px} .b-list col.c4{width:84px} .b-list col.c5{width:64px} .b-list col.c6{width:56px}
.b-list th{font:500 12px/1 var(--sans);color:#555;padding:11px 6px;border-bottom:1px solid #ccc;background:#fff;text-align:center}
.b-list th.b-tit{text-align:center}
.b-list td{padding:9px 6px;border-bottom:1px solid #eee;text-align:center;color:#555;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-list td.b-no,.b-list td.b-date,.b-list td.b-view,.b-list td.b-rec{font:400 12px/1.4 var(--mono)}
.b-list td.b-cat{color:#666;font-size:12px}
.b-list td.b-tit{text-align:left;color:#222}
.b-list td.b-tit a:hover{text-decoration:underline;text-underline-offset:2px}
.b-list td.b-tit a:visited{color:#770088}
.b-cmt{color:#3b4890;font:700 12px/1 var(--mono);margin-left:5px}
.b-m{display:none}
.b-m .b-src{display:none}
.b-list tr:hover td{background:#f8f8f8}

/* ── 읽기: 헤더 제목 등장, 게시판형 머리, 좌우 이전/다음 ─────────── */
.r-bar-t{min-width:0;font:700 15px/1.2 var(--serif);letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-align:center;opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease;pointer-events:none}
.past-title .r-bar-t{opacity:1;transform:none}
.b-head{display:none}
html[data-view="board"] .reading .a-head{display:none}
html[data-view="board"] .reading .b-head{display:block}
.b-head{width:min(760px,100% - 48px);margin:0 auto;padding:30px 0 0}
.b-title{font:700 20px/1.45 var(--sans);letter-spacing:-.02em;padding-bottom:10px;border-bottom:2px solid #3b4890}
.b-title span{color:#3b4890;font-weight:600}
.b-info{display:flex;flex-wrap:wrap;gap:6px 14px;padding:10px 0;border-bottom:1px solid #ddd;font:400 12px/1.4 var(--mono);color:#666}
.b-info .b-r{margin-left:auto;display:flex;gap:10px;align-items:center}
.b-info .b-r i{width:1px;height:10px;background:#ccc}
.b-src{padding:12px 0 20px;font:500 13px/1 var(--sans)}
.b-src a{color:#3b4890;border-bottom:1px solid currentColor;padding-bottom:2px}
html[data-view="board"] .reading{--paper:#fff}
html[data-view="board"] .reading .strip{box-shadow:none}

.r-foot time{display:block;margin-top:8px;font:400 12px/1 var(--mono);color:var(--muted)}
.related a span{min-width:78px}



/* ── 목록: 카드 전체 클릭 + 원글 보기 ──────────────────────────── */
.entry{position:relative}
.entry .go::after{content:"";position:absolute;inset:0}
.meta .src{position:relative;z-index:1;margin-left:auto;color:var(--ink);font:600 12px/1 var(--sans);border-bottom:1px solid currentColor;padding-bottom:2px}
.meta .src:hover{color:var(--accent)}
.b-src{display:inline;margin-left:8px;font:500 11px/1 var(--sans);color:#888;border:1px solid #ddd;border-radius:2px;padding:2px 5px;vertical-align:1px}
.b-src:hover{color:#3b4890;border-color:#3b4890}

/* ── 바닥글 ───────────────────────────────────────────────────── */
.foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.foot span:last-child{text-align:right}
.foot .fb{font:600 13px/1 var(--sans);color:var(--ink);border-bottom:1px solid currentColor;padding-bottom:3px}
.foot .fb:hover{color:var(--accent)}

/* ── 읽기: 미니 목차 ──────────────────────────────────────────── */
.mtoc{width:min(1120px,100% - 48px);margin:64px auto 0;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;
  border-top:3px solid var(--rule-strong);border-bottom:1px solid var(--rule-strong);padding:22px 0 18px}
.mt-list{list-style:none;display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:4px 2px}
.mt-list::-webkit-scrollbar{display:none}
.mt-list li{flex:0 0 150px;width:150px;min-width:0;scroll-snap-align:center}
.mt-list a{display:block}
.mt-img{display:block;aspect-ratio:16/10;overflow:hidden;background:#fff;border:1px solid var(--rule)}
.mt-img img{width:100%;height:100%;object-fit:cover;object-position:50% 0;filter:saturate(.9)}
.mt-t{display:block;margin-top:8px;font:500 13px/1.35 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt-list time{display:block;margin-top:3px;font:400 11px/1 var(--mono);color:var(--muted)}
.mt-list a:hover .mt-t{color:var(--accent)}
.mt-list a:hover img{filter:none}
.mt-list li.cur .mt-img{border:2px solid var(--accent)}
.mt-list li.cur .mt-t{color:var(--accent);font-weight:700}
.mt-btn{width:44px;height:44px;display:grid;place-items:center;color:var(--ink);border-radius:50%}
.mt-btn:hover{background:var(--paper-2);color:var(--accent)}
.mt-btn:disabled{opacity:.2;cursor:default;background:none}
.mt-btn svg,.jump svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.related{margin-top:28px}

/* ── 읽기: 맨 위 / 맨 아래 ────────────────────────────────────── */
.jump{position:fixed;right:max(20px,(100% - 1120px)/2 - 72px);bottom:28px;z-index:4;display:flex;flex-direction:column;gap:12px}
.jump button{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--paper);color:var(--ink);
  box-shadow:0 2px 10px rgba(23,23,26,.16),0 0 0 1px var(--rule);transition:color .15s,box-shadow .15s}
.jump button:hover{color:var(--accent);box-shadow:0 3px 14px rgba(23,23,26,.22),0 0 0 1px var(--accent)}
html[data-view="board"] .reading .jump button{background:#fff}


/* ── 검색 ─────────────────────────────────────────────────────── */
.a-search{display:flex;align-items:center;border-bottom:1px solid var(--rule-strong);min-width:220px;flex:0 1 280px}
.a-search input{flex:1;min-width:0;border:0;background:none;font:400 14px/1 var(--sans);color:var(--ink);padding:8px 2px;outline:0}
.a-search input::placeholder{color:var(--muted)}
.a-search button,.dc-search button{display:grid;place-items:center}
.a-search svg,.dc-search svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.a-search:focus-within{border-color:var(--ink)}
input[type=search]::-webkit-search-cancel-button{cursor:pointer}
.results{padding-top:24px}
.res-h{font:400 14px/1.5 var(--sans);color:var(--ink-2);padding-bottom:12px;border-bottom:1px solid var(--rule-strong)}
.res-h b{color:var(--ink);font-weight:700}
html.searching .index > .v-article, html.searching .index > .v-board, html.searching .more{display:none}
.res-b{display:none}
html[data-view="board"] .res-a{display:none}
html[data-view="board"] .res-b{display:block}
.results .b-wrap{padding-top:0}

/* ── 게시판형: 디시인사이트 톤(목록·읽기 전체) ─────────────────────
   실측(2026-09-30 gall.dcinside.com): 본문 12px 맑은 고딕/애플 SD, 갤 이름 Nanum Gothic 24px #29367c,
   GNB·탭 #3b4890, 목록 머리선 #29367c 2px, 행 26px·#eee 선, 제목 13px #333, 댓글수 [n] #999. */
.dc-top,.dc-gall{display:none}
html[data-view="board"] body{--paper:#fff;--paper-2:#f3f3f3;--ink:#333;--ink-2:#555;--muted:#999;--rule:#eee;--rule-strong:#ccc;--accent:#29367c;
  --dc:#3b4890;--dc-d:#29367c;--dcf:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",Dotum,sans-serif;
  background:#fff;color:#333;font:400 13px/1.5 var(--dcf)}
html[data-view="board"]{background:#fff}
html[data-view="board"] .mast,html[data-view="board"] .tools .a-search,html[data-view="board"] .r-bar{display:none}
html[data-view="board"] .dc-top{display:block}
html[data-view="board"] .dc-gall{display:block}
.dc-row{width:min(1160px,100% - 32px);margin:0 auto;display:flex;align-items:center;gap:40px;height:78px}
.dc-logo{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.dc-logo b{font:800 28px/1 "Nanum Gothic",var(--dcf);letter-spacing:-.04em;color:#222;font-style:italic}
.dc-logo span{font:700 17px/1 "Nanum Gothic",var(--dcf);color:var(--dc)}
.dc-search{display:flex;width:364px;height:46px;border:3px solid var(--dc);background:#fff}
.dc-search input{flex:1;min-width:0;border:0;padding:0 12px;font:400 14px/1 var(--dcf);color:#333;outline:0}
.dc-search input::placeholder{color:#aaa}
.dc-search button{width:44px;background:var(--dc);color:#fff}
.dc-search svg{width:22px;height:22px;stroke-width:2.4}
.dc-gnb{background:var(--dc);height:46px}
.dc-in{width:min(1160px,100% - 32px);margin:0 auto;height:100%;display:flex;align-items:center;justify-content:space-between}
.dc-links{display:flex;gap:22px}
.dc-links a{font:700 14px/1 var(--dcf);color:#fff}
.dc-links a.on{color:#ffeb3b}
.dc-stat{font:400 13px/1 var(--dcf);color:#fff}
.dc-stat b{color:#ffeb3b;font-weight:700}
.dc-gall{width:min(1160px,100% - 32px);margin:22px auto 0;border-bottom:2px solid var(--dc-d);padding-bottom:12px}
.dc-gall h2{font:700 24px/1.2 "Nanum Gothic",var(--dcf);color:var(--dc-d);letter-spacing:-.03em}
html[data-view="board"] .index,html[data-view="board"] .tools{width:min(1160px,100% - 32px)}
html[data-view="board"] .tools{margin-top:14px}
html[data-view="board"] .seg{border-color:#ccc;border-radius:0}
html[data-view="board"] .seg button{font:400 12px/1 var(--dcf);color:#555;padding:7px 12px}
html[data-view="board"] .seg button+button{border-left-color:#ccc}
html[data-view="board"] .seg button[aria-pressed="true"]{background:var(--dc);color:#fff}
html[data-view="board"] .tools .genres button{font:400 12px/1 var(--dcf);color:#555;border-radius:0;padding:6px 8px}
html[data-view="board"] .tools .genres button[aria-pressed="true"]{background:none;color:var(--dc-d);font-weight:700;text-decoration:underline;text-underline-offset:3px}
html[data-view="board"] .b-wrap{padding-top:16px}
html[data-view="board"] .b-tabs{border-bottom:2px solid var(--dc-d);gap:0}
html[data-view="board"] .b-tabs .on{background:var(--dc);border-radius:0;font:700 15px/1 var(--dcf);padding:11px 20px 10px}
html[data-view="board"] .b-list{font:400 13px/1.4 var(--dcf)}
html[data-view="board"] .b-list th{font:700 12px/1 var(--dcf);color:#333;border-bottom:1px solid var(--dc-d);padding:10px 6px}
html[data-view="board"] .b-list td{font-family:var(--dcf);border-bottom-color:#eee;padding:6px 6px;height:26px;color:#333;font-size:12px}
html[data-view="board"] .b-list td.b-tit{font-size:13px}
html[data-view="board"] .b-list td.b-no,html[data-view="board"] .b-list td.b-date,
html[data-view="board"] .b-list td.b-view,html[data-view="board"] .b-list td.b-rec{font:400 11px/1.4 tahoma,var(--dcf);color:#666}
html[data-view="board"] .b-cmt{color:#999;font:400 11px/1 tahoma,var(--dcf)}
html[data-view="board"] .b-list tr:hover td{background:#f7f7f7}
html[data-view="board"] .empty,html[data-view="board"] .more,html[data-view="board"] .res-h{font-family:var(--dcf);font-size:13px}
html[data-view="board"] .months .day-h b{font:700 18px/1 var(--dcf);color:var(--dc-d)}
html[data-view="board"] .mlist a b{font:700 15px/1 var(--dcf)}
html[data-view="board"] .foot{font-family:var(--dcf);border-top:1px solid #ccc;width:min(1160px,100% - 32px)}
html[data-view="board"] .foot .fb{color:var(--dc-d)}
/* 읽기 — 디시 글 보기 */
html[data-view="board"] .reading .b-head{width:min(1160px,100% - 32px);padding-top:16px}
html[data-view="board"] .b-title{font:700 15px/1.5 var(--dcf);color:#333;border-bottom:0;padding-bottom:6px}
html[data-view="board"] .b-title span{color:#333;font-weight:700}
html[data-view="board"] .b-info{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;border-bottom:1px solid #eee;padding:4px 0 12px;font:400 13px/1 var(--dcf);color:#333}
html[data-view="board"] .b-info time{color:#333}
html[data-view="board"] .b-info .b-r{gap:12px;color:#333}
html[data-view="board"] .b-info .b-r i{background:#ddd}
.b-orig{margin-left:6px;display:inline-flex;align-items:center;height:26px;padding:0 12px;border:1px solid #ccc;border-radius:13px;
  font:400 13px/1 var(--dcf);color:#333;background:#f3f3f3}
.b-orig:hover{border-color:var(--dc);color:var(--dc)}
html[data-view="board"] .reading .strip{width:min(1160px,100% - 32px);margin-top:24px;display:flex;justify-content:center}
html[data-view="board"] .reading .strip img{width:min(760px,100%)}
.b-after{display:none}
html[data-view="board"] .b-after{display:block;width:min(1160px,100% - 32px);margin:40px auto 0}
.b-box{width:min(760px,100%);margin:0 auto;border:1px solid #ccc;padding:22px 20px;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:28px;text-align:center}
.b-box .b-cnt{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:48px}
.b-cnt b{font:400 22px/1 var(--dcf);color:#3b4890}
.b-cnt small{font:400 12px/1 var(--dcf);color:#999}
.b-box p{font:400 13px/1.4 var(--dcf);color:#555}
.b-go-m{display:none}
.b-box p b{color:#d31900;font-weight:700}
.b-go{display:inline-flex;align-items:center;height:42px;padding:0 26px;background:var(--dc);color:#fff;font:700 14px/1 var(--dcf)}
.b-go:hover{background:var(--dc-d)}
html[data-view="board"] .mtoc{width:min(1160px,100% - 32px);border-top:2px solid var(--dc-d);border-bottom:1px solid #ccc;margin-top:40px}
html[data-view="board"] .mt-t{font:400 12px/1.35 var(--dcf);color:#333}
html[data-view="board"] .mt-list time{font:400 11px/1 tahoma,var(--dcf);color:#999}
html[data-view="board"] .mt-list li.cur .mt-img{border-color:var(--dc)}
html[data-view="board"] .mt-list li.cur .mt-t{color:var(--dc-d)}
html[data-view="board"] .mt-img{border-color:#ddd}
html[data-view="board"] .related{width:min(1160px,100% - 32px);font-family:var(--dcf)}
html[data-view="board"] .related h2{font:700 14px/1 var(--dcf);color:var(--dc-d)}
html[data-view="board"] .jump button{border-radius:0;box-shadow:0 0 0 1px #ccc;background:#fff;color:#333}
html[data-view="board"] .jump button:hover{box-shadow:0 0 0 1px var(--dc);color:var(--dc)}


/* ── 공통 줄바꿈 방지(좁은 폰) ─────────────────────────────────── */
.seg button,.genres button,.dc-links a,.dc-stat,.b-cat,.b-m{white-space:nowrap}
.dm-tabs,.dm-list,.dc-cnt,.dc-write{display:none}

/* ── 폰 게시판형 = m.dcinside 구조 (실측 2026-09-30, 402px 뷰포트)
   머리 #29367c / 메뉴 #3b4890 / 갤 이름 17px 700 / 탭 15px 700, 선택 #3b4890 / 말머리 줄 15px
   행: 제목 14px/21px 자간 -1px, 앞 별 아이콘 15px, 정보 12px #999 구분선 1x9 #dfe1ee, 추천 수 #d22227,
   오른쪽 38px 칸 #f9fafc 에 댓글 수 12px #d22227, 방문한 글 #5b4e76 */

/* PC 게시판형 제목 앞 파란 별(디시 개념글 목록과 동일, 관리자님 캡처 2026-09-30) */
.b-list td.b-tit > a:first-child{padding-left:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%235e68a5'/%3E%3Cpath d='M8 3.2l1.4 2.9 3.2.4-2.3 2.2.6 3.2L8 10.4l-2.9 1.5.6-3.2-2.3-2.2 3.2-.4z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 0 50%/15px 15px}

@media (max-width:860px){
  html[data-view="board"] .dc-bar{background:#29367c}
  html[data-view="board"] .dc-row{flex-direction:row;align-items:center;height:52px;padding:0;gap:10px;width:calc(100% - 20px)}
  html[data-view="board"] .dc-logo{flex:0 0 auto}
  html[data-view="board"] .dc-logo b{color:#fff;font-size:19px}
  html[data-view="board"] .dc-logo span{display:none}
  html[data-view="board"] .dc-search{flex:1;width:auto;height:36px;border:0}
  html[data-view="board"] .dc-search input{font-size:14px;padding:0 10px}
  html[data-view="board"] .dc-search button{background:#fff;color:#3b4890;width:40px}
  html[data-view="board"] .dc-gnb{height:40px}
  html[data-view="board"] .dc-in{width:calc(100% - 24px)}
  html[data-view="board"] .dc-links{gap:0;flex:1}
  html[data-view="board"] .dc-links a{font-size:16px;margin-right:26px}
  html[data-view="board"] .dc-stat{font-size:11px;opacity:.9}
  html[data-view="board"] .dc-gall{display:flex;align-items:center;gap:6px;width:100%;margin:0;padding:0 6px 0 12px;height:44px;border-bottom:1px solid #dfe1ee}
  html[data-view="board"] .dc-gall h2{font:700 17px/1 var(--dcf);color:var(--dc-d);letter-spacing:-.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  html[data-view="board"] .dc-gall h2 a{color:var(--dc-d)}
  html[data-view="board"] .dc-cnt{display:inline;font:400 13px/1 var(--dcf);color:#999;flex:0 0 auto}
  html[data-view="board"] .dc-write{display:inline-flex;align-items:center;margin-left:auto;flex:0 0 auto;height:30px;padding:0 10px;
    border:1px solid #3b4890;color:#3b4890;font:700 14px/1 var(--dcf)}
  html[data-view="board"] .dm-tabs{display:flex;border-bottom:1px solid #dfe1ee;background:#fff}
  html[data-view="board"] .dm-tabs > *{flex:1 1 0;min-width:0;height:44px;display:grid;place-items:center;position:relative;
    font:700 15px/1 var(--dcf);color:#000;white-space:nowrap}
  html[data-view="board"] .dm-tabs > * + *::before{content:"";position:absolute;left:0;top:17px;width:1px;height:11px;background:#dfe1ee}
  html[data-view="board"] .dm-tabs [aria-pressed="true"]{color:#3b4890}
  html[data-view="board"] .dm-tabs [aria-pressed="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:#3b4890}
  html[data-view="board"] .dm-tabs button[data-view]{color:#555;font-weight:400;font-size:14px}
  html[data-view="board"] .dm-tabs button[data-view]::after{display:none}
  html[data-view="board"] .tools{width:100%;margin:0;border-bottom:2px solid #dfe1ee;gap:0}
  html[data-view="board"] .tools .ctrl{display:none}
  html[data-view="board"] .tools .genres{width:100%;gap:0;padding:0 6px;height:44px;align-items:center;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  html[data-view="board"] .tools .genres::-webkit-scrollbar{display:none}
  html[data-view="board"] .tools .genres button{font:400 15px/1 var(--dcf);color:#333;padding:0 9px;text-decoration:none;flex:0 0 auto}
  html[data-view="board"] .tools .genres button[aria-pressed="true"]{font-weight:700;color:#000;text-decoration:none}
  html[data-view="board"] .index{width:100%;margin-bottom:60px}
  html[data-view="board"] .v-board .b-wrap,html[data-view="board"] .res-b .b-wrap{display:none}
  html[data-view="board"] .dm-list{display:block;list-style:none}
  .dm-list li{display:flex;border-bottom:1px solid #e3e4ea;min-height:52px}
  .dm-l{flex:1;min-width:0;padding:6px 10px 6px 12px;display:flex;flex-direction:column;justify-content:center;gap:2px}
  .dm-t{font:400 14px/21px var(--dcf);letter-spacing:-1px;color:#000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    padding-left:19px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%235e68a5'/%3E%3Cpath d='M8 3.2l1.4 2.9 3.2.4-2.3 2.2.6 3.2L8 10.4l-2.9 1.5.6-3.2-2.3-2.2 3.2-.4z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 0 3px/15px 15px}
  .dm-l:visited .dm-t{color:#5b4e76}
  .dm-i{display:flex;align-items:center;font:400 12px/18px var(--dcf);color:#999;white-space:nowrap;overflow:hidden}
  .dm-i > span{flex:0 0 auto}
  .dm-i > span + span{position:relative;margin-left:8px;padding-left:9px}
  .dm-i > span + span::before{content:"";position:absolute;left:0;top:5px;width:1px;height:9px;background:#dfe1ee}
  .dm-i em{font-style:normal;color:#d22227}
  .dm-r{flex:0 0 42px;background:#f9fafc;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
  .dm-r b{font:400 12px/18px var(--dcf);color:#d22227}
  .dm-r small{font:400 9px/1 var(--dcf);color:#aaa;letter-spacing:-.3px}
  html[data-view="board"] .results{padding-top:0}
  html[data-view="board"] .res-h{padding:12px;border-bottom:1px solid #dfe1ee}
  /* 폰 게시판형 읽기 = m.dcinside 글 보기 */
  html[data-view="board"] .reading .b-head{width:100%;padding:12px 12px 0}
  html[data-view="board"] .b-title{font:700 17px/1.4 var(--dcf);letter-spacing:-.5px;color:#000;padding-bottom:4px}
  html[data-view="board"] .b-title span{color:#000}
  html[data-view="board"] .b-info{display:block;padding:0;border:0}
  html[data-view="board"] .b-info time{display:block;font:400 13px/1.4 var(--dcf);color:#333;padding:0 0 11px;border-bottom:1px solid #dfe1ee}
  html[data-view="board"] .b-info .b-r{display:flex;align-items:center;gap:0;margin:0;padding:11px 0 0;font:400 13px/1 var(--dcf);color:#555}
  html[data-view="board"] .b-info .b-r i{width:1px;height:10px;background:#dfe1ee;margin:0 8px}
  html[data-view="board"] .b-orig{margin-left:auto;height:26px;padding:0 12px;border-radius:13px;background:#eeeff4;border:1px solid #dfe1ee;
    font:400 13px/1 var(--dcf);color:#333;white-space:nowrap}
  html[data-view="board"] .reading .strip{margin-top:12px;width:calc(100% - 24px)}
  html[data-view="board"] .b-after{width:100%;margin-top:28px}
  html[data-view="board"] .b-box{border:0;flex-direction:row;justify-content:center;align-items:center;gap:16px;padding:6px 0 10px}
  html[data-view="board"] .b-box .b-cnt{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:44px}
  html[data-view="board"] .b-cnt b{font:400 20px/1 var(--dcf);color:#3b4890}
  html[data-view="board"] .b-cnt small{font:400 11px/1 var(--dcf);color:#999}
  html[data-view="board"] .b-go{width:74px;height:74px;padding:0;border-radius:50%;justify-content:center;background:#3b4890;font:700 14px/1 var(--dcf)}
  .b-go-m{display:none}
  html[data-view="board"] .b-go-pc{display:none}
  html[data-view="board"] .b-go-m{display:inline}
}

@media (max-width:860px){
  :root{--col:calc(100% - 36px)}
  .a-search{flex:1 1 100%;order:-1}
  .dc-row{height:auto;padding:10px 0;gap:10px;flex-direction:column;align-items:stretch}
  .dc-logo b{font-size:22px}
  .dc-logo span{font-size:14px}
  .dc-search{width:100%;height:42px}
  .dc-gnb{height:42px}
  .dc-links{gap:18px}
  .dc-stat{font-size:12px}
  .dc-gall{margin-top:14px;padding-bottom:10px}
  .dc-gall h2{font-size:19px}
  html[data-view="board"] .b-list td.b-tit{font-size:15px}
  html[data-view="board"] .b-list tr{padding:10px 4px}
  html[data-view="board"] .b-m{font:400 12px/1.4 var(--dcf);color:#999}
  html[data-view="board"] .reading .b-head{padding-top:12px}
  html[data-view="board"] .b-info .b-r{margin-left:0;width:100%}
  .b-orig{margin-left:auto}
  html[data-view="board"] .reading .strip{width:100%}
  html[data-view="board"] .mtoc{width:100%}

  .mtoc{width:100%;grid-template-columns:1fr;padding:18px 0 14px;border-left:0;border-right:0}
  .mt-btn{display:none}
  .mt-list{padding:4px 18px;gap:14px;scroll-padding:0 18px}
  .mt-list li{flex-basis:128px;width:128px}
  .jump{right:14px;bottom:18px;gap:10px}
  .jump button{width:42px;height:42px}
  .foot{grid-template-columns:1fr;justify-items:center;text-align:center;gap:10px}
  .foot span:last-child{text-align:center}
  .meta .src{margin-left:0}
  .b-tit > .b-src{display:none}
  .b-m .b-src{display:inline;margin-left:6px}

  .tools{margin-top:14px}
  .tools .genres{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;width:100%}
  .ctrl{margin-left:0;width:100%}
  .seg{flex:1}
  .seg button{flex:1;padding:7px 6px}
  .r-bar{gap:12px}
  .r-bar-t{font-size:14px;text-align:left}
  .b-head{width:calc(100% - 36px);padding-top:18px}
  .b-title{font-size:17px}
  .b-list colgroup,.b-list thead{display:none}
  .b-list,.b-list tbody,.b-list tr{display:block;width:100%}
  .b-list tr{padding:11px 4px;border-bottom:1px solid #eee}
  .b-list td{display:none;border:0;padding:0}
  .b-list td.b-tit{display:block;white-space:normal;font-size:15px;line-height:1.45}
  .b-m{display:block;margin-top:5px;font:400 12px/1.3 var(--mono);color:#888}

  .mast{padding-top:18px}
  .mast-top span:last-child{display:none}
  .mast h1{font-size:64px;padding-top:14px}
  .lede{font-size:14px;margin:12px 0 18px}
  .mast-bar{gap:18px;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
  .count{display:none}
  .day,.months{grid-template-columns:1fr;padding-top:30px}
  .day-h{position:static;display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
  .day-h b{font-size:30px;margin:0}
  .day-h .n{margin:0}
  .entry .e-grid{grid-template-columns:1fr 92px;gap:16px;padding:18px 0 20px}
  .t{font-size:19px;margin-top:10px}
  .h{font-size:14px}
  .meta{margin-top:10px}
  .entry.lead .e-grid{grid-template-columns:1fr;gap:0}
  .entry.lead .thumb{order:-1;aspect-ratio:17/12;margin:0 0 16px}
  .entry.lead .t{font-size:26px}
  .entry.lead .h{font-size:15px}
  .more{padding-left:0}
  .r-bar{padding:0 18px}
  .r-head{width:calc(100% - 36px);padding:26px 0 22px}
  .r-sub{font-size:16px}
  .strip{box-shadow:none}
  .r-foot,.related,.reading .foot{width:calc(100% - 36px)}
  .r-foot{grid-template-columns:1fr}
  .r-foot a.newer{grid-column:1;grid-row:1;text-align:left;border-left:0;padding-left:0;border-bottom:1px solid var(--rule)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* 갤 제목 표식(ⓜ·별) — 실제 디시 갤 제목 표기 참고 */
.dc-gall .g-ico{display:inline-flex;align-items:center;gap:.18em;margin:0 .1em 0 .28em;vertical-align:middle;position:relative;top:-.08em}
.dc-gall .g-m,.dc-gall .g-star{width:.8em;height:.8em;display:block}
.dc-gall .g-m circle{fill:none;stroke:currentColor;stroke-width:1.6}
.dc-gall .g-m text{fill:currentColor;font:700 9.5px/1 Arial,Helvetica,sans-serif}
.dc-gall .g-star rect{fill:currentColor}
.dc-gall .g-star path{fill:#fff}