/* Theme: Racing Sport Carbon Daylight (site 018 — beerlinecafe-hub.com) — from design-system sample */
:root{
  --bg:#F7F6F4; --surface:#FFFFFF; --surface-alt:#EDECE8;
  --text:#16181C; --muted:#5A5F66; --border:#D6D4CF;
  --accent:#C8102E; --accent-hover:#A60D26; --accent-link:#B30D26;
  --accent2:#FFC400; --success:#1E7F45; --checker:#1C1E22;
  --shell:1080px; --rail:280px; --gutter:32px; --header-h:64px;
  --r-btn:4px; --r-card:6px; --r-img:6px; --r-chip:3px;
  --sh1:0 1px 0 var(--border);
  --sh2:0 4px 14px rgba(22,24,28,.10);
  --font-head:"Saira Semi Condensed","Pretendard","Malgun Gothic",sans-serif;
  --font-body:"Pretendard","Malgun Gothic","맑은 고딕",system-ui,sans-serif;
  --font-mono:"JetBrains Mono","D2Coding",ui-monospace,monospace;
  --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(--text);
  font-family:var(--font-body); font-size:16px; line-height:1.65;
  letter-spacing:-.005em; overflow-x:hidden;
}
a{color:var(--accent-link); text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--accent2); outline-offset:2px;
  box-shadow:0 0 0 1px var(--text);
}
img{display:block; max-width:100%}
figure{margin:0}
h1,h2,h3{font-family:var(--font-head); font-style:italic; letter-spacing:-.01em; margin:0}
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums}
.skip{position:absolute; left:-999px; top:auto}
.skip:focus{left:8px; top:8px; z-index:50; background:var(--surface); color:var(--text); padding:8px 16px; border:2px solid var(--accent); border-radius:var(--r-btn)}

/* ---------- Header ---------- */
.site-header{position:sticky; top:0; z-index:30; background:var(--surface); box-shadow:var(--sh1)}
.header-inner{
  max-width:var(--shell); margin:0 auto; height:var(--header-h);
  display:flex; align-items:center; gap:16px; padding:0 16px;
}
.brand{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.brand .logo{width:34px; height:34px; flex:0 0 auto}
.brand b{font-family:var(--font-head); font-style:italic; font-weight:800; font-size:22px; letter-spacing:-.01em; display:block; line-height:1}
.brand .tag{font-family:var(--font-mono); font-size:11px; color:var(--muted); letter-spacing:.02em}
.gnb{display:flex; gap:4px; margin-left:8px; flex:1 1 auto}
.gnb a{
  position:relative; color:var(--text); font-weight:600; font-size:15px;
  padding:10px 12px; border-radius:var(--r-btn); min-height:44px; display:flex; align-items:center;
}
.gnb a:hover{background:var(--surface-alt); text-decoration:none}
.gnb a[aria-current="page"]{color:var(--accent)}
.gnb a[aria-current="page"]::after{
  content:""; position:absolute; left:12px; right:12px; bottom:4px; height:2px; background:var(--accent)
}
.header-tools{display:flex; align-items:center; gap:8px; flex:0 0 auto}
.search{display:flex; align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-btn); padding:0 8px; height:40px}
.search:focus-within{border-color:var(--accent)}
.search input{border:0; outline:0; background:transparent; font-family:var(--font-mono); font-size:13px; width:120px; color:var(--text); height:38px}
.search input::placeholder{color:var(--muted)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-family:var(--font-body); font-weight:700; font-size:14px;
  border-radius:var(--r-btn); border:1px solid transparent; cursor:pointer;
  min-height:44px; padding:0 16px; transition:background .16s var(--ease), border-color .16s var(--ease), transform .1s var(--ease);
}
.btn-primary{background:var(--accent); color:#fff; border-left:3px solid var(--accent2)}
.btn-primary:hover{background:var(--accent-hover); text-decoration:none}
.btn-primary:active{transform:translateY(1px)}
.checker-strip{height:4px; width:100%; display:block}
.menu-toggle{display:none; background:transparent; border:1px solid var(--border); border-radius:var(--r-btn); color:var(--text); cursor:pointer}

/* ---------- Shell 2-col ---------- */
.shell{max-width:var(--shell); margin:0 auto; padding:32px 16px 64px;
  display:grid; grid-template-columns:1fr var(--rail); gap:var(--gutter)}
.col-body{min-width:0}
.crumbs{font-family:var(--font-mono); font-size:12px; color:var(--muted); margin-bottom:16px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--accent-link)}

/* ---------- Featured ---------- */
.featured{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card);
  overflow:hidden; margin-bottom:32px;
}
.featured figure{position:relative}
.featured .ratio{aspect-ratio:4/3; width:100%}
.featured .ratio svg{width:100%; height:100%; display:block}
.chip-cat{
  position:absolute; top:12px; left:12px; z-index:2;
  background:var(--accent2); color:var(--text); font-family:var(--font-mono);
  font-size:12px; font-weight:700; padding:4px 8px; border-radius:var(--r-chip);
}
.featured .body{padding:24px}
.featured h2{font-size:31px; line-height:1.12; font-weight:700; margin:0 0 12px}
.featured h2 a{color:var(--text)}
.featured h2 a:hover{color:var(--accent-link); text-decoration:none}
.featured p{margin:0 0 16px; color:var(--text)}
.meta{font-family:var(--font-mono); font-size:13px; color:var(--muted); display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.meta .laptime{color:var(--accent)}
.badge{font-family:var(--font-mono); font-size:11px; font-weight:700; padding:2px 6px; border-radius:var(--r-chip)}
.badge-new{background:var(--accent); color:#fff}
.badge-hot{background:var(--accent2); color:var(--text)}
.badge-open{background:var(--success); color:#fff}

/* ---------- Index list ---------- */
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin:0 0 16px; gap:12px}
.section-head h1{font-size:25px; font-weight:800; line-height:1.18}
.section-head .sub{font-family:var(--font-mono); font-size:12px; color:var(--muted)}
.tabbar{display:flex; gap:4px; margin-bottom:16px; border-bottom:1px solid var(--border)}
.tabbar a{
  font-weight:700; font-size:14px; color:var(--muted); padding:10px 14px;
  border-bottom:2px solid transparent; min-height:44px; display:flex; align-items:center;
}
.tabbar a:hover{color:var(--text); text-decoration:none}
.tabbar a[aria-current="true"]{color:var(--accent); border-bottom-color:var(--accent)}

.index{list-style:none; margin:0; padding:0;
  border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden; background:var(--surface)}
.entry{display:flex; gap:16px; padding:16px; border-left:2px solid transparent; position:relative}
.entry + .entry{border-top:1px solid var(--border)}
.entry:nth-child(even){background:var(--surface-alt)}
.entry.is-new{border-left-color:var(--accent)}
.entry:hover{background:var(--surface-alt)}
.entry .thumb{flex:0 0 160px; width:160px}
.entry .thumb .ratio{aspect-ratio:4/3; width:100%; border-radius:var(--r-img); overflow:hidden; border:1px solid var(--border)}
.entry .thumb svg{width:100%; height:100%; display:block}
.entry .content{min-width:0; flex:1 1 auto}
.entry h3{font-family:var(--font-body); font-style:normal; font-size:18px; line-height:1.35; font-weight:700; margin:0 0 6px}
.entry h3 a{color:var(--text); display:inline-block; position:relative}
.entry h3 a::after{content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--accent); transition:width .2s ease-out}
.entry:hover h3 a{color:var(--accent-link); text-decoration:none}
.entry:hover h3 a::after{width:100%}
.entry .excerpt{margin:0 0 8px; color:var(--muted); font-size:14.5px; line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.entry .tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.tag{font-family:var(--font-mono); font-size:11px; color:var(--accent-link); border:1px solid var(--border); border-radius:var(--r-chip); padding:2px 7px}
.tag:hover{border-color:var(--accent); text-decoration:none}

/* ---------- Pagination ---------- */
.pager{display:flex; gap:6px; justify-content:center; margin-top:24px; flex-wrap:wrap}
.pager a, .pager span{
  min-width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:var(--r-btn); font-family:var(--font-mono); font-size:13px; color:var(--text); background:var(--surface)
}
.pager a:hover{border-color:var(--accent); text-decoration:none; color:var(--accent-link)}
.pager .current{background:var(--accent); color:#fff; border-color:var(--accent); font-weight:700}

/* ---------- Sidebar ---------- */
.col-rail{min-width:0}
.widget{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:16px; margin-bottom:24px}
.widget h2{font-size:16px; font-weight:800; margin:0 0 12px; padding-bottom:8px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; font-style:normal; font-family:var(--font-body)}
.widget h2 .dot{width:8px; height:8px; background:var(--accent); border-radius:1px; display:inline-block}
.profile{display:flex; gap:12px; align-items:center; margin-bottom:12px}
.profile .ava{width:52px; height:52px; flex:0 0 auto; border-radius:6px; overflow:hidden; border:1px solid var(--border)}
.profile .ava svg{width:100%; height:100%; display:block}
.profile .name{font-family:var(--font-head); font-style:italic; font-weight:800; font-size:18px}
.profile .role{font-family:var(--font-mono); font-size:12px; color:var(--muted)}
.about{font-size:14px; color:var(--text); margin:0}
.cat-list, .pop-list, .arch-list{list-style:none; margin:0; padding:0}
.cat-list li, .arch-list li{border-top:1px solid var(--border)}
.cat-list li:first-child, .arch-list li:first-child{border-top:0}
.cat-list a, .arch-list a{display:flex; justify-content:space-between; align-items:center; padding:9px 2px; color:var(--text); min-height:40px}
.cat-list a:hover, .arch-list a:hover{color:var(--accent-link); text-decoration:none}
.cat-list .count, .arch-list .count{font-family:var(--font-mono); font-size:12px; color:var(--muted)}
.pop-list li{display:flex; gap:10px; padding:9px 0; border-top:1px solid var(--border); align-items:flex-start}
.pop-list li:first-child{border-top:0}
.pop-list .rank{font-family:var(--font-mono); font-weight:700; color:var(--accent); width:18px; flex:0 0 auto; text-align:center}
.pop-list a{color:var(--text); font-size:14px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.pop-list a:hover{color:var(--accent-link); text-decoration:none}
.tagcloud{display:flex; flex-wrap:wrap; gap:8px}
.photostrip{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.photostrip a{display:block; border-radius:var(--r-img); overflow:hidden; border:1px solid var(--border); aspect-ratio:4/3}
.photostrip svg{width:100%; height:100%; display:block}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--border); background:var(--surface)}
.footer-inner{max-width:var(--shell); margin:0 auto; padding:24px 16px; display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center}
.footer-inner nav{display:flex; flex-wrap:wrap; gap:8px 16px}
.footer-inner nav a{color:var(--muted); font-size:13px}
.footer-inner nav a:hover{color:var(--accent-link)}
.footer-label{font-family:var(--font-mono); font-size:12px; color:var(--muted)}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important}
  .entry h3 a::after{transition:none}
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  :root{--rail:260px}
}
@media (max-width:768px){
  .shell{grid-template-columns:1fr}
  .gnb{display:none}
  .menu-toggle{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin-left:auto}
  .header-tools .search{display:none}
  .col-rail{margin-top:8px}
  .entry .thumb{flex-basis:120px; width:120px}
  .featured h2{font-size:27px}
}
@media (max-width:480px){
  .header-inner{gap:8px}
  .brand .tag{display:none}
  .shell{padding:24px 12px 48px}
  .entry{flex-direction:column}
  .entry .thumb{flex-basis:auto; width:100%}
  .featured .body{padding:16px}
  .featured h2{font-size:24px}
  .section-head{flex-direction:column; gap:4px}
  .pager a, .pager span{min-width:44px; height:44px}
}

/* ============ gnuboard dynamic supplements (Racing Sport Carbon Daylight) ============ */
.entry .thumb img{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--r-img);}
.featured .ratio img{width:100%;height:100%;object-fit:cover;display:block;}
.pager strong,.pager .now{min-width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:var(--r-btn);font-family:var(--font-mono);font-size:13px;font-weight:700;}
.board-actions{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px;padding-top:16px;border-top:1px solid var(--border);}
.board-actions .board-search{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.board-actions select,.board-actions input[type=text]{height:40px;padding:0 10px;font-family:var(--font-body);font-size:14px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--r-btn);}
/* board detail (view) — retinted with site 018 palette */
.hm-board-view{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--sh2);padding:28px;margin:0 auto 24px;max-width:920px;}
.hm-view-head{border-bottom:2px solid var(--checker);padding-bottom:16px;margin-bottom:20px;}
.hm-view-head .hm-board-kicker{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;}
.hm-view-head h1{font-family:var(--font-head);font-style:italic;font-size:28px;font-weight:700;line-height:1.25;color:var(--text);margin:0;}
.hm-view-meta{display:flex;gap:14px;margin-top:12px;font-family:var(--font-mono);font-size:13px;color:var(--muted);flex-wrap:wrap;}
.hm-view-content{font-size:16px;line-height:1.8;color:var(--text);padding:8px 0 24px;border-bottom:1px solid var(--border);}
.hm-view-content img{max-width:100%;height:auto;border-radius:var(--r-img);}
.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(--font-mono);font-size:13px;border:1px solid var(--border);border-radius:var(--r-chip);padding:6px 12px;color:var(--accent-link);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 solid var(--border);border-radius:var(--r-card);background:var(--surface-alt);}
.hm-view-neighbor span{font-family:var(--font-mono);font-size:12px;color:var(--muted);flex:0 0 auto;}
.hm-view-neighbor strong{font-weight:500;color:var(--text);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:1px solid var(--border);border-radius:var(--r-btn);font-family:var(--font-body);font-weight:700;font-size:14px;color:var(--text);background:var(--surface);}
.hm-view-actions a.is-primary{background:var(--accent);color:#fff;border-color:var(--accent);border-left:3px solid var(--accent2);}
.hm-view-vote{display:flex;gap:10px;margin:16px 0;}
.hm-view-vote a{padding:8px 16px;border:1px solid var(--border);border-radius:var(--r-btn);color:var(--text);font-family:var(--font-mono);font-size:13px;}
/* view page: reuse list section-head with h2 instead of h1 */
.section-head h2{font-size:25px;font-weight:800;line-height:1.18;font-family:var(--font-head);font-style:italic;letter-spacing:-.01em;margin:0;}
.view-section-head{margin-top:32px;}