:root{
  --ink:#2f251b;
  --muted:#8b7863;
  --paper:#f6ecd9;
  --paper-2:#fff7e9;
  --line:#d9c6aa;
  --gold:#9a6a2e;
  --gold-2:#c59a58;
  --wood:#322013;
  --shadow:0 24px 70px rgba(50,31,16,.22);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  font-family:"Noto Sans KR",system-ui,sans-serif;
  background:
    radial-gradient(circle at 17% 8%,rgba(255,255,255,.9),transparent 29rem),
    radial-gradient(circle at 86% 3%,rgba(255,248,231,.72),transparent 22rem),
    linear-gradient(180deg,#f9f0e2 0%,#ead8bd 51%,#5a3a22 78%,#2a1a10 100%);
  overflow:hidden;
  max-width:100vw;
}
body.font-large .verses{font-size:clamp(1.02rem,.98vw,1.16rem)}
body.font-xlarge .verses{font-size:clamp(1.1rem,1.05vw,1.24rem)}
button,select,input,textarea{font:inherit}
[hidden]{display:none!important}
button,select{cursor:pointer}
.topbar{
  height:88px;
  display:grid;
  grid-template-columns:minmax(300px,410px) minmax(360px,1fr) minmax(270px,360px) auto;
  align-items:center;
  gap:clamp(12px,1.5vw,20px);
  padding:13px clamp(28px,2.2vw,44px);
  border-bottom:1px solid rgba(113,78,39,.2);
  background:
    radial-gradient(circle at 6% 10%,rgba(203,161,96,.16),transparent 24rem),
    linear-gradient(180deg,rgba(255,250,241,.97),rgba(247,236,218,.92));
  backdrop-filter:blur(14px);
  box-shadow:0 10px 28px rgba(86,58,31,.08);
}
.brand{display:flex;align-items:center;gap:14px;color:inherit;text-decoration:none;min-width:0}
.brand-icon{width:62px;height:48px;border:2px solid #b08245;border-radius:7px 7px 13px 13px;position:relative;background:#fff5df;box-shadow:inset 0 -7px 14px rgba(154,106,46,.1)}
.brand-icon:before,.brand-icon:after{content:"";position:absolute;top:-15px;width:28px;height:40px;border-radius:100% 0 100% 0;background:linear-gradient(180deg,#c9a768,#a98143)}
.brand-icon:before{left:10px;transform:rotate(-26deg)}
.brand-icon:after{right:10px;transform:rotate(26deg) scaleX(-1)}
.brand strong{display:block;font-family:"Noto Serif KR",serif;font-size:1.56rem;white-space:nowrap;letter-spacing:-.035em}
.brand small{display:block;color:#8b745b;font-size:.8rem}
.main-nav{display:flex;justify-content:center;gap:clamp(28px,3.2vw,68px);min-width:0;overflow:hidden}
.main-nav a{position:relative;color:#4d4034;text-decoration:none;font-weight:900;white-space:nowrap;font-size:1.02rem}
.main-nav a.is-active:after{content:"";position:absolute;left:2px;right:2px;bottom:-18px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.search{justify-self:end;display:flex;align-items:center;width:100%;max-width:354px;height:48px;border:1px solid #d4bea0;border-radius:999px;background:rgba(255,248,236,.78);padding:0 13px 0 20px;box-shadow:inset 0 2px 8px rgba(104,68,32,.05)}
.search input{flex:1;min-width:0;border:0;outline:0;background:transparent}
.top-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px}
.top-actions button{height:38px;border:1px solid rgba(143,103,58,.22);border-radius:999px;background:rgba(255,248,236,.78);color:#3f3124;font-weight:900}
.top-actions #authButton{min-width:74px;padding:0 14px}
.top-actions #settingsButton{width:38px;padding:0}
.layout{width:min(100%,1888px);height:calc(100dvh - 88px);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) clamp(332px,21vw,396px);gap:clamp(12px,1vw,20px);padding:clamp(9px,.75vw,14px) clamp(18px,1.25vw,26px) 16px;overflow:hidden}
.reader-area{min-width:0;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:10px}
.reader-area{position:relative}
.reader-controls{height:48px;display:grid;grid-template-columns:minmax(190px,270px) 44px minmax(92px,132px) 44px 1fr;align-items:center;gap:10px}
.reader-controls select,.reader-controls button,.bottom-controls button{
  height:38px;border:1px solid rgba(143,103,58,.28);border-radius:14px;background:linear-gradient(180deg,rgba(255,251,243,.9),rgba(247,235,216,.82));color:#3f3124;font-weight:800;box-shadow:0 5px 14px rgba(73,45,22,.06);
}
.reader-controls select{padding:0 14px}
.reader-tools{justify-self:end;display:flex;gap:10px}
.reader-tools button{padding:0 14px}
.reader-tools button.is-active{background:rgba(154,106,46,.18);border-color:rgba(154,106,46,.52);color:#7a4d19}
.book-frame{
  flex:1;min-width:0;min-height:0;max-width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;padding:18px clamp(18px,1.55vw,30px) 30px;
  border-radius:28px;background:
    radial-gradient(ellipse at 50% 104%,rgba(18,8,2,.66),transparent 42%),
    radial-gradient(ellipse at 50% 6%,rgba(207,150,74,.22),transparent 30%),
    linear-gradient(135deg,#1b0c04 0%,#4b2912 18%,#865528 50%,#47240f 82%,#170a04 100%);
  box-shadow:0 30px 86px rgba(42,24,12,.38),0 12px 0 rgba(44,25,12,.35),inset 0 0 0 9px rgba(255,218,143,.16),inset 0 0 52px rgba(10,3,0,.46);
  position:relative;overflow:hidden;
}
.book-frame:after{content:"";position:absolute;left:11px;top:22px;bottom:24px;width:48px;border-radius:24px 5px 5px 24px;background:linear-gradient(90deg,rgba(38,18,8,.9),rgba(125,74,32,.47),transparent);box-shadow:inset 9px 0 15px rgba(255,216,132,.15),8px 0 20px rgba(32,13,3,.2);pointer-events:none}
.book-frame:before{content:"";position:absolute;left:50%;top:20px;bottom:31px;width:31px;transform:translateX(-50%);border-radius:30px;background:linear-gradient(90deg,rgba(38,17,5,.62),rgba(255,241,207,.78) 46%,rgba(122,88,50,.4) 55%,rgba(38,17,5,.64));box-shadow:0 0 28px rgba(57,30,12,.22),inset 0 0 8px rgba(255,255,255,.36);z-index:3;pointer-events:none}
.book-frame .book-page:first-child:before{content:"";position:absolute;left:10px;top:14px;bottom:14px;width:22px;border-radius:18px;background:linear-gradient(90deg,rgba(135,99,55,.18),transparent);pointer-events:none}
.book-page{
  min-width:0;min-height:0;overflow:hidden;position:relative;padding:clamp(30px,2.15vw,42px) clamp(38px,3.35vw,64px) 44px;background:
    radial-gradient(circle at 24% 18%,rgba(255,255,255,.84),transparent 17rem),
    radial-gradient(circle at 80% 65%,rgba(189,145,82,.08),transparent 16rem),
    repeating-linear-gradient(100deg,rgba(98,63,29,.031) 0 1px,transparent 1px 8px),
    linear-gradient(110deg,var(--paper-2),var(--paper));
  border:1px solid rgba(121,84,43,.28);
}
.page-left{border-radius:23px 4px 5px 23px;box-shadow:inset -38px 0 60px rgba(113,77,38,.2),inset 14px 0 28px rgba(255,255,255,.38),inset 0 0 46px rgba(255,255,255,.24)}
.page-right{border-radius:5px 23px 23px 5px;box-shadow:inset 38px 0 60px rgba(113,77,38,.2),inset -14px 0 28px rgba(255,255,255,.32),inset 0 0 46px rgba(255,255,255,.24)}
.page-right:after{content:"";position:absolute;right:0;top:0;width:145px;height:145px;border-radius:0 23px 0 120px;background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(239,219,181,.85) 55%,rgba(131,88,40,.24));box-shadow:-17px 17px 32px rgba(77,50,24,.18);pointer-events:none}
.page-right:before{content:"";position:absolute;right:98px;top:0;width:70px;height:132px;background:linear-gradient(115deg,rgba(112,76,34,.18),transparent 62%);transform:skewX(-22deg);filter:blur(.4px);pointer-events:none}
.book-page header{text-align:center;margin-bottom:clamp(12px,1.7vh,20px)}
.book-page h1{font-family:"Noto Serif KR",serif;font-size:clamp(2.08rem,2.15vw,2.72rem);margin:0 0 10px;letter-spacing:-.03em}
.book-page p{margin:0;color:#9b815e;font-weight:900}
.verses{display:grid;gap:clamp(7px,.86vh,12px);font-family:"Noto Serif KR",serif;font-size:clamp(.95rem,.91vw,1.08rem);line-height:1.62}
.verse-row{
  width:100%;display:grid;grid-template-columns:36px minmax(0,1fr) 42px;gap:12px;align-items:start;
  padding:6px 9px;border:1px solid transparent;border-radius:12px;background:transparent;color:inherit;text-align:left;
}
.verse-row:hover,.verse-row.is-selected{background:linear-gradient(90deg,rgba(169,119,55,.16),rgba(169,119,55,.08));border-color:rgba(154,106,46,.3);box-shadow:0 5px 16px rgba(97,62,28,.07)}
.verse-row.is-highlighted{background:rgba(218,170,76,.22)}
.verse-row.is-bookmarked .verse-no:after{content:"";display:block;width:7px;height:10px;margin:2px auto 0;background:#9a6a2e;clip-path:polygon(0 0,100% 0,100% 100%,50% 72%,0 100%)}
.verse-no{color:#7c6548;font-family:"Noto Sans KR",sans-serif;font-weight:900}
.verse-bubble{position:relative;justify-self:end;min-width:30px;height:24px;color:#6e583d;font-family:"Noto Sans KR",sans-serif;font-size:.74rem;font-weight:900;text-align:center;line-height:23px}
.verse-bubble:before{content:"";position:absolute;inset:3px 4px 5px;border:1.5px solid rgba(89,66,43,.56);border-radius:8px 8px 8px 3px;box-shadow:inset 1px 1px 2px rgba(61,40,22,.18);pointer-events:none}
.verse-bubble:after{content:"";position:absolute;left:8px;bottom:2px;width:7px;height:6px;border-left:1.5px solid rgba(89,66,43,.56);border-bottom:1.5px solid rgba(89,66,43,.56);transform:skew(-25deg);pointer-events:none}
.book-page footer{position:absolute;bottom:12px;left:0;right:0;text-align:center;color:#ad9574;font-family:"Noto Serif KR",serif}
.bottom-controls{display:grid;grid-template-columns:minmax(130px,1fr) auto minmax(100px,1fr);align-items:center;gap:12px}
.bottom-controls button{min-width:44px;padding:0 16px;background:linear-gradient(180deg,rgba(87,58,36,.82),rgba(54,35,22,.78));color:#fff8ec;border-color:rgba(255,255,255,.28);box-shadow:0 8px 20px rgba(23,11,5,.18)}
.bottom-controls span{min-width:120px;text-align:center;color:#fff8ec;font-weight:900}
.bottom-controls > button:first-child{justify-self:start}
.bottom-controls > button:last-child{justify-self:end}
.pager{display:flex;justify-content:center;align-items:center;gap:10px}
.status{position:absolute;left:50%;bottom:2px;z-index:5;max-width:min(520px,90%);min-height:0;margin:0;padding:5px 12px;transform:translateX(-50%);border-radius:999px;background:rgba(66,43,27,.68);color:#fff8ec;font-size:.8rem;font-weight:900;text-align:center;opacity:0;pointer-events:none;transition:opacity .18s ease}
.status.is-visible{opacity:.92}
.side-panel{position:relative;min-width:0;min-height:0;max-height:100%;display:flex;flex-direction:column;border-radius:22px;background:
  radial-gradient(circle at 18% 0%,rgba(255,255,255,.58),transparent 14rem),
  linear-gradient(180deg,rgba(255,249,238,.96),rgba(246,234,216,.92));box-shadow:0 28px 72px rgba(50,31,16,.24);overflow:hidden;border:1px solid rgba(135,96,51,.24)}
.panel-close{display:none}
.panel-tabs{display:grid;grid-template-columns:1fr 1fr;height:58px;background:rgba(229,211,188,.72)}
.panel-tabs button{border:0;background:transparent;color:#9a8062;font-weight:900}
.panel-tabs button.is-active{color:var(--gold);background:rgba(255,248,238,.72);box-shadow:inset 0 -2px 0 var(--gold)}
.selected-card,.comments-card,.notes-card{padding:16px 20px;border-bottom:1px solid rgba(130,96,61,.14)}
.selected-ref{margin:0 0 10px;color:#8b6a43;font-weight:900}
.selected-card blockquote{margin:0;font-family:"Noto Serif KR",serif;font-size:1.03rem;line-height:1.7}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.section-head h2,.notes-card h2{margin:0;font-size:1rem}
.comment-list{display:grid;gap:11px;max-height:34vh;overflow:auto;padding-right:4px}
.comment-item{border:1px solid rgba(137,97,52,.18);border-radius:14px;background:rgba(255,252,246,.82);padding:13px 14px;box-shadow:0 8px 18px rgba(79,49,23,.05)}
.comment-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:9px}
.comment-actions button{height:28px;padding:0 10px;border:1px solid rgba(137,97,52,.2);border-radius:8px;background:#fffaf1;color:#725432;font-size:.75rem;font-weight:900}
.bookmark-item{display:grid;gap:5px;width:100%;border:1px solid rgba(137,97,52,.18);border-radius:12px;background:rgba(255,252,246,.76);padding:12px 14px;text-align:left;color:#4a3826}
.bookmark-item strong{font-size:.9rem;color:#7a4d19}
.bookmark-item span{font-family:"Noto Serif KR",serif;line-height:1.5}
.comment-meta{display:flex;justify-content:space-between;gap:10px;color:#9a846a;font-size:.78rem;font-weight:800;margin-bottom:8px}
.comment-item p{margin:0;line-height:1.55}
.empty{color:#927b60;font-weight:700;line-height:1.6}
.comment-form{padding:14px 18px;border-bottom:1px solid rgba(130,96,61,.14)}
.comment-form textarea{width:100%;resize:none;border:1px solid rgba(137,97,52,.2);border-radius:10px;background:#fffaf1;padding:12px;outline:0}
.comment-password-row{display:grid;grid-template-columns:auto minmax(120px,1fr);align-items:center;gap:7px 10px;margin-top:9px}
.comment-password-row label{color:#725a3f;font-size:.8rem;font-weight:900}
.comment-password-row input{height:36px;min-width:0;border:1px solid rgba(137,97,52,.2);border-radius:9px;background:#fffaf1;padding:0 10px;outline:0}
.comment-password-row small{grid-column:1/-1;color:#947b5e;font-size:.72rem;line-height:1.4}
.form-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:12px}
.form-row label{color:#7e674d;font-weight:800;font-size:.9rem}
.form-row button{height:40px;min-width:88px;border:0;border-radius:10px;background:var(--gold);color:white;font-weight:900}
.notes-card{border-bottom:0;padding-top:12px;padding-bottom:12px}
.together-list{display:grid;gap:6px;margin-top:10px;max-height:120px;overflow:auto}
.together-list button{border:1px solid rgba(137,97,52,.17);border-radius:9px;background:#fffaf1;text-align:left;padding:8px 10px;color:#4a3826;font-size:.88rem;line-height:1.42}
.mobile-comment-toggle{display:none}
.rotate-notice{display:none}
.auth-dialog,.comment-manage-dialog{width:min(420px,calc(100vw - 32px));border:1px solid rgba(135,96,51,.22);border-radius:18px;background:#fff8ec;color:var(--ink);box-shadow:var(--shadow);padding:0}
.auth-dialog::backdrop,.comment-manage-dialog::backdrop{background:rgba(39,25,14,.42)}
.auth-box{position:relative;display:grid;gap:12px;padding:24px}
.auth-box h2{margin:0;font-size:1.25rem}
.auth-box p{margin:0;color:#7e674d;line-height:1.55}
.auth-box input{height:42px;border:1px solid rgba(137,97,52,.24);border-radius:10px;background:#fffaf1;padding:0 12px;outline:0}
.auth-box button{height:40px;border:0;border-radius:10px;background:var(--gold);color:white;font-weight:900}
.auth-box #logoutButton{background:rgba(66,43,27,.72)}
.auth-mode-tabs{display:grid;grid-template-columns:1fr 1fr;margin-right:38px;border-radius:10px;background:rgba(213,189,158,.28);padding:3px}
.auth-mode-tabs button{height:34px;background:transparent;color:#8b7255}
.auth-mode-tabs button.is-active{background:#fff9ef;color:#76501f;box-shadow:0 3px 10px rgba(69,42,19,.09)}
.auth-view{display:grid;gap:10px}
.auth-view[hidden]{display:none}
.dialog-close{position:absolute;right:12px;top:12px;width:32px;height:32px;border-radius:50%;background:rgba(74,48,28,.12)!important;color:#5a3d22!important}
.auth-status{min-height:20px;font-weight:800}
.comment-manage-box{position:relative;display:grid;gap:12px;padding:24px}
.comment-manage-box h2{margin:0 40px 0 0;font-size:1.15rem}
.comment-manage-box textarea{width:100%;resize:vertical;border:1px solid rgba(137,97,52,.24);border-radius:10px;background:#fffaf1;padding:12px;outline:0}
.comment-manage-box input{height:42px;border:1px solid rgba(137,97,52,.24);border-radius:10px;background:#fffaf1;padding:0 12px;outline:0}
.comment-manage-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.comment-manage-actions button{height:40px;border:0;border-radius:10px;background:var(--gold);color:white;font-weight:900}
.comment-manage-actions .danger-button{background:#8d4639}
@media (max-width:900px){
  body{overflow:auto;background:linear-gradient(180deg,#fbf2e4 0%,#ead8bd 62%,#3a2618 100%)}
  .topbar{grid-template-columns:1fr auto;gap:8px 10px;height:auto;padding:9px 12px;position:sticky;top:0;z-index:40}
  .brand{gap:10px}
  .brand-icon{width:38px;height:31px}
  .brand-icon:before,.brand-icon:after{top:-8px;width:17px;height:25px}
  .brand-icon:before{left:6px}
  .brand-icon:after{right:6px}
  .brand strong{font-size:1.02rem;letter-spacing:-.02em}
  .brand small{display:none}
  .main-nav{grid-column:1 / -1;justify-content:flex-start;gap:16px;overflow:auto;font-size:.9rem;padding:2px 0 1px;scrollbar-width:none}
  .main-nav::-webkit-scrollbar{display:none}
  .main-nav a.is-active:after{bottom:-4px}
  .search{grid-column:1 / -1;justify-self:stretch;max-width:none;height:38px}
  .top-actions{justify-content:flex-end}
  .top-actions button{height:34px}
  .top-actions #authButton{min-width:62px;padding:0 11px}
  .top-actions #settingsButton{width:34px}
  .layout{width:100%;height:auto;grid-template-columns:1fr;padding:8px 10px 56px;overflow:visible}
  .reader-area{gap:8px}
  .reader-controls{height:auto;grid-template-columns:minmax(0,1fr) 36px minmax(78px,92px) 36px;gap:7px}
  .reader-controls select,.reader-controls button{height:36px;border-radius:11px}
  .reader-controls select{padding:0 10px;font-size:.9rem}
  .reader-tools{grid-column:1 / -1;justify-self:stretch;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:1px}
  .reader-tools button{height:34px;padding:0 5px;font-size:.82rem;border-radius:11px}
  .book-frame{grid-template-columns:1fr;padding:9px;height:clamp(392px,49svh,448px);flex:0 0 auto;border-radius:20px;box-shadow:0 16px 44px rgba(50,31,16,.2),inset 0 0 0 6px rgba(255,217,137,.14)}
  .book-frame:before,.page-right{display:none}
  .book-frame:after{left:7px;top:14px;bottom:14px;width:26px;border-radius:14px 3px 3px 14px}
  .book-page{padding:20px 14px 34px;border-radius:15px}
  .page-left{border-radius:15px;box-shadow:inset -18px 0 34px rgba(113,77,38,.12)}
  .book-page header{margin-bottom:12px}
  .book-page h1{font-size:clamp(1.54rem,7vw,1.78rem);margin-bottom:5px}
  .book-page p{font-size:.78rem}
  .verses{gap:2px;font-size:clamp(.78rem,3.42vw,.86rem);line-height:1.38}
  .verse-row{grid-template-columns:25px minmax(0,1fr) 30px;gap:5px;padding:3px 5px;border-radius:8px}
  .verse-bubble{min-width:26px;height:22px;font-size:.68rem;line-height:21px}
  .book-page footer{bottom:10px}
  .bottom-controls{grid-template-columns:1fr;gap:7px}
  .pager{width:100%;display:grid;grid-template-columns:minmax(58px,1fr) 34px minmax(58px,72px) 34px minmax(58px,1fr);gap:5px}
  .bottom-controls > button:first-child,.bottom-controls > button:last-child{justify-self:stretch}
  .bottom-controls button{height:34px;min-width:0;padding:0 7px;font-size:.78rem;border-radius:11px}
  .bottom-controls span{min-width:0;font-size:.78rem}
  .bottom-controls > #todayButton{grid-row:1}
  .bottom-controls > .pager{grid-row:2}
  .bottom-controls > #listenButton{grid-row:3}
  .status{bottom:46px;font-size:.76rem}
  .mobile-comment-toggle{display:inline-flex;align-self:center;justify-content:center;align-items:center;height:40px;margin-top:0;padding:0 18px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(66,43,27,.8);color:#fff8ec;font-weight:900}
  .side-panel{position:fixed;left:10px;right:10px;bottom:10px;z-index:60;max-height:min(72vh,620px);min-height:0;transform:translateY(calc(100% + 18px));transition:transform .22s ease;pointer-events:none}
  .side-panel.is-open{transform:translateY(0);pointer-events:auto}
  .panel-close{display:flex;position:absolute;right:12px;top:10px;z-index:3;width:34px;height:34px;align-items:center;justify-content:center;border:0;border-radius:50%;background:rgba(74,48,28,.12);color:#5a3d22;font-size:1.35rem;font-weight:900}
  .panel-tabs{height:50px}
  .selected-card,.comments-card,.comment-form,.notes-card{padding-left:16px;padding-right:16px}
  .comment-list{max-height:24vh}
  .notes-card{display:none}
}
@media (max-width:900px) and (orientation:portrait){
  html,body{height:100%;overflow:hidden}
  body{display:block;background:
    radial-gradient(circle at 50% 18%,rgba(255,255,255,.84),transparent 15rem),
    linear-gradient(180deg,#fbf2e4 0%,#ead8bd 70%,#3a2618 100%)}
  .topbar,.layout{display:none}
  .rotate-notice{display:flex;min-height:100dvh;align-items:center;justify-content:center;padding:28px;color:var(--ink)}
  .rotate-card{width:min(330px,100%);padding:30px 24px;border:1px solid rgba(143,103,58,.22);border-radius:26px;background:rgba(255,248,236,.86);box-shadow:0 24px 70px rgba(50,31,16,.2);text-align:center}
  .rotate-icon{display:inline-flex;width:72px;height:72px;align-items:center;justify-content:center;margin-bottom:14px;border-radius:50%;background:rgba(154,106,46,.12);color:#8a5b25;font-size:2.4rem;font-weight:900}
  .rotate-card h1{margin:0 0 12px;font-family:"Noto Serif KR",serif;font-size:1.55rem}
  .rotate-card p{margin:0;color:#715b43;line-height:1.65;font-weight:800}
  .rotate-card small{display:block;margin-top:16px;color:#9a8062;font-weight:900}
}
@media (max-width:900px) and (orientation:landscape){
  html,body{height:100%;overflow:hidden}
  .rotate-notice{display:none}
  .topbar{height:58px;grid-template-columns:minmax(190px,260px) minmax(240px,1fr) minmax(190px,270px) auto;padding:7px 12px;gap:10px;position:static}
  .brand-icon{width:42px;height:32px}
  .brand strong{font-size:1rem}
  .main-nav{grid-column:auto;justify-content:center;gap:18px;font-size:.82rem;padding:0}
  .search{grid-column:auto;height:34px}
  .top-actions button{height:32px}
  .layout{height:calc(100dvh - 58px);grid-template-columns:minmax(0,1fr) clamp(260px,31vw,320px);gap:9px;padding:7px 9px 9px;overflow:hidden}
  .reader-area{min-height:0;gap:6px}
  .reader-controls{height:34px;grid-template-columns:minmax(120px,180px) 34px minmax(76px,92px) 34px 1fr;gap:6px}
  .reader-controls select,.reader-controls button{height:32px;font-size:.8rem;border-radius:10px}
  .reader-tools{grid-column:auto;justify-self:end;display:flex;gap:5px;margin:0}
  .reader-tools button{height:32px;padding:0 7px;font-size:.76rem}
  .book-frame{flex:1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);height:auto;min-height:0;padding:9px 12px 18px;border-radius:18px}
  .book-frame:before{display:block;top:12px;bottom:18px;width:18px}
  .book-frame:after{left:6px;top:12px;bottom:12px;width:24px}
  .page-right{display:block}
  .book-page{padding:20px 18px 28px;border-radius:0;overflow:hidden}
  .page-left{border-radius:13px 2px 2px 13px}
  .page-right{border-radius:2px 13px 13px 2px}
  .page-right:after{width:66px;height:66px}
  .book-page header{margin-bottom:8px}
  .book-page h1{font-size:1.42rem;margin-bottom:4px}
  .book-page p{font-size:.7rem}
  .verses{gap:1px;font-size:clamp(.66rem,1.55vw,.78rem);line-height:1.32}
  .verse-row{grid-template-columns:22px minmax(0,1fr) 28px;gap:4px;padding:2px 4px;border-radius:7px}
  .verse-bubble{min-width:24px;height:20px;font-size:.62rem;line-height:19px}
  .book-page footer{bottom:7px;font-size:.75rem}
  .bottom-controls{height:34px;grid-template-columns:minmax(88px,1fr) auto minmax(72px,1fr);gap:8px}
  .pager{display:flex;gap:5px}
  .bottom-controls > #todayButton,.bottom-controls > .pager,.bottom-controls > #listenButton{grid-row:auto}
  .bottom-controls button{height:32px;padding:0 8px;font-size:.73rem}
  .bottom-controls span{font-size:.76rem}
  .mobile-comment-toggle{display:none}
  .side-panel{position:relative;left:auto;right:auto;bottom:auto;z-index:auto;max-height:100%;transform:none;pointer-events:auto;border-radius:14px}
  .panel-close{display:none}
  .panel-tabs{height:42px}
  .selected-card,.comments-card,.comment-form,.notes-card{padding:10px 12px}
  .selected-ref{margin-bottom:6px;font-size:.82rem}
  .selected-card blockquote{font-size:.82rem;line-height:1.5}
  .section-head{margin-bottom:7px}
  .section-head h2,.notes-card h2{font-size:.84rem}
  .comment-list{max-height:18vh;gap:6px}
  .comment-item{padding:8px 9px;border-radius:9px}
  .comment-form textarea{height:62px;padding:9px;font-size:.82rem}
  .form-row{margin-top:7px}
  .form-row label{font-size:.75rem}
  .form-row button{height:32px;min-width:64px}
  .notes-card{display:block}
  .together-list{max-height:58px;gap:4px}
  .together-list button{padding:5px 7px;font-size:.72rem}
  .status{bottom:38px}
}