/* ShootBook — 디자인 토큰 (기획서 §8) */
:root {
  --bg: #FAF8F4;
  --surface: #FFFFFF;
  --ink: #2B2A27;
  --ink-2: #8A857C;
  --ink-3: #B4B2A9;
  --hl: #FFE49C;
  --hl-soft: #F5F1E8;
  --accent: #C77D3E;
  --line: #E8E3D8;
  --cam-bg: #2E2C29;
  --serif: "Noto Serif KR", serif;
  --sans: "Pretendard Variable", Pretendard, system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: #EDE9DF;
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

#app {
  max-width: 480px;
  height: 100dvh;
  margin: 0 auto;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

#views { flex: 1; position: relative; min-height: 0; }
.view { position: absolute; inset: 0; display: none; flex-direction: column; }
.view.active { display: flex; }
.hidden { display: none !important; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea {
  font-family: inherit; font-size: 14px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; width: 100%; outline: none;
}
input:focus, textarea:focus { border-color: var(--ink-3); }
textarea { resize: none; }

/* ── 촬영 화면 ─────────────────────────────── */
#view-camera { background: var(--cam-bg); }
#cam { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#cam.mirrored { transform: scaleX(-1); }

.cam-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: space-between; padding: 14px 14px 16px; pointer-events: none;
}
.cam-overlay > * { pointer-events: auto; }
.cam-top { display: flex; justify-content: space-between; gap: 8px; }
.cam-lower { display: flex; flex-direction: column; gap: 14px; }
.cam-status {
  text-align: center; font-size: 12.5px; color: #EDE9DF;
  text-shadow: 0 1px 4px rgba(0,0,0,.45);
}
.cam-bottom { display: flex; align-items: center; justify-content: space-between; }

.pill {
  background: rgba(43, 42, 39, .55); color: #FAF8F4;
  font-size: 12.5px; padding: 8px 14px; border-radius: 999px;
  backdrop-filter: blur(4px); min-height: 34px;
}
.pill b { color: var(--hl); font-weight: 600; }
.pill.small { padding: 5px 11px; min-height: 28px; font-size: 12px; }
.cam-top-right { display: flex; gap: 8px; }
.icon-pill { padding: 8px 12px; display: inline-flex; align-items: center; }
.icon-pill i.ti { font-size: 17px; }
.pill.dark { background: var(--hl-soft); color: var(--ink); }
.pill.dark.active { background: var(--hl); }

/* 셔터 = 탭바 중앙 카메라 아이콘을 감싸는 반원 도넛 링 */
.shutter-arc {
  position: absolute; left: 50%; bottom: -8px;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  width: 132px; height: 66px;
  background: transparent;
  border: 27px solid rgba(233, 106, 155, .92);
  border-bottom: none;
  border-top-left-radius: 132px;
  border-top-right-radius: 132px;
  box-shadow: 0 -8px 24px rgba(233, 106, 155, .32);
  transition: transform .1s ease, border-color .12s ease;
}
.shutter-arc:active {
  transform: translateX(-50%) scale(.94);
  border-color: rgba(209, 78, 130, .96);
}

#cam-flash {
  position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none;
}
#cam-flash.on { animation: flash .28s ease-out; }
@keyframes flash { 0% { opacity: .85; } 100% { opacity: 0; } }

.cam-error {
  position: absolute; inset: 0; background: var(--cam-bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; color: #EDE9DF; text-align: center; padding: 24px;
}
.key-banner {
  position: absolute; top: 60px; left: 14px; right: 14px;
  background: rgba(43,42,39,.8); color: #F3EFE6; font-size: 12px;
  padding: 10px 14px; border-radius: 10px; line-height: 1.6; backdrop-filter: blur(4px);
}
.key-banner b { color: var(--hl); }

/* ── 공통 상단바·본문 ───────────────────────── */
.topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px 10px; border-bottom: 1px solid var(--line); background: var(--bg);
}
.topbar-title { flex: 1; text-align: center; font-size: 13.5px; color: var(--ink-2); }
.topbar-spacer { width: 34px; }
.icon-btn {
  width: 34px; height: 34px; border-radius: 50%; font-size: 17px;
  display: flex; align-items: center; justify-content: center; color: var(--ink);
}
.icon-btn:hover { background: var(--hl-soft); }

.scroll-body { flex: 1; overflow-y: auto; min-height: 0; }
.scroll-body.pad { padding: 14px 16px 24px; }
.page-head { padding: 18px 16px 10px; background: var(--bg); }
.page-head h1 { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
.page-head input { margin-bottom: 10px; }

.hint { font-size: 12px; color: var(--ink-3); text-align: center; padding: 10px 0 2px; }

/* ── 하이라이트 ─────────────────────────────── */
.logo-serif.small { font-size: 16px; flex: 1; text-align: center; }
.stepper {
  display: flex; align-items: center; justify-content: center;
  padding: 12px 16px 2px; background: var(--bg);
}
.step { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 62px; }
.step .dot {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--line); background: var(--surface);
  display: flex; align-items: center; justify-content: center; color: var(--ink-3);
  transition: background .15s, border-color .15s;
}
.step .dot svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.step .slab { font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }
.step.done .dot { background: var(--hl-soft); border-color: #E9DCAE; color: var(--ink-2); }
.step.done .slab { color: var(--ink-2); }
.step.active .dot { background: var(--hl); border-color: transparent; color: var(--ink); }
.step.active .slab { color: var(--ink); font-weight: 700; }
.sline { width: 16px; height: 1.5px; background: var(--line); margin-bottom: 17px; flex-shrink: 0; }
.sline.done { background: #E9DCAE; }
.hl-caption { text-align: center; font-size: 11.5px; color: var(--ink-3); padding: 7px 0 0; }
#sentences { padding: 10px 18px 20px; }
.sent {
  font-family: var(--serif); font-size: 16.5px; line-height: 1.95;
  padding: 7px 10px; margin: 2px 0; border-radius: 6px; cursor: pointer;
  background-image: linear-gradient(var(--hl), var(--hl));
  background-repeat: no-repeat; background-size: 0% 100%;
  transition: background-size .18s ease-out;
}
.sent:hover { outline: 1.5px solid var(--hl); outline-offset: -1.5px; }
.sent.on { background-size: 100% 100%; }
.sent[contenteditable="true"] {
  outline: 2px solid var(--accent); background-image: none; background: var(--surface);
}
.orig-img { display: block; width: calc(100% - 36px); margin: 12px auto; border-radius: 10px; }

.center-note {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 60px 30px; text-align: center; color: var(--ink-2);
}
.center-note .big { font-size: 16px; font-weight: 600; color: var(--ink); }
.center-note .sub { font-size: 13px; line-height: 1.7; }
.row-center { display: flex; gap: 10px; margin-top: 6px; }
.spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid var(--hl-soft); border-top-color: var(--hl);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.hl-footer {
  display: flex; gap: 10px; padding: 12px 16px 16px;
  border-top: 1px solid var(--line); background: var(--bg);
}

/* ── 버튼 ───────────────────────────────────── */
.btn-dark {
  background: var(--ink); color: var(--bg); font-size: 14px; font-weight: 600;
  min-height: 46px; padding: 0 20px; border-radius: 13px;
  transition: transform .1s ease, opacity .15s;
}
.btn-dark:active { transform: scale(.98); }
.btn-dark:disabled { opacity: .35; cursor: default; }
.btn-dark.wide { width: 100%; }
.btn-dark.grow { flex: 1; }
.btn-ghost {
  color: var(--ink-2); font-size: 13.5px; min-height: 46px; padding: 0 14px;
  border-radius: 13px; border: 1px solid var(--line); background: var(--surface);
}
.btn-ghost.wide { width: 100%; margin-top: 8px; }
.btn-mint {
  background: #45A98D; color: #fff; font-size: 14px; font-weight: 600;
  min-height: 46px; padding: 0 20px; border-radius: 13px;
  transition: transform .1s ease, background .15s;
}
.btn-mint:active { background: #37917A; transform: scale(.98); }
.btn-mint.wide { width: 100%; margin-top: 10px; }

/* ── 칩 ─────────────────────────────────────── */
.chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  font-size: 13px; padding: 7px 13px; border-radius: 999px; min-height: 32px;
  transition: background .12s;
}
.chip.on { background: var(--hl); color: var(--ink); border-color: transparent; font-weight: 600; }
.chip.tag.on { background: var(--hl-soft); font-weight: 500; }
.chip.add { border-style: dashed; color: var(--ink-3); min-width: 38px; }
.chip.add:hover { color: var(--ink); border-color: var(--ink-3); }
.chip-input {
  width: 130px; min-height: 32px; padding: 6px 12px; border-radius: 999px;
  font-size: 13px; border: 1px solid var(--ink-3); background: var(--surface);
}

/* ── 저장 시트 · 모달 ───────────────────────── */
.backdrop {
  position: absolute; inset: 0; background: rgba(43, 42, 39, .42);
  display: flex; flex-direction: column; justify-content: flex-end; z-index: 30;
}
.sheet {
  background: var(--surface); border-radius: 18px 18px 0 0;
  padding: 10px 18px 20px; max-height: 86%; overflow-y: auto;
  animation: rise .22s ease-out;
}
@keyframes rise { from { transform: translateY(40px); opacity: .5; } to { transform: none; opacity: 1; } }
.sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto 14px; }
.sheet-book-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sheet-book { font-size: 15.5px; font-weight: 700; }
.sheet-book-sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.book-suggest {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--hl-soft); border-radius: 10px; padding: 9px 12px;
  font-size: 12.5px; color: var(--ink-2); margin-bottom: 6px;
}
.book-suggest b { color: var(--ink); }
.field-label { font-size: 12px; color: var(--ink-2); margin: 14px 0 7px; }
.ai-badge { color: var(--accent); font-size: 11px; margin-left: 4px; }
#tag-input { margin-top: 8px; }
#sheet-save { margin-top: 18px; }

.modal {
  background: var(--surface); border-radius: 18px; margin: auto 18px;
  padding: 18px; width: calc(100% - 36px); max-height: 80%; overflow-y: auto;
  animation: rise .18s ease-out;
}
.backdrop:has(.modal) { justify-content: center; }
.modal-title { font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.book-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.book-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  text-align: left; border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 13px; font-size: 14px; background: var(--bg);
}
.book-item .author { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.book-item.on { border-color: var(--ink); background: var(--hl-soft); }
.book-item .mark { color: var(--accent); font-weight: 700; }
.new-book { margin-top: 10px; }
.new-book input { margin-bottom: 8px; }
.newbook-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin-top: 8px; padding: 10px 12px; border-radius: 12px;
  border: 1px dashed var(--line); background: rgba(255, 255, 255, .5);
  color: var(--ink-2); font-size: 13.5px; text-align: left;
}
.newbook-row:hover { border-color: var(--accent); color: var(--accent-deep); }
.newbook-row.open { border-style: solid; border-color: var(--accent); color: var(--accent-deep); }
.nb-ic {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent-deep);
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
}
.nb-label { flex: 1; }

/* ── 서재 ───────────────────────────────────── */
.book-section { margin-bottom: 22px; }
.book-section h3 { font-size: 14px; font-weight: 700; margin-bottom: 3px; }
.book-section .book-author { font-size: 12px; color: var(--ink-3); margin-bottom: 10px; }
.quote-card {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: 13px; padding: 14px 16px; margin-bottom: 10px;
}
.quote-card .q-text { font-family: var(--serif); font-size: 14.5px; line-height: 1.85; }
.quote-card .q-memo {
  font-size: 12.5px; color: var(--ink-2); background: var(--hl-soft);
  border-radius: 8px; padding: 7px 10px; margin-top: 9px; line-height: 1.6;
}
.q-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.q-meta .when { font-size: 11.5px; color: var(--ink-3); }
.q-tag {
  font-size: 11px; color: var(--accent); background: #FAF3EA;
  padding: 3px 8px; border-radius: 999px;
}
.q-del {
  position: absolute; top: 8px; right: 10px; color: var(--ink-3);
  font-size: 15px; width: 28px; height: 28px; border-radius: 50%; opacity: 0;
  transition: opacity .12s;
}
.quote-card:hover .q-del { opacity: 1; }
.q-del:hover { background: var(--hl-soft); color: var(--ink); }

.empty-note { text-align: center; color: var(--ink-3); font-size: 13.5px; line-height: 1.8; padding: 56px 20px; }
.empty-note .btn-dark { margin-top: 14px; }

/* ── 미정리함 ───────────────────────────────── */
.inbox-card {
  display: flex; gap: 12px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 13px; padding: 10px; margin-bottom: 10px; align-items: center;
}
.inbox-card img { width: 74px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--hl-soft); }
.inbox-card .info { flex: 1; min-width: 0; }
.inbox-card .t { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-card .m { font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.inbox-card .acts { display: flex; flex-direction: column; gap: 6px; }
.inbox-card .acts .chip { text-align: center; }

/* ── 홈 ─────────────────────────────────────── */
.block {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 15px; padding: 15px 17px; margin-bottom: 12px;
}
.block h2 { font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 10px; letter-spacing: .02em; }
.block .num { font-size: 26px; font-weight: 700; }
.block .num small { font-size: 13px; font-weight: 500; color: var(--ink-2); margin-left: 4px; }
.quote-serif { font-family: var(--serif); font-size: 15px; line-height: 1.9; }
.quote-src { font-size: 12px; color: var(--ink-3); margin-top: 8px; }
.block .re-btn { margin-top: 10px; font-size: 12px; color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; background: var(--bg); }
.bookshelf { display: flex; flex-wrap: wrap; gap: 7px; }
.book-pill { background: var(--hl-soft); color: var(--ink); font-size: 12.5px; padding: 7px 12px; border-radius: 999px; }
.book-pill small { color: var(--ink-3); }
.stat-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.stat-row .lbl { width: 62px; font-size: 12.5px; color: var(--ink-2); flex-shrink: 0; }
.stat-row .track { flex: 1; height: 9px; background: var(--hl-soft); border-radius: 5px; overflow: hidden; }
.stat-row .fill { height: 100%; background: var(--hl); border-radius: 5px; }
.stat-row .pct { width: 40px; font-size: 12px; color: var(--ink-2); text-align: right; }

/* ── 홈 (시안 반영) ─────────────────────────── */
.home-top {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px 4px; background: var(--bg);
}
.logo-serif { font-family: var(--serif); font-size: 20px; font-weight: 600; }
.greet {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; padding: 6px 2px 16px; cursor: pointer;
}
.greet-text { font-size: 18.5px; font-weight: 700; line-height: 1.55; }
.greet-text b { color: var(--accent); }
.greet-illust { width: 116px; flex-shrink: 0; }
.tiles {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 15px; padding: 14px 6px; margin-bottom: 20px;
}
.tile { text-align: center; }
.tile svg {
  width: 20px; height: 20px; fill: none; stroke: var(--ink-2);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.tile .lbl { font-size: 11.5px; color: var(--ink-2); margin: 5px 0 3px; }
.tile .val { font-size: 17px; font-weight: 700; }
.sec-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 2px 2px 10px;
}
.sec-head h2 { font-size: 15px; font-weight: 700; }
.more { font-size: 12.5px; color: var(--ink-3); padding: 4px 2px; }
.more:hover { color: var(--ink); }
.quote-card.home .q-text { font-size: 14px; }
.quote-card.feature { background: #FFF4D8; border-color: #F0DFA8; }
.qmark {
  font-family: var(--serif); font-size: 32px; color: var(--accent);
  line-height: .6; display: block; margin: 4px 0 6px;
}
.q-attr { font-size: 12px; color: var(--ink-2); margin-top: 9px; }
.shelf {
  display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 10px;
}
.cover {
  flex: 0 0 88px; height: 120px; border-radius: 9px; padding: 11px 10px;
  display: flex; flex-direction: column; justify-content: space-between;
  align-items: flex-start; text-align: left; border: 1px solid rgba(43, 42, 39, .07);
}
.cover span {
  font-family: var(--serif); font-size: 12.5px; font-weight: 600;
  line-height: 1.45; color: var(--ink); word-break: keep-all;
}
.cover small { font-size: 10.5px; color: rgba(43, 42, 39, .55); }

/* ── 탭바 ───────────────────────────────────── */
#tabbar {
  display: flex; border-top: 1px solid var(--line); background: var(--bg);
  padding: 6px 0 8px; z-index: 20;
}
#tabbar button {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 11px; color: var(--ink-3); padding: 5px 0; min-height: 48px;
}
.ti { line-height: 1; }
#tabbar button > i.ti { font-size: 22px; }
.cam-fab i.ti { font-size: 25px; color: var(--bg); }
.step .dot i.ti { font-size: 15px; }
.tile i.ti { font-size: 20px; color: var(--ink-2); }
.icon-btn i.ti { font-size: 18px; }
#tabbar button.active { color: var(--ink); font-weight: 600; }
#tabbar button.center { flex: 0 0 76px; }
.cam-fab {
  width: 56px; height: 56px; margin-top: -26px; border-radius: 50%;
  background: var(--ink); border: 4px solid var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s ease;
}
#tabbar button.center:active .cam-fab { transform: scale(.94); }
.cam-fab svg { width: 24px; height: 24px; stroke: var(--bg) !important; }
#tabbar button.center.active .cam-fab { background: var(--accent); }

/* ── 홈 색 위계: 다시 만난 문장 = 진한 핑크, 나머지 = 연핑크 ── */
.block.resurfaced {
  background: rgba(233, 106, 155, .92);
  border-color: rgba(255, 255, 255, .45);
  box-shadow: 0 10px 26px rgba(233, 106, 155, .32);
  margin-bottom: 18px;
}
.block.resurfaced h2 { color: rgba(255, 255, 255, .85); }
.block.resurfaced .quote-serif { color: #fff; }
.block.resurfaced .quote-src { color: rgba(255, 255, 255, .78); }
.block.resurfaced .re-btn {
  background: rgba(255, 255, 255, .2);
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
}
#home-body .tiles,
#home-body .quote-card.home {
  background: rgba(252, 231, 240, .75);
  border-color: rgba(255, 255, 255, .8);
}
#home-body .quote-card.home.feature { background: rgba(250, 214, 226, .8); }

/* ── 문장 상세 ──────────────────────────────── */
.qd-meta { font-size: 12px; color: var(--ink-3); margin: 4px 2px 10px; }
.qd-status {
  min-width: 52px; text-align: right; font-size: 11px; color: var(--ink-3);
  opacity: 0; transition: opacity .25s;
}
.qd-status.show { opacity: 1; }
.qd-card {
  background: rgba(255, 255, 255, .92); border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 14px; padding: 16px 16px 12px;
  box-shadow: 0 4px 14px rgba(43, 45, 49, .06);
}
#qd-text {
  border: none; background: transparent; padding: 0; border-radius: 0;
  font-size: 16.5px; line-height: 1.9; overflow: hidden; resize: none;
}
#qd-text:focus { border: none; }
.qd-card { position: relative; }
.qd-card.font-serif #qd-text { font-family: var(--serif); }
.qd-card.font-sans #qd-text { font-family: var(--sans); }
#qd-text { padding-right: 32px; }
.font-btn {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px;
  border-radius: 50%; color: var(--ink-2); font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.font-btn:hover { background: var(--accent-soft); color: var(--accent-deep); }
.font-menu {
  position: absolute; top: 44px; right: 10px; z-index: 6;
  background: rgba(255, 255, 255, .97); border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 12px; box-shadow: 0 10px 28px rgba(43, 45, 49, .16);
  padding: 8px; min-width: 172px;
}
.fm-title { font-size: 11px; color: var(--ink-3); padding: 2px 8px 6px; }
.fm-item {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  width: 100%; padding: 9px 10px; border-radius: 8px; font-size: 13.5px; text-align: left;
}
.fm-item:hover { background: var(--hl-soft); }
.fm-item.on { background: var(--accent-soft); color: var(--accent-deep); font-weight: 700; }
.fm-sample { font-size: 12.5px; color: var(--ink-2); }
.fs-serif { font-family: var(--serif); }
.fs-sans { font-family: var(--sans); }
.qd-label { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 13px; color: var(--ink-2); }
.memo-ic {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-deep);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; transform: rotate(-8deg);
}
.memo-ic.en { background: #DFF4EC; color: #2E7A64; transform: rotate(8deg); }
/* 메모장 디자인 팔레트 — 개나리(노랑+핑크 줄) / 구름(하양+검정 줄) / 연꽃(분홍+녹색 줄) */
.np-gaenari { --np-bg: #FFF9DC; --np-line: #F6C4D8; --np-border: #F0E2B4; }
.np-gureum { --np-bg: #FFFFFF; --np-line: #55585E; --np-border: #E1E3E8; }
.np-yeonkkot { --np-bg: #FDE7EF; --np-line: #8CC7A6; --np-border: #F4C6D8; }

.notepad {
  background-color: var(--np-bg, #FFF9DC);
  background-image: repeating-linear-gradient(
    transparent, transparent 27px, var(--np-line, #F6C4D8) 27px, var(--np-line, #F6C4D8) 28px);
  background-attachment: local;
  border: 1px solid var(--np-border, #F0E2B4); border-radius: 10px;
  line-height: 28px; padding: 4px 12px; font-size: 13.5px;
}
.md-btn {
  margin-left: auto; font-size: 12px; padding: 5px 11px; min-height: 28px;
  display: inline-flex; align-items: center; gap: 5px;
}
#memo-label-row { position: relative; }
.md-menu { top: 34px; right: 0; }
.md-swatch {
  width: 40px; height: 25px; border-radius: 6px; flex-shrink: 0;
  border: 1px solid var(--np-border);
  background-color: var(--np-bg);
  background-image: repeating-linear-gradient(
    transparent, transparent 7px, var(--np-line) 7px, var(--np-line) 8.5px);
}
.memo-item.lined {
  background-color: var(--np-bg);
  background-image: repeating-linear-gradient(
    transparent, transparent 27px, var(--np-line) 27px, var(--np-line) 28px);
  background-position: 0 8px; /* 위 여백(12px)과 입력칸(4px)의 차이만큼 내려 글자가 줄 위에 앉게 */
  border-color: var(--np-border);
}
.memo-item.lined .memo-text { line-height: 28px; font-size: 13.5px; }
.publish-row { display: flex; justify-content: flex-end; margin-top: 8px; }
.publish-btn { min-height: 36px; padding: 0 20px; font-size: 13px; border-radius: 10px; }
#memo-list { margin-top: 14px; }
.memo-item {
  display: block; width: 100%; text-align: left; /* button 기본 가운데 정렬 방지 */
  background: rgba(255, 255, 255, .92); border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 11px; padding: 12px 14px; margin-bottom: 8px;
  cursor: pointer; box-shadow: 0 3px 10px rgba(43, 45, 49, .05);
  font-family: inherit; color: inherit;
}
.memo-item .memo-text { font-size: 13.5px; line-height: 1.7; white-space: pre-wrap; }
.memo-item .memo-date { font-size: 11px; color: var(--ink-3); margin-top: 6px; }
.memo-item .memo-acts { display: none; gap: 6px; margin-top: 10px; }
.memo-item.open .memo-acts { display: flex; }
.memo-item .me-del { color: #C74A4A; }
.memo-empty { font-size: 12px; color: var(--ink-3); text-align: center; padding: 10px 0; }

/* ── 저장한 문장 전체 보기 ───────────────────── */
.qsort { display: flex; gap: 7px; padding: 12px 16px 2px; }
.qbox {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: 0 4px 14px rgba(43, 45, 49, .06);
  transition: transform .1s ease;
}
.qbox:active { transform: scale(.99); }
.qbox .qb-text { font-family: var(--serif); font-size: 14.5px; line-height: 1.85; }
.qbox .qb-memo {
  font-size: 12.5px; color: var(--ink-2); background: var(--hl-soft);
  border-radius: 8px; padding: 7px 10px; margin-top: 9px; line-height: 1.6;
}
.qbox .qb-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 9px; }

/* ── 마이페이지 · 알림 ──────────────────────── */
.profile-row { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 46px; height: 46px; border-radius: 50%; background: var(--hl);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 18px; flex-shrink: 0;
}
.p-name { font-weight: 700; font-size: 15px; }
.p-sub { font-size: 12px; color: var(--ink-2); margin-top: 3px; line-height: 1.6; }
.profile-row .chip { margin-left: auto; flex-shrink: 0; }
.phone-url {
  margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  background: #DFF4EC; color: var(--mint-deep);
  font-family: var(--mono, monospace); font-size: 13.5px; word-break: break-all;
}
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.alert-card { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.alert-card p { font-size: 13.5px; line-height: 1.6; }
.alert-card .chip { flex-shrink: 0; }
#tabbar button { position: relative; }
.tab-dot {
  position: absolute; top: 7px; right: calc(50% - 15px);
  width: 7px; height: 7px; border-radius: 50%; background: #E24B4A;
}

/* ── 확인 대화상자 ──────────────────────────── */
.confirm-backdrop {
  position: absolute; inset: 0; z-index: 45;
  background: rgba(60, 50, 90, .32);
  display: flex; align-items: center; justify-content: center;
}
.confirm-box {
  width: min(300px, calc(100% - 56px));
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 20px; padding: 24px 20px 18px;
  text-align: center;
  box-shadow: 0 18px 44px rgba(43, 45, 49, .22);
  animation: pop-in .16s ease-out;
}
@keyframes pop-in {
  from { transform: scale(.92); opacity: .4; }
  to { transform: scale(1); opacity: 1; }
}
.confirm-ic {
  width: 46px; height: 46px; border-radius: 50%; margin: 0 auto 12px;
  background: var(--accent-soft); color: var(--accent-deep);
  display: flex; align-items: center; justify-content: center; font-size: 21px;
}
.confirm-title { font-size: 15.5px; font-weight: 700; }
.confirm-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 7px; line-height: 1.6; }
.confirm-acts { display: flex; gap: 8px; margin-top: 18px; }
.confirm-acts button { flex: 1; }

/* ── 휴지통 상세 (복원 미리보기) ─────────────── */
.td-banner {
  display: flex; align-items: center; gap: 8px;
  background: var(--accent-soft); color: var(--accent-deep);
  border-radius: 10px; padding: 10px 13px; margin-bottom: 14px;
  font-size: 12px; line-height: 1.5;
}
.td-banner i.ti { font-size: 15px; flex-shrink: 0; }
.td-sec { font-size: 12px; color: var(--ink-2); font-weight: 700; margin: 18px 2px 8px; }
.td-quote {
  background: rgba(255, 255, 255, .92); border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 14px; padding: 16px;
  box-shadow: 0 4px 14px rgba(43, 45, 49, .06);
}
.td-quote .td-text { font-size: 16px; line-height: 1.9; }
.td-quote.font-serif .td-text { font-family: var(--serif); }
.td-quote.font-sans .td-text { font-family: var(--sans); }
.td-meta { font-size: 12px; color: var(--ink-3); margin-top: 10px; }
.td-target { outline: 2px solid var(--accent); outline-offset: 2px; }
.td-dim { opacity: .72; }

/* ── 휴지통 보관 안내·메모 펼치기 ─────────────── */
.trash-notice {
  display: flex; align-items: center; gap: 7px;
  background: #FCEDF3; color: var(--accent-deep);
  border: 1px solid #F7DCE7;
  border-radius: 10px; padding: 10px 13px; margin-bottom: 14px;
  font-size: 12px; line-height: 1.5;
}
.trash-notice b { font-weight: 700; }
.trash-notice i.ti { font-size: 15px; flex-shrink: 0; }
.tq-memos { margin-top: 10px; }
.tq-memo-list { margin-top: 10px; }
.tq-memo-list .memo-item { cursor: default; margin-bottom: 6px; }

/* ── 휴지통 섹션 제목 ───────────────────────── */
.trash-head {
  font-size: 12px; color: var(--ink-2); font-weight: 700;
  margin: 6px 2px 8px;
}
.trash-head + .trash-head, .memo-item + .trash-head, .qbox + .trash-head { margin-top: 18px; }
.trash-quote { cursor: default; }
.trash-quote .memo-acts { gap: 6px; margin-top: 10px; }

/* ── 책 선택: 왼쪽 삭제 버튼 ─────────────────── */
.book-item { display: flex; align-items: center; gap: 2px; padding: 5px 12px 5px 6px; }
.book-pick { flex: 1; text-align: left; padding: 7px 6px; font-size: 14px; min-width: 0; }
.book-del {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  color: var(--ink-3); font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.book-del:hover { background: var(--accent-soft); color: var(--accent-deep); }

/* ── 마이페이지 휴지통 입구 (하단 오른쪽, 연한 연두) ── */
.trash-entry-row { display: flex; justify-content: flex-end; margin-top: 6px; }
.trash-entry {
  display: inline-flex; align-items: center; gap: 6px;
  background: #DFF4EC; color: var(--mint-deep);
  border: 1px solid #B7E4D6; border-radius: 999px;
  padding: 9px 16px; font-size: 13px; min-height: 36px;
  transition: transform .1s ease;
}
.trash-entry:active { transform: scale(.97); }
.trash-entry i.ti { font-size: 15px; }
.trash-entry b { font-weight: 700; }

/* ── 토스트 ─────────────────────────────────── */
.toast {
  position: absolute; bottom: 78px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--bg); font-size: 13px;
  padding: 10px 18px; border-radius: 999px; z-index: 40; white-space: nowrap;
  animation: toast-in .2s ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ── 글래스모피즘 테마 (피그마 시안 방향) ────── */
body {
  background:
    radial-gradient(640px 520px at 10% 6%, #FFD9B3 0%, transparent 62%),
    radial-gradient(760px 640px at 92% 16%, #CDBAF4 0%, transparent 64%),
    radial-gradient(720px 720px at 16% 96%, #BCE4D9 0%, transparent 62%),
    radial-gradient(560px 560px at 92% 92%, #FFC9DA 0%, transparent 62%),
    #F2ECE6;
  background-attachment: fixed;
}
#app {
  background: rgba(255, 255, 255, .34);
  backdrop-filter: blur(30px) saturate(1.2);
  -webkit-backdrop-filter: blur(30px) saturate(1.2);
  border-left: 1px solid rgba(255, 255, 255, .55);
  border-right: 1px solid rgba(255, 255, 255, .55);
}
.topbar, .page-head, .home-top, .stepper { background: transparent; }
.topbar { border-bottom-color: rgba(255, 255, 255, .55); }
.block, .quote-card, .tiles, .inbox-card, .book-item {
  background: rgba(255, 255, 255, .5);
  border: 1px solid rgba(255, 255, 255, .62);
  box-shadow: 0 8px 26px rgba(95, 75, 140, .1);
}
.quote-card.feature { background: rgba(255, 228, 156, .58); border-color: rgba(255, 242, 205, .85); }
.q-memo { background: rgba(255, 255, 255, .55); }
.book-item.on { background: rgba(255, 244, 214, .75); }
input, textarea { background: rgba(255, 255, 255, .55); border-color: rgba(255, 255, 255, .72); }
.chip, .btn-ghost { background: rgba(255, 255, 255, .52); border-color: rgba(255, 255, 255, .72); }
.chip.on { background: var(--hl); }
.chip.tag.on, .book-pill { background: rgba(255, 244, 214, .8); }
.re-btn { background: rgba(255, 255, 255, .5); border-color: rgba(255, 255, 255, .7); }
.stat-row .track { background: rgba(255, 255, 255, .6); }
.step .dot { background: rgba(255, 255, 255, .55); border-color: rgba(255, 255, 255, .75); }
.step.done .dot { background: rgba(255, 236, 178, .65); border-color: rgba(255, 236, 178, .9); }
.sent[contenteditable="true"] { background: rgba(255, 255, 255, .85); }
.sheet, .modal {
  background: rgba(255, 255, 255, .66);
  backdrop-filter: blur(26px) saturate(1.2);
  -webkit-backdrop-filter: blur(26px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, .7);
}
.backdrop { background: rgba(60, 50, 90, .28); }
#tabbar {
  background: rgba(255, 255, 255, .44);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-top: 1px solid rgba(255, 255, 255, .62);
}
.cam-fab {
  background: rgba(48, 42, 70, .82);
  border: 1px solid rgba(255, 255, 255, .45);
  box-shadow: 0 10px 24px rgba(70, 55, 110, .3);
}
#tabbar button.center.active .cam-fab { background: rgba(48, 42, 70, .95); }
.hl-footer { background: transparent; border-top-color: rgba(255, 255, 255, .55); }
.cover { border-color: rgba(255, 255, 255, .6); }
.key-banner, .pill { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* ── 글래스 테마 v2 — 피그마 실물(보라 액센트·원형 탭) 반영 ── */
:root { --accent: #6C3EF4; --accent-soft: #EFE9FE; --accent-deep: #5A2EE0; }
#tabbar { padding: 8px 4px 10px; }
#tabbar button { gap: 4px; font-size: 10px; }
#tabbar button > i.ti {
  width: 42px; height: 42px; border-radius: 50%; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .78);
  color: var(--accent); box-shadow: 0 4px 12px rgba(108, 62, 244, .1);
  transition: background .15s, color .15s, box-shadow .15s;
}
#tabbar button.active > i.ti {
  background: var(--accent); color: #fff;
  box-shadow: 0 6px 16px rgba(108, 62, 244, .35);
}
#tabbar button.active { color: var(--accent); }
.cam-fab {
  background: var(--accent); border-color: rgba(255, 255, 255, .6);
  box-shadow: 0 10px 24px rgba(108, 62, 244, .4);
}
#tabbar button.center.active .cam-fab { background: var(--accent-deep); }
.shutter-core { background: var(--accent); }
.btn-dark { background: var(--accent); color: #fff; }
.btn-dark:active { background: var(--accent-deep); }
.chip.on { background: var(--accent); color: #fff; }
.chip.tag.on { background: var(--accent-soft); color: var(--accent-deep); }
.book-pill { background: var(--accent-soft); color: var(--accent-deep); }
.book-pill small { color: #9E85E8; }
.step.active .dot { background: var(--accent); border-color: transparent; color: #fff; }
.step.done .dot { background: var(--accent-soft); border-color: #DCD0FB; color: var(--accent); }
.step.done .slab { color: var(--accent); }
.sline.done { background: #D8CBFA; }
.pill.dark { background: rgba(255, 255, 255, .6); color: var(--ink); }
.pill.dark.active { background: var(--accent); color: #fff; }
.q-tag { color: var(--accent-deep); background: var(--accent-soft); }
.more:hover { color: var(--accent); }
.avatar { background: var(--accent-soft); color: var(--accent-deep); }
.spinner { border-color: var(--accent-soft); border-top-color: var(--accent); }
.book-item.on { background: var(--accent-soft); border-color: #C9B4F9; }
.book-item .mark { color: var(--accent); }
input:focus, textarea:focus { border-color: #B9A3F8; }
.alert-card .chip.on { background: var(--accent); }
.tab-dot { top: 4px; right: calc(50% - 20px); border: 2px solid rgba(255,255,255,.9); width: 9px; height: 9px; }

/* ── 브랜드 테마 v3 — ShootBook 민트×핑크 (브랜드 가이드 반영) ── */
:root {
  --bg: #F7F8FA;
  --surface: #FFFFFF;
  --ink: #2B2D31;
  --ink-2: #8E9097;
  --ink-3: #B9BBC1;
  --line: #D8DADF;
  --cam-bg: #2B2D31;
  --hl: #FAD6E2;
  --hl-soft: #FCEDF3;
  --accent: #E96A9B;
  --accent-deep: #D14E82;
  --accent-soft: #FAD6E2;
  --mint: #CFEFE9;
  --mint-mid: #9EDAC8;
  --mint-deep: #45A98D;
}
body {
  background:
    radial-gradient(720px 620px at 8% 4%, #CFEFE9 0%, transparent 62%),
    radial-gradient(760px 680px at 94% 90%, #FAD6E2 0%, transparent 64%),
    radial-gradient(520px 460px at 88% 8%, #FCEDF3 0%, transparent 60%),
    radial-gradient(560px 520px at 8% 94%, #DFF4EC 0%, transparent 60%),
    #F7F8FA;
  background-attachment: fixed;
}
.quote-card.feature { background: rgba(250, 214, 226, .55); border-color: rgba(252, 231, 240, .9); }
#tabbar button > i.ti { box-shadow: 0 4px 12px rgba(43, 45, 49, .07); }
#tabbar button.active > i.ti { box-shadow: 0 6px 16px rgba(233, 106, 155, .35); }
.cam-fab { box-shadow: 0 10px 24px rgba(233, 106, 155, .38); }
.block, .quote-card, .tiles, .inbox-card, .book-item { box-shadow: 0 8px 24px rgba(43, 45, 49, .06); }
.step.done .dot { background: #DFF4EC; border-color: #B7E4D6; color: var(--mint-deep); }
.step.done .slab { color: var(--mint-deep); }
.sline.done { background: #B7E4D6; }
.stat-row .fill { background: var(--mint-mid); }
.stat-row .track { background: #EAF6F1; }
input:focus, textarea:focus { border-color: #F3B9CF; }
.book-item.on { border-color: #F3B9CF; }
.book-pill { background: #DFF4EC; color: #2E7A64; }
.book-pill small { color: #7FB8A6; }
.chip.tag.on { background: #DFF4EC; color: #2E7A64; }

/* 로고 컴포넌트 — Sh[o◉]tBook */
.logo-wrap { flex: 1; display: flex; justify-content: center; }
.logo-sb {
  display: inline-flex; align-items: baseline;
  font-weight: 600; font-size: 21px; letter-spacing: -.015em; line-height: 1;
}
.logo-sb.small { font-size: 16.5px; }
.lg-mint { color: #7FC9B1; }
.lg-pink { color: #F191B2; }
.lg-oo { position: relative; display: inline-flex; align-items: baseline; padding: 0 .14em; margin: 0 .05em; }
.lg-oo::before, .lg-oo::after {
  content: ""; position: absolute; top: -.08em; bottom: -.08em; width: .3em;
  border: .09em solid #9EDAC8;
}
.lg-oo::before { left: 0; border-right: none; border-radius: .16em 0 0 .16em; }
.lg-oo::after { right: 0; border-left: none; border-radius: 0 .16em .16em 0; }
.lg-lens {
  position: relative; width: .6em; height: .6em; margin-left: .1em;
  border: .1em solid #F191B2; border-radius: 50%;
  align-self: center; transform: translateY(.06em);
}
.lg-lens::before {
  content: ""; position: absolute; inset: 24%; border-radius: 50%; background: #F191B2;
}
.lg-lens::after {
  content: ""; position: absolute; top: -.42em; right: -.02em;
  width: .22em; height: .22em; border-radius: 50%; background: #F191B2;
}

/* ── 사진 위 드래그 선택 ─────────────────────── */
.hl-photo-wrap {
  display: flex; align-items: center; justify-content: center;
  padding: 2px 6px 6px;
}
.hl-photo-box {
  position: relative; border-radius: 12px; overflow: hidden;
  box-shadow: 0 10px 28px rgba(43, 45, 49, .2);
  background: #2B2D31;
}
#hl-photo { display: block; width: 100%; height: 100%; user-select: none; }
.word-layer {
  position: absolute; inset: 0; touch-action: none;
  cursor: crosshair; user-select: none;
}
.word { position: absolute; border-radius: 3px; }
.word.sel {
  background: rgba(233, 106, 155, .42);
  box-shadow: 0 0 0 1.5px rgba(233, 106, 155, .3);
  mix-blend-mode: multiply;
}
.scan-chip {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  background: rgba(43, 45, 49, .78); color: #fff; font-size: 12px;
  padding: 8px 15px; border-radius: 999px;
  display: flex; gap: 8px; align-items: center; white-space: nowrap;
}
.spinner.mini { width: 14px; height: 14px; border-width: 2px; }
#sheet-text { font-family: var(--serif); font-size: 14.5px; line-height: 1.8; }

/* ── 마이페이지 프로필 히어로 (투명 입체) + 취향·활동 차트 ── */
.profile-hero {
  min-height: 158px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 22px 22px;
  background: rgba(255, 255, 255, .28);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 22px;
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: 0 16px 36px rgba(43, 45, 49, .1), inset 0 1px 0 rgba(255, 255, 255, .7);
  margin-bottom: 14px;
}
.ph-left { flex: 1; min-width: 0; }
.ph-name {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 18px; font-weight: 700; cursor: pointer;
  padding: 4px 2px; border-radius: 8px;
}
.ph-name i.ti { font-size: 14px; color: var(--ink-3); }
.ph-name:hover i.ti { color: var(--accent); }
.ph-stats { font-size: 12.5px; color: var(--ink-2); margin-top: 8px; }
.ph-photo {
  position: relative; width: 84px; height: 84px; flex-shrink: 0;
  border-radius: 50%; cursor: pointer; border: none; padding: 0;
  background: rgba(255, 255, 255, .5);
  box-shadow: 0 8px 20px rgba(43, 45, 49, .12), inset 0 0 0 2px rgba(255, 255, 255, .8);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3); font-size: 26px; overflow: visible;
}
.ph-photo img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
}
.ph-photo .ph-badge {
  position: absolute; right: -2px; bottom: -2px;
  width: 27px; height: 27px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  border: 2.5px solid rgba(255, 255, 255, .95);
}
.donut-wrap { display: flex; align-items: center; gap: 18px; }
.donut-legend { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.dl-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.dl-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.dl-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-pct { color: var(--ink-2); }
.donut-center { font-size: 12px; fill: var(--ink-2); }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 86px; padding-top: 6px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.bar-n { font-size: 10px; color: var(--ink-2); }
.bar { width: 68%; max-width: 26px; border-radius: 6px 6px 3px 3px; background: var(--mint-mid); }
.bar.zero { height: 3px; background: rgba(43, 45, 49, .12); }
.bar.today { background: var(--accent); }
.bar-d { font-size: 10.5px; color: var(--ink-3); }
.bar-d.today { color: var(--accent); font-weight: 700; }

/* ── 휴지통: 전체적으로 초록빛 (목록은 연초록 박스) ── */
#view-trash { background: rgba(207, 239, 233, .38); }
#view-trash .topbar { border-bottom-color: rgba(155, 216, 197, .5); }
#view-trash .qbox.trash-quote,
#view-trash .memo-item.trash-item {
  background-color: #E6F5EF;
  background-image: none; /* 메모장 줄무늬는 복원 미리보기에서만 */
  border-color: #B7E4D6;
  box-shadow: 0 4px 14px rgba(69, 169, 141, .13);
}
#view-trash .qb-meta,
#view-trash .memo-item .memo-date { color: #6DA795; }
#view-trash .trash-head { color: var(--mint-deep); }
#view-trash .pill.dark { background: #DFF4EC; color: var(--mint-deep); }
#view-trash .empty-note { color: #6DA795; }

/* ── 문장 선택 화면: 사진을 최대한 크게 ─────────── */
#view-highlight .topbar { padding: 8px 14px 6px; }
#view-highlight .stepper { padding: 6px 16px 0; }
#view-highlight .step { width: 56px; gap: 2px; }
#view-highlight .step .dot { width: 24px; height: 24px; }
#view-highlight .step .dot i.ti { font-size: 13px; }
#view-highlight .step .slab { font-size: 9.5px; }
#view-highlight .sline { width: 14px; margin-bottom: 14px; }
#hl-caption { display: none; }          /* 책 이름은 안내문 줄에 합쳐 표시 */
#view-highlight .hint { padding: 5px 0 1px; font-size: 11.5px; }
#view-highlight .hl-photo-wrap { padding: 0 0 2px; }
#view-highlight .hl-footer { padding: 8px 12px 10px; gap: 8px; }
#view-highlight .hl-footer .btn-dark,
#view-highlight .hl-footer .btn-ghost { min-height: 42px; }
/* 선택 상자는 글자에 더 밀착 */
.word.sel { box-shadow: none; background: rgba(233, 106, 155, .38); }

/* ── 문장 선택 화면 몰입 모드: 상단 여백 제거, 사진이 화면을 채움 ── */
#view-highlight.compact { position: relative; }
#view-highlight.compact .topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 6;
  background: transparent; border-bottom: none; padding: 8px 10px;
}
#view-highlight.compact .topbar .logo-wrap { display: none; }
#view-highlight.compact .icon-btn,
#view-highlight.compact .pill.dark {
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(43, 45, 49, .12);
}
/* 진행 표시는 현재 단계 아이콘 하나만 반투명하게 */
#view-highlight.compact .stepper {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  z-index: 6; padding: 0; background: transparent;
}
#view-highlight.compact .stepper .step:not(.active),
#view-highlight.compact .stepper .sline { display: none; }
#view-highlight.compact .stepper .step.active { width: auto; gap: 0; }
#view-highlight.compact .stepper .step.active .slab { display: none; }
#view-highlight.compact .stepper .step.active .dot {
  width: 34px; height: 34px;
  background: rgba(233, 106, 155, .82); color: #fff; border-color: transparent;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(233, 106, 155, .3);
}
#view-highlight.compact .stepper .step.active .dot i.ti { font-size: 17px; }
#view-highlight.compact .hint { display: none; }
#view-highlight.compact #hl-body { padding-top: 0; }
#view-highlight.compact .hl-photo-wrap { padding: 0; height: 100%; }
/* 글자를 고르는 동안에는 하단 탭바를 숨긴다 — 아래 버튼과 겹치지 않게 */
body.hl-immersive #tabbar { display: none; }
body.hl-immersive #view-highlight .hl-footer {
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top-color: rgba(255, 255, 255, .6);
  padding: 10px 12px 14px;
}