/* Theme: Risograph Two-tone Zine (site 083) — from design-system sample */
  /* ============ Tokens ============ */
  :root{
    --bg:#FAF3F0; --surface:#FFFDFB; --surface-alt:#F3DCEF; --surface-blue:#DFE6FB;
    --ink:#161A1B; --ink-plum:#2A0F3A; --muted:#5A4F55; --border:#C98FC0;
    --pink:#D6006E; --blue:#1D4FD7; --success:#1F7A4D; --warning:#A85400; --danger:#C8102E;
    --r:4px;
    --sh-hair:0 1px 0 var(--border);
    --sh-over:2px 2px 0 var(--blue);
    --sh-over-h:3px 3px 0 var(--blue);
    --shell:1339px; --rail:321px; --gut:24px;
    --f-body:"Noto Sans KR","Pretendard",sans-serif;
    --f-head:"Archivo","Noto Sans KR",sans-serif;
    --f-mono:"Space Mono","D2Coding",monospace;
  }
  *,*::before,*::after{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;}
  body{
    margin:0; background-color:var(--bg);
    background-image:radial-gradient(rgba(42,15,58,.10) 1px, transparent 1.4px);
    background-size:8px 8px;
    color:var(--ink); font-family:var(--f-body); font-size:16px; line-height:1.65;
    letter-spacing:-0.01em; -webkit-font-smoothing:antialiased;
  }
  a{color:var(--blue); text-decoration:none;}
  a:hover{text-decoration:underline;}
  img{max-width:100%;display:block;}
  h1,h2,h3{font-family:var(--f-head); letter-spacing:-0.02em; margin:0;}
  :focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
  .shell{max-width:var(--shell); margin:0 auto; padding:0 24px;}
  .mono{font-family:var(--f-mono); letter-spacing:0.02em;}

  /* ============ Signature: overprint frame box ============ */
  .overprint{position:relative;}
  .overprint::before{
    content:""; position:absolute; inset:-2px; border:2px solid var(--pink);
    border-radius:var(--r); pointer-events:none; z-index:0;
  }
  .overprint::after{
    content:""; position:absolute; inset:0; transform:translate(2px,2px);
    border:2px solid var(--blue); border-radius:var(--r); pointer-events:none; z-index:0;
  }
  .overprint > *{position:relative; z-index:1;}

  /* ============ Skip link ============ */
  .skip{position:absolute; left:-9999px; top:0; background:var(--blue); color:#fff;
    padding:10px 16px; z-index:50; border-radius:var(--r);}
  .skip:focus{left:8px; top:8px;}

  /* ============ Header ============ */
  .topbar{background:var(--surface-alt); border-bottom:1px dotted var(--border);}
  .topbar .shell{display:flex; align-items:center; justify-content:space-between;
    gap:16px; min-height:34px; padding-top:6px; padding-bottom:6px;}
  .topbar .mono{font-size:12.5px; color:var(--muted);}
  .topbar .util{display:flex; gap:14px;}
  .topbar .util a{color:var(--ink-plum); font-weight:500;}

  header.site{
    background:var(--surface-alt);
    border-bottom:2px dotted var(--border);
  }
  .head-row{display:flex; align-items:center; justify-content:space-between; gap:24px;
    padding-top:18px; padding-bottom:18px; flex-wrap:wrap;}
  .brand{display:flex; align-items:center; gap:12px; text-decoration:none;}
  .brand .mark{
    width:46px; height:46px; flex:none; border-radius:var(--r);
    background:var(--pink); box-shadow:var(--sh-over);
    display:grid; place-items:center; color:#fff; font-family:var(--f-head); font-weight:800;
    font-size:22px;
  }
  .brand .wm{display:flex; flex-direction:column; line-height:1.05;}
  .brand .wm b{font-family:var(--f-head); font-weight:800; font-size:25px; color:var(--ink-plum);}
  .brand .wm span{font-size:12.5px; color:var(--muted);}
  .search{display:flex; align-items:stretch; gap:0; flex:1; max-width:420px; min-width:220px;}
  .search input{
    flex:1; min-height:44px; padding:0 14px; font-size:15px; font-family:var(--f-body);
    border:1.5px solid var(--ink); border-right:none; border-radius:var(--r) 0 0 var(--r);
    background:var(--surface); color:var(--ink); caret-color:var(--pink);
  }
  .search input::placeholder{color:var(--muted);}
  .search input:focus{outline:none; border-color:var(--blue); box-shadow:inset 0 -2px 0 var(--blue);}
  .search button{
    min-height:44px; min-width:64px; border:1.5px solid var(--pink); background:var(--pink);
    color:#fff; font-family:var(--f-mono); font-weight:700; font-size:13px; cursor:pointer;
    border-radius:0 var(--r) var(--r) 0; box-shadow:var(--sh-over);
  }
  .search button:hover{box-shadow:var(--sh-over-h);}

  /* ============ Nav (dense forum toolbar) ============ */
  nav.main{background:var(--surface); border-bottom:1px dotted var(--border);}
  nav.main ul{display:flex; gap:4px; list-style:none; margin:0; padding:0; flex-wrap:wrap;}
  nav.main a{
    display:block; padding:13px 16px; min-height:44px; font-family:var(--f-mono);
    font-weight:700; font-size:13px; letter-spacing:0.04em; text-transform:uppercase;
    color:var(--ink-plum); text-decoration:none; position:relative;
  }
  nav.main a:hover{color:var(--pink); text-decoration:none;}
  nav.main a.active{color:var(--pink);}
  nav.main a.active::after{
    content:""; position:absolute; left:14px; right:14px; bottom:6px; height:2px;
    background:var(--pink); box-shadow:1px 1px 0 var(--blue);
  }

  /* ============ Main layout ============ */
  main{padding:32px 0 48px;}
  .layout{display:grid; grid-template-columns:1fr var(--rail); gap:var(--gut); align-items:start;}

  /* ---- notice strip ---- */
  .notice{
    background:var(--surface-blue); border-radius:var(--r);
    padding:14px 16px; margin-bottom:24px;
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  }
  .notice .chip{flex:none;}
  .notice p{margin:0; font-size:15px; color:var(--ink);}
  .notice p a{font-weight:700;}

  /* ---- section heads ---- */
  .sec-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px;
    margin:0 0 16px; padding-bottom:8px; border-bottom:2px solid var(--ink);}
  .sec-head h2{font-size:25px; font-weight:800; color:var(--ink-plum);}
  .sec-head .more{font-family:var(--f-mono); font-size:12.5px; font-weight:700; color:var(--blue);}

  /* ---- hero / tag cloud (signature chips) ---- */
  .hero{background:var(--surface); border-radius:var(--r); padding:24px; margin-bottom:32px;}
  .hero h1{font-size:39px; line-height:1.12; font-weight:800; color:var(--ink-plum); margin-bottom:10px;}
  .hero p.lead{font-size:16px; color:var(--ink); max-width:42ch; margin:0 0 18px;}
  .tagcloud{display:flex; flex-wrap:wrap; gap:8px;}

  /* sticker-style square chips */
  .chip{
    display:inline-flex; align-items:center; gap:6px;
    font-family:var(--f-mono); font-weight:700; font-size:12.5px; letter-spacing:0.02em;
    padding:6px 10px; border-radius:var(--r); border:1px dotted var(--border);
    background:var(--surface); color:var(--ink); white-space:nowrap;
  }
  .chip.pink{background:var(--pink); color:#fff; border-color:var(--pink); box-shadow:var(--sh-over);}
  .chip.blue{background:var(--blue); color:#fff; border-color:var(--blue); box-shadow:2px 2px 0 var(--pink);}
  .chip.plum{background:var(--ink-plum); color:#fff; border-color:var(--ink-plum); box-shadow:2px 2px 0 var(--pink);}
  .chip.tint-pink{background:var(--surface-alt); color:var(--ink); border-color:var(--border);}
  .chip.tint-blue{background:var(--surface-blue); color:var(--ink); border-color:var(--blue);}
  a.chip:hover{text-decoration:none; transform:translate(-1px,-1px);}
  .chip.st-open{background:var(--success); color:#fff; border-color:var(--success);}
  .chip.st-soon{background:var(--warning); color:#fff; border-color:var(--warning);}
  .chip.st-report{background:var(--danger); color:#fff; border-color:var(--danger);}

  /* ---- board list (tag-stream) ---- */
  .board{background:var(--surface); border-radius:var(--r); padding:16px 20px;}
  ul.stream{list-style:none; margin:0; padding:0;}
  ul.stream li{border-bottom:1px dotted var(--border);}
  ul.stream li:nth-child(odd){background:rgba(243,220,239,.30);}
  ul.stream li:last-child{border-bottom:none;}
  .row{display:flex; align-items:center; gap:12px; padding:12px 8px; flex-wrap:wrap;}
  .row .cat{flex:none;}
  .row .title{flex:1; min-width:200px; font-size:16px; font-weight:500; color:var(--ink);}
  .row .title:hover{color:var(--blue); text-decoration:underline;}
  .row .title .cmt{font-family:var(--f-mono); font-size:12.5px; font-weight:700; color:var(--pink); margin-left:6px;}
  .row .meta{flex:none; display:flex; gap:14px; font-family:var(--f-mono); font-size:12.5px; color:var(--muted);}
  .row .meta b{color:var(--ink-plum); font-weight:700;}

  /* ---- pagination ---- */
  .pager{display:flex; gap:6px; justify-content:center; margin-top:20px; flex-wrap:wrap;}
  .pager a, .pager span{
    min-width:40px; min-height:40px; display:grid; place-items:center; border-radius:var(--r);
    border:1.5px solid var(--border); background:var(--surface); color:var(--ink);
    font-family:var(--f-mono); font-weight:700; font-size:13px; text-decoration:none;
  }
  .pager a:hover{border-color:var(--blue); color:var(--blue);}
  .pager .cur{background:var(--pink); color:#fff; border-color:var(--pink); box-shadow:var(--sh-over);}

  /* ---- gallery ---- */
  .gallery{margin-top:32px;}
  .grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(275px,1fr)); gap:var(--gut);}
  .card{
    background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r);
    overflow:hidden; display:flex; flex-direction:column; position:relative; transition:transform .08s;
  }
  .card:hover{transform:translate(-1px,-1px); box-shadow:var(--sh-over);}
  .card a.thumb{display:block; text-decoration:none;}
  .thumb-box{aspect-ratio:4/3; width:100%; overflow:hidden; position:relative; background:var(--surface-alt);}
  .thumb-box svg{width:100%; height:100%; display:block; object-fit:cover;}
  .card .body{padding:12px 14px 14px; display:flex; flex-direction:column; gap:8px; flex:1;}
  .card .ctag{display:flex; gap:6px; flex-wrap:wrap;}
  .card h3{font-size:18px; line-height:1.25; font-weight:700; color:var(--ink-plum);}
  .card h3 a{color:inherit; text-decoration:none;}
  .card h3 a:hover{color:var(--pink);}
  .card .cmeta{margin-top:auto; font-family:var(--f-mono); font-size:12.5px; color:var(--muted);
    display:flex; justify-content:space-between; gap:8px;}

  /* ---- right rail ---- */
  aside.rail{display:flex; flex-direction:column; gap:24px;}
  .panel{background:var(--surface); border-radius:var(--r); padding:16px 18px;}
  .panel > h2{font-size:18px; font-weight:800; color:var(--ink-plum); margin-bottom:12px;
    padding-bottom:8px; border-bottom:2px dotted var(--border); font-family:var(--f-head);}
  ol.rank{list-style:none; margin:0; padding:0; counter-reset:r;}
  ol.rank li{counter-increment:r; display:flex; gap:10px; padding:9px 0; border-bottom:1px dotted var(--border);}
  ol.rank li:last-child{border-bottom:none;}
  ol.rank li::before{
    content:counter(r); flex:none; width:22px; height:22px; border-radius:var(--r);
    background:var(--blue); color:#fff; font-family:var(--f-mono); font-weight:700; font-size:12px;
    display:grid; place-items:center;
  }
  ol.rank li:nth-child(-n+3)::before{background:var(--pink);}
  ol.rank a{color:var(--ink); font-size:14px; font-weight:500; line-height:1.4;}
  ol.rank a:hover{color:var(--blue);}
  .event{display:flex; gap:12px; padding:10px 0; border-bottom:1px dotted var(--border);}
  .event:last-child{border-bottom:none;}
  .event .date{flex:none; width:50px; text-align:center; background:var(--surface-blue);
    border-radius:var(--r); padding:6px 0; font-family:var(--f-mono);}
  .event .date b{display:block; font-size:18px; color:var(--ink-plum); font-weight:700;}
  .event .date span{font-size:11px; color:var(--muted);}
  .event .info{flex:1;}
  .event .info b{display:block; font-size:14px; color:var(--ink); font-weight:700; line-height:1.35;}
  .event .info span{font-size:12.5px; color:var(--muted); font-family:var(--f-mono);}
  .btn{
    display:inline-block; text-align:center; cursor:pointer; text-decoration:none;
    font-family:var(--f-mono); font-weight:700; font-size:13px; letter-spacing:0.02em;
    padding:11px 16px; min-height:44px; border-radius:var(--r); border:none;
  }
  .btn-primary{background:var(--pink); color:#fff; box-shadow:var(--sh-over);}
  .btn-primary:hover{box-shadow:var(--sh-over-h); transform:translateY(-1px); text-decoration:none;}
  .btn-primary:active{box-shadow:0 0 0; transform:none;}
  .btn-secondary{background:var(--surface); color:var(--blue); border:1.5px solid var(--blue);}
  .btn-secondary:hover{background:var(--surface-blue); text-decoration:none;}
  .btn-block{display:block; width:100%; margin-top:12px;}

  /* ============ Footer ============ */
  footer.site{background:var(--ink-plum); color:#fff; margin-top:48px;
    border-top:3px dotted var(--pink);}
  footer.site .shell{padding-top:32px; padding-bottom:32px;}
  .foot-grid{display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap;}
  .foot-grid .fcol b{font-family:var(--f-head); font-size:18px; display:block; margin-bottom:10px;}
  .foot-grid .fcol a{color:var(--surface-blue); font-size:14px; display:block; padding:4px 0;}
  .foot-grid .fcol a:hover{color:#fff;}
  .foot-grid p{font-size:13px; color:var(--surface-alt); margin:6px 0; max-width:36ch;}
  .foot-bottom{margin-top:24px; padding-top:16px; border-top:1px dotted rgba(255,255,255,.3);
    display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center;}
  .foot-bottom .mono{font-size:12.5px; color:var(--surface-alt);}
  .site-label{font-family:var(--f-mono); font-size:12px; color:var(--surface-blue);
    border:1px dotted rgba(255,255,255,.4); padding:5px 9px; border-radius:var(--r);}

  /* ============ Responsive ============ */
  @media (max-width:1024px){
    :root{--rail:280px;}
  }
  @media (max-width:768px){
    .layout{grid-template-columns:1fr;}
    aside.rail{order:2;}
    .grid{grid-template-columns:repeat(2,1fr);}
    .hero h1{font-size:31px;}
    .head-row{justify-content:center; text-align:center;}
    .search{max-width:none; order:3; width:100%;}
  }
  @media (max-width:480px){
    :root{ --sh-over:1px 1px 0 var(--blue); --sh-over-h:2px 2px 0 var(--blue); }
    .shell{padding:0 14px;}
    .grid{grid-template-columns:1fr;}
    .hero{padding:18px;}
    .hero h1{font-size:25px;}
    .tagcloud{flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch;}
    .tagcloud .chip{flex:none;}
    .row .meta{width:100%; gap:12px;}
    nav.main ul{flex-wrap:nowrap; overflow-x:auto;}
    nav.main a{white-space:nowrap;}
    .row .title{min-width:0;}
  }

/* ============ dynamic-supplements (Risograph Two-tone) ============ */
.thumb-box img{width:100%;height:100%;object-fit:cover;display:block;}
.wz-thumb img{width:100%;height:100%;object-fit:cover;display:block;}

/* Gnuboard pager current page */
.pager strong,.pager .now{
  min-width:40px;min-height:40px;display:grid;place-items:center;border-radius:var(--r);
  background:var(--pink);color:#fff;border:1.5px solid var(--pink);
  font-family:var(--f-mono);font-weight:700;font-size:13px;box-shadow:var(--sh-over);
}

/* board list helpers */
.board-stream-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 16px;padding-bottom:8px;border-bottom:2px solid var(--ink);}
.board-stream-head .board-h1{font-family:var(--f-head);font-size:25px;font-weight:800;color:var(--ink-plum);margin:0;}
.board-stream-head .more{font-family:var(--f-mono);font-size:12.5px;font-weight:700;color:var(--blue);}
.board-actions{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:1px dotted var(--border);}
.board-search{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.board-search select,.board-search input[type=text]{
  height:44px;padding:0 12px;font-family:var(--f-body);font-size:14px;
  background:var(--surface);color:var(--ink);border:1.5px solid var(--border);border-radius:var(--r);
}
.board-search select:focus,.board-search input[type=text]:focus{outline:none;border-color:var(--blue);}

/* board detail (view) — palette: pink/blue/plum */
.hm-board-view{
  background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r);
  padding:28px;margin:32px auto 24px;max-width:920px;box-shadow:var(--sh-over);
}
.hm-view-head{border-bottom:2px dotted var(--border);padding-bottom:16px;margin-bottom:20px;}
.hm-view-head .hm-board-kicker{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin:0 0 8px;}
.hm-view-head h1{font-family:var(--f-head);font-size:28px;font-weight:800;line-height:1.25;color:var(--ink-plum);margin:0;}
.hm-view-meta{display:flex;gap:14px;margin-top:12px;font-family:var(--f-mono);font-size:13px;color:var(--muted);flex-wrap:wrap;}
.hm-view-content{font-size:16px;line-height:1.8;color:var(--ink);padding:8px 0 24px;border-bottom:1px dotted var(--border);}
.hm-view-content img{max-width:100%;height:auto;border-radius:var(--r);}
.hm-view-content p{margin:0 0 16px;}
.hm-view-files{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0;}
.hm-view-files a{font-family:var(--f-mono);font-size:13px;border:1px dotted var(--border);border-radius:var(--r);padding:6px 12px;color:var(--blue);background:var(--surface);}
.hm-view-neighbor{display:flex;flex-direction:column;gap:8px;margin:20px 0;}
.hm-view-neighbor a{display:flex;gap:12px;padding:10px 12px;border:1px dotted var(--border);border-radius:var(--r);background:var(--surface-alt);}
.hm-view-neighbor span{font-family:var(--f-mono);font-size:12px;color:var(--muted);flex:0 0 auto;}
.hm-view-neighbor strong{font-weight:600;color:var(--ink-plum);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hm-view-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px;}
.hm-view-actions a{min-height:40px;display:inline-flex;align-items:center;padding:0 16px;border:1.5px solid var(--border);border-radius:var(--r);font-family:var(--f-mono);font-weight:700;font-size:13px;color:var(--ink-plum);background:var(--surface);}
.hm-view-actions a.is-primary{background:var(--pink);color:#fff;border-color:var(--pink);box-shadow:var(--sh-over);}
.hm-view-vote{display:flex;gap:10px;margin:16px 0;}
.hm-view-vote a{padding:8px 16px;border:1px dotted var(--border);border-radius:var(--r);color:var(--ink);font-family:var(--f-mono);font-size:13px;}

/* ---- view supplement blocks (board list 5, paging, recommended) ---- */
.view-supp{margin-top:24px;}
.view-supp + .view-supp{margin-top:20px;}

/* nav mobile toggle */
.nav-toggle{display:none;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r);width:44px;height:44px;cursor:pointer;padding:0;}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--ink-plum);margin:4px auto;}
@media(max-width:768px){
  .nav-toggle{display:block;}
  nav.main .nav-inner{position:relative;}
  nav.main ul.nav-collapsed{display:none;}
  nav.main ul.nav-collapsed.open{display:flex;flex-direction:column;gap:0;padding:8px 0;}
}