:root {
      color-scheme: dark;
      --bg: #0b0d11;
      --panel: #12151b;
      --bubble: #1a1f28;
      --line: #303744;
      --text: #eef1f5;
      --muted: #a3acbb;
      --silver: #c9d1de;
      --sans: "Noto Sans KR", sans-serif;
      --serif: "Noto Serif KR", serif;
      --viewport-height: 100vh;
      --viewport-top: 0px;
    }
    @supports (height: 100dvh) { :root { --viewport-height: 100dvh; } }
    *, *::before, *::after { box-sizing: border-box; }
    [hidden] { display: none !important; }
    html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg); }
    body { color: var(--text); font: 15px/1.8 var(--sans); -webkit-font-smoothing: antialiased; }
    button, textarea { font: inherit; }
    button { cursor: pointer; color: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
    button:disabled { cursor: default; }
    button:focus-visible, textarea:focus-visible, [tabindex="0"]:focus-visible { outline: 2px solid #d6e2f4; outline-offset: 3px; }
    button, textarea { border: 1px solid var(--line); }
    h1, h2, h3, p, figure, blockquote { margin: 0; }
    h2, h3 { font-size: 15px; font-weight: 600; }
    svg { display: block; }
    .serif { font-family: var(--serif); font-weight: 600; }
    .small, .label { font-size: 13px; line-height: 1.65; color: var(--muted); }
    .label { display: block; margin-bottom: 10px; }
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
    .stage { position: fixed; top: var(--viewport-top); left: 0; width: 100%; height: var(--viewport-height); display: grid; place-items: center; padding: 24px; }
    .phone { position: relative; isolation: isolate; display: flex; flex-direction: column; width: 390px; max-width: 100%; height: min(844px, 100%); overflow: hidden; background: var(--bg); border: 1px solid #3b4350; border-radius: 32px; box-shadow: 0 24px 100px #0008, 0 0 0 5px #ffffff03; }
    .app { display: flex; flex-direction: column; flex: 1; min-height: 0; }
    .top { flex: none; padding-top: env(safe-area-inset-top, 0px); border-bottom: 1px solid #232833; background: var(--bg); z-index: 2; }
    .utility { display: flex; align-items: center; justify-content: space-between; min-height: 34px; padding: 3px 18px 0; }
    .utility span { color: var(--muted); font-size: 13px; letter-spacing: .04em; }
    .text-button { min-height: 34px; padding: 4px 0 4px 10px; border: 0; background: none; color: var(--muted); font-size: 13px; }
    .text-button:hover { color: var(--text); }
    .app-head { display: flex; align-items: center; gap: 12px; height: 63px; padding: 4px 18px 13px; }
    .brand { font: 600 27px/1.2 var(--serif); letter-spacing: -.09em; }
    .progress { margin-left: auto; text-align: right; color: var(--silver); font-size: 13px; line-height: 1.5; }
    .steps { display: flex; justify-content: flex-end; gap: 5px; margin-top: 5px; }
    .step { width: 6px; height: 6px; border-radius: 8px; background: #424a58; transition: width .2s, background .2s; }
    .step.active { width: 17px; background: var(--text); }
    .step.complete { background: var(--silver); }
    .remaining { border: 1px solid #596270; border-radius: 20px; padding: 5px 9px; font-size: 13px; color: var(--text); }
    .summary-toggle { min-height: 40px; border-radius: 10px; background: var(--panel); padding: 7px 10px; font-size: 13px; white-space: nowrap; }
    .summary-toggle:disabled { color: #8b94a3; border-color: #232833; }
    .summary-toggle[aria-pressed="true"] { background: var(--text); color: var(--bg); }
    .conversation, .report-view { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #3c4553 transparent; }
    .hero { position: relative; height: 140px; overflow: hidden; transition: height .3s ease, opacity .3s ease; }
    .hero.collapsed { height: 0; opacity: 0; }
    .hero img { width: 100%; height: 140px; display: block; object-fit: cover; object-position: 50% 54%; }
    .hero::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, #0b0d115c, #0b0d11e6); }
    .hero h1 { position: absolute; z-index: 1; left: 22px; bottom: 22px; font: 600 23px/1.7 var(--serif); letter-spacing: -.06em; }
    .transcript { padding: 23px 16px 12px; }
    .message { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 18px; animation: arrive .25s ease-out; }
    .avatar { flex: 0 0 28px; height: 28px; margin-top: 3px; border: 1px solid #c9d1de; border-radius: 50%; background: linear-gradient(135deg, #3d4553, #181e28); color: #edf1f7; display: grid; place-items: center; font: 600 13px/1 var(--serif); }
    .message-body { flex: 1; min-width: 0; }
    .sender { display: block; color: var(--muted); font-size: 13px; margin: 0 0 5px 2px; }
    .assistant-continuation .avatar, .assistant-continuation .sender { visibility: hidden; }
    .message.assistant-continuation { margin-top: -10px; }
    .assistant-continuation .sender { height: 0; margin: 0; overflow: hidden; }
    .bubble { padding: 15px; border-radius: 3px 18px 18px 18px; background: var(--bubble); color: var(--text); line-height: 1.9; word-break: keep-all; overflow-wrap: anywhere; }
    .message.user { padding-left: 38px; justify-content: flex-end; }
    .user .bubble { max-width: 100%; white-space: pre-wrap; border-radius: 18px 3px 18px 18px; background: #eef1f5; color: #0b0d11; }
    .message.card .bubble { background: var(--panel); border: 1px solid #303744; }
    .message.core-card .bubble { border-color: #5e6879; background: linear-gradient(135deg, #202632, #151a23); padding: 20px 17px; }
    .message.paid-card .bubble { border-color: #d9b45a; }
    .reading-badge { display: inline-block; margin-bottom: 14px; padding: 3px 9px; border: 1px solid #7d8ea5; border-radius: 6px; font-size: 12px; line-height: 1.6; font-weight: 600; }
    .free-badge { background: #253142; color: #dce7f6; }
    .dream-verdict { margin-bottom: 14px; font-weight: 700; color: var(--text); word-break: keep-all; overflow-wrap: anywhere; }
    .luck-list { list-style: none; margin: 0; padding: 0; }
    .luck-item + .luck-item { margin-top: 14px; }
    .luck-item { min-width: 0; overflow-wrap: anywhere; word-break: keep-all; }
    .luck-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
    .luck-stars { color: var(--silver); white-space: nowrap; letter-spacing: .08em; }
    .luck-stars.luck-caution { color: var(--muted); }
    .paid-badge { border-color: #d9b45a; color: #e9cb84; background: #d9b45a0d; }
    .core { font: 600 23px/1.8 var(--serif); letter-spacing: -.055em; }
    .reading-title { margin-top: 15px; color: var(--silver); font-size: 13px; }
    .recognition { margin-top: 13px; padding-top: 12px; border-top: 1px solid #ffffff16; }
    .recognition-label { color: var(--silver); font-size: 13px; margin-bottom: 8px; }
    .recognition-tags { display: flex; flex-wrap: wrap; gap: 5px; }
    .recognition-tags span { border: 1px solid #4d5766; border-radius: 6px; padding: 3px 7px; font-size: 13px; line-height: 1.5; }
    .chips { display: flex; gap: 7px; flex-wrap: wrap; }
    .chip { min-height: 44px; border: 1px solid #414b5b; border-radius: 24px; padding: 8px 12px; background: var(--panel); font-size: 15px; line-height: 1.5; }
    .chip:not(:disabled):hover { background: #293140; border-color: #9ba7b8; }
    .chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
    .chip:disabled:not([aria-pressed="true"]) { opacity: .6; }
    .feeling-group { border: 0; padding: 0; margin: 17px 0 0; min-width: 0; }
    #feelings-card > .feeling-group:first-child, #feelings-card > .selection-guide + .feeling-group { margin-top: 0; }
    .feeling-group legend { padding: 0; margin-bottom: 8px; font-size: 13px; color: var(--silver); }
    .feeling-group .chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
    .feeling-group .chip { padding: 8px 3px; font-size: 15px; border-radius: 10px; }
    .card-heading { font-weight: 600; margin-bottom: 12px; }
    .source { color: #e0e5ed; line-height: 2.1; }
    .source u { text-decoration-thickness: 1px; text-decoration-color: #b3c1d4; text-underline-offset: 5px; text-decoration-skip-ink: auto; }
    .tradition-badge { display: inline-block; margin-bottom: 12px; padding: 3px 8px; border: 1px solid #596271; border-radius: 5px; color: var(--silver); font-size: 13px; line-height: 1.5; }
    .curve { display: block; width: 100%; height: auto; overflow: visible; }
    .branches { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 17px; }
    .branch { min-width: 0; padding: 15px 13px; background: #12161f; border: 1px solid #424b5b; border-radius: 10px; }
    .branch-heading { font-size: 15px; font-weight: 700; line-height: 1.7; }
    .branch-preview { margin-top: 9px; color: var(--text); font-size: 15px; line-height: 1.9; }
    .branch-lock { display: block; margin-top: 8px; text-align: center; }
    .branch-continue { display: block; width: 100%; min-height: 44px; margin-top: 8px; padding: 9px 8px; border: 1px solid #7d8ea5; border-radius: 9px; background: #253142; color: var(--text); font-size: 13px; }
    .branch-continue:not(:disabled):hover { border-color: var(--silver); background: #303f54; }
    #concern-card { scroll-margin-block: 18px; border-radius: 6px; }
    #concern-card.concern-highlight { outline: 2px solid #d9b45a; outline-offset: 8px; background: #d9b45a12; }
    .icon { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
    .branch .icon { margin-top: 4px; color: var(--silver); width: 15px; height: 15px; flex-basis: 15px; }
    .locked-lines { height: 36px; margin-top: 15px; overflow: hidden; filter: blur(3px); opacity: .4; }
    .locked-lines i { display: block; width: 90%; height: 5px; margin-bottom: 7px; border-radius: 5px; background: #8795ac; }
    .locked-lines i:last-child { width: 63%; }
    .topic-choices { margin-top: 17px; }
    .skip { margin-top: 10px; padding: 6px 0; min-height: 40px; text-decoration: underline; text-underline-offset: 4px; }
    .typing .bubble { width: 71px; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 5px; }
    .typing i { width: 5px; height: 5px; background: #c9d1de; border-radius: 50%; animation: pulse 1s ease-in-out infinite; }
    .typing i:nth-child(2) { animation-delay: .15s; }
    .typing i:nth-child(3) { animation-delay: .3s; }
    .footer { flex: none; padding: 12px 14px max(16px, env(safe-area-inset-bottom, 0px)); border-top: 1px solid #232833; background: #0b0d11; z-index: 2; }
    .footer .examples { margin-bottom: 12px; }
    .examples .chip { border-radius: 12px; padding: 9px 11px; font-size: 13px; }
    .examples .chips { gap: 6px; }
    .composer-label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 13px; }
    .composer { display: flex; align-items: flex-end; gap: 7px; }
    textarea { display: block; width: 100%; flex: 1; min-width: 0; height: 52px; min-height: 52px; max-height: 126px; padding: 13px 12px; resize: none; border-radius: 14px; background: var(--panel); color: var(--text); font-size: 16px; line-height: 24px; overflow-y: auto; }
    textarea::placeholder { color: var(--muted); opacity: 1; }
    textarea:disabled { opacity: .75; }
    .square { flex: 0 0 44px; min-height: 52px; display: grid; place-items: center; border-radius: 13px; background: var(--panel); font-size: 19px; }
    .send { background: var(--text); border-color: var(--text); color: var(--bg); }
    .send:disabled { background: #242b36; border-color: #303744; color: #8b94a3; }
    .send .icon { width: 21px; height: 21px; }
    .primary { width: 100%; min-height: 56px; padding: 13px 15px; border: 1px solid var(--text); border-radius: 13px; background: var(--text); color: var(--bg); font-weight: 600; line-height: 1.5; }
    .primary:hover { background: #fff; }
    .secondary { background: var(--panel); color: var(--text); border-color: #535d6e; }
    .secondary:hover { background: #222a36; }
    .pay-bar { margin-bottom: 11px; }
    .pay-bar:last-child { margin-bottom: 0; }
    .pay-bar .primary { display: flex; align-items: center; justify-content: space-between; }
    .pay-bar .icon { width: 17px; height: 17px; }
    .report-view { padding: 23px 20px 30px; }
    .report-head { padding: 7px 0 23px; border-bottom: 1px solid #495465; margin-bottom: 24px; }
    .report-head .label { letter-spacing: .08em; }
    .report-title { font: 600 27px/1.65 var(--serif); letter-spacing: -.05em; }
    .report-section { padding: 22px 0; border-bottom: 1px solid #29313f; }
    .report-section:first-child { padding-top: 0; }
    .report-section .core { font-size: 22px; }
    .report-section:last-child { border-bottom: 0; }
    .report-meta { margin-top: 17px; color: var(--muted); font-size: 13px; }
    .report-note { margin-top: 24px; background: var(--bubble); border-radius: 13px; padding: 15px; color: var(--silver); font-size: 13px; }
    .direct-answer { font-size: 16px; line-height: 2; }
    .quote-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 13px 0; }
    .quote-chip { padding: 5px 9px; border-radius: 6px; background: #c9d1de; color: #111722; font-size: 13px; line-height: 1.65; }
    .done-button { display: flex; align-items: center; gap: 9px; min-height: 46px; margin-top: 16px; padding: 9px 13px; border-radius: 11px; background: var(--panel); }
    .done-button[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
    .check-circle { width: 19px; height: 19px; border: 1px solid #a3acbb; border-radius: 50%; display: grid; place-items: center; font-size: 13px; line-height: 1; }
    .dream-card { position: relative; width: min(100%, 214px); aspect-ratio: 9 / 16; margin: 0 auto; border: 1px solid #586273; overflow: hidden; border-radius: 15px; background: #171e29; }
    .dream-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .dream-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #070b1280, #070b1245 30%, #070b12ed 85%); }
    .dream-card figcaption { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 20px 17px; }
    .dream-card-title { font: 600 16px/1.8 var(--serif); }
    .dream-card-line { margin-bottom: 22px; font: 600 23px/1.85 var(--serif); letter-spacing: -.05em; word-break: keep-all; }
    .card-bottom { display: flex; align-items: center; justify-content: space-between; color: #d3dbe6; font-size: 13px; }
    .card-bottom .serif { font-size: 20px; }
    .share-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 16px; }
    .share-actions button { min-height: 48px; padding: 8px 5px; border-radius: 10px; background: var(--panel); font-size: 13px; }
    .reminder { width: 100%; display: flex; gap: 10px; align-items: center; justify-content: space-between; border: 0; background: none; padding: 15px 0 0; margin-top: 15px; border-top: 1px solid var(--line); font-size: 13px; text-align: left; }
    .switch-track { flex: 0 0 35px; height: 21px; border-radius: 20px; padding: 3px; background: #414b59; }
    .switch-track::after { content: ""; display: block; width: 15px; height: 15px; border-radius: 50%; background: #eef1f5; transition: transform .2s; }
    .reminder[aria-checked="true"] .switch-track { background: #9ba9bd; }
    .reminder[aria-checked="true"] .switch-track::after { transform: translateX(14px); }
    .modal { position: absolute; inset: 0; z-index: 10; display: flex; align-items: flex-end; background: #000b; }
    .sheet { width: 100%; max-height: 94%; display: flex; flex-direction: column; border: 1px solid #424c5d; border-bottom: 0; border-radius: 25px 25px 0 0; background: #12151b; box-shadow: 0 -15px 60px #0006; animation: sheet-in .28s ease-out; }
    .sheet-handle { flex: none; width: 36px; height: 4px; border-radius: 5px; background: #626e80; margin: 11px auto 0; }
    .sheet-top { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 4px 18px 0; }
    .sheet-top .label { margin: 0; }
    .close { min-width: 44px; min-height: 44px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; }
    .sheet-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1px 21px max(22px, env(safe-area-inset-bottom, 0px)); scrollbar-width: thin; scrollbar-color: #4e596a transparent; }
    .sheet h2 { font-size: 19px; line-height: 1.8; letter-spacing: -.035em; }
    .sheet-question { display: block; font-size: 21px; font-weight: 600; color: #f3f5f9; margin-bottom: 5px; overflow-wrap: anywhere; }
    .included { padding: 0; margin: 20px 0 11px; list-style: none; }
    .included li { display: flex; align-items: baseline; gap: 9px; margin-bottom: 7px; }
    .tick { color: #c9d1de; }
    .extra-questions { color: var(--silver); font-size: 13px; margin-left: 23px; }
    .example-reading { margin: 19px 0; border: 1px solid #3d4655; background: #1a1f28; border-radius: 13px; padding: 14px; }
    .example-reading .label { color: var(--silver); margin-bottom: 12px; }
    .example-before { color: #b8c1cf; font-size: 15px; }
    .example-after { border-top: 1px solid #475263; margin-top: 11px; padding-top: 11px; font-size: 15px; }
    .example-reading small { display: block; margin-bottom: 4px; font-size: 13px; color: var(--muted); }
    .price { display: flex; align-items: baseline; justify-content: space-between; margin: 22px 0 12px; }
    .price strong { font-size: 27px; font-weight: 600; line-height: 1.5; letter-spacing: -.04em; }
    .payment-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
    .payment-buttons button { min-height: 56px; padding: 10px 4px; border-radius: 11px; background: var(--text); border-color: var(--text); color: var(--bg); font-size: 15px; font-weight: 600; }
    .payment-buttons button:disabled { opacity: .65; }
    .payment-status { padding: 17px 0 0; text-align: center; font-size: 15px; color: #e8eef7; }
    .assurance { margin-top: 17px; color: var(--muted); font-size: 13px; line-height: 1.8; }
    .no-signup { margin-top: 12px; text-align: center; color: var(--silver); font-size: 13px; }
    .toast { position: absolute; z-index: 20; left: 18px; right: 18px; bottom: max(112px, calc(env(safe-area-inset-bottom, 0px) + 100px)); padding: 12px 15px; border: 1px solid #7f8da1; border-radius: 12px; background: #e9eef5; color: #111722; font-size: 13px; box-shadow: 0 8px 28px #0007; text-align: center; pointer-events: none; }
    noscript { padding: 20px; }
    @keyframes pulse { 0%, 70%, 100% { opacity: .4; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-3px); } }
    @keyframes arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
    @media (max-width: 600px) {
      .stage { padding: 0; }
      .phone { width: 100%; height: 100%; max-width: none; border: 0; border-radius: 0; box-shadow: none; }
    }
    @media (max-width: 350px) {
      .app-head { gap: 8px; padding-inline: 13px; }
      .transcript { padding-inline: 10px; }
      .bubble { padding: 12px; }
      .avatar { flex-basis: 25px; height: 25px; }
      .message { gap: 6px; }
      .feeling-group .chips { gap: 4px; }
      .feeling-group .chip { font-size: 15px; padding-inline: 1px; }
      .core { font-size: 21px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    }

/* Live test: keep the prototype's visual vocabulary and adapt real forms. */
.phone { width: 430px; height: min(920px, 100%); }
input { width: 100%; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); font: inherit; font-size: 16px; }
input:focus-visible, a:focus-visible { outline: 2px solid #d6e2f4; outline-offset: 3px; }
input::placeholder { color: var(--muted); }
button:disabled { cursor: default; }
.primary:disabled { opacity: .55; }
.primary:disabled:hover { background: var(--text); }
.login-screen { position: relative; height: 100%; overflow: auto; }
.login-world { display: block; width: 100%; height: 29%; min-height: 130px; object-fit: cover; opacity: .8; mask-image: linear-gradient(#000 65%, transparent); }
.login-content { position: relative; padding: 4px 28px 30px; }
.login-content .brand { font-size: 40px; margin-bottom: 18px; }
.login-copy { font-size: 20px; margin-bottom: 10px; }
#login-form { margin-top: 27px; }
#login-submit { margin-top: 14px; }
.privacy-note { padding: 17px 22px 0; font-size: 11px; line-height: 1.8; color: #8b95a5; }
.login-content .privacy-note { padding: 22px 0 0; }
.transcript { padding-top: 20px; }
.bubble p, .bubble blockquote { white-space: pre-wrap; }
.bubble .small { font-size: 12px; }
.reading-title { margin: 0 0 12px; }
.section-gap { margin-top: 16px; }
.feeling-group .chips { display: flex; flex-wrap: wrap; }
.feeling-group .chip { min-width: 64px; max-width: 100%; padding-inline: 10px; white-space: normal; overflow-wrap: anywhere; }
.feeling-custom { display: flex; gap: 6px; margin-top: 9px; }
.feeling-custom input { min-height: 44px; padding: 8px 10px; }
.feeling-custom button { border-radius: 9px; padding: 5px 10px; background: var(--text); color: var(--bg); white-space: nowrap; }
.feeling-submit { margin-top: 18px; min-height: 48px; }
.selection-guide { margin: 0 0 12px; font-size: 13px; color: var(--silver); }
.selection-hint { margin: 8px 0 0; font-size: 12px; color: var(--silver); }
.topic-submit { display: block; width: 100%; margin-top: 18px; min-height: 48px; }
.typing .message-body { width: 100%; }
.typing-text { margin: 8px 2px 0; font-size: 12px; color: var(--muted); }
.footer-hint { text-align: center; font-size: 12px; padding: 2px 3px; }
#skip-question { display: block; margin: 5px auto 0; min-height: 34px; }
.test-banner { padding: 9px 14px; margin-top: 9px; color: #332c08; background: #f0d36d; font-size: 12px; font-weight: 600; text-align: center; }
.phone-field { margin: 17px 0; }
.phone-field .label { margin-bottom: 6px; }
.phone-field .small { font-size: 11px; margin-top: 6px; }
.error-card .bubble { border: 1px solid #93766e; background: #241e21; }
.form-error, #payment-error, #feedback-error { color: #efc6b9; font-size: 13px; line-height: 1.8; margin-top: 12px; }
.retry-button { min-height: 42px; padding: 8px 13px; border-radius: 10px; background: #28272e; color: var(--text); margin-top: 10px; }
.crisis-card .bubble { border-color: #9aa9bd; background: #1c2530; }
.crisis-phone { display: block; color: #eef1f5; font-size: 28px; font-weight: 600; text-decoration: none; margin: 14px 0 4px; }
.crisis-card p + p { margin-top: 12px; }
.answer-part { display: flex; gap: 10px; margin-top: 15px; }
.answer-number { display: grid; place-items: center; flex: 0 0 25px; height: 25px; margin-top: 5px; border: 1px solid #aab6c9; border-radius: 50%; font-size: 12px; }
.answer-part p { flex: 1; min-width: 0; }
.feedback-sheet .sheet-top { padding-bottom: 12px; }
.feedback-group { border: 0; margin: 22px 0; padding: 0; min-width: 0; }
.feedback-group legend { padding: 0; margin-bottom: 12px; font-size: 15px; }
.rating-options { display: flex; gap: 8px; }
.rating-options button { flex: 1; min-width: 0; border-radius: 10px; min-height: 44px; padding: 8px 0; background: var(--panel); }
.rating-options button[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.rating-help { font-size: 11px; margin-top: 8px; }
#feedback-form textarea { height: 80px; max-height: none; margin: 0 0 18px; font-size: 14px; }
#feedback-submit { margin-top: 16px; }
.feedback-preview .rating-options { margin-top: 15px; }
.feedback-preview .text-button { padding-left: 0; margin-top: 10px; }
.thanks-card .primary { margin-top: 20px; }
.sheet-scroll { overflow-wrap: anywhere; }
@media (max-width: 600px) { .phone { width: 100%; height: 100%; } }
@media (max-height: 600px) { .login-world { height: 100px; min-height: 100px; } .login-content .brand { font-size: 30px; margin-bottom: 8px; } #login-form { margin-top: 18px; } }

/* A paid reading is a standalone document, outside the conversation. */
.report-screen { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.report-nav { display: flex; align-items: center; justify-content: space-between; flex: 0 0 48px; padding: 0 18px; border-bottom: 1px solid var(--line); background: var(--bg); }
.report-nav .brand { font-size: 22px; }
.report-nav .text-button { padding: 0; min-width: 64px; min-height: 44px; }
.report-nav .text-button:last-child { text-align: right; }
.report-document { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; font-size: 16px; line-height: 1.8; overflow-wrap: anywhere; word-break: keep-all; }
.report-document p, .report-document blockquote { white-space: pre-wrap; }
.report-document > .report-section { padding: 32px 24px; margin: 0; border-bottom: 1px solid #262c36; }
.report-document h2 { font-size: 18px; margin-bottom: 18px; }
.report-document .report-question-label { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.report-headline { font: 600 22px/1.8 var(--serif); border-left: 3px solid #d9b45a; padding-left: 16px; margin-top: 24px; color: #e8d3a4; }
.report-hero, .report-interlude { position: relative; isolation: isolate; margin: 0; overflow: hidden; }
.report-hero { height: 300px; }
.report-hero img, .report-interlude img { display: block; width: 100%; height: 100%; object-fit: cover; }
.report-hero::after, .report-interlude::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #0b0d1110 15%, #0b0d11f5); z-index: 1; }
.report-hero figcaption { position: absolute; z-index: 2; bottom: 24px; left: 24px; right: 24px; }
.report-hero h1 { font: 600 26px/1.65 var(--serif); margin: 8px 0; }
.report-hero time { font-size: 13px; color: var(--silver); }
.symbol-card { padding: 20px; margin-top: 14px; border: 1px solid #3a404d; border-radius: 14px; background: var(--panel); }
.symbol-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 18px; }
.symbol-card .tradition-badge { margin: 0 0 8px; font-size: 12px; }
.symbol-card p + .tradition-badge { margin-top: 20px; }
.symbol-card .personal-badge { border-color: #d9b45a; color: #e9cb84; }
.report-interlude { height: 180px; }
.report-interlude figcaption { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; font: 600 21px/1.8 var(--serif); }
.report-interlude::after { background: #090d146b; }
.report-document .direct-answer { line-height: 1.8; }
.report-answer-list { list-style: none; padding: 0; margin: 18px 0 0; }
.report-answer-list .answer-number { border-color: #d9b45a; color: #e9cb84; }
.report-link + .report-link { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.report-link h3 { font-size: 17px; }
.report-followup-form textarea { height: 80px; max-height: 160px; }
.report-followup-form .primary { margin-top: 12px; }
.report-followup-card { margin-top: 20px; padding: 18px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.report-followup-card blockquote { color: #e9cb84; margin-bottom: 12px; }
.report-document #feedback-form textarea { font-size: 16px; }
.report-form-screen { flex: 1; min-height: 0; overflow: auto; padding: 24px 24px; }
.report-form-screen h1 { font-size: 22px; line-height: 1.5; margin: 0 0 16px; word-break: keep-all; }
#report-context-form > label { display: block; margin: 14px 0 8px; font-size: 15px; }
#birth-date, #birth-time { display: block; width: 100%; min-width: 0; height: 46px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); font: inherit; color-scheme: dark; }
.birth-calendar-row { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.birth-calendar-row .chips { margin: 0; }
#birth-leap-label { font-size: 14px; white-space: nowrap; }
#birth-leap { width: auto; accent-color: #d9b45a; }
.birth-notice { margin: 16px 0 0; }
#report-context-form .text-button { display: block; margin: 8px auto 0; min-height: 44px; }
#report-context-form .chip[aria-pressed='true'] { background: #d9b45a; border-color: #d9b45a; color: var(--bg); }
#make-report { margin-top: 18px; }
.saju-week { list-style: none; margin: 0 0 28px; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.saju-day { padding: 12px 14px; font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; background: var(--panel); }
.saju-day + .saju-day { border-top: 1px solid var(--line); }
.saju-day-today { color: #d9b45a; border-left: 3px solid #d9b45a; font-weight: 600; }
.payment-saju-note { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
.report-loading { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 30px 24px; text-align: center; }
.report-loading h1 { font-size: 24px; line-height: 1.8; margin: 28px 0 20px; }
.report-loading p { color: var(--muted); font-size: 14px; }
.loading-moon { width: 64px; height: 64px; border-radius: 50%; box-shadow: inset -18px -5px 0 #d9b45a; animation: pulse 3s infinite; }
.loading-progress { width: 150px; height: 3px; margin-top: 28px; background: var(--line); overflow: hidden; }
.loading-progress i { display: block; width: 100%; height: 100%; background: #d9b45a; transform-origin: left; animation: report-progress 18s linear forwards; }
@keyframes report-progress { from { transform: scaleX(.02); } to { transform: scaleX(1); } }
.free-symbol-image { display: block; width: 100%; height: 180px; object-fit: cover; border-radius: 12px; }
.report-image-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.report-preview-image { position: relative; min-width: 0; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; background: var(--panel); }
.report-preview-image img { display: block; width: 100%; height: 100%; object-fit: cover; filter: blur(6px); transform: scale(1.12); opacity: .65; }
.report-preview-image figcaption { position: absolute; inset: 0; display: grid; place-items: center; padding: 8px; text-align: center; font-size: 12px; line-height: 1.6; color: #fff; background: #090d1440; }
.report-reopen { width: 100%; margin: 5px 0; }
/* Focus and the visual viewport both compact the chat, including resizes-content keyboards. */
.keyboard-open .top { height: 44px; padding: 0; position: relative; }
.keyboard-open .utility { position: absolute; right: 12px; inset-block: 0; padding: 0; }
.keyboard-open .utility > span, .keyboard-open .progress, .keyboard-open .hero,
.keyboard-open #privacy-note, .keyboard-open .composer-label, .keyboard-open .footer-hint,
.keyboard-open .test-banner { display: none; }
.keyboard-open .app-head { height: 44px; padding: 0 14px; }
.keyboard-open .app-head .brand { font-size: 22px; }
.keyboard-open .footer { padding: 8px 12px max(8px, env(safe-area-inset-bottom, 0px)); }
.keyboard-open #conversation { flex: 0 1 var(--chat-height); height: var(--chat-height); }
.keyboard-open #message-input { max-height: 88px; }
#feedback-form textarea { font-size: 16px; }

/* Opt-in long readings: every rule is scoped to the new document/checkout. */
.report-document.longreport { font-size: 17px; line-height: 1.8; overflow-anchor: none; }
.longreport > .longreport-header, .longreport > .longreport-toc,
.longreport > .longreport-chapter, .longreport > .report-section {
  width: 100%; max-width: 680px; margin-inline: auto; padding-inline: 20px;
}
.longreport-header { padding-block: 32px 24px; }
.longreport-header h1 { font: 600 28px/1.6 var(--serif); letter-spacing: -.04em; margin-bottom: 20px; }
.longreport-header .report-hero { height: auto; aspect-ratio: 16 / 10; border-radius: 14px; margin-bottom: 24px; }
.longreport > .report-interlude { width: calc(100% - 40px); max-width: 640px; margin: 24px auto 0; border-radius: 14px; }
.report-symbol-image { margin: 0 0 20px; width: 100%; aspect-ratio: 16 / 7; overflow: hidden; border-radius: 12px; background: var(--panel); }
.report-symbol-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.longreport-header .dream-verdict { font-size: 18px; margin-bottom: 14px; }
.longreport-summary { color: #e9cb84; font-size: 14px; }
.longreport-status, .longreport-notice { color: var(--silver); font-size: 13px; margin-top: 10px; }
.longreport-notice { color: #efc6b9; }
.report-document > .report-summary { width: calc(100% - 40px); max-width: 640px; margin: 24px auto; padding: 16px; border: 1px solid #495465; border-radius: 14px; background: var(--panel); font-size: 18px; line-height: 1.8; }
.report-summary > summary { min-height: 44px; cursor: pointer; color: #f2ddb1; }
.report-summary > summary h2 { display: inline; font-size: 20px; margin: 0; }
.report-summary > summary:focus-visible, .report-summary a:focus-visible { outline: 2px solid #d6e2f4; outline-offset: 3px; border-radius: 4px; }
.report-summary-lines { margin: 16px 0 0; padding-left: 20px; list-style: disc; }
.report-summary-lines li + li { margin-top: 10px; }
.report-summary-lines li::marker { color: #d9b45a; font-size: 12px; }
.report-summary-chapters { margin-top: 24px; }
.report-summary-chapters h3 { font-size: 15px; color: var(--silver); margin-bottom: 12px; }
.report-summary-chapters ul { list-style: none; margin: 0; padding: 0; }
.report-summary-chapters li { border-top: 1px solid var(--line); }
.report-summary-chapters a { display: block; min-height: 44px; padding: 12px 0; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.report-summary-chapters a:hover .report-summary-point { text-decoration: underline; text-underline-offset: 4px; }
.report-summary-chapter-title { display: block; color: var(--silver); font-size: 13px; margin-bottom: 4px; }
.report-summary-point { display: block; }
.report-summary-pending { color: var(--muted); }
.longreport > .longreport-toc { width: calc(100% - 40px); max-width: 640px; padding: 20px 16px; border: 1px solid #495465; border-radius: 14px; background: var(--panel); }
.longreport .longreport-toc h2 { font-size: 17px; margin-bottom: 18px; }
.longreport-toc ol, .longreport-toc ul { list-style: none; margin: 0; padding: 0; }
.longreport-toc ol > li + li { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.longreport-toc a { display: flex; align-items: center; min-height: 44px; padding-block: 7px; color: var(--text); text-decoration: none; font-size: 16px; font-weight: 600; line-height: 1.6; }
.longreport-toc ul a { min-height: 44px; padding-left: 12px; color: var(--silver); font-size: 14px; font-weight: 400; }
.longreport-toc a:hover { text-decoration: underline; text-underline-offset: 4px; }
.longreport-chapter { padding-block: 40px 32px; border-bottom: 1px solid var(--line); }
.longreport .longreport-chapter-title { font: 600 25px/1.6 var(--serif); margin-bottom: 28px; letter-spacing: -.035em; }
.longreport-chapter-number { display: block; margin-bottom: 8px; color: #e9cb84; font: 600 14px/1.8 var(--sans); letter-spacing: .04em; }
.longreport-part + .longreport-part { margin-top: 36px; }
.longreport-part h3 { font-size: 20px; line-height: 1.65; margin-bottom: 18px; }
.longreport-point { border-left: 3px solid #d9b45a; padding: 5px 0 5px 15px; margin-bottom: 1em; font-weight: 700; color: #f2ddb1; }
.longreport-body + .longreport-body { margin-top: 1em; }
.longreport-more { margin-top: 1em; border-top: 1px solid var(--line); }
.longreport-more > summary { min-height: 44px; padding: 10px 4px; color: #d9b45a; font-size: 15px; line-height: 1.6; cursor: pointer; overflow-wrap: anywhere; }
.longreport-more > summary:focus-visible { outline: 2px solid #d9b45a; outline-offset: 3px; border-radius: 4px; }
.longreport-more[open] > summary { margin-bottom: 10px; }
.report-loading-failed .loading-moon, .report-loading-failed .loading-progress, .report-loading-failed h1 { display: none; }
.longreport h2:focus-visible, .longreport h3:focus-visible { outline: 2px solid #d6e2f4; outline-offset: 5px; }
.longreport-luck { margin-bottom: 28px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.longreport-quotes { margin-bottom: 28px; padding: 16px; background: var(--panel); border-radius: 12px; }
.longreport-quotes blockquote { color: #e9cb84; font-size: 16px; }
.longreport-quotes blockquote + blockquote { margin-top: 12px; }
.longreport-week { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.longreport-week h3 { font-size: 17px; }
.longreport-placeholder { position: relative; min-height: 190px; padding: 20px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--silver); }
.longreport-placeholder p { font-size: 16px; }
.longreport-pending-anchor { display: block; height: 0; scroll-margin-top: 20px; }
.longreport-placeholder-lines { margin-top: 22px; }
.longreport-placeholder-lines i { display: block; width: 100%; height: 9px; margin-top: 15px; border-radius: 8px; background: linear-gradient(90deg, #29313f, #455064, #29313f); background-size: 200% 100%; animation: longreport-shimmer 2.5s ease-in-out infinite; }
.longreport-placeholder-lines i:last-child { width: 62%; }
.longreport-failed { border-color: #93766e; }
.longreport-failed .retry-button { min-height: 44px; }
.longreport-reading-progress { flex: 0 0 3px; height: 3px; background: var(--line); }
.longreport-reading-progress > span { display: block; width: 0; height: 100%; background: #e9cb84; }
.longreport-next { flex: none; width: 100%; min-height: 52px; padding: 12px 20px max(12px, env(safe-area-inset-bottom, 0px)); border: 0; border-top: 1px solid #495465; background: var(--panel); color: #f2ddb1; font-size: 14px; font-weight: 600; line-height: 1.6; text-align: center; overflow-wrap: anywhere; }
.payment-report-outline { margin-block: 22px; padding: 18px 15px; border: 1px solid #495465; border-radius: 13px; background: #1a1f28; }
.payment-report-outline h3 { color: #e9cb84; font-size: 18px; }
.payment-report-outline ol { list-style: none; margin: 18px 0; padding: 0; }
.payment-report-outline li + li { margin-top: 15px; }
.payment-report-outline strong { font-size: 15px; }
.payment-report-outline li p { color: var(--silver); font-size: 13px; line-height: 1.8; margin-top: 4px; }
.longreport-link-note { color: #eef1f5; font-size: 13px; padding-top: 14px; border-top: 1px solid #495465; }
@keyframes longreport-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .longreport-placeholder-lines i { animation: none; } }
.info-link{color:inherit;text-decoration:underline;text-underline-offset:2px}