@charset "UTF-8";
/* =========================================================
   별마당 도서관 현장 콘텐츠 뷰어 - 연동 추가 안내 스타일
   퍼블리싱(viewer.css)에 없는 안내만 담는다. viewer.css 는 수정하지 않고,
   색·글꼴은 viewer.css 의 :root 토큰(--c-gold, --c-cream 등)을 그대로 쓴다.
     - 리더기 전체 점검 : 바코드 카드 위 덮개
     - 리더기 일부 점검 / 오류 : 바코드 카드 아래 한 줄 안내
     - 손님 바코드 준비 전 : 견본 바코드 가림
     - 인앱 브라우저 안내 : 전체 화면 덮개 (rotate-guard 톤)
   작성일 : 2026. 10. 19. / 작성자 : islee
   ========================================================= */

/* ---------- 가로 밀기로 브라우저 기록이 이동하지 않게 (Android Chrome 등) ----------
   책 화면의 가로 밀기는 책장 넘김에만 쓰이도록 한다.
   iOS 가장자리 스와이프는 시스템 제스처라 CSS 로 막히지 않으므로 bridge.js 가 기록으로 흡수한다. */
html,
body {
  overscroll-behavior-x: none;
}

/* ---------- 타이틀 지팡이 불꽃 : iPhone 은 그림 불꽃으로 ----------
   iOS(WebKit, iPhone 의 모든 브라우저) 에서 WebGL 불꽃(flame-gl.js)이 투명 WebP 텍스처의 투명도를 잃어
   불꽃 그림 영역이 검은 박스로 보인다. 퍼블리싱이 만들어 둔 대체 경로(그림 불꽃 + CSS 일렁임)를 iOS 에서만 쓴다.
   (-webkit-touch-callout 은 iOS WebKit 에서만 지원되는 속성이라 iOS 판별에 쓴다)
   근본 수정은 퍼블리싱(flame-gl.js) 쪽에 전달 필요. */
@supports (-webkit-touch-callout: none) {
  .keyvisual.is-flame-3d .keyvisual__flame-gl { display: none; }
  .keyvisual.is-flame-3d .keyvisual__burn { display: block; }
}

/* ---------- 바코드 카드 : 덮개 기준점 ---------- */
.pass .pass__card {
  position: relative;
}

/* 손님 바코드를 받기 전 : 견본 바코드를 흐리게 가리고 '준비 중'을 띄운다 */
.pass__card.sbr-is-loading .pass__code {
  opacity: .08;
}

.pass__card.sbr-is-loading::after {
  content: "바코드 준비 중";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  color: rgba(7, 18, 34, .56);
}

/* ---------- 리더기 전체 점검 : 바코드 대신 안내 ---------- */
.sbr-daemon-down {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 13px;
  border-radius: inherit;
  background: #faf2e3;
  text-align: center;
}

.sbr-daemon-down[hidden] {
  display: none;
}

.sbr-daemon-down__title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  color: #071222;
}

.sbr-daemon-down__desc {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: rgba(7, 18, 34, .64);
}

/* ---------- 바코드 카드 아래 한 줄 안내 (일부 점검 / 오류) ---------- */
.sbr-pass-note {
  max-width: 258px;
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-align: center;
  color: var(--c-gold-soft);
}

.sbr-pass-note[hidden] {
  display: none;
}

.sbr-pass-note--error {
  color: rgba(250, 242, 229, .72);
}

/* ---------- 인앱 브라우저 안내 ---------- */
.sbr-inapp {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px calc(24px + env(safe-area-inset-right, 0px)) 24px calc(24px + env(safe-area-inset-left, 0px));
  background: url("/cdn/images/starryBook/asset/images/bg-common.webp") 50% 50% / cover no-repeat, var(--c-sky);
}

.sbr-inapp[hidden] {
  display: none;
}

.sbr-inapp__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 312px;
  text-align: center;
}

.sbr-inapp__title {
  margin: 0;
  font-family: var(--f-serif-ko);
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  color: var(--c-gold);
}

.sbr-inapp__desc {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: rgba(250, 242, 229, .8);
}

.sbr-inapp__btn {
  width: 100%;
  height: 48px;
  border: .5px solid rgba(227, 186, 120, .6);
  border-radius: 10px;
  background: transparent;
  font-family: var(--f-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--c-cream);
  cursor: pointer;
}

.sbr-inapp__btn--primary {
  border-color: var(--c-gold);
  background: var(--c-gold);
  color: var(--c-navy);
}

/* 시험 모드(StarryBookReaderController.BARCODE_CHECK_YN = N) : 바코드를 눌러 인증 */
.sbr-touch-unlock .pass__card {
  cursor: pointer;
}