/* 고민 입력 칸과 '풀이를 쓰는 중' 표시. 세 페이지의 색을 그대로 물려받는다. */
.concern-field { display: block; margin-top: 14px; }
.concern-field .optional { opacity: .7; font-size: .9em; }
.concern-field textarea {
  display: block; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 11px 13px; min-height: 84px; resize: vertical;
  font: inherit; font-size: 15px; line-height: 1.55; color: inherit;
  background: color-mix(in srgb, currentColor 6%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 32%, transparent); border-radius: 6px;
}
.concern-field textarea::placeholder { color: inherit; opacity: .55; font-size: 13px; }
.concern-field textarea:focus { outline: 2px solid color-mix(in srgb, currentColor 55%, transparent); outline-offset: 1px; }
.concern-field + .form-note, .concern-note { margin-top: 6px; }

.reading-ai-status {
  position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 9000; transform: translateX(-50%);
  max-width: calc(100vw - 32px); padding: 9px 16px; border-radius: 999px;
  background: #15171ce8; color: #f1ead9; border: 1px solid #d8b77966; box-shadow: 0 6px 20px #0006;
  font: 13px/1.4 system-ui, "Malgun Gothic", sans-serif; text-align: center; pointer-events: none;
  transition: opacity .4s ease;
}
.reading-ai-status[data-done] { opacity: 0; }
.reading-ai-status .dot { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: #d8b779; vertical-align: middle; animation: reading-ai-pulse 1.4s ease-in-out infinite; }
@keyframes reading-ai-pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .reading-ai-status .dot { animation: none; } .reading-ai-status { transition: none; } }

/* The three private workrooms. The portrait stays still; only the room's light and small details move. */
html.reading-wait-open { overflow: hidden; }
dialog.reading-wait {
  --wait-bg: #1c171b; --wait-ink: #fbf1e3; --wait-muted: #d9c7b8; --wait-accent: #d6ba85;
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none;
  margin: 0; padding: 0; border: 0; color: var(--wait-ink); background: var(--wait-bg);
  overflow: auto; overscroll-behavior: contain; box-sizing: border-box; color-scheme: dark;
  font: 15px/1.7 SUIT, Pretendard, 'Malgun Gothic', sans-serif;
}
.reading-wait::backdrop { background: #0e1019; }
.reading-wait[data-persona=yeonhwa] { --wait-bg: #2b1d29; --wait-muted: #e5c4cb; --wait-accent: #e3b5bf; }
.reading-wait[data-persona=noa] { --wait-bg: #101827; --wait-muted: #bbcbe1; --wait-accent: #d9c38f; }
.reading-wait .reading-wait-shell { position: relative; isolation: isolate; min-height: 100%; max-width: 1180px; margin: auto; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,1fr); }
.reading-wait .reading-wait-art { position: relative; min-width: 0; align-self: stretch; overflow: hidden; }
.reading-wait .reading-wait-image { display: block; position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.reading-wait .reading-wait-art::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg,transparent 68%,var(--wait-bg)),linear-gradient(0deg,var(--wait-bg),transparent 22%); }
.reading-wait .reading-wait-top { position: absolute; inset: 0 0 auto; z-index: 2; display: flex; gap: 12px; align-items: center; padding: max(20px,env(safe-area-inset-top)) 24px 30px; background: linear-gradient(#10101691,transparent); }
.reading-wait .reading-wait-top button { min-width: 44px; min-height: 44px; border: 1px solid #eadcc95c; color: #fff8ed; background: #17141d70; backdrop-filter: blur(8px); }
.reading-wait .reading-wait-back { width: 44px; border-radius: 50%; font: 28px/1 sans-serif; }
.reading-wait .reading-wait-brand { font: 29px/1.5 Gowun, 'Gowun Batang', serif; }
.reading-wait .reading-wait-motion { margin-left: auto; padding: 0 14px; border-radius: 30px; font: 12px/1.4 SUIT,sans-serif; }
.reading-wait .reading-wait-copy { position: relative; align-self: center; z-index: 1; padding: 112px 46px 70px 34px; min-width: 0; }
.reading-wait .reading-wait-place { margin: 0 0 24px; color: var(--wait-accent); font-size: 11px; letter-spacing: .12em; }
.reading-wait .reading-wait-title { margin: 0; font: 400 clamp(26px,2.65vw,37px)/1.65 Gowun,'Gowun Batang',serif; letter-spacing: -.035em; color: var(--wait-ink); white-space: pre-line; word-break: keep-all; overflow-wrap: anywhere; }
.reading-wait .reading-wait-title:focus { outline: none; }
.reading-wait .reading-wait-quote { min-height: 88px; margin: 26px 0 28px; white-space: pre-line; color: var(--wait-muted); font-size: 15px; line-height: 1.9; word-break: keep-all; }
.reading-wait .reading-wait-live { display: flex; align-items: center; gap: 13px; min-height: 30px; }
.reading-wait .reading-wait-status { margin: 0; color: var(--wait-ink); font-size: 14px; font-weight: 500; word-break: keep-all; }
.reading-wait .reading-wait-working { display: inline-flex; flex-shrink: 0; gap: 4px; align-items: center; }
.reading-wait .reading-wait-working i { display: block; width: 5px; height: 5px; background: var(--wait-accent); border-radius: 50%; animation: wait-beat 1.5s ease-in-out infinite; }
.reading-wait .reading-wait-working i:nth-child(2) { animation-delay: .2s; }
.reading-wait .reading-wait-working i:nth-child(3) { animation-delay: .4s; }
.reading-wait .reading-wait-progress { display: block; appearance: none; width: 100%; height: 3px; overflow: hidden; border: 0; border-radius: 3px; margin: 18px 0; background: #ffffff20; accent-color: var(--wait-accent); }
.reading-wait progress::-webkit-progress-bar { background: #ffffff20; }
.reading-wait progress::-webkit-progress-value { background: var(--wait-accent); transition: width .6s ease; }
.reading-wait progress::-moz-progress-bar { background: var(--wait-accent); }
.reading-wait .reading-wait-hint { margin: 16px 0 0; font-size: 12px; line-height: 1.85; color: var(--wait-muted); word-break: keep-all; }
.reading-wait .reading-wait-actions { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 22px 0 0; }
.reading-wait .reading-wait-actions button { min-height: 44px; padding: 9px 0; background: none; border: 0; border-bottom: 1px solid #cfbba36b; color: var(--wait-ink); font: inherit; font-size: 13px; }
.reading-wait button { cursor: pointer; }
.reading-wait button:focus-visible { outline: 2px solid var(--wait-accent); outline-offset: 5px; }
.reading-wait [hidden] { display: none !important; }
.reading-wait .reading-wait-atmosphere { position: absolute; inset: 0; pointer-events: none; }
.reading-wait .reading-wait-particle { position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; background: #ffe3aa; box-shadow: 0 0 12px 3px #ffdb9355; border-radius: 50%; opacity: .45; animation: wait-dust var(--duration) var(--delay) ease-in-out infinite; }
.reading-wait[data-persona=yeonhwa] .reading-wait-particle { width: 7px; height: 11px; border-radius: 90% 15% 90% 30%; background: #eab6c3; box-shadow: 0 0 9px #efc0d033; opacity: .55; animation-name: wait-petal; }
.reading-wait .reading-wait-thread { display: none; }
.reading-wait[data-persona=yeonhwa] .reading-wait-thread { display: block; position: absolute; left: 15%; right: 18%; top: 72%; height: 6%; border-top: 1px solid #ffb3b98a; border-radius: 50%; transform: rotate(-12deg); filter: drop-shadow(0 0 5px #ed7e96); animation: wait-thread 4s ease-in-out infinite; }
.reading-wait[data-persona=noa] .reading-wait-particle { width: 2px; height: 2px; background: #e2eeff; box-shadow: 0 0 6px 1px #bedaff88; animation-name: wait-star; }
.reading-wait .reading-wait-orbit { display: none; }
.reading-wait[data-persona=noa] .reading-wait-orbit { display: block; position: absolute; width: 44%; aspect-ratio: 1; left: 40%; top: 62%; border: 1px solid #ddc98d55; border-radius: 50%; transform: rotate(-25deg); animation: wait-orbit 35s linear infinite; }
.reading-wait[data-persona=noa] .reading-wait-orbit::before { content: ''; position: absolute; width: 5px; height: 5px; left: 49%; top: -3px; background: #f4dfaa; box-shadow: 0 0 12px 3px #ffe5a66b; border-radius: 50%; }
.reading-wait[data-state=partial] .reading-wait-working i,.reading-wait[data-state=disabled] .reading-wait-working i,.reading-wait[data-state=limited] .reading-wait-working i,.reading-wait[data-state=missing] .reading-wait-working i,.reading-wait[data-state=uncertain] .reading-wait-working i,.reading-wait[data-state=delayed] .reading-wait-working i { animation: none; opacity: .5; }
@keyframes wait-beat { 0%,80%,100% { opacity: .35; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-4px); } }
@keyframes wait-dust { 0%,100% { opacity: .2; transform: translate(0,0); } 50% { opacity: .8; transform: translate(10px,-24px); } }
@keyframes wait-petal { 0%,100% { opacity: .2; transform: translate(0,-10px) rotate(-25deg); } 50% { opacity: .65; transform: translate(18px,25px) rotate(50deg); } }
@keyframes wait-thread { 50% { opacity: .25; filter: drop-shadow(0 0 1px #ed7e96); } }
@keyframes wait-star { 0%,100% { opacity: .2; } 50% { opacity: .95; } }
@keyframes wait-orbit { to { transform: rotate(335deg); } }
.reading-wait[data-motion=off] *, .reading-wait[data-motion=off] *::before { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .reading-wait *, .reading-wait *::before { animation: none !important; transition: none !important; } }
@media (min-width: 760px) and (min-height: 820px) { .reading-wait .reading-wait-shell { max-width: 1180px; } .reading-wait .reading-wait-art { min-height: 850px; } }
@media (max-width: 759px) {
  .reading-wait .reading-wait-shell { display: block; max-width: 680px; }
  .reading-wait .reading-wait-art { position: absolute; top: 0; left: 0; width: 100%; height: min(100vw * 1.5,830px); }
  .reading-wait .reading-wait-image { object-fit: contain; object-position: center top; }
  .reading-wait .reading-wait-art::after { background: linear-gradient(0deg,var(--wait-bg) 0%,transparent 32%); }
  .reading-wait .reading-wait-top { padding: max(15px,env(safe-area-inset-top)) 18px 28px; }
  .reading-wait .reading-wait-copy { padding: min(118vw,650px) 27px max(32px,env(safe-area-inset-bottom)); }
  .reading-wait .reading-wait-place { font-size: 10px; margin-bottom: 13px; }
  .reading-wait .reading-wait-title { font-size: clamp(24px,6.6vw,34px); line-height: 1.55; }
  .reading-wait .reading-wait-quote { margin: 18px 0; min-height: 60px; font-size: 13px; line-height: 1.8; }
  .reading-wait .reading-wait-status { font-size: 13px; }
  .reading-wait .reading-wait-hint { font-size: 11px; }
  .reading-wait .reading-wait-actions { margin-top: 13px; }
}
/* A conversation before the reading, and its final personal letter. */
.personal-question-open{overflow:hidden}
.personal-question-dialog{--pq-bg:#f5efe5;--pq-ink:#42363c;--pq-accent:#916b79;box-sizing:border-box;position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:var(--pq-bg);color:var(--pq-ink);overflow:auto;overscroll-behavior:contain;font-family:inherit}
.personal-question-dialog::backdrop{background:#10101a}
.personal-question-dialog[data-persona=yeonhwa]{--pq-bg:#f5ece8;--pq-ink:#4b303c;--pq-accent:#a36575}
.personal-question-dialog[data-persona=noa]{--pq-bg:#161e30;--pq-ink:#eee9de;--pq-accent:#c2aa72;color-scheme:dark}
.personal-question-shell{display:grid;grid-template-columns:minmax(320px,1fr) minmax(360px,1fr);min-height:100dvh;max-width:1440px;margin:auto}
.personal-question-scene{position:relative;min-width:0;margin:0;overflow:hidden;background:#1d1a21}
.personal-question-image{display:block;width:100%;height:100%;max-height:1080px;min-height:100dvh;object-fit:cover;object-position:center 22%}
.personal-question-scene::after{content:'';position:absolute;inset:50% 0 0;pointer-events:none;background:linear-gradient(transparent,rgba(17,15,25,.4))}
.personal-question-balloon{position:absolute;z-index:1;left:7%;right:7%;bottom:6%;box-sizing:border-box;padding:clamp(20px,3vw,38px) 24px;border:1px solid #d8c9b6;border-radius:43% 41% 39% 35% / 25% 26% 28% 24%;background:#fbf8f0;color:#48363d;text-align:center;box-shadow:0 7px 30px #14141b18}
.personal-question-balloon::before{content:'';position:absolute;width:26px;height:29px;top:-24px;right:24%;background:#fbf8f0;clip-path:polygon(0 100%,100% 0,85% 100%)}
.personal-question-balloon p{margin:8px 0 0;white-space:pre-line;font-size:clamp(19px,1.8vw,26px);line-height:1.65;word-break:keep-all;overflow-wrap:anywhere}
.personal-question-speaker{font-size:12px;letter-spacing:.16em;color:#9b7880}
.personal-question-body{box-sizing:border-box;align-self:center;padding:60px clamp(28px,5vw,76px);min-width:0}
.personal-question-back{border:0;background:none;padding:10px 0;margin:0 0 38px;color:inherit;font:inherit;cursor:pointer;opacity:.76}
.personal-question-kicker{font-size:10px;letter-spacing:.2em;color:var(--pq-accent);margin:0 0 18px}
.personal-question-title{font:400 clamp(23px,2.4vw,33px)/1.55 'MaruBuri',serif;margin:0 0 23px;word-break:keep-all;overflow-wrap:anywhere}
.personal-question-aside{white-space:pre-line;font-size:15px;line-height:1.9;opacity:.8;margin:0 0 35px;word-break:keep-all}
.personal-question-form{border-top:1px solid color-mix(in srgb,var(--pq-accent) 35%,transparent);padding-top:26px}
.personal-question-label{display:block;font-size:14px;margin-bottom:16px}
.personal-question-optional{display:block;font-size:11px;opacity:.65;margin-top:7px}
.personal-question-input{box-sizing:border-box;display:block;width:100%;min-height:142px;resize:vertical;border:0;border-bottom:1px solid var(--pq-accent);border-radius:0;background:color-mix(in srgb,var(--pq-bg) 92%,var(--pq-ink));padding:18px;color:var(--pq-ink);font:400 16px/1.9 inherit;line-height:1.9;font-family:inherit;font-size:16px;outline-offset:5px}
.personal-question-input::placeholder{color:inherit;opacity:.48}
.personal-question-count{font-size:11px;text-align:right;opacity:.62;margin:10px 0 22px}
.personal-question-submit{width:100%;padding:18px 16px;border:1px solid var(--pq-accent);background:var(--pq-accent);color:#fff9ed;border-radius:3px;font:inherit;font-size:15px;cursor:pointer;letter-spacing:.025em}
[data-persona=noa] .personal-question-submit{color:#171e2d}
.personal-question-skip{display:block;margin:19px auto 0;padding:10px 4px;border:0;border-bottom:1px solid color-mix(in srgb,var(--pq-ink) 28%,transparent);background:none;color:inherit;font:inherit;font-size:13px;cursor:pointer;opacity:.75}
.personal-question-dialog :focus-visible{outline:2px solid var(--pq-accent);outline-offset:5px}
.personal-answer{--pa-paper:#fffdf7;--pa-ink:#493b40;--pa-accent:#977381;--pa-bg:#f5f0e7;box-sizing:border-box;width:100%;padding:0 0 100px;background:var(--pa-bg);color:var(--pa-ink);overflow-wrap:anywhere}
.personal-answer[data-persona=yeonhwa]{--pa-paper:#fffbf7;--pa-ink:#553c45;--pa-accent:#a1697b;--pa-bg:#f4ebe5}
.personal-answer[data-persona=noa]{--pa-paper:#1b2538;--pa-ink:#ede8dc;--pa-accent:#bcab7d;--pa-bg:#141a2a}
.personal-answer-header{box-sizing:border-box;max-width:800px;margin:auto;padding:42px 24px 32px;text-align:center}
.personal-answer-kicker{color:var(--pa-accent);font-size:11px;letter-spacing:.1em;margin:0 0 14px}
.personal-answer-header h1{font:400 clamp(24px,3.5vw,34px)/1.5 'MaruBuri',serif;margin:0;word-break:keep-all}
.personal-answer-scene{position:relative;margin:0 0 clamp(38px,6vw,64px);padding:0;width:100%;isolation:isolate}
.personal-answer-image{display:block;box-sizing:border-box;width:100%;height:auto;aspect-ratio:2/3;object-fit:contain;mask-image:linear-gradient(#000 93%,transparent 100%)}
.personal-answer-balloon{position:relative;z-index:1;box-sizing:border-box;width:82%;max-width:720px;margin:clamp(-110px,-10vw,-42px) auto 0;padding:clamp(20px,3vw,34px) clamp(19px,4vw,44px);border:1px solid color-mix(in srgb,var(--pa-accent) 48%,transparent);border-radius:39% 43% 37% 42% / 25% 25% 30% 28%;background:var(--pa-paper);color:var(--pa-ink);text-align:center;box-shadow:0 8px 28px #2018240c}
.personal-answer-balloon::before{content:'';position:absolute;right:25%;top:-29px;width:33px;height:32px;background:var(--pa-paper);clip-path:polygon(0 100%,91% 0,88% 100%)}
.personal-answer-speaker{display:block;color:var(--pa-accent);font-size:12px;letter-spacing:.16em}
.personal-answer-callback{font-size:clamp(16px,2.3vw,23px);line-height:1.8;white-space:pre-line;word-break:keep-all;overflow-wrap:anywhere;margin:10px 0 0}
.personal-answer-paper{position:relative;box-sizing:border-box;width:calc(100% - clamp(32px,9vw,128px));max-width:740px;margin:auto;padding:clamp(24px,5vw,52px);background:var(--pa-paper);border:1px solid color-mix(in srgb,var(--pa-accent) 27%,transparent);box-shadow:0 10px 35px #15121b08}
.personal-answer-question{padding:0 0 29px;margin:0 0 35px;border-bottom:1px solid color-mix(in srgb,var(--pa-accent) 28%,transparent)}
.personal-answer-label{font-size:12px;color:var(--pa-accent);margin:0 0 14px}
.personal-answer-question blockquote{margin:0;font:400 clamp(19px,2.5vw,25px)/1.85 'MaruBuri',serif;white-space:pre-wrap;word-break:keep-all}
.personal-answer-section+.personal-answer-section{margin-top:42px}
.personal-answer-section h2{font-size:15px;font-weight:500;color:var(--pa-accent);margin:0 0 19px}
.personal-answer-section p,.personal-answer-status{font-size:clamp(16px,2vw,19px);line-height:2;word-break:keep-all;margin:0 0 22px}
.personal-answer-hint{font-size:13px;line-height:1.9;opacity:.7}
.personal-answer-sign{margin:44px 0 0;text-align:right;color:var(--pa-accent);font:400 16px/1.8 'MaruBuri',serif}
@media(min-width:761px){.personal-question-scene{position:sticky;top:0;align-self:start;height:100dvh;min-height:0}.personal-question-image{height:100%;min-height:0;max-height:none;object-fit:cover;object-position:center 22%}.personal-question-balloon{bottom:4%;padding:26px 24px}}
@media(max-width:760px){.personal-question-shell{display:block}.personal-question-scene{height:min(88svh,760px);min-height:480px}.personal-question-image{height:100%;min-height:0;object-position:center 21%}.personal-question-balloon{left:8%;right:8%;bottom:5%;padding:21px 15px}.personal-question-balloon p{font-size:20px}.personal-question-body{padding:30px 26px 50px}.personal-question-back{margin-bottom:23px}.personal-question-title{font-size:25px}.personal-question-aside{font-size:14px}.personal-question-form{padding-top:22px}.personal-answer{padding:0 0 70px}.personal-answer-header{padding:32px 22px 25px}.personal-answer-balloon{width:86%}.personal-answer-paper{padding:26px 23px}}
@media(prefers-reduced-motion:reduce){.personal-question-dialog *{scroll-behavior:auto!important}}

/* AI 가 고른 핵심 구절: 굵게 + 형광펜. 읽기 귀찮은 사람도 이것만 훑으면 결론이 보이게 (테스터 피드백 2026-10-08). */
/* 섹션당 1개·장마다 3개까지만 오고, 색은 옅게 해서 글을 가리지 않는다. */
.reading-key { font-weight: 700; color: inherit; padding: 0 .05em;
  background: linear-gradient(transparent 68%, var(--reading-key-mark, #f1d48a66) 68%); }
html[data-reading-persona=yeonhwa] .reading-key { --reading-key-mark: #f4b6c566; }
html[data-reading-persona=noa] .reading-key { --reading-key-mark: #d9c38f40; }
@media (forced-colors: active) { .reading-key { background: none; text-decoration: underline; } }

/* 결제 전 잠긴 장. 본문 자리에 '이 장이 답하는 질문 + 계산된 답의 첫머리'와 캐릭터가 권하는 버튼. */
.reading-lock {
  --lock-accent: #b98a3e; --lock-ink: #2b2420; --lock-muted: #6d625a; --lock-paper: #fbf6ec;
  margin: 28px 16px; padding: 26px 22px 22px; border-radius: 14px; text-align: center;
  background: var(--lock-paper); color: var(--lock-ink); border: 1px solid color-mix(in srgb, var(--lock-accent) 45%, transparent);
  box-shadow: 0 10px 30px #0000001f; font: 15px/1.7 SUIT, Pretendard, 'Malgun Gothic', sans-serif;
}
.reading-lock[data-persona=yeonhwa] { --lock-accent: #c9677f; --lock-paper: #fff4f5; }
.reading-lock[data-persona=noa] { --lock-accent: #c9ab62; --lock-ink: #eef2fb; --lock-muted: #b9c4d8; --lock-paper: #141d30; }
.reading-lock-kicker { margin: 0 0 12px; font-size: 12px; letter-spacing: .08em; color: var(--lock-accent); }
.reading-lock-question { margin: 0 0 10px; font: 600 20px/1.5 Gowun, 'Gowun Batang', serif; word-break: keep-all; }
.reading-lock-preview {
  margin: 0 auto 14px; max-width: 30em; color: var(--lock-ink); word-break: keep-all;
  -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent); mask-image: linear-gradient(90deg, #000 55%, transparent);
}
.reading-lock-voice { margin: 0 0 18px; font-size: 13px; color: var(--lock-muted); word-break: keep-all; }
.reading-lock-cta {
  display: inline-block; min-height: 48px; padding: 12px 24px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--lock-accent); color: #fff; font: 600 15px/1.4 SUIT, Pretendard, 'Malgun Gothic', sans-serif;
}
.reading-lock-cta:focus-visible { outline: 2px solid var(--lock-accent); outline-offset: 4px; }
.reading-lock-note, .reading-lock-popup { margin: 12px 0 0; font-size: 12px; color: var(--lock-muted); }
.reading-lock-popup a { color: var(--lock-accent); }
.personal-answer[data-answer-state=locked] .reading-lock { margin: 8px 0 0; }