/* 테오도르의 수첩(2026-09-30) — 현관의 띠·작은 판과 계정 화면의 수첩 칸이 같이 쓴다. 두 화면 모두 어두운 판이라 색은 여기서 정한다.
   집사의 수첩이라 금빛 테두리 · 종이 같은 따뜻한 글씨. 편지는 한 톤 밝은 판. */
.nb-dialog { box-sizing: border-box; width: min(460px, calc(100% - 24px)); max-height: calc(100svh - 24px); overflow-y: auto; margin: auto; padding: 18px 18px 14px;
  border: 1px solid #b6975c; border-radius: 18px; color: #f2e9d4; background: #111a30; box-shadow: 0 18px 60px #0008; font: 15px/1.65 system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; }
.nb-dialog::backdrop { background: #020511c0; }
.nb-dialog h2, .nb-section h2 { margin: 2px 0 6px; font: 400 20px/1.4 'MaruBuri', serif; color: #fff4dc; text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere; }
.nb-by { margin: 0; color: #e3c07c; font-size: 13px; letter-spacing: .04em; }
.nb-lead { margin: 0 0 12px; color: #c9c2ae; font-size: 13px; line-height: 1.7; word-break: keep-all; overflow-wrap: anywhere; }
.nb-item { margin: 10px 0; padding: 12px 14px; border: 1px solid #e3c07c55; border-left: 3px solid #e3c07c; border-radius: 12px; background: #19203a; overflow-wrap: anywhere; }
.nb-item[data-past="true"] { border-left-color: #8d93a8; opacity: .95; }
.nb-item-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.nb-what { font-size: 18px; color: #fff4dc; }
/* 날짜는 풀이보다 한눈에 — 풀이(13px)와 같은 크기면 눈이 안 간다(2026-09-30 사용자). */
.nb-when { color: #e3c07c; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.nb-tags { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.nb-tag { padding: 1px 8px; border: 1px solid #8fb0c9; border-radius: 999px; color: #cfe3f2; font-size: 11px; line-height: 1.6; }
.nb-facts { margin: 8px 0 0; padding: 8px 10px 8px 26px; border-radius: 10px; background: #0f1628; color: #d8d2c1; font-size: 13px; line-height: 1.7; }
.nb-facts li + li { margin-top: 2px; }
/* 귀인 날 — 그날의 글자 맨 위에 파랗고 굵게(2026-09-30 사용자). */
.nb-benefactor { display: flex; gap: 8px; align-items: baseline; margin: 10px 0 0; padding: 9px 12px; border: 1px solid #6fb8ff; border-radius: 10px;
  background: linear-gradient(135deg, #16335a, #132744); color: #9fd4ff; font-size: 15px; font-weight: 800; line-height: 1.55; overflow-wrap: anywhere; }
.nb-benefactor-mark { flex: none; color: #d6ecff; }
.nb-benefactor + .nb-facts { margin-top: 6px; }
.nb-ask, .nb-outcome-text { margin: 10px 0 0; color: #ece5d4; font-size: 14px; line-height: 1.7; word-break: keep-all; overflow-wrap: anywhere; }
.nb-speaker { display: block; color: #e3c07c; font-size: 12px; letter-spacing: .04em; }
.nb-letter-line, .nb-channel { margin: 10px 0 0; color: #d7dff0; font-size: 13px; line-height: 1.7; }
.nb-letter-line.nb-off { color: #aeb4c4; }
.nb-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.nb-actions.nb-minor { margin-top: 6px; }
/* 「맞습니다 · 편지 받기」와 「날짜 고치기」는 한 줄에 둘(2026-09-30 사용자 — 세로로 단추가 너무 많았다). */
.nb-actions.nb-pair { display: grid; grid-template-columns: 1fr 1fr; }
.nb-actions.nb-pair .nb-button { padding: 4px 8px; line-height: 1.35; white-space: pre-line; }
.nb-actions.nb-pair .nb-button[hidden] { display: none; }
.nb-actions.nb-pair:has(> .nb-button[hidden]) { grid-template-columns: 1fr; }
.nb-actions.nb-foot { justify-content: space-between; align-items: center; margin-top: 14px; }
.nb-button { min-height: 44px; padding: 0 16px; border: 0; border-radius: 10px; background: #e3c07c; color: #182030; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.nb-button.nb-soft { background: #cfe3f2; }
.nb-button.nb-quiet { min-height: 40px; padding: 0 10px; border: 1px solid #ffffff2e; background: transparent; color: #c6c6d3; font-weight: 400; }
.nb-button:disabled { opacity: .55; cursor: wait; }
.nb-button:focus-visible, .nb-link:focus-visible, .nb-dialog input:focus-visible, .nb-section input:focus-visible { outline: 2px solid #eee0b9; outline-offset: 2px; }
.nb-link { color: #e3c07c; font-size: 14px; font-weight: 700; text-decoration: none; }
.nb-date, .nb-add-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.nb-date[hidden] { display: none; }
.nb-dialog input, .nb-section input { min-height: 44px; min-width: 0; padding: 0 10px; border: 1px solid #4a557a; border-radius: 10px; background: #0d1322; color: #f4ead3; font: inherit; font-size: 15px; color-scheme: dark; }
.nb-date input { flex: 1 1 150px; }
.nb-outcome { margin-top: 8px; }
.nb-outcome input { width: 100%; box-sizing: border-box; }
.nb-status { min-height: 1em; margin: 8px 0 0; color: #cfe3f2; font-size: 13px; }
.nb-status:empty { display: none; }
.nb-status.nb-error { color: #ffb4a8; }
.nb-done, .nb-more, .nb-empty { margin: 8px 0; color: #c9c2ae; font-size: 13px; line-height: 1.7; }
.nb-one { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #e3c07c1f; color: #fff4dc; font-size: 14px; line-height: 1.7; }
.nb-one b { display: block; color: #e3c07c; font-size: 12px; letter-spacing: .04em; }
.nb-letter { width: min(520px, calc(100% - 24px)); background: #151d33; }
.nb-letter-body { margin: 0 0 12px; color: #f2ecdf; font: 400 16px/1.9 'MaruBuri', serif; word-break: keep-all; overflow-wrap: anywhere; }
html[lang="ja"] :is(.nb-dialog, .nb-section) :is(h2, p, .nb-letter-body) { word-break: normal; line-break: strict; }

/* 현관의 띠 — 지난 점사 띠(.survey-nudge)와 같은 꼴에 여는 쪽이 단추. 낮은 화면에서는 이 띠 하나만 세운다(한 화면을 지킨다). */
.notebook-nudge #notebook-nudge-open { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px;
  padding: 6px 4px 6px 14px; border: 0; border-radius: 12px 0 0 12px; background: transparent; color: var(--ink, #f4ead3); font: inherit; font-size: 14px; line-height: 1.4; text-align: left; cursor: pointer; }
.notebook-nudge #notebook-nudge-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notebook-nudge { border-color: #e3c07c; background: linear-gradient(135deg, #232a45, #19203a); }
@media (max-height: 759px), (max-width: 359px) { .foyer:has(> #notebook-nudge:not([hidden])) > :is(#survey-nudge, #plan-nudge) { display: none; } }
@media (min-height: 760px) and (min-width: 360px) { .foyer:has(> #notebook-nudge:not([hidden])) > #plan-nudge { display: none; } }

/* 계정 화면의 수첩 칸 — 귀인 날 카드와 같은 결의 금빛 판 */
.nb-section { margin: 0 0 18px; padding: 16px 18px; border: 1px solid #c6b58c; border-radius: 12px; background: linear-gradient(135deg, #1f2238, #171b2c); color: #ece7dc; }
.nb-section[hidden] { display: none; }
.nb-section h3 { margin: 16px 0 4px; color: #e3c07c; font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.nb-letters { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.nb-letters .nb-button { width: 100%; text-align: left; }
.nb-add { margin-top: 14px; }
.nb-add summary { min-height: 44px; display: flex; align-items: center; color: #e3c07c; cursor: pointer; font-size: 14px; }
.nb-add-form input[type="text"] { flex: 2 1 160px; }
.nb-add-form input[type="date"] { flex: 1 1 140px; }
.nb-hint { margin: 0; color: #aeb4c4; font-size: 12px; line-height: 1.7; }
@media (max-width: 420px) { .nb-actions .nb-button { flex: 1 1 auto; } .nb-dialog { padding: 16px 14px 12px; } }

/* Only an empty, settled notebook receives the decorative still life. */
.nb-empty-state{display:flex;flex-direction:column;align-items:center;gap:4px;margin:14px 0 18px;text-align:center}
.nb-empty-art{display:block;width:210px;max-width:100%;height:auto;object-fit:contain}
.nb-empty-state .nb-empty{max-width:420px;margin:0}
@media(max-width:400px){.nb-empty-art{width:180px}}