/* 📖 Cromo 책 — 기능용 기본 모양.
   디자인은 나중에 GPT가 입힌다: 색·글꼴·간격은 아래 :root 변수만 바꾸면 되도록 모아 둠. */
:root {
  --bk-desk: #2b2d33;          /* 책상(배경) */
  --bk-bar: #1f2126;           /* 위쪽 도구줄 */
  --bk-bar-text: #e8e9ee;
  --bk-paper: #fdfcf8;         /* 종이 */
  --bk-paper-edge: #e9e5da;
  --bk-ink: #1f2330;           /* 본문 글자 */
  --bk-muted: #8a8f9c;
  --bk-accent: #4f7cff;        /* 강조(버튼) */
  --bk-danger: #d64545;
  --bk-spine-shadow: rgba(0, 0, 0, .18);
  --bk-font-body: "Noto Serif KR", "Nanum Myeongjo", "Batang", Georgia, serif;
  --bk-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", system-ui, sans-serif;
  --bk-page-pad: 34px 34px 40px;
  --bk-radius: 6px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bk-desk); color: var(--bk-bar-text); font-family: var(--bk-font-ui);
}
.hidden { display: none !important; }

/* ── 위쪽 도구줄 ── */
.bk-bar {
  flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 8px 10px;
  padding: 8px 14px; background: var(--bk-bar);
  padding-top: calc(8px + env(safe-area-inset-top));
}
.bk-title-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 200px; }
.bk-logo { font-size: 20px; }
.bk-title {
  flex: 1 1 auto; min-width: 0; background: transparent; border: 1px solid transparent; border-radius: 6px;
  color: var(--bk-bar-text); font-size: 16px; font-weight: 700; padding: 5px 8px; font-family: inherit;
}
.bk-title:hover, .bk-title:focus { border-color: #3a3d46; outline: none; }
.bk-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.bk-right { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; min-width: 0; }
.bk-edit-center { justify-self: center; padding: 8px 22px; font-size: 14px; font-weight: 700; box-shadow: 0 3px 10px rgba(79, 124, 255, .35); }
.bk-title-wrap { grid-column: 1; }
.bk-edit-center { grid-column: 2; }
.bk-right { grid-column: 3; }
.bk-btn {
  font: inherit; font-size: 13px; cursor: pointer; padding: 7px 12px; border-radius: 6px;
  border: 1px solid #3a3d46; background: #2a2d34; color: var(--bk-bar-text);
}
.bk-btn:hover { border-color: var(--bk-accent); }
.bk-btn-primary { background: var(--bk-accent); border-color: var(--bk-accent); color: #fff; }
.bk-btn-ghost { background: transparent; }
.bk-btn:disabled { opacity: .4; cursor: default; }

/* ── 편집 도구 ── */
.bk-tools {
  flex: 0 0 auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 6px 14px; background: #24262c; border-top: 1px solid #33363e;
}
.bk-tool, .bk-tool-select {
  font: inherit; font-size: 13px; cursor: pointer; min-width: 32px; height: 30px; padding: 0 9px;
  border-radius: 6px; border: 1px solid #3a3d46; background: #2f323a; color: var(--bk-bar-text);
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.bk-tool:hover { border-color: var(--bk-accent); }
.bk-color input { width: 18px; height: 18px; padding: 0; border: none; background: none; cursor: pointer; }
.bk-tools-sep { width: 1px; height: 20px; background: #3a3d46; margin: 0 4px; }
.bk-tools-hint { font-size: 12px; color: var(--bk-muted); margin-left: 6px; }
.bk-danger { color: #ff8a8a; }

/* ── 책상·책 ── */
.bk-stage { flex: 1 1 auto; min-height: 0; display: flex; }
.bk-desk {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 40px;
  padding: 50px 12px 44px; perspective: 2400px;
}
.bk-nav {
  flex: 0 0 auto; width: 44px; height: 64px; border-radius: 10px; border: none; cursor: pointer;
  background: rgba(255, 255, 255, .06); color: #cfd2db; font-size: 34px; line-height: 1;
}
.bk-nav:hover { background: rgba(255, 255, 255, .14); }
.bk-nav:disabled { opacity: .25; cursor: default; }

/* 책 크기: 양면 가로세로비 약 1.45 : 1 (한 쪽 = A5 비율쯤) */
.bk-book {
  position: relative; height: min(100%, 82vh); aspect-ratio: 1.42 / 1; max-width: calc(100% - 120px);
  transform-style: preserve-3d;
}
.bk-spread { position: absolute; inset: 0; display: flex; transform-style: preserve-3d; }
.bk-page {
  position: relative; flex: 1 1 50%; min-width: 0; height: 100%;
  background: var(--bk-paper); color: var(--bk-ink);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  overflow: hidden; backface-visibility: hidden;
}
.bk-page-left {
  border-radius: var(--bk-radius) 0 0 var(--bk-radius);
  background-image: linear-gradient(to left, var(--bk-spine-shadow), transparent 7%);
}
.bk-page-right {
  border-radius: 0 var(--bk-radius) var(--bk-radius) 0;
  background-image: linear-gradient(to right, var(--bk-spine-shadow), transparent 7%);
}
.bk-page.empty-side { background: transparent; box-shadow: none; }
/* 두 쪽 보기에서 마지막 쪽 옆의 빈 자리: 눌러서 새 쪽 */
.bk-addside { position: absolute; inset: 0; margin: auto; width: 132px; height: 132px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 22px; border: 2px dashed rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .04); color: #cfd2db; cursor: pointer; transition: background .12s, border-color .12s, color .12s, transform .12s; }
.bk-addside b { font-size: 46px; line-height: 1; font-weight: 400; }
.bk-addside span { font: 600 13px var(--bk-font-ui); }
.bk-addside:hover { background: rgba(255, 255, 255, .12); border-color: var(--bk-accent); color: #fff; }
.bk-addside:active { transform: scale(.96); }
.bk-book.opening .bk-addside { display: none; }
/* 빈 쪽 가운데: － 쪽 삭제 (종이 위라 어두운 글씨) */
.bk-delside { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; padding: 12px 22px; border-radius: 14px; border: 1.5px dashed rgba(120, 60, 60, .45); background: rgba(255, 255, 255, .55); color: #a33; font: 700 15px var(--bk-font-ui); white-space: nowrap; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.bk-delside:hover { background: #fde8e8; border-color: #d33; color: #c00; }
.bk-delside:active { transform: translate(-50%, -50%) scale(.96); }
.bk-book.opening .bk-delside, .bk-book.ending .bk-delside, body.inking .bk-delside { display: none; }
@media print { .bk-delside { display: none !important; } }
@media print { .bk-addside { display: none !important; } }

/* 쪽 안의 글 */
.bk-content {
  position: absolute; inset: 0; padding: var(--bk-page-pad); overflow: auto;
  font-family: var(--bk-font-body); font-size: var(--bk-size, 15px); line-height: var(--bk-line, 1.75); word-break: keep-all; overflow-wrap: anywhere;
  outline: none;
}
.bk-content h2 { font-size: 1.35em; margin: 0 0 .6em; line-height: 1.35; font-family: var(--bk-head-font, inherit); color: var(--bk-head-color, inherit); }
.bk-content a { color: var(--bk-head-color, var(--bk-accent)); }
.bk-content hr { border: none; border-top: 1px dashed var(--bk-paper-edge); margin: 1em 0; }
.bk-content p { margin: 0 0 .7em; }
.bk-content ul { padding-left: 1.3em; }
.bk-content:empty::before { content: attr(data-placeholder); color: var(--bk-muted); }
.editing .bk-content { cursor: text; box-shadow: inset 0 0 0 2px rgba(79, 124, 255, .35); }
/* 쪽 번호: 검정 동그라미 안에 흰 숫자 */
.bk-folio {
  position: absolute; bottom: 10px; left: 50%; width: 28px; height: 28px; margin-left: -14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; letter-spacing: 0;
  font: 700 13px/1 var(--bk-font-ui); color: #fff; background: #16171b; pointer-events: none;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
/* 넘김 손잡이: 오른쪽(왼쪽) 가장자리 띠 + 아래 모서리. 마우스가 오면 종이가 살짝 들린다 */
.bk-hot { position: absolute; z-index: 3; cursor: grab; touch-action: none; }
.bk-hot:active { cursor: grabbing; }
.bk-hot-edge { top: 0; bottom: 0; width: 36px; }
.bk-hot-corner { bottom: 0; width: 150px; height: 90px; }
.bk-page-right .bk-hot { right: 0; }
.bk-page-left .bk-hot { left: 0; }
.editing .bk-hot { display: none; }

/* 보기 모드 필기 */
.bk-ink { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.bk-ink path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bk-ink path.hl { mix-blend-mode: multiply; stroke-linecap: butt; }
.inking .bk-spread .bk-ink { pointer-events: auto; cursor: crosshair; touch-action: none; }
body[data-ink="erase"].inking .bk-spread .bk-ink { cursor: cell; }
.inking .bk-ink path { pointer-events: visibleStroke; }
.inking .bk-hot { display: none; }
/* 펜슬을 쓰는 기기: 필기 중에도 손가락으로 가장자리를 끌어 넘길 수 있게 손잡이를 둔다 (펜은 손잡이 위에서도 쓴다) */
.inking.pentouch .bk-hot { display: block; }
.bk-ink-tools { display: flex; gap: 4px; align-items: center; }
.bk-ink-btn { padding: 6px 9px; }
.bk-ink-btn.on { background: #ffe066; border-color: #ffe066; color: #1f2126; }
.bk-ink-color { padding: 3px 6px; display: inline-flex; align-items: center; }
.bk-ink-color input { width: 20px; height: 20px; padding: 0; border: none; background: none; cursor: pointer; }

/* 넘어가는 종이 (book.js drawCurl이 모양을 계산) */
.bk-curl { position: absolute; z-index: 5; pointer-events: none; transform-origin: center; }
.bk-curl-under { position: absolute; inset: 0; overflow: hidden; }
.bk-curl-face {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; transform-origin: 0 0;
  background: var(--bk-paper); color: var(--bk-ink);
}
.bk-curl-face.front { background-image: linear-gradient(to right, var(--bk-spine-shadow), transparent 7%); }
.bk-curl-face.back { background-image: linear-gradient(to left, var(--bk-spine-shadow), transparent 7%), linear-gradient(to right, rgba(0,0,0,.03), rgba(255,255,255,.0)); }
.bk-curl-inner { position: absolute; inset: 0; }
.bk-curl-backwrap { position: absolute; inset: 0; }
.bk-curl-shade { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; z-index: 4; }

/* 이미지: 크기 조절·배치(글 감싸기) */
.bimg { display: inline-block; position: relative; max-width: 100%; margin: 4px 0 8px; line-height: 0; }
.bimg img, .bimg video { width: 100%; height: auto; display: block; border-radius: 3px; background: #111; }
.bimg img { background: none; }
.bimg-cap { display: block; line-height: 1.4; font: 11px var(--bk-font-ui); color: var(--bk-muted); margin-top: 4px; }

/* 링크 카드 (참고한 곳) */
.blink {
  display: flex; gap: 10px; align-items: center; margin: 6px 0; padding: 7px 9px; border-radius: 8px; text-decoration: none;
  border: 1px solid var(--bk-paper-edge); background: var(--bk-card, #fff); color: var(--bk-ink); line-height: 1.35;
}
.blink:hover { border-color: var(--bk-accent); }
.blink-th {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
  font-size: 19px; color: #fff;
}
.blink-tx { min-width: 0; display: flex; flex-direction: column; }
.blink-tx b { font: 600 13px var(--bk-font-ui); }
.blink-tx small { font: 11px var(--bk-font-ui); color: var(--bk-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-note-box {
  margin: 8px 0; padding: 8px 11px; border-left: 3px solid var(--bk-accent); background: rgba(79, 124, 255, .06);
  border-radius: 0 6px 6px 0; font-size: .93em;
}
.bk-temp { font: 600 10px var(--bk-font-ui); color: #b7791f; background: #fff4dc; border-radius: 4px; padding: 1px 5px; margin-left: 4px; }
.bimg[data-float="left"] { float: left; margin-right: 14px; }
.bimg[data-float="right"] { float: right; margin-left: 14px; }
.bimg[data-float="center"] { display: block; margin-left: auto; margin-right: auto; }
.editing .bimg { cursor: grab; }
.bimg img { -webkit-user-drag: none; user-select: none; }
.bimg.dragging { opacity: .45; }
.bk-drop-caret { position: fixed; z-index: 60; width: 3px; border-radius: 2px; background: var(--bk-accent); pointer-events: none; box-shadow: 0 0 0 3px rgba(79,124,255,.25); }
.editing .bimg.sel { outline: 2px solid var(--bk-accent); outline-offset: 2px; }
.bimg-h {
  display: none; position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px; border-radius: 3px;
  background: #fff; border: 2px solid var(--bk-accent); cursor: nwse-resize;
}
.editing .bimg.sel .bimg-h { display: block; }
.bimg[data-float="right"] .bimg-h { right: auto; left: -7px; cursor: nesw-resize; }

/* 넘김 효과: 넘어가는 한 장 */
.bk-leaf {
  position: absolute; top: 0; width: 50%; height: 100%; transform-style: preserve-3d; z-index: 5;
  transition: transform .62s cubic-bezier(.4, .1, .3, 1);
}
.bk-leaf.quick { transition: transform .3s cubic-bezier(.2, .7, .3, 1); }   /* 손으로 쓸어 넘길 때 */
.bk-leaf.fwd { left: 50%; transform-origin: left center; }
.bk-leaf.back { left: 0; transform-origin: right center; }
.bk-leaf .face { position: absolute; inset: 0; backface-visibility: hidden; overflow: hidden; background: var(--bk-paper); color: var(--bk-ink); }
.bk-leaf .face.backside { transform: rotateY(180deg); }

/* ── 책 열기: 표지 ── */
.bk-cover { position: absolute; top: 0; z-index: 7; transform-origin: left center; transform-style: preserve-3d; }
.bk-cover-front, .bk-cover-back { position: absolute; inset: 0; overflow: hidden; }
.bk-cover-front {
  border-radius: 3px var(--bk-radius) var(--bk-radius) 3px; color: #fff; text-align: center; padding: 30px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background-image: linear-gradient(to right, rgba(0,0,0,.28), rgba(0,0,0,0) 9%, rgba(255,255,255,.08) 10%, rgba(0,0,0,0) 12%),
    linear-gradient(160deg, rgba(255,255,255,.18), rgba(0,0,0,.18));
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
}
.bk-cover-title { font: 700 clamp(20px, 3vw, 32px)/1.3 var(--bk-font-body); text-shadow: 0 2px 6px rgba(0,0,0,.25); }
.bk-cover-sub { font: 600 12px var(--bk-font-ui); letter-spacing: .2em; opacity: .75; text-transform: uppercase; }
.bk-cover-back {
  transform: scaleX(-1); background: var(--bk-paper); color: var(--bk-ink); border-radius: var(--bk-radius) 0 0 var(--bk-radius);
  background-image: linear-gradient(to left, var(--bk-spine-shadow), transparent 7%);
}
.bk-book.opening #bk-left { visibility: hidden; }

/* ── 쪽 번호 (책 위) · 진행 막대 (책 아래) ── */
.bk-pager {
  position: absolute; left: 50%; top: -34px; transform: translateX(calc(-50% + 36px)); display: flex; align-items: center; gap: 6px;   /* 오른쪽에 ＋ · ⛶ 가 붙은 만큼 밀어, 쪽 번호 칸이 왼쪽의 손 도구를 덮지 않게 */
  font: 13px var(--bk-font-ui); color: #cfd2db; white-space: nowrap; z-index: 6;
}
.bk-page-in {
  width: 64px; height: 26px; text-align: center; font: 600 13px var(--bk-font-ui); color: var(--bk-bar-text);
  background: rgba(255, 255, 255, .07); border: 1px solid #3a3d46; border-radius: 6px; padding: 0 4px;
}
.bk-page-in:focus { outline: none; border-color: var(--bk-accent); background: rgba(255, 255, 255, .12); }
.bk-progress {
  position: absolute; left: 0; right: 0; bottom: -22px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .09);
}
.bk-progress-bar { height: 100%; width: 0; border-radius: 3px; background: var(--bk-accent); transition: width .35s ease; }
.bk-progress-pct { position: absolute; right: 0; top: 9px; font: 11px var(--bk-font-ui); color: var(--bk-muted); }

/* ── 책갈피 탭 ── */
/* 책 왼쪽 가장자리에 붙는다. 3D 변형을 주지 않아야 글자가 또렷하다 */
.bk-marks {
  position: absolute; top: 18px; left: -36px; width: 36px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; z-index: 6;
}
.bk-mark {
  width: 32px; min-height: 64px; max-height: 150px; border: none; border-radius: 7px 0 0 7px; cursor: pointer;
  color: #fff; font: 700 13px/1.2 var(--bk-font-ui); writing-mode: vertical-rl; text-orientation: upright; letter-spacing: 1px;
  padding: 9px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  box-shadow: -2px 2px 6px rgba(0, 0, 0, .3); -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}
.bk-mark:not(.on):not(.bk-mark-add) { width: 27px; filter: saturate(.75) brightness(.9); }
.bk-mark:hover { filter: none; }
.bk-mark.on { width: 36px; }
.bk-mark-add { background: #3a3d46; min-height: 34px; writing-mode: horizontal-tb; font-size: 18px; }

/* ── 책장 (책 2권 이상) ── */
.bk-shelf {
  flex: 0 0 auto; display: flex; align-items: flex-end; gap: 6px; padding: 18px 12px 24px 16px;
  background: linear-gradient(to top, #3a2f25 0 10px, transparent 10px); border-right: 1px solid #33363e;
  overflow-x: auto; max-width: 45vw;
}
.bk-spine {
  width: 38px; height: min(62vh, 420px); border: none; border-radius: 4px 4px 2px 2px; cursor: pointer; flex: 0 0 auto;
  color: #fff; font: 700 13px/1.2 var(--bk-font-ui); writing-mode: vertical-rl; padding: 14px 0;
  box-shadow: inset -6px 0 10px rgba(0, 0, 0, .25), inset 3px 0 0 rgba(255, 255, 255, .15), 2px 0 4px rgba(0, 0, 0, .35);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: transform .15s, height .2s;
}
.bk-spine:hover { transform: translateY(-6px); }
.bk-spine.on { outline: 2px solid #fff; outline-offset: 2px; }
.bk-spine:nth-child(3n+2) { height: min(56vh, 380px); }
.bk-spine:nth-child(3n) { height: min(66vh, 440px); }

/* 이미지 도구 */
.bk-imgbar {
  position: fixed; z-index: 30; display: flex; gap: 4px; padding: 5px; border-radius: 8px;
  background: #1f2126; box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
}

.bk-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 40;
  background: rgba(20, 22, 32, .92); color: #fff; font-size: 13px; padding: 8px 16px; border-radius: 8px;
}

/* ── 내 색 (편집 도구) ── */
.bk-palette { display: inline-flex; gap: 3px; align-items: center; }
.bk-sw {
  position: relative; width: 26px; height: 30px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .25); cursor: pointer; padding: 0;
  font: 700 10px/1 var(--bk-font-ui); color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; display: inline-flex; align-items: flex-end; justify-content: flex-end;
}
.bk-sw span { padding: 2px 3px; }
.bk-sw:hover { outline: 2px solid var(--bk-accent); outline-offset: 1px; }

/* ── 책 스타일 (템플릿) ── */
.bk-theme { right: 12px; top: 64px; width: min(430px, calc(100vw - 16px)); max-height: calc(100vh - 80px); overflow: auto; }
.bk-theme-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 8px 0 10px; }
.bk-theme-card {
  position: relative; text-align: left; border-radius: 9px; border: 2px solid transparent; padding: 9px 10px; cursor: pointer; min-height: 74px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35); display: flex; flex-direction: column; gap: 3px;
}
.bk-theme-card.on { border-color: var(--bk-accent); }
.bk-theme-card b { font-size: 15px; line-height: 1.2; }
.bk-theme-card small { font-size: 11px; opacity: .8; }
.bk-theme-del { position: absolute; right: 3px; top: 2px; background: none; border: none; cursor: pointer; font-size: 12px; opacity: .6; color: inherit; }
.bk-theme-make summary { cursor: pointer; padding: 6px 0; font-weight: 600; }
.bk-theme-form { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin: 8px 0; }
.bk-theme-form label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #cfd2db; }
.bk-theme-form .bk-pop-in { margin: 0; }
.bk-theme-form input[type="color"] { width: 100%; height: 30px; padding: 0; border: 1px solid #3a3d46; border-radius: 6px; background: #2a2d34; }

/* ── 쪽 우클릭 메뉴 · 녹음 ── */
.bk-ctx {
  position: fixed; z-index: 70; min-width: 190px; padding: 4px; border-radius: 9px; background: #1f2126; border: 1px solid #3a3d46;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5); display: flex; flex-direction: column;
}
.bk-ctx button { text-align: left; background: none; border: none; color: var(--bk-bar-text); font: 13px var(--bk-font-ui); padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.bk-ctx button:hover { background: #2f323a; }
.bk-rec { display: flex; align-items: center; gap: 8px; width: auto; padding: 8px 10px; }
.bk-rec-dot { width: 11px; height: 11px; border-radius: 50%; background: #ef4444; animation: bk-blink 1s infinite; }
@keyframes bk-blink { 50% { opacity: .25; } }
.bk-voices { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.bk-voice {
  position: absolute; transform: translate(-50%, -50%); pointer-events: auto; cursor: pointer; border: none; white-space: nowrap;
  font: 600 12px var(--bk-font-ui); padding: 4px 9px; border-radius: 14px; background: #2563eb; color: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .28);
}
.bk-voice.on { background: #16a34a; }

/* ── PDF(인쇄) ── */
#bk-print { display: none; }
@media print {
  @page { size: A5; margin: 0; }
  html, body { height: auto !important; overflow: visible !important; background: #fff !important; display: block !important; }
  body > *:not(#bk-print) { display: none !important; }
  #bk-print { display: block; }
  .bk-print-page {
    position: relative; width: 148mm; height: 209.5mm; overflow: hidden; break-after: page; page-break-after: always;
    background: var(--bk-paper); color: var(--bk-ink); -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .bk-print-page:last-child { break-after: auto; page-break-after: auto; }
  .bk-print-inner { position: absolute; left: 0; top: 0; width: 466px; height: 660px; zoom: 1.2; }
  .bk-print-inner .bk-content { overflow: hidden; }
  .bk-print-video { display: block; background: #111; color: #fff; text-align: center; padding: 24px 8px; border-radius: 4px; font: 13px var(--bk-font-ui); line-height: 1.5; }
}

/* ── 소리 · 배경음 ── */
.bk-bgm { right: 12px; top: 64px; width: min(380px, calc(100vw - 16px)); }
.bk-bgm label.bk-check { display: flex; align-items: center; gap: 8px; margin: 8px 0; cursor: pointer; }
.bk-bgm-now { margin: 6px 0 10px; padding: 7px 9px; border-radius: 7px; background: #2a2d34; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-bgm-sep { height: 1px; background: #33363e; margin: 10px 0; }
.bk-bgm input[type="range"] { flex: 1 1 auto; }
.bk-bgm-btn.on { background: #2f6b4f; border-color: #3fa374; }
#bk-yt { position: fixed; right: 12px; bottom: 12px; width: 200px; height: 113px; border: 0; border-radius: 8px; z-index: 45; box-shadow: 0 6px 20px rgba(0, 0, 0, .45); }
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) { #bk-yt { width: 120px; height: 68px; right: 6px; bottom: 6px; } }

/* ── 초대 · 말풍선 ── */
.bk-note-btn, body.viewer .bk-share-btn { display: none; }
body.viewer .bk-note-btn { display: inline-block; }
.bk-note-btn.on, .bk-share-btn.on { background: #2f6b4f; border-color: #3fa374; }
body.viewer #bk-edit, body.viewer #bk-add-page, body.viewer #bk-del-page, body.viewer #bk-new-book,
body.viewer #bk-ink-tools, body.viewer .bk-mark-add, body.viewer .bk-owner-only { display: none !important; }
.bk-viewer-banner { display: none; }
body.viewer .bk-viewer-banner {
  display: block; flex: 0 0 auto; text-align: center; font-size: 12px; padding: 5px 10px; background: #2f3a5a; color: #dfe6ff;
}
.noting .bk-spread .bk-page:not(.empty-side) { cursor: copy; }
.noting .bk-hot { display: none; }
.bk-notes { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.bk-note {
  position: absolute; transform: translate(-50%, -100%); pointer-events: auto; cursor: pointer;
  font: 600 12px var(--bk-font-ui); padding: 4px 8px; border-radius: 12px 12px 12px 3px; border: none;
  background: #ffe066; color: #3a2e00; box-shadow: 0 3px 8px rgba(0, 0, 0, .25); white-space: nowrap;
}
.bk-note:hover { background: #ffd43b; }
.bk-pop {
  position: fixed; z-index: 50; width: min(340px, calc(100vw - 16px)); background: #1f2126; color: var(--bk-bar-text);
  border: 1px solid #3a3d46; border-radius: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, .5); padding: 12px; font-size: 13px;
}
.bk-share { left: 50%; top: 70px; transform: translateX(-50%); width: min(460px, calc(100vw - 16px)); }
.bk-pop-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.bk-pop-x { background: none; border: none; color: #aab; font-size: 15px; cursor: pointer; }
.bk-pop-p { margin: 4px 0 10px; line-height: 1.55; color: #cfd2db; }
.bk-pop-note { margin: 8px 0; font-size: 12px; color: var(--bk-muted); line-height: 1.5; }
.bk-share-row { display: flex; gap: 6px; }
.bk-share-row input, .bk-pop-in {
  flex: 1 1 auto; min-width: 0; width: 100%; font: 13px var(--bk-font-ui); color: var(--bk-bar-text); background: #2a2d34;
  border: 1px solid #3a3d46; border-radius: 7px; padding: 7px 9px; box-sizing: border-box;
}
.bk-pop-in { display: block; margin-bottom: 6px; resize: vertical; }
.bk-pop-in:focus, .bk-share-row input:focus { outline: none; border-color: var(--bk-accent); }
.bk-pop-row { display: flex; justify-content: flex-end; gap: 6px; }
.bk-thread-list { max-height: 46vh; overflow: auto; margin-bottom: 8px; display: flex; flex-direction: column; gap: 6px; }
.bk-msg { background: #2a2d34; border-radius: 8px; padding: 7px 9px; }
.bk-msg.owner { background: #24324f; }
.bk-msg-h { display: flex; gap: 8px; align-items: baseline; font-size: 11px; color: var(--bk-muted); margin-bottom: 3px; }
.bk-msg-h b { color: var(--bk-bar-text); font-size: 12px; }
.bk-msg-del { margin-left: auto; background: none; border: none; color: #ff8a8a; cursor: pointer; font-size: 11px; }
.bk-msg-b { white-space: pre-wrap; word-break: break-word; line-height: 1.5; }

/* ── 좁은 화면(휴대폰): 한 쪽씩 ── */
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) {
  .bk-book { aspect-ratio: .71 / 1; height: auto; width: 100%; max-width: 100%; max-height: 100%; }
  .bk-desk { padding: 40px 6px 36px; gap: 4px; }
  .bk-nav { width: 30px; height: 50px; font-size: 26px; }
  .single .bk-page-left { display: none; }
  .single .bk-page-right { border-radius: var(--bk-radius); }
  .bk-leaf { width: 100%; }
  .bk-leaf.fwd, .bk-leaf.back { left: 0; }
  .bk-marks { left: -4px; top: 10px; width: auto; align-items: flex-start; }
  .bk-mark { width: 24px; min-height: 52px; font-size: 12px; border-radius: 0 7px 7px 0; }
  .bk-mark:not(.on):not(.bk-mark-add) { width: 20px; }
  .bk-mark.on { width: 28px; }
  .bk-shelf { padding: 10px 8px; max-width: 100%; }
  .bk-spine { width: 30px; height: 46vh; }
  .bk-stage { flex-direction: column; }
  .bk-shelf { flex-direction: row; border-right: none; border-bottom: 1px solid #33363e; }
  .bk-shelf .bk-spine { height: 90px; }
  :root { --bk-page-pad: 22px 20px 34px; }
}

/* 휴대폰: 위쪽 버튼을 한 줄(옆으로 밀기)로 줄여 책 자리를 넓힌다 */
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) {
  .bk-bar { padding: 6px 8px; gap: 4px; }
  .bk-right { grid-column: 1 / -1; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .bk-right::-webkit-scrollbar { display: none; }
  .bk-edit-center { padding: 6px 14px; }
  .bk-tools { flex-wrap: nowrap; overflow-x: auto; }
  .bk-ink-tools, .bk-actions { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .bk-ink-tools::-webkit-scrollbar, .bk-actions::-webkit-scrollbar { display: none; }
  .bk-btn { padding: 5px 8px; font-size: 12px; white-space: nowrap; flex: 0 0 auto; }
  .bk-shelf .bk-spine { height: 64px; }
  .bk-desk { padding: 36px 4px 30px; }
  .bk-hot-corner { width: 90px; height: 70px; }
  .bk-hot-edge { width: 26px; }
}
.bk-share-row .bk-btn { white-space: nowrap; flex: 0 0 auto; }
.bk-marks { overflow: visible; padding-bottom: 8px; clip-path: inset(-24px 0 -24px -110px); }   /* 왼쪽으로는 튀어나오게, 오른쪽(책 쪽)으로는 가려서 책갈피가 책 밑에서 나오는 것처럼 */
.bk-book.opening .bk-marks { visibility: hidden; }

/* 책 전체 글자 크기 · 편집 중 선택 표시(글자색이 비쳐 보이게 옅게) · 색 알림 · 글꼴 추가 */
.bk-content { zoom: var(--bk-zoom, 1); }
.editing .bk-content ::selection { background: rgba(79, 124, 255, .22); }
.bk-toast-sw { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 8px; vertical-align: -2px; border: 1px solid rgba(255, 255, 255, .6); }
.bk-fontadd { left: 50%; top: 110px; transform: translateX(-50%); width: min(440px, calc(100vw - 16px)); }
.bk-fontadd a { color: #8ab4ff; }
.bk-fontadd-list { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; max-height: 30vh; overflow: auto; }
.bk-fontadd-item { display: flex; align-items: center; gap: 8px; padding: 6px 9px; background: #2a2d34; border-radius: 7px; font-size: 15px; }
.bk-tool-select { max-width: 150px; }
.bk-size-in { width: 60px; min-width: 0; padding: 0 4px 0 8px; cursor: text; }
/* 두 쪽에 걸쳐 고른 글의 옆 쪽 부분 (브라우저의 선택은 한 쪽 안에서만 되므로 따로 칠한다) */
::highlight(bk-xsel) { background: rgba(79, 124, 255, .22); }

/* ── 전자책 꾸미기 (ebooks/lib/kit.mjs 가 만드는 모양) ── */
.bk-content h1 { font-size: 1.9em; line-height: 1.3; margin: 0 0 .5em; font-family: var(--bk-head-font, inherit); color: var(--bk-head-color, inherit); letter-spacing: -.01em; }
.bk-chno { display: inline-block; font-size: .78em; font-weight: 700; color: #fff; background: var(--bk-head-color, var(--bk-accent)); border-radius: 999px; padding: 2px 12px; margin-bottom: .6em; }
.bk-lead { font-size: 1.12em; line-height: 1.65; font-weight: 600; }
/* 누군가 한 말 · 속으로 한 생각 */
.bk-say { border-left: 3px solid var(--bk-head-color, var(--bk-accent)); padding: .05em 0 .05em .85em; margin: .9em 0; font-weight: 500; }
.bk-small { font-size: .82em; color: var(--bk-muted); line-height: 1.5; }
.bk-content small { font-size: .85em; color: var(--bk-muted); line-height: 1.5; display: block; }
.bk-content li { margin-bottom: .35em; }
.bk-content strong, .bk-content b { font-weight: 700; }

.bk-callout { margin: .9em 0; padding: .6em .85em .35em; border-radius: 10px; border-left: 5px solid; line-height: 1.6; }
.bk-callout p, .bk-callout ul { margin: .25em 0 .5em; }
.bk-callout-t { display: block; font-size: .8em; letter-spacing: .02em; margin-bottom: .1em; }
.bk-callout.why  { background: rgba(37, 99, 235, .08);  border-color: #2563eb; } .bk-callout.why  .bk-callout-t { color: #1d4ed8; }
.bk-callout.tip  { background: rgba(14, 165, 233, .09); border-color: #0ea5e9; } .bk-callout.tip  .bk-callout-t { color: #0369a1; }
.bk-callout.warn { background: rgba(245, 158, 11, .12); border-color: #f59e0b; } .bk-callout.warn .bk-callout-t { color: #b45309; }
.bk-callout.sum  { background: rgba(22, 163, 74, .09);  border-color: #16a34a; } .bk-callout.sum  .bk-callout-t { color: #15803d; }
.bk-callout.todo { background: rgba(124, 58, 237, .09); border-color: #7c3aed; } .bk-callout.todo .bk-callout-t { color: #6d28d9; }
.bk-callout.why .bk-callout-t::before  { content: '💡 '; }
.bk-callout.tip .bk-callout-t::before  { content: '📝 '; }
.bk-callout.warn .bk-callout-t::before { content: '⚠️ '; }
.bk-callout.sum .bk-callout-t::before  { content: '✅ '; }
.bk-callout.todo .bk-callout-t::before { content: '👉 '; }

.bk-steps { list-style: none; padding: 0; margin: .8em 0; counter-reset: bks; }
.bk-steps li { counter-increment: bks; display: block; margin: 0 0 .55em; padding: .45em .8em .5em; background: var(--bk-card, #fff); border: 1px solid var(--bk-paper-edge); border-radius: 10px; line-height: 1.6; }
.bk-steps li::before { content: 'STEP ' counter(bks); display: inline-block; font-size: .68em; font-weight: 800; letter-spacing: .04em; color: #fff; background: var(--bk-head-color, var(--bk-accent)); border-radius: 6px; padding: 1px 8px; margin-right: .5em; vertical-align: .12em; }
.bk-steps li b { display: inline; }
.bk-steps li span { display: block; color: var(--bk-ink); opacity: .85; font-size: .94em; margin-top: .15em; }

.bk-content table { width: 100%; border-collapse: collapse; font-size: .87em; margin: .5em 0; }
.bk-content th { text-align: left; padding: .45em .55em; background: rgba(37, 99, 235, .1); color: var(--bk-head-color, inherit); font-size: .92em; }
.bk-content td { padding: .38em .5em; border-bottom: 1px solid var(--bk-paper-edge); vertical-align: top; line-height: 1.5; }

.bk-ba { display: grid; gap: .6em; margin: .7em 0; }
.bk-ba > div { border-radius: 10px; padding: .55em .8em .35em; line-height: 1.6; }
.bk-ba b { display: block; font-size: .8em; margin-bottom: .1em; }
.bk-ba p { margin: .2em 0 .35em; }
.bk-ba .bad  { background: rgba(239, 68, 68, .08);  border: 1px solid rgba(239, 68, 68, .35); } .bk-ba .bad b::before  { content: '✖ '; color: #dc2626; }
.bk-ba .good { background: rgba(22, 163, 74, .09);  border: 1px solid rgba(22, 163, 74, .4); }  .bk-ba .good b::before { content: '✔ '; color: #16a34a; }

.bk-checklist { list-style: none; padding-left: 0; margin: .3em 0 .5em; }
.bk-checklist li { padding-left: 1.6em; position: relative; margin-bottom: .3em; }
.bk-checklist li::before { content: '☐'; position: absolute; left: 0; font-size: 1.15em; line-height: 1.35; color: var(--bk-head-color, inherit); }

.bk-shot { margin: .8em 0; padding: .9em 1em; border: 2px dashed var(--bk-paper-edge); border-radius: 10px; text-align: center; color: var(--bk-muted); font-size: .9em; line-height: 1.5; }
.bk-shot b { display: block; margin-bottom: .2em; }

.bk-toc { list-style: none; padding: 0; margin: .6em 0; }
.bk-toc li { padding: .26em 0; border-bottom: 1px dotted var(--bk-paper-edge); line-height: 1.4; }
.bk-toc li b { display: inline-block; min-width: 3em; color: var(--bk-head-color, inherit); }

.bk-cover-page { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 6% 4%; }
.bk-cover-page h1 { font-size: 2.4em; line-height: 1.25; margin: .3em 0 .35em; }
.bk-kicker { font-size: .8em; font-weight: 700; letter-spacing: .12em; color: var(--bk-head-color, inherit); }
.bk-sub { font-size: 1.2em; font-weight: 600; margin: 0; }
.bk-rule { width: 56px; height: 4px; border-radius: 2px; background: var(--bk-head-color, var(--bk-accent)); margin: 1.6em 0 1.2em; }
.bk-by { font-size: 1.05em; font-weight: 700; margin: 0 0 .3em; }

/* 글 쓸 때 넣는 박스·표·HTML 칸 */
/* 박스 · 표 도구: 쪽 위에 떠서 나온다 (화면 줄을 차지하지 않으므로 나타나고 사라질 때 책이 밀리지 않는다) */
.bk-blocktools { position: fixed; z-index: 30; left: 0; top: 0; flex-wrap: nowrap; padding: 5px; border: 0; border-radius: 8px; background: #1f2126; box-shadow: 0 6px 20px rgba(0, 0, 0, .4); max-width: calc(100vw - 16px); }
/* 블록 오른쪽 위 모서리의 지우기 단추 */
.bk-blk-x { position: fixed; z-index: 31; left: 0; top: 0; width: 24px; height: 24px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: #e5484d; color: #fff; font: 700 12px/1 system-ui, sans-serif; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.bk-blk-x:hover { background: #c9353a; }
.bk-blk-x.hidden { display: none; }
#bk-handpop #hand-name.saved { border-color: #22c55e; box-shadow: 0 0 0 2px rgba(34, 197, 94, .3); }
.bk-tablepop { left: 330px; top: 108px; width: auto; }
.bk-grid { display: grid; grid-template-columns: repeat(6, 24px); gap: 3px; margin-bottom: 6px; }
.bk-grid i { width: 24px; height: 24px; border: 1px solid #4a4e5a; border-radius: 4px; background: #2a2d34; cursor: pointer; }
.bk-grid i.on { background: var(--bk-accent); border-color: var(--bk-accent); }
.bk-htmlpop { left: 50%; top: 108px; transform: translateX(-50%); width: min(520px, calc(100vw - 16px)); }
.bhtml { display: block; }
.bhtml-frame { display: block; width: 100%; background: #f1f5f9; border-radius: 8px; overflow: hidden; position: relative; }
.bhtml-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.editing .bhtml-frame iframe { pointer-events: none; }
.bhtml-print { display: flex !important; align-items: center; justify-content: center; font: 600 13px var(--bk-font-ui); color: #475569; border: 2px dashed #cbd5e1; aspect-ratio: auto !important; min-height: 70px; }
.bk-content td, .bk-content th { min-width: 2.2em; }
.editing .bk-content td, .editing .bk-content th { outline: 1px dashed rgba(127, 127, 127, .4); outline-offset: -2px; }
.editing .bk-content .bk-callout, .editing .bk-content .bk-ba, .editing .bk-content .bk-steps { cursor: text; }

/* 전자책: 쪽 나누기에서 묶여 다니는 덩어리 · 나의 메모 쪽(줄 공책) */
.bk-keep { display: block; }
.bk-memo {
  min-height: 62%; margin-top: .6em;
  --bk-ln: calc(var(--bk-size, 16px) * var(--bk-line, 1.85));
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--bk-ln) - 1px), rgba(127, 127, 127, .35) calc(var(--bk-ln) - 1px), rgba(127, 127, 127, .35) var(--bk-ln));
}
.bk-memo p { margin: 0; }

/* 표 칸이 한 글자씩 세로로 꺾이지 않게 */
.bk-content td, .bk-content th { overflow-wrap: break-word; word-break: keep-all; }
/* 책갈피가 많을 때는 짧고 가로로 */
.bk-marks.dense { gap: 4px; }
.bk-marks.dense .bk-mark { writing-mode: horizontal-tb; min-height: 30px; max-height: 30px; padding: 0 2px; width: 34px; font-size: 11.5px; letter-spacing: 0; text-align: center; line-height: 30px; text-orientation: mixed; text-overflow: clip; }
.bk-marks.dense .bk-mark:not(.on):not(.bk-mark-add) { width: 36px; }
.bk-marks.dense .bk-mark.on { width: 42px; }
.bk-marks.dense .bk-mark-add { min-height: 28px; max-height: 28px; line-height: 26px; }
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) { .bk-marks.dense .bk-mark { width: 30px; } .bk-marks.dense .bk-mark:not(.on):not(.bk-mark-add) { width: 24px; } }

/* 움직이는 칸: 크게 보기 단추 */
.bhtml-fs { position: absolute; right: 6px; top: 6px; z-index: 3; width: 28px; height: 28px; border-radius: 8px; border: none; cursor: pointer; background: rgba(12, 10, 9, .6); color: #fff; font-size: 16px; line-height: 1; opacity: .75; }
.bhtml-fs:hover { opacity: 1; background: rgba(12, 10, 9, .85); }
.editing .bhtml-fs { display: none; }

/* 지금 보는 장: 책갈피가 왼쪽으로 크게 튀어나오게 */
.bk-mark.on { width: 54px; font-size: 14px; font-weight: 800; z-index: 3; outline: 2px solid rgba(255, 255, 255, .92); outline-offset: -2px; box-shadow: -6px 4px 14px rgba(0, 0, 0, .5); filter: none; }
.bk-mark:not(.on):not(.bk-mark-add) { width: 26px; }
.bk-marks.dense .bk-mark.on { width: 58px; font-size: 13.5px; font-weight: 800; }
.bk-marks.dense .bk-mark:not(.on):not(.bk-mark-add) { width: 32px; }
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) { .bk-mark.on { width: 34px; } .bk-marks.dense .bk-mark.on { width: 38px; } }

/* ══════ 휴대폰: 쪽이 화면 전체 · ☰ 메뉴 · 아래 가로 책갈피 ══════ */
#bk-mmenu, #bk-mdone, #bk-mscrim, #bk-mtitle { display: none; }
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) {
  html, body { height: 100dvh; }
  body { display: block; overflow: hidden; --m-bottom: 46px; --m-stack: 46px; }

  /* 위에서 내려오는 메뉴(원래 위쪽 도구줄) */
  .bk-bar {
    position: fixed; left: 0; right: 0; top: 0; z-index: 60; display: flex; flex-direction: column; align-items: stretch; gap: 10px;
    padding: calc(12px + env(safe-area-inset-top)) 12px 14px; max-height: 84dvh; overflow-y: auto; overscroll-behavior: contain;
    background: rgba(24, 26, 32, .98); box-shadow: 0 18px 40px rgba(0, 0, 0, .55); border-radius: 0 0 18px 18px;
    transform: translateY(-110%); transition: transform .24s ease; visibility: hidden;
  }
  body.m-menu .bk-bar { transform: none; visibility: visible; }
  .bk-title-wrap { grid-column: auto; flex: none; width: 100%; padding-right: 0; }
  .bk-edit-center { grid-column: auto; width: 100%; justify-self: stretch; padding: 12px; font-size: 16px; }
  .bk-right, .bk-ink-tools, .bk-actions { grid-column: auto; flex-wrap: wrap; overflow: visible; max-width: 100%; justify-content: flex-start; gap: 8px; }
  .bk-btn { padding: 10px 14px; font-size: 14px; }
  .bk-bar .bk-shelf { position: static; display: flex; flex-direction: row; max-width: 100%; overflow-x: auto; padding: 4px 0 10px; border: 0; background: none; gap: 8px; }
  .bk-bar .bk-shelf.hidden { display: none; }
  .bk-bar .bk-shelf .bk-spine { height: 84px; width: 30px; font-size: 12px; }
  #bk-mscrim { display: none; position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .5); }
  body.m-menu #bk-mscrim { display: block; }

  /* 떠 있는 버튼: ☰ (+ 편집·필기 중에는 ✓ 끝내기) */
  #bk-mmenu, #bk-mdone {
    position: fixed; z-index: 50; top: calc(8px + env(safe-area-inset-top)); width: 42px; height: 42px; border-radius: 50%;
    display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .25); color: #fff; font: 700 20px var(--bk-font-ui);
    background: rgba(24, 26, 32, .8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 4px 14px rgba(0, 0, 0, .35); padding: 0;
  }
  #bk-mmenu { right: 10px; }
  #bk-mdone { right: 60px; width: auto; border-radius: 21px; padding: 0 16px; font-size: 15px; background: var(--bk-accent); border-color: var(--bk-accent); display: none; }
  body.m-working #bk-mdone { display: grid; }
  body.m-menu #bk-mmenu { background: var(--bk-accent); }
  /* 왼쪽 위: 지금 보는 책 제목 (누르면 책 목록이 든 메뉴) */
  #bk-mtitle {
    display: block; position: fixed; z-index: 49; top: calc(13px + env(safe-area-inset-top)); left: 10px; max-width: calc(100vw - 190px); height: 32px; padding: 0 12px; border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .22); background: rgba(24, 26, 32, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff;
    font: 600 13px var(--bk-font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #bk-mtitle::before { content: '📖 '; }
  body.m-menu #bk-mtitle, body.m-working #bk-mtitle, body.viewer #bk-mtitle { display: none; }

  /* 쪽 영역: 책갈피 막대(와 편집 도구) 위쪽 전부 */
  .bk-stage { position: fixed; left: 0; right: 0; top: 0; bottom: calc(var(--m-stack, 46px) + env(safe-area-inset-bottom)); display: block; }
  .bk-desk { position: absolute; inset: 0; padding: 0; gap: 0; perspective: none; display: block; }
  .bk-book, .bk-book.single { position: absolute; inset: 0; width: auto; height: auto; max-width: none; max-height: none; aspect-ratio: auto; transform-style: flat; }
  .bk-nav { display: none; }
  .bk-page-right, .single .bk-page-right { border-radius: 0; box-shadow: none; }
  :root { --bk-page-pad: calc(58px + env(safe-area-inset-top)) 20px 44px; }
  .bk-viewer-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 49; padding-top: calc(4px + env(safe-area-inset-top)); }
  body.viewer { --bk-page-pad: calc(78px + env(safe-area-inset-top)) 20px 44px; }

  /* 쪽 번호 · 읽은 정도 */
  .bk-pager { position: fixed; top: calc(12px + env(safe-area-inset-top)); left: 12px; transform: none; z-index: 45; background: rgba(24, 26, 32, .72); border-radius: 18px; padding: 3px 10px 3px 4px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .bk-page-in { width: 54px; height: 28px; }
  body.viewer .bk-pager { top: calc(34px + env(safe-area-inset-top)); }
  .bk-progress { position: fixed; top: 0; left: 0; right: 0; bottom: auto; height: 3px; border-radius: 0; z-index: 48; background: rgba(255, 255, 255, .12); }
  .bk-progress-bar { border-radius: 0; }
  .bk-progress-pct { display: none; }

  /* 책갈피: 맨 아래 가로 줄 (옆으로 밀어 넘김) */
  .bk-marks, .bk-marks.dense {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; z-index: 40; display: flex; flex-direction: row; align-items: center; gap: 8px;
    padding: 6px 12px calc(6px + env(safe-area-inset-bottom)); overflow-x: auto; overflow-y: hidden; clip-path: none; scrollbar-width: none;
    background: rgba(22, 24, 30, .97); border-top: 1px solid rgba(255, 255, 255, .08); -webkit-overflow-scrolling: touch;
  }
  .bk-marks::-webkit-scrollbar { display: none; }
  .bk-mark, .bk-marks.dense .bk-mark, .bk-marks.dense .bk-mark:not(.on):not(.bk-mark-add) {
    writing-mode: horizontal-tb; flex: 0 0 auto; width: auto !important; min-width: 56px; height: 34px; min-height: 34px; max-height: 34px;
    padding: 0 14px; border-radius: 17px; font-size: 14px; font-weight: 700; line-height: 34px; letter-spacing: 0; text-align: center; white-space: nowrap;
    text-orientation: mixed; box-shadow: none; filter: none; opacity: .72; outline: none;
  }
  .bk-mark.on, .bk-marks.dense .bk-mark.on { opacity: 1; outline: 2px solid #fff; outline-offset: -2px; font-size: 14.5px; width: auto !important; box-shadow: 0 2px 10px rgba(0, 0, 0, .45); }
  .bk-mark-add, .bk-marks.dense .bk-mark-add { min-width: 40px; padding: 0; }

  /* 편집 도구: 책갈피 바로 위, 옆으로 밀어서 */
  .bk-tools { position: fixed; left: 0; right: 0; bottom: calc(var(--m-bottom, 46px) + env(safe-area-inset-bottom)); z-index: 41; flex-wrap: nowrap; overflow-x: auto; padding: 6px 10px; background: #20242c; border-top: 1px solid #343944; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .bk-tools::-webkit-scrollbar { display: none; }
  .bk-tools > * { flex: 0 0 auto; }
  .bk-tools-hint, .bk-tools-sep { display: none; }
  .bk-tool, .bk-tool-select { height: 38px; min-width: 38px; font-size: 14px; }
  .bk-size-in { width: 66px; font-size: 16px; }   /* 16px 보다 작으면 폰이 화면을 키운다 */
  .bk-blocktools { left: 0; right: auto; bottom: auto; z-index: 39; padding: 5px; border-top: 0; }
  .bk-blk-x { width: 30px; height: 30px; font-size: 14px; z-index: 39; }

  /* 창들은 화면 폭에 맞춰 가운데 */
  .bk-share, .bk-bgm, .bk-theme, .bk-fontadd, .bk-htmlpop, .bk-tablepop { left: 8px !important; right: 8px !important; top: calc(60px + env(safe-area-inset-top)) !important; width: auto !important; transform: none !important; max-height: calc(100dvh - 120px); overflow: auto; }
  .bk-imgbar { max-width: calc(100vw - 16px); flex-wrap: wrap; }
  #bk-yt { bottom: calc(var(--m-stack, 46px) + 10px + env(safe-area-inset-bottom)); }
  .bk-toast { bottom: calc(var(--m-stack, 46px) + 20px + env(safe-area-inset-bottom)); }
  .bk-hot-corner { width: 90px; height: 90px; }
  .bk-hot-edge { width: 24px; }
}

/* 휴대폰: 보기만 하는 움직이는 그림 위에서도 쓸어 넘길 수 있게 덮는 투명 막 */
.bhtml-shield { display: none; position: absolute; inset: 0; z-index: 2; }
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) { .bhtml-shield { display: block; } .editing .bhtml-shield { display: none; } }
/* 손가락으로 쓰는 넓은 화면(눕힌 큰 아이패드 등 PC 구성)에서도 움직이는 그림 위에서 쓸어 넘긴다 */
@media (pointer: coarse) { .bhtml-shield { display: block; } .editing .bhtml-shield { display: none; } }
.bhtml-live .bhtml-shield { display: none !important; }
.bhtml-back { display: none; position: absolute; left: 50%; top: 8px; transform: translateX(-50%); z-index: 3; padding: 7px 14px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(24, 26, 32, .82); color: #fff; font: 600 13px var(--bk-font-ui); white-space: nowrap; cursor: pointer; }
.bhtml-live .bhtml-back { display: block; }
.editing .bhtml-back { display: none !important; }
@media print { .bhtml-back, .bhtml-shield { display: none !important; } }

/* 휴대폰: 가로로 쓸어 넘길 때 브라우저의 "뒤로 가기" 제스처가 끼어들지 않게 */
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) {
  html, body { overscroll-behavior: none; }
  .bk-book { touch-action: pan-y pinch-zoom; }
  .bk-content { overscroll-behavior: contain; }
}
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) {
  .bk-page-right, .single .bk-page-right { background-image: none; }   /* 휴대폰은 한 장씩이라 책등 그림자 없음 */
  .bk-bar .bk-shelf .bk-spine { height: 120px; }
}

/* 휴대폰: 화면에 꽉 채우지 않고 바깥에 조금 여백을 두고, 왼쪽에 앞 장의 가장자리가 보이게 해서 펼친 책처럼 보이게 한다 */
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) {
  .bk-book, .bk-book.single { inset: calc(6px + env(safe-area-inset-top)) 9px 9px 24px; }
  .bk-page-right, .single .bk-page-right {
    border-radius: 0 9px 9px 0;
    background-image: linear-gradient(to right, var(--bk-spine-shadow), transparent 9%);
    /* 오른쪽·아래로 겹쳐 쌓인 종이 가장자리 */
    box-shadow: 1px 1px 0 var(--bk-paper-edge), 3px 2px 0 var(--bk-paper), 4px 3px 0 var(--bk-paper-edge), 6px 4px 0 var(--bk-paper), 0 10px 26px rgba(0, 0, 0, .45);
    overflow: hidden;
  }
  .bk-book.single .bk-spread { overflow: visible; }
  /* 왼쪽 쪽의 책등 가까운 부분: 책등 쪽으로 어두워지고, 바깥 화면 끝으로 이어진다 */
  .bk-book.single::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: -24px; width: 24px; z-index: 1; pointer-events: none;
    background: linear-gradient(to left, var(--bk-spine-shadow), transparent 70%), var(--bk-paper);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04), 0 10px 26px rgba(0, 0, 0, .45);
    opacity: .28; transition: opacity .25s ease;
  }
  .bk-book.single.has-prev::before { opacity: .92; }
  :root { --bk-page-pad: calc(54px + env(safe-area-inset-top)) 17px 44px 19px; }
  body.viewer { --bk-page-pad: calc(74px + env(safe-area-inset-top)) 17px 44px 19px; }
}
@media (pointer: coarse) and (min-width: 761px) and (max-width: 1200px) {
  .bk-book, .bk-book.single { inset: 10px 0; }
  .bk-book.single::before { left: -30px; width: 30px; }
}

/* 휴대폰: 빠르게 쓸어 여러 장을 넘길 때 차례로 넘어가는 종이들 (book.js riffle) */
.bk-riffle { position: absolute; z-index: 6; pointer-events: none; }
.bk-riffle-leaf {
  position: absolute; inset: 0; overflow: hidden; background: var(--bk-paper); color: var(--bk-ink); border-radius: 0 9px 9px 0;
  background-image: linear-gradient(to right, var(--bk-spine-shadow), transparent 9%);
  transform-origin: left center; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 0 18px rgba(0, 0, 0, .3);
  animation: bk-riffle-fwd .3s ease-in both;
}
.bk-riffle-leaf.back { animation-name: bk-riffle-back; animation-timing-function: ease-out; }
@keyframes bk-riffle-fwd {
  from { transform: perspective(1400px) rotateY(0deg); filter: brightness(1); }
  to { transform: perspective(1400px) rotateY(-104deg); filter: brightness(.72); }
}
@keyframes bk-riffle-back {
  from { transform: perspective(1400px) rotateY(-104deg); filter: brightness(.72); }
  to { transform: perspective(1400px) rotateY(0deg); filter: brightness(1); }
}

/* 편집 중 마지막 쪽: '다음'이 새 쪽 만들기가 된다 */
.bk-nav.adds { font-size: 0; }
.bk-nav.adds::before { content: '＋'; font-size: 22px; }

/* 💾 책 보관 (내보내기 · 가져오기 · 구글 드라이브) */
.bk-keep { right: 12px; top: 64px; width: min(400px, calc(100vw - 16px)); }
.bk-keep-row { justify-content: flex-start; flex-wrap: wrap; margin: 8px 0 4px; }
.bk-keep-warn { background: rgba(245, 158, 11, .12); border-left: 3px solid #f59e0b; padding: 7px 9px; border-radius: 6px; color: #f3e3c2; }
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) { .bk-keep { left: 8px !important; right: 8px !important; top: calc(60px + env(safe-area-inset-top)) !important; width: auto !important; } }

/* 책장에서 지금 펼친 책은 키가 가장 크다 (위로 들어 올리는 대신 책 자체가 커진다) */
.bk-shelf .bk-spine.on, .bk-shelf .bk-spine.on:nth-child(n) { height: min(80vh, 540px); }
.bk-shelf .bk-spine.on:hover { transform: none; }
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) {
  .bk-bar .bk-shelf { align-items: flex-end; }
  .bk-bar .bk-shelf .bk-spine.on, .bk-bar .bk-shelf .bk-spine.on:nth-child(n) { height: 150px; }
}

/* ✍ 글로 책 만들기 */
.bk-mdpop { left: 50%; top: 64px; transform: translateX(-50%); width: min(560px, calc(100vw - 16px)); }
.bk-mdpop textarea { width: 100%; box-sizing: border-box; font: 13px/1.5 ui-monospace, Consolas, monospace; min-height: 220px; max-height: 56vh; }
.bk-content pre { white-space: pre-wrap; overflow-wrap: anywhere; font: .86em/1.55 ui-monospace, Consolas, monospace; background: rgba(100, 116, 139, .12); border-radius: 8px; padding: .7em .9em; margin: .7em 0; }
.bk-content code { font: .9em ui-monospace, Consolas, monospace; background: rgba(100, 116, 139, .14); border-radius: 4px; padding: 0 .3em; }
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) { .bk-mdpop { left: 8px !important; right: 8px !important; top: calc(60px + env(safe-area-inset-top)) !important; width: auto !important; transform: none !important; } }

/* 쪽의 마지막 덩어리 아래 여백은 세지 않는다 (그 여백 때문에 몇 픽셀 넘쳐 스크롤이 생기지 않게) */
.bk-content > :last-child { margin-bottom: 0; }

/* 태블릿(아이패드 미니 등 손가락으로 쓰는 넓은 화면)도 휴대폰과 같은 한 쪽 보기로 쓴다.
   가로로 눕히면 한 줄이 너무 길어지므로 쪽을 가운데에 알맞은 폭으로 둔다 */
@media (pointer: coarse) and (min-width: 761px) and (max-width: 1200px) {
  .bk-book, .bk-book.single { margin: 0 auto; width: min(100%, 720px); }
  :root { --bk-page-pad: 34px 40px 44px; }
}

/* 🏷 분류: 책장에서 1차 > 2차로 묶어 보여 주는 이름표 */
.bk-catpop { right: 12px; top: 64px; width: min(320px, calc(100vw - 16px)); }
.bk-shelf-cat {
  flex: 0 0 auto; align-self: flex-end; writing-mode: vertical-rl; max-height: min(62vh, 420px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font: 700 12px/1 var(--bk-font-ui); color: #e9e2d6; background: rgba(255, 255, 255, .1); border-radius: 6px 6px 0 0; padding: 10px 5px; margin-left: 8px;
}
.bk-shelf-cat:first-child { margin-left: 0; }
.bk-shelf-cat.sub { font-weight: 500; font-size: 11px; color: #b9bdc9; background: none; padding: 8px 1px; margin-left: 2px; }
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) {
  .bk-catpop { left: 8px !important; right: 8px !important; top: calc(60px + env(safe-area-inset-top)) !important; width: auto !important; }
  .bk-bar .bk-shelf .bk-shelf-cat { max-height: 120px; }
}

/* 좌우 버튼 아래: 맨 처음 · 맨 마지막 쪽 */
.bk-navcol { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bk-nav.bk-nav-end { height: 36px; font-size: 15px; }
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) { .bk-navcol { display: none; } }
.bk-theme-acts { justify-content: flex-start; flex-wrap: wrap; margin: 0 0 6px; }
.bk-ctx .bk-danger { color: #ff8a8a; }

/* ══════ 책장: 위에 분류 상자, 가운데 정렬 고르기, 아래 책등 ══════ */
.bk-shelf { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 12px; overflow: hidden; }
.bk-shelf-row { flex: 1 1 auto; min-height: 0; display: flex; align-items: flex-end; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 10px 4px 0; }
.bk-shelf .bk-spine { height: min(44vh, 340px); }
.bk-shelf .bk-spine:nth-child(3n+2) { height: min(40vh, 310px); }
.bk-shelf .bk-spine:nth-child(3n) { height: min(48vh, 370px); }
.bk-shelf .bk-spine.on, .bk-shelf .bk-spine.on:nth-child(n) { height: min(58vh, 450px); }
.bk-shelf .bk-spine { transition: transform .15s, height .32s cubic-bezier(.2, .8, .2, 1); touch-action: pan-x; user-select: none; }
.bk-cats { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; max-height: 32vh; overflow-y: auto; }
.bk-cat { position: relative; width: 104px; }
.bk-cat-title { font: 700 12px/1.3 var(--bk-font-ui); color: #e9e2d6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 2px 18px 3px 3px; border-radius: 4px; cursor: default; }
.bk-cat-title[contenteditable="true"] { background: #fff; color: #111; outline: 2px solid var(--bk-accent); text-overflow: clip; cursor: text; padding-right: 3px; }
.bk-cat-box { height: 62px; border: 1.5px dashed rgba(255, 255, 255, .3); border-radius: 8px; display: flex; flex-wrap: wrap; align-content: flex-end; align-items: flex-end; gap: 3px; padding: 5px; overflow: hidden; cursor: pointer; }
.bk-cat.on .bk-cat-box { border-style: solid; border-color: var(--bk-accent); background: rgba(79, 124, 255, .14); }
.bk-cat.drop .bk-cat-box { border-style: solid; border-color: #fff; background: rgba(255, 255, 255, .16); }
.bk-cat-thumb { width: 11px; height: 46px; border: none; border-radius: 2px 2px 1px 1px; padding: 0; cursor: grab; font-size: 0; box-shadow: inset -2px 0 3px rgba(0, 0, 0, .28), inset 1px 0 0 rgba(255, 255, 255, .18); }
.bk-cat-thumb:nth-child(3n+2) { height: 40px; }
.bk-cat-thumb:nth-child(3n) { height: 50px; }
.bk-cat-thumb.on { outline: 1.5px solid #fff; outline-offset: 1px; }
.bk-cat-x { position: absolute; right: 0; top: 0; display: none; background: none; border: none; color: #aab; font-size: 11px; cursor: pointer; padding: 2px 4px; }
.bk-cat:hover .bk-cat-x { display: block; }
.bk-cat-add { width: 34px; height: 62px; border: 1.5px dashed rgba(255, 255, 255, .3); background: none; color: #cfd2db; font-size: 20px; border-radius: 8px; cursor: pointer; }
.bk-cat-add:hover { border-color: #fff; color: #fff; }
.bk-sort { flex: 0 0 auto; display: flex; gap: 4px; }
.bk-sort button { font: 600 12px/1 var(--bk-font-ui); padding: 5px 10px; border-radius: 12px; border: 1px solid #4a4e5a; background: none; color: #aab0bf; cursor: pointer; }
.bk-sort button.on { background: var(--bk-accent); border-color: transparent; color: #fff; }
.bk-spine.dragging, .bk-cat-thumb.dragging { opacity: .3; }
.bk-spine.ins { margin-left: 14px; box-shadow: -9px 0 0 -6px #fff, inset -6px 0 10px rgba(0, 0, 0, .25); }
.bk-shelf-row.ins-end { box-shadow: inset -3px 0 0 #fff; }
.bk-drag-ghost { position: fixed !important; left: 0; top: 0; z-index: 999; pointer-events: none; opacity: .92; margin: 0 !important; transition: none !important; box-shadow: 0 10px 24px rgba(0, 0, 0, .5); }
.bk-drag-ghost.bk-cat-thumb { width: 30px !important; height: 120px !important; }
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) {
  .bk-bar .bk-shelf { flex-direction: column; align-items: stretch; overflow: visible; padding: 4px 0 6px; }
  .bk-bar .bk-shelf-row { flex: none; overflow-x: auto; padding: 4px 0 6px; gap: 8px; -webkit-overflow-scrolling: touch; }
  .bk-bar .bk-shelf .bk-spine, .bk-bar .bk-shelf .bk-spine:nth-child(n) { height: 120px; }
  .bk-bar .bk-shelf .bk-spine.on, .bk-bar .bk-shelf .bk-spine.on:nth-child(n) { height: 150px; }
  .bk-cats { max-height: none; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
  .bk-cat { flex: 0 0 auto; }
  .bk-cat-x { display: block; }
}

/* 👤 크라모북 계정 */
.bk-acct { right: 12px; top: 64px; width: min(340px, calc(100vw - 16px)); }
.bk-acct-wide { width: 100%; justify-content: center; text-align: center; }
.bk-acct-row { align-items: center; margin-top: 4px; }
.bk-acct-row a { margin-right: auto; color: #9db8ff; font-size: 13px; }
.bk-acct-btn.warn { color: #ffd27a; border-color: #b8842a; }
/* ☰ 옆 진행 막대: 계정과 맞추는 동안 움직인다. PC는 로그인 · ☰ 단추 바로 아래의 가는 줄, 휴대폰은 ☰ 왼쪽의 알약 */
#bk-syncbar { position: fixed; z-index: 49; top: 47px; right: 12px; width: 150px; height: 3px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, .12); pointer-events: none; }
#bk-syncbar span { display: none; }
#bk-syncbar i { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--bk-accent), transparent); animation: bk-syncbar 1.1s linear infinite; }
@keyframes bk-syncbar { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) {
  #bk-syncbar { top: calc(8px + env(safe-area-inset-top)); right: 60px; width: auto; min-width: 86px; max-width: calc(100vw - 150px); height: 42px; border-radius: 21px; padding: 0 14px; display: grid; align-items: center; border: 1px solid rgba(255, 255, 255, .25); background: rgba(24, 26, 32, .8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
  #bk-syncbar span { display: block; color: #fff; font: 600 12px var(--bk-font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #bk-syncbar i { top: auto; bottom: 5px; height: 3px; left: 14px; right: 14px; width: auto; background: linear-gradient(90deg, transparent, var(--bk-accent) 50%, transparent); background-size: 60% 100%; background-repeat: no-repeat; animation: bk-syncbar-m 1.1s linear infinite; }
  body.m-working #bk-syncbar { right: 156px; max-width: calc(100vw - 246px); }
  body.m-menu #bk-syncbar { display: none; }
}
@keyframes bk-syncbar-m { from { background-position: -150% 0; } to { background-position: 250% 0; } }
@media print { #bk-syncbar { display: none !important; } }
/* ☰ 사이트 메뉴: 가입 · 크라모 · 크라톡 · 크라우니클래스 */
.bk-site { right: 12px; top: 64px; width: min(260px, calc(100vw - 16px)); }
.bk-site-link { display: block; width: 100%; padding: 10px 8px; border: 0; border-radius: 8px; background: none; color: var(--bk-bar-text); font: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer; }
.bk-site-link:hover { background: rgba(255, 255, 255, .08); }
.bk-site-link small { margin-left: 6px; color: var(--bk-muted); font-size: 12px; }
body.acct-on .bk-keep-warn { display: none; }
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) { .bk-site { left: 8px !important; right: 8px !important; top: calc(60px + env(safe-area-inset-top)) !important; width: auto !important; } .bk-site-link { padding: 13px 10px; font-size: 16px; } }
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) { .bk-acct { left: 8px !important; right: 8px !important; top: calc(60px + env(safe-area-inset-top)) !important; width: auto !important; } .bk-acct .bk-pop-in { font-size: 16px; } }

/* 📥 다른 앱에서 보낸 글 담기 */
.bk-sharein { left: 50%; top: 64px; transform: translateX(-50%); width: min(460px, calc(100vw - 16px)); max-height: calc(100dvh - 90px); overflow: auto; z-index: 70; }
.bk-sharein textarea { width: 100%; box-sizing: border-box; max-height: 34vh; font-size: 14px; }
.bk-sharein-row { margin: 6px 0 2px; }
.bk-sharein-row .bk-danger { margin-right: auto; }
.bk-sharein-books { display: flex; flex-direction: column; gap: 6px; }
.bk-sharein-books .bk-btn { width: 100%; text-align: left; justify-content: flex-start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-sharein-books .bk-btn-primary { text-align: center; justify-content: center; }
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) { .bk-sharein { left: 8px !important; right: 8px !important; top: calc(60px + env(safe-area-inset-top)) !important; width: auto !important; transform: none !important; } .bk-sharein textarea { font-size: 16px; } }

/* 책 제목 칸: 고칠 수 있는 칸이라는 것이 보이게 */
.bk-title:hover { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .35); }
.bk-title:focus { box-shadow: inset 0 -2px 0 var(--bk-accent); }

/* 🔖 여기까지 읽었음 */
.bk-readpop { left: 50%; top: 30%; transform: translate(-50%, -30%); width: min(340px, calc(100vw - 16px)); z-index: 70; }
.bk-readpop textarea { width: 100%; box-sizing: border-box; font-size: 14px; }
.bk-read-when { font-weight: 700; color: #e9e2d6; margin: 2px 0 8px; }
.bk-readpop .bk-pop-row .bk-danger { margin-right: auto; }
.bk-reads-layer { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.bk-read { position: absolute; right: 2px; transform: translateY(-50%); pointer-events: auto; border: none; background: none; cursor: pointer; font-size: 20px; line-height: 1; padding: 2px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.editing .bk-reads-layer { display: none; }
/* 책 오른쪽 가장자리의 탭 (왼쪽 책갈피와 마주 본다) */
.bk-reads { position: absolute; top: 18px; right: -36px; width: 36px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; z-index: 6; }
.bk-readtab {
  width: 30px; min-height: 60px; max-height: 150px; border: none; border-radius: 0 7px 7px 0; cursor: pointer; background: #b45309; color: #fff;
  font: 700 12px/1.2 var(--bk-font-ui); writing-mode: vertical-rl; padding: 8px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .86;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, .3);
}
.bk-readtab.on { width: 34px; opacity: 1; outline: 2px solid #fff; outline-offset: -2px; }
.bk-book.opening .bk-reads { visibility: hidden; }
.bk-marks .bk-readtab.bk-mark { background: #b45309; }
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) {
  .bk-readpop { left: 8px !important; right: 8px !important; top: 22% !important; width: auto !important; transform: none !important; }
  .bk-readpop textarea { font-size: 16px; }
  .bk-read { font-size: 22px; padding: 6px; }
}

/* ══════ 속지 템플릿 5종 (🎨 스타일 → 속지 01~05). 색·글꼴은 스타일 값이, 박스·제목의 모양은 여기서 정한다 ══════ */
/* 공통: 속지 템플릿에서는 박스 제목의 그림 글자를 빼고 차분하게 */
body[data-look] .bk-content .bk-callout-t::before { content: none; }
body[data-look] .bk-content .bk-callout-t { font-size: .86em; font-weight: 700; letter-spacing: 0; margin-bottom: .25em; }

/* 01 미니멀: 흰 종이, 가는 파란 선, 큰 명조 숫자 */
body[data-look="minimal"] .bk-content h1 { font-weight: 400; font-size: 1.75em; letter-spacing: -.02em; color: var(--bk-ink); }
body[data-look="minimal"] .bk-content h2 { font-weight: 700; color: var(--bk-head-color); }
body[data-look="minimal"] .bk-content .bk-chno { background: none; color: var(--bk-head-color); padding: 0; border-radius: 0; font: 400 2.6em/1 var(--bk-head-font, serif); margin-bottom: .1em; }
body[data-look="minimal"] .bk-content .bk-callout { background: var(--bk-card, #f6f9fd); border: 1px solid #b9cdea; border-left-width: 1px; border-radius: 8px; padding: .75em 1em .5em; }
body[data-look="minimal"] .bk-content .bk-callout .bk-callout-t { color: var(--bk-head-color); }
body[data-look="minimal"] .bk-content .bk-steps li { background: none; border: none; border-bottom: 1px solid #d8e2f0; border-radius: 0; padding: .5em 0; }
body[data-look="minimal"] .bk-content .bk-steps li::before { background: none; color: var(--bk-head-color); padding: 0; font-size: .74em; }
body[data-look="minimal"] .bk-content .bk-lead { font-weight: 400; color: var(--bk-head-color); }
body[data-look="minimal"] .bk-content th { background: none; border-bottom: 1.5px solid var(--bk-head-color); }
body[data-look="minimal"] .bk-content td { border-bottom: 1px solid #e3e9f2; }
body[data-look="minimal"] .bk-content .bk-ba > div { background: none; border: 1px solid #d8e2f0; }

/* 02 에디토리얼: 크림 종이, 큰 명조 제목, 벽돌색 강조 */
body[data-look="editorial"] .bk-content h1 { font-size: 2.3em; font-weight: 700; line-height: 1.22; letter-spacing: -.03em; color: var(--bk-ink); }
body[data-look="editorial"] .bk-content h2 { font-size: 1.2em; font-weight: 400; color: var(--bk-head-color); }
body[data-look="editorial"] .bk-content .bk-chno { background: none; color: var(--bk-head-color); padding: 0; border-radius: 0; font-size: .74em; letter-spacing: .14em; }
body[data-look="editorial"] .bk-content .bk-lead { font-weight: 400; font-size: 1.14em; color: var(--bk-head-color); border-left: 2px solid var(--bk-head-color); padding: .1em 0 .1em .8em; margin: .8em 0; }
body[data-look="editorial"] .bk-content .bk-callout { background: var(--bk-card, #fffaf0); border: 1px solid var(--bk-head-color); border-left-width: 1px; border-radius: 6px; padding: 0 .9em .4em; overflow: hidden; }
body[data-look="editorial"] .bk-content .bk-callout .bk-callout-t { display: block; background: var(--bk-head-color); color: #fff; margin: 0 -.9em .5em; padding: .25em .9em; }
body[data-look="editorial"] .bk-content .bk-steps li { background: none; border: none; border-top: 1px solid rgba(155, 44, 31, .3); border-radius: 0; padding: .55em 0 .4em; }
body[data-look="editorial"] .bk-content .bk-steps li::before { background: none; color: var(--bk-head-color); padding: 0; letter-spacing: .1em; }
body[data-look="editorial"] .bk-content th { background: none; border-top: 2px solid var(--bk-ink); border-bottom: 1px solid var(--bk-ink); color: var(--bk-ink); }
body[data-look="editorial"] .bk-content td { border-bottom: 1px solid rgba(43, 38, 34, .18); }
body[data-look="editorial"] .bk-content hr { border-top: 1px solid rgba(155, 44, 31, .4); }

/* 03 컬러 가이드: 흰 종이, 고딕, 색으로 구분한 박스 */
body[data-look="color"] .bk-content h1 { font-weight: 700; font-size: 1.8em; }
body[data-look="color"] .bk-content h2 { color: var(--bk-head-color); }
body[data-look="color"] .bk-content .bk-callout { border: none; border-radius: 10px; padding: .8em 1em .5em; }
body[data-look="color"] .bk-content .bk-callout.why  { background: #e4f3f6; } body[data-look="color"] .bk-content .bk-callout.why  .bk-callout-t { color: #0d7a8a; }
body[data-look="color"] .bk-content .bk-callout.tip  { background: #e8f1fb; } body[data-look="color"] .bk-content .bk-callout.tip  .bk-callout-t { color: #1d5fa8; }
body[data-look="color"] .bk-content .bk-callout.warn { background: #fdecA0; background: #fdeeaa; } body[data-look="color"] .bk-content .bk-callout.warn .bk-callout-t { color: #7a5600; }
body[data-look="color"] .bk-content .bk-callout.sum  { background: #e3f4e6; } body[data-look="color"] .bk-content .bk-callout.sum  .bk-callout-t { color: #1f7a3a; }
body[data-look="color"] .bk-content .bk-callout.todo { background: #fde9a6; } body[data-look="color"] .bk-content .bk-callout.todo .bk-callout-t { color: #7a5600; }
body[data-look="color"] .bk-content .bk-steps li { background: #fff; border: 1.5px solid #7cc4cf; border-radius: 10px; }
body[data-look="color"] .bk-content .bk-steps li::before { background: var(--bk-head-color); border-radius: 999px; padding: 2px 10px; }
body[data-look="color"] .bk-content .bk-checklist { background: #e4f3f6; border-radius: 10px; padding: .7em 1em .5em; }
body[data-look="color"] .bk-content th { background: var(--bk-head-color); color: #fff; }
body[data-look="color"] .bk-content td { border-bottom: 1px solid #d5e7ea; }
body[data-look="color"] .bk-content .bk-lead { color: var(--bk-head-color); }

/* 04 워크북: 남색 머리띠 박스, 번호 동그라미, 답 쓰는 줄 */
body[data-look="workbook"] .bk-content h1 { font-weight: 700; font-size: 1.8em; }
body[data-look="workbook"] .bk-content h2 { color: var(--bk-head-color); font-size: 1.12em; }
body[data-look="workbook"] .bk-content .bk-chno { border-radius: 4px; }
body[data-look="workbook"] .bk-content .bk-callout { background: #fff; border: 1.5px solid var(--bk-head-color); border-left-width: 1.5px; border-radius: 8px; padding: 0 1em .45em; overflow: hidden; }
body[data-look="workbook"] .bk-content .bk-callout .bk-callout-t { display: block; background: var(--bk-head-color); color: #fff; margin: 0 -1em .55em; padding: .3em 1em; }
body[data-look="workbook"] .bk-content .bk-callout.sum { background: var(--bk-card, #eaf1f8); border: none; padding: .8em 1em .5em; }
body[data-look="workbook"] .bk-content .bk-callout.sum .bk-callout-t { background: none; color: var(--bk-head-color); margin: 0 0 .25em; padding: 0; }
body[data-look="workbook"] .bk-content .bk-steps li { background: none; border: none; border-radius: 0; border-bottom: 1px solid #b8c2d2; padding: .35em 0 1.7em 2.2em; position: relative; }
body[data-look="workbook"] .bk-content .bk-steps li::before { content: counter(bks); position: absolute; left: 0; top: .35em; width: 1.7em; height: 1.7em; padding: 0; border-radius: 50%; display: grid; place-items: center; font-size: .8em; background: var(--bk-head-color); margin: 0; letter-spacing: 0; }
body[data-look="workbook"] .bk-content .bk-checklist li { border-bottom: 1px dotted #b8c2d2; padding-bottom: .3em; }
body[data-look="workbook"] .bk-content th { background: var(--bk-head-color); color: #fff; }
body[data-look="workbook"] .bk-content td { border: 1px solid #c9d2df; }
body[data-look="workbook"] .bk-content .bk-ba > div { background: #fff; border: 1.5px solid var(--bk-head-color); }

/* 05 프리미엄: 아이보리 종이, 진한 녹색과 금색 선, 가운데 제목 */
body[data-look="premium"] .bk-content h1 { text-align: center; font-weight: 400; font-size: 1.85em; letter-spacing: -.01em; margin-bottom: .3em; }
body[data-look="premium"] .bk-content h2 { color: var(--bk-head-color); font-weight: 700; }
body[data-look="premium"] .bk-content .bk-chno { display: block; text-align: center; background: none; color: #a8853a; padding: 0; border-radius: 0; font-size: .72em; letter-spacing: .22em; }
body[data-look="premium"] .bk-content .bk-callout { background: var(--bk-card, #e3e9dc); border: none; border-radius: 12px; padding: .9em 1.1em .55em; }
body[data-look="premium"] .bk-content .bk-callout .bk-callout-t { color: var(--bk-head-color); }
body[data-look="premium"] .bk-content .bk-lead { text-align: center; font-weight: 400; font-size: 1.12em; color: var(--bk-head-color); border-top: 1px solid #c2a25a; border-bottom: 1px solid #c2a25a; padding: .9em .5em; margin: 1.1em 8%; }
body[data-look="premium"] .bk-content .bk-steps li { background: none; border: none; border-bottom: 1px solid rgba(168, 133, 58, .45); border-radius: 0; padding: .5em 0; }
body[data-look="premium"] .bk-content .bk-steps li::before { background: none; color: #a8853a; padding: 0; letter-spacing: .14em; }
body[data-look="premium"] .bk-content hr { border-top: 1px solid #c2a25a; margin: 1.2em 12%; }
body[data-look="premium"] .bk-content th { background: var(--bk-head-color); color: #f6f1e6; }
body[data-look="premium"] .bk-content td { border-bottom: 1px solid rgba(31, 64, 53, .2); }
body[data-look="premium"] .bk-content .bk-ba > div { background: var(--bk-card, #e3e9dc); border: none; }

/* ══════ 📚 책장 화면: 선반 위에 표지가 놓인다 ══════ */
.bk-lib { position: fixed; inset: 0; z-index: 80; background: #bccde0; color: #1f2937; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.bk-lib-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: #fff; box-shadow: 0 2px 6px rgba(30, 50, 80, .18); font: 700 17px var(--bk-font-ui); }
.bk-lib-x { border: none; background: none; font-size: 22px; cursor: pointer; color: #1f2937; padding: 2px 8px; }
.bk-lib-count { font-weight: 500; font-size: 13px; color: #5b6b82; }
.bk-lib-new { margin-left: auto; border: none; border-radius: 8px; background: #f6b21b; color: #1f2937; font: 700 15px var(--bk-font-ui); padding: 9px 16px; cursor: pointer; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); }
.bk-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); row-gap: 34px; padding: 40px max(16px, 5vw) 60px; }
.bk-lib-item { border: none; background: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: stretch; font: 14px var(--bk-font-ui); color: #1f2937; }
/* 표지를 올려 둔 선반: 칸마다 그려서 옆 칸과 이어진다 */
.bk-lib-stand { height: 176px; display: flex; align-items: flex-end; justify-content: center; border-bottom: 12px solid #dfe8f3; box-shadow: 0 7px 8px -4px rgba(40, 60, 95, .45); }
.bk-lib-name { padding: 16px 8px 0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-lib-cover { position: relative; overflow: hidden; background: #fff; border-radius: 2px 4px 4px 2px; box-shadow: 0 4px 10px rgba(30, 45, 70, .4), inset 4px 0 4px -2px rgba(0, 0, 0, .18); transition: transform .15s; flex: 0 0 auto; }
.bk-lib-item:hover .bk-lib-cover { transform: translateY(-6px); }
.bk-lib-item.on .bk-lib-cover { outline: 3px solid #1a73e8; outline-offset: 2px; }
.bk-lib-cover.plain { display: grid; place-items: center; padding: 10px; color: #fff; font: 700 14px/1.35 var(--bk-font-ui); text-align: center; word-break: keep-all; }
.bk-lib-page { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
.bk-lib-page .bk-content { overflow: hidden; --bk-page-pad: 30px 28px; }
.bk-lib-pick { padding: 26px max(16px, 5vw) 60px; text-align: center; }
.bk-lib-note { margin: 0 0 30px; color: #44546b; font: 14px var(--bk-font-ui); }
.bk-lib-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 0; border-bottom: 12px solid #dfe8f3; box-shadow: 0 7px 8px -4px rgba(40, 60, 95, .45); }
.bk-lib-shape { position: relative; border: none; background: none; padding: 0 5vw; cursor: pointer; display: grid; place-items: center; }
.bk-lib-shape i { display: block; background: #fff; border-radius: 2px 4px 4px 2px; box-shadow: 0 4px 10px rgba(30, 45, 70, .35), inset 5px 0 4px -2px rgba(0, 0, 0, .14); transition: transform .15s; }
.bk-lib-shape span { position: absolute; font: 700 20px var(--bk-font-ui); color: #1f2937; }
.bk-lib-shape:hover i { transform: translateY(-6px); }
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) {
  .bk-lib-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); padding: 24px 0 60px; row-gap: 26px; }
  .bk-lib-stand { height: 128px; }
  .bk-lib-cover { zoom: .72; }
  .bk-lib-name { font-size: 13px; padding-top: 12px; }
  .bk-lib-shape { padding: 0 10px; }
  .bk-lib-shape i { zoom: .62; }
  .bk-lib-shape span { font-size: 16px; }
}

/* 휴대폰 덮기 넘김: 위에서 움직이는 종이 */
.bk-cover-top { z-index: 7; box-shadow: -18px 0 30px rgba(0, 0, 0, .38); will-change: transform; }
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) {
  .bk-hot { display: none; }   /* 한 쪽 보기는 종이를 통째로 끌어 넘긴다 (모서리 손잡이 없음) */
  .bk-spread { -webkit-touch-callout: none; }
}

/* 진행 막대: 잡고 끌어 쪽 이동 */
.bk-progress { cursor: pointer; touch-action: none; }
.bk-progress::after { content: ''; position: absolute; left: 0; right: 0; top: -9px; height: 24px; }
.bk-progress-bar { position: relative; }
.bk-progress-bar::after { content: ''; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.bk-progress.scrub .bk-progress-bar { transition: none; }
.bk-progress-tip { display: none; position: absolute; bottom: 16px; transform: translateX(-50%); padding: 4px 10px; border-radius: 12px; background: var(--bk-accent); color: #fff; font: 700 13px var(--bk-font-ui); white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; }
.bk-progress.scrub .bk-progress-tip { display: block; }
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) {
  .bk-progress { height: 5px; }
  .bk-progress::after { top: 0; height: calc(13px + env(safe-area-inset-top)); }
  .bk-progress-tip { bottom: auto; top: 44px; font-size: 15px; padding: 6px 14px; }
}

/* ══════ PC: 책이 화면 한가운데 — 왼쪽은 표지를 진열한 책장, 오른쪽은 도구. 두 옆 칸의 폭이 같다 ══════ */
@media (min-width: 761px) and (not (pointer: coarse)), (min-width: 1201px) {
  body { display: grid; --side: clamp(168px, 17vw, 264px); grid-template-columns: var(--side) minmax(0, 1fr) var(--side); grid-template-rows: auto auto auto minmax(0, 1fr); }
  .bk-bar { position: relative; grid-column: 3; grid-row: 1 / -1; display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 10px 14px; min-height: 0; overflow-y: auto; border-left: 1px solid #33363e; scrollbar-width: thin; }
  .bk-title-wrap { flex: none; padding-right: 44px; }   /* 오른쪽 위 ☰ 자리 */
  .bk-title { font-size: 14px; }
  #bk-site-btn { position: absolute; top: 12px; right: 10px; width: 36px; padding: 6px 0; text-align: center; }
  .bk-edit-center { width: 100%; }
  .bk-right { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px; }
  .bk-ink-tools { flex-wrap: wrap; gap: 6px; }
  .bk-actions { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .bk-actions .bk-btn { text-align: left; }
  #bk-tools { grid-column: 1 / 3; grid-row: 1; }
  #bk-viewer-banner { grid-column: 1 / 3; grid-row: 2; }
  .bk-stage { grid-column: 1 / 3; grid-row: 4; min-width: 0; }
  .bk-stage > .bk-shelf { flex: 0 0 var(--side); width: var(--side); max-width: none; padding: 12px 10px 14px; background: none; overflow: hidden; }
  .bk-stage > .bk-shelf.hidden + .bk-desk { margin-left: var(--side); }   /* 책장이 없을 때에도 책은 가운데 */
  .bk-stage .bk-shelf-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 16px 10px; align-content: start; align-items: start; overflow-x: hidden; overflow-y: auto; padding: 8px 4px 12px; scrollbar-width: thin; }
  /* 책등 대신 표지 정면 */
  .bk-stage .bk-shelf .bk-shelf-row .bk-spine:nth-child(n) {
    width: auto; height: auto; aspect-ratio: .72; writing-mode: horizontal-tb; white-space: normal; padding: 0 7px 0 12px; border: solid transparent; border-width: 9px 0;   /* 위아래는 테두리로 띄운다 — 안쪽 여백이면 잘린 줄이 비쳐 보인다 */
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; -webkit-line-clamp: 5; text-align: center; font: 700 12px/1.35 var(--bk-font-ui); word-break: keep-all; overflow-wrap: anywhere;
    border-radius: 2px 5px 5px 2px; box-shadow: inset 6px 0 6px -4px rgba(0, 0, 0, .38), inset 7px 0 0 -6px rgba(255, 255, 255, .28), 0 4px 10px rgba(0, 0, 0, .42);
    transition: transform .15s;
  }
  .bk-stage .bk-shelf .bk-shelf-row .bk-spine:hover { transform: translateY(-4px); }
  .bk-stage .bk-shelf .bk-shelf-row .bk-spine.on:nth-child(n) { outline: 2px solid #fff; outline-offset: 2px; transform: translateY(-3px); }
  .bk-stage .bk-shelf .bk-shelf-row .bk-spine.ins:nth-child(n) { margin-left: 0; box-shadow: -5px 0 0 0 #fff, 0 4px 10px rgba(0, 0, 0, .42); }
  .bk-stage .bk-cats { max-height: 24vh; }
  .bk-stage .bk-cat { width: calc(50% - 4px); }
  /* 오른쪽 도구에서 여는 창은 도구 칸 바로 왼쪽에 뜬다 (도구를 가리지 않게) */
  .bk-theme, .bk-bgm, .bk-keep, .bk-catpop, .bk-acct, .bk-site { right: calc(var(--side) + 12px); top: 16px; max-height: calc(100vh - 32px); overflow: auto; }
  #bk-syncbar { top: auto; bottom: 8px; right: 10px; width: calc(var(--side) - 20px); }
}

/* 🔍 책 크게 보기 (PC): 책 오른쪽 위의 돋보기 단추 · 둘레를 덮는 어두운 막 */
.bk-magbar { position: absolute; right: 0; top: -36px; z-index: 6; display: flex; gap: 4px; }
.bk-magbar button { width: 30px; height: 28px; display: grid; place-items: center; padding: 0; border-radius: 6px; border: 1px solid #3a3d46; background: rgba(255, 255, 255, .07); color: var(--bk-bar-text); cursor: pointer; }
.bk-magbar button:hover:not(:disabled) { border-color: var(--bk-accent); }
.bk-magbar button:disabled { opacity: .35; cursor: default; }
#bk-magdim { position: fixed; inset: 0; z-index: 20; background: #05060a; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
body.magnified .bk-desk { position: relative; z-index: 21; }
.bk-book { transition: none; }
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) { .bk-magbar, #bk-magdim { display: none; } }
@media print { .bk-magbar, #bk-magdim { display: none !important; } }

/* ══════ 휴대폰 화면 구성 2: 위 왼쪽 제목 · 위 오른쪽 쪽 번호 / 아래 왼쪽 책갈피(▲ 로 펼침) · 아래 오른쪽 ✎ 편집 · ▦ 메뉴 ══════ */
#bk-mdock, #bk-mmore, #bk-medit { display: none; }
#bk-magdim { transition: none; }   /* 크게 보기는 스크립트가 한 장면씩 그린다 */
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) {
  #bk-mmenu, #bk-mdone, body.m-working #bk-mdone { display: none; }
  /* 위: 제목(왼쪽) · 쪽 번호(오른쪽) */
  #bk-mtitle { left: 10px; top: calc(11px + env(safe-area-inset-top)); }
  body.m-working #bk-mtitle { display: block; }
  .bk-pager { left: auto; right: 10px; top: calc(10px + env(safe-area-inset-top)); padding: 3px 12px 3px 4px; font-variant-numeric: tabular-nums; }
  .bk-page-in { width: 44px; }
  #bk-syncbar, body.m-working #bk-syncbar { top: calc(50px + env(safe-area-inset-top)); left: 10px; right: auto; height: 30px; border-radius: 15px; max-width: calc(100vw - 20px); }

  /* 아래 오른쪽: ✎ 편집 · ▦ 메뉴 */
  #bk-mdock {
    display: flex; position: fixed; right: 0; bottom: 0; z-index: 61; width: 104px; height: calc(46px + env(safe-area-inset-bottom)); align-items: center; justify-content: center; gap: 6px;
    padding: 0 0 env(safe-area-inset-bottom); background: rgba(22, 24, 30, .97); border-top: 1px solid rgba(255, 255, 255, .08); border-left: 1px solid rgba(255, 255, 255, .1);
  }
  #bk-mdock button { width: 42px; height: 36px; display: grid; place-items: center; padding: 0; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .2); background: #2a2d34; color: #fff; }
  #bk-mpen .ic-ok, body.m-working #bk-mpen .ic-pen { display: none; }
  body.m-working #bk-mpen .ic-ok { display: block; }
  body.m-working #bk-mpen, body.m-menu #bk-mgrid { background: var(--bk-accent); border-color: var(--bk-accent); }
  /* ✎ 를 누르면 그 위에 뜨는 편집 · 필기 도구 */
  #bk-medit { display: grid; gap: 10px; position: fixed; right: 8px; bottom: calc(54px + env(safe-area-inset-bottom)); z-index: 46; width: min(310px, calc(100vw - 16px)); padding: 12px; border-radius: 14px; background: #1f2126; border: 1px solid #3a3d46; box-shadow: 0 14px 40px rgba(0, 0, 0, .55); }
  #bk-medit .bk-edit-center { width: 100%; padding: 12px; font-size: 16px; }
  #bk-medit .bk-ink-tools { flex-wrap: wrap; overflow: visible; gap: 8px; }
  body.m-working #bk-medit { display: none; }

  /* 아래 왼쪽: 책갈피 줄은 단추 앞까지만. 나머지는 옆으로 밀어 보고, ▲ 를 누르면 위로 펼쳐져 모두 보인다 */
  .bk-marks, .bk-marks.dense { right: 104px; max-height: calc(47px + env(safe-area-inset-bottom)); transition: max-height .28s ease; }
  .bk-marks.open, .bk-marks.closing { flex-wrap: wrap; align-content: flex-start; overflow-x: hidden; overflow-y: auto; row-gap: 8px; padding-top: 12px; border-top-right-radius: 14px; box-shadow: 0 -16px 30px rgba(0, 0, 0, .45); z-index: 43; }
  .bk-marks.closing { overflow-y: hidden; }
  #bk-mmore {
    display: grid; place-items: center; position: fixed; left: 10px; bottom: calc(var(--m-marks-now, 46px) - 1px); z-index: 43; width: 46px; height: 20px; padding: 0; border-radius: 10px 10px 0 0;
    background: rgba(22, 24, 30, .97); border: 1px solid rgba(255, 255, 255, .12); border-bottom: 0; color: #cfd2db;
  }
  #bk-mmore svg { transition: transform .28s ease; }
  body.m-marks-open #bk-mmore svg { transform: rotate(180deg); }
  body.editing #bk-mmore, body.m-menu #bk-mmore, body.viewer #bk-mdock { display: none; }
  body.viewer .bk-marks, body.viewer .bk-marks.dense { right: 0; }

  /* ▦ 메뉴: 아래에서 올라오는 판. 맨 위에 책이 표지 정면으로 진열되고, 그 아래에 기능 */
  .bk-bar { top: auto; bottom: 0; border-radius: 18px 18px 0 0; padding: 16px 12px calc(62px + env(safe-area-inset-bottom)); max-height: 86dvh; transform: translateY(110%); box-shadow: 0 -18px 40px rgba(0, 0, 0, .55); }
  body.m-menu .bk-bar { transform: none; }
  .bk-bar .bk-shelf { order: -2; }
  .bk-bar .bk-title-wrap { order: -1; }
  .bk-bar .bk-shelf-row {
    display: grid; grid-template-columns: repeat(auto-fill, 84px); justify-content: space-evenly; gap: 26px 10px; overflow: visible; padding: 10px 2px 16px;
    background: repeating-linear-gradient(to bottom, transparent 0 126px, #6b5440 126px 131px, rgba(0, 0, 0, .35) 131px 134px, transparent 134px 142px);   /* 줄마다 선반 */
  }
  .bk-bar .bk-shelf .bk-shelf-row .bk-spine:nth-child(n) {
    width: 84px; height: 116px; min-height: 0; max-height: none; writing-mode: horizontal-tb; white-space: normal; padding: 0 7px 0 12px; border: solid transparent; border-width: 9px 0; opacity: 1;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; -webkit-line-clamp: 5; text-align: center; font: 700 12px/1.35 var(--bk-font-ui); word-break: keep-all; overflow-wrap: anywhere;
    border-radius: 2px 5px 5px 2px; box-shadow: inset 6px 0 6px -4px rgba(0, 0, 0, .38), inset 7px 0 0 -6px rgba(255, 255, 255, .28), 0 4px 10px rgba(0, 0, 0, .42);
  }
  .bk-bar .bk-shelf .bk-shelf-row .bk-spine.on:nth-child(n) { outline: 2px solid #fff; outline-offset: 2px; }
}

/* 휴대폰: 맞추는 표시는 맨 위 가운데 — 화살표(움직임)와 숫자만. 누르면 무엇을 받는지 아래에 뜬다 */
.bk-syncbar-a, #bk-syncbar-n { display: none; }
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) {
  #bk-syncbar, body.m-working #bk-syncbar { top: calc(10px + env(safe-area-inset-top)); left: 50%; right: auto; transform: translateX(-50%); z-index: 50; min-width: 0; max-width: none; height: 32px; padding: 0 10px; border-radius: 16px; display: flex; align-items: center; gap: 5px; overflow: visible; pointer-events: auto; cursor: pointer; color: #fff; }
  #bk-syncbar.hidden { display: none; }
  #bk-syncbar i { display: none; }
  .bk-syncbar-a { display: block; flex: none; animation: bk-sync-arrow 1s ease-in-out infinite; }
  #bk-syncbar.up .bk-syncbar-a { transform: rotate(180deg); animation-name: bk-sync-arrow-up; }
  #bk-syncbar-n { display: block; font: 700 12px var(--bk-font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
  #bk-syncbar-n:empty { display: none; }
  #bk-syncbar span { display: none; position: absolute; top: 38px; left: 50%; transform: translateX(-50%); padding: 6px 12px; border-radius: 12px; background: rgba(24, 26, 32, .92); border: 1px solid rgba(255, 255, 255, .25); overflow: visible; max-width: none; }
  #bk-syncbar.open span { display: block; }
}
@keyframes bk-sync-arrow { 0% { transform: translateY(-4px); opacity: .3; } 60% { transform: translateY(2px); opacity: 1; } 100% { transform: translateY(4px); opacity: .3; } }
@keyframes bk-sync-arrow-up { 0% { transform: rotate(180deg) translateY(-4px); opacity: .3; } 60% { transform: rotate(180deg) translateY(2px); opacity: 1; } 100% { transform: rotate(180deg) translateY(4px); opacity: .3; } }

/* 책 열기 표지 꾸밈: 빗살 무늬 바탕 · 안쪽 테두리 두 줄 · 제목 위아래 마름모 문양 */
.bk-cover-front {
  padding: 44px 34px; gap: 16px;
  background-image: linear-gradient(to right, rgba(0,0,0,.28), rgba(0,0,0,0) 9%, rgba(255,255,255,.08) 10%, rgba(0,0,0,0) 12%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.055) 0 1px, transparent 1px 15px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.055) 0 1px, transparent 1px 15px),
    linear-gradient(160deg, rgba(255,255,255,.18), rgba(0,0,0,.22));
}
.bk-cover-front::before { content: ''; position: absolute; inset: 16px 16px 16px 26px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 2px; pointer-events: none; }
.bk-cover-front::after { content: ''; position: absolute; inset: 21px 21px 21px 31px; border: 1px solid rgba(255, 255, 255, .28); pointer-events: none; }
.bk-cover-orn { color: rgba(255, 255, 255, .8); line-height: 0; }
.bk-cover-title { max-width: 100%; padding: 0 6px; word-break: keep-all; overflow-wrap: anywhere; letter-spacing: .01em; }
.bk-cover-sub { position: absolute; left: 10px; right: 0; bottom: 36px; }

/* 덮인 책: 표지를 누르면 펼쳐진다 */
.bk-book.closed .bk-cover { cursor: pointer; }
.bk-book.closed #bk-right { visibility: hidden; }
/* 책 목록의 표지도 여는 표지와 같은 무늬: 빗살 바탕 · 안쪽 테두리 한 줄 */
.bk-stage .bk-shelf .bk-shelf-row .bk-spine:nth-child(n), .bk-bar .bk-shelf .bk-shelf-row .bk-spine:nth-child(n) {
  background-origin: border-box; background-repeat: no-repeat;
  background-image:
    linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)), linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)),
    linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)), linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.07) 0 1px, transparent 1px 9px),
    linear-gradient(160deg, rgba(255,255,255,.18), rgba(0,0,0,.22));
  background-position: left 9px top 4px, left 9px bottom 4px, left 9px top 4px, right 4px top 4px, 0 0, 0 0, 0 0;
  background-size: calc(100% - 13px) 1px, calc(100% - 13px) 1px, 1px calc(100% - 8px), 1px calc(100% - 8px), 100% 100%, 100% 100%, 100% 100%;
}

/* 휴대폰: 책 위에 바깥 여백 — 제목 · 쪽 번호가 종이를 덮지 않고 책 위에 놓인다 */
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) {
  .bk-stage { top: calc(50px + env(safe-area-inset-top)); }
  :root { --bk-page-pad: 16px 20px 44px; }
  body.viewer .bk-stage { top: calc(70px + env(safe-area-inset-top)); }
  body.viewer { --bk-page-pad: 16px 20px 44px; }
  body.m-dragging .bk-book, body.m-dragging .bk-book * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}
@media (max-width: 760px) and (min-width: 0px), (pointer: coarse) and (max-width: 1200px) {
  .bk-book.single { --bk-page-pad: 16px 17px 44px 19px; }
}

/* 스타일 창: 고른 색 · 글꼴 미리보기 */
.bk-theme-preview { margin: 8px 0; padding: 12px 14px; border-radius: 8px; border: 1px solid #3a3d46; background: #fdfcf8; color: #1f2330; }
.bk-theme-preview b { display: block; font-size: 1.25em; margin-bottom: 4px; }
.bk-theme-preview span { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 6px; font-size: .85em; }
#bk-fontadd { z-index: 80; }

/* PC 에서 창이 좁을 때(761~970px): 화면 구성은 PC 그대로, 책만 한 쪽씩 */
@media (min-width: 761px) and (max-width: 970px) and (not (pointer: coarse)) {
  .bk-book { aspect-ratio: .71 / 1; }
  .single .bk-page-left { display: none; }
  .bk-magbar { display: none; }
  .bk-stage .bk-shelf-row { grid-template-columns: repeat(2, 1fr); gap: 12px 8px; }   /* 왼쪽 칸이 좁아도 표지는 두 줄로 */
}

/* 🔍 찾기: 왼쪽 = 모든 책에서 찾은 곳, 가운데 = 지금 책에서 그 낱말이 있는 쪽 */
.bk-find { position: fixed; inset: 0; z-index: 70; pointer-events: none; font: 13px var(--bk-font-ui); color: #e6e7ec; }
.bk-find.hidden { display: none; }
.bk-find-side { position: absolute; left: 0; top: 0; bottom: 0; width: max(var(--side, 260px), 300px); display: flex; flex-direction: column; background: #1b1d24; border-right: 1px solid #33363e; box-shadow: 8px 0 24px rgba(0, 0, 0, .35); pointer-events: auto; }
.bk-find-in { display: flex; gap: 6px; padding: 10px; border-bottom: 1px solid #33363e; }
.bk-find-in input { flex: 1; min-width: 0; height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid #4a4e59; background: #2a2d34; color: #fff; font: 15px var(--bk-font-ui); }
.bk-find-in input:focus { outline: none; border-color: var(--bk-accent); }
.bk-find-in button { width: 36px; height: 36px; border-radius: 8px; border: 1px solid #3a3d46; background: none; color: #cfd2db; cursor: pointer; }
.bk-find-all { flex: 1; overflow: auto; padding: 8px 8px 16px; }
.bk-find-book { margin-bottom: 12px; }
.bk-find-title { display: block; width: 100%; text-align: left; padding: 7px 9px; margin-bottom: 4px; border: 0; border-left: 5px solid #888; border-radius: 4px; background: #2a2d34; color: #fff; font: 700 13px var(--bk-font-ui); cursor: pointer; }
.bk-find-row { display: block; width: 100%; text-align: left; padding: 6px 9px; border: 0; border-radius: 6px; background: none; color: #cfd2db; font: 13px/1.5 var(--bk-font-ui); cursor: pointer; word-break: keep-all; overflow-wrap: anywhere; }
.bk-find-row:hover, .bk-find-title:hover { background: #343844; }
.bk-find-row b { display: inline-block; min-width: 44px; margin-right: 6px; color: #8ab4ff; font-weight: 700; }
.bk-find-row mark { background: #ffe066; color: #111; border-radius: 2px; padding: 0 1px; }
.bk-find-more { padding: 4px 9px; color: #8b8f9b; font-size: 12px; }
.bk-find-here { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); width: min(480px, calc(100vw - 2 * max(var(--side, 260px), 300px) - 24px)); min-width: 300px; max-height: calc(100vh - 150px); overflow: auto; padding: 10px; border-radius: 12px; background: #fdfcf8; color: #1f2330; box-shadow: 0 16px 50px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .1); pointer-events: auto; }
.bk-find-here.hidden, .bk-find.went .bk-find-here { display: none; }
.bk-find-h { padding: 6px 9px 10px; font: 700 14px var(--bk-font-ui); border-bottom: 1px solid #e2ded2; margin-bottom: 6px; }
.bk-find-here .bk-find-row { color: #2a2f3a; }
.bk-find-here .bk-find-row:hover { background: #efe9da; }
.bk-find-here .bk-find-row b { color: #2456c8; }
::highlight(bk-find) { background: #ffe066; color: #111; }
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) {
  /* 휴대폰: 한 화면에 위에서부터 — 찾을 말 · 지금 책 · 다른 책들 */
  .bk-find { pointer-events: auto; background: #1b1d24; display: flex; flex-direction: column; overflow: auto; padding-top: env(safe-area-inset-top); }
  .bk-find.hidden { display: none; }
  .bk-find-side { display: contents; }
  .bk-find-in { order: 0; position: sticky; top: 0; background: #1b1d24; z-index: 1; }
  .bk-find-here { order: 1; position: static; transform: none; width: auto; min-width: 0; max-height: none; margin: 8px; overflow: visible; flex: none; }
  .bk-find.went .bk-find-here { display: block; }
  .bk-find-all { order: 2; flex: none; overflow: visible; }
}
@media print { .bk-find { display: none !important; } }

/* ⭐ 프리셋 */
.bk-stamps { right: 12px; top: 120px; width: min(360px, calc(100vw - 16px)); max-height: calc(100vh - 140px); overflow: auto; z-index: 60; }
.bk-stamp-h { margin: 10px 0 5px; font: 700 12px var(--bk-font-ui); color: #9aa0ad; }
.bk-stamp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 5px; }
.bk-stamp { position: relative; height: 46px; padding: 0 2px 9px; display: grid; place-items: center; border: 1px solid #3a3d46; border-radius: 7px; background: #2a2d34; color: #fff; font-size: 19px; line-height: 1; cursor: pointer; overflow: hidden; }
.bk-stamp:hover { border-color: var(--bk-accent); background: #343844; }
.bk-stamp img { max-width: 30px; max-height: 26px; pointer-events: none; }
.bk-stamp i { position: absolute; left: 0; right: 0; bottom: 1px; font: 600 8.5px var(--bk-font-ui); font-style: normal; color: #8ab4ff; text-align: center; white-space: nowrap; }
.bk-stamp.ask { border-color: #ffd43b; }
.bk-stamp.ask i { color: #ffd43b; }
.bk-stamp-none { grid-column: 1 / -1; color: #8b8f9b; font-size: 12px; padding: 4px 0; }
.bk-stamps .bk-share-row input { min-width: 0; }
.bk-stamp-menu { position: fixed; z-index: 90; width: 180px; padding: 4px; border-radius: 9px; background: #1f2126; border: 1px solid #3a3d46; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); display: flex; flex-direction: column; }
.bk-stamp-menu.hidden { display: none; }
.bk-stamp-menu button { text-align: left; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: #e6e7ec; font: 13px var(--bk-font-ui); cursor: pointer; }
.bk-stamp-menu button:hover { background: #343844; }
.bk-stamp-menu button.hidden { display: none; }
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) { .bk-stamps { left: 8px; right: 8px; top: auto; bottom: calc(60px + env(safe-area-inset-bottom)); width: auto; max-height: 60vh; } }
@media print { .bk-stamps, .bk-stamp-menu { display: none !important; } }

/* 그림 배치: 글자 사이 · 자유 */
.bimg[data-float="inline"] { float: none; display: inline-block; vertical-align: middle; margin: 0 4px; }
.bimg[data-float="free"] { position: absolute; float: none; margin: 0; z-index: 2; }
.editing .bimg[data-float="free"] { cursor: move; }
/* 그림 크게 보기 (왼쪽 위) */
.bk-peek { position: fixed; left: 8px; top: 8px; z-index: 66; width: max(var(--side, 240px), min(34vw, 520px)); padding: 8px; border-radius: 12px; background: #15161a; border: 1px solid #3a3d46; box-shadow: 0 18px 50px rgba(0, 0, 0, .6); }
.bk-peek.hidden { display: none; }
.bk-peek img { display: block; width: 100%; max-height: calc(100vh - 60px); object-fit: contain; border-radius: 6px; background: #fff; }
.bk-peek button { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(0, 0, 0, .6); color: #fff; font-size: 15px; cursor: pointer; }
body:not(.editing) .bk-spread .bimg:not(.bhtml) img { cursor: zoom-in; }
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) { .bk-peek { left: 8px; right: 8px; top: calc(56px + env(safe-area-inset-top)); width: auto; } .bk-peek img { max-height: 70vh; } }
@media print { .bk-peek { display: none !important; } }
/* 휴대폰 ▦ 메뉴: 표지를 잡고도 위아래로 밀어 나머지 책을 볼 수 있게 */
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) { .bk-bar .bk-shelf .bk-shelf-row .bk-spine:nth-child(n) { touch-action: pan-y; } .bk-bar { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } }

/* 마지막 장 알림: 책 가운데 아래에 부드럽게 떴다 사라진다 */
.bk-endhint { position: absolute; left: 50%; bottom: 13%; z-index: 9; transform: translate(-50%, 10px); padding: 10px 22px; border-radius: 22px; background: rgba(20, 22, 28, .86); color: #fff; font: 600 14px var(--bk-font-ui); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .45s ease, transform .45s ease; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.bk-endhint.on { opacity: 1; transform: translate(-50%, 0); }
.bk-nav.at-end { opacity: .25; }
@media print { .bk-endhint { display: none !important; } }

/* 초대 링크 복사: 눌린 느낌 + 초록 */
#bk-share-copy.copied { background: #2f9e44; border-color: #2f9e44; animation: bk-copied .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes bk-copied { 0% { transform: scale(.86); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } }
/* Ctrl+A 두 번: 책 전체를 골랐다는 표시 (보이는 쪽을 고른 색으로 덮는다) */
.bk-book.allpicked .bk-spread > .bk-page::after { content: ''; position: absolute; inset: 0; background: rgba(51, 144, 255, .24); pointer-events: none; z-index: 5; }

/* 프리셋: 이 기기에만 있는 그림 (계정에 올라가지 않은 것) */
.bk-stamp.local { border-style: dashed; }
.bk-stamp.local::after { content: '기기'; position: absolute; right: 2px; top: 1px; font: 600 8px var(--bk-font-ui); color: #ffb454; }

/* Shift+끌기: 들어갈 자리와 크기를 점선 상자로 미리 보여 준다 */
.bk-slot-ghost { position: absolute; z-index: 1; border: 2px dashed var(--bk-accent); background: rgba(79, 124, 255, .12); border-radius: 4px; pointer-events: none; }

/* 그림 돌리는 손잡이: 고른 그림 위의 동그라미 */
.bimg-r { display: none; position: absolute; left: 50%; top: -24px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; border: 2px solid var(--bk-accent); cursor: grab; z-index: 3; }
.bimg-r::after { content: ''; position: absolute; left: 50%; top: 100%; width: 2px; height: 10px; margin-left: -1px; background: var(--bk-accent); }
.editing .bimg.sel .bimg-r { display: block; }

/* 프리셋 단축키: 받는 중 알림 · 정해진 글쇠는 또렷하게 */
.bk-stamp-ask { margin: 8px 0; padding: 10px 12px; border-radius: 8px; background: #ffd43b; color: #1a1a1a; font: 700 13px/1.45 var(--bk-font-ui); position: sticky; top: 0; z-index: 2; }
.bk-stamp-ask.hidden { display: none; }
.bk-stamp { height: 52px; padding-bottom: 14px; }
.bk-stamp i { bottom: 2px; font-size: 9.5px; font-weight: 700; }
.bk-stamp i:not(:empty) { left: 2px; right: 2px; background: #223356; border-radius: 3px; padding: 1px 0; }
.bk-stamp.ask i:not(:empty) { background: #ffd43b; color: #1a1a1a; }

/* 꾸밈 옵션 창 (오른쪽 칸): 그림 · 글자를 골랐을 때 */
.bk-opts { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid #3a3d46; border-radius: 10px; background: #1f2126; color: var(--bk-bar-text); font: 12px var(--bk-font-ui); }
.bk-opts.hidden, .bk-opts-body.hidden { display: none; }
.bk-opts-h { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.bk-opts-h button { width: 26px; height: 26px; border-radius: 6px; border: 1px solid #3a3d46; background: none; color: #cfd2db; cursor: pointer; }
.bk-opts-body { display: flex; flex-direction: column; gap: 8px; }
.bk-opts-body label { display: flex; flex-direction: column; gap: 3px; color: #cfd2db; }
.bk-opts-body label.row { flex-direction: row; align-items: center; justify-content: space-between; gap: 6px; }
.bk-opts-body input[type="range"] { width: 100%; accent-color: var(--bk-accent); }
.bk-opts-body input[type="color"] { width: 46px; height: 26px; padding: 0; border: 1px solid #3a3d46; border-radius: 6px; background: #2a2d34; }
.bk-opts-body .bk-pop-in { margin: 0; }
.bk-opts-row { display: flex; gap: 4px; flex-wrap: wrap; }
.bk-opts-row .bk-btn { flex: 1; min-width: 34px; padding: 5px 0; }
.bk-opts-note { margin: 2px 0 0; color: #8b8f9b; font-size: 11px; line-height: 1.6; }
.bk-bar.opting .bk-right { display: none; }
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) { .bk-opts { display: none !important; } .bk-bar.opting .bk-right { display: revert; } }
/* 그림 꾸밈: 테두리 · 둥글기 · 그림자 · 여러 개 고름 표시 */
.bimg img, .bimg video { border: var(--b-w, 0) solid var(--b-c, #222); border-radius: var(--b-r, 3px); box-sizing: border-box; }
.bimg[data-shadow="1"] img, .bimg[data-shadow="1"] video { box-shadow: 0 2px 8px rgba(0, 0, 0, .22); }
.bimg[data-shadow="2"] img, .bimg[data-shadow="2"] video { box-shadow: 0 6px 18px rgba(0, 0, 0, .42); }
.bimg[data-shadow="3"] img, .bimg[data-shadow="3"] video { box-shadow: 0 16px 34px -6px rgba(0, 0, 0, .5); }
.editing .bimg.sel2 { outline: 2px dashed var(--bk-accent); outline-offset: 2px; }
/* 나타나는 효과: 읽을 때(편집 중이 아닐 때) 쪽이 보이면 한 번 */
@keyframes bkfx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bkfx-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes bkfx-zoom { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes bkfx-left { from { opacity: 0; transform: translateX(-46px); } to { opacity: 1; transform: none; } }
@keyframes bkfx-right { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: none; } }
@keyframes bkfx-pop { 0% { opacity: 0; transform: scale(.3); } 60% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: none; } }
/* 효과가 있는 그림은 처음에는 보이지 않는다 — 책장이 넘어가는 동안의 종이에도 안 보이다가, 쪽이 자리를 잡으면 효과와 함께 나타난다 */
body:not(.editing) .bk-book .bimg[data-fx] img { opacity: 0; }
body:not(.editing) .bk-spread > .bk-page .bimg[data-fx="fade"] img { animation: bkfx-fade .9s ease .15s both; }
body:not(.editing) .bk-spread > .bk-page .bimg[data-fx="rise"] img { animation: bkfx-rise .9s cubic-bezier(.2, .7, .2, 1) .15s both; }
body:not(.editing) .bk-spread > .bk-page .bimg[data-fx="zoom"] img { animation: bkfx-zoom .9s cubic-bezier(.2, .7, .2, 1) .15s both; }
body:not(.editing) .bk-spread > .bk-page .bimg[data-fx="left"] img { animation: bkfx-left .9s cubic-bezier(.2, .7, .2, 1) .15s both; }
body:not(.editing) .bk-spread > .bk-page .bimg[data-fx="right"] img { animation: bkfx-right .9s cubic-bezier(.2, .7, .2, 1) .15s both; }
body:not(.editing) .bk-spread > .bk-page .bimg[data-fx="pop"] img { animation: bkfx-pop .9s cubic-bezier(.2, .7, .2, 1) .15s both; }
.bk-book.opening .bimg[data-fx] img { animation-play-state: paused; }
.bk-book.fx-hold .bimg[data-fx] img { animation: none !important; }
@media print { .bimg[data-fx] img, body:not(.editing) .bk-book .bimg[data-fx] img { opacity: 1 !important; animation: none !important; } .bk-opts { display: none !important; } }

/* 책 아래 진행 막대: 책이 펼쳐지는 동안에는 숨겼다가, 다 열린 뒤 빠르고 부드럽게 나타난다 */
.bk-progress { transition: opacity .28s ease, transform .28s ease; }
.bk-book.opening .bk-progress { opacity: 0; transform: translateY(6px); transition: none; pointer-events: none; }

/* 종이 무늬: 점 · 줄 · 모눈. 줄은 글의 줄 간격에 맞춰 그어져 글이 줄 위에 앉는다. 색은 글자색을 옅게 */
.bk-paper-pick { display: flex; align-items: center; gap: 6px; margin: 10px 0 4px; font-size: 12px; color: #cfd2db; }
.bk-paper-pick span { margin-right: 4px; }
.bk-paper-pick .bk-btn { flex: 1; padding: 6px 0; }
.bk-paper-pick .bk-btn.on { border-color: var(--bk-accent); background: rgba(79, 124, 255, .22); }
body[data-paper] .bk-content { background-origin: content-box; background-clip: content-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body[data-paper="dots"] .bk-content { background-image: radial-gradient(circle, color-mix(in srgb, var(--bk-ink) 30%, transparent) 1px, transparent 1.5px); background-size: 1.25em 1.25em; background-position: .6em .6em; }
body[data-paper="lines"] .bk-content { background-image: linear-gradient(to bottom, transparent calc(100% - 1px), var(--paper-line) calc(100% - 1px)); background-size: 100% calc(var(--bk-line, 1.75) * 1em); }
body[data-paper="grid"] .bk-content { background-image: linear-gradient(to bottom, transparent calc(100% - 1px), var(--paper-line) calc(100% - 1px)), linear-gradient(to right, transparent calc(100% - 1px), var(--paper-line) calc(100% - 1px)); background-size: 1.4em 1.4em; }

/* ✉ 편지 보내기 창 */
.bk-letter { left: 50%; top: 60px; transform: translateX(-50%); width: min(480px, calc(100vw - 16px)); max-height: calc(100vh - 80px); overflow: auto; z-index: 60; }
.bk-letter-h { margin: 14px 0 4px; font: 700 13px var(--bk-font-ui); color: #fff; }
.bk-letter-h small { font-weight: 500; color: #ffb454; }
.bk-letter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin: 6px 0 8px; }
.bk-letter-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #cfd2db; }
.bk-letter-grid label.wide { grid-column: 1 / -1; }
.bk-letter-grid input, .bk-letter-grid textarea, .bk-letter .bk-share-row input { min-width: 0; padding: 7px 9px; border-radius: 7px; border: 1px solid #3a3d46; background: #2a2d34; color: #fff; font: 13px var(--bk-font-ui); resize: vertical; }
.bk-letter-grid span { display: flex; align-items: center; gap: 6px; }
.bk-lt-addr { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #cfd2db; }
.bk-lt-zip { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bk-lt-zip b { font-weight: 400; margin-right: auto; }
.bk-letter-grid .bk-lt-zip input { width: 86px; }
.bk-lt-zip .bk-btn { white-space: nowrap; }
.bk-lt-zipbox { display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 8px; background: #fff; }
.bk-lt-zipbox.hidden { display: none; }
#lt-zip-in { height: min(420px, 55vh); }
.bk-lt-zipbox .bk-btn { align-self: flex-end; color: #1f2330; border-color: #c9ccd6; }
.bk-letter-grid span input { width: 64px; }
#lt-post { white-space: nowrap; }
/* 편지 판형 인쇄 (A4, 여백은 @page). 쪽 내용을 이어 붙여 흐르게 하고, 접는 자리 · 받는 사람을 찍는다 */
@media print {
  body.print-letter #bk-print { display: block; }
  body.print-letter .bk-letter-sheet { position: relative; color: var(--bk-ink); font-family: var(--bk-font-body); }
  body.print-letter .bk-letter-part { position: relative; }
  body.print-letter .bk-letter-part .bk-content { position: static; inset: auto; padding: 0; overflow: visible; height: auto; zoom: 1.15; background-color: transparent; }
  body.print-letter .bk-letter-part + .bk-letter-part { margin-top: 1.2em; }
  body.print-letter .bk-letter-addr { height: 42mm; margin: 22mm 0 10mm 2mm; width: 88mm; display: flex; flex-direction: column; justify-content: center; gap: 2mm; font: 12pt/1.5 var(--bk-font-ui); color: #000; }
  body.print-letter .bk-letter-addr b { font-size: 14pt; }
  body.print-letter .bk-letter-from { position: absolute; right: 0; top: 0; max-width: 70mm; text-align: right; font: 9pt/1.4 var(--bk-font-ui); color: #444; }
  body.print-letter .bk-letter-fold { position: fixed; left: -16mm; width: 5mm; height: 0; border-top: .2mm solid #999; margin-top: -18mm; }
}
.bk-letter-sheet { display: none; }
@media print { body.print-letter .bk-letter-sheet { display: block; } }

/* 편지 창: 세 가지 방법 사이의 물결 줄 */
.bk-wave { margin: 16px 0 2px; color: #5b6070; line-height: 0; }
.bk-wave svg { display: block; width: 100%; height: 10px; }

/* 편지 창: 내 손글씨 사진 */
.bk-hand-more { padding: 2px 8px; font-size: 12px; margin-left: 4px; }
.bk-hand-sample { margin: 6px 0 10px; padding: 10px 12px; border-radius: 8px; background: #fdfcf8; color: #1f2330; font: 14px/1.8 var(--bk-font-body); max-height: 46vh; overflow: auto; }
.bk-hand-sample.hidden { display: none; }
.bk-hand-sample p { margin: 0 0 6px; }
.bk-hand-sample b { font: 700 12px var(--bk-font-ui); color: #5a6072; }
.bk-hand-count { align-self: center; color: #9aa0ad; font-size: 12px; }
.bk-hand-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-top: 8px; }
.bk-hand-item { position: relative; border-radius: 8px; overflow: hidden; background: #fff; aspect-ratio: 3 / 4; }
.bk-hand-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-hand-item button { position: absolute; right: 4px; top: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .65); color: #fff; cursor: pointer; }

/* 손글씨: 로그인 잠금 · 만드는 방식 고르기 */
.bk-hand-lock { margin: 6px 0; padding: 9px 11px; border-radius: 8px; background: #3a2f16; color: #ffd98a; font-size: 12.5px; line-height: 1.5; }
.bk-hand-lock.hidden { display: none; }
/* 로그인 전: 계정에 저장되는 것만 잠근다. 견본지 인쇄(.hand-free)는 그대로 쓸 수 있다 */
#lt-hand-box.locked > * { opacity: .45; pointer-events: none; }
#lt-hand-box.locked > .hand-free { opacity: 1; pointer-events: auto; }
.bk-hand-h { margin: 10px 0 5px; font: 700 12px var(--bk-font-ui); color: #9aa0ad; }
.bk-hand-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.bk-hand-mode .bk-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 9px 10px; white-space: normal; height: auto; }
.bk-hand-mode .bk-btn b { font-size: 13px; }
.bk-hand-mode .bk-btn span { font-size: 11.5px; line-height: 1.45; color: #b9bdc9; font-weight: 400; }
.bk-hand-mode .bk-btn i { font-style: normal; font-size: 11.5px; line-height: 1.4; color: #ffd43b; font-weight: 600; }
.bk-hand-mode .bk-btn.on { border-color: var(--bk-accent); background: rgba(79, 124, 255, .2); }
.bk-hand-share { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; font-size: 13px; }
.bk-hand-share label { display: flex; align-items: center; gap: 6px; }
.bk-hand-share small { color: #9aa0ad; font-size: 11.5px; }
.bk-hand-share .is-soon { color: #6c7180; }
.bk-hand-share .is-soon i { font-style: normal; font-size: 11px; color: #ffd43b; }
.bk-hand-share small i { font-style: normal; color: #ffd43b; }
.bk-hand-price { flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12.5px; }
.bk-hand-price.hidden { display: none; }
.bk-hand-price label { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
#bk-handpop #hand-price-row input { flex: none; width: 92px; }
.bk-hand-price small { flex-basis: 100%; color: #9aa0ad; font-size: 11.5px; line-height: 1.5; }
.bk-hand-gap { flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; }
.bk-hand-gap.hidden, .bk-hand-gap .hidden { display: none; }
#bk-handpop #hand-gap-row input { flex: 1 1 140px; min-width: 120px; padding: 0; border: 0; background: none; accent-color: var(--bk-accent); }
.bk-hand-gap b { min-width: 46px; font-weight: 600; }
.bk-hand-gap small { flex-basis: 100%; color: #9aa0ad; font-size: 11.5px; line-height: 1.5; }
.bk-hand-shop { margin-top: 8px; }
.bk-fpay { position: fixed; inset: 0; z-index: 320; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .55); }
.bk-fpay-in { width: min(400px, 100%); max-height: calc(100dvh - 32px); overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 14px; background: #1f2126; border: 1px solid #3a3d46; color: #fff; font: 13px var(--bk-font-ui); }
.bk-fpay-in h3 { margin: 0; font-size: 16px; }
.bk-fpay-in p { margin: 0; color: #b9bdc9; line-height: 1.5; }
.bk-fpay-plans, .bk-fpay-how { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bk-fpay-plans button, .bk-fpay-how button { display: flex; flex-direction: column; gap: 3px; padding: 9px 10px; border-radius: 8px; border: 1px solid #3a3d46; background: #2a2d34; color: #fff; font: inherit; text-align: left; cursor: pointer; }
.bk-fpay-plans button span, .bk-fpay-how button span { font-size: 11.5px; color: #9aa0ad; }
.bk-fpay-plans button.on, .bk-fpay-how button.on { border-color: var(--bk-accent); background: rgba(79, 124, 255, .2); }
.bk-fpay-total { font-size: 15px; font-weight: 700; color: #fff !important; }
.bk-fpay-warn { padding: 8px 10px; border-radius: 8px; background: rgba(255, 212, 59, .12); color: #ffd43b !important; font-size: 12px; }
.bk-fpay-in .bk-btn { justify-content: center; text-align: center; min-height: 40px; }
.bk-hand-shop.hidden, #hand-shop-wrap.hidden { display: none; }
.bk-hand-shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.bk-fshop-card { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 8px; background: #fff; color: #1f2330; }
.bk-fshop-card header { display: flex; justify-content: space-between; align-items: center; font: 700 13px var(--bk-font-ui); }
.bk-fshop-card header span { font-weight: 400; font-size: 11px; color: #5a6072; }
.bk-fshop-sample { min-height: 46px; font-size: 20px; line-height: 1.5; word-break: keep-all; }
.bk-fshop-card .bk-btn { align-self: flex-start; }

/* 종이 무늬 진하기: 단추 네 개 바로 아래, 단추 폭만큼 */
.bk-paper-pick { display: grid; grid-template-columns: auto repeat(4, 1fr); align-items: center; gap: 6px; }
.bk-paper-pick .bk-btn { flex: none; }
.bk-paper-a-l { font-size: 11.5px; color: #9aa0ad; white-space: nowrap; }
.bk-paper-a-l b { color: #e6e7ec; font-weight: 600; }
#bk-paper-a { grid-column: 2 / -1; width: 100%; accent-color: var(--bk-accent); margin: 0; }
#bk-paper-a:disabled { opacity: .35; }
body[data-paper="dots"] .bk-content { background-image: radial-gradient(circle, var(--paper-dot) 1px, transparent 1.5px); }
/* 화면 가운데 위의 책장 · 새 책 (PC). 휴대폰에서는 ▦ 메뉴 안의 단추를 쓴다 */
.bk-topmid { display: none; }
@media (min-width: 761px) and (not (pointer: coarse)), (min-width: 1201px) {
  .bk-topmid { display: flex; gap: 8px; position: absolute; left: 50%; top: 6px; transform: translateX(-50%); z-index: 8; }
  .bk-topmid .bk-btn { padding: 5px 14px; font-size: 13px; border-radius: 16px; background: rgba(255, 255, 255, .07); }
  body.magnified .bk-topmid, body.editing .bk-topmid, body.viewer .bk-topmid { display: none; }
  .bk-bar #bk-lib-btn, .bk-bar #bk-new-book { display: none; }
  /* ✉ 편지: 오른쪽 맨 아래에 크게 */
  #bk-letter-btn { position: fixed; right: 10px; bottom: 12px; z-index: 30; width: calc(var(--side) - 20px); padding: 15px 10px; font-size: 17px; font-weight: 800; letter-spacing: .02em; border: 0; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #ff7a59, #e8456b 55%, #b43cf0); box-shadow: 0 8px 24px rgba(232, 69, 107, .45); }
  #bk-letter-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
  .bk-bar { padding-bottom: 76px; }
  #bk-syncbar { bottom: 70px; }
}
@media (min-width: 761px) and (not (pointer: coarse)), (min-width: 1201px) { .bk-desk { position: relative; } }   /* 가운데 위 단추의 기준. 휴대폰의 .bk-desk(화면 가득)는 건드리지 않는다 */

/* 🔖 공개한 책의 책갈피 (책 오른쪽 위에 걸린 띠) */
.bk-pubmark { position: absolute; right: 9%; top: -6px; z-index: 6; width: 26px; height: 46px; padding: 0; border: 0; cursor: pointer; background: linear-gradient(#ff6b6b, #d6336c); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); }
.bk-pubmark.hidden { display: none; }
.bk-pubmark:hover { height: 54px; }
.bk-book.opening .bk-pubmark { visibility: hidden; }
#bk-pub-btn.on { border-color: #d6336c; color: #ffb3c8; }
.bk-pub { left: 50%; top: 60px; transform: translateX(-50%); width: min(480px, calc(100vw - 16px)); max-height: calc(100vh - 80px); overflow: auto; z-index: 60; }
.bk-pub-on, .bk-pub-pay label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; margin: 8px 0; cursor: pointer; }
.bk-pub-pay { display: flex; gap: 22px; }
.bk-pub .bk-letter-grid select { margin: 0; }
.bk-pub em { font-style: normal; color: #9aa0ad; font-size: 12px; }
#pb-prices.hidden { display: none; }
/* 📚 공개 책장(서점) */
.bk-shop { position: fixed; inset: 0; z-index: 85; background: #f4f1ea; color: #1f2330; overflow-y: auto; font: 14px var(--bk-font-ui); }
.bk-shop.hidden, .bk-shop .hidden { display: none; }
.bk-shop-bar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 12px max(14px, 4vw); background: #1f2330; color: #fff; flex-wrap: wrap; }
.bk-shop-bar b { font-size: 17px; }
.bk-shop-x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: inherit; font-size: 17px; cursor: pointer; }
.bk-shop-q { flex: 1; min-width: 160px; max-width: 420px; height: 38px; padding: 0 14px; border-radius: 19px; border: 0; background: #fff; font: 14px var(--bk-font-ui); }
.bk-shop-tabs { display: flex; gap: 4px; margin-left: auto; }
.bk-shop-tabs button { padding: 8px 14px; border-radius: 18px; border: 0; background: none; color: #c9cddb; font: 600 14px var(--bk-font-ui); cursor: pointer; }
.bk-shop-tabs button.on { background: #fff; color: #1f2330; }
.bk-shop-note { margin: 12px max(14px, 4vw) 0; padding: 10px 14px; border-radius: 10px; background: #fff4d6; color: #6b4e00; font-size: 13px; line-height: 1.5; }
.bk-shop-cats { display: flex; gap: 6px; padding: 14px max(14px, 4vw) 0; overflow-x: auto; }
.bk-shop-cats button { flex: none; padding: 7px 14px; border-radius: 16px; border: 1px solid #d5cfc0; background: #fff; color: #444; font: 13px var(--bk-font-ui); cursor: pointer; }
.bk-shop-cats button.on { background: #1f2330; color: #fff; border-color: #1f2330; }
.bk-shop-main { padding: 6px max(14px, 4vw) 60px; }
.bk-shop-sec h3 { margin: 26px 0 12px; font-size: 18px; }
.bk-shop-row { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 8px; }
.bk-shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 26px 18px; margin-top: 14px; }
.bk-shop-card { flex: none; width: 140px; display: flex; flex-direction: column; gap: 3px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.bk-shop-stand { position: relative; margin-bottom: 6px; }
.bk-shop-cover { width: 140px; height: 196px; border-radius: 3px 8px 8px 3px; display: grid; place-items: center; padding: 14px 12px 14px 18px; color: #fff; text-align: center; font: 700 14px/1.4 var(--bk-font-ui); word-break: keep-all; overflow: hidden; box-shadow: inset 8px 0 8px -5px rgba(0, 0, 0, .4), 0 8px 18px rgba(0, 0, 0, .25);
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 1px, transparent 1px 10px), repeating-linear-gradient(-45deg, rgba(255,255,255,.07) 0 1px, transparent 1px 10px), linear-gradient(160deg, rgba(255,255,255,.18), rgba(0,0,0,.22)); transition: transform .15s; }
.bk-shop-card:hover .bk-shop-cover { transform: translateY(-5px); }
.bk-shop-rank { position: absolute; left: -8px; top: -8px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #1f2330; color: #ffd43b; font: 800 14px var(--bk-font-ui); font-style: normal; }
.bk-shop-title { font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.bk-shop-by { color: #6b6f7b; font-size: 12px; margin: 0; }
.bk-shop-price { color: #d6336c; font-weight: 700; font-size: 13px; margin: 0; }
.bk-shop-price.free { color: #1c7c54; }
.bk-shop-meta { color: #8a8e99; font-size: 11.5px; }
.bk-shop-own { color: #2456c8; font-size: 12px; font-weight: 600; }
.bk-shop-empty { padding: 60px 0; text-align: center; color: #7a7e89; }
.bk-shop-minebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding: 12px 14px; border-radius: 10px; background: #fff; flex-wrap: wrap; font-size: 13px; }
.bk-shop-add, .bk-shop-buy { padding: 11px 18px; border-radius: 10px; border: 0; background: #d6336c; color: #fff; font: 700 14px var(--bk-font-ui); cursor: pointer; }
.bk-shop-read, .bk-shop-pay { position: fixed; inset: 0; z-index: 4; background: rgba(20, 22, 28, .78); overflow-y: auto; padding: 30px 12px 60px; }
.bk-shop-read-in { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.bk-shop-head { position: relative; display: flex; gap: 16px; padding: 18px; border-radius: 14px; background: #fff; }
.bk-shop-head .bk-shop-cover { flex: none; width: 96px; height: 134px; font-size: 11px; }
.bk-shop-head .bk-shop-x { position: absolute; right: 10px; top: 10px; background: #eee; color: #333; }
.bk-shop-info h2 { margin: 0 30px 6px 0; font-size: 19px; line-height: 1.35; }
.bk-shop-desc { margin: 8px 0; font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; }
.bk-shop-ownnote { margin: 0; padding: 10px 14px; border-radius: 10px; background: #e7f0ff; color: #1d3f8f; font-size: 13px; line-height: 1.5; }
.bk-shop-page { position: relative; min-height: 420px; padding: 34px 30px 46px; border-radius: 4px; background: #fdfcf8; color: #1f2330; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.bk-shop-page .bk-content { position: static; padding: 0; overflow: visible; zoom: 1; background: none; }
.bk-shop-no { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #16171b; color: #fff; font: 700 12px var(--bk-font-ui); }
.bk-shop-noimg { margin: 8px 0; padding: 26px 0; border-radius: 6px; background: #ece8dc; color: #9a9484; text-align: center; font-size: 12px; }
.bk-shop-wall { min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.bk-shop-wall h3 { margin: 0; font-size: 18px; }
.bk-shop-wall p { margin: 0; color: #666; }
.bk-shop-wall p.big { margin: 14px 0 10px; font-size: 20px; font-weight: 800; color: #1f2330; }
.bk-shop-pay-in { max-width: 420px; margin: 40px auto 0; padding: 22px; border-radius: 16px; background: #fff; display: flex; flex-direction: column; gap: 12px; }
.bk-shop-pay-in h3 { margin: 0; font-size: 19px; }
.bk-shop-plans { display: flex; flex-direction: column; gap: 8px; }
.bk-shop-plans button { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 12px 14px; border-radius: 10px; border: 2px solid #ddd; background: #fff; cursor: pointer; font: inherit; color: inherit; }
.bk-shop-plans button.on { border-color: #d6336c; background: #fff0f5; }
.bk-shop-plans span { color: #777; font-size: 12.5px; }
.bk-shop-total { margin: 0; font-size: 18px; font-weight: 800; text-align: right; }
.bk-shop-how { display: flex; justify-content: space-between; padding: 10px 12px; border-radius: 8px; background: #f3f3f3; font-size: 13px; }
.bk-shop-how span { color: #888; }
.bk-shop-warn { margin: 0; padding: 9px 12px; border-radius: 8px; background: #fff4d6; color: #6b4e00; font-size: 12.5px; line-height: 1.5; }
.bk-shop-cancel { padding: 10px; border: 0; background: none; color: #777; cursor: pointer; font: 14px var(--bk-font-ui); }
@media (max-width: 760px) { .bk-shop-tabs { margin-left: 0; width: 100%; } .bk-shop-card, .bk-shop-cover { width: 118px; } .bk-shop-cover { height: 165px; } .bk-shop-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); } .bk-shop-page { padding: 26px 20px 44px; } }
@media print { .bk-shop, .bk-pub, .bk-pubmark { display: none !important; } }

/* 손글씨 견본지 (A4, mm 로 자리를 잡는다 — 읽는 쪽과 치수가 같아야 한다) */
.bk-sheet-page { position: relative; width: 210mm; height: 297mm; background: #fff; color: #000; overflow: hidden; font-family: 'Pretendard', 'Malgun Gothic', sans-serif; }
.bk-sheet-page > i { position: absolute; background: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.bk-sheet-page > span { position: absolute; display: flex; align-items: center; justify-content: center; font-size: 10pt; font-weight: 700; color: #3b63c4; }
.bk-sheet-page > b { position: absolute; box-sizing: border-box; border: .25mm solid #b9c6e6; border-radius: .6mm;
  background: linear-gradient(#dfe6f5, #dfe6f5) center / 100% .2mm no-repeat, linear-gradient(#dfe6f5, #dfe6f5) center / .2mm 100% no-repeat; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.bk-sheet-h { position: absolute; left: 24mm; top: 9.5mm; width: 164mm; margin: 0; font-size: 8.5pt; line-height: 1.35; color: #333; }
.bk-sheet-view { margin: 8px 0; }
.bk-sheet-view.hidden { display: none; }
#lt-sheet-pages { max-height: 60vh; overflow: auto; border-radius: 8px; background: #2a2d36; padding: 6px; }
.bk-sheet-fit .bk-sheet-page + .bk-sheet-page { margin-top: 8mm; }
.bk-hand-rules { margin: 6px 0 10px; padding-left: 18px; font-size: 12px; line-height: 1.6; color: #b9bdc9; }
@media print {
  body.print-sheet #bk-print { display: block; }
  body.print-sheet .bk-sheet-page { break-after: page; page-break-after: always; }
  body.print-sheet .bk-sheet-page:last-child { break-after: auto; page-break-after: auto; }
}
/* ✉ 편지: 오른쪽 도구들의 맨 아래(계정 단추 아래)에, 글자는 가운데 */
@media (min-width: 761px) and (not (pointer: coarse)), (min-width: 1201px) {
  .bk-actions #bk-letter-btn { position: static; order: 99; width: auto; margin-top: 6px; display: flex; align-items: center; justify-content: center; text-align: center; }
  .bk-bar { padding-bottom: 14px; }
  #bk-syncbar { bottom: 8px; }
}

/* ✍ 손으로 쓰는 모습 */
#bk-hand { position: fixed; left: 0; top: 0; z-index: 9000; width: clamp(190px, 24vw, 360px); height: auto; pointer-events: none; user-select: none; will-change: transform; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .32)); }
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) { #bk-hand { width: 52vw; } }
body.hw-wait .bk-spread > .bk-page .bk-content, body.hw-wait .bk-spread > .bk-page .bk-content * { color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important; text-decoration-color: transparent !important; -webkit-text-stroke-color: transparent !important; }
@media print { #bk-hand { display: none; } }
.bk-hw-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 0 4px; font-size: 12.5px; color: #c9ccd6; }
.bk-hw-pick { display: flex; gap: 4px; }
.bk-hw-pick .bk-btn { padding: 4px 9px; font-size: 12px; }
.bk-hw-pick .bk-btn.on { border-color: var(--bk-accent); background: rgba(79, 124, 255, .25); }
#lt-hw-play { padding: 4px 10px; font-size: 12px; }

/* ✍ 손으로 쓰는 모습: 책 왼쪽 위의 손 단추 · 펜 효과 단추, 손 고르는 창, 찍어 둔 자리 표시, 잉크 · 튀는 조각 */
.bk-hwbar { position: absolute; left: 0; top: -36px; z-index: 6; display: flex; align-items: center; gap: 4px; max-width: calc(50% - 78px); overflow-x: auto; scrollbar-width: none; }
.bk-hwbar::-webkit-scrollbar { display: none; }
.bk-book.opening .bk-hwbar, body.editing .bk-hwbar, body.magnified .bk-hwbar { visibility: hidden; }
#bk-hw-hand { flex: none; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 1.5px solid #4a4e59; background: #f4efe4; overflow: hidden; cursor: pointer; }
#bk-hw-hand img { width: 170%; height: 170%; object-fit: cover; object-position: 0 0; display: block; }
#bk-hw-hand.on { border-color: var(--bk-accent); box-shadow: 0 0 0 2px rgba(79, 124, 255, .45); }
.bk-hw-fx { flex: none; padding: 4px 7px; border-radius: 12px; border: 1px solid #3a3d47; background: rgba(255, 255, 255, .06); color: #d7d9e0; font: 600 11.5px var(--bk-font-ui); white-space: nowrap; cursor: pointer; }
.bk-hw-fx:hover { background: rgba(255, 255, 255, .13); }
.bk-hw-fx.on { border-color: #ff8a4c; background: rgba(255, 138, 76, .28); color: #fff; }
.bk-hwbar:not(.owner) .bk-hw-fx { display: none; }
.bk-hwpick { position: fixed; left: 0; top: 0; z-index: 9100; width: 292px; padding: 10px; border-radius: 12px; background: #23252d; border: 1px solid #3a3d47; box-shadow: 0 14px 36px rgba(0, 0, 0, .5); color: #e6e7ec; font: 12.5px var(--bk-font-ui); }
.bk-hwpick.hidden { display: none; }
.bk-hwpick-h { font-weight: 700; margin-bottom: 8px; }
.bk-hwpick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bk-hwpick-grid button { padding: 4px 2px 5px; border-radius: 9px; border: 1.5px solid transparent; background: #f4efe4; color: #2a2c33; cursor: pointer; font: 600 11.5px var(--bk-font-ui); }
.bk-hwpick-grid button img { display: block; width: 100%; height: 74px; object-fit: contain; }
.bk-hwpick-grid button.on { border-color: var(--bk-accent); box-shadow: 0 0 0 2px rgba(79, 124, 255, .5); }
.bk-hwpick-row { display: flex; align-items: center; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
.bk-hwpick-row .bk-btn { padding: 5px 9px; font-size: 12px; }
.bk-hwpick-row .bk-btn.on { border-color: var(--bk-accent); background: rgba(79, 124, 255, .25); }
.bk-cue { position: absolute; z-index: 5; width: 20px; height: 20px; margin: -10px 0 0 -10px; padding: 0; border: 1.5px solid #fff; border-radius: 50%; background: rgba(255, 122, 60, .92); color: #fff; font: 700 10.5px/1 var(--bk-font-ui); cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
body.hw-playing .bk-cue, body.editing .bk-cue, .bk-book.fx-hold .bk-cue { display: none; }
body.hw-arm .bk-spread > .bk-page, body.hw-arm .bk-spread > .bk-page * { cursor: crosshair !important; }
#bk-hwink { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 8990; pointer-events: none; overflow: visible; }
#bk-hwfx { position: fixed; inset: 0; z-index: 8995; pointer-events: none; overflow: hidden; }
#bk-hwfx > i { position: absolute; display: block; font-style: normal; }
.bk-hwpick-fx, #bk-hw-m { display: none; }
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) {
  .bk-hwbar { display: none; }
  #bk-hw-m { display: revert; }
  .bk-hwpick { left: 50%; top: auto; bottom: calc(76px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(340px, 94vw); max-height: 78vh; overflow: auto; }
  .bk-hwpick.owner .bk-hwpick-fx { display: block; margin-top: 10px; }
  .bk-hwpick-fx > span { display: block; font-size: 11.5px; color: #9aa0ad; margin-bottom: 5px; }
  .bk-hwpick-fx > div { display: flex; flex-wrap: wrap; gap: 5px; }
  .bk-hwpick-fx .bk-btn { padding: 6px 10px; font-size: 12.5px; }
  .bk-hwpick-fx .bk-btn.on { border-color: #ff8a4c; background: rgba(255, 138, 76, .28); }
  .bk-cue { width: 26px; height: 26px; margin: -13px 0 0 -13px; font-size: 12px; }
}
@media print { #bk-hwink, #bk-hwfx, .bk-cue, .bk-hwbar, .bk-hwpick { display: none !important; } }

/* 손으로 쓰는 모습: ▶ 미리 보기 / ⏸ 멈춤 · ⏹ 끄기 */
.bk-hw-play, .bk-hw-off { flex: none; width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 1px solid #3a3d47; background: rgba(255, 255, 255, .06); color: #e6e7ec; font-size: 12px; line-height: 1; cursor: pointer; }
.bk-hw-play:hover, .bk-hw-off:hover { background: rgba(255, 255, 255, .14); }
.bk-hw-play.on { border-color: var(--bk-accent); background: rgba(79, 124, 255, .3); }
.bk-hw-off { border-color: #7a3a3a; color: #ff9a9a; }
.bk-hw-off[hidden] { display: none; }
#bk-hwctl { display: none; }
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) {
  #bk-hwctl.show { display: flex; gap: 8px; position: fixed; left: 50%; bottom: calc(74px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 9050; padding: 6px 10px; border-radius: 22px; background: rgba(24, 26, 32, .86); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  #bk-hwctl .bk-hw-play, #bk-hwctl .bk-hw-off { width: 38px; height: 38px; font-size: 15px; }
}
@media print { #bk-hwctl { display: none !important; } }
/* 효과 표시: 올리면 ✕ 로 바뀐다 (누르거나 오른쪽 단추로 지움) */
.bk-cue:hover { background: #e03131; font-size: 0; }
.bk-cue:hover::after { content: '✕'; font-size: 11px; }
.bk-hw-clear[hidden] { display: none; }
/* 효과 표시에 올리면 뜨는 말풍선 */
.bk-cue:hover { z-index: 40; }
.bk-cue:hover::before { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); padding: 6px 10px; border-radius: 8px; background: rgba(24, 26, 32, .95); color: #fff; font: 600 12px/1.3 var(--bk-font-ui); white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, .4); pointer-events: none; }
/* 효과 표시 위의 작은 숫자: 효과 뒤에 쉬는 시간(초) · 찍으면서 끄는 동안의 안내 */
.bk-cue-n { position: absolute; right: -7px; top: -8px; min-width: 13px; height: 13px; padding: 0 2px; box-sizing: border-box; border-radius: 7px; background: #1c1e25; color: #ffd43b; font: 700 9px/13px var(--bk-font-ui); text-align: center; pointer-events: none; }
#bk-hwtip { position: fixed; z-index: 9200; transform: translate(-50%, -46px); padding: 6px 11px; border-radius: 9px; background: rgba(24, 26, 32, .95); color: #fff; font: 700 13px/1.3 var(--bk-font-ui); white-space: nowrap; pointer-events: none; box-shadow: 0 4px 12px rgba(0, 0, 0, .4); }
/* 효과 표시: 누르고 있는 동안에는 기본 말풍선을 숨긴다 · 올려도 ✕ 로 바꾸지 않는다(누르면 지워지지 않고, 끌어서 고친다) */
body.hw-drag .bk-cue::before { display: none; }
.bk-cue:hover { background: rgba(255, 122, 60, .92); font-size: 10.5px; }
.bk-cue:hover::after { content: none; }
.bk-cue { touch-action: none; }
#bk-hwtip.kill { background: #c92a2a; }

/* 편지 보내는 방법 ①~④: 제목만 보이고 누른 것만 펼친다 */
.bk-lt-sec { border-top: 1px solid #353944; }
.bk-lt-sec:last-child { border-bottom: 1px solid #353944; }
.bk-lt-h { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 12px 2px; border: 0; background: none; color: #fff; font: 700 13.5px var(--bk-font-ui); text-align: left; cursor: pointer; }
.bk-lt-h small { font-weight: 500; color: #ffb454; margin-left: 6px; }
.bk-lt-h::after { content: '▾'; color: #8a8f9c; font-size: 12px; margin-left: auto; padding-left: 8px; }
.bk-lt-sec.open > .bk-lt-h { color: #9db8ff; }
.bk-lt-sec.open > .bk-lt-h::after { content: '▴'; }
.bk-lt-body { display: none; padding: 0 0 12px; }
.bk-lt-sec.open > .bk-lt-body { display: block; }
.bk-bank { margin: 10px 0 4px; padding: 11px 12px; border-radius: 10px; background: #1d2a1f; border: 1px solid #2f6b3a; }
.bk-bank.hidden { display: none; }
.bk-bank-acct { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.bk-bank-acct small { flex-basis: 100%; color: #9bd3a6; font-size: 11.5px; }
.bk-bank-acct b { font: 700 15px var(--bk-font-ui); color: #fff; letter-spacing: .02em; }
.bk-bank-acct span { color: #d7ffe0; font-size: 13px; }
.bk-bank-acct .bk-btn { margin-left: auto; padding: 4px 9px; font-size: 12px; }
.bk-bank p { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: #c9e9cf; }
.bk-biz { margin: 10px 0 0; font-size: 11px; line-height: 1.6; color: #7f8492; }
/* 편지 링크로 열었을 때: 눌러서 시작 (누른 뒤에야 소리를 낼 수 있다) */
#bk-hwstart { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 9300; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 18px 30px; border: 0; border-radius: 18px; color: #fff; cursor: pointer; background: linear-gradient(135deg, #ff7a59, #e8456b 55%, #b43cf0); box-shadow: 0 14px 40px rgba(0, 0, 0, .5); animation: bk-hwstart 1.6s ease-in-out infinite; }
#bk-hwstart b { font: 800 19px var(--bk-font-ui); }
#bk-hwstart small { font: 500 12.5px var(--bk-font-ui); opacity: .9; }
@keyframes bk-hwstart { 50% { transform: translate(-50%, -50%) scale(1.05); } }
@media print { #bk-hwstart { display: none; } }

/* 우편 신청: 증빙(현금영수증 · 세금계산서) · 고객센터 문의 */
.bk-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 8px 0 6px; font-size: 12.5px; color: #d7d9e0; }
.bk-proof > span { color: #9aa0ad; font-weight: 700; }
.bk-proof label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.bk-proof-in { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 8px; }
.bk-proof-in.hidden { display: none; }
#lt-proof-cash { grid-template-columns: 1fr; }
.bk-proof-in input { min-width: 0; padding: 7px 9px; border-radius: 7px; border: 1px solid #3a3d47; background: #1b1d24; color: #fff; font: 13px var(--bk-font-ui); }
#lt-bank-proof:empty { display: none; }
.bk-biz b { color: #a9adba; }
.bk-ask { width: min(420px, 94vw); left: 50%; top: 12vh; transform: translateX(-50%); right: auto; }
.bk-ask .bk-pop-in { width: 100%; box-sizing: border-box; margin-bottom: 8px; }
button.bk-site-link { cursor: pointer; }
/* 손으로 쓰기: 글자만 쓰인다 — 원래 쪽은 글자만 투명(바탕 · 상자 · 그림은 그대로), 위에 얹은 겹은 글자만 남긴다 */
.bk-content.hw-notext, .bk-content.hw-notext *, .bk-content.hw-notext *::before, .bk-content.hw-notext *::after { color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important; text-decoration-color: transparent !important; -webkit-text-stroke-color: transparent !important; caret-color: transparent !important; }
.bk-content.hw-notext ::marker { color: transparent !important; }
.bk-content.hw-ghost { background: none !important; pointer-events: none; }
.bk-content.hw-ghost *, .bk-content.hw-ghost *::before, .bk-content.hw-ghost *::after { background: none !important; border-color: transparent !important; box-shadow: none !important; outline-color: transparent !important; }
.bk-content.hw-ghost img, .bk-content.hw-ghost video, .bk-content.hw-ghost iframe, .bk-content.hw-ghost svg, .bk-content.hw-ghost .bhtml-frame, .bk-content.hw-ghost .bimg-h, .bk-content.hw-ghost hr { visibility: hidden !important; animation: none !important; }
@media print { .bk-content.hw-ghost { display: none !important; } }

/* 휴대폰: 빠르게 두 번 눌러도 화면이 확대되지 않게 (두 손가락 벌리기 · 밀기는 그대로) */
html { touch-action: manipulation; }
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) {
  /* 쪽 진행 막대: 화면 맨 위가 아니라 책 바로 아래 */
  .bk-stage { bottom: calc(var(--m-stack, 46px) + 13px + env(safe-area-inset-bottom)); }   /* 책 아래에 진행 막대가 들어갈 틈 */
  .bk-progress { position: absolute; top: auto; bottom: -10px; left: 44px; right: 10px; height: 5px; border-radius: 3px; z-index: 44; }
  .bk-progress-bar { border-radius: 3px; }
  .bk-progress::after { top: -11px; height: 28px; }
  .bk-progress-tip { top: auto; bottom: 18px; }
  body.editing .bk-progress { display: none; }
  /* ✎ 창 안의 글자 작게 · 크게 */
  #bk-medit #bk-ink-tools #bk-zoom-out, #bk-medit #bk-ink-tools #bk-zoom-in { padding: 8px 12px; font-size: 14px; }
}

/* 🤖 내 AI 연결하기 */
#bk-ai-box { margin-top: 0; }
#bk-ai-box.hidden { display: none; }
#bk-ai-box small { font-weight: 500; color: #9aa0ad; }
.bk-ai-steps { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: #1b1d24; font-size: 12.5px; line-height: 1.6; color: #d7d9e0; }
.bk-ai-steps.hidden { display: none; }
.bk-ai-steps p { margin: 0 0 4px; }
.bk-ai-steps ol { margin: 0 0 10px; padding-left: 18px; }

/* 화면 언어: 두 칸을 나란히 두고 지금 쓰는 쪽에만 색을 넣는다 */
.bk-lang { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; }
.bk-lang span { font-size: 15px; }
.bk-lang button { flex: 1; min-height: 36px; padding: 6px 10px; border: 1px solid #3a3f4d; border-radius: 8px; background: transparent; color: #c9cdd8; font: 600 13px var(--bk-font-ui); cursor: pointer; }
.bk-lang button.on { background: #3b82f6; border-color: #3b82f6; color: #fff; }
.bk-ver { margin: 8px 0 0; text-align: right; opacity: .6; font-size: 11px; }
.bk-ver:empty { display: none; }

/* ===== ✉ 편지지: 미리 보기와 인쇄가 같이 쓰는 A4 한 장 ===== */
.lt-measure { position: fixed; left: -10000px; top: 0; width: 210mm; visibility: hidden; pointer-events: none; }
.lt-stage { width: 170mm; }
.lt-sheet { position: relative; width: 210mm; height: 297mm; box-sizing: border-box; padding: 18mm 20mm; background: #fff; color: var(--bk-ink); font-family: var(--bk-font-body); overflow: hidden; text-align: left; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.lt-inner { position: relative; height: 100%; }
.lt-sheet .bk-content { position: static; inset: auto; padding: 0; overflow: visible; height: auto; zoom: 1.15; background-color: transparent; }
.lt-sheet .bk-content + .bk-content { margin-top: 1.2em; }
.lt-sheet .bk-letter-addr { box-sizing: border-box; height: 42mm; margin: 22mm 0 8mm 2mm; width: 88mm; display: flex; flex-direction: column; justify-content: center; gap: 2mm; font: 12pt/1.5 var(--bk-font-ui); color: #000; }
.lt-sheet .bk-letter-addr b { font-size: 14pt; }
.lt-sheet .bk-letter-addr.hold { border: .3mm dashed #b8bcc8; border-radius: 2mm; padding: 0 4mm; color: #9aa0ad; font-size: 10pt; }
.lt-sheet .bk-letter-from { position: absolute; right: 20mm; top: 18mm; max-width: 70mm; text-align: right; font: 9pt/1.4 var(--bk-font-ui); color: #444; }
.lt-fold { position: absolute; left: 4mm; width: 5mm; height: 0; border-top: .2mm solid #999; }
.lt-p-cream { background: #fbf4e2; }
.lt-p-frame::before { content: ''; position: absolute; inset: 9mm; border: .5mm solid #b9a26a; outline: .2mm solid #b9a26a; outline-offset: 1.2mm; pointer-events: none; }
.lt-p-line .lt-inner { background: repeating-linear-gradient(to bottom, transparent 0, transparent 7.6mm, #b7c3dc 7.6mm, #b7c3dc 8mm) 0 1.2mm; }
/* 일반 글로: 제목 · 상자 · 색을 모두 걷어 내고 같은 크기 · 같은 줄 간격으로 (줄 편지지의 줄 = 8mm 에 맞는다) */
.lt-plain .bk-content { zoom: 1; font: 12pt/8mm var(--bk-font-body); color: #111; }
.lt-plain .bk-content + .bk-content { margin-top: 8mm; }
.lt-plain .bk-content *:not(img):not(table):not(thead):not(tbody):not(tr):not(td):not(th):not(br):not(iframe) { font: inherit !important; color: inherit !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-align: left !important; text-decoration: none !important; padding: 0 !important; margin: 0 !important; float: none !important; position: static !important; }
.lt-plain .bk-content *::before, .lt-plain .bk-content *::after { content: none !important; }
.lt-plain .bk-content :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, table, figure, hr) { margin: 0 0 8mm !important; }
.lt-plain .bk-content :is(ul, ol) { list-style-position: inside; }
.lt-plain .bk-content :is(td, th) { border: .2mm solid #999 !important; padding: 0 2mm !important; font: inherit !important; color: inherit !important; background: none !important; }
.lt-plain .bk-content hr { height: 0; }
/* 고르기 · 장수 */
.bk-letter-grid > div.wide { grid-column: 1 / -1; }
.bk-lt-opt { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #cfd2db; }
.bk-lt-opt > span { flex: 0 0 44px; color: #9aa0ad; font-weight: 700; }
.bk-lt-opt .bk-hw-pick { flex-wrap: wrap; }
.bk-lt-opt .bk-btn.off { opacity: .45; }
.bk-lt-dark { grid-column: 1 / -1; margin: 0; padding: 8px 10px; border-radius: 8px; background: rgba(255, 212, 59, .12); color: #ffd43b; font-size: 12.5px; line-height: 1.5; }
.bk-lt-dark.hidden { display: none; }
.bk-lt-sum { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 8px; background: #23262e; border: 1px solid #3a3d46; }
.bk-lt-sum > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bk-lt-sum b { font-size: 13.5px; color: #fff; }
.bk-lt-sum small { font-size: 11.5px; color: #9aa0ad; }
.bk-lt-sum .bk-btn { flex: none; white-space: nowrap; }
/* 미리 보기 */
.bk-ltprev { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; background: #14161b; }
.bk-ltprev.hidden { display: none; }
/* 편지지로 바로 여는 주소(…&v=s): 책 화면을 그리기 전부터 편지지 화면만 보인다 (lib/early.js 가 표시를 단다, 닫으면 뗀다) */
@media screen {
  html.lp-direct { background: #14161b; }
  html.lp-direct body > *:not(#bk-ltprev):not(#bk-toast) { visibility: hidden !important; }
  html.lp-direct #bk-ltprev.hidden { display: flex; }
}
.bk-ltprev-h { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; color: #fff; border-bottom: 1px solid #2c2f38; font: 14px var(--bk-font-ui); }
.bk-ltprev-h span { display: flex; gap: 6px; }
.bk-ltprev-body { flex: 1; overflow: auto; padding: 12px; }
#bk-ltprev-list { width: 210mm; margin: 0 auto; }
.lt-prev-item { margin: 0 0 22px; }
.lt-prev-item small { display: block; margin: 0 0 6px; color: #9aa0ad; font: 700 16px var(--bk-font-ui); }
.lt-prev-item .lt-sheet { box-shadow: 0 6px 24px rgba(0, 0, 0, .5); }
#bk-lpbtn { position: fixed; left: 50%; top: 10px; transform: translateX(-50%); z-index: 90; box-shadow: 0 4px 16px rgba(0, 0, 0, .4); }
@media print {
  body.print-lt #bk-print { display: block; }
  body.print-lt .lt-sheet { height: 296.7mm; break-after: page; page-break-after: always; }
  body.print-lt .lt-sheet:last-child { break-after: auto; page-break-after: auto; }
}
.bk-ltprev-note { flex: none; margin: 0; padding: 8px 14px; background: #3a2f12; color: #ffd98a; font: 12.5px/1.5 var(--bk-font-ui); }
.bk-ltprev-note.hidden { display: none; }
#bk-ai-box.flash { outline: 2px solid var(--bk-accent); outline-offset: 4px; border-radius: 8px; }
.bk-ltprev-opt { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 14px; border-bottom: 1px solid #2c2f38; background: #1b1d24; }
.bk-ltprev-opt.hidden { display: none; }
.bk-ltprev-sum { display: flex; flex-direction: column; gap: 1px; margin-left: auto; text-align: right; font-family: var(--bk-font-ui); }
.bk-ltprev-sum b { color: #fff; font-size: 14px; }
.bk-ltprev-sum small { color: #9aa0ad; font-size: 11.5px; }
.bk-toast { z-index: 400; }
@media (max-width: 700px) { .bk-ltprev-sum { margin-left: 0; text-align: left; flex-basis: 100%; } }
/* 줄 종이: 본문 · 제목 · 목록을 줄 간격(--ln)의 배수로 놓아 글이 줄 위에 앉게 한다 (표 · 상자 · 그림 뒤는 book.js 의 snapLines 가 맞춘다) */
body[data-paper="lines"] .bk-content { --ln: calc(var(--bk-line, 1.75) * var(--bk-size, 15px)); line-height: var(--ln); background-size: 100% var(--ln); }
body[data-paper="lines"] .bk-content > * { margin-top: 0 !important; }
body[data-paper="lines"] .bk-content :is(p, li, ul, ol, h1, h2, h3, h4, h5, h6) { margin-top: 0 !important; margin-bottom: 0 !important; }
body[data-paper="lines"] .bk-content :is(h2, h3, h4, h5, h6) { line-height: var(--ln) !important; }
body[data-paper="lines"] .bk-content h1 { line-height: calc(var(--ln) * 2) !important; }
.lt-sheet.lt-plain .bk-content { line-height: 8mm; background-image: none !important; }
.bk-ltprev-fold { color: #9aa0ad; font: 11.5px/1.4 var(--bk-font-ui); max-width: 300px; }
#bk-still { position: fixed; z-index: 80; font-size: 12px; padding: 5px 10px; box-shadow: 0 3px 12px rgba(0, 0, 0, .45); }
.lt-sheet .bhtml-frame { aspect-ratio: auto; height: auto; }
.lt-sheet .bhtml-frame img, .lt-sheet .bk-content img { max-width: 100%; height: auto; }
.lt-sheet .bhtml-print, .lt-sheet .bk-print-video { display: block; background: #f1f5f9; color: #475569; text-align: center; padding: 6mm 3mm; border: .3mm dashed #cbd5e1; border-radius: 2mm; font: 10pt var(--bk-font-ui); }
/* 계정 창: 칸 사이를 흐르는 물결로 나눈다 */
.bk-wave { height: 12px; margin: 14px 0 10px; opacity: .75; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12' viewBox='0 0 48 12'%3E%3Cpath d='M0 6 Q6 0 12 6 T24 6 T36 6 T48 6' fill='none' stroke='%236f9bff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 48px 12px; animation: bk-wave 2.4s linear infinite; }
@keyframes bk-wave { to { background-position-x: -48px; } }
@media (prefers-reduced-motion: reduce) { .bk-wave { animation: none; } }
.bk-ai-shot { display: block; width: 100%; max-width: 360px; margin: 6px 0 4px; border-radius: 8px; border: 1px solid #3a3d46; }
.bk-ai-steps li small { display: block; color: #9aa0ad; font-size: 11.5px; line-height: 1.5; }
/* ✍ 내 손글씨를 글자로 */
.bk-hand-sets { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.bk-hand-sets .bk-btn { padding: 5px 11px; font-size: 12.5px; }
.bk-hand-sets .bk-btn.on { border-color: var(--bk-accent); background: rgba(79, 124, 255, .25); }
.bk-hand-state { margin: 6px 0 10px; padding: 7px 10px; border-radius: 8px; background: #23262e; border: 1px solid #3a3d46; font-size: 12.5px; color: #cfd2db; line-height: 1.5; }
.bk-hand-state.ok { border-color: #2f7d57; color: #b6f0cf; }
#bk-handpop .bk-share-row input:not([type="file"]) { min-width: 0; flex: 1; padding: 7px 9px; border-radius: 7px; border: 1px solid #3a3d46; background: #2a2d34; color: #fff; font: 13px var(--bk-font-ui); }
@media (min-width: 701px) {
  .bk-actions #bk-hand-btn { order: 98; margin-top: 6px; padding: 11px 8px; font-size: 14px; font-weight: 800; border: 0; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #2f6bff, #19b8a6); display: flex; align-items: center; justify-content: center; text-align: center; }
  .bk-actions #bk-hand-btn:hover { filter: brightness(1.08); }
}
/* 내 AI 연결하기: 쓰는 AI 별 안내 */
.bk-ai-tabs { display: flex; gap: 6px; margin: 8px 0 0; }
.bk-ai-tabs .bk-btn { flex: 1; padding: 7px 4px; font-size: 12.5px; }
.bk-ai-tabs .bk-btn.on { border-color: var(--bk-accent); background: rgba(79, 124, 255, .25); color: #fff; }
.bk-ai-pane.hidden { display: none; }
.bk-ai-pane ol:last-child, .bk-ai-pane p:last-child { margin-bottom: 0; }
.bk-ai-shot { cursor: zoom-in; }
.bk-shot { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(0, 0, 0, .82); cursor: zoom-out; overflow: auto; }
.bk-shot.hidden { display: none; }
.bk-shot img { max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
#bk-inbox-btn:not(.hidden) { border-color: #ffb454; background: rgba(255, 180, 84, .18); color: #ffd9a0; font-weight: 700; animation: bk-inbox-pulse 1.6s ease-in-out infinite; }
#bk-inbox-btn.hidden { display: none; }
@keyframes bk-inbox-pulse { 50% { box-shadow: 0 0 0 4px rgba(255, 180, 84, .25); } }
@media (prefers-reduced-motion: reduce) { #bk-inbox-btn:not(.hidden) { animation: none; } }
.bk-page.bk-flash::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 3px var(--bk-accent); border-radius: inherit; animation: bk-flash 1.2s ease-out forwards; }
@keyframes bk-flash { 0%, 40% { opacity: 1; } 100% { opacity: 0; } }
/* 그림 한 장만 있는 쪽: 쪽에 가득 */
.bk-content.bk-fullimg { padding: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background-image: none !important; }
.bk-content.bk-fullimg > p { margin: 0 !important; width: 100%; height: 100%; }
.bk-content.bk-fullimg .bimg { display: block !important; width: 100% !important; height: 100%; max-width: none; margin: 0 !important; float: none !important; }
.bk-content.bk-fullimg .bimg img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
.bk-content.bk-fullimg .bimg-cap { display: none; }
.bk-content.bk-fullimg .bhtml-frame { aspect-ratio: auto !important; width: 100%; height: 100%; border-radius: 0; }
.bk-sharein-edit { margin: 0 0 8px; padding: 8px 10px; border-radius: 8px; background: #2a2412; border: 1px solid #6b5520; color: #ffd98a; font: 12.5px/1.5 var(--bk-font-ui); }
.bk-sharein-edit.hidden { display: none; }
#bk-edundo { position: fixed; left: 50%; bottom: 64px; transform: translateX(-50%); z-index: 90; padding: 9px 16px; border-color: #ffb454; color: #ffd9a0; background: #23262e; box-shadow: 0 4px 16px rgba(0, 0, 0, .45); }
.bk-sharein-bgm { background: #14242a; border-color: #23606e; color: #a8e6f2; }
/* 장의 음악 · 쪽의 효과음 */
.bk-snd-list { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.bk-snd-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 7px; background: #23262e; font-size: 12px; color: #cfd2db; }
.bk-snd-item b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-weight: 600; }
.bk-snd-row { justify-content: flex-start; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.bk-snd-row .bk-btn { font-size: 12px; padding: 6px 9px; }
.bk-content.bk-fullimg .bimg video { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
.bk-sharein-sep { margin: 8px 0 2px; text-align: center; font: 11.5px var(--bk-font-ui); color: #8a8f9c; }
.bk-sharein-all { background: linear-gradient(135deg, #ff9d2e, #ff5e7a) !important; border: 0 !important; font-weight: 800; margin-bottom: 6px; }
#bk-mute-btn.on { border-color: #e06b6b; background: rgba(224, 107, 107, .18); color: #ffc9c9; }
/* 노트 아래: 배경음 · 효과음 음량 (책 전체) */
.bk-vols { display: none; position: absolute; left: 0; bottom: -54px; gap: 18px; align-items: center; z-index: 5; }
.bk-vols.on { display: flex; }
.bk-vols label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--bk-muted); }
.bk-vols label.off { opacity: .35; }
.bk-vols input[type="range"] { width: 110px; height: 4px; accent-color: var(--bk-accent); cursor: pointer; }
.bk-book.opening .bk-vols { opacity: 0; }
body.snd-muted .bk-vols { opacity: .35; }
.bk-vols-mute { display: none; }
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) {
  /* 휴대폰: 진행 막대 바로 밑에 배경음 · 효과음 · 소리 끄기를 가로로 나란히 */
  body.has-vols .bk-stage { bottom: calc(var(--m-stack, 46px) + 13px + 36px + env(safe-area-inset-bottom)); }
  .bk-vols.on { left: 44px; right: 10px; bottom: -46px; gap: 8px; z-index: 44; }
  .bk-vols label { flex: 1; min-width: 0; gap: 4px; font-size: 14px; }
  .bk-vols input[type="range"] { flex: 1; min-width: 0; width: auto; height: 22px; }
  .bk-vols-mute { display: block; flex: none; width: 40px; height: 28px; border-radius: 8px; border: 1px solid #3a3d46; background: #23262e; font-size: 15px; line-height: 1; }
  .bk-vols-mute.on { border-color: #e06b6b; background: rgba(224, 107, 107, .2); }
  body.snd-muted .bk-vols { opacity: 1; }
  body.snd-muted .bk-vols label { opacity: .35; }
  body.editing .bk-vols { display: none; }
}
/* 그림 크게 보기: 가운데에 한 장만 가득 */
.bk-gal { position: fixed; inset: 0; z-index: 450; display: flex; align-items: center; justify-content: center; background: rgba(8, 9, 12, .94); touch-action: pan-y; }
.bk-gal.hidden { display: none; }
#bk-gal-img { height: 94vh; width: auto; max-width: calc(100vw - 150px); object-fit: contain; border-radius: 4px; box-shadow: 0 12px 50px rgba(0, 0, 0, .7); user-select: none; -webkit-user-drag: none; }
.bk-gal-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 96px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .08); color: #fff; font-size: 40px; line-height: 1; cursor: pointer; }
.bk-gal-nav:hover { background: rgba(255, 255, 255, .18); }
.bk-gal-nav:disabled { opacity: .2; cursor: default; }
#bk-gal-prev { left: 10px; } #bk-gal-next { right: 10px; }
.bk-gal-x { position: absolute; right: 14px; top: 10px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 18px; cursor: pointer; }
.bk-gal-n { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); padding: 2px 12px; border-radius: 12px; background: rgba(0, 0, 0, .55); color: #cfd2db; font: 12px var(--bk-font-ui); pointer-events: none; }
@media (max-width: 700px) { #bk-gal-img { height: auto; max-height: 90vh; width: 100vw; max-width: 100vw; border-radius: 0; } .bk-gal-nav { width: 40px; height: 70px; font-size: 30px; background: rgba(0, 0, 0, .35); } #bk-gal-prev { left: 2px; } #bk-gal-next { right: 2px; } }
/* 태블릿 모드(펼친 폴드 · 눕힌 안드로이드 태블릿 · 눕힌 큰 아이패드 — body.tab2 는 book.js 가 붙인다. 아이패드 미니와 세운 아이패드는 넣지 않는다): 화면 구성은 휴대폰처럼, 책은 두 쪽을 펼친다 */
@media (pointer: coarse) and (min-width: 761px) and (max-width: 1200px) { body.tab2 .bk-book, body.tab2 .bk-book.single { width: min(100%, var(--tab-w, 100%)); } }
body.tab2 .bk-leaf { width: 50%; }
body.tab2 .bk-leaf.fwd { left: 50%; }
body.tab2 .bk-leaf.back { left: 0; }
body.tab2 .bk-desk { perspective: 2600px; }
body.tab2 .bk-pager { top: -40px; }   /* 원근이 걸린 칸 안에서는 화면이 아니라 그 칸이 기준이 된다 — 책 위 여백으로 올린다 */
body.tab2.viewer .bk-pager { top: -36px; }
body.tab2 .bk-book, body.tab2 .bk-book.single { transform-style: preserve-3d; }
body.tab2 .bk-page-left { box-shadow: inset -14px 0 18px -14px rgba(0, 0, 0, .28); }
body.tab2 .bk-page-right { box-shadow: inset 14px 0 18px -14px rgba(0, 0, 0, .28); }
/* 받은 글을 넣는 동안: 화면을 덮고 움직이는 막대 */
.bk-busy { position: fixed; inset: 0; z-index: 600; display: flex; align-items: center; justify-content: center; background: rgba(10, 11, 14, .55); }
.bk-busy.hidden { display: none; }
.bk-busy-box { display: flex; flex-direction: column; gap: 6px; min-width: 240px; padding: 18px 22px 16px; border-radius: 14px; background: #23262e; border: 1px solid #3a3d46; color: #fff; font: 14px var(--bk-font-ui); box-shadow: 0 12px 40px rgba(0, 0, 0, .6); }
.bk-busy-box span { color: #9aa0ad; font-size: 12px; }
.bk-busy-bar { position: relative; display: block; height: 4px; margin-top: 8px; border-radius: 2px; background: #3a3d46; overflow: hidden; }
.bk-busy-bar::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; border-radius: 2px; background: var(--bk-accent); animation: bk-busy 1.1s ease-in-out infinite; }
@keyframes bk-busy { to { left: 100%; } }

/* 노트만 보기(body.only): 둘레의 단추 · 책장 · 막대를 숨기고 책만 화면 가득 */
.bk-only-m { display: grid; place-items: center; flex: none; width: 30px; height: 26px; padding: 0; border-radius: 6px; border: 1px solid #3a3d46; background: rgba(255, 255, 255, .07); color: #cfd2db; cursor: pointer; }
.bk-only-m:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.bk-add-m { font-size: 17px; font-weight: 700; line-height: 1; }
body.viewer #bk-add-m, .bk-book.closed #bk-add-m { display: none; }
#bk-only-x { display: none; }
body.only #bk-only-x { display: grid; place-items: center; position: fixed; right: calc(10px + env(safe-area-inset-right)); top: calc(10px + env(safe-area-inset-top)); z-index: 62; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: rgba(24, 26, 32, .78); color: #fff; font-size: 17px; cursor: pointer; opacity: .6; }
body.only #bk-only-x:hover { opacity: 1; }
body.only .bk-bar, body.only #bk-mtitle, body.only #bk-mdock, body.only #bk-mmore, body.only #bk-medit, body.only .bk-pager, body.only .bk-topmid, body.only .bk-magbar, body.only .bk-hwbar, body.only .bk-vols, body.only #bk-syncbar, body.only .bk-stage > .bk-shelf, body.only #bk-letter-btn, body.only #bk-viewer-banner, body.only #bk-magdim { display: none !important; }
@media (min-width: 761px) and (not (pointer: coarse)), (min-width: 1201px) {
  body.only { --side: 0px; }
  body.only .bk-desk { padding: 14px 12px 34px; gap: 12px; }
  body.only .bk-book { height: min(100%, 95vh, calc((100vw - 150px) / 1.42)); max-width: calc(100% - 126px); }
}
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) {
  .bk-only-m { width: 34px; height: 28px; margin-left: 2px; }
  body.only .bk-marks { display: none !important; }
  body.only .bk-stage, body.only.viewer .bk-stage, body.only.has-vols .bk-stage { top: env(safe-area-inset-top); bottom: calc(13px + env(safe-area-inset-bottom)); }
}
@media print { #bk-only-x { display: none !important; } }

/* 뒤표지: 마지막 쪽에서 한 번 더 넘기면 덮인다. 앞표지와 좌우가 반대(책등이 오른쪽) */
.bk-cover-end { transform-origin: right center; }
.bk-cover-rear { transform: scaleX(-1); }
.bk-cover-rear-in { transform: scaleX(-1); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; max-width: 100%; }
.bk-cover-rear-title { font: 600 15px/1.4 var(--bk-font-ui); opacity: .8; word-break: keep-all; overflow-wrap: anywhere; }
.bk-cover-add { padding: 14px 28px; border-radius: 16px; border: 1.5px solid rgba(255, 255, 255, .75); background: rgba(255, 255, 255, .16); color: #fff; font: 700 18px var(--bk-font-ui); cursor: pointer; transition: background .12s, transform .12s; }
.bk-cover-add:hover { background: rgba(255, 255, 255, .3); }
.bk-cover-add:active { transform: scale(.96); }
.bk-cover-rear-hint { font: 12px var(--bk-font-ui); opacity: .7; }
.bk-book.closed-end .bk-cover { cursor: pointer; }
.bk-book.ending:not(.single) #bk-right { visibility: hidden; }
.bk-book.ending .bk-hot, .bk-book.ending .bk-addside { display: none; }
.bk-book.ending > .bk-marks { visibility: hidden; }
/* 두 쪽 보기에서는 덮인 책이 가운데로 옮겨진다 — 책 폭에 맞춘 진행 막대 · 돋보기 · 음량이 오른쪽 칸을 덮지 않게 숨긴다 */
.bk-book.ending:not(.single) .bk-progress, .bk-book.ending:not(.single) .bk-magbar, .bk-book.ending:not(.single) .bk-vols { visibility: hidden; }

/* 오른쪽 칸의 구글 드라이브 단추: 연결되면 초록 테두리 */
#bk-drive-btn.on { border-color: #3aa76d; color: #bfe9d0; }

/* 뒤표지의 속지: 두 쪽 보기에서 마지막 쪽 옆 (표지 색이 옅게 밴 종이). 여기에 ＋ 새 쪽 추가가 놓인다 */
.bk-page.endpaper, .bk-cover-back.endpaper { background-color: color-mix(in srgb, var(--cover, #4f7cff) 16%, var(--bk-paper)); background-image: linear-gradient(to right, var(--bk-spine-shadow), transparent 9%), repeating-linear-gradient(45deg, rgba(0, 0, 0, .025) 0 1px, transparent 1px 14px), repeating-linear-gradient(-45deg, rgba(0, 0, 0, .025) 0 1px, transparent 1px 14px); }
.bk-page.endpaper .bk-addside { border-color: rgba(60, 60, 80, .35); background: rgba(255, 255, 255, .5); color: #4a4f60; }
.bk-page.endpaper .bk-addside:hover { background: #fff; border-color: var(--bk-accent); color: var(--bk-accent); }
/* 쪽 안의 스크롤: 브라우저 스크롤바는 숨기고(넘기려고 잡는 가장자리를 가리지 않게) 얇은 표시만 */
.bk-content { scrollbar-width: none; }
.bk-content::-webkit-scrollbar { display: none; }
.bk-sbar { position: absolute; right: 3px; width: 4px; border-radius: 2px; background: rgba(0, 0, 0, .28); z-index: 2; pointer-events: none; }
.bk-page-left .bk-sbar { right: auto; left: 3px; }
@media print { .bk-sbar { display: none !important; } }

/* 손글씨: 사진으로 글꼴 만들기 — 진행 막대 · 결과 안내 · 그 글씨로 쓴 미리 보기 */
.bk-hand-prog { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 12.5px; color: #cfd3dc; }
.bk-hand-prog.hidden { display: none; }
.bk-hand-prog i { flex: 1; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.bk-hand-prog i b { display: block; height: 100%; width: 0; background: var(--bk-accent); border-radius: 4px; transition: width .2s; }
.bk-hand-prog span { flex: none; min-width: 11em; }
.bk-hand-note { margin: 4px 0; font-size: 12.5px; line-height: 1.5; color: #8ce99a; }
.bk-hand-note.bad { color: #ff8787; }
.bk-hand-prev { margin: 6px 0 8px; padding: 10px 12px; border-radius: 8px; background: #fffdf6; color: #1c1c22; font-size: 26px; line-height: 1.35; word-break: keep-all; overflow-wrap: anywhere; }
@media (max-width: 720px) { .bk-hand-prev { font-size: 21px; } .bk-hand-prog { flex-wrap: wrap; } .bk-hand-prog i { flex-basis: 100%; } }

/* 손글씨: 크게 보고 어색한 글자 고치기 · 새 글씨와 견줘 보고 바꾸기 */
#hand-fix-open.on { border-color: var(--bk-accent); color: #fff; background: rgba(79, 124, 255, .22); }
.bk-hand-fix { margin: 4px 0 10px; }
.bk-hand-fix.hidden, .bk-hand-fixsrc.hidden, .bk-hand-try.hidden { display: none; }
.bk-hand-fix textarea { width: 100%; box-sizing: border-box; font-size: 16px; padding: 8px 10px; border-radius: 8px; resize: vertical; }
.bk-hand-fixview { padding: 10px 12px; border-radius: 8px; background: #fffdf6; color: #1c1c22; font-size: 34px; line-height: 1.4; word-break: keep-all; overflow-wrap: anywhere; white-space: pre-wrap; }
.bk-hand-fixview .hf-ch { cursor: pointer; border-radius: 4px; }
.bk-hand-fixview .hf-ch:hover { background: rgba(79, 124, 255, .18); }
.bk-hand-fixview .hf-ch.sel { background: rgba(255, 146, 43, .38); outline: 2px solid #ff922b; }
.bk-hand-fixsrc { margin-top: 8px; padding: 10px; border: 1px solid #ff922b; border-radius: 8px; font-size: 13px; line-height: 1.5; }
.bk-hand-fixsrc > b { display: block; margin-bottom: 6px; }
.bk-hand-fixcards { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.bk-hand-fixcard { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; background: rgba(255, 255, 255, .07); }
.bk-hand-fixcard canvas, .bk-hand-fixcard i { flex: none; width: 66px; height: 71px; border-radius: 4px; background: #fff; display: block; }
.bk-hand-fixcard span { display: block; }
.bk-hand-fixcard span b { display: block; color: #fff; }
.bk-hand-fixcard span small { color: #ffd8a8; font-size: 12px; }
.bk-hand-try { margin: 8px 0; padding: 10px; border: 2px solid var(--bk-accent); border-radius: 10px; font-size: 13px; }
.bk-hand-try > b { display: block; margin-bottom: 6px; color: #fff; }
.bk-hand-try-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.bk-hand-try-row span { flex: none; width: 4.6em; color: #cfd3dc; }
.bk-hand-try-row p { flex: 1; margin: 0; padding: 8px 10px; border-radius: 8px; background: #fffdf6; color: #1c1c22; font-size: 28px; line-height: 1.35; word-break: keep-all; overflow-wrap: anywhere; }
@media (max-width: 720px) { .bk-hand-fixview { font-size: 28px; } .bk-hand-try-row { flex-direction: column; align-items: stretch; gap: 2px; } .bk-hand-try-row p { font-size: 23px; } }
/* ── 돋보기 (보는 중 Alt) ── */
.bk-loupe { position: fixed; z-index: 250; overflow: hidden; border-radius: 12px; background: #17181c; border: 2px solid var(--bk-accent); box-shadow: 0 18px 60px rgba(0, 0, 0, .6); pointer-events: none; contain: layout paint; }
.bk-loupe * { pointer-events: none !important; transition: none !important; animation-play-state: paused !important; }
.bk-loupe .bk-magbar, .bk-loupe .bk-hwbar, .bk-loupe .bk-pager, .bk-loupe .bk-vols, .bk-loupe .bk-endhint { display: none !important; }
.bk-loupe-hole { background: repeating-linear-gradient(45deg, rgba(0, 0, 0, .06) 0 10px, rgba(0, 0, 0, .12) 10px 20px); border-radius: 6px; }
.bk-loupe-tag { position: absolute; right: 8px; bottom: 8px; z-index: 5; padding: 3px 9px; border-radius: 10px; background: rgba(20, 22, 32, .82); color: #fff; font: 12px var(--bk-font-ui, system-ui); }
.bk-loupe-box { position: fixed; z-index: 249; border: 2px solid var(--bk-accent); border-radius: 4px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .7); pointer-events: none; }
@media print { .bk-loupe, .bk-loupe-box { display: none !important; } }
/* 🌐 번역 창: 책이 가려지지 않게 오른쪽에 둔다 (글을 고르면서 쓴다) */
.bk-trpop { right: 12px; top: 64px; width: min(340px, calc(100vw - 16px)); max-height: calc(100vh - 80px); overflow: auto; z-index: 60; }
.bk-trpop .bk-pop-h { cursor: move; touch-action: none; user-select: none; }
.bk-trpop .bk-pop-x { min-width: 32px; min-height: 32px; }
.bk-tr-langs { display: flex; align-items: center; gap: 6px; margin: 8px 0; }
.bk-tr-langs select { margin: 0; min-height: 36px; }
.bk-tr-langs .bk-btn { flex: none; min-width: 42px; min-height: 36px; padding: 0; font-size: 16px; }
.bk-tr-scope { display: flex; gap: 6px; }
.bk-tr-scope button { flex: 1; min-height: 36px; padding: 6px 8px; border: 1px solid #3a3f4d; border-radius: 8px; background: transparent; color: #c9cdd8; font: 600 13px var(--bk-font-ui); cursor: pointer; }
.bk-tr-scope button.on { background: #3b82f6; border-color: #3b82f6; color: #fff; }
.bk-tr-scope button:disabled { opacity: .45; cursor: default; }
.bk-tr-bar { height: 6px; border-radius: 3px; background: #2a2d34; overflow: hidden; margin: 10px 0 4px; }
.bk-tr-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: #3b82f6; transition: width .2s ease; }
.bk-tr-pct { margin: 0 0 8px; font: 12px var(--bk-font-ui); color: #cfd2db; font-variant-numeric: tabular-nums; }
.bk-tr-warn { color: #ffb454; }
.bk-tr-out { max-height: 32vh; overflow: auto; white-space: pre-wrap; padding: 9px 10px; margin: 10px 0 8px; border-radius: 8px; background: #2a2d34; border: 1px solid #3a3d46; color: #fff; line-height: 1.6; user-select: text; -webkit-user-select: text; }
.bk-trpop .bk-pop-row .bk-btn { min-height: 36px; }
/* 🛍 글씨체 가게 화면 */
.bk-fshop { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .6); }
.bk-fshop.hidden, .bk-hand-mode.hidden { display: none; }
.bk-fshop-in { width: min(1180px, 100%); height: min(820px, 100%); display: flex; flex-direction: column; border-radius: 14px; background: #1f2126; border: 1px solid #3a3d46; color: #fff; overflow: hidden; font: 13px var(--bk-font-ui); }
.bk-fshop-in > header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #3a3d46; font-size: 16px; }
.bk-fshop-in > header .bk-pop-x { min-width: 36px; min-height: 36px; font-size: 18px; }
.bk-fshop-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px 1fr; }
.bk-fshop-body aside { overflow: auto; padding: 14px; border-right: 1px solid #3a3d46; background: #191b20; }
.bk-fshop-body aside h4 { margin: 0 0 10px; font-size: 13px; color: #cfd2db; }
.bk-fshop-body main { overflow: auto; padding: 0 16px 16px; }
.bk-fshop-try { position: sticky; top: 0; z-index: 2; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 14px 0 12px; background: #1f2126; }
.bk-fshop-try > input { flex: 1 1 260px; margin: 0; min-height: 40px; font-size: 15px; }
.bk-fshop-try label { display: flex; align-items: center; gap: 6px; color: #cfd2db; white-space: nowrap; }
.bk-fshop-try input[type=range] { width: 130px; }
.bk-fshop-try input[type=number] { width: 58px; min-height: 36px; padding: 0 6px; border-radius: 7px; border: 1px solid #3a3d46; background: #2a2d34; color: #fff; font: inherit; }
.bk-fshop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.bk-fshop .bk-fshop-card { padding: 12px; gap: 8px; border-radius: 10px; }
.bk-fshop .bk-fshop-card header b { font-size: 14px; }
.bk-fshop .bk-fshop-card header span { font-size: 12px; }
.bk-fshop .bk-fshop-card header span.paid { color: #b4530a; font-weight: 700; }
.bk-fshop .bk-fshop-sample { min-height: 1.5em; font-size: var(--fs, 30px); line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; }
.bk-fshop-acts { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.bk-fshop-acts i { margin-right: auto; font-style: normal; font-size: 12px; color: #16803c; font-weight: 700; }
.bk-fshop-acts .bk-btn { align-self: auto; min-height: 36px; color: #1f2330; background: #eef0f6; border-color: #cfd4e2; }
.bk-fshop-acts .bk-btn.bk-btn-primary { color: #fff; background: var(--bk-accent); border-color: var(--bk-accent); }
.bk-fshop-own { display: flex; flex-direction: column; gap: 5px; padding: 10px; margin-bottom: 8px; border-radius: 10px; background: #2a2d34; border: 1px solid #3a3d46; }
.bk-fshop-own b { font-size: 22px; font-weight: 400; line-height: 1.35; }
.bk-fshop-own small { color: #b9bdc9; line-height: 1.5; }
.bk-fshop-own.dead { opacity: .6; }
.bk-fshop-own .bk-btn { align-self: flex-start; min-height: 34px; }
@media (max-width: 760px) {
  .bk-fshop { padding: 0; }
  .bk-fshop-in { width: 100%; height: 100%; border-radius: 0; border: 0; }
  .bk-fshop-body { display: block; overflow: auto; }
  .bk-fshop-body aside { overflow: visible; border-right: 0; border-bottom: 1px solid #3a3d46; }
  .bk-fshop-body main { overflow: visible; padding: 0 12px 16px; }
  .bk-fshop-grid { grid-template-columns: 1fr; }
  .bk-fshop-try > input, .bk-fshop-try input[type=number] { font-size: 16px; }
}
/* ▶ 손글씨가 글꼴이 되는 과정 */
.bk-hdemo { position: fixed; inset: 0; z-index: 310; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .65); }
.bk-hdemo-in { width: min(1040px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 14px; background: #1f2126; border: 1px solid #3a3d46; color: #fff; font: 13px var(--bk-font-ui); overflow: auto; }
.bk-hdemo-in > header { display: flex; align-items: center; justify-content: space-between; font-size: 16px; }
.bk-hdemo-x { min-width: 36px; min-height: 36px; border: 0; background: none; color: #aab; font-size: 18px; cursor: pointer; }
.bk-hdemo-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.bk-hdemo-steps button { min-height: 40px; padding: 6px 8px; border-radius: 8px; border: 1px solid #3a3f4d; background: transparent; color: #c9cdd8; font: 600 12.5px var(--bk-font-ui); cursor: pointer; }
.bk-hdemo-steps button.on { background: #3b82f6; border-color: #3b82f6; color: #fff; }
.bk-hdemo-cap { margin: 0; min-height: 3em; color: #cfd2db; line-height: 1.5; }
.bk-hdemo-stage { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.bk-hdemo-paper { overflow: hidden; border-radius: 8px; background: #111; }
.bk-hdemo-sheet { position: relative; transition: transform 1.1s ease; }
.bk-hdemo-sheet.zoom { transform: scale(3.2); }
.bk-hdemo-sheet img { display: block; width: 100%; user-select: none; }
.bk-hdemo-sheet i { position: absolute; pointer-events: none; font-style: normal; }
.bk-hdemo-scan { border: 2px solid #ff4d6d; border-radius: 3px; background: rgba(255, 77, 109, .18); opacity: 0; transition: left .03s linear, top .03s linear; }
.bk-hdemo-ring { border: 2px solid #ff4d6d; border-radius: 4px; opacity: 0; transition: opacity .3s; box-shadow: 0 0 0 2000px rgba(0, 0, 0, .28); }
.bk-hdemo-cover { background: #fff; opacity: 0; clip-path: inset(0 0 0 0); }
.bk-hdemo-cover.on { opacity: 1; }
.bk-hdemo-cover.open { clip-path: inset(0 0 0 100%); transition: clip-path 1.5s ease-in-out; }
.bk-hdemo-odd { display: grid; place-items: center; container-type: size; opacity: 0; color: #22305e; font-family: 'HandDemo', sans-serif; }
.bk-hdemo-odd { font-size: 0; }
.bk-hdemo-odd.on { opacity: 1; font-size: 62cqh; line-height: 1; transform: rotate(-24deg) scale(1.35, .62) translate(8%, 10%); }
.bk-hdemo-odd.gone { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s ease-in-out; }
.bk-hdemo-out { min-width: 0; padding: 14px 16px; border-radius: 10px; background: #fdfcf8; color: #1f2330; min-height: 220px; }
.bk-hdemo-count { margin: 0 0 8px; min-height: 1.5em; font: 600 13px var(--bk-font-ui); color: #46506a; }
.bk-hdemo-bar { height: 6px; border-radius: 3px; background: #e3e6ee; overflow: hidden; margin-bottom: 10px; }
.bk-hdemo-bar.off { visibility: hidden; }
.bk-hdemo-bar i { display: block; height: 100%; width: 0; background: #3b82f6; }
.bk-hdemo-text { margin: 0; font: 26px/1.5 'HandDemo', sans-serif; color: #16324f; word-break: keep-all; opacity: 0; }
.bk-hdemo-text.show { opacity: 1; }
.bk-hdemo-text span { display: inline-block; white-space: pre; transition: transform .5s ease, color .5s ease, background .5s ease; border-radius: 4px; }
.bk-hdemo-text span.odd { transform: rotate(-24deg) scale(1.35, .62); color: #d6336c; background: rgba(255, 77, 109, .14); }
.bk-hdemo-text span.new { color: #16803c; background: rgba(22, 128, 60, .12); }
.bk-hdemo-in > footer { display: flex; justify-content: flex-end; gap: 8px; }
.bk-hdemo-in > footer .bk-btn { min-height: 38px; }
@media (max-width: 760px) {
  .bk-hdemo { padding: 0; }
  .bk-hdemo-in { width: 100%; height: 100%; border-radius: 0; border: 0; }
  .bk-hdemo-steps { grid-template-columns: 1fr 1fr; }
  .bk-hdemo-stage { grid-template-columns: 1fr; }
  .bk-hdemo-text { font-size: 17px; }
  .bk-hdemo-out { min-height: 150px; }
}
.bk-hdemo-tip { display: none; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 6px; color: #16324f; }
.bk-hdemo-tip.on { display: flex; }
.bk-hdemo-tip > span { font-size: 26px; color: #8a93a8; }
.bk-hdemo-tcell { position: relative; width: 104px; height: 112px; margin-top: 22px; border: 1.5px solid #9aa3b8; border-radius: 4px; background: linear-gradient(#c9cfdd, #c9cfdd) center / 1px 100% no-repeat, linear-gradient(#c9cfdd, #c9cfdd) center / 100% 1px no-repeat, #fff; }
.bk-hdemo-tcell small { position: absolute; left: 0; right: 0; top: -24px; text-align: center; font: 700 16px var(--bk-font-ui); color: #1f2330; }
.bk-hdemo-tcell i { position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; margin: -6px 0 0 -6px; border-radius: 50%; background: #1d86c9; transition: top .9s ease, left .9s ease; }
.bk-hdemo-tip.low .bk-hdemo-tcell i { top: 80%; left: 36%; }
.bk-hdemo-tline { margin: 0; font: 24px/1.5 'HandDemo', sans-serif; white-space: nowrap; }
.bk-hdemo-tline i { display: inline-block; width: .16em; height: .16em; margin-left: .08em; border-radius: 50%; background: #d6336c; vertical-align: baseline; transform: translateY(-.42em); transition: transform .9s ease, background .9s ease; }
.bk-hdemo-tip.low .bk-hdemo-tline i { transform: translateY(0); background: #16803c; }
@media (max-width: 760px) { .bk-hdemo-steps { grid-template-columns: 1fr 1fr; } .bk-hdemo-tline { font-size: 18px; } }
.bk-hdemo-in > * { flex: none; }
@media (max-width: 760px) { .bk-hdemo-paper { max-height: 36vh; } .bk-hdemo-steps button { min-height: 36px; font-size: 12px; } .bk-hdemo-cap { min-height: 0; } }
/* 손글씨 사진 크게 보기: 누르면 더 크게(스크롤로 둘러보기) */
.bk-gal.hand #bk-gal-img { cursor: zoom-in; background: #fff; }
.bk-gal.hand.big { overflow: auto; display: block; text-align: center; }
.bk-gal.hand.big #bk-gal-img { height: auto; width: min(2000px, 180vw); max-width: none; cursor: zoom-out; margin: 0 auto; }
.bk-gal.hand.big .bk-gal-nav, .bk-gal.hand.big .bk-gal-x, .bk-gal.hand.big .bk-gal-n { position: fixed; }
.bk-hand-list img { cursor: zoom-in; }
.bk-hand-up { margin: 4px 0 8px; }

/* ══════ 오른쪽 도구: 용도별 묶음 · 한 줄에 2개 · 묶음 사이는 넓게 ══════ */
.bk-grp { display: contents; }
.bk-grp-t { display: none; }
body.viewer .bk-grp[data-g="study"], body.viewer .bk-grp[data-g="make"] { display: none !important; }
@media (min-width: 761px) and (not (pointer: coarse)), (min-width: 1201px) {
  .bk-actions { gap: 0; }
  .bk-grp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 18px; }
  .bk-grp:last-child { margin-bottom: 0; }
  .bk-grp-t { display: block; grid-column: 1 / -1; margin: 0 0 1px 2px; font: 700 11px var(--bk-font-ui); letter-spacing: .08em; color: var(--bk-muted); }
  .bk-grp .bk-btn { min-width: 0; padding: 8px 8px; font-size: 12.5px; line-height: 1.3; white-space: normal; word-break: keep-all; text-align: left; }
  .bk-grp #bk-hand-btn, .bk-grp #bk-letter-btn, .bk-grp #bk-acct-btn, .bk-grp #bk-study-btn { grid-column: 1 / -1; }
  .bk-actions #bk-hand-btn, .bk-actions #bk-letter-btn { margin-top: 2px; }
}
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) {
  .bk-actions { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; width: 100%; }
  .bk-grp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 20px; }
  .bk-grp:last-child { margin-bottom: 4px; }
  .bk-grp-t { display: block; grid-column: 1 / -1; margin: 0 0 1px 2px; font: 700 12px var(--bk-font-ui); letter-spacing: .08em; color: var(--bk-muted); }
  .bk-grp .bk-btn { min-width: 0; white-space: normal; word-break: keep-all; text-align: left; }
  .bk-grp #bk-hand-btn, .bk-grp #bk-letter-btn, .bk-grp #bk-acct-btn, .bk-grp #bk-study-btn { grid-column: 1 / -1; }
}
/* 공부 도구 버튼은 눈에 띄게 */
#bk-study-btn { font-weight: 800; border-color: #2f8f6b; background: linear-gradient(135deg, rgba(34, 160, 107, .28), rgba(20, 184, 196, .18)); }

/* ══════ 📚 공부 도구 창 ══════ */
.bk-study { right: 12px; top: 64px; width: min(380px, calc(100vw - 16px)); max-height: calc(100vh - 80px); overflow: auto; z-index: 60; }
@media (min-width: 761px) and (not (pointer: coarse)), (min-width: 1201px) { .bk-study { right: calc(var(--side) + 12px); top: 16px; max-height: calc(100vh - 32px); } }
@media (max-width: 760px), (pointer: coarse) and (max-width: 1200px) { .bk-study { left: 8px !important; right: 8px !important; top: calc(56px + env(safe-area-inset-top)) !important; width: auto; max-height: calc(100dvh - 72px); } }
.bk-st-sec { padding: 10px 0 12px; border-top: 1px solid #33363e; }
.bk-st-sec:first-of-type { border-top: 0; padding-top: 2px; }
.bk-st-t { display: block; font-size: 13.5px; margin-bottom: 4px; }
.bk-st-wide { width: 100%; min-height: 40px; font-size: 14px; }
.bk-st-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.bk-st-kinds button { min-height: 52px; padding: 6px 4px; border-radius: 10px; border: 1px solid #3a3f4d; background: #262931; color: #e8eaf0; font: 700 13px var(--bk-font-ui); cursor: pointer; line-height: 1.3; word-break: keep-all; }
.bk-st-kinds button:hover { border-color: var(--bk-accent); }
.bk-st-kinds button.on { background: var(--bk-accent); border-color: var(--bk-accent); color: #fff; }
.bk-st-kinds button:disabled { opacity: .5; cursor: default; }
.bk-st-scope { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: #262931; }
.bk-st-scope button { flex: 1; min-height: 34px; border: 0; border-radius: 8px; background: none; color: #c9cdd8; font: 600 12.5px var(--bk-font-ui); cursor: pointer; }
.bk-st-scope button.on { background: #3b4050; color: #fff; }
.bk-st-mine { margin-top: 8px; padding: 10px; border-radius: 10px; background: #262931; border: 1px solid #3a3d46; }
.bk-st-mine .bk-pop-row { justify-content: flex-start; flex-wrap: wrap; }
.bk-st-mine a.bk-btn { text-decoration: none; }
.bk-st-bar { height: 6px; border-radius: 3px; background: #2f333d; overflow: hidden; margin-top: 6px; }
.bk-st-bar i { display: block; height: 100%; width: 0; background: var(--bk-accent); transition: width .2s; }

/* ══════ 🃏 낱말 카드 · ❓ 문제 (책 쪽 안) — 눌러서 펼친다 ══════ */
.bk-content details.bk-flash, .bk-content details.bk-quiz { margin: 10px 0; border-radius: 12px; border: 1.5px solid #c9d3ea; background: #fff; box-shadow: 0 2px 0 #c9d3ea; overflow: hidden; break-inside: avoid; }
.bk-content details.bk-flash > summary, .bk-content details.bk-quiz > summary { list-style: none; cursor: pointer; padding: 12px 14px; font-weight: 700; line-height: 1.5; color: #1d2433; }
.bk-content details > summary::-webkit-details-marker { display: none; }
.bk-content details.bk-flash > summary::after { content: '눌러서 답 보기 ›'; display: block; margin-top: 4px; font-size: .72em; font-weight: 600; color: #6a7590; }
.bk-content details.bk-quiz > summary::after { content: '눌러서 정답 보기 ›'; display: block; margin-top: 6px; font-size: .72em; font-weight: 600; color: #6a7590; }
html[lang="en"] .bk-content details.bk-flash > summary::after { content: 'Tap to see the answer ›'; }
html[lang="en"] .bk-content details.bk-quiz > summary::after { content: 'Tap to see the answer ›'; }
.bk-content details[open] > summary::after { content: none; }
.bk-content details.bk-flash > div, .bk-content details.bk-quiz > div { padding: 10px 14px 12px; border-top: 1.5px dashed #c9d3ea; background: #f2f7ff; color: #23407a; line-height: 1.6; }
.bk-content details.bk-quiz > summary .bk-quiz-ch { display: block; margin-top: 6px; font-weight: 500; color: #333b4d; }
.bk-content details.bk-flash { border-left: 6px solid #4f7cff; }
.bk-content details.bk-quiz { border-left: 6px solid #f0a020; }
.bk-content details.bk-quiz > div { background: #fff8e8; color: #7a4a00; }

/* ══════ 📜 세로로 보기 ══════ */
.bk-vlist { position: absolute; inset: 0; z-index: 4; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; padding: 8px 0 24px; }
.bk-vlist.hidden { display: none; }
body.vmode #bk-spread { visibility: hidden; pointer-events: none; }
body.vmode .bk-hot, body.vmode .bk-corner { display: none; }
.bk-vitem { position: relative; margin: 0 auto 18px; }
.bk-vitem > .bk-vpage { position: absolute; left: 0; top: 0; flex: none; transform-origin: 0 0; border-radius: var(--bk-radius); background-image: none; }
.inking .bk-vlist .bk-ink { pointer-events: auto; cursor: crosshair; touch-action: none; }
body.pentouch .bk-vlist .bk-vpage { touch-action: none; }   /* 펜슬 기기: 쪽 위에서는 펜슬이 쓰기만 — 손가락 스크롤은 직접 처리 */
.bk-vtoggle { display: flex; gap: 3px; padding: 3px; border-radius: 10px; background: #262931; border: 1px solid #3a3d46; }
.bk-vtoggle button { flex: 1; min-height: 34px; border: 0; border-radius: 8px; background: none; color: #c9cdd8; font: 700 12.5px var(--bk-font-ui); cursor: pointer; white-space: nowrap; }
.bk-vtoggle button[aria-pressed="true"] { background: var(--bk-accent); color: #fff; }
.bk-grp .bk-vtoggle { grid-column: 1 / -1; }
/* 세로 보기에서는 넘김용 3D(원근 · preserve-3d)를 끈다 — 3D 안에 든 칸은 손가락 · 휠 스크롤이 먹지 않는 브라우저가 있다 */
body.vmode .bk-desk { perspective: none !important; }
body.vmode .bk-book, body.vmode .bk-spread { transform-style: flat !important; }
/* 세로 보기: 그림 위에서 끌어도 그림을 집어 들지 않고 스크롤되게 */
.bk-vlist img, .bk-vlist video { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
/* 세로 보기: 쪽 안의 글 칸이 따로 스크롤 칸이면 손가락 스크롤을 거기서 먹어 버린다(쪽은 이미 통째로 보인다) */
.bk-vlist .bk-content { overflow: visible !important; overscroll-behavior: auto !important; }