/* ─────────────────────────────────────────────────────────────
   문장모음 — 종이와 먹
   미색 종이 · 명조 · hairline 선 · 조용한 여백
   ───────────────────────────────────────────────────────────── */
:root {
  --paper:  #F6F1E5;
  --card:   #FCF9F1;
  --ink:    #37322A;
  --brown:  #8B5A3C;
  --line:   #E3DAC6;
  --muted:  #A2947B;
  --font:   "Noto Serif KR", "Noto Serif CJK KR", "AppleMyungjo", "Nanum Myeongjo", serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--paper);
}
html, body {
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
  touch-action: pan-x pan-y; /* 핀치 줌 방지 */
}

/* 종이결 — 아주 옅은 노이즈를 배경에 깐다 (이미지 파일 없이 SVG) */
body {
  max-width: 560px; margin: 0 auto; min-height: 100vh; position: relative;
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.38 0 0 0 0 0.27 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23p)'/%3E%3C/svg%3E");
}

/* ── 헤더 ─────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: stretch;
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
  background: transparent;
}
.topbar .mark { display: none; }
.topbar .title {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 14px 20px 12px; font-weight: 700; letter-spacing: .3em;
  font-size: 20px; min-width: 0;
}
.topbar .title strong { white-space: nowrap; font-weight: 700; }
.topbar .title small {
  display: block; font-size: 10px; letter-spacing: .22em; color: var(--muted);
  font-weight: 400; white-space: nowrap; margin-top: 4px; text-transform: uppercase;
}

/* ── 뷰 ──────────────────────────────────────────────── */
main { padding: 20px 16px calc(108px + env(safe-area-inset-bottom)); }
.view { display: none; }
.view.active { display: block; animation: pop .18s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.section-label {
  font-size: 12px; letter-spacing: .32em; text-transform: uppercase;
  font-weight: 400; margin-bottom: 16px; display: inline-block;
  color: var(--muted); padding: 0;
}

/* ── 공지사항 배너 ─────────────────────────────────────── */
.notice-banner {
  display: flex; align-items: baseline; gap: 10px;
  border: 1px solid var(--line); border-left: 3px solid var(--brown);
  background: var(--card); border-radius: 4px;
  padding: 10px 14px; margin-bottom: 20px;
  font-size: 14px; line-height: 1.5; color: var(--ink);
}
.notice-banner .notice-mark {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--brown); white-space: nowrap; font-weight: 600;
}

/* ── 카드 ─────────────────────────────────────────────── */
.card {
  border: 1px solid var(--line);
  background: var(--card); margin-bottom: 20px;
  border-radius: 4px; overflow: hidden;
}
.card .body { padding: 16px; }
.card .bar { height: 2px; border-bottom: none; background: var(--line); }
.bar.red, .bar.blue, .bar.yellow { background: var(--line); }

.sentence-text { font-size: 17px; line-height: 1.9; word-break: keep-all; }
.meta {
  margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; flex-wrap: wrap;
}
.tag {
  border: none; padding: 2px 0; letter-spacing: .02em;
}
.tag.book { background: none; color: var(--brown); }
.tag.page { background: none; color: var(--muted); }
.meta .acts { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.meta .del, .meta .act {
  border: 1px solid var(--line); background: transparent;
  color: var(--muted); height: 30px; cursor: pointer; line-height: 1;
  font-family: var(--font); border-radius: 3px;
}
.meta .del { width: 30px; }
.meta .act { padding: 0 10px; font-size: 13px; letter-spacing: .04em; }

/* ── 폼 / 버튼 ────────────────────────────────────────── */
label.fld { display: block; margin-bottom: 16px; }
label.fld span {
  display: block; font-size: 13px; letter-spacing: .12em;
  color: var(--muted); margin-bottom: 8px;
}
input[type=text], input[type=password], textarea {
  width: 100%; font-family: var(--font); font-size: 17px;
  border: 1px solid var(--line); background: #FFFDF6;
  padding: 13px; outline: none; border-radius: 3px; color: var(--ink);
}
input[type=text]:focus, input[type=password]:focus, textarea:focus { border-color: var(--brown); }
textarea { min-height: 360px; resize: vertical; line-height: 1.9; }
.counter { text-align: right; font-size: 12px; color: var(--muted); letter-spacing: .08em; margin-top: 6px; }
.counter.warn { color: var(--brown); }

.btn {
  display: block; width: 100%; font-family: var(--font);
  font-weight: 600; letter-spacing: .1em;
  font-size: 16px; padding: 15px; cursor: pointer;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  border-radius: 3px;
}
.btn:active { opacity: .8; }
.btn.red   { background: var(--brown); border-color: var(--brown); color: #fff; }
.btn.kakao { background: #FEE500; border-color: #FEE500; color: #191919; text-decoration: none; text-align: center; }
.btn.blue  { background: var(--brown); border-color: var(--brown); color: #fff; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--muted); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn.small { padding: 12px 10px; font-size: 14px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── 촬영 ─────────────────────────────────────────────── */
.capture-zone {
  border: 1px solid var(--line); aspect-ratio: 4/3;
  display: flex; align-items: center; justify-content: center;
  text-align: center; background: #FFFDF6; position: relative; overflow: hidden;
  border-radius: 3px; margin: 0;
}
.capture-zone.editing { aspect-ratio: auto; min-height: 220px; background: #221E18; border: none; border-radius: 0; }
.capture-zone canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; }
.capture-zone canvas[hidden] { display: none; }
/* 사진 편집 모드 — 장식 여백을 걷어내고 사진을 화면 폭에 꽉 채운다 */
.card.photo { margin-left: -16px; margin-right: -16px; border-left: none; border-right: none; border-radius: 0; }
.card.photo .body { padding: 0; }
.card.photo .capture-zone.editing { border: none; }
.capture-zone .ph { padding: 28px 24px; width: 100%; }
.capture-zone .ph .orn {
  font-size: 34px; line-height: 1; color: #C9BCA2; margin-bottom: 10px;
  letter-spacing: .2em;
}
.capture-zone .ph p { font-weight: 600; letter-spacing: .04em; font-size: 18px; word-break: keep-all; }
.capture-zone .ph small { display: block; margin-top: 8px; font-size: 14px; color: var(--muted); word-break: keep-all; }
.capture-zone .ph .ph-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 20px; max-width: 300px; margin-left: auto; margin-right: auto;
}
.crop-help {
  margin: 2px 0 16px; padding: 12px 14px; border: 1px solid var(--line);
  background: var(--card); font-size: 14px; line-height: 1.7; color: var(--ink);
  border-radius: 3px;
}
.crop-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.crop-actions .btn { padding-left: 6px; padding-right: 6px; letter-spacing: .04em; }
.action-row { margin-bottom: 18px; }

/* ── 관리자 ───────────────────────────────────────────── */
.admin-panel { margin-top: 26px; }
.admin-sentence {
  border: 1px solid var(--line); background: var(--card); padding: 14px;
  margin-bottom: 10px; border-radius: 3px;
}
.admin-sentence .who {
  display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px;
  font-size: 12px; color: var(--muted); letter-spacing: .04em;
}
.admin-sentence .when { white-space: nowrap; }
.admin-sentence .text { font-size: 15px; line-height: 1.8; }
.admin-sentence .source { margin-top: 8px; font-size: 12px; color: var(--brown); }

/* ── 통계 ─────────────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 8px; }
.stat-box {
  border: 1px solid var(--line); padding: 18px 16px; text-align: left;
  background: var(--card); border-radius: 4px;
}
.stat-box.red, .stat-box.blue { background: var(--card); color: var(--ink); }
.stat-box .n { font-size: 40px; font-weight: 700; line-height: 1.2; color: var(--brown); }
.stat-box .l { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; margin-top: 8px; color: var(--muted); }
.book-rank { list-style: none; }
.book-rank li {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px;
  border: 1px solid var(--line); margin-bottom: 10px; background: var(--card);
  border-radius: 3px;
}
.book-rank li .cnt {
  margin-left: auto; background: transparent; border: 1px solid var(--line);
  color: var(--brown); padding: 2px 10px; border-radius: 3px;
}

/* ── 책장 ─────────────────────────────────────────────── */
.shelf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 14px; }
.shelf-book {
  border: 0; background: none; padding: 0; text-align: left;
  font-family: var(--font); color: var(--ink); cursor: pointer;
}
.shelf-book .cover, .shelf-detail-head .cover {
  aspect-ratio: 2 / 3; border: 1px solid var(--line); border-radius: 3px;
  overflow: hidden; background: var(--card); box-shadow: 0 1px 3px rgba(55, 50, 42, .12);
}
.shelf-book .cover img, .shelf-detail-head .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shelf-book .cover.pending { opacity: .55; }
.cover-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  padding: 10px; text-align: center;
}
.cover-fallback span {
  font-size: 12px; line-height: 1.6; word-break: keep-all; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.shelf-book .cap { margin-top: 7px; display: flex; flex-direction: column; gap: 2px; }
.shelf-book .cap .t {
  font-size: 12px; line-height: 1.45; word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.shelf-book .cap .c { font-size: 11px; color: var(--muted); }
#shelfBack { display: inline-block; width: auto; padding: 8px 16px; }
.cover-change { width: auto; padding: 7px 12px; margin-top: 6px; align-self: flex-start; }
.shelf-detail-head { display: flex; gap: 14px; align-items: flex-start; margin: 16px 0 20px; }
.shelf-detail-head .cover { width: 72px; flex: none; }
.shelf-detail-head .info { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
.shelf-detail-head .info strong { font-size: 16px; line-height: 1.5; word-break: keep-all; }
.shelf-detail-head .info .a, .shelf-detail-head .info .c { font-size: 12px; color: var(--muted); }

/* ── 책 선택 시트 ─────────────────────────────────────── */
.title-row { display: flex; gap: 8px; align-items: stretch; }
.title-row input { flex: 1; min-width: 0; }
.title-row .btn { width: auto; white-space: nowrap; }
.sheet {
  position: fixed; inset: 0; z-index: 60; background: rgba(55, 50, 42, .45);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet[hidden] { display: none; }
.sheet .panel {
  width: 100%; max-width: 560px; max-height: 80vh; overflow-y: auto;
  background: var(--paper); border-top: 1px solid var(--line);
  border-radius: 10px 10px 0 0;
  padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
}
.sheet-search { display: flex; gap: 10px; margin-bottom: 16px; }
.sheet-search input { flex: 1; min-width: 0; }
.sheet-search .btn { width: auto; white-space: nowrap; }
.sheet-close { width: auto; display: inline-block; margin-top: 16px; padding: 8px 16px; }
/* 수정 시트 위에서 책 선택 시트를 열 수 있어야 한다 */
#bookSheet { z-index: 70; }
.sheet-actions { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; }
.edit-text { min-height: 200px; }

/* ── 오늘 ─────────────────────────────────────────────── */
.today-card {
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  padding: 36px 26px 26px; position: relative; border-radius: 4px;
}
.today-card::before {
  content: "\201C"; display: block; font-size: 44px; line-height: .6;
  color: #C9BCA2; margin-bottom: 14px;
}
.today-card .quote { font-size: 21px; line-height: 1.95; font-weight: 500; word-break: keep-all; }
.today-card .src { margin-top: 24px; color: var(--brown); letter-spacing: .04em; border-top: 1px solid var(--line); padding-top: 14px; font-size: 14px; }
.today-card .circle { display: none; }

/* ── 하단 탭 ──────────────────────────────────────────── */
.tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 560px; display: grid; grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line); background: var(--paper);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar button {
  font-family: var(--font); background: transparent; border: none;
  padding: 12px 4px 10px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 12px; letter-spacing: .1em; color: var(--muted);
}
.tabbar button .ico { width: 23px; height: 23px; }
.tabbar button.active { color: var(--ink); box-shadow: inset 0 2px 0 var(--brown); background: var(--card); }
.tabbar button.active .ico [data-fill] { fill: var(--brown); }

/* ── 토스트 / 빈 상태 ─────────────────────────────────── */
.toast {
  position: fixed; bottom: calc(100px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: var(--paper); padding: 12px 22px;
  border-radius: 3px; opacity: 0;
  /* 시트(60·70) 위에 떠야 시트 안에서 띄운 알림이 보인다 */
  pointer-events: none; transition: .25s; letter-spacing: .04em; z-index: 80; white-space: nowrap;
  font-size: 14px;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.empty { text-align: center; padding: 48px 20px; color: var(--muted); letter-spacing: .04em; line-height: 1.8; }

/* ── 로그인 게이트 ────────────────────────────────────── */
.gate {
  position: fixed; inset: 0; background: var(--paper); z-index: 100;
  display: none; flex-direction: column; align-items: center; justify-content: center; padding: 24px;
}
.gate.show { display: flex; }
.gate .box { width: 100%; max-width: 320px; text-align: center; }
.gate h1 { font-size: 34px; letter-spacing: .3em; margin-bottom: 16px; font-weight: 700; line-height: 1.5; }
.gate-sub { font-size: 15px; color: var(--muted); margin-bottom: 28px; word-break: keep-all; line-height: 1.8; }

.topbar .logout {
  font-family: var(--font); font-size: 12px;
  background: none; border: none; border-left: 1px solid var(--line);
  padding: 0 14px; cursor: pointer; color: var(--muted); white-space: nowrap;
}
.topbar .logout #nick { color: var(--ink); }

.spinner {
  width: 22px; height: 22px; border: 2px solid var(--paper); border-top-color: transparent;
  border-radius: 50%; display: inline-block; vertical-align: middle; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 여러 장 촬영 — 사진 목록 ─────────────────────────────────────── */
.page-strip {
  display: flex; gap: 8px; overflow-x: auto; margin-bottom: 14px;
  padding-bottom: 4px; -webkit-overflow-scrolling: touch;
}
.page-strip[hidden] { display: none; }
.page-thumb {
  position: relative; flex: none; width: 62px; height: 62px;
  border: 1px solid var(--line); border-radius: 3px; overflow: hidden;
  background: var(--card); cursor: pointer;
}
.page-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-thumb.active { border-color: var(--brown); box-shadow: 0 0 0 1px var(--brown); }
.page-thumb .n {
  position: absolute; left: 0; bottom: 0; padding: 1px 6px;
  background: rgba(34, 30, 24, .72); color: #fff;
  font-size: 11px; line-height: 1.6; border-radius: 0 3px 0 0;
  font-variant-numeric: tabular-nums;
}
.page-thumb .x {
  position: absolute; right: 3px; top: 3px; width: 19px; height: 19px; padding: 0;
  border: none; border-radius: 50%; background: rgba(34, 30, 24, .72); color: #fff;
  font-size: 13px; line-height: 1; cursor: pointer; font-family: var(--font);
}