*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans KR",sans-serif;background:#000;color:#fff}
a{color:#7dd3fc}
.topbar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:#111}
.title{position:absolute;left:50%;transform:translateX(-50%);font-weight:800;text-align:center;white-space:nowrap}
.menu{display:flex;gap:8px;flex-wrap:wrap}
.menu-btn{padding:8px 12px;border:1px solid #444;border-radius:10px;background:#0b0b0b;color:#fff;cursor:pointer}
.menu-btn:focus{outline:2px solid #22d3ee;outline-offset:2px}

#app{display:flex;min-height:calc(100vh - 56px)}
.pane{padding:16px;overflow:auto;border-right:1px solid #2a2a2a}
#leftPane{flex:7}
#rightPane{flex:3;border-right:0}

.card{border:1px solid #2a2a2a;border-radius:14px;padding:16px;background:#0b0b0b;color:#fff;max-width:720px;margin:0 auto}
.row{display:flex;gap:8px}
.row>*{flex:1}
input,textarea{width:100%;padding:10px;border-radius:12px;border:1px solid #333;background:#000;color:#fff}
button{padding:10px 12px;border-radius:12px;border:1px solid #333;background:#111;color:#fff;cursor:pointer}
button.primary{border:0;background:#22d3ee;color:#000;font-weight:700}
button:disabled{opacity:.5;cursor:not-allowed}
.center{display:flex;justify-content:center;align-items:center}
img.responsive{max-width:100%;height:auto;border-radius:14px}

h1,h2,h3,h4,h5,h6{text-align:center;margin:0 0 12px 0}

.chat-popup{position:fixed;right:16px;bottom:16px;width:calc(100vw - 32px);max-width:480px;height:min(560px, calc(100vh - 120px));background:#0b0b0b;border:1px solid #2a2a2a;border-radius:16px;box-shadow:0 12px 32px rgba(0,0,0,.45);overflow:hidden}
.hidden{display:none}

/* a11y */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* responsive: stack panes */
@media (max-width: 980px){
  .title{position:static;transform:none;order:-1;width:100%}
  .topbar{flex-direction:column;align-items:flex-start}
  .menu{width:100%}
  #app{flex-direction:column}
  .pane{border-right:0;border-bottom:1px solid #2a2a2a}
  #rightPane{border-bottom:0}
  .card{max-width:100%}
  .row{flex-direction:column}
}

.home-thumb{width:25%; max-width:180px; min-width:120px; height:auto}

.chat-line.system{opacity:.85;font-style:italic}

.muted{color:#94a3b8}

/* Board (table layout) */
.board-table{width:100%;border-collapse:collapse;min-width:620px}
.board-table th,.board-table td{border-bottom:1px solid #222;padding:10px;font-size:14px;vertical-align:top}
.board-table th{text-align:left;color:#e5e7eb;font-weight:700}
.board-table tr:hover td{background:rgba(255,255,255,0.03)}

.linklike{background:transparent;border:0;padding:0;margin:0;color:#7dd3fc;cursor:pointer;text-align:left}
.linklike:focus{outline:2px solid #22d3ee;outline-offset:2px;border-radius:6px}

.pager{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.pager button[aria-current="page"]{background:#22d3ee;color:#000;border:0;font-weight:800}

.comment{border:1px solid #222;border-radius:12px;padding:10px;background:#060606}


/* Home rotator: consistent size regardless of image dimensions */
.home-rotator{
  width: min(90vw, 320px);
  height: 200px;
  display:block;
  object-fit: cover;
  border-radius: 12px;
}
@media (max-width: 480px){
  .home-rotator{height: 180px;}
}


@media (max-width: 600px){
  .topbar{flex-wrap:wrap; gap:8px;}
  .topbar button{padding:10px 12px;}
  .card{margin:8px;}
  img{max-width:100%; height:auto;}
  .row{flex-direction:column; align-items:stretch;}
  input, select, textarea, button{font-size:16px;}
}