@import url("book-contents-layer.css?v=20261113-attach-1");
@import url("book-titles.css?v=20261112-css-tidy-1");
@import url("book-mobile-nav.css?v=20261101-menu-noborder-1");
.cover-template-arrow { width:24px; height:40px; padding:0; border:0; background:#fff; color:#ff664e; font-size:34px; line-height:1; cursor:pointer; }
.cover-template-arrow:disabled { visibility:hidden; }
.cover-template-arrow:focus-visible { outline:0; color:#d90050; background:var(--ecreat-soft); }
:root {
      --ink: var(--ecreat-ink);
      --muted: #9caabd;
      --line: #e9edf4;
      --red: var(--ecreat-accent);
      --blue: var(--ecreat-accent);
      --topbar-action-text: #3f4650;
    }
    * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
    html, body { margin: 0; min-height: 100%; background: #f4f6fb; color: var(--ink); font-family:var(--ecreat-font); }
    html:has(.player-app) { scrollbar-gutter: stable; }
    .player-app[data-carousel=true] { position: relative; overflow-x: clip; }
    .bgm-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 8px 0 14px; }
    .bgm-volume { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; max-width:100%; font-size:14px; }
    .bgm-volume[hidden] { display:none; }
    .bgm-volume label { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
    .bgm-volume input { width:130px; min-height:44px; accent-color:var(--pink,#ff075f); }
    .bgm-volume output { min-width:3em; }
    .bgm-volume [role="status"] { flex-basis:100%; font-size:12px; }
    .bgm-compact { flex-wrap:nowrap; gap:6px; }
    .bgm-compact label { flex-wrap:nowrap; white-space:nowrap; min-width:0; }
    .bgm-compact input { width:96px; min-width:0; }
    .bgm-close { flex:0 0 28px; width:28px; height:28px; padding:0; border:0; border-radius:50%; background:transparent; color:inherit; font-size:22px; line-height:1; cursor:pointer; }
    .bgm-close[aria-pressed="false"] { opacity:.45; }
    .bgm-compact [role="status"]:empty { display:none; }
    .bgm-row[hidden] { display: none; }
    /* Arrows between contents on every device (swipe still works): inside the screen, outside the card on wide PC screens. */
    .book-carousel-arrow { position: absolute; top: 200px; z-index: 5; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0 0 4px; border: 1px solid #d7dde8; border-radius: 50%; background: #fff; color: var(--ink); font: inherit; font-size: 28px; line-height: 1; cursor: pointer; }
    .book-carousel-arrow[data-step="-1"] { left: 8px; }
    .book-carousel-arrow[data-step="1"] { right: 8px; }
    .book-carousel-arrow:focus-visible { outline: none; border-color: var(--ink); }
    .book-carousel-arrow:disabled { display: none; }
    @media (hover: hover) and (pointer: fine) { .book-carousel-arrow:hover { border-color: var(--ink); } }
    @media (hover: hover) and (pointer: fine) and (min-width: 720px) {
      html:has(.player-app[data-carousel=true]) { overflow-x: clip; }
      .player-app[data-carousel=true] { overflow: visible; clip-path: inset(0 -64px); }
      .book-carousel-arrow[data-step="-1"] { left: -56px; }
      .book-carousel-arrow[data-step="1"] { right: -56px; }
    }
    .player-app[data-carousel=true] .book-carousel-panel { touch-action: pan-y; will-change: transform; }
    .player-app[data-carousel=true] .cover-art { -webkit-user-drag: none; user-select: none; }
    /* Cover, book information and chapters appear together once the content data and cover are ready. */
    .player-app .cover-image-open, .player-app .cover-manuscript, .player-app .book-info, .player-app .chapter-list { transition: opacity .18s ease-out; }
    .player-app[data-loading] .cover-image-open, .player-app[data-loading] .cover-manuscript, .player-app[data-loading] .book-info, .player-app[data-loading] .chapter-list { opacity: 0; }
    .player-app[data-loading] .cover-open { background: #eef1f7; }
    body { display: flex; justify-content: center; }
    button { font: inherit; color: inherit; cursor: pointer; }
    .register-button { gap:9px; margin-top:18px; font-size:21px; font-weight:900; box-shadow:0 5px 12px #ff176c2b; }
    .register-button:active { transform:none; }
    .voice-letter-record-button { width:112px; height:112px; flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; padding:10px; border:0; border-radius:50%; background:var(--ecreat-primary); color:#fff; font-size:18px; font-weight:700; white-space:nowrap; }
    .voice-letter-record-button { box-shadow:0 4px 8px #ff176c30, inset 0 1px 0 #ffffff40, inset 0 -2px 0 #b90f4929; }
    .voice-letter-record-button:hover:not(:disabled) { background:var(--ecreat-primary); }
    .voice-letter-record-button:active:not(:disabled) { box-shadow:0 1px 3px #ff176c26, inset 0 2px 3px #b90f4929; }
    .voice-letter-record-button:focus-visible { outline:2px solid #a62450; outline-offset:3px; }
    .voice-letter-record-button:disabled { opacity:.55; cursor:default; }
    .register-button span { font-size:19px; font-weight:500; }
    button:disabled { cursor:not-allowed; opacity:.65; }
    /* Player controls and the cover keep full colour even when the content has no audio or manuscript yet. */
    .player-app button:disabled { opacity: 1; cursor: default; }
    .registration-fields:disabled .source-option,.registration-fields:disabled .upload-dropzone { cursor:wait; opacity:.65; }
    .content-asset-button { display:inline-flex; align-items:center; justify-content:center; width:max-content; min-height:32px; padding:6px 10px; border:1px solid #d8b9c4; border-radius:8px; background:#fff7fa; color:#9b3658; font-size:12px; font-weight:700; line-height:1.3; white-space:nowrap; text-decoration:none; }
    .content-asset-button:hover,.content-asset-button:focus-visible { border-color:#9b3658; background:#ffe8f0; outline:none; box-shadow:none; }
    .submission-feedback { padding:12px; border:1px solid #e7d3dc; border-radius:10px; background:#fff7fa; color:#64384c; font-size:13px; line-height:1.65; overflow-wrap:anywhere; }
    .submission-feedback[hidden] { display:none; }
    .submission-feedback p { margin:0; }
    .page-intro-title,.page-section-title { margin:0; color:#1f304a; font-size:21px; line-height:1.55; font-weight:600; letter-spacing:-.025em; }
    @media (max-width:520px) { .page-intro-title,.page-section-title { font-size:clamp(11px,3.8vw,16px); line-height:1.5; white-space:nowrap; } }
    .player-app { width: min(100%, 520px); min-height: 100vh; padding: calc(env(safe-area-inset-top) + 15px) 18px env(safe-area-inset-bottom); background: linear-gradient(155deg, #fff 0%, #f8f9fd 48%, #f1f3fa 100%); overflow: hidden; }
    .content-action-button,.content-action-button:visited { display:inline-flex; align-items:center; justify-content:center; width:max-content; min-height:36px; padding:0 12px; border:1px solid var(--red); border-radius:8px; background:#fff; color:#d90050; font-size:16px; line-height:1.2; font-weight:800; white-space:nowrap; text-decoration:none; }
    .content-action-button:hover,.content-action-button:focus-visible { background:var(--ecreat-soft); border-color:#df0052; color:#df0052; outline:none; box-shadow:none; }
    .topbar-action--outlined,.topbar-action--outlined:visited { box-sizing:border-box; width:max-content; min-width:48px; height:29px; flex:0 0 auto; display:grid; place-items:center; padding:0 8px; border:1px solid #d1d5db; border-radius:0; background:#fff; color:var(--topbar-action-text); font-size:14px; line-height:1.15; font-weight:700; text-align:center; text-decoration:none; white-space:nowrap; word-break:keep-all; }
    .topbar-action--outlined:hover,.topbar-action--outlined:focus-visible { border-color:#9ca3af; background:#fff; color:var(--topbar-action-text); text-decoration:none; outline:none; }
    .gift-button,.gift-button:visited { box-sizing:border-box; width:max-content; height:27px; flex:0 0 auto; display:grid; place-items:center; padding:0 7px; border:1px solid var(--red); border-radius:0; background:var(--red); color:#fff; font-size:12px; line-height:1.15; font-weight:700; white-space:nowrap; text-decoration:none; }
    .gift-button:hover,.gift-button:focus-visible { background:#df0052; border-color:#df0052; color:#fff; outline:none; box-shadow:none; }
    .cover-card { margin: 2px 5px 0; padding: 18px 17px 16px; background: rgba(255,255,255,.86); }
    .cover-art { display: block; width: 100%; height: auto; box-shadow: 0 2px 8px #776f4233; }
    .cover-open { position: relative; display: block; width: 100%; padding: 0; border: 0; background: transparent; }
    .cover-image-open { display: block; width: 100%; padding: 0; border: 0; background: transparent; text-align: left; }
    .book-info { text-align: center; padding: 14px 0 0; }
    .book-title { display: inline-block; max-width:100%; margin: 0; padding: 7px 18px 2px; color: #252a35; font-size: clamp(23px, 6vw, 30px); line-height: 1.2; font-weight: 900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .book-subtitle { display: inline-block; margin: 0; padding: 6px 20px 4px; font-size: 18px; line-height: 26px; }
    .publisher { display: flex; flex-direction:row; flex-wrap:wrap; justify-content: center; align-items: center; gap: 0 .5em; margin: 6px 0 0; color: #292e3b; font-size: 17px; font-weight: 900; line-height:1.35; }
    #bookAuthor:empty { display: none; }
    .player { padding: 0 10px 8px; }
    .seek-wrap { margin: 2px -28px 0; padding: 16px 28px 8px; background: transparent; }
    .seek { width: 100%; height: 6px; margin: 0; appearance: none; border-radius: 99px; background: linear-gradient(to right, var(--red) 0%, #f0d9d9 0%); vertical-align: middle; }
    .seek::-webkit-slider-thumb { width: 20px; height: 20px; appearance: none; border: 0; border-radius: 50%; background: var(--red); box-shadow: 0 1px 3px #aa122266; }
    .seek::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--red); }
    .time-row { display: flex; justify-content: space-between; padding-top: 7px; color: #354e6d; font-size: 14px; }
    .control-row { min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 0; }
    .text-control { border: 0; background: none; color:var(--red); font-size: 14px; font-weight: 800; white-space: nowrap; }
    #manuscriptButton { padding: 0; }
    .cover-manuscript { position: absolute; right: 8px; bottom: 8px; width: 73px; height: 29px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 0; background: var(--red); color:var(--content-foreground,#fff); font-size: 14px; line-height: 1; font-weight: 400; }
    .skip-control { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #fff; color:var(--red); font-size: 21px; font-weight: 900; line-height: 1; }
    .main-play { width: 60px; height: 60px; flex: 0 0 60px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--red); color: #fff; box-shadow:0 5px 14px color-mix(in srgb,var(--red) 24%,transparent); font-size: 25px; }
    /* The triangle's visual centre sits left of its box, so nudge it right; the pause bars are drawn so their thickness is exact. */
    .main-play:not(.is-playing) { text-indent: 6px; }
    .main-play.is-playing { position: relative; font-size: 0; }
    .main-play.is-playing::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 14px; height: 18px; background: linear-gradient(to right, currentColor 0 4.5px, transparent 4.5px 9.5px, currentColor 9.5px); }
    .speed-wrap { position: relative; }
    .speed-menu { position: absolute; right: 0; bottom: 40px; display: none; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: white; box-shadow: 0 4px 16px #243c5922; }
    .speed-menu.open { display: grid; }
    .speed-option { padding: 7px 14px; border: 0; border-radius: 7px; background: transparent; text-align: left; }
    .speed-option.active { background:color-mix(in srgb,var(--red) 9%,white); color:var(--red); font-weight: 800; }
    .contents { margin: 0 -18px; border-radius: 28px 28px 0 0; background: rgba(240,243,252,.92); overflow: hidden; }
    .contents-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 26px 8px; }
    .contents-header h2 { margin: 0; font-size: 18px; }
    .contents-toggle { padding: 4px 9px; border:1px solid var(--red); color:var(--red); border-radius: 0; background: transparent; font-size: 14px; line-height: 1.15; font-weight: 700; }
    .chapter-list { margin: 0 24px; padding: 0; list-style: none; }
    .chapter { min-height: 77px; display: flex; align-items: center; gap: 14px; padding: 10px 2px; border-bottom: 1px solid var(--line); cursor: pointer; }
    .chapter-play { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #fff; color: var(--red); font-size: 21px; }
    .chapter:not(.active) .chapter-play { visibility: hidden; }
    .chapter-copy { flex: 1; min-width: 0; }
    .chapter-name { font-size: 17px; }
    .chapter-time { margin-top: 4px; color: #a3afc1; font-size: 14px; }
    .chapter.active .chapter-time { color: var(--blue); }
    .chapter-chevron { color: #aab6c7; font-size: 25px; }
    .dialog-backdrop { position: fixed; inset: 0; z-index: 5; display: none; align-items: flex-end; justify-content: center; background: #1118; }
    .dialog-backdrop.open { display: flex; }
    .dialog { width: min(100%, 520px); max-height: 75vh; overflow: auto; padding: 20px 22px 30px; border-radius: 22px 22px 0 0; background: white; line-height: 1.7; }
    .dialog-head { display: flex; align-items: center; justify-content: space-between; }
    .dialog-head h2 { margin: 0; font-size: 20px; }
    .dialog-close { border: 0; background: none; font-size: 26px; }
    .toast { position: fixed; left: 50%; bottom: 24px; z-index: 10; transform: translate(-50%, 15px); opacity: 0; padding: 10px 16px; border-radius: 99px; background: #17283e; color: #fff; font-size: 13px; pointer-events: none; transition: .2s; }
    .toast.show { transform: translate(-50%, 0); opacity: 1; }
    @media (min-width: 521px) { .player-app { box-shadow: 0 0 28px #0b193018; } }






    @media (hover:hover) and (pointer:fine) {
    }
    @media (hover:none) {
    }


body .customer-note { color:#68758a; font-size:13px; line-height:1.6; }
body .form-field { display:block; color:#263a57; font-size:14px; font-weight:700; }
body .voice-registration .form-field,
body .voice-registration h3 { font-size:18px; font-weight:700; }
body .voice-registration .form-field input,
body .voice-registration .form-field textarea { font-size:14px; }
body .form-field input,body .form-field select { display:block; width:100%; min-height:40px; margin-top:8px; padding:7px 12px; border:1px solid var(--ecreat-input-border); border-radius:8px; background:#fff; color:var(--ink); font:inherit; font-weight:400; }
body .form-field input:focus,body .form-field select:focus { outline:none; border-color:var(--ecreat-input-focus); }
body .form-required { color:#bd315e; font-size:11px; }
body .form-choice-group { margin:22px 0 0; padding:0; border:0; min-width:0; }
body .form-choice-group legend { padding:0; margin-bottom:10px; color:#263a57; font-size:14px; font-weight:700; }
body .form-choice-group small { color:#68758a; font-size:12px; font-weight:400; }
body .form-choices { display:flex; flex-wrap:wrap; gap:8px; }
body .form-choice { display:flex; align-items:center; gap:6px; padding:8px 10px; border:1px solid #d7dce4; border-radius:8px; color:#354e6d; font-size:13px; cursor:pointer; }
body .form-choice:has(input:checked) { border-color:var(--ecreat-input-focus); background:#fff4f7; }
body .form-choice:focus-within { border-color:var(--ecreat-input-focus); }
body .form-choice input { margin:0; accent-color:var(--ecreat-input-focus); }

body .choice-add-button { width:32px; min-width:32px; height:32px; padding:0; border-radius:50%; align-self:center; font-size:21px; font-weight:400; }

body .choice-confirm-button { border-radius:8px; }

.custom-choice { position:relative; display:inline-flex; }
body .custom-choice .form-choice { padding-right:23px; }
body .choice-remove-button { position:absolute; top:1px; right:2px; width:20px; height:20px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:transparent; color:#68758a; font-size:15px; line-height:1; }
body .choice-remove-button:hover,body .choice-remove-button:focus-visible { color:#bd315e; background:#fff0f4; outline:none; }

body .form-validation-error { display:flex; align-items:center; gap:7px; margin-top:8px; color:#111; font-size:12px; line-height:1.5; font-weight:400; }
body .form-validation-icon { display:inline-grid; place-items:center; width:17px; height:17px; flex:0 0 17px; border-radius:50%; background:#111; color:#fff; font-size:12px; line-height:1; font-weight:700; }
body .form-field [aria-invalid="true"] { border-color:#111; }

body .form-field textarea { display:block; width:100%; min-height:130px; margin-top:8px; padding:10px 12px; border:1px solid var(--ecreat-input-border); border-radius:8px; background:#fff; color:var(--ink); font:inherit; font-weight:400; line-height:1.6; resize:vertical; }
body .form-field textarea:focus { outline:none; border-color:var(--ecreat-input-focus); }







.voice-record-button { width:112px; height:112px; display:inline-grid; place-items:center; padding:0 8px; border:1px solid var(--red); border-radius:50%; background:var(--red); color:#fff; font:inherit; font-size:22px; font-weight:800; line-height:1.2; white-space:nowrap; }
.voice-record-button:hover,.voice-record-button:focus-visible,.voice-record-button[aria-pressed="true"] { border-color:#c9004c; background:#c9004c; outline:none; box-shadow:none; }
.voice-editor-note { margin:0; color:#68758a; font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.voice-record-time { font-size:26px; font-variant-numeric:tabular-nums; }

.register-button.voice-apply-button { font-size:clamp(13px,3.8vw,18px); padding-left:10px; padding-right:10px; }

/* The complete book panel moves together; playback controls retain their own gestures. */

/* Shared content form heading size, including mobile screens. */
body .my-content-app .field-label,
body .my-content-app .source-fieldset legend,
body .my-content-app .upload-label,
body .my-content-app .section-heading h2,
body .my-content-app .page-section-title,
body .voice-app .section-heading h2,
body .voice-app .section-heading h3 { font-size:18px; font-weight:700; }

/* 녹음파일 첨부 is blue; .register-button (book-ui.css) can load later, so the pair selector keeps the blue. */
.audio-upload-button,.register-button.audio-upload-button { display:block; width:100%; min-height:56px; margin-top:12px; background:#2563eb; box-shadow:0 5px 12px #2563eb2b; font-size:18px; cursor:pointer; }
.register-button.audio-upload-button:hover,.register-button.audio-upload-button:focus-visible { background:#1d4ed8; }
.cover-preview-dialog { position:fixed; inset:0; box-sizing:border-box; width:100vw; max-width:none; height:100dvh; max-height:none; margin:0; padding:0; border:0; background:#111; }
.cover-preview-dialog::backdrop { background:#111; }
.cover-preview-close { display:flex; align-items:center; justify-content:center; width:100%; height:100%; padding:0; border:0; background:transparent; cursor:zoom-out; }
.cover-preview-close img { display:block; width:100%; height:100%; object-fit:contain; }
.cover-preview-close:focus-visible { outline:0; box-shadow:inset 0 0 0 2px #fff; }
body.cover-preview-open { overflow:hidden; }

.cover-preview-delete { position:absolute; bottom:calc(24px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); padding:10px 18px; border:0; border-radius:8px; background:#fff; color:var(--ecreat-ink); font:700 16px Arial,"Malgun Gothic",sans-serif; cursor:pointer; }
.cover-preview-delete:focus-visible { outline:0; background:#ffe5ef; }

.form-section-heading { display:flex; align-items:center; gap:10px; margin-bottom:19px; }
.form-section-step { width:29px; height:29px; flex:0 0 29px; display:grid; place-items:center; border-radius:50%; background:#fff0f4; color:#e72b6a; font:900 12px/1 Arial,"Malgun Gothic",sans-serif; }
.form-section-heading h2 { margin:0; }
.form-section-heading .page-section-title { font-size:21px; line-height:1.4; }

.cardbook-help-button { display:flex; justify-content:center; align-items:center; gap:8px; min-height:40px; margin:0 0 16px; padding:8px 12px; border:1px solid #f0cad9; border-radius:8px; color:#b72a5d; background:#fff5f9; font-size:14px; font-weight:700; text-decoration:none; white-space:nowrap; }
.cardbook-help-button:focus-visible { outline:none; background:#ffe5ef; }
.cardbook-cover-option { display:flex; flex-direction:column; gap:7px; min-width:0; padding:4px; border:2px solid transparent; border-radius:8px; background:#fff; color:#45546b; font-size:13px; cursor:pointer; }
.cardbook-cover-option[aria-pressed="true"] { border-color:var(--ecreat-primary); background:var(--ecreat-soft); }
.cardbook-cover-option:focus-visible { outline:none; border-color:#d90050; }

.address-search-controls { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:stretch; gap:8px; width:100%; margin:8px 0; }body .address-search-controls input { box-sizing:border-box; min-width:0; width:100%; height:49px; min-height:49px; margin:0; padding:0 12px; border:1px solid var(--ecreat-input-border); border-radius:10px; background:#fff; color:#1d304a; font:400 14px/1.4 "Malgun Gothic",sans-serif; outline:none; }body .address-search-controls input::placeholder { color:#8994a3; opacity:1; }body .address-search-controls input:focus { border-color:var(--ecreat-input-focus); }.address-search-controls button { box-sizing:border-box; align-self:stretch; height:49px; min-height:49px; margin:0; padding:0 12px; border:1px solid #d1d5db; border-radius:10px; background:#fff; color:#33465b; font:700 14px/1.15 "Malgun Gothic",sans-serif; white-space:nowrap; }.address-search-dialog { box-sizing:border-box; width:min(94vw,540px); max-height:92dvh; padding:18px; border:1px solid #edb3c5; border-radius:14px; color:var(--ecreat-ink); background:#fff; }.address-search-dialog::backdrop{background:rgb(18 28 45 / 55%)}.address-search-dialog header { display:flex; justify-content:space-between; align-items:center; gap:12px; }.address-search-dialog h2{font-size:21px;margin:0}.address-search-dialog p{font-size:14px;color:#68758a;line-height:1.6}.address-search-frame { width:100%; height:min(65dvh,510px); }


body .form-intro-text { font-size:14px; line-height:1.6; }

.register-button--compact { width:auto; min-height:40px; margin-top:0; padding:8px 14px; border-radius:8px; font-size:14px; font-weight:700; }

.faq-item .faq-answer-tag { border-color:#2563eb; background:#2563eb; color:#fff; }


/* 로그인 상태 (2026-11-11): bottom of the page, above the fixed bottom menu. */
/* 로그인 상태 (2026-11-12 user instruction): raised off the bottom edge and easier to read. */
.login-status { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; margin:16px 16px calc(48px + var(--bottom-nav-space, 0px)); padding:12px 16px; border-radius:12px; background:#f4f6fb; color:#43506a; font-size:15px; text-align:center; }
.login-status-button { min-height:36px; padding:0 14px; border:1px solid #d7dde8; border-radius:99px; background:#fff; color:var(--ink, #152b45); font:inherit; font-size:14px; font-weight:700; white-space:nowrap; cursor:pointer; }
.login-status-button:focus-visible { outline:none; border-color:var(--red, #ff075f); }
/* 증거 자료 (2026-11-12): one button opens the chapter files in a layer popup. */
.evidence-row { display:flex; justify-content:center; margin:8px 16px 0; }
.evidence-dialog { width:min(calc(100% - 24px), 520px); max-height:84vh; padding:0; border:0; border-radius:14px; overflow:auto; color:var(--ink, #152b45); }
.evidence-dialog::backdrop { background:rgba(15, 23, 42, .5); }
.evidence-dialog-head { position:sticky; top:0; z-index:1; display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid #eef0f3; background:#fff; }
.evidence-dialog-head h2 { margin:0; font-size:18px; }
.evidence-close { width:40px; height:40px; border:0; background:none; color:inherit; font-size:26px; cursor:pointer; }
.evidence-list { display:grid; gap:16px; margin:0; padding:14px; list-style:none; }
.evidence-list li { display:grid; gap:8px; }
.evidence-name { margin:0; font-weight:700; overflow-wrap:anywhere; }
.evidence-view { width:100%; max-height:60vh; border-radius:8px; background:#f4f6fb; object-fit:contain; }
.evidence-download { justify-self:start; min-height:36px; display:inline-flex; align-items:center; padding:0 14px; border:1px solid #d7dde8; border-radius:99px; color:inherit; font-size:14px; font-weight:700; text-decoration:none; }

/* 페이지 로딩 (2026-11-12, book-loading.js): a yellow bar (2026-11-12 user choice) fills while a small bear walks on it, then the page shows. */
.page-loading { position:fixed; inset:0; z-index:9999; display:grid; place-items:center; background:#fff; transition:opacity .35s ease; animation:page-loading-out .35s 10s forwards; } /* closes by itself if the script never runs */
@keyframes page-loading-out { to { opacity:0; visibility:hidden; } }
.page-loading.is-done { opacity:0; pointer-events:none; }
.page-loading-bar { position:relative; width:min(70vw, 300px); height:14px; border:2px solid #ffc21a; border-radius:99px; background:#fff; }
.page-loading-fill { position:absolute; inset:2px auto 2px 2px; width:0; max-width:calc(100% - 4px); border-radius:99px; background:#ffc21a; }
.page-loading-bear { position:absolute; bottom:100%; left:0; width:34px; height:auto; margin-bottom:-3px; transform:translateX(-50%); animation:page-loading-hop .45s ease-in-out infinite alternate; }
@keyframes page-loading-hop { from { translate:0 0; } to { translate:0 -4px; } }
@media (prefers-reduced-motion: reduce) { .page-loading-bear { animation:none; } }

/* 오디오 GO · 글로 GO (2026-11-13 user design): a small two-line pink link beside the back button, between the audiobook and 원고보기. */
.page-go,.page-go:visited { display:flex; flex-direction:column; align-items:center; justify-content:center; margin:0 auto 0 10px; color:var(--red, #ff075f); font-family:"Poor Story","Malgun Gothic",sans-serif; font-size:13px; font-weight:700; line-height:1.05; letter-spacing:.5px; text-decoration:none; }
.page-go:hover,.page-go:focus-visible { opacity:.75; outline:none; }