/* ===== Sticker-bomb Maximal · portal-3col ===== */
:root{
  --bg:#FBF7F2; --surface:#FFFFFF; --surface-alt:#F2ECFB;
  --ink:#141019; --muted:#5A4F63; --hairline:#E2D6C8;
  --magenta:#FF2D9B; --lime:#B6F500; --blue:#1E3AE0; --yellow:#FFD400;
  --success:#0B7A40; --danger:#CC1500;
  --link:#1E3AE0; --link-hover:#C70068;
  --sp1:4px; --sp2:8px; --sp3:16px; --sp4:24px; --sp5:32px; --sp6:48px;
  --shell:1102px; --leftnav:200px; --rail:280px; --gutter:24px;
  --r-card:18px 6px 18px 4px; --r-badge:10px 4px 10px 2px;
  --r-input:6px; --r-btn:8px 2px 8px 2px;
  --sh1:2px 2px 0 var(--ink); --sh2:3px 3px 0 var(--ink); --sh3:5px 5px 0 var(--ink);
  --ease:cubic-bezier(0.2,0.8,0.2,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  background-image:repeating-linear-gradient(51deg, rgba(20,16,25,0.018) 0 18px, rgba(20,16,25,0) 18px 36px);
  color:var(--ink);
  font-family:Pretendard,'Malgun Gothic','맑은 고딕',Arial,sans-serif;
  font-size:16px; line-height:1.65; letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--link); text-decoration:none}
a:hover{color:var(--link-hover); text-decoration:underline; text-underline-offset:2px}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--ink); outline-offset:2px;
  box-shadow:0 0 0 3px var(--lime);
}
h1,h2,h3{margin:0; line-height:1.18; letter-spacing:-0.01em; font-weight:800}
ul{margin:0; padding:0; list-style:none}
img,svg{display:block; max-width:100%}
.skip{position:absolute; left:-9999px; top:0; background:var(--lime); color:var(--ink);
  padding:10px 16px; border:2px solid var(--ink); z-index:50; font-weight:800}
.skip:focus{left:8px; top:8px}

/* display / mono helpers */
.display{font-family:'Archivo Expanded','Anton',Pretendard,sans-serif; font-weight:900;
  text-transform:uppercase; letter-spacing:0.01em}
.mono{font-family:'Space Mono','Roboto Mono',monospace; font-weight:700}

/* ===== badges (die-cut stickers) ===== */
.badge{display:inline-block; font-family:'Archivo Expanded',Pretendard,sans-serif;
  font-weight:900; font-size:12px; line-height:1; text-transform:uppercase;
  padding:5px 9px; border:2px solid var(--ink); border-radius:var(--r-badge);
  box-shadow:var(--sh1); white-space:nowrap; letter-spacing:0.02em}
.badge--hot{background:var(--magenta); color:var(--ink); transform:rotate(-4deg)}
.badge--off{background:var(--lime); color:var(--ink); transform:rotate(3deg)}
.badge--ship{background:var(--blue); color:#fff; transform:rotate(-2deg)}
.badge--new{background:var(--yellow); color:var(--ink); transform:rotate(2deg)}
.badge--done{background:var(--success); color:#fff; transform:rotate(-3deg)}
.badge--sold{background:var(--danger); color:#fff; transform:rotate(4deg)}
@media (prefers-reduced-motion:reduce){.badge{transform:none !important}}

.pricechip{display:inline-block; font-family:'Space Mono',monospace; font-weight:700;
  font-size:13px; background:var(--surface-alt); color:var(--ink);
  border:2px solid var(--ink); border-radius:var(--r-badge); padding:2px 7px}

/* ===== header (center-logo two-row) ===== */
.topbar{background:var(--surface); border-bottom:2px solid var(--ink)}
.topbar__inner{max-width:var(--shell); margin:0 auto; padding:var(--sp4) var(--sp4) var(--sp3);
  display:flex; flex-direction:column; align-items:center; gap:var(--sp3); position:relative}
.logo{display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.logo:hover{text-decoration:none}
.logo__mark{background:var(--magenta); border:2px solid var(--ink); box-shadow:var(--sh2);
  border-radius:14px 4px 14px 4px; padding:8px 12px; transform:rotate(-3deg)}
.logo__mark .display{font-size:22px; color:var(--ink)}
.logo__name{font-family:'Archivo Expanded',Pretendard,sans-serif; font-weight:900;
  font-size:30px; text-transform:uppercase; letter-spacing:0.01em}
.logo__sub{display:block; font-size:12px; color:var(--muted); font-weight:600;
  letter-spacing:0; text-transform:none; font-family:Pretendard,sans-serif}
@media (prefers-reduced-motion:reduce){.logo__mark{transform:none}}
.searchbar{display:flex; width:min(560px,100%); border:2px solid var(--ink);
  border-radius:var(--r-input); overflow:hidden; box-shadow:var(--sh1); background:var(--surface)}
.searchbar input{flex:1; border:0; padding:11px 14px; font-size:15px; color:var(--ink);
  background:transparent; min-width:0}
.searchbar input::placeholder{color:var(--muted)}
.searchbar button{border:0; border-left:2px solid var(--ink); background:var(--magenta);
  color:var(--ink); padding:0 16px; font-weight:900; cursor:pointer; min-width:52px; min-height:44px}
.searchbar button:hover{background:var(--lime)}
.gnb{max-width:var(--shell); margin:0 auto; padding:0 var(--sp4) var(--sp3);
  display:flex; flex-wrap:wrap; gap:var(--sp2); justify-content:center}
.gnb a{font-weight:800; font-size:15px; color:var(--ink); text-decoration:none;
  border:2px solid var(--ink); border-radius:var(--r-btn); background:var(--surface);
  padding:8px 14px; min-height:44px; display:inline-flex; align-items:center; box-shadow:var(--sh1);
  transition:transform .16s var(--ease), box-shadow .16s var(--ease)}
.gnb a:hover{transform:translate(-1px,-1px); box-shadow:var(--sh2); text-decoration:none}
.gnb a[aria-current="page"]{background:var(--lime)}
@media (prefers-reduced-motion:reduce){.gnb a:hover{transform:none}}

/* ===== 3-column portal shell ===== */
.shell{max-width:var(--shell); margin:0 auto; padding:var(--sp4);
  display:grid; grid-template-columns:var(--leftnav) minmax(0,1fr) var(--rail);
  gap:var(--gutter); align-items:start}

/* card primitive */
.card{background:var(--surface); border:2px solid var(--ink); border-radius:var(--r-card);
  box-shadow:var(--sh2)}
.panel{background:var(--surface); border:2px solid var(--ink); border-radius:var(--r-card);
  box-shadow:var(--sh2); padding:var(--sp3); position:relative; margin-bottom:var(--sp4)}
.panel__hd{position:relative; display:inline-block; font-family:'Archivo Expanded',Pretendard,sans-serif;
  font-weight:900; font-size:17px; text-transform:uppercase; letter-spacing:0.02em;
  background:var(--ink); color:#fff; padding:6px 12px; border-radius:8px 2px 8px 2px;
  margin:0 0 var(--sp3); transform:rotate(-1.5deg)}
@media (prefers-reduced-motion:reduce){.panel__hd{transform:none}}

/* ===== LEFT: category nav tree + notices ===== */
.lcol{position:relative}
.navtree li > a{display:flex; justify-content:space-between; align-items:center;
  gap:8px; padding:9px 10px; border-radius:6px 2px 6px 2px; color:var(--ink);
  font-weight:700; text-decoration:none; border:2px solid transparent; min-height:40px}
.navtree li > a:hover{background:var(--surface-alt); text-decoration:none}
.navtree li > a[aria-current="page"]{background:var(--lime); border-color:var(--ink); box-shadow:var(--sh1)}
.navtree .count{font-family:'Space Mono',monospace; font-size:12px; color:var(--muted)}
.navtree li > a[aria-current="page"] .count{color:var(--ink)}
.navtree .sub{margin:2px 0 6px 12px; border-left:2px solid var(--hairline); padding-left:6px}
.navtree .sub a{font-weight:500; font-size:14px; padding:6px 8px}
.notice li{border-top:1px solid var(--hairline); padding:8px 2px}
.notice li:first-child{border-top:0}
.notice a{font-weight:700; font-size:14px}
.notice .tag{font-family:'Archivo Expanded',Pretendard,sans-serif; font-weight:900;
  font-size:11px; color:var(--danger); margin-right:6px}

/* ===== CENTER: featured + latest list + pager ===== */
.ccol{min-width:0}
.featured{position:relative; padding:var(--sp3); overflow:visible; margin-bottom:var(--sp5)}
.featured .figure{position:relative; border:2px solid var(--ink); border-radius:18px 6px 18px 4px;
  overflow:hidden; box-shadow:var(--sh1)}
.featured .figure svg{width:100%; height:auto; aspect-ratio:4/3}
.featured__badges{position:absolute; top:-12px; left:14px; display:flex; gap:8px; z-index:3}
.featured h2{font-size:27px; margin:var(--sp3) 0 var(--sp2)}
.featured h2 a{color:var(--ink)}
.featured h2 a:hover{color:var(--link-hover)}
.featured p{margin:0 0 var(--sp3); color:var(--ink)}
.featured .meta{color:var(--muted); font-size:13px; display:flex; gap:12px; flex-wrap:wrap;
  align-items:center; margin-bottom:var(--sp3)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-weight:800; font-size:15px; min-height:44px; padding:10px 18px; cursor:pointer;
  border:2px solid var(--ink); border-radius:var(--r-btn); text-decoration:none;
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease)}
.btn--primary{background:var(--magenta); color:var(--ink); box-shadow:var(--sh2)}
.btn--primary:hover{transform:translate(-2px,-2px); box-shadow:var(--sh3); text-decoration:none}
.btn--primary:active{background:var(--lime)}
@media (prefers-reduced-motion:reduce){.btn{transition:background .16s linear}.btn:hover{transform:none}}

.sectionbar{display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:0 0 var(--sp3); flex-wrap:wrap}
.sectionbar h2{position:relative; display:inline-block; font-family:'Archivo Expanded',Pretendard,sans-serif;
  font-weight:900; font-size:20px; text-transform:uppercase; letter-spacing:0.02em;
  background:var(--ink); color:#fff; padding:7px 14px; border-radius:8px 2px 8px 2px; transform:rotate(-1.5deg)}
@media (prefers-reduced-motion:reduce){.sectionbar h2{transform:none}}
.tabs{display:flex; gap:6px; flex-wrap:wrap}
.tabs a{font-size:13px; font-weight:800; padding:6px 11px; min-height:36px;
  display:inline-flex; align-items:center; border:2px solid var(--ink); border-radius:var(--r-btn);
  background:var(--surface); color:var(--ink); text-decoration:none}
.tabs a[aria-current="true"]{background:var(--lime)}
.tabs a:hover{background:var(--surface-alt); text-decoration:none}

.list{border:2px solid var(--ink); border-radius:var(--r-card); overflow:hidden; background:var(--surface); box-shadow:var(--sh2)}
.list li{display:grid; grid-template-columns:80px 1fr auto; gap:12px; align-items:center;
  padding:12px 14px; border-top:1px solid var(--hairline)}
.list li:first-child{border-top:0}
.list li:hover{background:var(--surface-alt)}
.thumb{width:80px; height:60px; border:2px solid var(--ink); border-radius:10px 2px 10px 2px;
  overflow:hidden; flex:none; display:block}
.thumb svg{width:80px; height:60px; aspect-ratio:4/3}
.list__body{min-width:0}
.list__title{font-weight:800; font-size:16px; color:var(--link); display:inline-block;
  overflow-wrap:break-word}
.list__title:hover{color:var(--link-hover)}
.list__meta{display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  margin-top:5px; color:var(--muted); font-size:12px}
.list__meta .badge{font-size:10px; padding:3px 6px; transform:rotate(-2deg)}
@media (prefers-reduced-motion:reduce){.list__meta .badge{transform:none}}
.list__right{display:flex; flex-direction:column; align-items:flex-end; gap:6px; text-align:right}

.pager{display:flex; gap:8px; justify-content:center; align-items:center;
  margin:var(--sp4) 0 0; flex-wrap:wrap}
.pager a,.pager span{min-width:44px; min-height:44px; display:inline-flex; align-items:center;
  justify-content:center; border:2px solid var(--ink); border-radius:8px 2px 8px 2px;
  background:var(--surface); color:var(--ink); font-weight:800; text-decoration:none;
  font-family:'Space Mono',monospace; box-shadow:var(--sh1)}
.pager a:hover{background:var(--surface-alt); text-decoration:none}
.pager [aria-current="page"]{background:var(--magenta); color:var(--ink)}

/* ===== RIGHT: widgets rail ===== */
.rcol{position:relative}
.rank{counter-reset:r}
.rank li{display:flex; gap:10px; align-items:flex-start; padding:9px 2px; border-top:1px solid var(--hairline)}
.rank li:first-child{border-top:0}
.rank .num{counter-increment:r; flex:none; width:26px; height:26px; display:inline-flex;
  align-items:center; justify-content:center; font-family:'Archivo Expanded',Pretendard,sans-serif;
  font-weight:900; font-size:13px; border:2px solid var(--ink); border-radius:8px 2px 8px 2px;
  background:var(--surface)}
.rank li:nth-child(-n+3) .num{background:var(--magenta); color:var(--ink)}
.rank .num::before{content:counter(r)}
.rank a{font-weight:700; font-size:14px}
.tagcloud{display:flex; flex-wrap:wrap; gap:8px}
.tagcloud a{font-family:'Archivo Expanded',Pretendard,sans-serif; font-weight:900; font-size:12px;
  text-transform:uppercase; padding:7px 11px; min-height:36px; display:inline-flex; align-items:center;
  border:2px solid var(--ink); border-radius:var(--r-badge);
  background:var(--surface); color:var(--ink); text-decoration:none; box-shadow:var(--sh1);
  transition:transform .16s var(--ease)}
.tagcloud a:nth-child(3n+1){background:var(--lime)}
.tagcloud a:nth-child(3n+2){background:var(--yellow)}
.tagcloud a:hover{transform:translate(-1px,-1px); text-decoration:none}
@media (prefers-reduced-motion:reduce){.tagcloud a:hover{transform:none}}
.gallery2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.gtile{border:2px solid var(--ink); border-radius:10px 2px 10px 2px; overflow:hidden;
  display:block; box-shadow:var(--sh1)}
.gtile:hover{text-decoration:none}
.gtile svg{width:100%; height:auto; aspect-ratio:4/3}
.gtile span{display:block; padding:6px 8px; font-size:12px; font-weight:700; color:var(--ink);
  background:var(--surface); border-top:2px solid var(--ink)}
.banner{position:relative; display:block; text-decoration:none; background:var(--blue); color:#fff;
  border:2px solid var(--ink); border-radius:var(--r-card); box-shadow:var(--sh2);
  padding:var(--sp4) var(--sp3); text-align:center; transition:transform .16s var(--ease)}
.banner:hover{text-decoration:none; transform:translate(-1px,-1px); color:#fff}
@media (prefers-reduced-motion:reduce){.banner:hover{transform:none}}
.banner .big{font-family:'Archivo Expanded',Pretendard,sans-serif; font-weight:900; font-size:24px;
  text-transform:uppercase; display:block}
.banner .small{font-size:13px; color:#fff; display:block; margin-top:6px}

/* ===== footer ===== */
.foot{border-top:2px solid var(--ink); background:var(--surface); margin-top:var(--sp5)}
.foot__inner{max-width:var(--shell); margin:0 auto; padding:var(--sp4); display:flex;
  flex-direction:column; gap:var(--sp3)}
.foot nav{display:flex; flex-wrap:wrap; gap:14px}
.foot nav a{font-weight:700; font-size:14px}
.foot__label{font-family:'Space Mono',monospace; font-size:13px; color:var(--muted); margin:0}

/* sticker decorations on panels (decorative, below content z-index) */
.deco{position:absolute; z-index:0; border:2px solid var(--ink); border-radius:var(--r-badge);
  box-shadow:var(--sh1); font-family:'Archivo Expanded',Pretendard,sans-serif; font-weight:900;
  font-size:11px; padding:4px 8px; text-transform:uppercase; pointer-events:none; color:var(--ink)}
.panel > *:not(.deco){position:relative; z-index:1}

/* ===== responsive ===== */
@media (max-width:1024px){
  :root{--leftnav:180px; --rail:260px}
}
@media (max-width:768px){
  .shell{grid-template-columns:1fr; gap:var(--sp4)}
  .lcol{order:1}
  .ccol{order:2}
  .rcol{order:3}
  /* left nav tree -> horizontal chip scroll */
  .lcol .navtree{display:flex; gap:8px; overflow-x:auto; padding-bottom:6px;
    -webkit-overflow-scrolling:touch}
  .lcol .navtree > li{flex:none}
  .lcol .navtree .sub{display:none}
  .lcol .navtree li > a{white-space:nowrap; border:2px solid var(--ink);
    border-radius:var(--r-btn); box-shadow:var(--sh1)}
  .rcol{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp4)}
  .rcol .panel{margin-bottom:0}
  .rcol .banner{grid-column:1 / -1}
}
@media (max-width:480px){
  body{font-size:15px}
  .topbar__inner{padding:var(--sp3)}
  .logo__name{font-size:24px}
  .gnb a{font-size:14px}
  .rcol{grid-template-columns:1fr}
  .gallery2{grid-template-columns:1fr 1fr}
  .list li{grid-template-columns:64px 1fr}
  .list__right{grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:flex-start; text-align:left}
  .thumb,.thumb svg{width:64px; height:48px}
  .featured h2{font-size:22px}
  .badge{transform:rotate(-2deg) !important}
}

/* ============ gnuboard dynamic supplements (Sticker-bomb Maximal) ============ */
/* thumb images inside .thumb wrappers */
.thumb img{width:100%;height:100%;object-fit:cover;display:block;}
/* featured figure images */
.featured .figure img{width:100%;height:auto;object-fit:cover;display:block;aspect-ratio:4/3;}
/* pager: gnuboard outputs <strong> for current page */
.pager strong,.pager .now{background:var(--magenta);color:var(--ink);border-color:var(--ink);}
/* board list h1 */
.board-list-h1{font-family:'Archivo Expanded',Pretendard,sans-serif;font-size:26px;font-weight:900;
  text-transform:uppercase;letter-spacing:0.02em;color:var(--ink);margin:0;}
/* board list actions */
.board-actions{display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap;margin-top:var(--sp4);padding-top:var(--sp3);border-top:2px solid var(--hairline);}
.board-actions .board-search{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.board-actions select,.board-actions input[type=text]{height:44px;padding:0 12px;
  font-size:14px;background:var(--surface);color:var(--ink);
  border:2px solid var(--ink);border-radius:var(--r-input);}
.board-actions .btn-write{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;
  background:var(--magenta);color:var(--ink);border:2px solid var(--ink);
  border-radius:var(--r-btn);font-weight:900;font-size:15px;box-shadow:var(--sh2);text-decoration:none;}
.board-actions .btn-write:hover{background:var(--lime);text-decoration:none;}
/* board detail (view) */
.hm-board-view{background:var(--surface);border:2px solid var(--ink);border-radius:var(--r-card);
  box-shadow:var(--sh2);padding:var(--sp4);margin:var(--sp4) auto var(--sp4);max-width:860px;}
.hm-view-head{border-bottom:3px solid var(--ink);padding-bottom:var(--sp3);margin-bottom:var(--sp4);}
.hm-board-kicker{font-family:'Archivo Expanded',Pretendard,sans-serif;font-weight:900;
  font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--magenta);margin:0 0 8px;}
.hm-view-head h1{font-family:'Archivo Expanded',Pretendard,sans-serif;font-size:26px;
  font-weight:900;line-height:1.2;color:var(--ink);margin:0;}
.hm-view-meta{display:flex;gap:14px;margin-top:var(--sp2);font-family:'Space Mono',monospace;
  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 var(--sp4);
  border-bottom:2px solid var(--hairline);}
.hm-view-content img{max-width:100%;height:auto;border-radius:10px 2px 10px 2px;border:2px solid var(--ink);}
.hm-view-content p{margin:0 0 16px;}
.hm-view-files{display:flex;flex-wrap:wrap;gap:10px;margin:var(--sp3) 0;}
.hm-view-files a{font-family:'Space Mono',monospace;font-size:13px;border:2px solid var(--ink);
  border-radius:var(--r-badge);padding:6px 12px;color:var(--link);background:var(--surface-alt);}
.hm-view-neighbor{display:flex;flex-direction:column;gap:8px;margin:var(--sp4) 0;}
.hm-view-neighbor a{display:flex;gap:12px;padding:10px 12px;border:2px solid var(--ink);
  border-radius:var(--r-card);background:var(--surface-alt);}
.hm-view-neighbor span{font-family:'Space Mono',monospace;font-size:12px;color:var(--muted);flex:0 0 auto;}
.hm-view-neighbor strong{font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hm-view-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:var(--sp3);}
.hm-view-actions a{min-height:44px;display:inline-flex;align-items:center;padding:0 16px;
  border:2px solid var(--ink);border-radius:var(--r-btn);font-weight:800;font-size:14px;
  color:var(--ink);background:var(--surface);box-shadow:var(--sh1);}
.hm-view-actions a:hover{background:var(--surface-alt);text-decoration:none;}
.hm-view-actions a.is-primary{background:var(--magenta);color:var(--ink);border-color:var(--ink);}
.hm-view-actions a.is-primary:hover{background:var(--lime);}
.hm-view-vote{display:flex;gap:10px;margin:var(--sp3) 0;}
.hm-view-vote a{padding:8px 16px;border:2px solid var(--ink);border-radius:var(--r-btn);
  color:var(--ink);font-family:'Space Mono',monospace;font-size:13px;background:var(--surface-alt);}
.hm-view-vote a:hover{background:var(--lime);}
/* list board total count strip */
.list-total{font-family:'Space Mono',monospace;font-size:13px;color:var(--muted);margin-bottom:var(--sp3);}
/* view page: additional sections (board list-5, pager, recommended) — reuses list/sectionbar/pager classes */
.hm-view-block{margin:var(--sp5) auto var(--sp4);max-width:860px;}