:root{
  --bg:#0A0A0A; --ink:#FFFFFF; --muted:#8C8C8C; --line:#262626; --rule:#FFFFFF; --panel:#141414;
  --pink:#FDAFD0;
  --k0:#FF6B52; --k1:#F5C04E; --k2:#4FC3A8; --k3:#7FA2FF; --k4:#E889BC;
  --sans:"Arimo","Helvetica Neue",Helvetica,"Noto Sans KR",Arial,sans-serif;
  --kr:"Pretendard Variable",Pretendard,"Noto Sans KR","Helvetica Neue",Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 var(--sans);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:inherit;text-decoration:none}
a:hover .t,a:hover h3,a:hover h4{text-decoration:underline;text-underline-offset:4px}
a:focus-visible,input:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1180px;margin:0 auto}
.c0{--k:var(--k0)}.c1{--k:var(--k1)}.c2{--k:var(--k2)}.c3{--k:var(--k3)}.c4{--k:var(--k4)}

.util{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:9px 0;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line)}
.util a:hover{color:var(--ink)}
.util .l,.util .r{display:flex;gap:18px}
.util a.on{color:var(--ink);font-weight:700}
header.top{padding:22px 0 0}
.logo{display:block;text-align:center;font:700 clamp(32px,7vw,68px)/1 var(--sans);letter-spacing:-.06em;text-transform:uppercase;padding-bottom:18px}
nav.main{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 26px;padding:12px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font:700 13px var(--kr);letter-spacing:.02em}
nav.main a:hover{color:var(--muted)}

.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;padding-top:30px}
.kicker{font:700 12px var(--kr);color:var(--pink);letter-spacing:.1em;text-transform:uppercase}
.byline{font-size:12px;color:var(--muted)}
.thumb{background:color-mix(in srgb,var(--k,#777) 30%,#111);aspect-ratio:3/2;overflow:hidden;position:relative}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb b{position:absolute;left:12px;bottom:6px;font:700 clamp(26px,4vw,44px)/1 var(--kr);letter-spacing:-.05em;color:var(--k,#aaa)}

.lead{display:block;padding-bottom:26px;border-bottom:1px solid var(--line)}
.lead .thumb{aspect-ratio:16/9}
.lead .thumb b{font-size:clamp(44px,9vw,110px);left:20px;bottom:10px}
.lead .t{display:block;font:700 clamp(30px,4.6vw,56px)/1.18 var(--kr);letter-spacing:-.04em;margin:16px 0 10px;word-break:keep-all;text-wrap:balance}
.lead p{margin:0 0 8px;color:var(--muted);max-width:62ch}
.feed article a{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:22px;padding:22px 0;border-bottom:1px solid var(--line);align-items:start}
.feed .thumb{aspect-ratio:3/2}
.feed .t{display:block;font:700 21px/1.35 var(--kr);letter-spacing:-.02em;margin:5px 0 6px;word-break:keep-all}
.feed p{margin:0 0 8px;color:var(--muted);font-size:14px}

aside .box{margin-bottom:34px}
aside h2{font:700 13px var(--kr);margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--rule);letter-spacing:.04em}
form.search{display:flex;border:1px solid var(--muted)}
form.search input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:400 15px var(--kr);padding:11px 12px;border-radius:0}
form.search input::placeholder{color:var(--muted)}
form.search button{border:0;background:var(--ink);color:var(--bg);font:700 13px var(--kr);padding:0 16px;cursor:pointer}
.pick{counter-reset:p}
.pick a{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;padding:13px 0;border-bottom:1px solid var(--line)}
.pick a::before{counter-increment:p;content:counter(p);grid-row:1/3;font:700 30px/1 var(--sans);color:var(--muted)}
.pick .t{font:700 15px/1.45 var(--kr);word-break:keep-all}
.en-box{background:var(--pink);color:var(--bg);padding:18px}
.en-box h2{border-color:var(--bg);color:var(--bg)}
.en-box a{display:block;padding:9px 0;border-bottom:1px solid rgba(10,10,10,.25);font-weight:700;font-size:14px;line-height:1.4}
.en-box a:last-child{border-bottom:0}

footer{margin-top:50px;border-top:1px solid var(--rule);padding:26px 0 50px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:24px;font-size:13px}
footer h5{margin:0 0 8px;font:700 12px var(--kr);letter-spacing:.06em}
footer ul{list-style:none;margin:0;padding:0}
footer li{padding:2px 0}
footer a:hover{color:var(--muted)}
footer p{margin:0;color:var(--muted)}

.entry{max-width:700px;margin:48px auto}
.entry h1{font:700 38px/1.3 var(--kr);letter-spacing:-.03em;word-break:keep-all}
.entry-content{font-size:17px;line-height:1.85}
.entry-content a{text-decoration:underline}

@media (max-width:900px){
  .layout,footer{grid-template-columns:1fr}
  .layout{gap:34px}
}
@media (max-width:560px){.feed article a{grid-template-columns:1fr;gap:12px}}

/* 하위 페이지 */
.inner{padding-top:30px;max-width:860px;margin:0 auto}
.archive-head h1{font:700 clamp(30px,4.6vw,52px)/1.2 var(--kr);letter-spacing:-.04em;margin:0 0 10px;padding-bottom:14px;border-bottom:1px solid var(--rule)}
.archive-head .taxonomy-description,.empty{color:var(--muted)}
.entry-img{margin:20px 0}
.entry .byline{margin:0 0 6px}
.entry-content{overflow-wrap:anywhere}
.entry-content h2,.entry-content h3{font-family:var(--kr);letter-spacing:-.02em;line-height:1.35;margin-top:2em}
.entry-content table{display:block;overflow-x:auto;border-collapse:collapse}
.entry-content th,.entry-content td{border:1px solid var(--line);padding:8px 10px}
.entry-content blockquote{margin:1.5em 0;padding-left:16px;border-left:3px solid var(--pink);color:var(--muted)}
.navigation.pagination{margin:34px 0;font:700 13px var(--kr)}
.nav-links{display:flex;gap:6px;flex-wrap:wrap}
.nav-links .page-numbers{padding:6px 12px;border:1px solid var(--line)}
.nav-links .current{background:var(--ink);color:var(--bg)}

/* 부모 테마가 만든 요소 */
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dkh-search{margin:0}
.dkh-search-label{display:block;margin:0 0 8px;font-size:13px;color:var(--muted)}
.dkh-search-row{display:flex;border:1px solid var(--muted)}
.dkh-search-row input[type=search]{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:400 15px var(--kr);padding:11px 12px;border-radius:0}
.dkh-search-row input::placeholder{color:var(--muted)}
.dkh-search-row button{border:0;background:var(--ink);color:var(--bg);font:700 13px var(--kr);padding:0 16px;cursor:pointer}
.inner .box{margin:18px 0 26px}
.side-note{margin:0;color:var(--muted);font-size:14px}
.more{margin:22px 0 0;font:700 14px var(--kr)}
.more a:hover{color:var(--pink)}
.thumb img{display:block}
.dk-comments{margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
.dk-comments input[type=text],.dk-comments textarea{width:100%;background:var(--panel);color:var(--ink);border:1px solid var(--line);padding:10px;font:inherit}
.dk-comments input[type=submit]{background:var(--ink);color:var(--bg);border:0;padding:10px 20px;font-weight:700;cursor:pointer}
.dk-comments a{color:var(--pink)}
.comment-list,.children{list-style:none;padding-left:0}

/* 글 본문 부가 요소 */
.crumb{display:flex;gap:8px;font-size:13px;color:var(--muted);margin-bottom:14px}
.crumb a:hover{color:var(--ink)}
.pill{display:inline-block;border:1px solid var(--muted);padding:5px 14px;font:700 13px var(--kr)}
.pill:hover{background:var(--ink);color:var(--bg);text-decoration:none}
.toc{border:1px solid var(--line);padding:12px 16px;margin:20px 0;background:var(--panel)}
.toc summary{cursor:pointer;font:700 14px var(--kr)}
.toc ol{margin:10px 0 0;padding-left:20px;font-size:14px}
.standards{margin:36px 0;padding:18px 20px;border-left:3px solid var(--pink);background:var(--panel)}
.standards strong{display:block;margin-bottom:6px}
.standards p{margin:0 0 8px;color:var(--muted);font-size:14px}
.standards a{font:700 13px var(--kr);color:var(--pink)}
.related{margin:40px 0 0}
.related h2{font:700 13px var(--kr);margin:0 0 6px;padding-bottom:8px;border-bottom:1px solid var(--rule);letter-spacing:.04em}
.related a{display:block;padding:12px 0;border-bottom:1px solid var(--line)}
.related .t{display:block;font:700 16px/1.45 var(--kr);word-break:keep-all}
.related a:hover .t{text-decoration:underline;text-underline-offset:4px}
.related .all{font:700 13px var(--kr);color:var(--pink);border-bottom:0}
.share{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:30px 0;font-size:14px;color:var(--muted)}
.dkh-share{border:1px solid var(--muted);background:transparent;color:var(--ink);font:700 13px var(--kr);padding:8px 16px;cursor:pointer}
.dkh-share:hover{background:var(--ink);color:var(--bg)}
.note-block{margin:36px 0;padding:22px;border:1px solid var(--line);background:var(--panel)}
.note-block h2{font:700 20px/1.35 var(--kr);margin:0 0 10px}
.note-block h3{font:700 16px var(--kr);margin:18px 0 6px}
.note-block p,.note-block li{color:var(--muted);font-size:15px}
.note-block a{color:var(--pink);text-decoration:underline}
.count{font-size:13px;color:var(--muted);margin:0 0 6px}
h2.sec{margin:34px 0 8px}

/* 영어판 히어로 (밝은 삽화 위에 어두운 글자) */
.khero{position:relative;isolation:isolate;min-height:520px;background:#faf1dc;overflow:hidden;margin-top:-10px}
.khero__art{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;object-position:center right}
.khero__copy{width:55%;max-width:640px;padding:70px 24px 60px 40px;color:#172d29}
.khero__eyebrow{font-size:12px;font-weight:700;letter-spacing:2px;color:#774421;margin:0}
.khero h1{font:700 clamp(40px,5vw,66px)/1.05 Georgia,"Times New Roman",serif;letter-spacing:-.04em;margin:20px 0}
.khero__deck{font-size:18px;line-height:1.55;max-width:400px;margin:0}
.khero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.khero__actions a{display:inline-flex;align-items:center;min-height:46px;padding:10px 20px;border:1px solid #172d29;background:#172d29;color:#fff;font:700 14px var(--sans)}
.khero__actions a+a{background:#f7f2e6;color:#172d29}
.khero__actions a:hover{text-decoration:none;opacity:.88}
.khero-caption{margin:8px 0 0;font-size:12px;color:var(--muted)}
@media (max-width:700px){
  .khero{display:flex;flex-direction:column;min-height:0}
  .khero__copy{width:100%;max-width:none;padding:34px 20px 22px;background:#faf1dc}
  .khero__art{position:static;order:2;height:auto;aspect-ratio:3/2;object-fit:contain}
}

.inner:has(.khero){max-width:none}
.khero{margin-top:0}

/* 상단 고정: 스크롤하면 로고가 작아지며 메뉴와 함께 붙어 있음 */
header.top{position:sticky;top:0;z-index:50;background:var(--bg);padding:14px 0 0}
.admin-bar header.top{top:32px}
@media (max-width:782px){.admin-bar header.top{top:46px}}
@media (max-width:600px){.admin-bar header.top{top:0}}
header.top{overflow-anchor:none}
header.top.is-stuck .logo{font-size:30px;padding-bottom:8px}
header.top.is-stuck nav.main{padding:8px 0}
@media (max-width:700px){header.top.is-stuck .logo{font-size:24px}header.top nav.main{gap:2px 16px;font-size:13px}}
html{scroll-padding-top:120px}
@media (prefers-reduced-motion:reduce){header.top .logo{transition:none}}

/* 댓글: 부모 테마의 밝은 배경용 글자색을 다크에 맞춤 */
.dk-comments,.dk-comments h2,.dk-comments h3,.dk-comments p,.dk-comments label,.dk-comments .comment-notes,.dk-comments .logged-in-as,.dkh-comment-meta strong,.dkh-comment-body,.dkh-comment-body p,.dkh-comment-empty,.dkh-thread-comments .comment-reply-title{color:var(--ink)!important}
.dk-comments .dk-comments-head p,.dkh-comment-empty,.dkh-thread-comments .comment-notes,.dkh-thread-comments .logged-in-as,.dkh-comment-time{color:var(--muted)!important}
.dkh-comment-count,.dkh-comment-avatar,.dkh-editor-badge{background:#262626!important;color:#fff!important}
.dk-comments.dkh-thread-comments{border-top-color:var(--line)!important}
.dkh-comment-card{border-bottom-color:var(--line)!important}
.dkh-thread-comments .children{border-left-color:var(--line)!important}
.dkh-thread-comments input[type=text],.dkh-thread-comments textarea{background:var(--panel)!important;color:var(--ink)!important;border-color:#444!important;border-radius:0!important}
.dkh-thread-comments input[type=submit]{background:var(--ink)!important;color:var(--bg)!important;border-color:var(--ink)!important;border-radius:0!important}
.dkh-comment-actions a{color:var(--pink)!important}

/* 터치 영역 44px, 모바일에서 고정 헤더는 한 줄 스크롤 */
@media (pointer:coarse),(max-width:700px){
  .util a,nav.main a,.crumb a,footer li a,.pill{display:inline-flex;align-items:center;min-height:44px}
  .dkh-search-row input[type=search],.dkh-search-row button,form.search input,form.search button{min-height:44px}
  .nav-links .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
  .toc summary{display:flex;align-items:center;min-height:44px}
  .dkh-share,.lk-chip{min-height:44px}
  .more a{display:inline-flex;align-items:center;min-height:44px}
}
@media (max-width:700px){
  header.top nav.main{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:0 18px;justify-content:flex-start}
  header.top nav.main::-webkit-scrollbar{display:none}
}

.visitbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;justify-content:center;padding:14px 16px;border-top:1px solid rgba(255,255,255,.14);font:500 13px/1.4 "Noto Sans KR",system-ui,sans-serif;color:#aab0c0}
.visitbar[hidden]{display:none}
.visitbar b{color:#fff;font-size:17px;font-weight:700;margin-right:2px}
.vb-spark{display:inline-flex;align-items:flex-end;gap:3px;height:24px}
.vb-spark i{display:block;width:6px;background:#8FC2FF;border-radius:1px}