/* widget_random_banner - 배너 파도타기 위젯 */
#bnw-root { display: contents; }

/* 왼쪽 아래 통합 위젯 툴바(left:1%, 35px) + 오늘의 대사 버튼(+45px) 바로 옆에 나란히 붙인다. */
#bnw-bar {
  position: fixed;
  left: calc(1% + 90px);
  bottom: 4%;
  min-height: 35px;
  max-width: calc(100vw - 1% - 100px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px; /* 이름 버튼(hover 배경) 바깥에도 여백이 생기도록 */
  border-radius: 8px;
  background: #333333;
  color: #eeeeee;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  z-index: 99997; /* 오늘의 대사 패널(99998)이 열리면 그 아래로 가려진다 */
  font-family: var(--header-font-family, var(--title-font-family, 'Chosunilbo_myungjo', serif)); /* 사이트 테마의 헤더 폰트 */
  font-size: 17px;
  transition: background-color .2s ease, color .2s ease, border-radius .35s ease;
}
/* 오늘의 대사 위젯이 없거나 꺼져 있으면(JS가 붙임) 그 자리만큼 왼쪽으로 당긴다 */
#bnw-bar.bnw-shift { left: calc(1% + 45px); max-width: calc(100vw - 1% - 55px); }
#bnw-name {
  color: inherit;
  text-decoration: none;
  /* 이름은 절대 잘리지 않는다: 길면 막대 폭 한도 안에서 줄바꿈되어 막대가 높아진다 */
  min-width: 0;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
/* 링크 표시: hover 시 이름이 살짝 투명해지며 뒤에 옅은 하이라이트 배경이 깔린다.
   배경이 들어갈 여백(padding)은 음수 margin으로 상쇄해 평소 위치는 그대로 유지한다. */
#bnw-name { position: relative; isolation: isolate; padding: 4px; margin: 0; border-radius: 5px; }
/* 배경은 글자색(currentColor)을 옅게 깔아서, 툴팁 배경이 밝든 어둡든 항상 보인다 */
/* 표시 방식이 '배너 이미지'일 때: 이름 자리에 배너 이미지를 보여준다(너무 크면 비율을 유지하며 줄인다) */
#bnw-name.bnw-as-image img { border-radius: 4px; display: block; width: auto; height: 1.25em; /* 이름 방식의 글자 한 줄 높이(line-height 1.25)와 같게 → 막대 높이 통일 */ max-width: 220px; object-fit: contain; }
/* 랜덤 연출 중에는 현재 크기를 고정하고 이미지가 그 안에서 바뀌게 한다(막대가 출렁이지 않도록) */
#bnw-name.bnw-locked { box-sizing: border-box; flex-shrink: 0; overflow: hidden; }
#bnw-name.bnw-locked img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
/* 랜덤 연출: 겹쳐 놓은 두 이미지를 번갈아 페이드시켜 부드럽게 전환한다 */
#bnw-name.bnw-locked img.bnw-flip { position: absolute; left: 4px; top: 4px; width: calc(100% - 8px); height: calc(100% - 8px); opacity: 0; transition: opacity .06s linear; }
#bnw-name.bnw-locked img.bnw-flip.is-on { opacity: 1; }
#bnw-name::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity .15s ease; }
#bnw-name:hover::before { opacity: .3; }
#bnw-shuffle, #bnw-all {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  opacity: .6;
  font-size: 13px;
  cursor: pointer;
  line-height: 1;
  transition: opacity .15s ease, background-color .15s ease;
}
#bnw-shuffle:hover, #bnw-all:hover, #bnw-all[aria-expanded="true"] { opacity: 1; background: rgba(255, 255, 255, .15); }

/* 랜덤 버튼과 전체보기 버튼 사이 간격을 좁힌다(막대 gap 4px → 약 1px) */
#bnw-all { margin-left: -3px; }

/* 전체보기 드롭다운: 위젯 버튼 위쪽으로 열린다 */
#bnw-menu {
  position: absolute;
  left: 0;
  bottom: 100%; /* 막대 바로 위에 붙여 하나의 덩어리처럼 이어지게 한다 */
  width: 100%;
  max-height: 60vh;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 6px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center; /* 배너 이미지는 줄마다 가운데 정렬 */
  gap: 3px;
  background-color: inherit; /* 위젯 버튼(막대) 색과 동일 — 랜덤으로 색이 바뀌어도 같이 따라감 */
  border: 0;
  border-radius: 8px 8px 0 0; /* 위쪽만 둥글게 — 아래는 막대와 맞닿아 이어진다 */
  box-shadow: none;
}
/* 열고 닫을 때 막대 위에서 천천히 떠오르며 페이드 — visibility는 닫힌 뒤에 꺼서 클릭이 새지 않게 한다 */
#bnw-menu {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
}
#bnw-menu.bnw-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity .35s ease, transform .35s ease, visibility 0s;
}
/* 목록이 열려 있으면 막대의 위쪽 모서리를 각지게 해서 목록과 한 덩어리로 이어 보이게 한다 */
#bnw-bar.bnw-joined { border-top-left-radius: 0; border-top-right-radius: 0; }
/* 카테고리 라벨 줄 — 라벨은 칩(알약) 모양. 배경은 글자색을 옅게 깔아 어떤 툴팁 색에서도 보인다 */
#bnw-menu .bnw-cat { width: 100%; padding: 6px 0 2px; line-height: 1.2; }
#bnw-menu .bnw-chip { font-family: var(--header-font-family, inherit); position: relative; isolation: isolate; display: block; width: 100%; box-sizing: border-box; padding: 1px 6px; border-radius: 4px; font-size: .8em; line-height: 1.3; }
#bnw-menu .bnw-chip::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: currentColor; opacity: .25; }
#bnw-menu .bnw-cat:first-child { padding-top: 0; }
#bnw-menu .bnw-cat-empty { padding: 2px 0 0; border-top: 1px solid currentColor; opacity: .25; margin-top: 4px; }
#bnw-menu a { display: block; width: 100%; line-height: 0; border-radius: 4px; overflow: hidden; transition: opacity .15s ease; }
/* hint.css 툴팁 호스트: 크기 0인 고정 요소를 hover한 배너 위치(JS가 left/top 지정)에 놓고 위쪽으로 말풍선을 띄운다.
   목록(스크롤 영역) 바깥에 있어서 잘리지 않는다. 색은 배너별 툴팁 색(JS가 변수로 지정). */
#bnw-tip { position: fixed; display: none; width: 0; height: 0; margin: 0; padding: 0; pointer-events: none; z-index: 1; }
#bnw-tip.bnw-tip-on { display: block; }
#bnw-tip:after { background-color: var(--bnw-tip-bg, #333333) !important; color: var(--bnw-tip-fg, #eeeeee) !important; text-shadow: none !important; font-family: var(--header-font-family, inherit); font-size: 13px; width: max-content; max-width: 260px; white-space: normal; }
/* 말풍선: 글자색 테두리 + 둥근 모서리, 그림자 없음. 꼬리도 글자색 */
#bnw-tip:after { border: 1px solid var(--bnw-tip-fg, #eeeeee) !important; border-radius: 10px !important; box-shadow: none !important; }
#bnw-tip:before { box-shadow: none !important; }
#bnw-tip.hint--top:before { border-top-color: var(--bnw-tip-fg, #eeeeee) !important; }
/* 원본 가로 120px 이하인 작은 이미지(JS가 bnw-sm을 붙임)는 세로 20px로 맞춰 리사이징한다(가로는 비율 유지).
   목록 폭이 넓어지면 한 줄에 더 많이, 좁아지면 더 적게 들어가도록 줄바꿈으로 열 수가 자동 조절된다. */
#bnw-menu a.bnw-sm { width: auto; max-width: 100%; }
#bnw-menu a.bnw-sm img { width: auto; max-width: 100%; height: 20px; object-fit: contain; }
#bnw-menu a:hover { opacity: .8; }
#bnw-menu img { border-radius: 4px; width: 100%; height: auto; display: block; }