/* ============ TOKENS ============ */
:root{
  --bg:#F4F0E8;        /* warm paper */
  --surface:#FFFFFF;
  --surface-alt:#EAE3D6;
  --ink:#15110D;
  --muted:#5C5346;
  --border:#D8CFBE;
  --yellow:#FFCB05;    /* Nat-Geo yellow — frame/badge/indicator only */
  --rust:#B5441E;      /* CTA / labels */
  --rust-h:#9E3417;
  --link:#A23A18;
  --success:#3E6B3A;
  --danger:#9E2A1B;

  --serif:'Noto Serif KR','Source Serif 4','Malgun Gothic',serif;
  --sans:'Pretendard','Source Sans 3','Malgun Gothic','맑은 고딕',sans-serif;
  --label:'Source Sans 3','Pretendard','Malgun Gothic',sans-serif;

  --s4:4px; --s8:8px; --s16:16px; --s24:24px; --s32:32px; --s48:48px; --s64:64px;
  --shell:1280px; --rail:300px; --measure:680px;

  --shadow1:3px 3px 0 rgba(21,17,13,.12);
  --shadow2:5px 5px 0 rgba(21,17,13,.18);
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px; line-height:1.7; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;}
a{color:var(--link);text-decoration:none;}
a:hover{text-decoration:underline;}

/* focus visibility (AA) */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--ink); outline-offset:2px;
}

h1,h2,h3{font-family:var(--serif);margin:0;color:var(--ink);}
h1{font-size:39px;line-height:1.15;font-weight:900;}
h2{font-size:31px;line-height:1.2;font-weight:700;}
h3{font-size:25px;line-height:1.25;font-weight:700;}

.label{
  font-family:var(--label);font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;font-size:13px;
}
.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--s24);}
.skip{position:absolute;left:-999px;top:0;background:var(--yellow);color:var(--ink);
  padding:var(--s8) var(--s16);font-family:var(--label);font-weight:700;z-index:100;}
.skip:focus{left:var(--s8);top:var(--s8);}

/* ============ HEADER (yellow 6px band over ink bar) ============ */
.topband{height:6px;background:var(--yellow);}
.masthead{background:var(--ink);color:#F4F0E8;position:sticky;top:0;z-index:50;}
.masthead .shell{
  display:flex;align-items:center;gap:var(--s24);
  min-height:64px;padding-top:var(--s8);padding-bottom:var(--s8);
}
.wordmark{display:flex;flex-direction:column;line-height:1;}
.wordmark .kr{font-family:var(--serif);font-weight:900;font-size:25px;color:var(--bg);}
.wordmark .en{font-family:var(--label);font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;font-size:11px;color:var(--yellow);margin-top:3px;}
nav.dir{flex:1;}
nav.dir ul{list-style:none;display:flex;gap:var(--s8);margin:0;padding:0;flex-wrap:wrap;}
nav.dir a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s16);
  color:var(--bg);font-family:var(--label);font-weight:600;font-size:13px;
  text-transform:uppercase;letter-spacing:.06em;border-bottom:3px solid transparent;
  transition:border-color .16s var(--ease),background .16s var(--ease);
}
nav.dir a:hover{text-decoration:none;background:rgba(255,203,5,.10);}
nav.dir a[aria-current="page"]{border-bottom-color:var(--yellow);color:#fff;}
.search{display:flex;align-items:center;gap:var(--s8);}
.search input{
  background:transparent;border:0;border-bottom:2px solid var(--bg);
  color:var(--bg);font-family:var(--sans);font-size:14px;padding:var(--s8) var(--s4);
  width:160px;min-height:44px;
}
.search input::placeholder{color:#cabf9f;}
.search input:focus{outline:none;border-bottom-color:var(--yellow);}
.icon-btn{
  background:transparent;border:0;color:var(--bg);cursor:pointer;
  min-width:44px;min-height:44px;display:grid;place-items:center;
}

/* ============ NOTICE STRIP ============ */
.notice{
  background:var(--surface-alt);border-bottom:1px solid var(--border);
}
.notice .shell{display:flex;align-items:center;gap:var(--s16);
  padding-top:var(--s16);padding-bottom:var(--s16);flex-wrap:wrap;}
.tag-pop{
  background:var(--yellow);color:var(--ink);font-family:var(--label);
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:12px;
  padding:4px 10px;border:1px solid var(--ink);flex:none;
}
.notice p{margin:0;font-size:14px;color:var(--muted);}
.notice strong{color:var(--ink);font-weight:600;}

main{padding-top:var(--s48);padding-bottom:var(--s64);}

/* ============ buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s8);
  min-height:44px;padding:0 var(--s24);border-radius:0;cursor:pointer;
  font-family:var(--label);font-weight:700;font-size:14px;text-transform:uppercase;
  letter-spacing:.06em;border:2px solid transparent;transition:all .16s var(--ease);
}
.btn:hover{text-decoration:none;}
.btn-primary{background:var(--rust);color:#fff;}
.btn-primary:hover{background:var(--rust-h);}
.btn-primary:active{transform:translateY(1px);}
.btn-secondary{background:transparent;border-color:var(--ink);color:var(--ink);}
.btn-secondary:hover{background:var(--surface-alt);}
.btn-ghost{background:transparent;color:var(--rust);padding:0;min-height:44px;
  display:inline-flex;align-items:center;font-family:var(--label);font-weight:700;
  font-size:14px;text-transform:uppercase;letter-spacing:.06em;}
.btn-ghost:hover{text-decoration:underline;}

/* ============ shared signature: yellow rectangular photo frame ============ */
.frame{
  position:relative;background:var(--yellow);padding:2px;
  transition:padding .16s var(--ease);flex:none;
}
.frame .photo{aspect-ratio:4/3;width:100%;overflow:hidden;background:var(--ink);}
.photo>svg{width:100%;height:100%;display:block;}

/* ============ LAYOUT: webzine stream + optional rail ============ */
.layout{
  max-width:var(--shell);margin:0 auto;padding:0 var(--s24);
  display:grid;grid-template-columns:minmax(0,1fr) var(--rail);
  gap:var(--s48);align-items:start;
}

/* section heading */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s16);
  border-bottom:2px solid var(--ink);padding-bottom:var(--s8);margin-bottom:var(--s24);}
.sec-head .label{color:var(--rust);display:block;}
.sec-head h2{margin:0;}

/* ============ WEBZINE STREAM ============ */
.zine{margin:0;padding:0;list-style:none;}

/* — FEATURED ROW (large) — */
.zrow.feat{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:var(--s32);align-items:center;
  padding:var(--s32) 0;border-bottom:2px solid var(--ink);margin-bottom:var(--s24);
}
.zrow.feat .frame{box-shadow:var(--shadow2);}
.zrow.feat:hover .frame{padding:4px;}
.feat .eyebrow{display:flex;gap:var(--s8);align-items:center;margin-bottom:var(--s8);flex-wrap:wrap;}
.cat-pill{
  border:1.5px solid var(--ink);color:var(--ink);padding:3px 8px;
  font-family:var(--label);font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;font-size:12px;background:var(--surface);
}
.cat-pill.is-pop{background:var(--yellow);}
.feat h1{font-size:34px;line-height:1.15;font-weight:900;margin:var(--s4) 0 var(--s16);max-width:18ch;}
.feat h1 a{color:var(--ink);}
.feat h1 a:hover{color:var(--link);}
.feat .lead{font-size:20px;line-height:1.6;font-weight:500;color:var(--ink);
  max-width:46ch;margin:0 0 var(--s24);}
.feat .zmeta{display:flex;gap:var(--s16);align-items:center;color:var(--muted);
  font-size:13px;font-weight:500;flex-wrap:wrap;margin-bottom:var(--s24);}
.feat .zmeta .who{color:var(--ink);font-weight:600;}
.feat .zmeta .cmt{color:var(--rust);font-weight:600;}

/* — STANDARD WEBZINE ROW (thumbnail-left + text-right) — */
.zrow{
  display:grid;grid-template-columns:28px 240px minmax(0,1fr);
  gap:var(--s24);align-items:start;
  padding:var(--s24) var(--s8);border-bottom:1px solid var(--border);
  transition:background .16s var(--ease);
}
.zrow:hover{background:var(--surface-alt);}
.zrow:hover .frame{padding:4px;}
.zbadge{
  width:28px;height:28px;border-radius:999px;background:var(--yellow);color:var(--ink);
  display:grid;place-items:center;font-family:var(--label);font-weight:700;font-size:13px;
  flex:none;margin-top:var(--s4);
}
.zthumb{width:240px;}
.zthumb .photo{aspect-ratio:4/3;}
.zbody{min-width:0;}
.ztags{display:flex;gap:var(--s8);margin-bottom:var(--s8);flex-wrap:wrap;}
.ztag{
  font-family:var(--label);font-weight:600;text-transform:uppercase;letter-spacing:.07em;
  font-size:11px;color:var(--rust);border:1px solid var(--border);padding:1px 6px;
}
.zbody h3{font-family:var(--serif);font-weight:700;font-size:21px;line-height:1.3;margin:0 0 var(--s8);}
.zbody h3 a{color:var(--ink);}
.zbody h3 a:hover{color:var(--link);text-decoration:underline;}
.zexcerpt{margin:0 0 var(--s16);color:var(--muted);font-size:15px;line-height:1.65;
  max-width:62ch;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.zmeta{display:flex;gap:var(--s16);align-items:center;color:var(--muted);
  font-size:13px;font-weight:500;flex-wrap:wrap;}
.zmeta .who{color:var(--ink);font-weight:600;}
.zmeta .cmt{color:var(--rust);font-weight:600;}

/* pagination */
.pager{display:flex;gap:var(--s4);justify-content:center;margin-top:var(--s32);}
.pager a,.pager span{
  min-width:44px;min-height:44px;display:grid;place-items:center;
  border:1px solid var(--border);background:var(--surface);color:var(--ink);
  font-family:var(--label);font-weight:600;font-size:14px;
}
.pager a:hover{background:var(--surface-alt);text-decoration:none;}
.pager .cur{background:var(--ink);color:#fff;border-color:var(--ink);}

.stream-foot{display:flex;justify-content:center;margin-top:var(--s24);}

/* ============ SIDE RAIL (optional, 300px) ============ */
.rail{display:flex;flex-direction:column;gap:var(--s32);}
.panel{background:var(--surface);border:1px solid var(--border);}
.panel h2.phead{
  font-size:18px;background:var(--ink);color:var(--bg);padding:var(--s8) var(--s16);
  font-family:var(--serif);font-weight:700;
}
.panel .pbody{padding:var(--s16);}
.rank{list-style:none;margin:0;padding:0;}
.rank li{display:flex;gap:var(--s8);padding:var(--s8) 0;border-bottom:1px solid var(--border);align-items:baseline;}
.rank li:last-child{border-bottom:0;}
.rank .n{width:24px;height:24px;border-radius:999px;background:var(--yellow);color:var(--ink);
  display:grid;place-items:center;font-family:var(--label);font-weight:700;font-size:12px;flex:none;}
.rank a{font-family:var(--serif);font-weight:500;font-size:15px;color:var(--ink);line-height:1.4;}
.rank a:hover{color:var(--link);}
.rank .sub{color:var(--muted);font-size:12px;font-weight:500;}

/* small photo-index chips inside rail */
.chips{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);}
.chip{display:block;}
.chip .frame{box-shadow:none;}
.chip .photo{aspect-ratio:4/3;}
.chip .cap{font-family:var(--label);font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;font-size:10px;color:var(--muted);margin-top:var(--s4);display:block;}

.tags{display:flex;flex-wrap:wrap;gap:var(--s8);}
.tags a{
  font-family:var(--label);font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  font-size:12px;color:var(--ink);border:1.5px solid var(--ink);padding:5px 10px;
  min-height:32px;display:inline-flex;align-items:center;
}
.tags a:hover{background:var(--surface-alt);text-decoration:none;}
.cta-panel{background:var(--surface-alt);border:1px solid var(--border);padding:var(--s24);}
.cta-panel h3{font-size:21px;margin:0 0 var(--s8);}
.cta-panel p{margin:0 0 var(--s16);color:var(--muted);font-size:14px;}
.cta-panel .btn{width:100%;}

/* ============ FOOTER ============ */
footer{background:var(--ink);color:#cfc7b6;margin-top:var(--s64);}
footer .top{height:6px;background:var(--yellow);}
footer .shell{padding-top:var(--s48);padding-bottom:var(--s32);
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s32);}
footer .wordmark .kr{color:var(--bg);}
footer p{font-size:13px;line-height:1.7;margin:var(--s16) 0 0;}
footer h4{font-family:var(--label);font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  font-size:12px;color:var(--yellow);margin:0 0 var(--s8);}
footer ul{list-style:none;margin:0;padding:0;}
footer li{margin:var(--s8) 0;}
footer a{color:#cfc7b6;font-size:14px;}
footer a:hover{color:#fff;}
.colophon{border-top:1px solid #38322a;}
.colophon .shell{padding-top:var(--s16);padding-bottom:var(--s24);
  display:flex;justify-content:space-between;align-items:center;gap:var(--s16);flex-wrap:wrap;}
.colophon .sig{font-family:var(--label);font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;font-size:11px;color:var(--yellow);}
.colophon small{color:#a59a82;font-size:12px;}

/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
  :root{--rail:280px;}
  .feat h1{font-size:31px;}
}
@media (max-width:768px){
  .topband{height:3px;}
  .masthead .shell{flex-wrap:wrap;gap:var(--s8);}
  nav.dir{order:3;flex-basis:100%;}
  nav.dir ul{justify-content:flex-start;overflow-x:auto;}
  .search input{width:120px;}
  .layout{grid-template-columns:minmax(0,1fr);gap:var(--s48);}
  .rail{order:3;}
  .zrow.feat{grid-template-columns:minmax(0,1fr);gap:var(--s24);}
  .feat h1{font-size:28px;}
  .zrow{grid-template-columns:28px 180px minmax(0,1fr);gap:var(--s16);}
  .zthumb{width:180px;}
  .chips{grid-template-columns:1fr 1fr 1fr;}
}
@media (max-width:480px){
  .shell,.layout{padding:0 var(--s16);}
  .feat h1{font-size:25px;} h2{font-size:25px;}
  .feat .lead{font-size:17px;}
  .zrow{grid-template-columns:1fr;gap:var(--s8);position:relative;padding:var(--s24) 0;}
  .zbadge{position:absolute;top:var(--s24);left:var(--s8);width:24px;height:24px;font-size:12px;
    box-shadow:0 0 0 2px var(--surface);z-index:2;margin-top:0;}
  .zthumb{width:100%;}
  .zexcerpt{-webkit-line-clamp:4;}
  .chips{grid-template-columns:1fr 1fr;}
  footer .shell{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;}
}

/* ============ gnuboard dynamic supplements (Nat-Geo Editorial / Yeojeong) ============ */

/* thumbnail images inside frame wrappers */
.zthumb img,.zthumb-feat img{width:100%;height:100%;object-fit:cover;display:block;}
.frame img{width:100%;height:100%;object-fit:cover;display:block;}
.chip img{width:100%;height:100%;object-fit:cover;display:block;}

/* pager: gnuboard outputs <strong> for current page */
.pager strong,.pager .now{
  min-width:44px;min-height:44px;display:grid;place-items:center;
  border:1px solid var(--ink);background:var(--ink);color:#fff;
  font-family:var(--label);font-weight:700;font-size:14px;
}

/* board list h1 */
.zine-wrap .board-h1{
  font-family:var(--serif);font-size:28px;font-weight:900;color:var(--ink);margin:0;
}

/* board actions row */
.board-actions{
  display:flex;justify-content:space-between;align-items:center;
  gap:var(--s16);flex-wrap:wrap;margin-top:var(--s24);
  padding-top:var(--s16);border-top:1px solid var(--border);
}
.board-actions .board-search{display:flex;gap:var(--s8);align-items:center;flex-wrap:wrap;}
.board-actions select,.board-actions input[type=text]{
  height:44px;padding:0 12px;font-family:var(--sans);font-size:14px;
  background:var(--surface);color:var(--ink);border:1px solid var(--border);
}

/* ============ board detail view (.hm-board-view*) ============ */
.hm-board-view{
  background:var(--surface);border:1px solid var(--border);
  box-shadow:var(--shadow1);padding:28px;margin:32px auto 24px;max-width:920px;
}
.hm-view-head{border-bottom:2px solid var(--ink);padding-bottom:var(--s16);margin-bottom:var(--s16);}
.hm-view-head .hm-board-kicker{
  font-family:var(--label);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--rust);margin:0 0 var(--s8);
}
.hm-view-head h1{
  font-family:var(--serif);font-size:28px;font-weight:900;line-height:1.25;
  color:var(--ink);margin:0;
}
.hm-view-meta{
  display:flex;gap:var(--s16);margin-top:var(--s8);
  font-family:var(--label);font-size:13px;color:var(--muted);flex-wrap:wrap;
}
.hm-view-content{
  font-size:16px;line-height:1.8;color:var(--ink);
  padding:var(--s8) 0 var(--s24);border-bottom:1px solid var(--border);
}
.hm-view-content img{max-width:100%;height:auto;}
.hm-view-content p{margin:0 0 var(--s16);}
.hm-view-files{display:flex;flex-wrap:wrap;gap:10px;margin:var(--s16) 0;}
.hm-view-files a{
  font-family:var(--label);font-size:13px;border:1px solid var(--border);
  padding:6px 12px;color:var(--rust);background:var(--surface);
}
.hm-view-neighbor{display:flex;flex-direction:column;gap:var(--s8);margin:var(--s16) 0;}
.hm-view-neighbor a{
  display:flex;gap:var(--s8);padding:10px var(--s8);
  border:1px solid var(--border);background:var(--surface-alt);
}
.hm-view-neighbor span{
  font-family:var(--label);font-size:12px;color:var(--muted);flex:0 0 auto;
}
.hm-view-neighbor strong{
  font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hm-view-actions{display:flex;gap:var(--s8);flex-wrap:wrap;margin-top:var(--s16);}
.hm-view-actions a{
  min-height:40px;display:inline-flex;align-items:center;padding:0 var(--s16);
  border:1px solid var(--border);font-family:var(--label);font-weight:700;
  font-size:14px;color:var(--ink);background:var(--surface);text-transform:uppercase;letter-spacing:.04em;
}
.hm-view-actions a.is-primary{
  background:var(--rust);color:#fff;border-color:var(--rust);
}
.hm-view-vote{display:flex;gap:10px;margin:var(--s16) 0;}
.hm-view-vote a{
  padding:var(--s8) var(--s16);border:1px solid var(--border);
  color:var(--ink);font-family:var(--label);font-size:13px;
}

/* ── view-page appended sections (reuse zine-wrap grid; namespaced selectors) ── */
.hm-view-board-list,
.hm-view-recommended{
  max-width:920px;margin:var(--s48) auto 0;
}
.hm-view-board-list .sec-head,
.hm-view-recommended .sec-head{margin-bottom:var(--s24);}
.hm-view-board-list .pager,
.hm-view-recommended .pager{margin-top:var(--s32);}