/* 0546 — 꿀빛 스크롤 공통 요소: 스크롤바 · 넓은 표(.tscroll) · 읽기 진행선(.rt-progress).
   앱(index.html)과 리포트 뷰어(/api/library/render 인라인)가 같은 파일을 쓴다. 저장 HTML·다운로드·PDF는 이 파일 없이 원본 그대로다. */

/* ===== 토큰 (라이트 :root / 다크 :root.dark 앱·html.rt.rt-dark 리포트). 리포트 안에서는 --rt-* 값과 같다. ===== */
:root {
  --sb-idle: rgba(168, 138, 100, .22); --sb-thumb: rgba(150, 118, 80, .42);
  --sb-hover: rgba(168, 95, 22, .78); --sb-active: #A85F16;
  --tscroll-bg: #FFFDF8; --tscroll-line: #D8CAB3; --tscroll-head: #F3EDE2; --tscroll-shadow: rgba(90, 60, 20, .16);
}
:root.dark, html.rt.rt-dark {
  --sb-idle: rgba(189, 175, 156, .14); --sb-thumb: rgba(189, 175, 156, .32);
  --sb-hover: rgba(232, 160, 79, .8); --sb-active: #E8A04F;
  --tscroll-bg: #231E19; --tscroll-line: #4C4137; --tscroll-head: #2D2720; --tscroll-shadow: rgba(0, 0, 0, .45);
}

/* ===== 스크롤바: 화살표·홈 없음, 12px 칸 안에 4px 막대. 숨김 규칙(.x::-webkit-scrollbar{display:none})은 클래스 특정성이 더 높아 그대로 이긴다. ===== */
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: transparent; }
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
*::-webkit-scrollbar-thumb { min-height: 44px; min-width: 44px; border: 4px solid transparent; border-radius: 999px; background-color: var(--sb-idle); background-clip: padding-box; }
*:hover::-webkit-scrollbar-thumb { background-color: var(--sb-thumb); }
*::-webkit-scrollbar-thumb:hover { border-width: 2.5px; background-color: var(--sb-hover); }
*::-webkit-scrollbar-thumb:active { border-width: 2.5px; background-color: var(--sb-active); }
/* 좁은 목록용 8px 칸 */
.scroll-thin::-webkit-scrollbar, .tp-results::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-thin::-webkit-scrollbar-thumb, .tp-results::-webkit-scrollbar-thumb { min-height: 32px; min-width: 32px; border-width: 2px; }
.scroll-thin::-webkit-scrollbar-thumb:hover, .scroll-thin::-webkit-scrollbar-thumb:active,
.tp-results::-webkit-scrollbar-thumb:hover, .tp-results::-webkit-scrollbar-thumb:active { border-width: 1px; }
/* Firefox: 두 방식을 함께 켜면 Chrome 이 ::-webkit-scrollbar 모양을 버리므로 지원하지 않는 쪽에서만 건다. */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) transparent; }
}

/* ===== 넓은 표: 표가 칸보다 넓을 때만 표 자체가 가로 스크롤. 넓지 않으면 래퍼가 표의 테두리·반경·바탕을 대신해 지금과 같아 보인다. ===== */
.tscroll { position: relative; margin: 0; border: 1px solid var(--tscroll-line); border-radius: 12px; background: var(--tscroll-bg); }
html.rt .tscroll { margin: 16px 0 24px; }
.tscroll > .tscroll-in { overflow-x: auto; overflow-y: hidden; border-radius: inherit; }
.tscroll > .tscroll-in > table { margin: 0; border: 0; border-radius: 0; overflow: visible; }
.tscroll::before, .tscroll::after { content: ""; position: absolute; top: 1px; bottom: 13px; width: 28px; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .18s ease; }
.tscroll::after { right: 0; border-radius: 0 12px 0 0; background: linear-gradient(270deg, var(--tscroll-bg), transparent); }
.tscroll::before { left: var(--sticky-w, 0px); background: linear-gradient(90deg, var(--tscroll-bg), transparent); }
.tscroll.more-right::after, .tscroll.more-left::before { opacity: 1; }
.tscroll.no-bar::before, .tscroll.no-bar::after { bottom: 1px; }
.tscroll-hint { position: absolute; right: 10px; top: -11px; z-index: 3; padding: 1px 9px; border: 1px solid var(--tscroll-line); border-radius: 999px; background: var(--tscroll-bg); color: #9A8C7B; font-size: 11px; font-weight: 600; line-height: 1.6; white-space: nowrap; opacity: 0; transform: translateY(2px); pointer-events: none; transition: opacity .2s, transform .2s; }
:root.dark .tscroll-hint, html.rt.rt-dark .tscroll-hint { color: #8B7E6D; }
.tscroll.more-right:not(.touched) .tscroll-hint { opacity: 1; transform: none; }
/* 첫 열 고정: 넓은 표에서만. 왼쪽으로 스크롤된 뒤 그림자. */
.tscroll:not(.no-bar) .tscroll-in > table th:first-child, .tscroll:not(.no-bar) .tscroll-in > table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--tscroll-bg); }
.tscroll:not(.no-bar) .tscroll-in > table th:first-child { background: var(--tscroll-head); }
.tscroll.more-left .tscroll-in > table th:first-child, .tscroll.more-left .tscroll-in > table td:first-child { box-shadow: 6px 0 10px -8px var(--tscroll-shadow); }

/* ===== 읽기 진행선 (리포트 뷰어 전용, warm-scroll.js 가 만든다). 장 접기 도구줄(z-index 30)보다 위. ===== */
.rt-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 100; pointer-events: none; }
.rt-progress > i { display: block; height: 100%; width: 0; border-radius: 0 2px 2px 0; background: linear-gradient(90deg, #F6E7CF, #A85F16); transition: width .08s linear; }
:root.dark .rt-progress > i, html.rt.rt-dark .rt-progress > i { background: linear-gradient(90deg, rgba(232, 160, 79, .16), #E8A04F); }

@media (prefers-reduced-motion: reduce) {
  .tscroll::before, .tscroll::after, .tscroll-hint, .rt-progress > i { transition: none; }
}
@media print {
  .tscroll { --tscroll-bg: #fff; }
  .tscroll > .tscroll-in { overflow: visible; }
  .tscroll::before, .tscroll::after, .tscroll-hint, .rt-progress { display: none !important; }
  .tscroll .tscroll-in > table th:first-child, .tscroll .tscroll-in > table td:first-child { position: static !important; box-shadow: none !important; }
}