:root{
  --ground:#FFFFFF; --panel:#FFFFFF; --surface:#F5F7FA; --ink:#10161F; --ink-soft:#3E4956;
  --ink-faint:#616C7A; --accent:#1B5FB8; --accent-soft:#E8F0FC;
  --rule:#DDE2E9; --rule-soft:#EFF1F5; --archive:#5E6877; --archive-bg:#E7ECF1;
  --chip-live:#1F6B4E; --chip-live-bg:#D9EEE2;
  --nav-bg:#14417E; --nav-fg:#FFFFFF; --nav-dim:rgba(255,255,255,.72);
  --shadow:0 1px 2px rgba(22,32,46,.05),0 8px 24px -12px rgba(22,32,46,.14);
}
/* 다크 테마 폐지(2026-08-19, 대표님 확정) — 2008~2011년 원문 작성자가 본문에 직접
   박아둔 인라인 검정 글자색(#333333 등, 81건) 위에 다크 배경을 얹으면 CSS로 계속
   덮어써야 하는데 표기 변형이 많아 완전 커버가 불가능하다. 라이트 팔레트 하나만
   남기고, prefers-color-scheme·data-theme 오버라이드는 전부 제거한다. 어떤 환경에서도
   같은 모습이어야 하므로 body 배경은 아래에서 명시적으로 지정한다(투명 금지). */
*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"IBM Plex Sans KR",system-ui,-apple-system,"Malgun Gothic",sans-serif;
  font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
a{color:inherit}

/* ── 사이트 내부(시안 그대로) ── */
.site{max-width:960px;margin:0 auto;padding:0}

/* ── 상단 nav — 진한 파랑 색면(2026-08-19, 이전 4px 액센트 바 판단 철회) ──
   원본 XE gtdlog.com은 상단 메뉴가 파란 색면이었다(사이트 정체성). 2026-08-18엔
   "다크 테마의 밝은 액센트(#6BA6F5) 위 흰 글자가 대비 2.5:1로 미달"이라며 4px 바로만
   정체성을 계승했는데, 그 전제가 틀렸다 — nav 배경은 테마 액센트와 무관하게 고정값으로
   둘 수 있고, 다크 테마 자체도 이제 없다. 그래서 전면 색면으로 되돌린다.
   --nav-bg(#14417E) 위 흰 글자(--nav-fg) 대비 실측 ≈10.1:1 — 요구치 9:1 이상 충족
   (WCAG AAA 7:1도 여유 있게 통과). */
.nav{display:flex;align-items:center;gap:26px;padding:16px 30px;background:var(--nav-bg)}
.brand{font-weight:600;font-size:16.5px;letter-spacing:-.01em;text-decoration:none;color:var(--nav-fg)}
.brand span{color:var(--nav-dim)}
.nav a{font-size:14px;color:var(--nav-dim);text-decoration:none}
.nav a.on{color:var(--nav-fg);font-weight:600;box-shadow:inset 0 -2px 0 var(--nav-fg)}
.nav .sp{flex:1}

/* ── 서브네비(2026-08-18 신설) — 대분류 소속 페이지 상단 형제 링크 바.
   --surface 배경 띠로 만들어 nav 색면 바로 아래에서 층이 생기게 한다(2026-08-19). ── */
.subnav{display:flex;flex-wrap:wrap;gap:4px 8px;padding:13px 30px;
  background:var(--surface);border-bottom:1px solid var(--rule)}
.subnav a{font-size:13px;color:var(--ink-soft);text-decoration:none;padding:5px 10px;
  border-radius:4px;white-space:nowrap}
.subnav a:hover{background:var(--panel);color:var(--ink)}
.subnav a.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
@media(max-width:720px){.subnav{padding:11px 20px}}

.page{display:grid;grid-template-columns:132px minmax(0,1fr);gap:34px;padding:34px 30px 44px}
.page.list{grid-template-columns:minmax(0,1fr)}
@media(max-width:720px){.page{grid-template-columns:1fr;gap:20px;padding:24px 20px 32px}}
.rail{display:flex;flex-direction:column;gap:16px;padding-top:5px}
.rail .item{display:flex;flex-direction:column;gap:2px}
.rail .k{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);font-weight:600}
.rail .v{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
@media(max-width:720px){
  .rail{flex-direction:row;flex-wrap:wrap;gap:8px 22px;padding-bottom:14px;border-bottom:1px solid var(--rule-soft)}
}

.chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  padding:3px 9px;border-radius:3px;letter-spacing:.02em;width:fit-content}
.chip.arc{background:var(--archive-bg);color:var(--archive)}
.chip.live{background:var(--chip-live-bg);color:var(--chip-live)}

/* '>' 직계 자식으로 한정(2026-08-19) — .article h1(후손 선택자)이면 본문(.body) 안에
   사용자가 직접 넣은 <h1>까지 문서 제목 스타일로 덮어써 버려 새로 추가한 .body h1 크기
   위계와 충돌한다. 문서 제목 h1은 .article의 직계 자식이라 '>'로 정확히 그것만 겨냥한다. */
.article > h1{font-size:27px;line-height:1.34;margin:0 0 10px;font-weight:700;letter-spacing:-.012em;text-wrap:balance}
.eol-badge{display:inline-block;margin-left:8px;font-size:11px;font-weight:600;color:var(--archive);
  background:var(--archive-bg);padding:2px 8px;border-radius:3px;vertical-align:middle;letter-spacing:.02em}
.title-mark{display:block;width:44px;height:3px;background:var(--accent);border-radius:2px;margin:0 0 16px}
.byline{display:flex;gap:14px;font-size:13px;color:var(--ink-soft);
  font-family:"IBM Plex Mono",monospace;padding-bottom:18px;border-bottom:1px solid var(--rule-soft);
  font-variant-numeric:tabular-nums;flex-wrap:wrap}

.banner{display:flex;gap:12px;margin:20px 0 4px;padding:11px 0 11px 15px;border-left:2px solid var(--archive)}
.banner p{margin:0;font-size:13.5px;color:var(--ink-soft);line-height:1.6}
.banner p b{color:var(--ink);font-weight:600}

.body{font-family:"Gowun Batang","Nanum Myeongjo",Batang,serif;font-size:17px;line-height:1.8;
  color:var(--ink);max-width:66ch;padding-top:22px}
.body p{margin:0 0 1.1em}
.body a{color:var(--accent);text-underline-offset:3px}
.body img{max-width:100%;height:auto}
.body table{border-collapse:collapse;font-size:15.5px}
.body td,.body th{border:1px solid var(--rule);padding:6px 10px}
/* ── 본문 크기 위계(2026-08-19) — 원문 인라인 font-size(3,734건, 9px~18pt 혼재)는
   tools/03_clean_html.py가 전부 제거한다. 위계가 필요한 자리는 여기 이 스케일 하나로
   통일한다(굵기·색·정렬 등 인라인 강조 의도는 정화 단계에서 보존됨). ── */
.body h1,.body h2{font-size:22px;font-weight:700;margin:1.6em 0 .6em;line-height:1.4}
.body h3,.body h4{font-size:19px;font-weight:700;margin:1.4em 0 .5em;line-height:1.45}
.body h5,.body h6{font-size:17px;font-weight:700;margin:1.2em 0 .4em}
.body pre,.body code{font-size:14.5px}
/* 소개 페이지 스크린샷 — 최신 화면은 크게, 이전 버전은 작게 참고용으로. */
.body img.shot-main{display:block;width:100%;height:auto;margin:4px 0 20px;
  border:1px solid var(--rule);border-radius:4px}
.body img.shot-sub{display:block;width:100%;max-width:400px;height:auto;margin:0 0 8px;
  border:1px solid var(--rule);border-radius:4px;opacity:.9}
.body .ph{display:inline-flex;align-items:center;justify-content:center;
  font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-faint);
  background:var(--rule-soft);border:1px dashed var(--rule);border-radius:3px;
  padding:22px 34px;margin:6px 0}
.body .img-missing{display:inline-flex;align-items:center;
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-faint);
  background:var(--rule-soft);border:1px dashed var(--rule);border-radius:3px;
  padding:3px 9px;margin:2px 0}
.body .trunc{font-family:"IBM Plex Sans KR",sans-serif;font-size:13px;color:var(--ink-faint);font-style:normal}
.body-scroll{overflow-x:auto}

.cmt-head{margin:34px 0 0;padding-top:20px;border-top:1px solid var(--rule);
  font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint);font-weight:600}
.cmt{display:flex;flex-direction:column;gap:5px;padding:16px 0;border-bottom:1px solid var(--rule-soft)}
.cmt.re{margin-left:26px;border-left:2px solid var(--rule);padding-left:16px}
.cmt .who{display:flex;gap:12px;font-size:12.5px;color:var(--ink-faint);font-family:"IBM Plex Mono",monospace}
.cmt .who b{color:var(--ink-soft);font-weight:500}
.cmt .txt{font-family:"Gowun Batang",serif;font-size:15.5px;line-height:1.72;color:var(--ink)}
.cmt .txt p{margin:0 0 .6em}
.cmt-closed{padding:16px 0 0;font-size:13px;color:var(--ink-faint)}

/* ── 목록(시안 그대로) ── */
.list-head{display:flex;align-items:baseline;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.list-head h1{margin:0;font-size:21px;font-weight:600;letter-spacing:-.01em}
.list-head .cnt{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 20px;
  padding:15px 12px;margin:0 -12px;border-bottom:1px solid var(--rule-soft);
  align-items:baseline;border-radius:5px}
/* 홀수/짝수 배경 교차로 행에 리듬을 준다(2026-08-19) — .row는 .article의 직계 <a> 형제뿐이라
   nth-of-type이 정확히 목록행만 센다(.list-head/.pager는 <a> 태그가 아니다). */
.row:nth-of-type(even){background:var(--surface)}
a.row{text-decoration:none;color:inherit}
a.row:hover{background:var(--accent-soft)}
a.row:hover .t{color:var(--accent)}
.row .t{font-size:15.5px;color:var(--ink);font-weight:600;line-height:1.45}
.row .t i{font-style:normal;color:var(--accent);font-family:"IBM Plex Mono",monospace;font-size:12.5px;font-weight:600}
.row .m{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--ink-faint);
  display:flex;gap:16px;font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:720px){.row{grid-template-columns:1fr}}

/* ── 첨부(신규) ── */
.attachments{margin-top:28px;padding-top:18px;border-top:1px solid var(--rule)}
.att-head{margin:0 0 10px;font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint);font-weight:600}
.att-item{display:flex;align-items:baseline;gap:10px;font-size:14px;color:var(--accent);
  text-decoration:none;padding:7px 0;border-bottom:1px solid var(--rule-soft)}
.att-item:hover{text-decoration:underline}
.att-item .att-size{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-faint)}

/* ── 페이지네이션(신규) ── */
.pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-top:26px;margin-top:6px}
.pager a,.pager span{
  font-family:"IBM Plex Mono",monospace;font-size:13px;min-width:30px;height:30px;
  display:inline-flex;align-items:center;justify-content:center;border-radius:4px;
  color:var(--ink-soft);text-decoration:none;padding:0 6px}
.pager a:hover{background:var(--rule-soft);color:var(--ink)}
.pager span.cur{background:var(--accent-soft);color:var(--accent);font-weight:600}
.pager span.disabled{color:var(--ink-faint);opacity:.4}
.pager span.dots{color:var(--ink-faint)}

/* ── 홈(신규) ── */
.home{max-width:760px;margin:0 auto;padding:64px 24px 100px;display:flex;flex-direction:column;gap:56px}
.home .hero h1{font-size:30px;margin:0 0 12px;font-weight:600;letter-spacing:-.01em}
.home .hero p{margin:0;color:var(--ink-soft);font-size:15.5px;line-height:1.7}
.home section h2{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft);
  font-weight:600;margin:0 0 16px}
.home .eco p{margin:0 0 14px;color:var(--ink-soft);font-size:15px;line-height:1.75}
.eco-links{display:flex;gap:12px;flex-wrap:wrap}
/* ── 버튼(2026-08-19) — 흰 배경+얇은 테두리라 버튼처럼 안 보인다는 지적 대응.
   주 버튼(다운로드)=색면, 보조 버튼(앱 소개)=아웃라인. ── */
.btn{display:inline-flex;align-items:center;font-size:14px;font-weight:600;text-decoration:none;
  border-radius:5px;padding:10px 20px;border:1.5px solid transparent;
  transition:background .15s ease,color .15s ease,border-color .15s ease}
.btn-primary{background:var(--accent);color:#FFFFFF;border-color:var(--accent)}
.btn-primary:hover{background:#154E8C;border-color:#154E8C}
.btn-secondary{background:var(--panel);color:var(--accent);border-color:var(--accent)}
.btn-secondary:hover{background:var(--accent-soft)}
/* .btn{display:inline-flex}가 author 규칙이라 [hidden]의 UA display:none보다 우선
   적용되는 함정 — 문의하기 버튼을 hidden 속성으로 숨겼다가 JS가 켜졌을 때만 보이게
   하는 데 이 버튼 클래스를 쓰므로(2026-08-18), 명시적으로 다시 눌러준다. */
.btn[hidden]{display:none !important}
/* ── 「기록보관소」 블록(2026-08-19) — 흰 배경 위에 선만 있어 영역이 안 읽히던 문제 대응.
   --surface 면 + 라운드로 영역을 만든다. ── */
.home section#archive{background:var(--surface);border-radius:6px;padding:30px 28px}
.board-group{margin-bottom:30px}
.board-group:last-child{margin-bottom:0}
.board-group h3{font-size:13.5px;font-weight:600;color:var(--ink-soft);margin:0 0 10px;
  padding-left:10px;border-left:3px solid var(--accent);display:flex;align-items:center;gap:8px}
.board-list{display:flex;flex-direction:column}
.board-list a{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;margin:0 -12px;
  border-bottom:1px solid var(--panel);text-decoration:none;color:var(--ink);font-size:14.5px;
  border-radius:5px}
.board-list a:hover{background:var(--accent-soft);color:var(--accent)}
.board-list .cnt{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--ink-faint);white-space:nowrap;font-variant-numeric:tabular-nums}

/* ── 문의하기(2026-08-18 신규) — 홈 전용 섹션 + 모달. 새 색 없음, 기존 토큰만 재사용.
   danger/에러 전용 색 토큰이 원래 팔레트에 없어 에러는 색 대신 좌측 accent 보더 +
   굵기로, 성공은 기존 --chip-live(원래 '실시간' 칩용, 현재는 미사용)로 구분한다. ── */
.home section.contact p{margin:0 0 14px;color:var(--ink-soft);font-size:15px;line-height:1.75}

.contact-overlay{position:fixed;inset:0;background:rgba(16,22,31,.55);display:flex;
  align-items:center;justify-content:center;padding:20px;z-index:1000}
.contact-overlay[hidden]{display:none !important}
.contact-modal{background:var(--panel);border-radius:8px;max-width:480px;width:100%;
  max-height:90vh;overflow-y:auto;padding:28px;box-shadow:var(--shadow)}
.contact-modal h2{font-size:17px;margin:0 0 18px;font-weight:600;color:var(--ink)}
.contact-field{margin-bottom:16px}
.contact-field label{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:4px}
.contact-field .hint{display:block;font-size:12.5px;font-weight:400;color:var(--ink-faint);margin-top:3px}
.contact-field input[type=email],.contact-field textarea{width:100%;border:1.5px solid var(--rule);
  border-radius:5px;padding:10px 12px;font:inherit;color:var(--ink);background:var(--panel)}
.contact-field input[type=email]:focus,.contact-field textarea:focus{outline:2px solid var(--accent);
  outline-offset:1px;border-color:var(--accent)}
.contact-field textarea{resize:vertical;min-height:120px}
.contact-count{display:block;text-align:right;font-size:12px;color:var(--ink-faint);margin-top:4px}
.contact-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.contact-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
/* #contact-done-wrap도 .contact-actions를 재사용해서 display:flex를 물려받는다 —
   author 규칙이 [hidden]의 UA display:none보다 우선 적용되는 널리 알려진 함정이라
   명시적으로 다시 눌러준다(성공 이전에 "확인" 버튼이 미리 보이는 사고 방지). */
.contact-actions[hidden]{display:none !important}
.contact-status{font-size:13.5px;margin-top:14px;line-height:1.6;display:none}
.contact-status.is-visible{display:block}
.contact-status.is-error{color:var(--ink);font-weight:600;padding-left:10px;border-left:3px solid var(--accent)}
.contact-status.is-success{color:var(--chip-live);font-weight:600}
/* 전송 중에는 '보내기'만 잠근다. 확인 버튼(.contact-done .btn)까지 잠그면
   성공 후 확인을 못 누른다 — 2026-08-19 실사용에서 드러난 결함. */
.contact-modal.is-sending .contact-form .btn-primary{opacity:.6;pointer-events:none}
.contact-modal.is-success .contact-form{display:none}
@media (prefers-reduced-motion:no-preference){
  .contact-overlay{animation:contact-fade .15s ease}
}
@keyframes contact-fade{from{opacity:0}to{opacity:1}}

/* ── 404(신규) ── */
.notfound{max-width:520px;margin:110px auto;text-align:center;display:flex;flex-direction:column;
  gap:16px;padding:0 24px}
.notfound h1{font-size:22px;margin:0}
.notfound p{margin:0;color:var(--ink-soft);font-size:15px}
.notfound .links{display:flex;gap:16px;justify-content:center;margin-top:8px}
.notfound .links a{color:var(--accent);text-decoration:none;font-size:14px}