/* 책잔상 디자인 언어 "빛 번짐" — 낮은 햇빛 든 종이, 밤은 불 끈 서재. 기록은 감정 색 빛(--mc)으로 남는다.
   SIRIUS 볼트 [[책잔상 - 결정 - 책장 불빛과 광고 보상]] */
:root {
  --bg: #FBF6EE; --card: #FFFFFF; --ink: #2E2620; --muted: #8C7F73; --line: #EDE3D5;
  --accent: #D9703F; --accent-2: #F2A65A; --accent-ink: #FFFFFF; --soft: #F5EDE2; --danger: #B3413A;
  --glow: #FFC98A; --room: #EFE3D2; --wood: #B98A5E; --wood-back: #8E6644; --wood-edge: #6E4B30; --spine-dim: #CDBBA6;
  --shadow: 0 1px 2px rgba(60, 40, 20, .05), 0 8px 24px rgba(60, 40, 20, .07);
  --serif: "Noto Serif KR", "Nanum Myeongjo", "AppleMyungjo", Georgia, serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14121A; --card: #1E1B26; --ink: #F3ECE2; --muted: #A39A90; --line: #2F2B38;
    --accent: #FFA96B; --accent-2: #FFD08A; --accent-ink: #1A1410; --soft: #29252F; --danger: #F08A80;
    --glow: #FFB870; --room: #221D2A; --wood: #5A4130; --wood-back: #3A2A20; --wood-edge: #2A1E16; --spine-dim: #6E625A;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #14121A; --card: #1E1B26; --ink: #F3ECE2; --muted: #A39A90; --line: #2F2B38;
  --accent: #FFA96B; --accent-2: #FFD08A; --accent-ink: #1A1410; --soft: #29252F; --danger: #F08A80;
  --glow: #FFB870; --room: #221D2A; --wood: #5A4130; --wood-back: #3A2A20; --wood-edge: #2A1E16; --spine-dim: #6E625A;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35); color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); font: 16px/1.55 system-ui, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  background: radial-gradient(60vmax 40vmax at 50% 10%, color-mix(in srgb, var(--glow) 22%, transparent), transparent 70%) no-repeat, var(--bg);
  padding: env(safe-area-inset-top) 0 calc(24px + env(safe-area-inset-bottom)); -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:disabled { opacity: .45; cursor: default; }
img { max-width: 100%; }
[hidden] { display: none !important; }

.top { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; max-width: 560px; margin: 0 auto; }
.top h1 { font: 700 20px/1 var(--serif); margin: 0; letter-spacing: -.02em; text-shadow: 0 0 18px var(--glow); }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; font-size: 18px; color: var(--muted); }
.icon-btn:hover { background: var(--soft); }
main { max-width: 560px; margin: 0 auto; padding: 0 20px; }

.intro { background: var(--soft); border-radius: 16px; padding: 14px 16px; margin-bottom: 14px; }
.intro h2 { font-size: 16px; margin: 0 0 4px; }
.intro p { margin: 0; color: var(--muted); font-size: 14px; }

.book-now { width: 100%; display: flex; gap: 12px; align-items: center; text-align: left; background: var(--card); border-radius: 16px; padding: 12px 14px; box-shadow: var(--shadow); }
.book-now img { width: 40px; height: 58px; object-fit: cover; border-radius: 4px; }
.book-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.book-meta strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book-meta small { color: var(--muted); font-size: 13px; }
.chev { color: var(--accent); font-size: 13px; white-space: nowrap; }

/* 책장 불빛 */
.mic-wrap { display: flex; flex-direction: column; align-items: center; padding: 10px 0 20px; }
.shelf-hero { position: relative; width: min(100%, 340px); margin-top: 6px; }
.shelf-hero::before { content: ""; position: absolute; inset: 15% 10% 5%; border-radius: 50%; background: var(--glow); filter: blur(50px); opacity: .3; }
.shelf, .shelf-svg { position: relative; width: 100%; display: block; }
.shelf-svg .room { fill: var(--room); }
.shelf-svg .wood { fill: var(--wood); }
.shelf-svg .shelf-back { fill: var(--wood-back); }
.shelf-svg .plank { fill: var(--wood-edge); }
.shelf-svg .spine-title { font-size: 8px; fill: rgba(30, 20, 15, .55); writing-mode: vertical-rl; text-anchor: start; pointer-events: none; }
.shelf-svg .wire { stroke: var(--wood-edge); stroke-width: 1.2; fill: none; }
.shelf-svg .bulb { fill: var(--wood-back); stroke: var(--wood-edge); stroke-width: 1; }
.shelf-svg .bulb.on { fill: #FFE7B0; stroke: var(--glow); animation: twinkle 3.5s ease-in-out infinite; }
.shelf-svg .bulb.pop, .shelf-svg .flash { animation: flash 1.1s ease-out 2; transform-box: fill-box; transform-origin: center; }
@keyframes twinkle { 50% { opacity: .75; } }
@keyframes flash { 0% { transform: scale(1); filter: brightness(1); } 35% { transform: scale(1.35); filter: brightness(1.8); } 100% { transform: scale(1); } }
.shelf-buddy { position: absolute; width: 62px; right: -8px; top: -26px; animation: bob 3s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-5px); } }
.shelf-caption { margin: 8px 0 0; text-align: center; line-height: 1.35; }
.shelf-caption strong { display: block; font: 600 15px var(--serif); }
.shelf-caption span { font-size: 12px; color: var(--muted); }
.jansang-say { min-height: 1.4em; margin: 8px 0 0; padding: 0 12px; font-size: 14px; text-align: center; color: var(--accent); max-width: 320px; }
.jansang-say:empty { display: none; }
.jansang-say.pop { animation: pop .5s ease-out; }
@keyframes pop { 0% { transform: scale(.85); opacity: 0; } 70% { transform: scale(1.04); } }

.theme-q { margin: 14px 0 16px; font: 15px/1.5 var(--serif); text-align: center; max-width: 300px; }
.theme-q small { display: block; color: var(--muted); font: 12px system-ui, sans-serif; }
.mood { --mc: var(--accent); display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 999px; margin-right: 4px;
  background: color-mix(in srgb, var(--mc) 22%, transparent); color: var(--ink); box-shadow: 0 0 10px color-mix(in srgb, var(--mc) 45%, transparent); }
.mic { width: 116px; height: 116px; border-radius: 50%; color: var(--accent-ink); position: relative;
  background: radial-gradient(circle at 35% 30%, var(--accent-2), var(--accent) 70%); box-shadow: 0 10px 34px color-mix(in srgb, var(--accent) 45%, transparent); transition: transform .15s; }
.mic::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; animation: halo 2.8s ease-out infinite; }
@keyframes halo { 0% { transform: scale(.9); opacity: .5; } 100% { transform: scale(1.25); opacity: 0; } }
.mic:active { transform: scale(.95); }
.mic svg { width: 46px; height: 46px; fill: currentColor; }
.hint { color: var(--muted); font-size: 14px; margin: 14px 0 8px; }
.text-btn { color: var(--muted); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; padding: 6px; }
@media (prefers-reduced-motion: reduce) { .shelf-buddy, .mic::after, .shelf-svg .bulb, .shelf-svg .flash, .jansang-say.pop { animation: none !important; } }

.section-title { font-size: 14px; color: var(--muted); font-weight: 600; margin: 18px 0 8px; }
.section-title small { font-weight: 400; }
.empty, .muted { color: var(--muted); font-size: 14px; }
.small { font-size: 12px; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.card { --mc: var(--glow); position: relative; background: var(--card); border-radius: 16px; padding: 14px 16px 14px 20px; box-shadow: var(--shadow); cursor: pointer; overflow: hidden; }
.card::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--mc); box-shadow: 0 0 14px var(--mc); }
.card.failed { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: default; border: 1px dashed var(--line); box-shadow: none; }
.card.failed::before { display: none; }
.card.failed p { margin: 0; color: var(--muted); font-size: 14px; }
blockquote { margin: 0 0 8px; padding-left: 12px; border-left: 3px solid var(--accent); font-family: var(--serif); }
.card blockquote { border-left: 0; padding-left: 0; }
.thought { margin: 0; white-space: pre-wrap; }
.meta { margin: 8px 0 0; color: var(--muted); font-size: 12px; }

.btn { border-radius: 12px; padding: 10px 14px; background: var(--soft); font-size: 15px; }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.danger { color: var(--danger); }
.btn.wide { width: 100%; margin-top: 8px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.row.end { justify-content: flex-end; margin-top: 14px; }
.row.center { justify-content: center; }

dialog.sheet { width: min(560px, 100%); max-height: 88vh; margin: auto auto 0; border: 0; border-radius: 20px 20px 0 0; padding: 8px 20px calc(20px + env(safe-area-inset-bottom)); background: var(--card); color: var(--ink); overflow-y: auto; }
@media (min-width: 640px) { dialog.sheet { margin: auto; border-radius: 20px; } }
dialog::backdrop { background: rgba(20, 15, 10, .45); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin: 0 -8px 6px 0; }
.sheet-head h2 { font-size: 17px; margin: 0; }
.ai-label { font-size: 12px; color: var(--muted); background: var(--soft); padding: 3px 8px; border-radius: 999px; }
input[type=search], input[type=text], textarea, input[type=number], select { width: 100%; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
textarea { resize: vertical; }
.field { display: block; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.field textarea, .field input, .field select { margin-top: 4px; font-size: 16px; }
.mood-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin-top: 6px; }
.mood-colors label { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; color: var(--ink); }
.mood-colors input { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.list { list-style: none; margin: 10px 0; padding: 0; }
.list button { width: 100%; display: flex; gap: 10px; align-items: center; text-align: left; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.list button img { width: 34px; height: 50px; object-fit: cover; border-radius: 3px; }
.list small { display: block; color: var(--muted); font-size: 12px; }
.list .muted { padding: 8px 4px; }

.follow { background: var(--soft); border-radius: 14px; padding: 12px 14px; margin: 14px 0 6px; }
.follow-head { margin: 0; font-size: 12px; color: var(--muted); }
.follow-q { margin: 2px 0 10px; font-weight: 600; }
.raw { margin-top: 12px; font-size: 14px; color: var(--muted); }
.raw summary { cursor: pointer; }
.raw p { margin: 6px 0; white-space: pre-wrap; }

/* 대화 */
dialog.chat { height: 88vh; display: none; flex-direction: column; }
dialog.chat[open] { display: flex; }
.chat-log { list-style: none; margin: 4px 0; padding: 0; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.msg { display: flex; gap: 8px; align-items: flex-end; max-width: 88%; }
.msg p { margin: 0; padding: 9px 13px; border-radius: 16px; white-space: pre-wrap; }
.msg.me { align-self: flex-end; }
.msg.me p { background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 4px; }
.msg.jansang img { width: 34px; flex: none; }
.msg.jansang p { background: var(--soft); border-bottom-left-radius: 4px; box-shadow: 0 0 16px color-mix(in srgb, var(--glow) 30%, transparent); }
.typing span { display: inline-block; width: 6px; height: 6px; margin: 0 2px; border-radius: 50%; background: var(--muted); animation: blink 1s infinite; }
.typing span:nth-child(2) { animation-delay: .15s; } .typing span:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 50% { opacity: .2; } }
.chat-input { display: flex; gap: 6px; align-items: flex-end; }
.chat-input textarea { resize: none; min-height: 44px; max-height: 120px; }
.chat-mic { flex: none; background: var(--soft); }

#btn-essay { margin: 0 0 10px; }
.essay h2 { font: 700 20px var(--serif); margin: 4px 0 6px; }
.essay .one { color: var(--accent); font-weight: 600; margin: 0 0 14px; }
.essay p { line-height: 1.8; white-space: pre-wrap; font-family: var(--serif); }
.seg .btn[aria-selected="true"] { background: var(--ink); color: var(--bg); }
.card-style { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.card-style summary { cursor: pointer; font-weight: 600; margin-bottom: 10px; }
.card-style summary small { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--soft); color: var(--ink); font-size: 14px; border: 2px solid transparent; }
.chip[aria-pressed="true"] { border-color: var(--accent); }
.chip i { width: 16px; height: 16px; border-radius: 50%; display: inline-block; }
.chip input[type=color] { width: 22px; height: 22px; padding: 0; border: 0; background: none; }
.style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.share-preview { margin: 10px 0; display: flex; justify-content: center; border-radius: 12px;
  background: repeating-conic-gradient(#8884 0 25%, transparent 0 50%) 0 0 / 20px 20px; }
.share-preview canvas { max-width: 100%; max-height: 55vh; border-radius: 12px; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.stats div { background: var(--soft); border-radius: 12px; padding: 10px 12px; }
.stats strong { display: block; font-size: 22px; }
.stats small { font-size: 13px; color: var(--muted); font-weight: 400; margin-left: 2px; }
.stats span { font-size: 12px; color: var(--muted); }

.overlay { position: fixed; inset: 0; background: rgba(20, 15, 10, .55); display: grid; place-items: center; z-index: 10; }
.overlay-box { background: var(--card); border-radius: 24px; padding: 28px 32px; text-align: center; min-width: 240px; }
.overlay-box p { margin: 10px 0 0; }
.timer { color: var(--muted); font-variant-numeric: tabular-nums; min-height: 1.5em; }
.overlay-box .btn { margin-top: 16px; }
.pulse { width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle, var(--accent-2), var(--accent)); margin: 0 auto; opacity: .35; box-shadow: 0 0 30px var(--glow); }
.pulse.on { animation: pulse 1.2s ease-in-out infinite; opacity: 1; }
@keyframes pulse { 50% { transform: scale(1.18); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .pulse.on, .typing span { animation: none; } }

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 12px; font-size: 14px; max-width: calc(100% - 40px); z-index: 20; }