/* hexagonearth — 첫 화면 말고 나머지 페이지가 함께 쓰는 스타일.
   첫 화면(index.html)은 가장 먼저 뜨는 곳이라 스타일을 안에 넣어 두었다(요청 한 번 절약).
   나머지는 이 파일을 함께 쓴다 — 한 번 받으면 캐시된다. */
:root{
  --mist:#EEF1EB; --ink:#1E2A32; --soft:#5A6B72;
  --card:#FAFBF8; --line:#C9D2CC; --pine:#2E6E5E; --sea:#D9E4E6;
  --clay:#B0553E;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:'IBM Plex Sans','IBM Plex Sans KR',system-ui,sans-serif;
  background:var(--mist);color:var(--ink);line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--pine)}
a:focus-visible,button:focus-visible{outline:2px solid var(--clay);outline-offset:2px}

/* ── 머리띠 ── */
.top{border-bottom:1px solid var(--line);background:var(--card)}
.topin{max-width:1080px;margin:0 auto;padding:11px 22px;
  display:flex;align-items:center;gap:13px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;min-width:0}
.bmark{width:19px;height:22px;flex:none;background:var(--ink);position:relative;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.bmark::after{content:"";position:absolute;inset:4px 3.5px;background:var(--card);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.bname{font-family:'IBM Plex Mono',monospace;font-size:14px;letter-spacing:.24em;
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spacer{flex:1}
.topnav a{font-size:13px;margin-left:15px;text-decoration:none;color:var(--soft)}
.topnav a:hover{color:var(--pine)}

/* ── 글 페이지 ── */
.page{max-width:760px;margin:0 auto;padding:38px 22px 80px}
.page h1{font-family:'IBM Plex Mono',monospace;font-size:21px;letter-spacing:.05em;
  text-transform:uppercase;margin-bottom:6px}
.page .upd{font:11.5px/1.6 'IBM Plex Mono',monospace;color:var(--soft);margin-bottom:26px}
.page h2{font-size:16.5px;margin:30px 0 8px;letter-spacing:-.01em}
.page p{margin:10px 0}
.page ul{margin:10px 0 10px 20px}
.page li{margin:5px 0}
.page table{width:100%;border-collapse:collapse;margin:14px 0;font-size:13.5px}
.page th{text-align:left;font-weight:600;border-bottom:1px solid var(--line);
  padding:7px 9px 7px 0;white-space:nowrap}
.page td{border-bottom:1px solid var(--line);padding:7px 9px 7px 0;vertical-align:top}
.badge{display:inline-block;font:10.5px/1.5 'IBM Plex Mono',monospace;
  border:1px solid var(--line);border-radius:2px;padding:1px 5px;color:var(--soft);
  white-space:nowrap}
.note{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--clay);
  border-radius:0 4px 4px 0;padding:13px 16px;margin:18px 0;font-size:13.5px}

/* ── 바닥 ── */
footer{border-top:1px solid var(--line);background:var(--card)}
.footin{max-width:1080px;margin:0 auto;padding:20px 22px 34px;
  color:var(--soft);font-size:12.5px}
.footin a{margin-right:16px}

/* 언어 고르개 (글 페이지용 — 두 언어만) */
.lgpick{display:flex;gap:6px}
.lgpick button{font:inherit;font-size:12px;padding:3px 9px;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:3px;color:var(--soft)}
.lgpick button[aria-pressed="true"]{background:var(--pine);border-color:var(--pine);color:#fff}

@media (max-width:620px){
  .bname{font-size:12px;letter-spacing:.14em}
  .topnav a{margin-left:11px;font-size:12px}
  .page{padding-top:26px}
}
@media (prefers-color-scheme:dark){
  :root{--mist:#161C20;--ink:#E4EAE6;--soft:#93A3A6;--card:#1E262B;--line:#39464B;
    --pine:#7FBAA6;--sea:#243138}
  .lgpick button{background:#232C31}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}