@font-face {
  font-family: "Noto Serif KR";
  src: url("fonts/NotoSerifKR-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* ---------- tokens: 두 모드는 값만 다르고 구조·동작은 같다 ---------- */
:root {
  --xs: 4px; --sm: 6px; --md: 10px; --lg: 14px; --xl: 20px; --xxl: 28px;
  --serif: "Noto Serif KR", "Batang", "Noto Serif", "PT Serif", Georgia, serif;
  --col: 600px;
  --text-size: 12pt;
  --text-lh: 1.75;
  --pulse: 4s;
  --motion-slow: 1000ms;
  --motion-normal: 650ms;
  --motion-fast: 350ms;
  --page-ms: var(--motion-slow);
  --motion-ease: cubic-bezier(.25, .46, .45, .94);
  --slide-gap: 56px;
  --bar-h: 52px;
  --row-h: 44px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --top-gap: 0px; --bottom-gap: 0px; --candle-gap: 20px;
  --edge-top: calc(var(--safe-top) + var(--top-gap));
  --edge-bottom: calc(var(--safe-bottom) + var(--bottom-gap));
}
:root, :root[data-theme="dark"] {
  --bg: #1A1A1C;
  --line: #2C2C2E;
  --line-soft: #252527;
  --text: #F2F2F7;
  --text-2: #C8C8CD;
  --muted: #8E8E93;
  --sunk: #85858A;
  --accent: #C49A3C;
  --accent-hover: #D8AE56;
  --accent-dim: #3A2C14;
  --entry: #A8843A;
  --tag: #B39657;
  --glow: 212 135 60;
  --g-entry-1: .06; --g-entry-2: .03;
  --g-sel-1: .22; --g-sel-2: .10;
  --g-today: .05;
  --cg1: .03; --cg2: .06; --cg3: .10;
  --mark-line: var(--accent-dim);
  color-scheme: dark;
}
:root[data-theme="paper"] {
  --bg: #F4EFE4;
  --line: #DDD5C3;
  --line-soft: #E7E0D0;
  --text: #2B2722;
  --text-2: #4A443B;
  --muted: #6B6358;
  --sunk: #6F675B;
  --accent: #8A5C0C;
  --accent-hover: #A06D14;
  --accent-dim: #E2D3AE;
  --entry: #8C6414;
  --tag: #8A6A2A;
  --glow: 190 112 30;
  --g-entry-1: .16; --g-entry-2: .08;
  --g-sel-1: .34; --g-sel-2: .16;
  --g-today: .10;
  --cg1: .07; --cg2: .13; --cg3: .20;
  --mark-line: #D2BE8C;
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; background: var(--bg); color: var(--text); overflow: hidden; }
body { font: 11pt/1.4 var(--serif); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
button:focus-visible, input:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent-dim); color: var(--text); }
[hidden] { display: none !important; }

#app { position: fixed; inset: 0; overflow: hidden; }
#pages { position: absolute; inset: 0; overflow: hidden; }

/* ---------- 세로로 순환하는 세 페이지: 위로 달력 → 읽기·쓰기 → 검색 → 달력 ---------- */
.pg {
  position: absolute; inset: 0; display: flex; justify-content: center;
  background: var(--bg);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  touch-action: none;
  transform: translateY(calc(var(--d, 0) * 100% + var(--drag, 0px)));
  transition: transform var(--page-ms) var(--motion-ease);
}
.pg.jump { transition: none; } /* 반대편으로 건너가는 화면은 보이지 않을 때 옮긴다 */
#app.dragging .pg { transition: none; }
.col {
  width: min(100%, var(--col)); height: 100%; min-height: 0;
  display: flex; flex-direction: column;
  padding: var(--edge-top) calc(var(--xl) + env(safe-area-inset-right)) var(--edge-bottom) calc(var(--xl) + env(safe-area-inset-left));
}

.bar { flex: none; display: flex; align-items: center; justify-content: space-between; height: var(--bar-h); margin: 0 calc(var(--md) * -1); }
.ghost { width: 44px; height: 44px; display: grid; place-items: center; color: var(--muted); }
.ghost svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.ghost:hover { color: var(--accent); }
.bar-date { flex: 1; min-width: 0; padding-left: var(--xs); font-size: 10pt; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#read-date { padding-left: var(--md); } /* 화살표 없이 본문 왼쪽 선에 맞춘다. */

/* ---------- 달력 ---------- */
.cal-head { flex: none; display: flex; align-items: center; height: 48px; font-size: 11pt; }
.cal-head span { flex: 1; text-align: center; }
.cal-head button { width: 44px; height: 48px; color: var(--text-2); text-align: center; }
.cal-head button:hover { color: var(--accent); }
.dow, .days { --cell: calc(min(100vw, var(--col)) / 7 - var(--xl) * 2 / 7); display: grid; grid-template-columns: repeat(7, 1fr); }
.dow span { height: 20px; line-height: 18px; text-align: center; font-size: 8pt; color: var(--muted); }
.days { grid-auto-rows: var(--row-h); }
.days button { position: relative; height: var(--row-h); font-size: 11pt; color: var(--sunk); text-align: center; }
.days button::before { content: ""; position: absolute; inset: 0; margin: auto; border-radius: 50%; pointer-events: none; }
.days .blank { pointer-events: none; }
.days .today { color: var(--muted); }
.days .today:not(.entry)::before { background: none; }
/* 글이 있는 날: 불빛 */
.days .entry { color: var(--entry); text-shadow: 0 0 1px rgb(var(--glow) / .08), 0 0 2px rgb(var(--glow) / .08); }
.days .entry::before { width: 28px; height: 28px; background: radial-gradient(circle, rgb(var(--glow) / var(--g-entry-1)) 0 10px, rgb(var(--glow) / var(--g-entry-2)) 10px 14px, transparent 14px); }
/* 선택한 날: 글자색(글 유무와 별개) */
.days .sel { color: var(--accent); }
.days .sel.entry { text-shadow: 0 0 1px rgb(var(--glow) / .14), 0 0 2px rgb(var(--glow) / .14); }
.days .sel.entry::before {
  width: 34px; height: 34px;
  background: radial-gradient(circle, rgb(var(--glow) / var(--g-sel-1)) 0 10px, rgb(var(--glow) / var(--g-sel-2)) 10px 70%, transparent 71%);
  animation: flicker var(--pulse) ease-in-out infinite alternate;
}
@keyframes flicker { from { opacity: .5; transform: scale(.9); } to { opacity: 1; transform: scale(1.05); } }

.preview {
  flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--md);
  margin-top: var(--lg); padding: var(--lg) 0 0; border-top: 1px solid var(--line);
  overflow: hidden; width: 100%;
}
.preview:disabled { cursor: default; }
.pv-date { flex: none; font-size: 9pt; color: var(--muted); }
.pv-text {
  flex: 1; min-height: 0; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: 10.5pt; line-height: 1.7; color: var(--text-2);
  -webkit-mask-image: linear-gradient(#000 calc(100% - 120px), transparent); mask-image: linear-gradient(#000 calc(100% - 120px), transparent);
}
.pv-text.empty { color: var(--sunk); font-size: 9.5pt; -webkit-mask-image: none; mask-image: none; }
.tag { color: var(--tag); }

/* ---------- 검색 ---------- */
.q-row { flex: none; display: flex; align-items: center; gap: var(--md); border-bottom: 1px solid var(--line); color: var(--muted); }
.q-row svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
#q {
  flex: 1; min-width: 0; height: 44px; border: 0; border-radius: 0; background: transparent; outline: none;
  color: var(--text); font: 12pt var(--serif); -webkit-appearance: none; appearance: none; -webkit-user-select: text; user-select: text;
}
#q:focus { border-bottom-color: var(--line); }
#q::-webkit-search-cancel-button { -webkit-appearance: none; }
.tags { flex: none; display: flex; flex-wrap: wrap; gap: 0 var(--xs); align-content: flex-start; min-height: 88px; padding: var(--md) 0; margin: 0 calc(var(--md) * -1); }
.tags button { min-height: 44px; padding: 0 var(--md); display: inline-flex; align-items: center; font-size: 9.5pt; color: var(--muted); }
.tags button:hover { color: var(--text-2); }
.tags button[aria-pressed="true"] { color: var(--accent); }
.results { flex: 1; min-height: 0; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; border-top: 1px solid var(--line); padding-bottom: var(--xxl); scrollbar-width: thin; scrollbar-color: transparent transparent; transition: scrollbar-color 500ms; }
.results.scrolling { scrollbar-color: var(--muted) transparent; }
.results button { display: flex; align-items: center; gap: var(--lg); width: 100%; height: 52px; border-bottom: 1px solid var(--line-soft); }
.results .d { flex: none; width: 5.6em; font-size: 9pt; color: var(--muted); font-variant-numeric: tabular-nums; }
.results .t { flex: 1; min-width: 0; font-size: 10.5pt; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.results button:hover .t { color: var(--text); }
.results mark { background: none; color: var(--accent); }
.results .none { padding: var(--xxl) 0; text-align: center; font-size: 9.5pt; color: var(--sunk); }

/* ---------- 읽기·쓰기(가운데 화면) ---------- */
/* 설정만 위에 덮이는 층 */
.layer {
  position: absolute; inset: 0; display: flex; justify-content: center; background: var(--bg); z-index: 5;
  opacity: 0; visibility: hidden; transition: opacity 220ms ease, visibility 0s linear 220ms;
}
.layer.on { opacity: 1; visibility: visible; transition: opacity 220ms ease; }
.body-wrap { position: relative; flex: 1; min-height: 0; }
.text {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow-y: auto; padding: var(--md) 0 calc(120px + env(safe-area-inset-bottom));
  border: 0; outline: none; resize: none; background: transparent; color: var(--text);
  font: var(--text-size)/var(--text-lh) var(--serif); white-space: pre-wrap; overflow-wrap: anywhere;
  -webkit-user-select: text; user-select: text; touch-action: pan-y; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: transparent transparent; transition: scrollbar-color 500ms;
}
textarea.text { caret-color: var(--accent); }
.text.scrolling { scrollbar-color: var(--muted) transparent; }
.text.empty { color: var(--sunk); font-size: 10pt; }
.text:focus-visible { outline: none; }

/* ---------- 설정 ---------- */
.settings { flex: 1; min-height: 0; overflow-y: auto; padding: var(--lg) 0 var(--xxl); touch-action: pan-y; }
.settings h2 { font-size: 8.5pt; font-weight: 400; color: var(--muted); margin: var(--xxl) 0 var(--sm); letter-spacing: .04em; }
.settings h2:first-child { margin-top: 0; }
.settings .faint, .settings .faint small { color: var(--sunk); }
.row { display: flex; align-items: center; justify-content: space-between; gap: var(--lg); width: 100%; min-height: 48px; border-bottom: 1px solid var(--line-soft); font-size: 10.5pt; color: var(--text-2); }
.row small { font-size: 8.5pt; color: var(--muted); text-align: right; }
.row:hover:not(:disabled) { color: var(--accent); }
.row:disabled { color: var(--sunk); cursor: default; }
.seg { display: flex; border-bottom: 1px solid var(--line-soft); }
.seg button { flex: 1; min-height: 48px; text-align: center; font-size: 10.5pt; color: var(--muted); }
.seg button[aria-checked="true"] { color: var(--accent); }
/* 상태 영역은 미리 확보해 아래 항목을 밀지 않는다 */
.status { height: 108px; padding: var(--md) 0; font-size: 9.5pt; line-height: 1.6; color: var(--text-2); overflow: hidden; }
.status .warn { color: var(--accent); }
.status .acts { display: flex; gap: var(--xl); margin-top: var(--md); }
.status .acts button { min-height: 44px; color: var(--muted); }
.status .acts button.go { color: var(--accent); }
.status .acts button:hover { color: var(--accent-hover); }

/* ---------- 촛불: 달력·읽기·쓰기에서 같은 자리 ---------- */
#candle {
  position: absolute; z-index: 12; width: 64px; height: 64px; touch-action: manipulation;
  right: max(calc(var(--xl) + env(safe-area-inset-right)), calc((100vw - var(--col)) / 2 + var(--xl)));
  bottom: calc(var(--candle-gap) + var(--safe-bottom));
  opacity: 1; transition: opacity 900ms cubic-bezier(.4, 0, .2, 1);
}
#candle svg { width: 64px; height: 64px; overflow: visible; }
#candle.writing { opacity: .42; }
#candle.gone { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 500ms ease, visibility 0s linear 500ms; }
#candle .glow ellipse { fill: rgb(var(--glow)); }
#candle .glow ellipse:nth-child(1) { opacity: var(--cg1); }
#candle .glow ellipse:nth-child(2) { opacity: var(--cg2); }
#candle .glow ellipse:nth-child(3) { opacity: var(--cg3); }
#candle .glow { animation: glow var(--pulse) ease-in-out infinite alternate; }
#candle .flame { fill: var(--accent); opacity: .9; transform-origin: 22px 21px; animation: flame var(--pulse) ease-in-out infinite alternate; }
#candle .wick { stroke: var(--muted); stroke-width: 1; }
#candle .body { fill: var(--accent-dim); opacity: .86; }
#candle:hover .flame { fill: var(--accent-hover); }
#candle:hover .glow { filter: brightness(1.3); }
@keyframes glow { from { opacity: .7; } to { opacity: 1; } }
@keyframes flame { from { transform: scale(1); } to { transform: scale(1.2, 1.18); } }

@media (max-width: 720px), (any-pointer: coarse) {
  :root { --top-gap: 20px; --bottom-gap: 28px; --candle-gap: 28px; }
  .text { font-size: max(var(--text-size), 16px); } /* 포커스 확대 방지 */
  #q { font-size: max(12pt, 16px); }
}
@media (prefers-reduced-motion: reduce) {
  .days .sel.entry::before, #candle .glow, #candle .flame { animation: none; }
  .pg, .layer, #candle { transition: none; }
}

/* 달력 미리보기를 끄면 달력만 화면 한가운데 둔다. */
#calendar-content, .copy-calendar-content { display:flex; flex-direction:column; flex:1; min-height:0; }
#calendar-window { position:relative; display:flex; justify-content:center; flex:none; width:100%; overflow:hidden; }
#calendar-block, .copy-calendar-block { flex:none; }
#calendar-block { width:100%; }
.no-preview #calendar-content, .no-preview .copy-calendar-content { flex:none; position:absolute; top:calc((100% + var(--edge-top) - var(--edge-bottom)) / 2); left:0; right:0; transform:translateY(-50%); padding:0 calc(var(--xl) + env(safe-area-inset-right)) 0 calc(var(--xl) + env(safe-area-inset-left)); }
#pg-cal > .col { position:relative; }
.no-preview .preview { display:none; }
.tag-section { flex:none; min-height:108px; max-height:40%; display:flex; flex-direction:column; }
.tags { min-height:108px; height:108px; overflow:hidden; margin-bottom:0; flex-shrink:1; }
.tags.expanded { height:auto; overflow-y:auto; touch-action:pan-y; overscroll-behavior:contain; }
/* 펼치기 화살표는 태그 마지막 줄 오른쪽 끝에 겹쳐 놓아 목록을 밀지 않는다. 태그는 그 자리만큼 비운다. */
.tag-section { position:relative; }
.tags { padding-right:44px; }
#tags-more { position:absolute; right:calc(var(--md) * -1); bottom:var(--md); }
#tags-more svg { transition:transform 160ms ease; }
#tags-more[aria-expanded="true"] svg { transform:rotate(180deg); }
.switch-track { width:32px; height:18px; border:1px solid var(--muted); border-radius:12px; position:relative; }
.switch-track::after { content:""; position:absolute; width:10px; height:10px; top:3px; left:3px; border-radius:50%; background:var(--muted); transition:transform 160ms; }
[role="switch"][aria-checked="true"] .switch-track { border-color:var(--accent); }
[role="switch"][aria-checked="true"] .switch-track::after { background:var(--accent); transform:translateX(14px); }
.pg { overflow:hidden; }
.h-copy { position:absolute !important; top:0; pointer-events:none; }
@media (prefers-reduced-motion:reduce) { .switch-track::after { transition:none; } }

/* 기존 모바일 앱: 본문 28px, 달력 날짜 칸은 최대 44px. */
@media (max-width: 720px), (any-pointer: coarse) {
  #pg-read > .col, #pg-search > .col, #pg-settings > .col {
    padding-left: calc(var(--xxl) + env(safe-area-inset-left));
    padding-right: calc(var(--xxl) + env(safe-area-inset-right));
  }
  #calendar-block, .copy-calendar-block { width: min(100%, 308px); align-self: center; }
  .preview { padding-left: 8px; padding-right: 8px; }
}

/* 기존 앱의 날짜 우클릭·길게 누르기 메뉴 */
#puff { position:fixed; z-index:20; background:var(--bg); border:1px solid var(--line-soft); padding:var(--xs); font-size:9pt; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
#puff button { min-width:64px; min-height:44px; padding:var(--xs) 16px; color:var(--muted); }
#puff button:hover, #puff button:focus-visible { color:var(--accent); }

/* 오늘 점은 상태와 관계없이 중립색을 유지한다. */
#today, #today:hover, #today:active, #today:focus { color:var(--muted); }
/* 기존 프로그램의 3초 커서 호흡. IME 조합 중에는 기본 커서 사용. */
#editor.slow-caret { caret-color:transparent; }
#editor.slow-caret.composing { caret-color:var(--accent); }
#editor-caret { position:absolute; width:1.5px; background:var(--accent); pointer-events:none; animation:caret-pulse 3s ease-in-out infinite; }
#caret-measure { position:fixed; left:-10000px; top:0; visibility:hidden; pointer-events:none; white-space:pre-wrap; overflow-wrap:break-word; border:0; }
@keyframes caret-pulse { 0%,100% { opacity:1; } 50% { opacity:.12; } }
@media (prefers-reduced-motion:reduce) { #editor-caret { animation:none; } }

.calendar-actions { justify-content:flex-end; gap:0; }