/* 앱의 스크롤 영역에 얇고 밝은 회색 손잡이를 공통 적용한다.
   담당: 수연 (R5)
   계약: 스크롤 동작과 영역 크기는 기존 화면이 정한다. */
/* 스크롤바 폭을 양쪽에 똑같이 확보해 섹션과 구분선도 카드 전체 기준 중앙에 놓인다. */
.m-screen-light, .m-redaction-sheet {
  scrollbar-gutter: stable both-edges;
}

.m-app { margin-inline: auto; }

html, body, #app, #app * {
  scrollbar-width: thin;
  scrollbar-color: #d0cecc transparent;
}

/* Chromium의 표준 속성이 가상 요소를 덮으면 화살표가 다시 나타나므로 auto로 돌린다. */
@supports selector(::-webkit-scrollbar) {
  html, body, #app, #app * {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }
  ::-webkit-scrollbar { width: 4px; height: 4px; }
  ::-webkit-scrollbar-track {
    background: transparent;
    margin-block: 8px;
    border-radius: 999px;
  }
  ::-webkit-scrollbar-thumb {
    background: #d0cecc;
    border: 1px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
  }
  ::-webkit-scrollbar-thumb:hover { background: #bdbab7; }
  ::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
  }
  ::-webkit-scrollbar-corner { background: transparent; }
}