@import url("book-contents-layer.css?v=20261113-attach-1");
:root { --blue:#ff075f; --pink:#ff075f; --chapter-title-font:inherit; --text:#111; --muted:#8d8d8d; --border:#d8e1ee; }
    * { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
    html,body { margin:0; min-height:100%; background:#f4f4f4; color:var(--text); font-family:"210 OmniGothic","OmniGothic",Arial,"Noto Sans KR","Malgun Gothic",sans-serif; }
    body { display:flex; justify-content:center; }
    button { font:inherit; cursor:pointer; }
    .app { position:relative; width:min(100%, 380px); min-height:100vh; padding:calc(env(safe-area-inset-top) + 15px) 18px calc(105px + env(safe-area-inset-bottom)); background:#fff; border-left:1px solid #ddd; border-right:1px solid #ddd; }
    .book-heading { padding:17px 4px 15px; border-bottom:1px solid var(--border); }
    .publisher-line { margin:0 0 8px; color:var(--muted); font-size:13px; }
    .book-heading h2 { margin:0; font-size:24px; line-height:1.25; font-weight:900; }
    .chapter-line { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:7px 0 0; font-size:14px; }
    #chapterLabel { color:var(--muted); }
    .chapter-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:17px 4px 11px; }
    .chapter-heading h3 { margin:0; color:#111; font-family:var(--chapter-title-font),sans-serif; font-size:22px; line-height:1.3; font-weight:900; }
    .contents-button { flex:0 0 auto; min-height:28px; padding:4px 7px; border:1px solid var(--blue); color:var(--blue); background:#fff; font-size:12px; line-height:1.2; font-weight:800; white-space:nowrap; }
    /* The whole page scrolls (2026-11-01): an inner scroll box trapped the reader below the menu once the read word was followed. */
    .manuscript-scroll { min-height:250px; padding:5px 5px 32px; }
    .manuscript-image { display:block; width:100%; height:auto; margin-top:20px; border-radius:8px; }
    .manuscript-image[hidden] { display:none; }
    /* The shared top bar stays at the top while reading so the menu is always reachable. */
    main.app > header.site-menu-header { position:sticky; top:0; z-index:11; background:#fff; }
    .manuscript-text { margin:0; color:#424650;  }
    .word { background-image:linear-gradient(rgba(174,230,125,.74),rgba(174,230,125,.74)); background-repeat:no-repeat; background-size:0% 100%; transition:background-size .08s linear; }
    .word:not(.gap) { cursor:pointer; }
    .word.read { background-size:100% 100%; }
    .word.current { background-size:var(--fill,0%) 100%; }
    .word:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
    .audio-dock { position:fixed; z-index:10; left:50%; bottom:max(12px,env(safe-area-inset-bottom)); transform:translateX(-50%); width:min(calc(100% - 24px),348px); display:flex; align-items:center; gap:9px; padding:10px 12px; border:1px solid #e6e9ef; border-radius:13px; background:rgba(255,255,255,.97); box-shadow:0 5px 20px #15294320; }
    .dock-play { width:48px; height:48px; flex:0 0 48px; border:0; border-radius:50%; background:var(--pink); color:var(--content-foreground,#fff); font-size:19px; font-weight:900; }
    /* 영어로 읽기 and 단어장 float just above the right end of the audio dock, within thumb reach after pausing; they take the dock's rounding and shadow so they read as one unit. */
    .dock-extras { position:absolute; left:-1px; right:10px; bottom:calc(100% + 8px); display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; pointer-events:none; flex-wrap:nowrap; } /* one row: the 배경음 slider gives way first (2026-11-13) */ .dock-extras .bgm-volume { min-width:0; flex-shrink:1; }
    /* 배경음 on the left, 단어장 and the other buttons on the right (2026-11-12 user instruction); the empty middle lets taps reach the text. */ .dock-extras > * { pointer-events:auto; } .dock-extras .bgm-volume { order:-1; margin-right:auto; }
    /* 배경음 sits on the same row as 단어장 so it does not cover the manuscript text. */ .dock-extras .bgm-volume { padding:0 4px 0 10px; background:#fff; border-radius:8px; box-shadow:0 5px 20px #15294320; } .dock-extras .bgm-volume input { min-height:36px; }
    .audio-dock .dock-extras .ecreat-pill-button { min-width:90px; min-height:35px; padding:0 8px; justify-content:center; white-space:nowrap; background:var(--blue); color:var(--content-foreground,#fff); border-radius:8px; box-shadow:0 5px 20px #15294320; } /* 90 x 35 (2026-11-13 user choice) */
    /* 영어로 읽기 is a soft blue so it is not mistaken for the pink 단어장. */
    .audio-dock .dock-extras .dock-english { background:color-mix(in srgb,var(--blue) 8%,white); color:var(--blue); }
    .audio-dock .dock-extras .dock-english:hover,.audio-dock .dock-extras .dock-english:focus-visible,.audio-dock .dock-extras .dock-english[aria-pressed="true"] { background:color-mix(in srgb,var(--blue) 14%,white); color:var(--blue); }
    .dock-time[hidden] { display:none; }
    .chapter-heading:has(.english-tools:not([hidden])) { flex-wrap:wrap; }
    .english-tools { flex:1 0 100%; display:flex; align-items:center; gap:8px; margin:0; color:#68758a; font-size:13px; font-weight:700; }
    .english-tools[hidden],.english-editor[hidden],.english-tool[hidden] { display:none; }
    .english-tools > span { flex:1; min-width:0; }
    .english-tool { min-height:32px; padding:4px 12px; border:1px solid #cfd5e0; border-radius:8px; background:#fff; color:#182b46; font:inherit; font-size:13px; font-weight:700; white-space:nowrap; cursor:pointer; }
    .english-tool:hover,.english-tool:focus-visible { border-color:#2753c9; color:#2753c9; outline:none; }
    .english-editor textarea { box-sizing:border-box; display:block; width:100%; min-height:260px; padding:12px; border:1px solid #cfd5e0; border-radius:8px; background:#fff; color:#182b46; font:inherit; font-size:17px; line-height:1.7; resize:vertical; }
    .english-editor textarea:focus { outline:none; border-color:#2753c9; }
    .english-editor-note { margin:8px 0 0; color:#68758a; font-size:12px; }
    .english-editor-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:10px; }
    .english-editor .english-save { width:auto; min-height:40px; margin-top:0; padding:8px 18px; border-radius:8px; font-size:15px; font-weight:800; }
    .dock-reset { width:37px; height:40px; flex:0 0 37px; border:1px solid var(--border); border-radius:8px; background:#fff; color:#43516a; font-size:22px; }
    .dock-info { flex:1; min-width:0; }
    .dock-title { overflow:hidden; color:#333; font-size:12px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
    .dock-subtitle { overflow:hidden; margin-top:3px; color:#333; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
    .dock-time { margin-top:4px; color:#777; font-size:11px; }
    .dock-track { height:4px; margin-top:6px; overflow:hidden; border-radius:9px; background:#f2dadd; }
    .dock-progress { width:0; height:100%; background:var(--pink); }
    .loading { position:fixed; inset:0; z-index:20; display:none; place-items:center; background:#fff9; color:#333; font-size:14px; }
    .loading.show { display:grid; }
    .contents-list { margin:0; padding:0; list-style:none; }
    .toast { position:fixed; left:50%; bottom:92px; z-index:40; transform:translate(-50%,15px); opacity:0; padding:10px 15px; border-radius:99px; background:#17283e; color:#fff; font-size:13px; pointer-events:none; transition:.2s; white-space:nowrap; }
    .toast.show { transform:translate(-50%,0); opacity:1; }

.contents-status { margin:0 0 16px; color:#68758a; font-size:14px; }

/* 목차 under the manuscript, styled like the rows in 목차 모두보기 (book-contents-layer.css). */
/* A section line divides the manuscript from the chapter list under it. */
.manuscript-contents { margin:24px -18px 0; padding:18px 22px 60px; border-top:8px solid #f4f6fb; }
/* The bottom padding keeps the last row (감상문) clear of the audio dock and its 단어장 button. */
.manuscript-contents h3 { margin:0 0 4px; color:#111; font-size:18px; font-weight:900; }
.manuscript-contents .chapter { width:100%; display:flex; align-items:center; gap:14px; min-height:77px; padding:10px 2px; border:0; border-bottom:1px solid #e7e9ef; background:transparent; text-align:left; font:inherit; cursor:pointer; }
.manuscript-contents .chapter:focus-visible { outline:none; background:#fff0f5; }
.manuscript-contents .chapter-play { width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:50%; background:#fff; color:var(--red,#ff075f); font-size:21px; }
.manuscript-contents .chapter:not(.active) .chapter-play { visibility:hidden; }
.manuscript-contents .chapter-copy { flex:1; min-width:0; display:block; }
.manuscript-contents .chapter-name { display:block; font-size:17px; color:#182b46; }
.manuscript-contents .chapter-time { display:block; margin-top:4px; color:#a3afc1; font-size:14px; font-weight:400; }
.manuscript-contents .chapter.active .chapter-time { color:var(--blue,#ff075f); }