/* Warm paper palette, shared across home, forms, readings and saved pages. */
:root { --bg:#f5efe0; --card:#fffcf4; --ink:#29271f; --dim:#74664f; --accent:#8c6d20; --pink:#976b32; --line:#dfd0af; color-scheme:light; }
html { background:#ece6d9; }
body::before { background:var(--bg); box-shadow:0 0 0 1px var(--line),0 0 50px #5543210c; }
.top,.tabbar { background:#fffcf6f5; border-color:var(--line); box-shadow:0 3px 16px #77602a08; }
.top { border-radius:0 0 16px 16px; top:0; margin-top:0; }
.logo { color:#806223; letter-spacing:.08em; }
.tabbar { bottom:0; width:min(480px,100%); border-radius:0; border-width:1px 0 0; }
.tabbar a { color:#71634f; }
.tabbar a[aria-current="page"] { color:#805e15; }
.sound[aria-pressed="true"] { background:#ede0bf; }
h1,.birth-title,.birth-panel>h3,.birth-date-picker>p:first-child,.birth-time-picker>p:first-child { font-family:"Noto Serif KR","Batang",serif; letter-spacing:-.025em; }
.hub-hero { background:radial-gradient(ellipse at 100% 0,#33446677,transparent 65%),linear-gradient(140deg,#202b40,#101724); border-color:#283248; }
.hub-hero h1 { color:#f3dfad; font-size:32px; font-weight:600; }
.hub-hero p:not(.eyebrow),.hub-secondary { color:#e1dacb; }
.hub-hero .eyebrow { color:#dbb568; }.hero-orbit { color:#e3c57a24; }
.hub-primary { background:linear-gradient(100deg,#caa459,#e5c77c); color:#241e14; }
.hub-tabs a { border-color:var(--line); color:#7a612d; }
.section-head>span,.how-it-works li>b { color:var(--accent); }
.rhythm-grid a,.rhythm-grid a:nth-child(2) { background:var(--card); border-color:var(--line); }
.rhythm-grid a::after { background:none; }.rhythm-grid h3 { color:var(--ink); }
.rhythm-grid p,.rhythm-grid small { color:var(--dim); }.rhythm-grid b,.rhythm-symbol { color:var(--accent); }
.notice-item { background:#eae0c9; color:#624e23; }.how-it-works,.hub-help details { border-color:var(--line); }
.how-it-works { background:var(--card); }.how-it-works li>b { border-color:var(--line); }
.catalog-search { color:var(--dim); }.catalog-search input { background:var(--card); color:var(--ink); border-color:var(--line); }
.chip-btn.on { background:var(--accent); color:#fff; }.card,.hero-text { color:#fff8e9; }
.card .go,.t-go { color:#edcb80; }.card .chip { background:#e4c378; color:#2c2314; }
.topic-list a { border-color:var(--line); }.topic-tag { color:#fff; }
.hero-text { background:linear-gradient(180deg,#15120dcc,#15120d); }
.hero-text .free,.hero-text .seen,.hero-text .hook { color:#e5decd; }
.cta,.ask-go,.chat .next { background:var(--accent); color:#fff; }
.detail-badge,.detail-tags li,.detail-tags li:nth-child(2) { background:#ede2c9; color:#77591d; border-color:var(--line); }
.detail-description,.detail-story>p:not(.eyebrow),.detail-package>p:not(.eyebrow),.detail-audience li { color:var(--dim); }
.detail-story,.detail-package,.conversion-card,.unavailable { background:var(--card); border-color:var(--line); }
.detail-package dl>div { background:var(--bg); border-color:var(--line); }
.detail-audience li,.detail-contents li,#detail-hero { border-color:var(--line); }
.free-label { color:#fff; }.chapter-number { border-color:var(--line); }
.birth-title { color:var(--ink); text-align:center; margin-bottom:16px; }
.birth fieldset { border:0; padding:0; margin:24px 0 0; min-width:0; }
.birth fieldset>legend { color:var(--dim); font-size:13px; padding:0; }
.birth-panel { padding:24px 20px; border:1px solid var(--line); border-radius:20px; background:var(--card); margin:12px 0; }
.birth-panel>h3,.birth-date-picker>p:first-child,.birth-time-picker>p:first-child { color:#8b6b28; font-size:22px; font-weight:600; margin:0 0 12px; line-height:1.5; }
.birth-date-fields { gap:8px; grid-template-columns:1.25fr 1fr 1fr; }
.birth select,.birth .birth-time-fields input { min-height:54px; border:1px solid var(--line); border-radius:14px; background:var(--bg); color:var(--ink); font-size:16px; padding:10px; width:100%; }
.birth-time-range { margin:8px 0 12px; }
.birth .birth-time-fields input::placeholder { color:var(--dim); }
.birth-panel>.inline { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:20px 0 0; font-size:0; }
.birth-panel>.inline label { position:relative; display:flex; justify-content:center; align-items:center; margin:0; padding:14px; border-radius:14px; border:1px solid var(--line); background:var(--bg); font-size:16px; color:var(--dim); min-height:54px; }
.birth-panel>.inline label:has(input:checked) { background:var(--accent); color:white; border-color:var(--accent); }
.birth-panel>.inline label:focus-within { outline:3px solid #8c6d2080; outline-offset:3px; }
.birth-panel>.inline input { position:absolute; opacity:0; width:1px; height:1px; }
.birth-steps { counter-reset:stage; gap:0; margin:28px 0 14px; }
.birth-steps li { position:relative; border:0; border-radius:0; padding:0 2px; background:none; color:var(--dim); font-size:12px; }
.birth-steps li::before { counter-increment:stage; content:counter(stage); display:flex; justify-content:center; align-items:center; width:32px; height:32px; border:1px solid #bda973; border-radius:50%; margin:0 auto 8px; background:var(--bg); color:#8c6d20; position:relative; z-index:1; font-size:14px; }
.birth-steps li::after { content:""; height:2px; background:var(--line); position:absolute; left:0; right:0; top:16px; }
.birth-steps li[aria-current="step"] { color:var(--accent); background:none; }.birth-steps li[aria-current="step"]::before { background:var(--accent); color:white; }
.birth-steps li.complete { color:var(--accent); }.birth-steps li.complete::after { background:var(--accent); }
.input-progress { border:0; color:var(--dim); font-size:13px; padding:0; margin:8px 0 18px; text-align:center; }
.birth .step-nav { margin:18px 0; }.birth .step-nav button { border:1px solid var(--line); border-radius:14px; background:var(--card); color:var(--dim); min-height:56px; }
.birth .step-nav button:not(:first-child) { background:var(--accent); color:#fff; border-color:var(--accent); flex:2; }
.input-review,.reading-usage { background:#eee5d0; border-color:var(--line); }.input-review h3 { color:#765a20; }
.reading-usage strong { color:var(--ink); }.reading-usage small,.reading-usage a { color:var(--dim); }
.reading-usage { padding:14px 18px; }.reading-usage .note { font-size:12px; }
.review-person button,.mine-actions button,.share-topic,.read-all,.suggested-asks button,.question-undo,.answer-expand,.reading-toc button,.backup-file input::file-selector-button { background:var(--card); color:var(--accent); border-color:var(--line); }
.reading-size-options button[aria-pressed="true"],.suggested-asks button[aria-pressed="true"],.backup-export { background:var(--accent); color:#fff; border-color:var(--accent); }
.chart-summary,.pillar,.review-card,.ask-usage,.chat .bubble.reading-section { background:var(--card); border-color:var(--line); }
.chart-summary summary,.pillar strong,.pillar small,.reading-section h3,.ask-remaining,.reading-opening { color:#795a20; }.reading-opening { text-decoration-color:#d6bd80; }
.day-pillar { border-color:var(--accent); }.report-route li { color:var(--accent); background:#eae0c9; }
.review-card small,.question-meta,.related-card small,.related-card span span { color:var(--dim); }
.related-card b { color:var(--accent); }.review-select select { color:var(--ink); background:var(--bg); border-color:var(--line); }
.chat .bubble p,.chat .bubble.intro p,.chat .bubble.tail p { background:#eee5d0; color:var(--ink); }
.chat .bubble.mine p { background:#ded1ae; color:#403724; }.chat .bubble.reading-section p { background:transparent; }
.reading-toc button:hover { background:#eee5d0; }.ask-row textarea { border-color:var(--line); }
.analysis-loading h2 { color:var(--ink); }.analysis-spinner { border-color:var(--line); border-top-color:var(--accent); }
.analysis-notice,.analysis-guide { border-color:var(--line); background:var(--card); }.analysis-progress { background:#e3d9c1; }.analysis-progress span { background:var(--accent); }
.err,#question-count.at-limit { color:#a23e2f; }.hero > .err { margin:16px 18px 0; padding:10px 14px; border-radius:12px; background:#a23e2f12; }.skip-link { background:var(--accent); color:white; }
:where(a,button,input,select,textarea,summary):focus-visible { outline-color:var(--accent); }
@media(max-width:360px) { .birth-panel { padding:20px 14px; }.birth select { padding:10px 6px; }.hub-hero h1 { font-size:28px; } }

.birth .birth-date-picker>p:first-child,.birth .birth-time-picker>p:first-child { font-size:22px; font-weight:600; margin:0 0 14px; }
.birth .birth-panel>.inline { font-size:0; }
.birth-panel .note { font-size:13px; }

.reading-section h3:focus,.reading-toc button:focus-visible,.reading-size-options button:focus-visible,.answer-expand:focus-visible { outline-color:var(--accent); }
.reading-size-options button,.backup-preview,.backup-export,.mine-actions button,.recovery-img { border-color:var(--line); }
.element-row meter { accent-color:var(--accent); }

.calendar-choice { margin-bottom:18px; }.birth .calendar-choice .leap-choice { display:flex; align-items:center; gap:10px; font-size:14px; min-height:44px; }
#reading-print,.print-toolbar { border-color:var(--line); }.print-toolbar { background:#eee5d0; }.print-toolbar button { background:#8c6d20; border-color:#8c6d20; }
.review-select button { min-height:48px; padding:12px; background:var(--accent); color:#fff; border:0; border-radius:12px; font:inherit; }
/* Touch keyboards need the bottom of the screen for input and send controls. */
@media (max-width:700px) {
  body:has(input:focus,textarea:focus) .tabbar { display:none; }
  input,textarea,select { scroll-margin-block:100px; }
}

/* Keep help outside generated reading paragraphs and conversation history. */
.reading-glossary {margin:20px 0;padding:16px 18px;border:1px solid #d9caa8;border-radius:18px;background:#fffcf4;color:#302a20;}
.reading-glossary summary {min-height:44px;display:list-item;align-content:center;cursor:pointer;font-weight:600;line-height:1.6;overflow-wrap:anywhere;}
.reading-glossary summary:focus-visible {outline:3px solid #8c6d20;outline-offset:4px;border-radius:4px;}
.reading-glossary .glossary-entries details {border-top:1px solid #e6dbc3;padding:6px 0;}
.reading-glossary .glossary-entries p {font-size:var(--reading-font-size,1rem);margin:8px 0 14px;line-height:1.9;word-break:keep-all;overflow-wrap:anywhere;}
@media print {.reading-glossary {display:none!important;}}

.mine-preview {color:var(--ink);font-size:var(--reading-font-size,1rem);line-height:1.85;word-break:keep-all;overflow-wrap:anywhere;}
.mine-browse {margin-block:24px;}

.reading-example {margin:24px 0;padding:20px;border-block:1px solid var(--line);}
.reading-example summary {cursor:pointer;min-height:44px;line-height:1.7;font-weight:600;}
.reading-example blockquote {margin:20px 0;padding-left:16px;border-left:3px solid var(--accent);font-family:'Noto Serif KR',serif;font-size:1.25rem;line-height:1.7;word-break:keep-all;overflow-wrap:anywhere;}
.example-question {margin-block:20px;padding:16px;background:var(--bg);border-radius:12px;}
.example-question span {font-size:.85rem;color:var(--muted);}
.reading-quote textarea {display:block;width:100%;box-sizing:border-box;font:inherit;line-height:1.8;padding:14px;margin:10px 0;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);resize:vertical;}
.reading-quote #quote-handle {display:block;width:100%;box-sizing:border-box;font:inherit;min-height:48px;padding:10px 14px;margin:8px 0 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);}
.feed-form #feed-handle {display:block;width:100%;box-sizing:border-box;font:inherit;min-height:48px;padding:10px 14px;margin:8px 0 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);}
.feed-form .feed-own {display:flex;align-items:center;gap:8px;min-height:44px;margin:0 0 12px;}
.reading-quote .quote-size {border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:0 0 10px;display:flex;flex-wrap:wrap;gap:8px 18px;}
.reading-quote .quote-size legend {padding:0 6px;}
.reading-quote .quote-size label {display:flex;align-items:center;gap:6px;min-height:44px;}
.reading-quote button {min-height:48px;padding:12px 16px;border:1px solid var(--accent);border-radius:12px;background:var(--accent);color:white;font:inherit;}
.reading-example summary:focus-visible,.reading-quote button:focus-visible {outline:3px solid var(--accent);outline-offset:4px;}
@media print {.reading-quote {display:none!important;}}

.hub-lab {display:flex;align-items:center;margin:10px 0 0;padding:12px 14px;border:1px solid #dbb56866;border-radius:12px;color:#f3dfad;text-decoration:none;font-size:14px} .hub-lab span {margin-left:auto}
.lab-list {list-style:none;padding:0;margin:12px 0;display:grid;gap:10px} .lab-list a {display:grid;grid-template-columns:36px 1fr;gap:2px 10px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);text-decoration:none}
.lab-list .lab-emoji {grid-row:span 2;font-size:24px;align-self:center} .lab-list small {color:var(--dim);font-size:13px}
.lab-row {grid-template-columns:72px minmax(0,1fr) 78px!important} .lab-row span:last-child {white-space:nowrap;text-align:right}
.feed-color-row .pair-bars {display:flex;flex-direction:column;gap:3px}
.feed-color-row meter.feed::-webkit-meter-optimum-value,.feed-color-row meter.feed::-webkit-meter-suboptimum-value,.feed-color-row meter.feed::-webkit-meter-even-less-good-value {background:#c77d9c}
.feed-color-row meter.feed::-moz-meter-bar {background:#c77d9c} .feed-legend i {display:inline-block;width:10px;height:10px;border-radius:2px;margin:0 4px 0 10px;vertical-align:-1px}
.feed-tags span {display:inline-block;margin:0 6px 6px 0;padding:4px 10px;border-radius:999px;background:var(--bg);border:1px solid var(--line);font-size:13px}
.persona-rows {display:grid;grid-template-columns:84px 1fr;gap:6px 12px;margin:12px 0} .persona-rows dt {color:var(--dim);font-size:13px} .persona-rows dd {margin:0}
.feed-persona h2 {line-height:1.5}
.refine-status {margin:8px 0 12px;padding:10px 14px;border-radius:12px;background:#dbb56822;color:var(--ink);font-size:14px}
.refine-status[data-state="busy"]::after {content:'';display:inline-block;width:10px;height:10px;margin-left:8px;border:2px solid var(--accent);border-right-color:transparent;border-radius:50%;animation:refine-spin .8s linear infinite;vertical-align:-1px}
@keyframes refine-spin {to{transform:rotate(360deg)}} .refine-status[data-state="failed"] {background:#a23e2f12} .refine-retry {margin-left:6px}
.reading-section.refined p {animation:refine-in .6s ease} @keyframes refine-in {from{opacity:.35}to{opacity:1}}
@media (prefers-reduced-motion: reduce) {.refine-status::after,.reading-section.refined p {animation:none}}
.lab-steps {display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:10px 0 14px} .lab-steps span {text-align:center;font-size:11px;padding:6px 0;border-radius:8px;background:var(--bg);color:var(--dim);border:1px solid var(--line)} .lab-steps span.on {background:var(--accent);color:#fff;border-color:var(--accent)}
.lab-pick p {margin:6px 0 0;font-size:14px}
.lab-big {font-size:18px;margin:4px 0 14px} .lab-big b,.lab-result h1 b {color:var(--accent)} .lab-spots {margin:-6px 0 8px 82px;font-size:12px;color:var(--dim)}
.lab-forces {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0} .lab-forces div {border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:4px;background:var(--bg)}
.lab-forces strong {font-size:20px} .lab-forces small,.lab-forces span {font-size:12px;color:var(--dim)}
.lab-pick {border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:10px 0;background:var(--bg)} .lab-pick strong {display:block;font-size:17px} .lab-pick small {color:var(--dim)} .lab-pick ul {margin:8px 0 0;padding-left:18px}
.hub-insta {display:block;margin:10px 0 0;padding:12px 14px;border:1px solid #dbb56899;border-radius:12px;color:#f3dfad;text-decoration:none;font-size:14px}
.hub-insta {display:flex!important;align-items:center;gap:10px} .hub-insta img {width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:top}
.hub-insta span {margin-left:auto}
.insta-guide {display:block;width:min(260px,70%);height:auto;margin:0 auto 14px;border-radius:18px} .insta-guide.small {width:96px;border-radius:50%;aspect-ratio:1;object-fit:cover;object-position:top}
.insta-form .handle-field input {display:block;width:100%;box-sizing:border-box;font:inherit;min-height:48px;padding:10px 14px;margin:8px 0 6px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink)}
.insta-form .feed-own {display:flex;align-items:center;gap:8px;min-height:44px}
.hero-iljin {margin:0 0 12px;font-size:14px;color:var(--dim)} .hero-iljin b {color:#f3dfad}
.hero-promise {font-size:13px!important;line-height:1.8;color:var(--dim)}
.hero-route {display:flex;gap:8px;list-style:none;padding:0;margin:24px 0 0;font-size:13px;flex-wrap:wrap}
.hero-route li+li::before {content:'→';margin-right:8px;color:#8d7129}
.quote-image-preview {margin-top:20px}
.quote-image-preview .share-quote,.quote-image-preview .quote-download {display:block;width:100%;box-sizing:border-box;text-align:center;text-decoration:none;margin:12px 0 0}
.quote-image-preview .share-quote[hidden] {display:none}
.quote-image {display:block;width:100%;height:auto;border:1px solid #d4c7a9;border-radius:12px}
.quote-download {display:inline-block;text-decoration:none;margin-top:8px}
.preview-quote {margin-top:12px;min-height:48px}

.hub-hero .hero-route {color:#ede2c5}
.hub-hero h1 {word-break:keep-all}

/* 입력 폼 위 예시 한 줄(10-28) — 생년월일 칸보다 어떤 답을 받는지 먼저 */
.example-peek {margin:20px 0 8px;padding:14px 16px;border-radius:14px;background:var(--card,rgba(0,0,0,.03));}
.example-peek blockquote {margin:8px 0;padding-left:12px;border-left:3px solid var(--accent);font-family:'Noto Serif KR',serif;font-size:1.08rem;line-height:1.7;word-break:keep-all;overflow-wrap:anywhere;}
.example-peek a {font-size:.9rem;}
/* 오늘 일진 한 줄(today-iljin.js) */
.today-iljin { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin:0 0 12px; }
.today-iljin .eyebrow { margin:0 0 6px; }
.today-iljin .iljin-line { margin:0 0 6px; color:var(--ink); font-weight:600; line-height:1.6; word-break:keep-all; }
.today-iljin .note { margin:0; }

/* 바닥 '물어보기' 버튼(ask-float.js) — 아래 메뉴 바로 위, 입력 중엔 메뉴처럼 숨김 */
.ask-float { position:fixed; left:0; right:0; bottom:calc(76px + env(safe-area-inset-bottom)); z-index:20; width:calc(min(480px,100%) - 32px); margin:0 auto; padding:13px; border-radius:14px; background:var(--accent); color:#fff; font-weight:700; text-align:center; text-decoration:none; box-shadow:0 6px 18px #77602a33; }
.ask-float[hidden] { display:none; }
@media (max-width:700px) { body:has(input:focus,textarea:focus) .ask-float { display:none; } }