/* 조용한 독서 일기 (owner 2026-10-26, design package "quiet journal" — replaces the first Instagram-poster theme):
   cream paper, olive ink, Noto Serif KR for headings, reading text and notes, the phone's sans for small UI words,
   almost no rounding, thin borders with a hard soft-coloured offset shadow, taped and ruled notes on sage graph
   paper, one small illustration on the home screen. Loaded last; layouts stay in platform*.css. */
@font-face{font-family:"Noto Serif KR";src:url(/brand/noto-serif-kr-400.woff2) format("woff2");font-weight:300 500;font-display:swap}
@font-face{font-family:"Noto Serif KR";src:url(/brand/noto-serif-kr-600.woff2) format("woff2");font-weight:600 900;font-display:swap}
:root{--paper:#f5f1e3;--card:#fcfaef;--ink:#485a3c;--muted:#758065;--line:#d5d6bf;--line-soft:#e3e3d0;--hair:#b8bea1;
  --green:#526344;--green-soft:#e0e4ce;--gold:#798366;--tape:#aeb88db5;--grid:#e0e4ce;
  --serif:"Noto Serif KR","AppleMyungjo",Georgia,serif;--sans:"Noto Sans KR",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --italic:Georgia,"Times New Roman",serif;--lift:3px 5px 0 #d9dac56b;--radius:3px;
  --control-line:#c9cfb9;--control-bg:#fffdf5;--control-radius:3px}
body{background:var(--paper);color:var(--ink);font-family:var(--sans)}
h1,h2,h3,.brand,.book-card h3,.detail-header h1,.reader h1,.role-card h2,.auth-card h2,.cover strong{font-family:var(--serif);font-weight:400}
h1{letter-spacing:-.06em;line-height:1.65}h2{letter-spacing:-.045em}
.italic{font-family:var(--italic);font-style:italic;letter-spacing:0}
.eyebrow{font-family:var(--sans);font-weight:400;font-size:12px;letter-spacing:.09em;color:var(--muted)}
.help,.muted{color:var(--muted)}
a,.text-button{color:var(--ink)}
.text-button{text-underline-offset:5px}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid #68764b;outline-offset:4px}

/* One centred journal column: 680px at most, 24px sides on a phone. */
.topbar,main,.status{max-width:680px}
main{padding:28px 24px 20px}
.topbar{padding:22px 24px 16px;border-bottom:1px solid #7a86602a}
.brand{gap:9px;font-size:16px;font-weight:400;letter-spacing:.06em;color:var(--ink)}
.brand-symbol{background:none;width:24px;height:24px;color:var(--ink)}.brand-symbol svg{display:block}
.brand small{font-family:var(--sans);font-size:10px;letter-spacing:.12em;color:var(--muted)}
.tagline{font-size:13px;color:var(--ink);white-space:nowrap}
.badge{background:transparent;border:1px solid var(--hair);border-radius:var(--radius);color:var(--muted);font-weight:400;letter-spacing:.02em}
@media(max-width:420px){.tagline{display:none}}

/* Buttons: olive, almost square. */
.button{border-radius:var(--radius);background:var(--green);border-color:var(--green);color:#fffdf2;font-weight:400;font-size:14px;letter-spacing:.01em;box-shadow:none}
.button.secondary{background:transparent;border-color:var(--hair);color:var(--ink)}
.button.is-done{background:var(--green-soft);border-color:var(--green-soft);color:var(--ink)}
.olivebutton{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;min-height:52px;padding:14px 18px;border:0;border-radius:var(--radius);background:var(--green);color:#fffdf2;font:inherit;font-size:15px;cursor:pointer}
.olivebutton:hover,.button:hover{filter:brightness(.95)}

/* Paper surfaces: a thin border and a hard, soft-coloured offset shadow. */
.book-card,.auth-card,.role-card,.note-card,.paywall,.account-card,.menu-group ul,.guest-banner,.year-stat,.chapter-list,.continue,.kids-shortcut,.listen-button,.reader details.background,.notice,.quota{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--lift)}
.chapter-list{overflow:hidden}.chapter-row{border-bottom-color:var(--line-soft);padding-inline:16px}.chapter-row:last-child{border-bottom:0}.chapter-row:hover{background:#f6f3e4}
.chapter-number{font-family:var(--italic);font-style:italic}
.journal-entry{background:var(--green-soft);border:1px solid #cdd3b8;border-radius:var(--radius);color:var(--ink)}
.journal-entry strong{font-family:var(--serif);font-weight:400}
.searchbar-input,.search{background:var(--control-bg);border:1px solid var(--control-line);border-radius:var(--radius)}
.trial-benefits span{border-radius:var(--radius);background:transparent;border:1px solid var(--hair);color:var(--muted)}
.language-switch{background:transparent;border:1px solid var(--line);border-radius:var(--radius)}
.language-switch button{border-radius:2px}

/* Bottom bar: paper, hairline, the active item bold and darker. */
.bottom-nav{width:min(680px,100%);grid-template-columns:repeat(5,1fr);background:#f5f1e3f5;border:0;border-top:1px solid var(--hair);border-radius:0;box-shadow:0 -6px 18px #56633905;padding-inline:6px}
.bottom-nav button{color:#899078;font-size:11px;letter-spacing:-.02em}
.bottom-nav button span{font-size:19px;line-height:24px}
.bottom-nav [aria-current="page"],.bottom-nav .active{color:#3e5434;font-weight:700}

/* Book covers: flat colour blocks with a lighter spine. */
.cover,.book-card .cover,.detail-header .cover{border-radius:0;box-shadow:3px 4px 4px #4d563421;border-left:4px solid #ffffff32}
.cover.tone-pine{--cover-color:#57654a}.cover.tone-sage{--cover-color:#b8bd9d}.cover.tone-ochre{--cover-color:#e3cca0}
.cover.tone-wine{--cover-color:#8a6a58}.cover.tone-ocean{--cover-color:#6c7c74}.cover.tone-plum{--cover-color:#776b70}
.cover.tone-sage,.cover.tone-ochre{color:#4d5338}.cover.tone-sage em,.cover.tone-ochre em,.cover.tone-sage small,.cover.tone-ochre small,.cover.tone-sage>span,.cover.tone-ochre>span{color:#5f634bcc}
.cover em{font-family:var(--italic);font-style:italic}

/* Home (platform-journal.js): the headline, the bookmark card with the cover, the taped note (no illustration). */
.homehero h1{font-size:31px;margin:16px 0 0;position:relative;z-index:2}
mark{color:inherit;background:linear-gradient(transparent 80%,#d9ddbd 80%,#d9ddbd 97%,transparent 97%)}
.herocopy{font-size:14px;line-height:1.9;color:#788367;margin:14px 0 26px}
.herorule{display:flex;justify-content:space-between;border-top:1px solid var(--hair);padding:14px 0;font-size:12px;gap:10px}
.continue{margin:6px 0 34px;padding:22px 20px 18px;position:relative}
.continue h2{font-size:23px;margin:8px 0 4px}
.continue-head,.reading-card.with-cover{display:flex;gap:18px;align-items:center;padding-right:44px}
.continue-head .cover,.reading-card.with-cover .cover{flex:0 0 84px;width:84px;height:118px;padding:10px 9px 10px 12px;grid-template-rows:14px minmax(0,1fr) 14px;gap:6px}
.continue-head .cover strong,.reading-card.with-cover .cover strong{font-size:14px;letter-spacing:-.3px}
.continue-head .cover em,.reading-card.with-cover .cover em{font-size:8px}
.continue-head .cover small,.continue-head .cover>span,.reading-card.with-cover .cover small,.reading-card.with-cover .cover>span{font-size:5px}
.reading-card.with-cover{padding-right:0}
.reading-card.with-cover>div{min-width:0}
.continue .small,.readerend .small{font-size:12px;color:#7c846a;margin:4px 0}
.bookmark{position:absolute;right:18px;top:-1px;background:var(--gold);color:#faf7e8;clip-path:polygon(0 0,100% 0,100% 100%,50% 84%,0 100%);padding:14px 9px 22px;font:italic 19px/1 var(--italic)}
.continuecopy{font-family:var(--serif);font-size:16px;line-height:1.9;margin:22px 0 18px}
.continue .next-up,.continue .unfinished{font-size:12px;margin:12px 0 0}
.gridpaper,body[data-view="notes"]{background-color:var(--grid);background-image:linear-gradient(#95a17b1a 1px,transparent 1px),linear-gradient(90deg,#95a17b1a 1px,transparent 1px);background-size:24px 24px}
.homenote{margin:0 -24px;padding:24px 24px 18px}
.sectionline{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.taped,.revisit-card,.note-editor{position:relative}
.taped{background:#fcfaee;transform:rotate(-2deg);padding:32px 20px 22px;margin:28px 0 18px;box-shadow:3px 12px 15px #53603c14}
.tape,.revisit-card:before{position:absolute;width:88px;height:22px;left:calc(50% - 44px);top:-11px;background:var(--tape);clip-path:polygon(2% 0,99% 0,98% 10%,100% 20%,98% 30%,100% 40%,98% 50%,100% 60%,98% 70%,100% 80%,98% 100%,0 100%,2% 85%,0 70%,2% 55%,0 40%,2% 25%,0 10%)}
.revisit-card:before{content:""}
.taped p{font-family:var(--serif);font-size:17px;line-height:2.1;margin:0;background:repeating-linear-gradient(transparent 0,transparent 34px,#d9dcc6 34px,#d9dcc6 35px)}
.textlink{display:block;background:none;border:0;padding:12px 0;min-height:44px;font:inherit;font-size:13px;color:var(--ink);text-decoration:underline;text-underline-offset:5px;cursor:pointer}
.revisit-card{background:#fcfaee;border:0;border-radius:0;transform:rotate(-1deg);margin:28px 0;padding:30px 20px 18px;box-shadow:3px 12px 15px #53603c14}
.revisit-card blockquote{font-family:var(--serif);font-size:17px;line-height:2;margin:8px 0}
.section-heading h2{font-size:21px}
main>.journal-entry{margin-top:30px}

/* Sign-in: the journal page without a picture. */
.trial-login .login-copy h1{font-size:34px}
.trial-login .login-copy:before{content:none}

/* Notes (나의 한 줄): graph paper behind, notes as ruled cards. */
.notes-intro{display:block}
.notes-intro:after{content:none}
.notes-intro h1{font-size:28px;line-height:1.75}
.note-card{background:#fcfaee}
.note-card blockquote{font-family:var(--serif)}
.note-card:nth-of-type(odd){transform:rotate(-.6deg)}.note-card:nth-of-type(even){transform:rotate(.5deg)}
.note-editor{background:#fcfaee;border:0;border-radius:0;padding:30px 20px 22px;transform:rotate(-1deg);box-shadow:3px 12px 15px #53603c18;margin-top:44px}
.note-editor h2{font-size:19px}
.note-editor textarea{font-family:var(--serif);font-size:16px;line-height:34px;border:0;border-radius:0;padding:0 2px;background:repeating-linear-gradient(transparent 0,transparent 33px,#c9cfb9 33px,#c9cfb9 34px);background-attachment:local}
.note-editor textarea:focus-visible{outline:2px dashed #68764b66;outline-offset:6px}
.note-questions button{background:var(--card);border-color:var(--line-soft)}

/* Reader: almost no decoration — a centred title, a leaf, the text with room around it. */
.reader{max-width:640px}
.reader-top{font-size:13px}
.reader>.eyebrow,.reader>h1,.reader>.muted{text-align:center}
.reader h1{font-size:29px;line-height:1.7}
.reader>.muted{font-size:13px}
.leaf{text-align:center;margin:26px 0;font-size:25px;color:#9ca183;line-height:1}
.prose{font-family:var(--serif);font-size:16px;line-height:2.15;word-break:keep-all;color:var(--ink)}
.prose p{margin-bottom:26px}
.reader.large .prose{font-size:20px;line-height:2.05}
.size-toggle{font-size:13px;padding:10px 0;min-height:44px;text-decoration:none}
.readerend{text-align:center;padding-top:30px}
.readerend h2{font-size:19px;margin:10px 0 8px}
.listen-button{color:var(--ink);font-weight:400}

@media(min-width:640px){
  main{padding:40px 42px 20px}.topbar{padding:28px 42px 18px}
  .homehero h1{font-size:44px}.herocopy{font-size:16px}
  .homenote{margin:0 -42px;padding:32px 42px 22px}.taped p{font-size:21px}
  .continue{padding:30px}
  .prose{font-size:19px}.reader.large .prose{font-size:22px}
  .notes-intro h1{font-size:36px}
}

/* Sign-in form and its links: one rhythm (10/26). */
#trial-auth{gap:0}
#trial-auth>label:not(.password-toggle){margin:18px 0 8px;font-size:14px}
#trial-auth>label:first-child{margin-top:4px}
#trial-auth .password-toggle{margin:12px 0 0!important;font-size:14px;color:var(--muted)}
#trial-auth #auth-error{margin:10px 0 0}#trial-auth #auth-error:empty{display:none}
#trial-auth>[type=submit]{margin-top:22px}
.auth-card>p.help{margin:0;font-size:13px}
.auth-card>form+p.help{margin-top:18px}
.auth-card>p.help+p.help{margin-top:2px}
.auth-card>p.help .text-button,.auth-card>p.help a{display:inline-block;padding:6px 0;font-size:13px}
.signup-entry{margin-top:22px;padding-top:20px}
.signup-entry p{margin:0 0 12px}

/* The 가입하고 이어 읽기 screen. */
.guest-gate{margin:24px auto 32px;padding:32px 24px 28px}
.guest-gate h1{font-size:27px;line-height:1.6;margin-bottom:14px}
.guest-gate>p{margin:0 0 14px}
.guest-perks{margin:4px auto 22px;gap:6px;line-height:1.5}
.guest-gate .actions{flex-direction:column;gap:10px}
.guest-gate .actions .button{flex:none;width:100%}
.guest-gate>p.help{margin:16px 0 0}
.gate-links{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 20px;margin:8px 0 0}
.gate-links .text-button{padding:6px 0}

/* Small controls in the same almost-square shape; the notes toolbar sits on the graph paper. */
.inline-select select{border-radius:var(--radius);font-weight:500;min-width:7.4em;background:var(--card)}
.note-reactions button,.note-reactions label,.chip,label.chip,.explore-categories button,.category-chips button{border-radius:var(--radius)}
.search-panel{background:transparent}
body[data-view="notes"] .search-panel{background:transparent}
#membership{display:none}
.book-card.v2 .new-badge,.book-card.v2 .cover-badge{border-radius:2px;background:var(--card);color:var(--muted);border:1px solid var(--line);box-shadow:none;font-weight:400}
.kids-shortcut small{color:var(--muted);font-weight:400;letter-spacing:.09em}
.kids-shortcut strong{font-family:var(--serif);font-weight:400}
.book-card h3{font-weight:500}
.who-avatar .who-dot,.who-avatar span{border-radius:50%}

/* Page titles (10/26 owner): the Korean title first and large, the English subtitle under it in italic. */
.page-intro{display:flex;flex-direction:column}
.page-intro>h1{order:0;margin-bottom:4px}
.page-intro>.eyebrow{order:1;font-family:var(--italic);font-style:italic;font-size:15px;letter-spacing:0;text-transform:none;color:var(--muted);margin:0 0 14px}
.page-intro>:not(h1):not(.eyebrow){order:2}
.homehero h1{font-size:31px}
.homehero .herocopy{margin:2px 0 22px}
.homenote .taped.revisit-card{transform:rotate(-2deg);margin:28px 0 18px;padding:32px 20px 18px}
.homenote .taped.revisit-card:before{content:none}
.homenote .taped blockquote{font-family:var(--serif);font-size:17px;line-height:2.1;margin:6px 0 8px;background:repeating-linear-gradient(transparent 0,transparent 34px,#d9dcc6 34px,#d9dcc6 35px)}
.homenote{margin-top:34px}

/* One title block for the five tabs (10/26 owner '다 중구난방'): same place, size and gaps on every tab. */
main .page-intro,main .page-intro.compact,main .account-page .page-intro{margin-top:0;margin-bottom:28px;padding:0}
main .page-intro>h1,main .page-intro.homehero>h1,main .page-intro.compact>h1,main .notes-intro>h1{font-size:30px;line-height:1.4;margin:0;letter-spacing:-.05em}
main .page-intro>.eyebrow{margin:4px 0 0;font-size:15px;line-height:1.5}
main .page-intro>:not(h1):not(.eyebrow),main .page-intro.compact>p:last-child:not(.eyebrow){margin:14px 0 0;font-size:14px;line-height:1.8;color:var(--muted)}
main .page-intro>:not(h1):not(.eyebrow)~:not(h1):not(.eyebrow){margin-top:6px}
@media(min-width:640px){main .page-intro>h1,main .page-intro.homehero>h1,main .page-intro.compact>h1,main .notes-intro>h1{font-size:36px}}
@media(max-width:370px){main .page-intro>h1,main .page-intro.compact>h1{font-size:26px}}
main .page-intro+*{margin-top:0!important}
main .page-intro+.search-panel{padding-top:0}

/* PC (10/26 owner '너무 모바일 위주'): from 960px the journal opens up — a 1080px page, the five tabs move into
   the header as text links, the home puts the bookmark card beside the children's stories and the note beside the
   reading record, shelves show four books a row; reading, notes, the record and My page keep a calm column. */
@media(min-width:960px){
  .topbar,main,.status{max-width:1080px}
  main{padding:48px 48px 40px}
  .topbar{padding:26px 48px 20px}
  .status{margin-bottom:24px}
  .bottom-nav{position:absolute;top:24px;bottom:auto;left:50%;transform:translateX(-50%);width:min(1080px,100%);display:flex;justify-content:flex-end;gap:4px;
    padding:0 104px 0 300px;background:transparent;border:0;box-shadow:none;pointer-events:none;backdrop-filter:none}
  .bottom-nav button{pointer-events:auto;flex-direction:row;gap:0;min-height:40px;padding:8px 12px;font-size:14px;letter-spacing:0;color:var(--muted);border-bottom:2px solid transparent;border-radius:0}
  .bottom-nav button span{display:none}
  body.typing .bottom-nav{visibility:visible}
  .bottom-nav [aria-current="page"]{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}
  .brand small{display:block}
  .tagline{display:none}
  main .page-intro>h1,main .page-intro.homehero>h1,main .page-intro.compact>h1,main .notes-intro>h1{font-size:38px}
  main .page-intro{margin-bottom:36px}
  .book-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
  /* Home: two columns where two things belong together. */
  body[data-view="home"] main{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:32px;align-items:start}
  body[data-view="home"] main>*{grid-column:1/-1}
  body[data-view="home"] main>.continue{grid-column:1;margin:0 0 36px}
  body[data-view="home"] main>.kids-shortcut{grid-column:2;margin:0 0 36px;align-self:stretch}
  body[data-view="home"] main>.homenote{grid-column:1;margin:36px 0 0;padding:28px 32px 18px}
  body[data-view="home"] main>.journal-entry{grid-column:2;margin:36px 0 0;align-self:stretch}
  /* Reading, notes, the record and My page: a column you can read without turning your head. */
  body[data-view="read"] main>*,body[data-view="notes"] main>*,body[data-view="note"] main>*,body[data-view="library"] main>*,body[data-view="booknote"] main>*{max-width:760px;margin-left:auto;margin-right:auto}
  body[data-view="read"] .reader{max-width:680px}
  .account-page{max-width:760px}
  .prose{font-size:19px}
}
@media(min-width:960px){body[data-view="home"] .book-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1200px){.book-grid{grid-template-columns:repeat(5,minmax(0,1fr))}body[data-view="home"] .book-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}}

/* Sign-in state in the top bar (10/26 owner): 로그인 for visitors, the profile circle for members. */
.auth-chip{display:flex;align-items:center;gap:12px}
.auth-login{min-height:36px;padding:6px 14px;border:1px solid var(--green);border-radius:var(--radius);background:var(--green);color:#fffdf2;font-size:13px;cursor:pointer}
.auth-signup{font-size:13px;color:var(--ink);text-underline-offset:4px}
@media(max-width:480px){.auth-signup{display:none}}
@media(min-width:960px){.header-actions{position:relative;z-index:6}body:has(.auth-chip) .bottom-nav{padding-right:200px}}

/* The sign-in screen (10/26): the tabs' title block; the card below drops its own repeated title. */
.trial-login .auth-card>.eyebrow,.trial-login .auth-card>h2{display:none}
.trial-login .auth-card #trial-auth>label:first-child{margin-top:0}
.auth-perks{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;padding:0}
.auth-perks li{font-size:12px;padding:4px 10px;border:1px solid var(--hair);border-radius:var(--radius);color:var(--muted)}
.trial-login{align-items:start;padding-top:0}
.trial-login .login-copy .help{font-size:12px;line-height:1.7}
.signup-page #trial-auth>label:first-child{margin-top:18px}

/* Google / Apple (10/27): full-width buttons above the e-mail form, each in its own brand look. */
.social-auth{display:grid;gap:10px;margin:0 0 6px}
.social-button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 16px;border-radius:var(--radius);font-size:15px;text-decoration:none;font-weight:500}
.social-button svg{width:20px;height:20px;flex:none}
.social-google{background:#fff;border:1px solid #dadce0;color:#3c4043}
.social-apple{background:#000;border:1px solid #000;color:#fff}
.social-or{display:flex;align-items:center;gap:12px;margin:10px 0 0;font-size:12px;color:var(--muted)}
.social-or:before,.social-or:after{content:"";flex:1;height:1px;background:var(--line)}
.join-card .consents{margin-top:0}
.join-card>.help{margin-top:14px;font-size:12px}

/* The way back stays at the top once the '← …' link scrolls away (10/27). */
.back-bar{position:fixed;top:0;left:50%;transform:translateX(-50%);width:min(1080px,100%);z-index:7;display:flex;align-items:center;gap:10px;
  padding:calc(6px + env(safe-area-inset-top)) 16px 6px;background:#f5f1e3f2;border-bottom:1px solid var(--hair);backdrop-filter:blur(8px)}
.back-bar[hidden]{display:none}
.back-bar-link{flex:none;max-width:60%;min-height:40px;padding:0 4px;border:0;background:none;color:var(--ink);font:inherit;font-size:14px;font-weight:600;
  text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.back-bar-title{flex:1;min-width:0;font-family:var(--serif);font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.back-bar-top{flex:none;width:40px;height:40px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);color:var(--ink);cursor:pointer}
@media(min-width:960px){.back-bar{padding-left:48px;padding-right:48px}}

/* Kakao and Naver buttons in their own colours (10/27), and the e-mail + code row on the consent screen. */
.social-kakao{background:#FEE500;border:1px solid #FEE500;color:rgba(0,0,0,.85)}
.social-naver{background:#03C75A;border:1px solid #03C75A;color:#fff}
.social-naver svg{width:16px;height:16px}
.join-email-row{display:flex;gap:8px}
.join-email-row input{flex:1;min-width:0}
.join-email-row .button{flex:none;min-height:48px;padding:0 14px}
.join-card #oauth-join{display:grid;gap:0}
.join-card #oauth-join>label{margin:14px 0 8px;font-size:14px;font-weight:600}
.join-card #oauth-join>label:first-child{margin-top:0}
.join-card .consents{margin-top:16px}

/* Public book pages (/books, /books/<id>, 2026-10-29): plain server HTML for search engines and AI assistants. */
body.pub{background:var(--paper,#f5f1e3);margin:0}
.pub-top{display:flex;justify-content:space-between;align-items:center;max-width:760px;margin:0 auto;padding:18px 16px;border-bottom:1px solid #d9c9a8}
.pub-top a{color:var(--ink,#485a3c);text-decoration:none;font-size:14px}
.pub-top .pub-brand{font-family:var(--serif);font-size:18px}
.pub-main{max-width:760px;margin:0 auto;padding:28px 16px 12px}
.pub-main h1{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.4;margin:6px 0 6px}
.pub-main h2{font-family:var(--serif);font-weight:400;font-size:20px;margin:34px 0 12px}
.pub-sub{color:var(--muted,#758065);margin:0 0 14px}
.pub-desc{font-size:16px;line-height:1.8;margin:0 0 10px;word-break:keep-all}
.pub-meta,.pub-crumb{font-size:13px;color:var(--muted,#758065)}
.pub-crumb a{color:inherit}
.pub-tag{display:inline-block;font-size:12px;background:#e0e4ce;color:#526344;border-radius:10px;padding:3px 9px;margin:0 6px 6px 0}
.pub-list,.pub-books{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.pub-list li,.pub-books li{background:#fffdf8;border:1px solid #d9c9a8;border-radius:6px;padding:14px 16px}
.pub-list a,.pub-books a{display:flex;gap:10px;align-items:baseline;color:var(--ink,#485a3c);text-decoration:none}
.pub-books a{flex-direction:column;gap:2px}
.pub-list strong,.pub-books strong{font-family:var(--serif);font-weight:600;font-size:16px}
.pub-list small,.pub-books small{color:var(--muted,#758065);font-size:12px}
.pub-list small{margin-left:auto}
.pub-no{color:#c8a24a;font-size:13px;min-width:18px}
.pub-list p,.pub-books p{margin:6px 0 0;font-size:14px;line-height:1.7;color:#5d6450;word-break:keep-all}
.pub-note{font-size:12px;line-height:1.7;color:var(--muted,#758065);margin-top:18px}
.pub-foot{max-width:760px;margin:20px auto 0;padding:20px 16px 40px;border-top:1px solid #d9c9a8;font-size:12px;line-height:1.8;color:var(--muted,#758065)}
.pub-foot a{color:inherit}

/* Foldables (11/2 owner: 아이폰 폴더블·갤럭시 폴드·폴드 울트라 해상도 최적화). Sized by screen shape, not model name:
   folded cover screens (≤420px, tall) keep the phone layout; an unfolded inner screen (600–959px, near square)
   gets a wider page — four books a row, the home in two columns from 800px — while reading, notes, the record and
   My page keep the 680px column; held sideways (landscape, ≤820px tall) the five tabs move into the header as on
   PC so the short screen is not eaten by a header and a bottom bar. */
@media(min-width:720px) and (max-width:959px){
  .topbar,main,.status{max-width:900px}
  .bottom-nav{width:min(900px,100%)}
  main{padding:36px 36px 20px}.topbar{padding:22px 36px 16px}
  .homenote{margin:0 -36px;padding:32px 36px 22px}
  .book-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
  body[data-view="read"] main>*,body[data-view="notes"] main>*,body[data-view="note"] main>*,body[data-view="library"] main>*,body[data-view="booknote"] main>*{max-width:680px;margin-left:auto;margin-right:auto}
  .account-page{max-width:680px;margin-left:auto;margin-right:auto}
}
@media(min-width:800px) and (max-width:959px){
  body[data-view="home"] main{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:24px;align-items:start}
  body[data-view="home"] main>*{grid-column:1/-1}
  body[data-view="home"] main>.continue{grid-column:1;margin:0 0 28px}
  body[data-view="home"] main>.kids-shortcut{grid-column:2;margin:0 0 28px;align-self:stretch}
  body[data-view="home"] main>.homenote{grid-column:1;margin:28px 0 0;padding:24px 26px 16px}
  body[data-view="home"] main>.journal-entry{grid-column:2;margin:28px 0 0;align-self:stretch}
}
@media(min-width:720px) and (max-width:959px) and (orientation:landscape) and (max-height:820px){
  .topbar{padding:12px 36px 10px}
  .brand small,.tagline{display:none}
  main{padding-top:24px}
  .status{margin-bottom:16px}
  .bottom-nav{position:absolute;top:10px;bottom:auto;left:50%;transform:translateX(-50%);display:flex;justify-content:flex-end;gap:2px;
    padding:0 76px 0 210px;background:transparent;border:0;box-shadow:none;pointer-events:none;backdrop-filter:none}
  .bottom-nav button{pointer-events:auto;flex-direction:row;gap:0;min-height:40px;padding:8px 9px;font-size:13px;letter-spacing:0;color:var(--muted);border-bottom:2px solid transparent;border-radius:0}
  .bottom-nav button span{display:none}
  body.typing .bottom-nav{visibility:visible}
  .bottom-nav [aria-current="page"]{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}
  .header-actions{position:relative;z-index:6}
  body:has(.auth-chip) .bottom-nav{padding-right:112px}
  body:has(.auth-chip) .auth-signup{display:none}
  main .page-intro>h1,main .page-intro.homehero>h1,main .page-intro.compact>h1,main .notes-intro>h1{font-size:32px}
  main .page-intro{margin-bottom:24px}
}

/* Audio (11/2): a tap on a paragraph reads from there while the bar is open. */
.audio-hint{margin:6px 2px 0;font-size:11px;color:var(--muted)}
body:has(.audio-bar) .prose p{cursor:pointer}