/* 오른쪽 롤 갤러리 게시판 패널 */
.gallery {
  position: fixed;
  z-index: 3;
  right: 24px;
  top: var(--panel-top);
  bottom: calc(var(--panel-bottom) + env(safe-area-inset-bottom, 0px));
  width: var(--gallery-w); /* 왼쪽 가장자리의 손잡이(.bd-grip)로 바꾼다. 값은 styles/hud.css 의 --gallery-w */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  color: #1b1b1b;
  border-radius: var(--r-card);
  box-shadow: 0 14px 46px #0007;
}
.bd-head { flex: none; display: flex; align-items: center; justify-content: space-between; background: #3c46a0; color: #fff; padding: 3px 4px 3px 12px; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.bd-close { --icon-color: #fff; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: 50%; }
.bd-close:hover { background: rgba(255, 255, 255, 0.16); }
.bd-close .pill__icon { width: 16px; height: 16px; }
/* 접힌 상태 */
.board-closed .gallery { display: none; }
/* 글 목록을 불러오기 전의 빈 판은 보이지 않게 한다 (자리는 그대로 차지해서 화면이 밀리지 않는다) */
.gallery:empty { visibility: hidden; }
/* 목록의 폭에 따라 글 한 줄의 모양을 바꾼다 (아래 @container) */
.bd-list { flex: 1; overflow-y: auto; margin: 0; padding: 0; list-style: none; container-type: inline-size; }
/* 글 한 줄은 낮게 잡는다. 판이 작아도 한 화면에 글이 많이 보이게 하려는 것 (제목 13px 한 줄, 아랫줄 11px) */
.bd-row { padding: 5px 12px; border-bottom: 1px solid #eef0f3; background: #fff; }
.bd-row.has-body { cursor: pointer; }
.bd-row.has-body:hover { background: #f7f8fb; }
.bd-title { font-size: 13px; font-weight: 500; line-height: 1.3; display: flex; gap: 4px; align-items: baseline; letter-spacing: -0.01em; }
/* 긴 제목은 한 줄에서 자른다. 올려 두면 전체 제목이 뜬다 (src/ui/board.js 의 title) */
.bd-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-badge { flex: none; font-size: 10.5px; font-weight: 700; line-height: 1.4; color: #3c46a0; border: 1px solid #3c46a0; border-radius: 10px; padding: 0 5px; }
.bd-meta { margin-top: 1px; font-size: 11px; color: #666; display: flex; gap: 7px; white-space: nowrap; }
.bd-nick { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bd-meta .nick-badge { width: 13px; height: 12px; margin-right: 3px; }
/* 게시판이 넓으면(목록 폭 380px 이상, 큰 창의 기본 폭이나 끌어서 넓힌 폭) 글쓴이·시각·조회를 제목 오른쪽에 붙여 글 하나를 한 줄로 그린다.
   디시 PC 목록처럼 한 화면에 글이 두 배 가까이 들어온다 */
@container (min-width: 380px) {
  .bd-link, .bd-row:not(.link) { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
  .bd-title { flex: 1; min-width: 0; }
  .bd-meta { flex: none; max-width: 52%; margin-top: 0; }
  .bd-nick { max-width: 9em; }
  .bd-body { flex-basis: 100%; }
  .bd-row { padding-block: 6px; }
}
.bd-body { margin-top: 6px; font-size: 13px; line-height: 1.5; color: #333; white-space: pre-wrap; display: none; }
.bd-row.open .bd-body { display: block; }
/* 새로 올라온 글: 위에서 내려오며 잠깐 강조 */
.bd-row.new { animation: bd-in 0.45s ease, bd-glow 2.6s ease; }
@keyframes bd-in { from { transform: translateY(-16px); opacity: 0; } }
@keyframes bd-glow { from { background: #dfe5ff; } to { background: #fff; } }

@media (max-width: 760px) {
  /* 입력 바와 버튼 줄 위에 작은 창으로 띄운다 */
  /* 위쪽 버튼 아래부터 하단 조작부 위까지 차지하는 판. 오른쪽은 세로 스킬 줄을 비워 둔다 */
  .gallery { top: calc(112px + env(safe-area-inset-top, 0px)); left: 16px; right: 70px; bottom: calc(178px + env(safe-area-inset-bottom, 0px)); width: auto; }
  /* 글을 보는 동안에는 오른쪽 스킬 줄 자리까지 써서 넓힌다. 디시 모바일웹 글 화면은 320px 아래로는 옆이 잘린다 */
  .gallery.viewing { right: 16px; z-index: 6; }
  /* 휴대폰은 판이 더 작아서 한 단계 더 줄인다 */
  .bd-row { padding: 4px 10px; }
  .bd-title { font-size: 12.5px; }
  .bd-meta { font-size: 10.5px; gap: 6px; }
  .bd-head { font-size: 13px; padding-left: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .bd-row.new { animation: none; }
}

/* 실제 롤 갤러리 글: 누르면 디시의 그 글이 새 창으로 열린다 */
.bd-home { color: inherit; text-decoration: none; }
.bd-home:hover { text-decoration: underline; }
.bd-link { display: block; color: inherit; text-decoration: none; }
.bd-row.link:hover { background: #f7f8fb; }
.bd-headtext { color: #555; border-color: #c9ccd6; }
.bd-comments { flex: none; font-size: 11.5px; font-weight: 700; color: #3c46a0; }
/* 글 보기: 목록의 글을 누르면 패널 안에서 디시의 그 글 화면을 보여 준다. 보는 동안에는 목록과 위쪽 광고 자리를 숨긴다 */
.bd-view { flex: 1; min-height: 0; display: none; flex-direction: column; }
.gallery.viewing .bd-view { display: flex; }
.gallery.viewing .bd-list, .gallery.viewing .bd-ads { display: none; }
.bd-view-bar { flex: none; display: flex; align-items: center; gap: 2px; padding: 4px 6px; background: #f4f5f8; border-bottom: 1px solid #e6e8ee; }
.bd-view-title { flex: 1; min-width: 0; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: #333; }
.bd-view-btn { --icon-color: #333; flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; padding: 0; background: none; border: 0; border-radius: 8px; }
.bd-view-btn:hover:not(:disabled) { background: #e3e6ee; }
.bd-view-btn:disabled { opacity: 0.3; }
.bd-view-btn:focus-visible { outline: 2px solid #3c46a0; outline-offset: -2px; }
.bd-view-btn .pill__icon { width: 18px; height: 18px; }
.bd-view-frame { flex: 1; min-height: 0; width: 100%; border: 0; background: #fff; }
/* 게시판 위의 디시 광고 지면 */
.bd-ads { flex: none; background: #fff; border-bottom: 1px solid #eef0f3; }
.bd-ads:empty { display: none; }
/* 광고는 원래 크기로 그린 뒤 통째로 줄여서 보여 준다 (줄이는 비율은 서버 설정 DC_AD_SCALE, 틀의 높이와 광고의 폭은 src/ui/board.js 가 넣는다).
   지면 높이만 줄이면 광고 그림이 잘리기 때문에, 그림 전체를 같은 비율로 작게 만든다 */
.bd-ad-box { overflow: hidden; }
.bd-ad { display: block; width: 100%; border: 0; transform-origin: 0 0; }

/* 게시판 폭 손잡이: 게시판 왼쪽 가장자리 바로 바깥의 세로 띠 (src/ui/board.js). 데스크톱에서만, 게시판을 펼쳤을 때만 보인다.
   평소에는 흐린 막대만 보이고, 올리거나 끄는 동안 또렷해진다 */
.bd-grip {
  position: fixed;
  z-index: 4;
  top: var(--panel-top);
  bottom: calc(var(--panel-bottom) + env(safe-area-inset-bottom, 0px));
  right: calc(24px + var(--gallery-w) + 1px);
  width: 14px;
  cursor: col-resize;
  touch-action: none;
  outline: none;
}
.bd-grip::after { content: ""; position: absolute; top: 50%; left: 5px; width: 4px; height: 48px; margin-top: -24px; border-radius: 2px; background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 0 1px rgba(var(--ink), 0.25); transition: opacity 0.15s, height 0.15s, margin 0.15s; opacity: 0.6; }
.bd-grip:hover::after, .bd-grip:focus-visible::after, .resizing .bd-grip::after { opacity: 1; height: 72px; margin-top: -36px; background: #fff; }
.board-closed .bd-grip, .shot .bd-grip { display: none; }
@media (max-width: 760px) {
  .bd-grip { display: none; }
}