/* ===================== Tokens ===================== */
:root{
  --bg:#0A0E14;
  --surface:#121821;
  --surface-alt:#1A2330;
  --text:#E6EEF5;
  --muted:#8FA3B5;
  --border:#28323F;
  --accent:#22E0E8;        /* cyan */
  --accent-2:#FFB02E;      /* amber */
  --danger:#FF3B4E;        /* redline */
  --success:#3CE089;       /* green */
  --on-accent:#0A0E14;

  --glow-cyan:0 0 14px hsl(182 81% 52% / .30);
  --glow-cyan-strong:0 0 18px hsl(182 81% 52% / .45);
  --glow-amber:0 0 16px hsl(38 100% 59% / .32);
  --glow-red:0 0 16px hsl(354 100% 62% / .35);
  --panel-hi:0 1px 0 hsl(0 0% 100% / .03);
  --btn-inset:inset 0 0 0 1px #5CF0F6;

  --r:2px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;

  --shell:1280px;
  --rail:280px;

  --font-body:Pretendard,'Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',sans-serif;
  --font-num:'IBM Plex Mono','Inter Tight',ui-monospace,'Roboto Mono',monospace;
  --font-disp:Rajdhani,Pretendard,sans-serif;

  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  letter-spacing:-0.01em;
  background-image:repeating-linear-gradient(180deg, hsl(216 33% 8% / .55) 0 2px, transparent 2px 5px);
  background-attachment:fixed;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r)}

.num{font-family:var(--font-num);font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--on-accent);padding:8px 14px;z-index:200}
.skip:focus{left:8px;top:8px}

/* ===================== Buttons ===================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;padding:0 18px;border-radius:var(--r);
  font-family:var(--font-disp);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;border:1px solid transparent;background:transparent;color:var(--text);
  transition:transform .14s var(--ease),box-shadow .14s var(--ease),border-color .14s var(--ease),color .14s var(--ease);
  text-decoration:none;
}
.btn--primary{background:var(--accent);color:var(--on-accent);box-shadow:var(--btn-inset),var(--glow-cyan)}
.btn--primary:hover{box-shadow:var(--btn-inset),var(--glow-cyan-strong);transform:translateY(-1px);text-decoration:none}
.btn--primary:active{box-shadow:var(--btn-inset),0 0 6px hsl(182 81% 52% / .45);transform:translateY(0)}
.btn--primary:disabled{opacity:.5;box-shadow:none;background:transparent;border-color:var(--border);color:var(--muted)}
.btn--outline{border-color:var(--border);color:var(--text)}
.btn--outline:hover{border-color:var(--accent);box-shadow:var(--glow-cyan);text-decoration:none}
.btn--ghost{color:var(--muted);min-height:44px;padding:0 10px}
.btn--ghost:hover{color:var(--text);box-shadow:inset 0 -1px 0 var(--accent);text-decoration:none}
.btn--danger{border:1px solid var(--danger);color:var(--danger)}
.btn--danger:hover{background:var(--danger);color:var(--on-accent);box-shadow:var(--glow-red);text-decoration:none}

/* ===================== Header ===================== */
.site-header{
  position:sticky;top:0;z-index:100;
  background:hsl(216 33% 6% / .92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 0 hsl(182 81% 52% / .12);
}
.header-inner{
  max-width:var(--shell);margin:0 auto;height:56px;
  display:flex;align-items:center;gap:var(--s5);padding:0 var(--s4);
}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand__ring{width:30px;height:30px;flex:0 0 auto}
.brand__name{font-family:var(--font-disp);font-weight:700;font-size:19px;letter-spacing:.05em;text-transform:uppercase;color:var(--text)}
.brand__name b{color:var(--accent)}
.brand__sub{font-family:var(--font-num);font-size:10px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase;display:block;line-height:1}

.main-nav{display:flex;gap:2px;flex:1 1 auto}
.main-nav a{
  display:flex;align-items:center;min-height:44px;padding:0 14px;
  font-family:var(--font-disp);font-weight:600;font-size:15px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);border-bottom:2px solid transparent;transition:color .14s var(--ease),border-color .14s var(--ease);
}
.main-nav a:hover{color:var(--accent-2);border-bottom-color:var(--accent-2);text-decoration:none}
.main-nav a[aria-current="page"]{color:var(--text);border-bottom-color:var(--accent);text-shadow:var(--glow-cyan)}

.header-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.nav-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border);border-radius:var(--r);color:var(--text);cursor:pointer}
.nav-toggle svg{width:20px;height:20px}

/* ===================== Signature: RPM Gauge Strip ===================== */
.rpm-strip{
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,var(--surface),var(--bg));
}
.rpm-inner{
  max-width:var(--shell);margin:0 auto;padding:var(--s3) var(--s4);
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--s5);
}
.rpm-gauge{min-width:0}
.rpm-label{
  font-family:var(--font-num);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  display:flex;justify-content:space-between;margin-bottom:6px;
}
.rpm-label .redzone{color:var(--danger)}
.rpm-track{
  position:relative;height:18px;border:1px solid var(--border);border-radius:var(--r);
  background:
    repeating-linear-gradient(90deg, var(--border) 0 1px, transparent 1px 28px);
  overflow:hidden;
}
.rpm-fill{
  position:absolute;inset:0 62% 0 0;
  background:linear-gradient(90deg, hsl(182 81% 52% / .14), hsl(182 81% 52% / .42));
  box-shadow:var(--glow-cyan);
}
.rpm-redzone{position:absolute;top:0;bottom:0;right:0;width:18%;background:hsl(354 100% 62% / .18)}
.rpm-needle{
  position:absolute;top:-3px;bottom:-3px;left:38%;width:3px;background:var(--accent);
  box-shadow:var(--glow-cyan-strong);
}
.rpm-readout{
  display:flex;gap:var(--s5);font-family:var(--font-num);font-feature-settings:"tnum" 1;
}
.readout{display:flex;flex-direction:column;align-items:flex-end;line-height:1}
.readout .v{font-size:22px;font-weight:600;color:var(--accent)}
.readout .v.amber{color:var(--accent-2)}
.readout .v.green{color:var(--success)}
.readout .k{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:5px}

/* ===================== Layout shell ===================== */
.shell{max-width:var(--shell);margin:0 auto;padding:var(--s5) var(--s4) var(--s8)}
.layout{display:grid;grid-template-columns:minmax(0,1fr) var(--rail);gap:var(--s5);align-items:start}

/* ===================== Hero / Notice ===================== */
.notice{
  grid-column:1 / -1;
  display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent-2);
  border-radius:var(--r);padding:var(--s4) var(--s5);box-shadow:var(--panel-hi);
  margin-bottom:var(--s5);
}
.notice__pin{
  font-family:var(--font-num);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-accent);background:var(--accent-2);padding:4px 9px;border-radius:var(--r);box-shadow:var(--glow-amber);
}
.notice__text{flex:1 1 320px;min-width:0}
.notice__text strong{color:var(--text)}
.notice__text span{color:var(--muted)}

.hero-h1{
  grid-column:1 / -1;
  font-family:var(--font-disp);font-weight:700;font-size:39px;line-height:1.15;letter-spacing:.04em;text-transform:uppercase;
  margin:0 0 var(--s2);
}
.hero-h1 em{color:var(--accent);font-style:normal;text-shadow:var(--glow-cyan)}
.hero-sub{grid-column:1 / -1;color:var(--muted);margin:0 0 var(--s5);max-width:42ch}

/* ===================== Section heads ===================== */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);margin:0 0 var(--s4)}
.sec-head h2{
  font-family:var(--font-disp);font-weight:700;font-size:25px;line-height:1.2;letter-spacing:.04em;text-transform:uppercase;margin:0;
  display:flex;align-items:center;gap:10px;
}
.sec-head h2::before{content:"";width:3px;height:22px;background:var(--accent);box-shadow:var(--glow-cyan);display:inline-block}
.sec-head a{font-family:var(--font-num);font-size:12px;letter-spacing:.1em;text-transform:uppercase}

/* ===================== Board table ===================== */
.board{margin-bottom:var(--s7)}
.board-table{width:100%;border-collapse:collapse;border:1px solid var(--border);background:var(--surface);border-radius:var(--r);overflow:hidden}
.board-table caption{text-align:left;font-family:var(--font-num);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:0 0 var(--s2)}
.board-table thead th{
  font-family:var(--font-num);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  text-align:left;padding:10px var(--s4);border-bottom:1px solid var(--border);background:var(--surface-alt);
}
.board-table th.r,.board-table td.r{text-align:right}
.board-table td.c,.board-table th.c{text-align:center}
.board-table tbody tr{border-bottom:1px solid var(--border);position:relative;transition:background .14s var(--ease)}
.board-table tbody tr:last-child{border-bottom:0}
.board-table tbody tr:hover{background:var(--surface-alt)}
.board-table tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.board-table td{padding:0 var(--s4);height:44px;vertical-align:middle;color:var(--text)}
.board-table td a.title{color:var(--text);font-weight:500}
.board-table td a.title:hover{color:var(--accent);text-decoration:underline}
.cat{font-family:var(--font-num);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.cat.amber{color:var(--accent-2)}
.cat.green{color:var(--success)}
.cat.red{color:var(--danger)}
.cnt{display:inline-block;margin-left:8px;font-family:var(--font-num);font-size:12px;font-weight:600;color:var(--accent-2)}
.badge{
  display:inline-block;font-family:var(--font-num);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 6px;border-radius:var(--r);margin-left:8px;border:1px solid;
}
.badge.new{color:var(--accent);border-color:hsl(182 81% 52% / .5);background:hsl(182 81% 52% / .08)}
.badge.hot{color:var(--accent-2);border-color:hsl(38 100% 59% / .5);background:hsl(38 100% 59% / .08)}
.badge.notice{color:var(--success);border-color:hsl(148 73% 56% / .5);background:hsl(148 73% 56% / .08)}
.meta-num{font-family:var(--font-num);font-feature-settings:"tnum" 1;font-size:13px;color:var(--muted)}
.meta-num.v{color:var(--text)}

/* ===================== Gallery ===================== */
.gallery-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:var(--s4);
}
.card{
  background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--panel-hi);
  display:flex;flex-direction:column;transition:box-shadow .16s var(--ease),transform .16s var(--ease);
}
.card:hover{box-shadow:var(--panel-hi),var(--glow-cyan);transform:translateY(-2px)}
.card__thumb{position:relative;aspect-ratio:4/3;width:100%}
.card__thumb svg{width:100%;height:100%;display:block;object-fit:cover}
.card__pin{
  position:absolute;left:0;bottom:0;display:flex;gap:10px;
  font-family:var(--font-num);font-feature-settings:"tnum" 1;font-size:11px;font-weight:600;letter-spacing:.06em;
  color:var(--text);background:hsl(216 33% 6% / .82);padding:5px 9px;border-top-right-radius:var(--r);
}
.card__pin .ico{color:var(--accent)}
.card__body{padding:var(--s4)}
.card__cat{font-family:var(--font-num);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:6px}
.card__title{font-size:16px;font-weight:500;line-height:1.4;margin:0 0 var(--s3);color:var(--text)}
.card a.card__title:hover{color:var(--accent);text-decoration:underline}
.card__meta{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-num);font-size:12px;color:var(--muted)}

/* ===================== Aside rail ===================== */
.rail{display:flex;flex-direction:column;gap:var(--s5)}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--panel-hi);overflow:hidden}
.panel__head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:var(--s3) var(--s4);border-bottom:1px solid var(--border);background:var(--surface-alt);
}
.panel__head h3{font-family:var(--font-disp);font-weight:600;font-size:16px;letter-spacing:.05em;text-transform:uppercase;margin:0}
.panel__head .dot{width:8px;height:8px;border-radius:9999px;background:var(--success);box-shadow:0 0 8px hsl(148 73% 56% / .7)}
.panel__body{padding:var(--s4)}

.search{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:0 12px;height:44px;transition:border-color .14s var(--ease),box-shadow .14s var(--ease)}
.search:focus-within{border-color:var(--accent);box-shadow:inset 0 0 8px hsl(182 81% 52% / .2)}
.search .aim{color:var(--accent);font-size:16px;flex:0 0 auto}
.search input{flex:1 1 auto;min-width:0;background:transparent;border:0;color:var(--text);font-family:var(--font-body);font-size:14px}
.search input::placeholder{color:var(--muted)}
.search input:focus{outline:none}

.rank{list-style:none;margin:0;padding:0}
.rank li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}
.rank li:last-child{border-bottom:0}
.rank .pos{font-family:var(--font-num);font-size:13px;font-weight:600;color:var(--accent);width:22px;flex:0 0 auto;text-align:center}
.rank .pos.top{color:var(--accent-2)}
.rank a{color:var(--text);flex:1 1 auto;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank a:hover{color:var(--accent)}
.rank .rpm{font-family:var(--font-num);font-feature-settings:"tnum" 1;font-size:12px;color:var(--muted);flex:0 0 auto}

.gauge-row{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s4)}
.gauge-row:last-child{margin-bottom:0}
.gauge-row .top{display:flex;justify-content:space-between;font-family:var(--font-num);font-size:12px}
.gauge-row .top .name{color:var(--text)}
.gauge-row .top .val{color:var(--accent)}
.gauge-bar{height:8px;border:1px solid var(--border);border-radius:var(--r);background:repeating-linear-gradient(90deg,var(--border) 0 1px,transparent 1px 14px);overflow:hidden}
.gauge-bar i{display:block;height:100%;background:var(--accent);box-shadow:var(--glow-cyan)}
.gauge-bar i.amber{background:var(--accent-2);box-shadow:var(--glow-amber)}

/* ===================== Pagination ===================== */
.pager{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:var(--s5)}
.pager a,.pager span{
  min-width:36px;min-height:36px;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-num);font-size:13px;border:1px solid var(--border);border-radius:var(--r);color:var(--muted);
}
.pager a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.pager .cur{background:var(--accent);color:var(--on-accent);border-color:var(--accent);box-shadow:var(--glow-cyan)}

/* ===================== Footer ===================== */
.site-footer{border-top:1px solid var(--border);background:var(--surface);margin-top:var(--s7)}
.footer-inner{max-width:var(--shell);margin:0 auto;padding:var(--s6) var(--s4);display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--s5)}
.footer-inner h4{font-family:var(--font-disp);font-weight:600;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--text);margin:0 0 var(--s3)}
.footer-inner ul{list-style:none;margin:0;padding:0}
.footer-inner li{margin-bottom:8px}
.footer-inner a{color:var(--muted);font-size:14px}
.footer-inner a:hover{color:var(--accent)}
.footer-inner p{color:var(--muted);margin:0;max-width:34ch}
.footer-bottom{border-top:1px solid var(--border)}
.footer-bottom .fb-inner{max-width:var(--shell);margin:0 auto;padding:var(--s4);display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
.footer-bottom small{font-family:var(--font-num);font-size:12px;letter-spacing:.08em;color:var(--muted)}
.footer-bottom .sig{color:var(--accent)}

/* ===================== Responsive ===================== */
@media (max-width:1024px){
  :root{--rail:240px}
}
@media (max-width:768px){
  .layout{grid-template-columns:1fr}
  .rail{order:3}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .main-nav{
    position:fixed;left:0;right:0;bottom:0;z-index:90;
    background:hsl(216 33% 6% / .97);border-top:1px solid var(--border);
    display:none;flex-direction:column;padding:var(--s3);gap:0;
    box-shadow:0 -2px 16px hsl(0 0% 0% / .5);
  }
  .main-nav.open{display:flex}
  .main-nav a{border-bottom:1px solid var(--border)}
  .main-nav a[aria-current="page"]{border-bottom-color:var(--border);box-shadow:inset 3px 0 0 var(--accent)}
  .nav-toggle{display:inline-flex}
  .header-actions .btn--outline{display:none}
  .rpm-inner{grid-template-columns:1fr}
  .rpm-readout{justify-content:space-between}
  .hero-h1{font-size:31px}
}
@media (max-width:480px){
  .shell{padding:var(--s4) var(--s3) var(--s7)}
  .rpm-gauge{display:none}
  .rpm-readout{width:100%;justify-content:space-between;gap:var(--s3)}
  .readout .v{font-size:18px}
  .gallery-grid{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}
  .board-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .board-table,.board-table tbody,.board-table tr,.board-table td{display:block;width:100%}
  .board-table tr{padding:var(--s3) var(--s4);border-bottom:1px solid var(--border)}
  .board-table td{height:auto;padding:0;border:0}
  .board-table td.col-title{margin-bottom:6px}
  .board-table td.col-title a.title{font-size:16px}
  .board-table td.col-meta{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
  .board-table td.col-writer,.board-table td.col-date,.board-table td.col-hit,.board-table td.col-cmt{display:none}
  .board-table tr:hover td:first-child{box-shadow:none}
  .brand__sub{display:none}
  .hero-h1{font-size:27px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}

/* ===================== dynamic-supplements ===================== */
/* Thumb images inside card wrappers */
.card__thumb img{
  width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0;
}
.card__thumb{overflow:hidden}

/* Gnuboard pager — current page strong/active */
.pager strong{
  min-width:36px;min-height:36px;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-num);font-size:13px;border:1px solid var(--accent);border-radius:var(--r);
  background:var(--accent);color:var(--on-accent);box-shadow:var(--glow-cyan);font-weight:700;
}
.pager .on,.pager .active{
  background:var(--accent);color:var(--on-accent);border-color:var(--accent);box-shadow:var(--glow-cyan);
}

/* Board actions bar */
.board-actions{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s3);
  margin-top:var(--s5);
}
.board-search{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.board-search select{
  background:var(--surface);border:1px solid var(--border);color:var(--text);
  font-family:var(--font-body);font-size:14px;padding:0 10px;height:38px;border-radius:var(--r);
  cursor:pointer;
}
.board-search input[type="text"]{
  background:var(--bg);border:1px solid var(--border);color:var(--text);
  font-family:var(--font-body);font-size:14px;padding:0 12px;height:38px;border-radius:var(--r);min-width:160px;
}
.board-search input[type="text"]::placeholder{color:var(--muted)}
.board-search input[type="text"]:focus{outline:none;border-color:var(--accent);box-shadow:var(--glow-cyan)}
.board-search button{
  font-family:var(--font-disp);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:0 16px;height:38px;border-radius:var(--r);cursor:pointer;border:1px solid var(--border);
  background:var(--surface-alt);color:var(--text);transition:border-color .14s,background .14s;
}
.board-search button:hover{border-color:var(--accent);color:var(--accent)}
.board-actions .btn--primary,.board-actions .btn-primary{
  display:inline-flex;align-items:center;padding:0 18px;min-height:38px;
  font-family:var(--font-disp);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--accent);color:var(--on-accent);border-color:var(--accent);box-shadow:var(--glow-cyan);
  border-radius:var(--r);border:1px solid var(--accent);text-decoration:none;
}
.board-actions .btn--primary:hover,.board-actions .btn-primary:hover{box-shadow:var(--glow-cyan-strong);text-decoration:none}

/* Section head board-h1 on list pages */
.board-h1{
  font-family:var(--font-disp);font-weight:700;font-size:25px;letter-spacing:.04em;text-transform:uppercase;
  margin:0;display:flex;align-items:center;gap:10px;
}
.board-h1::before{
  content:"";width:3px;height:22px;background:var(--accent);box-shadow:var(--glow-cyan);display:inline-block;
}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);margin:0 0 var(--s4)}
.section-head .more{font-family:var(--font-num);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.section-head .more:hover{color:var(--accent)}
.section-head .mono{font-family:var(--font-num);font-size:12px;color:var(--muted)}

/* Feed / webzine list layout (list.skin) */
.feed{min-width:0}
.webzine{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s4)}
.wz-featured,.wz-row{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--panel-hi);
  display:flex;gap:0;transition:box-shadow .16s var(--ease),transform .16s var(--ease);
}
.wz-featured:hover,.wz-row:hover{box-shadow:var(--panel-hi),var(--glow-cyan);transform:translateY(-1px)}
.wz-featured{flex-direction:column}
.wz-row{flex-direction:row;align-items:stretch}
.wz-thumb{position:relative;flex:0 0 auto;overflow:hidden}
.wz-featured .wz-thumb{width:100%;aspect-ratio:16/7}
.wz-row .wz-thumb{width:140px;aspect-ratio:4/3}
.wz-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.wz-body{padding:var(--s4);flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.wz-cat{font-family:var(--font-num);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:6px}
.wz-title{font-family:var(--font-body);font-weight:600;font-size:17px;line-height:1.4;margin:0 0 var(--s3)}
.wz-featured .wz-title{font-size:22px}
.wz-title a{color:var(--text)}
.wz-title a:hover{color:var(--accent);text-decoration:underline}
.wz-excerpt{color:var(--muted);font-size:14px;line-height:1.6;margin:0 0 var(--s3)}
.wz-meta{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;font-family:var(--font-num);font-size:12px;color:var(--muted)}
.wz-meta .author{color:var(--text)}
.wz-meta .cmt{color:var(--accent-2)}
.wz-thumb .badge{
  position:absolute;top:8px;left:8px;z-index:2;
  font-family:var(--font-num);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;border-radius:var(--r);border:none;margin:0;
}
.wz-thumb .badge.hot{background:var(--accent-2);color:var(--on-accent);box-shadow:var(--glow-amber)}
.wz-thumb .badge.new{background:var(--accent);color:var(--on-accent);box-shadow:var(--glow-cyan)}
.wz-thumb .badge.spec{background:var(--success);color:var(--on-accent)}

/* hm-board-view styles (view.skin.php) */
.hm-board-view{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--panel-hi);overflow:hidden;
}
.hm-view-head{
  padding:var(--s5) var(--s5) var(--s4);
  border-bottom:1px solid var(--border);background:var(--surface-alt);
}
.hm-board-kicker{
  font-family:var(--font-num);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:0 0 var(--s2);
}
.hm-view-head h1{
  font-family:var(--font-disp);font-weight:700;font-size:26px;line-height:1.3;letter-spacing:.02em;
  color:var(--text);margin:0 0 var(--s3);
}
.hm-view-meta{
  display:flex;gap:var(--s4);flex-wrap:wrap;font-family:var(--font-num);font-size:13px;color:var(--muted);
}
.hm-view-meta span{display:inline-flex;align-items:center;gap:4px}
.hm-view-files{
  padding:var(--s3) var(--s5);border-bottom:1px solid var(--border);display:flex;flex-wrap:wrap;gap:var(--s3);
}
.hm-view-files a{
  font-family:var(--font-num);font-size:12px;color:var(--accent);border:1px solid var(--border);
  padding:4px 10px;border-radius:var(--r);transition:border-color .14s;
}
.hm-view-files a:hover{border-color:var(--accent)}
.hm-view-content{
  padding:var(--s5);color:var(--text);font-size:16px;line-height:1.75;
}
.hm-view-content img{max-width:100%;height:auto;border-radius:var(--r);margin:var(--s3) 0}
.hm-view-content p{margin:0 0 var(--s4)}
.hm-view-content a{color:var(--accent)}
.hm-view-content a:hover{text-decoration:underline}
.hm-view-vote{
  padding:var(--s3) var(--s5);border-top:1px solid var(--border);display:flex;gap:var(--s3);
}
.hm-view-vote a{
  display:inline-flex;align-items:center;gap:6px;padding:0 16px;height:38px;
  font-family:var(--font-disp);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--border);border-radius:var(--r);color:var(--text);transition:border-color .14s,color .14s;
}
.hm-view-vote a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.hm-view-neighbor{
  border-top:1px solid var(--border);
}
.hm-view-neighbor a{
  display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s5);
  border-bottom:1px solid var(--border);font-size:14px;color:var(--text);transition:background .14s;
}
.hm-view-neighbor a:last-child{border-bottom:0}
.hm-view-neighbor a:hover{background:var(--surface-alt);text-decoration:none}
.hm-view-neighbor span{font-family:var(--font-num);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);flex:0 0 60px}
.hm-view-neighbor strong{color:var(--text);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-view-actions{
  padding:var(--s4) var(--s5);border-top:1px solid var(--border);background:var(--surface-alt);
  display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;
}
.hm-view-actions a{
  display:inline-flex;align-items:center;padding:0 16px;height:38px;
  font-family:var(--font-disp);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--border);border-radius:var(--r);color:var(--text);transition:border-color .14s,color .14s;text-decoration:none;
}
.hm-view-actions a:hover{border-color:var(--accent);color:var(--accent)}
.hm-view-actions a.is-primary{
  background:var(--accent);color:var(--on-accent);border-color:var(--accent);box-shadow:var(--glow-cyan);
}
.hm-view-actions a.is-primary:hover{box-shadow:var(--glow-cyan-strong)}

/* View page extra blocks (board list-5, paging, recommended) */
.hm-view-block{margin-top:var(--s6)}

/* Responsive supplements */
@media (max-width:768px){
  .wz-row{flex-direction:column}
  .wz-row .wz-thumb{width:100%;aspect-ratio:16/7}
}
@media (max-width:480px){
  .wz-featured .wz-title{font-size:18px}
  .hm-view-head h1{font-size:20px}
}