@charset "UTF-8"; :root { color-scheme: light; } html, body { margin: 0; padding: 0; height: 100%; background: #c2c2c2; font-family: -apple-system, "Segoe UI", Roboto, sans-serif; overflow-x: hidden; } #ebook-root { display: flex; height: 100vh; overflow: hidden; } .ebook-shell { display: flex; flex-direction: column; width: 100%; height: 100vh; overflow: hidden; } .ebook-btn { display: flex; align-items: center; justify-content: center; background: rgba(20, 20, 30, 0.045); border: 1px solid rgba(20, 20, 30, 0.12); color: #26262b; border-radius: 6px; width: 32px; height: 32px; cursor: pointer; font-size: 14px; line-height: 1; padding: 0; } .ebook-btn:hover { background: #d7d9db; } .icon { display: inline-block; width: 24px; height: 24px; background-color: currentColor; mask-repeat: no-repeat; mask-position: center; mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; pointer-events: none; } .icon-move { mask-image: url("data:image/svg+xml,"); -webkit-mask-image: url("data:image/svg+xml,"); } .icon-capture { mask-image: url("data:image/svg+xml,"); -webkit-mask-image: url("data:image/svg+xml,"); } .icon-print { mask-image: url("data:image/svg+xml,"); -webkit-mask-image: url("data:image/svg+xml,"); } .icon-memo { mask-image: url("data:image/svg+xml,"); -webkit-mask-image: url("data:image/svg+xml,"); } .icon-pencil { mask-image: url("data:image/svg+xml,"); -webkit-mask-image: url("data:image/svg+xml,"); } .icon-highlighter { mask-image: url("data:image/svg+xml,"); -webkit-mask-image: url("data:image/svg+xml,"); } .icon-eraser { mask-image: url("data:image/svg+xml,"); -webkit-mask-image: url("data:image/svg+xml,"); } .icon-trash { mask-image: url("data:image/svg+xml,"); -webkit-mask-image: url("data:image/svg+xml,"); } .icon-minus { mask-image: url("data:image/svg+xml,"); -webkit-mask-image: url("data:image/svg+xml,"); } .icon-plus { mask-image: url("data:image/svg+xml,"); -webkit-mask-image: url("data:image/svg+xml,"); } .icon-search { mask-image: url("data:image/svg+xml,"); -webkit-mask-image: url("data:image/svg+xml,"); } .icon-chevron-front { mask-image: url("data:image/svg+xml,"); -webkit-mask-image: url("data:image/svg+xml,"); } .icon-chevron-left { mask-image: url("data:image/svg+xml,"); -webkit-mask-image: url("data:image/svg+xml,"); } .icon-chevron-right { mask-image: url("data:image/svg+xml,"); -webkit-mask-image: url("data:image/svg+xml,"); } .icon-chevron-last { mask-image: url("data:image/svg+xml,"); -webkit-mask-image: url("data:image/svg+xml,"); } .icon-dropper { mask-image: url("data:image/svg+xml,"); -webkit-mask-image: url("data:image/svg+xml,"); } .icon-x { mask-image: url("data:image/svg+xml,"); -webkit-mask-image: url("data:image/svg+xml,"); } .icon-bookmark { mask-image: url("data:image/svg+xml,"); -webkit-mask-image: url("data:image/svg+xml,"); } .ebook-btn.is-active { background: rgba(217, 122, 52, 0.16); border-color: rgba(217, 122, 52, 0.55); color: #b85f23; } /* 키보드 단축키 힌트 배지 -- annotation-toolbar.js의 addShortcutHint/onGlobalKeyDown-Up 참고. Ctrl을 누르고 있을 때만 보인다(.ebook-anno-toolbar.is-ctrl-held). 이 바가 뷰어 하단에 있어서 버튼 아래쪽에 붙이면 화면 밖으로 나가므로 버튼 위에 띄운다. position:relative는 이 배지(position:absolute)가 페이지의 아무 조상이 아니라 딱 이 버튼 기준으로 붙게 하기 위한 것. */ .ebook-btn-has-hint { position: relative; } .ebook-btn-shortcut-hint { display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: rgba(20, 20, 30, 0.85); color: #fff; font-size: 11px; font-weight: 400; line-height: 1.4; padding: 2px 6px; border-radius: 4px; white-space: nowrap; z-index: 20; pointer-events: none; } .ebook-anno-toolbar.is-ctrl-held .ebook-btn-shortcut-hint { display: block; } /* 뷰어의 유일한 툴바 -- 도구(왼쪽) / 페이지 이동+목차(가운데) / 검색 (오른쪽) 세 덩어리를 담는다. 원래는 펜/지우개/형광펜/캡처 등 주석 도구만 메인 툴바 바로 아래(top:53px)에 붙어 있었는데, 뷰어 하단으로 옮기면서 메인 툴바가 담던 페이지 이동/검색까지 다 이리로 옮겨왔다 -- 지금은 상단 툴바 자체가 없다. Figma "Underbar" 디자인(반투명 흰 배경, 위쪽 테두리만, 16px 40px 패딩) 적용. 3열 grid인 이유: 세 덩어리 너비가 다 가변적인데, 가운데(페이지 이동)는 항상 정중앙에 있어야 하고 좌우는 서로 겹치면 안 된다 -- flex justify-content로는 가운데 블록을 양쪽과 무관하게 화면 정중앙에 고정할 방법이 없다. 버튼 자체(.ebook-btn)는 다른 곳에서도 쓰는 공용 클래스라, 여기서 손대는 시각 스타일은 전부 .ebook-anno-toolbar 아래로 스코프했다. 직속 자식은 실제로 leftGroup(페이지 이동)과 rightGroup(도구+검색을 묶은 .ebook-anno-toolbar-right) 둘뿐이다(ebook-viewer.js에서 조립). 여기(기본 스킨)에서는 .ebook-anno-toolbar-right를 display:contents로 투명하게 만들어 그 안의 도구 묶음/검색이 각자 원래 열(좌/우)에 그대로 있는 것처럼 보이게 한다 -- 도구+검색을 한 덩어리로 오른쪽에 붙이는 상단형 스킨(viewer-skin-top.scss)과 DOM은 공유하되 배치만 다르게 가져가기 위한 것. 그래서 아래 세 열 배치는 grid 자동 배치가 아니라 전부 명시적 grid-column이다. */ .ebook-anno-toolbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 13px 40px; background: rgba(255, 255, 255, 0.5); border-top: 1px solid #c5cbd3; } .ebook-anno-toolbar-right { display: contents; } /* 도구 버튼들을 담는 첫 번째 grid 열(좌측). */ .ebook-anno-toolbar-tools { grid-column: 1; display: flex; align-items: center; gap: 12px; } /* 페이지 이동/목차 -- 두 번째 grid 열(가운데, auto 크기라 항상 내용물 너비만큼만 차지하고 트랙 자체가 정중앙에 놓인다). */ .ebook-anno-toolbar-page { grid-column: 2; display: flex; align-items: center; gap: 8px; } .ebook-anno-toolbar .ebook-btn { background: none; border: none; border-radius: 6px; /* 활성 도구는 진한 배경(검정)으로 채운다 -- 아이콘이 이제 .icon(currentColor mask) 방식이라, color를 흰색으로 바꾸면 아이콘 색도 자동으로 따라온다. (예전엔 PNG라 filter: brightness(0) invert(1)로 우회해야 했는데, is-active가 붙는 버튼이 전부 .icon 방식으로 바뀌면서 더 이상 필요 없어졌다.) */ } .ebook-anno-toolbar .ebook-btn:hover { background: #d7d9db; } .ebook-anno-toolbar .ebook-btn.is-active { background: #181d25; border-color: transparent; color: #fff; } /* Vertical rule between button groups in the annotation toolbar -- see annotation-toolbar.js's divider(). Height matches .ebook-btn's own rendered height so it doesn't stick out above/below the row. */ .ebook-anno-toolbar-divider { align-self: stretch; width: 1.5px; margin: 2px 2px; background: #c5cbd3; } /* Figma "Ic-Color"(66:574) -- 테두리 없이 선택된 색만 그대로 보여주는 단순한 컬러 영역. 의 브라우저 기본 스타일(내부 swatch 자체의 테두리/여백)까지 지워야 순수한 색상 블록으로 보여서, 바깥 테두리뿐 아니라 -webkit-color-swatch(-wrapper)까지 같이 없앴다. */ /* 이제 가 아니라 viewer.colorPicker(color-picker.js)를 여는 평범한