/* board.css — DYNAMITE BLUE 공지 사이트 공용 스타일
   토큰/색은 픽업·도감 페이지 팔레트와 통일 */
:root{
  --bg:#0b0e14; --card:#141a24; --card2:#1a2130; --line:#28303f;
  --text:#e9edf4; --sub:#9aa6b8; --dim:#6b7689; --accent:#2ad3a0;
}
*{box-sizing:border-box}
body{margin:0; color:var(--text); line-height:1.6;
  background:radial-gradient(1200px 520px at 50% -80px,#16203133,#0b0e14),var(--bg);
  font-family:-apple-system,"Segoe UI","Malgun Gothic","Noto Sans KR",sans-serif; -webkit-font-smoothing:antialiased;}
a{color:inherit; text-decoration:none}
img{max-width:100%}

/* ── 상단 헤더/네비 ── */
.site-header{position:sticky; top:0; z-index:20; background:rgba(11,14,20,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.site-header .bar{max-width:1000px; margin:0 auto; padding:.7rem 1rem; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.brand{color:var(--accent); font-weight:800; letter-spacing:.05em; font-size:1rem; display:inline-flex; align-items:center}
.brand img{height:40px; width:auto; display:block}
.nav{display:flex; gap:.3rem}
.nav a{padding:.4rem .8rem; border-radius:8px; font-size:.9rem; font-weight:700; color:var(--sub)}
.nav a.on,.nav a:hover{background:var(--card); color:var(--text)}
.grow{flex:1}

/* 언어 토글 (board.js가 채움) */
.langbar{display:flex; border:1px solid var(--line); border-radius:9px; overflow:hidden}
.langbar .langbtn{background:var(--card); border:0; color:var(--sub); padding:8px 13px; font:inherit; font-size:13px; font-weight:700; cursor:pointer}
.langbar .langbtn.on{background:var(--accent); color:#04120d}

/* 목록으로 back-link */
.backlink{display:inline-flex; align-items:center; gap:.35rem; margin:1.1rem 0 .2rem; padding:.45rem .8rem;
  border:1px solid var(--line); border-radius:9px; background:var(--card); color:var(--sub); font-size:.85rem; font-weight:700}
.backlink:hover{color:var(--text); border-color:var(--accent)}

.wrap{max-width:1000px; margin:0 auto; padding:1.2rem 1rem 4rem}
.page-title{font-size:1.5rem; font-weight:800; letter-spacing:-.01em; margin:.6rem 0 1.1rem}

/* ── 공지 목록 카드 ── */
.list{display:flex; flex-direction:column; gap:.8rem}
.empty{color:var(--dim); text-align:center; padding:3rem 0}
.pcard{display:flex; gap:1rem; align-items:center; background:linear-gradient(180deg,var(--card2),var(--card));
  border:1px solid var(--line); border-radius:14px; padding:.85rem 1rem; transition:border-color .15s, transform .15s}
.pcard:hover{border-color:var(--accent); transform:translateY(-1px)}
.pc-thumb{flex:0 0 auto; width:120px; height:76px; border-radius:10px; overflow:hidden; border:1px solid var(--line); background:#0d1119}
.pc-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.pc-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:.35rem}
.pc-cat{align-self:flex-start; font-size:.72rem; font-weight:800; color:#08120b; padding:.16rem .6rem; border-radius:999px}
.pc-title{font-size:1.05rem; font-weight:700; color:var(--text); line-height:1.35}
.pc-date{font-size:.8rem; color:var(--sub)}
@media(max-width:520px){ .pc-thumb{width:88px; height:60px} .pc-title{font-size:.98rem} }

/* ── 스샷 공지 본문 ── */
.notice{background:linear-gradient(180deg,var(--card2),var(--card)); border:1px solid var(--line);
  border-radius:16px; padding:1.4rem 1.5rem 1.8rem; margin-top:.4rem}
.notice-head{display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-bottom:.3rem}
.notice-cat{font-size:.78rem; font-weight:800; color:#08120b; padding:.22rem .7rem; border-radius:999px}
.notice-date{font-size:.85rem; color:var(--sub)}
.notice-title{font-size:1.55rem; font-weight:800; letter-spacing:-.01em; margin:.2rem 0 1.2rem; line-height:1.3}
.notice-body{font-size:.98rem; color:#dbe1ec}
.notice-body h2{font-size:1.15rem; font-weight:800; color:var(--text); margin:1.6rem 0 .6rem}
.notice-body h3{font-size:1.02rem; font-weight:700; color:var(--accent); margin:1.2rem 0 .4rem}
.notice-body p{margin:.55rem 0}
.notice-body ul,.notice-body ol{margin:.55rem 0; padding-left:1.3rem}
.notice-body li{margin:.25rem 0}
.notice-body strong{color:var(--text)}
.notice-body hr{border:0; border-top:1px solid var(--line); margin:1.4rem 0}

/* 스샷 (세로 스택 + 라이트박스) */
.shot{margin:1.1rem 0}
.shot img{display:block; width:100%; height:auto; border-radius:12px; border:1px solid var(--line); box-shadow:0 8px 24px #0007}
.shot img.zoom{cursor:zoom-in}
.shot figcaption{margin-top:.5rem; font-size:.82rem; color:var(--sub); text-align:center}

footer{margin-top:2rem; text-align:center; font-size:.75rem; color:var(--dim)}

/* ── 라이트박스 (board.js가 body에 주입) ── */
.lb{position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  background:rgba(4,7,12,.9); padding:2.5vmin; opacity:0; transition:opacity .18s}
.lb.on{opacity:1}
.lb[hidden]{display:none}
.lb-img{max-width:96vw; max-height:92vh; width:auto; height:auto; border-radius:10px; box-shadow:0 20px 60px #000b}
.lb-x{position:fixed; top:14px; right:16px; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line); background:var(--card); color:var(--text); font-size:18px; cursor:pointer; line-height:1}
.lb-x:hover{border-color:var(--accent)}

@media print{
  *{-webkit-print-color-adjust:exact !important; print-color-adjust:exact !important}
  .site-header,.langbar,.backlink,.lb{display:none !important}
  .notice,.pcard{break-inside:avoid}
}