/* 성경 읽기 — 가독성 중심 스타일
   원칙: ① 본문은 진한 글자색 + 넉넉한 줄간격, ② 절 번호는 색과 굵기로 확실히 구분,
        ③ 번역본마다 고유한 색을 붙여 대조읽기에서 한눈에 구분, ④ 터치 영역 44px 이상. */

:root{
  --bg:#f2f2f7; --surface:#ffffff; --surface2:#ededf2; --surface3:#e1e1e8;
  --ink:#12261f; --ink-soft:#33463e; --ink-dim:#6e6e73; --border:#e3e3e8;
  --accent:#1f8a6a; --accent-strong:#17704f; --accent-soft:#e3f4ee; --danger:#d63a2a;
  --c0:#1f8a6a; --c1:#9a4d0c; --c2:#245ca8; --c3:#8a2d6b; --c4:#5a6a12; --c5:#b0301f;
  --font-ui:'Saysettha OT','Pretendard Variable',Pretendard,'Noto Sans Variable','Noto Naskh Arabic Variable','Noto Sans Hebrew Variable','Noto Sans Thai Variable','Noto Sans Lao Variable','Noto Sans Devanagari Variable','Noto Sans Oriya Variable',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',sans-serif;
  --font-serif:'Saysettha OT','Noto Serif KR','Nanum Myeongjo','AppleMyungjo','Batang','Source Han Serif K','Noto Sans Variable','Noto Naskh Arabic Variable','Noto Sans Hebrew Variable','Noto Sans Thai Variable','Noto Sans Lao Variable','Noto Sans Devanagari Variable','Noto Sans Oriya Variable',serif;
  --shadow:0 2px 14px rgba(20,40,32,.07);
  color-scheme:light;
}
html.dark{
  --bg:#0b1a15; --surface:#12261f; --surface2:#1b332a; --surface3:#254238;
  --ink:#f1f7f4; --ink-soft:#d8e5df; --ink-dim:#9fb8ad; --border:#1f3a31;
  --accent:#8fe0bd; --accent-strong:#b4f0d6; --accent-soft:#1d3a31; --danger:#ff9d8d;
  --c0:#8fe0bd; --c1:#f0b36e; --c2:#8db8f2; --c3:#e79ccb; --c4:#c9d97a; --c5:#ff9d8d;
  --shadow:0 2px 14px rgba(0,0,0,.35);
  color-scheme:dark;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--font-ui);}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;color:inherit;}
input,select,textarea{font-family:inherit;color:inherit;font-size:16px;}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
[hidden]{display:none!important;}

#app{height:100dvh;}
.screen{height:100dvh;display:flex;flex-direction:column;}
.boot{height:100dvh;display:grid;place-items:center;}
.spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--accent);animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- 헤더 / 하단 바 ---------- */
.header{flex:none;display:flex;align-items:center;gap:8px;min-height:60px;padding:8px max(12px,calc((100vw - 980px)/2));border-bottom:1px solid var(--border);background:var(--surface);}
.icon-btn{width:44px;height:44px;flex:none;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;font-size:19px;color:var(--ink);}
.icon-btn:hover{background:var(--surface2);}
.icon-btn:disabled{opacity:.3;}
.header-title{flex:1;min-width:0;text-align:center;font-weight:800;font-size:17px;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:none;border:none;padding:8px;color:var(--ink);}
.header-title:disabled{color:var(--ink);opacity:1;}
.home-header{justify-content:space-between;border-bottom:none;background:transparent;}
.who{display:flex;align-items:center;gap:8px;min-width:0;}
.who-name{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.bottom-controls{flex:none;border-top:1px solid var(--border);background:var(--surface);padding:8px max(10px,calc((100vw - 980px)/2));padding-bottom:max(8px,env(safe-area-inset-bottom));}
.bc-row{display:flex;align-items:center;gap:6px;}
.bc-btn{height:44px;min-width:44px;flex:none;border-radius:12px;border:1px solid var(--border);background:var(--surface);font-weight:700;font-size:15px;padding:0 12px;color:var(--ink);}
.bc-btn small{font-size:.8em;}
.bc-btn:hover{border-color:var(--accent);background:var(--surface2);}
.bc-btn:disabled{opacity:.3;pointer-events:none;}
.bc-font{font-size:13px;padding:0 9px;}
.bc-pos{flex:1;min-width:0;height:44px;border-radius:999px;border:1px solid var(--border);background:var(--accent-soft);color:var(--accent-strong);font-weight:800;font-size:14px;padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bc-pos:hover{border-color:var(--accent);}

.hdr-chip{flex:none;height:36px;padding:0 13px;border-radius:999px;border:1.5px solid var(--accent);background:var(--accent-soft);color:var(--accent-strong);font-weight:800;font-size:13px;white-space:nowrap;}
.hdr-chip:hover{background:var(--surface3);}
.fab{position:fixed;z-index:30;right:14px;bottom:calc(84px + env(safe-area-inset-bottom));width:50px;height:50px;border-radius:999px;background:var(--accent);color:var(--surface);border:none;box-shadow:0 6px 18px rgba(0,0,0,.25);font-size:22px;font-weight:800;display:flex;align-items:center;justify-content:center;}
html.dark .fab{color:#0e1513;}
.fab-search{bottom:calc(142px + env(safe-area-inset-bottom));background:var(--surface);color:var(--accent-strong);border:1.5px solid var(--accent);font-size:20px;}

/* ---------- 본문 ---------- */
.content{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:20px 20px 120px;max-width:760px;width:100%;margin:0 auto;}
.content.wide{max-width:1120px;}

.chapter-title{text-align:center;padding:14px 0 22px;margin-bottom:6px;border-bottom:1px solid var(--border);}
.chapter-title h1{margin:2px 0 0;font-size:1.65rem;letter-spacing:-.03em;font-weight:800;color:var(--ink);}
.chapter-sub{font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--accent);}

.reading{font-family:var(--font-ui);color:var(--ink);}
.reading.serif{font-family:var(--font-serif);}
.reading.serif .verse-num{font-family:var(--font-ui);}
.verse-line{display:flex;align-items:baseline;gap:.75em;margin:0 0 .95em;line-height:1.9;letter-spacing:-.012em;word-break:keep-all;overflow-wrap:break-word;color:var(--ink);}
.reading>.verse-line:first-child{margin-top:1.1em;}
.verse-num{flex:none;min-width:1.9em;padding:.05em .42em;border-radius:.55em;text-align:center;font-family:var(--font-ui);font-size:.68em;font-weight:800;line-height:1.5;color:var(--accent-strong);background:var(--accent-soft);font-variant-numeric:tabular-nums;}
.verse-text{flex:1;min-width:0;}

/* ---------- 대조읽기 ---------- */
.compare-legend{flex:none;display:flex;gap:8px;overflow-x:auto;padding:8px max(14px,calc((100vw - 1080px)/2));border-bottom:1px solid var(--border);background:var(--surface);}
.legend-chip{flex:none;border:2px solid var(--tc);color:var(--tc);border-radius:999px;padding:4px 14px;font-weight:800;font-size:13px;white-space:nowrap;background:var(--surface);}
.tc0{--tc:var(--c0);}.tc1{--tc:var(--c1);}.tc2{--tc:var(--c2);}.tc3{--tc:var(--c3);}.tc4{--tc:var(--c4);}.tc5{--tc:var(--c5);}
.compare-verse-block{margin:0 0 14px;padding:16px 18px;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:var(--shadow);}
.compare-verse-head{display:inline-block;margin-bottom:12px;padding:3px 12px;border-radius:999px;background:var(--accent-soft);color:var(--accent-strong);font-size:.72em;font-weight:800;}
.compare-cols{display:grid;gap:14px;}
.compare-cols.multi{grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:12px 22px;}
.compare-col{min-width:0;border-left:4px solid var(--tc,var(--border));padding-left:12px;}
.compare-col-name{margin-bottom:5px;font-size:.7em;font-weight:800;color:var(--tc,var(--ink-dim));letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.compare-col .verse-line{line-height:1.8;margin:0;}
@media (max-width:760px){
  .compare-cols.multi{grid-template-columns:minmax(0,1fr);}
  .compare-col{padding:2px 0 2px 12px;}
}

/* ---------- 모달 / 시트 ---------- */
.modal-backdrop{position:fixed;inset:0;z-index:40;background:rgba(8,16,13,.55);display:flex;align-items:flex-end;justify-content:center;}
.modal-sheet{width:100%;max-width:720px;max-height:86vh;background:var(--surface);border:1px solid var(--border);border-bottom:0;border-radius:20px 20px 0 0;box-shadow:0 -12px 50px rgba(0,0,0,.25);display:flex;flex-direction:column;overflow:hidden;}
.modal-head{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border);}
.modal-title{flex:1;font-weight:800;font-size:17px;}
.modal-body{flex:1;overflow-y:auto;padding:16px 18px 26px;}
.modal-foot{padding:12px 18px;border-top:1px solid var(--border);}
@media (min-width:760px){
  .modal-backdrop{align-items:center;padding:24px;}
  .modal-sheet{border-radius:20px;border-bottom:1px solid var(--border);max-height:min(84vh,780px);}
}

/* ---------- 공통 요소 ---------- */
.btn-primary{width:100%;border-radius:12px;background:var(--accent);color:#fff;font-weight:800;padding:14px 16px;border:none;font-size:16px;min-height:48px;text-align:center;display:inline-block;}
html.dark .btn-primary{color:#0e1513;}
.btn-primary:hover{background:var(--accent-strong);}
.btn-primary:disabled{opacity:.45;pointer-events:none;}
.toolbar-btn{border-radius:10px;border:1px solid var(--border);background:var(--surface);font-weight:700;font-size:14px;padding:10px 14px;min-height:42px;color:var(--ink);display:inline-flex;align-items:center;}
.toolbar-btn:hover{background:var(--surface2);border-color:var(--accent);}
.toolbar-btn:disabled{opacity:.4;}
.link-btn{background:none;border:none;color:var(--ink-dim);text-decoration:underline;font-size:14px;padding:10px 8px;}
.card{border-radius:16px;border:1px solid var(--border);background:var(--surface);padding:16px 18px;box-shadow:var(--shadow);}
.card:hover{border-color:var(--accent);}
.card-link{display:block;}
.section-label{font-size:13px;font-weight:800;letter-spacing:.03em;color:var(--accent);margin:22px 0 8px;}
.section-label:first-child{margin-top:0;}
.pill{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--surface3);color:var(--ink-soft);white-space:nowrap;}
.badge-public{font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent-strong);white-space:nowrap;}
.grid-books{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.grid-chapters{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;}
.grid-btn{border-radius:10px;border:1px solid var(--border);background:var(--surface);padding:11px 6px;min-height:46px;font-size:14px;font-weight:700;text-align:center;color:var(--ink);}
.grid-btn:hover{border-color:var(--accent);background:var(--accent-soft);}
.field{display:block;margin-bottom:14px;}
.field-label{display:block;font-size:13px;font-weight:700;color:var(--ink-soft);margin-bottom:6px;}
.input{width:100%;border-radius:11px;border:1.5px solid var(--border);background:var(--surface);padding:12px;min-height:46px;}
.input:focus{border-color:var(--accent);}
textarea.input{min-height:72px;resize:vertical;}
.muted{color:var(--ink-dim);font-size:14px;line-height:1.6;}
.danger-text{color:var(--danger);}
.row{display:flex;align-items:center;gap:8px;}
.grow{flex:1;min-width:0;}
.report-box{margin-top:14px;border-radius:12px;background:var(--surface2);padding:14px;font-size:14px;}
.report-list{max-height:170px;overflow-y:auto;background:var(--surface);border-radius:8px;padding:8px;font-size:13px;margin:6px 0 0;list-style:none;}
.report-list li{padding:2px 0;}
.notice-bar{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap;margin:0 auto 18px;max-width:460px;padding:12px 14px;border-radius:12px;background:#fff4d6;color:#4a3600;font-size:14px;font-weight:600;}
html.dark .notice-bar{background:#3b3216;color:#ffe9a8;}

/* ---------- 홈 / 로그인 ---------- */
.home-content{max-width:none;padding:0 20px 40px;}
.home-wrap{max-width:460px;margin:0 auto;display:flex;flex-direction:column;gap:12px;padding-top:6px;}
.home-hero{text-align:center;padding:20px 0 14px;}
.home-hero h1{margin:0;font-size:clamp(32px,8vw,44px);font-weight:800;letter-spacing:-.05em;line-height:1.2;}
.home-hero .muted{margin:10px 0 0;}
.home-label{margin:14px 0 0;}
.home-card{display:flex;align-items:center;gap:16px;padding:20px 20px;border-radius:18px;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow);}
.home-card:hover{border-color:var(--accent);transform:translateY(-1px);}
.home-card-icon{flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:var(--accent-strong);background:var(--accent-soft);}
.home-card-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
.home-card-title{font-size:18px;font-weight:800;letter-spacing:-.03em;}
.home-card-desc{font-size:14px;color:var(--ink-dim);line-height:1.5;}
.home-card-arrow{font-size:26px;color:var(--accent);}
.home-links{display:flex;justify-content:center;gap:10px;margin-top:10px;}

.login-screen{align-items:center;justify-content:center;overflow-y:auto;padding:24px 18px;}
.login-wrap{width:100%;max-width:400px;margin:auto;}
.login-brand{text-align:center;margin-bottom:22px;}
.login-brand h1{margin:12px 0 8px;font-size:34px;font-weight:800;letter-spacing:-.05em;}
.login-logo{border-radius:18px;}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:22px 20px;box-shadow:var(--shadow);}
.login-error{min-height:1.4em;margin:0 0 8px;font-weight:700;font-size:14px;}
.login-notice{margin:0 0 14px;padding:10px 12px;border-radius:10px;background:var(--surface2);font-size:14px;font-weight:600;}
.login-hint{margin:14px 0 0;text-align:center;font-size:13px;}
.user-row+.user-row{margin-top:10px;}

/* ---------- 검색 패널 ---------- */
.ai-panel{position:fixed;z-index:50;right:14px;bottom:calc(84px + env(safe-area-inset-bottom));width:min(380px,92vw);height:min(540px,76vh);min-width:260px;min-height:300px;max-width:96vw;max-height:92vh;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:0 14px 50px rgba(0,0,0,.3);display:flex;flex-direction:column;overflow:hidden;resize:both;}
.ai-panel.maximized{width:94vw!important;height:86vh!important;left:3vw!important;top:5vh!important;right:auto!important;bottom:auto!important;}
.ai-panel-head{flex:none;display:flex;align-items:center;gap:4px;padding:8px 12px;border-bottom:1px solid var(--border);background:var(--surface2);cursor:move;user-select:none;}
.ai-panel-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;}
.ai-search-results{overflow-y:auto;padding:0 6px 8px;}
.ai-search-results button{color:var(--ink);}

/* ---------- 작은 화면 ---------- */
@media (max-width:600px){
  .content{padding:16px 16px 120px;}
  .header{min-height:56px;padding:6px 8px;}
  .bc-row{gap:5px;}
  .bc-btn{padding:0 9px;font-size:14px;}
  .bc-lbl{display:none;}
  .bc-pos{font-size:13px;}
  .grid-chapters{grid-template-columns:repeat(5,1fr);}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition:none!important;scroll-behavior:auto!important;}}

/* ---------- 대조 번역본 순서 끌기 ---------- */
.sel-row{border:1px solid var(--border);border-left:5px solid var(--tc,var(--border));background:var(--surface2);border-radius:10px;padding:4px 6px 4px 2px;margin-bottom:6px;gap:4px;user-select:none;-webkit-user-select:none;}
.sel-row.dragging{background:var(--surface);border-color:var(--accent);box-shadow:0 8px 22px rgba(0,0,0,.28);position:relative;z-index:2;}
.drag-handle{touch-action:none;cursor:grab;width:42px;height:42px;display:grid;place-items:center;font-size:22px;color:var(--ink-dim);flex:none;}
.sel-row.dragging .drag-handle{cursor:grabbing;color:var(--accent);}
.sel-num{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;background:var(--tc,var(--ink-dim));}
html.dark .sel-num{color:#0e1513;}
.sel-name{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ---------- 오른쪽→왼쪽 언어, 저작권 표시 ---------- */
.reading[dir=rtl] .verse-line{letter-spacing:0;word-break:normal;}
.compare-col[dir=rtl]{border-left:0;border-right:4px solid var(--tc,var(--border));padding:2px 12px 2px 0;}
.compare-col[dir=rtl] .verse-line{letter-spacing:0;word-break:normal;}
.compare-col[dir=rtl] .compare-col-name{direction:ltr;text-align:right;}
.notice-foot{margin:28px 0 0;padding-top:14px;border-top:1px solid var(--border);font-size:12px;line-height:1.6;color:var(--ink-dim);word-break:break-word;direction:ltr;text-align:left;font-family:var(--font-ui);}
.notice-foot p{margin:0 0 6px;}

/* ---------- 언어 선택 ---------- */
.lang-select{height:36px;padding:0 10px;border-radius:999px;border:1.5px solid var(--border);background:var(--surface);color:var(--ink);font-size:13px;font-weight:700;}
.lang-row{margin-top:12px;}
.home-links{flex-wrap:wrap;align-items:center;}

/* ---------- 발표 모드(조작 화면) — 태블릿 이상에서만 ---------- */
.present-only{display:none;}
@media (min-width:768px){html.can-present .present-only{display:inline-flex;align-items:center;}}
.pres-bar{flex:none;max-height:46vh;overflow-y:auto;border-top:2px solid var(--accent);background:var(--accent-soft);padding:8px max(10px,calc((100vw - 980px)/2));}
.pres-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.pres-label{font-weight:800;font-size:15px;color:var(--accent-strong);min-width:7em;text-align:center;}
.pres-gap{flex:1;}
.pres-nav{width:44px;height:40px;border-radius:10px;border:1.5px solid var(--accent);background:var(--surface);color:var(--accent-strong);font-size:16px;font-weight:800;}
.pres-group{display:inline-flex;align-items:center;gap:0;border:1.5px solid var(--border);border-radius:10px;overflow:hidden;background:var(--surface);}
.pres-cap{font-size:12px;font-weight:700;color:var(--ink-dim);padding:0 8px;}
.pres-seg{height:38px;min-width:38px;padding:0 10px;border:0;border-left:1px solid var(--border);background:var(--surface);color:var(--ink);font-weight:700;font-size:14px;}
.pres-cap+.pres-seg,.pres-group>.pres-seg:first-child{border-left:0;}
.pres-seg.on{background:var(--accent);color:#fff;}
html.dark .pres-seg.on{color:#0e1513;}
.pres-btn{height:40px;padding:0 12px;border-radius:10px;border:1.5px solid var(--border);background:var(--surface);color:var(--ink);font-weight:700;font-size:14px;}
.pres-btn.on{background:var(--ink);color:var(--surface);}
.pres-btn.end{border-color:var(--danger);color:var(--danger);}
.pres-current{background:color-mix(in srgb,var(--accent) 16%,transparent);border-radius:10px;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent);}
.compare-verse-block.pres-current{background:var(--accent-soft);box-shadow:0 0 0 3px var(--accent);}

/* ---------- 하이라이트·메모 (밝은/어두운 테마 모두 대응) ---------- */
:root{--hl1:#fff0a3;--hl2:#ffd6e4;--hl3:#cde4ff;--hl4:#d6f3c9;--hl5:#e6dcfb;--hl1b:#d8b400;--hl2b:#e0759c;--hl3b:#5b9be8;--hl4b:#5fb04a;--hl5b:#8a6bd6;}
html.dark{--hl1:rgba(255,214,10,.30);--hl2:rgba(255,110,160,.34);--hl3:rgba(96,165,255,.36);--hl4:rgba(110,210,90,.32);--hl5:rgba(170,130,255,.36);--hl1b:#e6c200;--hl2b:#ff86ad;--hl3b:#7db3ff;--hl4b:#86d66f;--hl5b:#b79cff;}
.reading .verse-line{cursor:pointer;}
.verse-line.hl1 .verse-text,.verse-line.hl2 .verse-text,.verse-line.hl3 .verse-text,.verse-line.hl4 .verse-text,.verse-line.hl5 .verse-text{padding:.08em .3em;margin:0 -.3em;border-radius:.35em;-webkit-box-decoration-break:clone;box-decoration-break:clone;}
.verse-line.hl1 .verse-text{background:var(--hl1);}
.verse-line.hl2 .verse-text{background:var(--hl2);}
.verse-line.hl3 .verse-text{background:var(--hl3);}
.compare-verse-block.hl1{background:var(--hl1);border-color:var(--hl1b);}
.compare-verse-block.hl2{background:var(--hl2);border-color:var(--hl2b);}
.compare-verse-block.hl3{background:var(--hl3);border-color:var(--hl3b);}
.memo-dot{display:inline-block;margin-left:.45em;font-size:.8em;color:var(--accent-strong);cursor:pointer;vertical-align:.1em;}
.hl-flash{animation:hlflash 1.6s ease;}
@keyframes hlflash{0%,60%{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px;}100%{outline:3px solid transparent;}}
.hl-sheet{max-width:560px;}
.hl-preview{margin:0 0 14px;padding:10px 12px;border-radius:10px;background:var(--surface2);font-size:14px;line-height:1.6;color:var(--ink-soft);}
.hl-colors{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.hl-swatch{width:48px;height:48px;border-radius:50%;border:2px solid var(--border);display:grid;place-items:center;font-size:20px;font-weight:800;color:var(--ink);}
.hl-swatch.s1{background:var(--hl1);border-color:var(--hl1b);}
.hl-swatch.s2{background:var(--hl2);border-color:var(--hl2b);}
.hl-swatch.s3{background:var(--hl3);border-color:var(--hl3b);}
.hl-swatch.on{box-shadow:0 0 0 3px var(--accent);}
.hl-clear{margin-left:auto;height:40px;padding:0 14px;border-radius:10px;border:1.5px solid var(--border);background:var(--surface);color:var(--ink-soft);font-weight:700;font-size:14px;}
.hl-memo{min-height:100px;line-height:1.6;resize:vertical;}
.hl-note{margin:10px 0 0;font-size:12px;}
.hl-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.hl-chip{height:36px;padding:0 14px;border-radius:999px;border:1.5px solid var(--border);background:var(--surface);color:var(--ink);font-weight:700;font-size:13px;}
.hl-chip.s1{border-color:var(--hl1b);}.hl-chip.s2{border-color:var(--hl2b);}.hl-chip.s3{border-color:var(--hl3b);}
.hl-chip.on{background:var(--accent);color:#fff;border-color:var(--accent);}
html.dark .hl-chip.on{color:#0e1513;}
.hl-row{display:block;margin-bottom:10px;border-left-width:6px;}
.hl-row.hl1{border-left-color:var(--hl1b);background:var(--hl1);}
.hl-row.hl2{border-left-color:var(--hl2b);background:var(--hl2);}
.hl-row.hl3{border-left-color:var(--hl3b);background:var(--hl3);}
.hl-ref{font-weight:800;font-size:14px;color:var(--accent-strong);margin-bottom:4px;}
.hl-text{font-size:15px;line-height:1.7;}
.hl-memo-view{margin-top:6px;font-size:14px;line-height:1.6;color:var(--ink-soft);white-space:pre-wrap;}
.hl-tools{display:flex;gap:8px;margin-top:20px;}

/* ---------- 발표 컨트롤 바: 윗줄(말씀 이동) / 아랫줄(화면 설정) ---------- */
.pres-bar{display:flex;flex-direction:column;gap:8px;}
.pres-row.pres-bottom{border-top:1px solid color-mix(in srgb,var(--accent) 30%,transparent);padding-top:8px;}
.pres-passage{height:40px;padding:0 14px;border-radius:10px;border:1.5px solid var(--accent);background:var(--surface);color:var(--accent-strong);font-weight:800;font-size:15px;white-space:nowrap;}
.pres-passage:hover{background:var(--surface3);}
.bg-preview{height:150px;border-radius:12px;border:1px solid var(--border);background:var(--surface2) center/cover no-repeat;display:grid;place-items:center;color:var(--ink-dim);font-size:14px;}
.bg-anchor{display:grid;grid-template-columns:repeat(3,52px);gap:6px;}
.bg-anchor button{height:44px;border-radius:10px;border:1.5px solid var(--border);background:var(--surface);color:var(--ink);font-size:18px;font-weight:800;}
.bg-anchor button.on{background:var(--accent);color:#fff;border-color:var(--accent);}
html.dark .bg-anchor button.on{color:#0e1513;}
.reading .verse-line{touch-action:manipulation;}

.pres-color{width:42px;height:38px;padding:2px;border:0;border-left:1px solid var(--border);background:var(--surface);cursor:pointer;}
.pres-fxcolor .pres-seg{border-left:1px solid var(--border);}

/* ---------- 하이라이트: 선택(물결 밑줄) + 선택 바 ---------- */
.verse-line.sel .verse-text,.compare-verse-block.sel .verse-text{text-decoration:underline wavy var(--accent);text-decoration-thickness:2px;text-underline-offset:.28em;text-decoration-skip-ink:none;}
.compare-verse-block.sel{box-shadow:0 0 0 2px var(--accent);}
.hl-bar{flex:none;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px max(12px,calc((100vw - 980px)/2));border-top:2px solid var(--accent);background:var(--accent-soft);}
.hl-count{font-weight:800;font-size:14px;color:var(--accent-strong);margin-right:4px;}
.hl-swatch.sm{width:36px;height:36px;font-size:15px;}
.hl-barbtn{height:38px;padding:0 12px;border-radius:10px;border:1.5px solid var(--border);background:var(--surface);color:var(--ink);font-weight:700;font-size:14px;}
.hl-barbtn:last-child{margin-left:auto;}

/* ---------- 발표 글자 설정 창 / 오프라인 저장 ---------- */
.pres-text .field-label{margin-top:14px;}
.pres-text .field-label:first-child{margin-top:0;}
.pres-range{width:100%;accent-color:var(--accent);height:32px;}
.pres-pct{min-width:48px;text-align:center;font-size:13px;font-weight:800;color:var(--ink-soft);border-left:1px solid var(--border);align-self:stretch;display:grid;place-items:center;}
.pres-group>.pres-seg{border-left:1px solid var(--border);}
.pres-group>.pres-pct+.pres-seg{border-left:1px solid var(--border);}
.tr-card{display:flex;align-items:center;gap:10px;}
.tr-main{flex:1;min-width:0;display:block;}
.off-btn{flex:none;height:38px;padding:0 12px;border-radius:10px;border:1.5px solid var(--border);background:var(--surface);color:var(--ink-soft);font-weight:700;font-size:12px;white-space:nowrap;}
.off-btn:hover{border-color:var(--accent);color:var(--accent-strong);}
.off-btn.saved{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-strong);}
.off-btn:disabled{opacity:.6;}

/* ---------- 메인 메뉴 아이콘 타일 (라이트: 연한 민트 / 다크: 진한 초록 + 민트 선) ---------- */
:root{--mi-fg:#1b6b52;--mi-acc:#1ea46b;--mi-bg:linear-gradient(135deg,#f4fbf8,#dff2e8 55%,#c8e6d7);--mi-rim:rgba(27,107,82,.24);--mi-glow:rgba(255,255,255,.95);--mi-shadow:0 3px 10px rgba(27,107,82,.14);}
html.dark{--mi-fg:#afe2cc;--mi-acc:#82dba4;--mi-bg:linear-gradient(135deg,#285e4c,#1c3b30 48%,#182d26);--mi-rim:rgba(145,211,181,.30);--mi-glow:rgba(131,219,183,.26);--mi-shadow:0 3px 12px rgba(0,0,0,.35);}
.home-card-icon{flex:none;width:52px;height:52px;padding:0;display:block;border-radius:14px;color:var(--mi-fg);background:radial-gradient(circle at 12% 8%,var(--mi-glow),transparent 62%),var(--mi-bg);border:1px solid var(--mi-rim);box-shadow:var(--mi-shadow);overflow:hidden;}
.home-card-icon svg.mi{display:block;width:100%;height:100%;}
.home-card:hover .home-card-icon{border-color:var(--accent);}

.pres-x{width:40px;height:40px;border-radius:10px;border:1.5px solid var(--danger);background:var(--surface);color:var(--danger);font-size:18px;font-weight:800;margin-left:4px;}

/* ---------- 번역본 배치 선택 창 ---------- */
.lay-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
.lay-opt{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;border-radius:14px;border:1.5px solid var(--border);background:var(--surface);color:var(--ink-dim);font-weight:700;font-size:14px;}
.lay-opt span{color:var(--ink);}
.lay-opt:hover{border-color:var(--accent);}
.lay-opt.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-strong);box-shadow:0 0 0 2px var(--accent);}

/* ---------- 플로팅 발표 컨트롤러 ---------- */
.pres-bar.floating{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(960px,96vw);max-height:62vh;overflow-y:auto;z-index:45;padding:10px 12px;border:2px solid var(--accent);border-radius:18px;background:var(--accent-soft);box-shadow:0 14px 44px rgba(0,0,0,.38);}
.pres-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.pres-grip{touch-action:none;cursor:grab;width:34px;height:40px;display:grid;place-items:center;font-size:22px;color:var(--ink-dim);user-select:none;flex:none;}
.pres-grip:active{cursor:grabbing;color:var(--accent);}
.pres-bar.floating .pres-row.pres-top{margin-top:8px;}
.pres-bar.floating .pres-row.pres-bottom{margin-top:8px;}
.pres-btn:disabled,.pres-seg:disabled{opacity:.35;}

/* ---------- 나레이션 플레이어 ---------- */
.nar-current{background:color-mix(in srgb,var(--accent) 14%,transparent);border-radius:10px;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent);}
.nar-bar{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(760px,96vw);z-index:44;padding:10px 12px;border:2px solid var(--accent);border-radius:18px;background:var(--accent-soft);box-shadow:0 12px 36px rgba(0,0,0,.34);max-height:50vh;overflow-y:auto;}
.nar-bar.nar-top{bottom:auto;top:70px;}
.nar-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.nar-opts{margin-top:8px;gap:10px 14px;}
.nar-play{width:52px;height:44px;border-radius:12px;border:0;background:var(--accent);color:#fff;font-size:20px;font-weight:800;}
html.dark .nar-play{color:#0e1513;}
.nar-play:disabled{opacity:.35;}
.nar-label{font-weight:800;font-size:15px;color:var(--accent-strong);}
.nar-field{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--ink-soft);}
.nar-field select{height:36px;max-width:190px;border-radius:10px;border:1.5px solid var(--border);background:var(--surface);color:var(--ink);font-size:13px;padding:0 6px;}
.nar-check{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--ink-soft);}
.nar-note{margin:8px 0 0;font-size:12px;}

.nar-step{width:34px;height:34px;border:1.5px solid var(--border);border-radius:9px;}
.nar-rate{display:inline-block;min-width:3.2em;text-align:center;font-size:14px;color:var(--ink);}
.nar-chips{display:flex;gap:6px;flex-wrap:wrap;}
.nar-chip{height:34px;padding:0 11px;border-radius:999px;border:1.5px solid var(--border);background:var(--surface);color:var(--ink);font-weight:700;font-size:13px;}
.nar-chip.on{background:var(--accent);color:#fff;border-color:var(--accent);}
html.dark .nar-chip.on{color:#0e1513;}

.nar-diag{margin-top:6px;font-size:12px;}
.nar-diag summary{cursor:pointer;color:var(--ink-dim);font-weight:700;}
.nar-diag p{margin:6px 0 0;line-height:1.6;word-break:break-all;}

/* ---------- 두 번 탭 확대 방지(핀치 확대는 그대로 가능) ---------- */
*{touch-action:manipulation;}
.drag-handle,.pres-grip{touch-action:none;}

/* ---------- 번역본 서재(내 성경·검색·언어별 접기) ---------- */
.lib-search{margin-bottom:2px;}
.lib-group{margin:10px 0;}
.lib-group>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;padding:10px 4px;font-weight:800;font-size:14px;color:var(--accent-strong);}
.lib-group>summary::-webkit-details-marker{display:none;}
.lib-group>summary::before{content:'▸';font-size:12px;color:var(--ink-dim);transition:transform .15s;}
.lib-group[open]>summary::before{transform:rotate(90deg);}
.lib-group.fav>summary{color:#b8860b;}
html.dark .lib-group.fav>summary{color:#f0c14b;}
.lib-count{font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--surface3);color:var(--ink-soft);}
.lib-hint{font-size:13px;margin:10px 2px;}
.lib-star{flex:none;width:40px;height:40px;border-radius:10px;border:0;background:none;font-size:24px;line-height:1;color:var(--ink-dim);}
.lib-star.on{color:#e0a800;}
.lib-star:hover{background:var(--surface2);}
.lib-row{display:flex;align-items:center;gap:2px;border-radius:10px;}
.lib-row:hover{background:var(--surface2);}
.lib-row.active .lib-pick{font-weight:800;}
.lib-pick{flex:1;min-width:0;display:flex;align-items:center;gap:10px;text-align:left;padding:10px 10px;border:0;background:none;font-size:15px;color:var(--ink);}
.lib-pick span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lib-pick small{flex:none;font-size:12px;color:var(--ink-dim);}
.lib-pick b{flex:none;color:var(--accent-strong);}
.tr-card .lib-star{margin-left:-8px;}

/* ---------- 말씀 카드 / 알림 ---------- */
.card-body .field-label{margin-top:14px;}
.card-preview{display:grid;place-items:center;background:var(--surface2);border-radius:14px;padding:10px;}
.card-preview canvas{max-width:100%;max-height:44vh;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.25);}
.card-sws{display:flex;gap:10px;flex-wrap:wrap;}
.card-sw{width:46px;height:46px;border-radius:12px;border:2px solid var(--border);display:grid;place-items:center;font-size:20px;cursor:pointer;background:var(--surface);}
.card-sw.on{box-shadow:0 0 0 3px var(--accent);border-color:var(--accent);}
.card-foot{display:flex;gap:10px;}
.card-foot .btn-primary{flex:1;}
.btn-primary.alt{background:var(--surface);color:var(--accent-strong);border:2px solid var(--accent);}
html.dark .btn-primary.alt{color:var(--accent-strong);}
.toast{position:fixed;left:50%;bottom:calc(110px + env(safe-area-inset-bottom));transform:translate(-50%,12px);background:rgba(20,28,25,.92);color:#fff;font-weight:700;font-size:15px;padding:12px 22px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:80;}
.toast.on{opacity:1;transform:translate(-50%,0);}

/* ---------- 방송 패널: 화면 아래쪽에 가로로 넓게 ---------- */
#onairPanel{position:fixed;left:50%;transform:translateX(-50%);bottom:10px;width:min(1180px,calc(100vw - 20px));max-height:min(58vh,560px);z-index:60;background:var(--surface);color:var(--ink);border:2px solid var(--accent);border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.35);display:flex;flex-direction:column;overflow:hidden;}
#onairPanel.min{max-height:none;}
.oa-head{display:flex;align-items:center;gap:10px;padding:6px 12px;background:var(--accent-soft);border-bottom:1px solid var(--border);font-size:15px;flex:none;}
.oa-tabs{display:flex;gap:4px;margin-left:6px;}
.oa-tab{height:34px;padding:0 16px;border-radius:9px;border:1.5px solid transparent;background:transparent;color:var(--ink);font-weight:800;font-size:14px;cursor:pointer;}
.oa-tab.on{background:var(--ink);color:var(--surface);}
.oa-live{margin-left:auto;font-size:12px;font-weight:800;color:var(--danger);}
.oa-live.on::before{content:'● ';}
.oa-mode{font-size:12px;font-weight:800;padding:3px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--border);}
.oa-x{width:32px;height:32px;border-radius:8px;border:0;background:transparent;color:var(--ink);font-size:16px;cursor:pointer;}
.oa-body{padding:10px 12px 12px;overflow-y:auto;}
.oa-cols{display:grid;grid-template-columns:minmax(300px,1.05fr) minmax(250px,.9fr) minmax(300px,1.15fr);gap:10px;align-items:start;}
.oa-cols.two{grid-template-columns:1fr 1fr;}
.oa-card{border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:var(--surface);display:flex;flex-direction:column;gap:8px;min-width:0;}
.oa-card h4{margin:0;font-size:13px;color:var(--accent-strong);}
.oa-card h4 small{font-weight:600;color:var(--muted);margin-left:6px;}
.oa-prevbox{width:100%;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:repeating-conic-gradient(#8a8a8a 0 25%,#6f6f6f 0 50%) 0 0/16px 16px;border:1px solid var(--border);}
.oa-prevbox iframe{width:100%;height:100%;border:0;pointer-events:none;display:block;}
.oa-note{margin:0;font-size:12px;color:var(--muted);line-height:1.5;}
.oa-note code{background:var(--surface2);padding:1px 5px;border-radius:5px;font-size:11px;word-break:break-all;}
.oa-steps{margin:0;padding-left:18px;font-size:13px;line-height:1.7;}
.oa-lbl{font-size:12px;color:var(--muted);}
.oa-cap{font-size:12px;color:var(--muted);min-width:44px;flex:none;}
.oa-row{display:flex;gap:6px;align-items:center;}
.oa-row.wrap{flex-wrap:wrap;}
.oa-rrow{display:grid;grid-template-columns:96px 1fr auto;gap:8px;align-items:center;}
.oa-rrow > .oa-row{grid-column:2 / -1;}
.oa-rrow b{min-width:48px;text-align:right;font-size:12px;}
.oa-seg{min-height:34px;padding:0 12px;border-radius:9px;border:1.5px solid var(--border);background:var(--surface);color:var(--ink);font-weight:700;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:4px;flex:none;}
.oa-seg i{font-style:normal;font-size:10px;opacity:.55;font-weight:600;}
.oa-row:not(.wrap) > .oa-seg:not(.ghost):not(.file){flex:1;}
.oa-seg.on{background:var(--ink);color:var(--surface);border-color:var(--ink);}
.oa-seg.danger{border-color:var(--danger);color:var(--danger);}
.oa-seg.ghost{border-style:dashed;}
.oa-seg:disabled{opacity:.4;cursor:default;}
.oa-nav{width:42px;height:38px;border-radius:9px;border:1.5px solid var(--border);background:var(--surface);color:var(--ink);cursor:pointer;flex:none;}
.oa-pass{flex:1;height:38px;border-radius:9px;border:1.5px solid var(--accent);background:var(--accent-soft);color:var(--ink);font-weight:800;font-size:14px;cursor:pointer;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.oa-sel{flex:1;min-width:0;height:34px;border-radius:8px;border:1.5px solid var(--border);background:var(--surface);color:var(--ink);}
.oa-input{flex:1;min-width:0;height:36px;border-radius:9px;border:1.5px solid var(--border);padding:0 10px;background:var(--surface);color:var(--ink);font-size:14px;}
.oa-inl{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-left:auto;}
.oa-inl select{height:32px;border-radius:8px;border:1.5px solid var(--border);background:var(--surface);color:var(--ink);}
.oa-presets{display:flex;flex-direction:column;gap:5px;max-height:150px;overflow-y:auto;}
.oa-preset{display:flex;gap:4px;}
.oa-take{flex:1;min-height:40px;border-radius:10px;border:2px solid var(--border);background:var(--surface2);color:var(--ink);font-weight:800;font-size:14px;text-align:left;padding:4px 10px;cursor:pointer;display:flex;align-items:center;gap:10px;min-width:0;}
.oa-take span{font-size:11px;font-weight:800;padding:2px 8px;border-radius:6px;background:var(--accent-soft);color:var(--accent-strong);flex:none;}
.oa-preset.live .oa-take{border-color:var(--danger);background:rgba(200,50,50,.1);}
.oa-del{width:32px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--muted);cursor:pointer;}
.oa-rrow input[type=range]{width:100%;min-width:0;}
.oa-color{width:44px;height:32px;padding:0;border:1.5px solid var(--border);border-radius:8px;background:var(--surface);}
.oa-sw{width:38px;height:34px;border-radius:9px;border:2px solid var(--border);cursor:pointer;flex:none;}
.oa-sw.on{box-shadow:0 0 0 3px var(--accent);}
@media (max-width:1000px){.oa-cols,.oa-cols.two{grid-template-columns:1fr;}}
@media (max-width:767px){#onairPanel{display:none;}}
.oa-state{font-size:12px;font-weight:800;color:var(--muted);}
.oa-state.on{color:#1a8f4d;}
.oa-state.retry,.oa-state.error{color:var(--danger);}
.oa-seg{white-space:nowrap;}.oa-row:not(.wrap) > .oa-seg{padding:0 8px;}
.oa-cols.four{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:1000px){.oa-cols.four{grid-template-columns:1fr 1fr;}}

.oa-lookbar{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap;}
.oa-lookbar .oa-row{flex:1;min-width:300px;}
.oa-modesw{display:flex;gap:0;margin-left:auto;}
.oa-modesw .oa-seg{border-radius:0;min-width:64px;}
.oa-modesw .oa-seg:first-child{border-radius:9px 0 0 9px;}
.oa-modesw .oa-seg:last-child{border-radius:0 9px 9px 0;}
#onairPanel.adv{max-height:min(86vh,820px);}
.oa-cols.adv{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));}
.oa-cols.adv .oa-c-prev{position:sticky;top:0;z-index:2;}
.oa-anchor{display:grid;grid-template-columns:repeat(3,34px);gap:3px;grid-column:2 / -1;}
.oa-anchor button{height:30px;border-radius:7px;border:1.5px solid var(--border);background:var(--surface);color:var(--ink);cursor:pointer;}
.oa-anchor button.on{background:var(--ink);color:var(--surface);}

/* 이름 띠 목록: 이름 | 송출 | 삭제 */
.oa-pname{flex:1;min-height:40px;border-radius:10px;border:2px solid var(--border);background:var(--surface2);color:var(--ink);font-weight:800;font-size:14px;padding:4px 10px;display:flex;align-items:center;gap:10px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.oa-pname span{font-size:11px;font-weight:800;padding:2px 8px;border-radius:6px;background:var(--accent-soft);color:var(--accent-strong);flex:none;}
.oa-preset.live .oa-pname{border-color:var(--danger);background:rgba(200,50,50,.1);}
.oa-go{width:64px;border-radius:10px;border:0;background:var(--accent);color:#fff;font-weight:800;cursor:pointer;flex:none;}
/* 위치 미세 조정 */
.oa-nudge{display:flex;flex-direction:column;gap:5px;margin-top:2px;padding-top:8px;border-top:1px dashed var(--border);}
.oa-ndrow{display:flex;gap:5px;align-items:center;flex-wrap:wrap;}
.oa-nd{width:38px;height:34px;border-radius:9px;border:1.5px solid var(--border);background:var(--surface);color:var(--ink);font-size:15px;cursor:pointer;flex:none;}
.oa-nd:active{background:var(--ink);color:var(--surface);}
.oa-ndsteps{display:inline-flex;margin-left:4px;}
.oa-ndsteps button{height:30px;padding:0 8px;border:1.5px solid var(--border);background:var(--surface);color:var(--ink);font-size:12px;font-weight:700;cursor:pointer;}
.oa-ndsteps button:first-child{border-radius:8px 0 0 8px;}
.oa-ndsteps button:last-child{border-radius:0 8px 8px 0;}
.oa-ndsteps button.on{background:var(--ink);color:var(--surface);}
.oa-ndval{font-size:12px;color:var(--muted);margin-left:auto;}

/* ===== 방송 패널 v2: 움직이고 크기 조절 · 미리보기 상자 · 편집 도구 ===== */
#onairPanel{position:fixed;max-height:none !important;min-height:0;display:flex;flex-direction:column;overflow:hidden;}
#onairPanel.min{height:auto !important;}
#onairPanel .oa-head{cursor:grab;user-select:none;touch-action:none;}
#onairPanel .oa-head:active{cursor:grabbing;}
#onairPanel .oa-title{margin-right:2px;}
#onairPanel .oa-body{flex:1;min-height:0;overflow:auto;}
.oa-rs{position:absolute;right:0;bottom:0;width:22px;height:22px;cursor:nwse-resize;touch-action:none;z-index:3;background:linear-gradient(135deg,transparent 0 52%,var(--accent) 52% 58%,transparent 58% 70%,var(--accent) 70% 76%,transparent 76%);border-bottom-right-radius:14px;}
.oa-lookbar{display:flex;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap;}
.oa-lookbar .oa-row{flex:1;min-width:300px;}
.oa-modesw{display:flex;margin-left:auto;}
.oa-modesw .oa-seg{border-radius:0;min-width:64px;}
.oa-modesw .oa-seg:first-child{border-radius:9px 0 0 9px;}
.oa-modesw .oa-seg:last-child{border-radius:0 9px 9px 0;}
.oa-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:8px;}
.oa-chip{height:34px;padding:0 14px;border-radius:999px;border:1.5px solid var(--border);background:var(--surface);color:var(--ink);font-weight:800;font-size:13px;cursor:pointer;}
.oa-chip.on{background:var(--accent);border-color:var(--accent);color:#fff;}
.oa-hint{font-size:12px;color:var(--muted);margin-left:6px;}
.oa-grps{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;align-items:start;}
.oa-grp{border:1px solid var(--border);border-radius:12px;background:var(--surface);}
.oa-grp>summary{cursor:pointer;font-weight:800;font-size:13px;color:var(--accent-strong);padding:9px 12px;list-style:none;display:flex;align-items:center;gap:6px;}
.oa-grp>summary::before{content:'▸';font-size:11px;transition:transform .15s;}
.oa-grp[open]>summary::before{transform:rotate(90deg);}
.oa-gbody{padding:2px 12px 12px;display:flex;flex-direction:column;gap:8px;}

/* 미리보기 상자 */
#onairPrev{position:fixed;z-index:61;background:var(--surface);border:2px solid var(--accent);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.4);overflow:hidden;display:flex;flex-direction:column;}
.oa-phead{display:flex;align-items:center;gap:8px;padding:5px 8px 5px 12px;background:var(--accent-soft);border-bottom:1px solid var(--border);font-size:13px;cursor:grab;user-select:none;touch-action:none;}
.oa-phead b{margin-right:auto;}
.oa-demo{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--muted);cursor:pointer;}
.oa-pwrap{position:relative;width:100%;aspect-ratio:16/9;background:repeating-conic-gradient(#8a8a8a 0 25%,#6f6f6f 0 50%) 0 0/16px 16px;}
.oa-pwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;}
.oa-ov{position:absolute;inset:0;outline:none;pointer-events:none;}
.oa-ov.on{pointer-events:auto;cursor:default;}
.oa-hit{position:absolute;border:1.5px dashed rgba(255,255,255,.75);box-shadow:0 0 0 1px rgba(0,0,0,.5);cursor:move;box-sizing:border-box;}
.oa-hit:hover{border-color:#ffd54a;background:rgba(255,213,74,.12);}
.oa-hit.on{border:2px solid #ffd54a;background:rgba(255,213,74,.16);}
.oa-tagname{position:absolute;left:0;top:-17px;font-style:normal;font-size:10px;font-weight:800;background:#ffd54a;color:#222;padding:1px 6px;border-radius:4px 4px 0 0;white-space:nowrap;display:none;}
.oa-hit.on .oa-tagname,.oa-hit:hover .oa-tagname{display:block;}
.oa-hdl{position:absolute;width:12px;height:12px;background:#ffd54a;border:1.5px solid #222;border-radius:3px;box-sizing:border-box;}
.oa-hdl.h-l{left:-7px;top:50%;margin-top:-6px;cursor:ew-resize;}
.oa-hdl.h-r{right:-7px;top:50%;margin-top:-6px;cursor:ew-resize;}
.oa-hdl.h-t{top:-7px;left:50%;margin-left:-6px;cursor:ns-resize;}
.oa-hdl.h-br{right:-7px;bottom:-7px;cursor:nwse-resize;}
.oa-pbar{padding:6px 8px 12px;display:flex;flex-direction:column;gap:6px;}
#onairPrev .oa-rs{z-index:5;}
@media (max-width:767px){#onairPrev{display:none;}}
.oa-hdl.h-b{bottom:-7px;left:50%;margin-left:-6px;cursor:ns-resize;}

/* 홈의 방송·발표 카드 */
button.home-card{width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;}
.home-present-only{display:none !important;}
@media (min-width:768px){html.can-present .home-present-only{display:flex !important;}}

/* 방송 패널: ON AIR · 구절 3칸 · 공지 */
.oa-onair{height:32px;padding:0 12px;border-radius:999px;border:2px solid var(--border);background:var(--surface);color:var(--muted);font-weight:900;font-size:12px;letter-spacing:.04em;cursor:pointer;}
.oa-onair.on{background:#d62d2d;border-color:#d62d2d;color:#fff;box-shadow:0 0 0 3px rgba(214,45,45,.25);animation:oapulse 2s infinite;}
@keyframes oapulse{50%{box-shadow:0 0 0 6px rgba(214,45,45,.08);}}
.oa-cap2{font-size:12px;font-weight:800;color:var(--accent-strong);margin-top:2px;}
.oa-cap2 small{font-weight:600;color:var(--muted);margin-left:6px;}
.oa-slots{display:flex;flex-direction:column;gap:5px;}
.oa-slot{display:flex;gap:4px;}
.oa-slotgo{flex:1;min-height:38px;border-radius:9px;border:2px solid var(--border);background:var(--surface2);color:var(--ink);font-weight:800;font-size:14px;cursor:pointer;text-align:left;padding:0 12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.oa-slotgo:disabled{opacity:.5;font-weight:600;cursor:default;}
.oa-slot.on .oa-slotgo{border-color:var(--danger);background:rgba(200,50,50,.1);}
.oa-slotsave,.oa-slotclr{border-radius:9px;border:1.5px solid var(--border);background:var(--surface);color:var(--ink);font-size:12px;font-weight:700;cursor:pointer;padding:0 10px;}
.oa-slotclr{padding:0 8px;color:var(--muted);}
.oa-pvopts{display:flex;flex-wrap:wrap;gap:4px 12px;padding:5px 10px;font-size:12px;background:var(--surface2);border-bottom:1px solid var(--border);align-items:center;}
.oa-pvopts label{display:flex;align-items:center;gap:4px;cursor:pointer;}
.oa-pvopts span{font-weight:800;color:var(--muted);}
/* 공지 탭 */
.oa-nwrap{display:grid;grid-template-columns:minmax(270px,.8fr) minmax(360px,1.4fr);gap:10px;align-items:start;}
.oa-nqs{display:flex;flex-direction:column;gap:5px;max-height:300px;overflow-y:auto;}
.oa-nq{display:flex;align-items:center;gap:6px;padding:6px 8px;border:2px solid var(--border);border-radius:10px;background:var(--surface2);cursor:pointer;font-size:13px;min-width:0;}
.oa-nq.sel{border-color:var(--accent);}
.oa-nq.live{background:rgba(200,50,50,.1);border-color:var(--danger);}
.oa-nn{width:20px;height:20px;border-radius:50%;background:var(--ink);color:var(--surface);font-size:11px;font-weight:800;display:grid;place-items:center;flex:none;}
.oa-nt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;}
.oa-nq i{font-style:normal;font-size:10px;font-weight:800;padding:1px 6px;border-radius:5px;background:var(--accent-soft);color:var(--accent-strong);flex:none;}
.oa-nq .oa-go{width:48px;height:28px;font-size:12px;}
.oa-mv{width:24px;height:28px;border-radius:7px;border:1px solid var(--border);background:var(--surface);color:var(--ink);font-size:10px;cursor:pointer;flex:none;}
.oa-nq .oa-del{width:26px;height:28px;}
.oa-ntb{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:6px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);}
.oa-ntb button{min-width:32px;height:32px;border-radius:7px;border:1px solid var(--border);background:var(--surface);color:var(--ink);cursor:pointer;font-size:14px;padding:0 6px;}
.oa-ntb select{height:32px;border-radius:7px;border:1px solid var(--border);background:var(--surface);color:var(--ink);font-size:12px;}
.oa-nc{position:relative;width:34px;height:32px;display:grid;place-items:center;border:1px solid var(--border);border-radius:7px;background:var(--surface);cursor:pointer;overflow:hidden;}
.oa-nc input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;}
.oa-nc span{font-weight:900;border-bottom:3px solid #888;line-height:1.1;pointer-events:none;}
.oa-nc span.hl{background:#ffe94d;color:#222;border:0;padding:0 3px;border-radius:3px;}
.oa-nstage{position:relative;width:100%;border:2px solid var(--accent);border-radius:8px;overflow:hidden;background:repeating-conic-gradient(#8a8a8a 0 25%,#6f6f6f 0 50%) 0 0/16px 16px;}
.oa-ncanvas{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;}
.oa-nbgimg{position:absolute;inset:0;}
.oa-ntext{position:absolute;inset:0;display:flex;flex-direction:column;}
.oa-edtext{width:100%;outline:none;word-break:keep-all;overflow-wrap:break-word;cursor:text;}
.oa-edtext div,.oa-edtext p{margin:0;}
.oa-nimg{position:absolute;inset:0;display:flex;justify-content:center;}
.oa-nimg img{width:100%;height:100%;}
.oa-sendbtn{background:var(--accent) !important;color:#fff !important;border-color:var(--accent) !important;}
@media (max-width:1000px){.oa-nwrap{grid-template-columns:1fr;}}

.oa-slotn{width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--surface);font-size:12px;font-weight:800;display:grid;place-items:center;flex:none;align-self:center;}
.oa-slot.empty .oa-slotgo{border-style:dashed;color:var(--accent-strong);font-weight:800;background:var(--surface);}
.oa-slot.empty .oa-slotgo:disabled{opacity:1;}

.oa-nband{position:absolute;left:0;right:0;display:flex;flex-direction:column;overflow:hidden;}
.oa-nhead{flex:none;padding:14px 70px 6px;font-size:46px;font-weight:800;background:rgba(0,0,0,.28);}
.oa-ncat{display:inline-block;background:#fff;color:#0a3d82;font-weight:800;font-size:.72em;letter-spacing:.18em;padding:.1em .6em .1em .75em;margin-right:.6em;border-radius:3px;}

/* ===== 방송 패널 가독성: 구역 나누기 · 한 줄 설명 · 더 또렷한 글씨 ===== */
#onairPanel .oa-gbody{gap:16px;padding:6px 14px 16px;}
#onairPanel .oa-card{gap:14px;padding:12px 14px;}
#onairPanel .oa-card h4{font-size:14px;}
#onairPanel .oa-lbl{font-size:13px;font-weight:700;color:var(--ink);}
#onairPanel .oa-rrow{grid-template-columns:118px 1fr auto;gap:10px;}
#onairPanel .oa-fld{display:flex;flex-direction:column;gap:5px;}
#onairPanel .oa-help{font-size:11.5px;line-height:1.45;color:var(--muted);padding-left:2px;}
#onairPanel .oa-sep{display:flex;align-items:center;gap:10px;margin:8px 0 -2px;font-size:11.5px;font-weight:800;color:var(--accent-strong);letter-spacing:.04em;}
#onairPanel .oa-sep::after{content:'';flex:1;height:1px;background:var(--border);}
#onairPanel .oa-sep span{white-space:nowrap;}
#onairPanel .oa-grp>summary{font-size:14px;padding:11px 14px;}
#onairPanel .oa-note{font-size:12px;line-height:1.55;}
#onairPanel .oa-nudge{margin-top:0;padding-top:10px;gap:8px;}
#onairPanel .oa-row.wrap{gap:8px;}

.oa-open{height:32px;padding:0 12px;border-radius:999px;border:1.5px solid var(--accent);background:var(--surface);color:var(--accent-strong);font-weight:800;font-size:12px;cursor:pointer;white-space:nowrap;}
.oa-open:hover{background:var(--accent);color:#fff;}

/* 미디어 탭 · 카메라 */
.oa-mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;max-height:340px;overflow-y:auto;padding:2px;}
.oa-mcell{position:relative;display:flex;flex-direction:column;gap:3px;padding:4px;border:2px solid var(--border);border-radius:10px;background:var(--surface2);color:var(--ink);cursor:pointer;text-align:left;min-width:0;}
.oa-mcell.sel{border-color:var(--accent);}
.oa-mcell.live{border-color:var(--danger);background:rgba(200,50,50,.1);}
.oa-mcell img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px;background:#000;}
.oa-mcell span{font-size:11px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.oa-mvid{position:absolute;right:8px;top:8px;font-style:normal;font-size:10px;font-weight:800;background:rgba(0,0,0,.65);color:#fff;border-radius:5px;padding:1px 6px;}
.oa-camlist{display:flex;flex-direction:column;gap:6px;}
.oa-cam{display:flex;align-items:center;gap:8px;padding:8px 10px;border:2px solid var(--border);border-radius:10px;background:var(--surface2);color:var(--ink);cursor:pointer;text-align:left;font-weight:700;font-size:13px;}
.oa-cam.on{border-color:var(--danger);background:rgba(200,50,50,.1);}
.oa-cam kbd{margin-left:auto;font-size:11px;font-weight:800;padding:2px 7px;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--muted);flex:none;}

.oa-camrow{display:flex;gap:4px;align-items:stretch;}
.oa-camrow .oa-cam{flex:1;min-width:0;}
.oa-camrow .oa-mv{height:auto;width:30px;}
.oa-camrow .oa-mv:disabled{opacity:.35;cursor:default;}
.oa-camrow .oa-del{width:32px;}

/* 단축키 안내 */
.oa-ksec{margin:14px 0 6px;font-size:12px;font-weight:800;color:var(--accent-strong);letter-spacing:.04em;}
.oa-krow{display:flex;gap:12px;align-items:center;padding:7px 0;border-bottom:1px solid var(--border);}
.oa-kk{flex:none;min-width:170px;display:flex;gap:4px;flex-wrap:wrap;}
.oa-kd{font-size:13px;}
.oa-kbd{display:inline-block;min-width:24px;text-align:center;font-family:inherit;font-size:12px;font-weight:800;padding:3px 8px;border-radius:7px;border:1px solid var(--border);border-bottom-width:2px;background:var(--surface2);color:var(--ink);}

#modal-root .modal-backdrop{z-index:300;}
.oa-seek{width:100%;height:22px;accent-color:var(--accent);}

/* ===== 방송: 전용 화면(고정 배치) · 조작 영역 · 새 기능 ===== */
#oaStage{position:fixed;inset:0;z-index:55;background:var(--bg);}
body.oa-docked #onairPanel{border-radius:0;border:0;border-right:1px solid var(--border);box-shadow:none;}
body.oa-docked #onairPrev{border-radius:0;border:0;border-left:1px solid var(--border);box-shadow:none;max-height:100vh;}
body.oa-docked #onairPanel .oa-head,body.oa-docked #onairPrev .oa-phead{cursor:default;}
body.oa-docked .oa-rs{display:none;}
body.oa-docked #onairPanel .oa-head{flex-wrap:wrap;row-gap:4px;}
body.oa-docked #onairPanel .oa-head .oa-onair,body.oa-docked #onairPanel .oa-head .oa-open,body.oa-docked .oa-x[onclick*="toggleMin"],body.oa-docked .oa-x[data-act="prev"]{display:none;}
body.oa-docked .oa-cols{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}
@media (max-width:767px){#oaStage{display:none;}}
#onairPrev .oa-pwrap{flex:none;}
.oa-pbar{flex:1;min-height:0;overflow-y:auto;padding:8px 10px 12px;display:flex;flex-direction:column;gap:8px;}
body.oa-docked .oa-pbar{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);grid-template-areas:"btns btns" "mon info" "vid vid";gap:8px 10px;align-content:start;}
body.oa-docked #oaCtlBtns{grid-area:btns;} body.oa-docked #oaMon{grid-area:mon;} body.oa-docked #oaCtlInfo{grid-area:info;} body.oa-docked #oaVidBox{grid-area:vid;}
#oaCtlBtns{display:flex;flex-direction:column;gap:6px;}
.oa-mon{display:none;}
body.oa-docked .oa-mon{display:block;}
.oa-monhead{display:flex;align-items:center;gap:8px;font-size:12px;margin-bottom:3px;}
#oaMonState{margin-left:auto;font-weight:800;font-size:11px;padding:1px 8px;border-radius:999px;}
#oaMonState.on{background:#d62d2d;color:#fff;} #oaMonState.off{background:var(--surface2);color:var(--ink-dim);}
.oa-monbox{width:100%;aspect-ratio:16/9;position:relative;border:1.5px solid var(--border);border-radius:8px;overflow:hidden;background:repeating-conic-gradient(#8a8a8a 0 25%,#6f6f6f 0 50%) 0 0/12px 12px;}
.oa-monbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;}
.oa-ctlnote{font-size:12px;line-height:1.5;color:var(--ink);} .oa-ctlnote.dim{color:var(--ink-dim);margin-top:2px;}
.oa-pvbadge{font-size:11px;font-weight:800;padding:2px 9px;border-radius:999px;margin:0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.oa-pvbadge.live{background:#d62d2d;color:#fff;} .oa-pvbadge.prep{background:#245ca8;color:#fff;} .oa-pvbadge.sample{background:#e8a317;color:#222;}
.oa-apply{height:40px;border-radius:10px;border:2px dashed var(--border);background:var(--surface2);color:var(--ink-dim);font-weight:800;font-size:14px;cursor:pointer;}
.oa-apply.ready{border:2px solid #245ca8;background:#245ca8;color:#fff;} .oa-apply:disabled{cursor:default;opacity:.7;}
.oa-apply i,.oa-open i,.oa-slotgo i{font-style:normal;font-size:10px;opacity:.7;font-weight:600;}
.oa-vctl{display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);}
.oa-vlbl{font-size:12px;font-weight:800;margin-right:auto;} .oa-vlbl.live{color:#d62d2d;} .oa-vlbl.prep{color:#245ca8;}
.oa-vseek{flex:1;min-width:0;} .oa-vtime{font-size:12px;font-variant-numeric:tabular-nums;min-width:84px;text-align:right;}
.oa-tsrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;}
.oa-ts{border:2px solid var(--border);border-radius:9px;background:var(--surface);padding:5px;cursor:pointer;display:flex;flex-direction:column;gap:3px;align-items:stretch;color:var(--ink);}
.oa-ts.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);} .oa-ts em{font-style:normal;font-size:10px;font-weight:700;text-align:center;}
.oa-tsth{display:flex;align-items:stretch;height:26px;border-radius:3px;overflow:hidden;font-size:10px;background:linear-gradient(135deg,#8a97a3,#5d6a76);}
.oa-tsth i{font-style:normal;background:#fff;color:#0a3d82;padding:0 5px;display:flex;align-items:center;font-weight:800;} .oa-tsth b{flex:1;background:#0a3d82;color:#fff;padding:0 6px;display:flex;align-items:center;}
.oa-tsth.ts-simple i{display:none;} .oa-tsth.ts-simple b{background:transparent;border-bottom:3px solid #ffe94d;flex:0 1 auto;margin:0 auto 3px 4px;padding:0 3px;text-shadow:0 1px 2px #000;}
.oa-tsth.ts-glass{background:linear-gradient(135deg,#8a97a3,#5d6a76);} .oa-tsth.ts-glass i{background:rgba(255,255,255,.3);color:#fff;} .oa-tsth.ts-glass b{background:rgba(10,14,20,.55);}
.oa-tsth.ts-two{flex-direction:column;height:30px;background:#0a3d82;border-left:4px solid #ffe94d;} .oa-tsth.ts-two b{order:1;background:transparent;padding:1px 6px 0;flex:none;font-size:11px;} .oa-tsth.ts-two i{order:2;background:transparent;color:#fff;opacity:.85;padding:0 6px;font-size:8px;}
.oa-pstyle{height:40px;max-width:96px;border-radius:9px;border:1.5px solid var(--border);background:var(--surface);color:var(--ink);font-size:11px;}
.oa-tlist{display:flex;flex-direction:column;gap:3px;max-height:56vh;overflow-y:auto;}
.oa-trow{display:flex;gap:8px;align-items:flex-start;padding:5px 8px;border:2px solid transparent;border-radius:8px;background:var(--surface2);cursor:pointer;font-size:13px;content-visibility:auto;contain-intrinsic-size:auto 34px;}
.oa-trow b{flex:none;min-width:30px;color:var(--ink-dim);font-size:11px;padding-top:2px;} .oa-trow span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.oa-trow.sel{border-color:#245ca8;background:rgba(36,92,168,.1);} .oa-trow.live{border-color:#d62d2d;background:rgba(214,45,45,.1);} .oa-trow.live.sel{border-color:#d62d2d;box-shadow:0 0 0 2px rgba(36,92,168,.5);}
.oa-tnow{display:flex;flex-direction:column;gap:3px;padding:7px 9px;border:1px solid var(--border);border-radius:9px;background:var(--surface2);}
.oa-tl{font-size:10px;font-weight:800;align-self:flex-start;padding:1px 8px;border-radius:999px;color:#fff;} .oa-tl.live{background:#d62d2d;} .oa-tl.prep{background:#245ca8;}
.oa-tt{font-size:14px;line-height:1.45;white-space:pre-wrap;max-height:84px;overflow:auto;}
.oa-kbd.cap{border-color:var(--accent);color:var(--accent-strong);}
.oa-krow .oa-kd{flex:1;min-width:0;} .oa-krow .oa-seg{min-height:30px;padding:0 9px;font-size:12px;}
#onairPanel button:focus-visible,#onairPrev button:focus-visible,#onairPanel select:focus-visible,#onairPanel input:focus-visible,#onairPanel summary:focus-visible,#modal-root button:focus-visible{outline:3px solid #ffb300;outline-offset:2px;}
#modal-root .modal-backdrop{z-index:300;}
body.oa-docked .oa-nwrap{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.oa-tsrow{grid-template-columns:repeat(2,minmax(0,1fr));}
#onairEdit{position:fixed;z-index:62;background:var(--surface);border:2px solid var(--accent);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.4);display:flex;flex-direction:column;overflow:hidden;min-height:0;}
#onairEdit .oa-head{cursor:grab;user-select:none;touch-action:none;} #onairEdit .oa-body{flex:1;min-height:0;overflow:auto;}
#onairEdit .oa-grps{grid-template-columns:1fr;}
@media (max-width:767px){#onairEdit{display:none;}}

#onairEdit .oa-gbody{gap:16px;padding:6px 14px 16px;}
#onairEdit .oa-card{gap:14px;padding:12px 14px;}
#onairEdit .oa-card h4{font-size:14px;}
#onairEdit .oa-lbl{font-size:13px;font-weight:700;color:var(--ink);}
#onairEdit .oa-rrow{grid-template-columns:118px 1fr auto;gap:10px;}
#onairEdit .oa-fld{display:flex;flex-direction:column;gap:5px;}
#onairEdit .oa-help{font-size:11.5px;line-height:1.45;color:var(--muted);padding-left:2px;}
#onairEdit .oa-sep{display:flex;align-items:center;gap:10px;margin:8px 0 -2px;font-size:11.5px;font-weight:800;color:var(--accent-strong);letter-spacing:.04em;}
#onairEdit .oa-sep::after{content:'';flex:1;height:1px;background:var(--border);}
#onairEdit .oa-sep span{white-space:nowrap;}
#onairEdit .oa-grp>summary{font-size:14px;padding:11px 14px;}
#onairEdit .oa-note{font-size:12px;line-height:1.55;}
#onairEdit .oa-nudge{margin-top:0;padding-top:10px;gap:8px;}
#onairEdit .oa-row.wrap{gap:8px;}
#onairEdit button:focus-visible,#onairEdit select:focus-visible,#onairEdit input:focus-visible,#onairEdit summary:focus-visible{outline:3px solid #ffb300;outline-offset:2px;}

/* 저장한 이름 줄: 이름은 윗줄 전체 폭을 쓰고, 스타일 선택·송출·삭제는 아랫줄로 (이름이 잘리지 않게) */
.oa-preset{flex-wrap:wrap;gap:4px 4px;padding:4px;border:1px solid var(--border);border-radius:12px;}
.oa-preset .oa-pname{flex:1 1 100%;min-height:36px;white-space:normal;overflow:visible;text-overflow:clip;word-break:keep-all;overflow-wrap:anywhere;}
.oa-preset .oa-pstyle{flex:1 1 0;max-width:none;height:34px;min-width:0;}
.oa-preset .oa-go{height:34px;}
.oa-preset .oa-del{height:34px;}
.oa-presets{max-height:240px;}

/* 미리보기 아래 작은 화면 · 카메라 */
.oa-pipbox{border:1px solid var(--border);border-radius:10px;background:var(--surface);}
.oa-pipbox>summary{cursor:pointer;font-weight:800;font-size:13px;color:var(--accent-strong);padding:8px 12px;list-style:none;}
.oa-pipbox>summary::before{content:'▸ ';} .oa-pipbox[open]>summary::before{content:'▾ ';}
.oa-pipbox>div{padding:0 8px 10px;display:flex;flex-direction:column;gap:8px;}
.oa-pipbox .oa-card{border:0;padding:4px;}
body.oa-docked #oaPipBox{grid-area:pip;}
body.oa-docked .oa-pbar{grid-template-areas:"btns btns" "mon info" "vid vid" "pip pip";}

/* 앱 설치 안내 */
.inst-card{display:flex;align-items:center;gap:12px;margin-top:22px;padding:14px 16px;border:1.5px solid var(--border);border-radius:14px;background:var(--surface);}
.inst-txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;} .inst-txt b{font-size:15px;} .inst-txt span{font-size:12.5px;color:var(--ink-dim);line-height:1.45;} .inst-txt em{font-style:normal;font-size:11.5px;color:var(--accent-strong);}
.inst-btn{height:40px;padding:0 20px;border-radius:999px;border:0;background:var(--accent);color:var(--surface);font-weight:800;font-size:14px;cursor:pointer;flex:none;}
#installBar{position:fixed;left:50%;transform:translateX(-50%);bottom:max(14px,env(safe-area-inset-bottom));z-index:80;display:flex;align-items:center;gap:10px;max-width:min(94vw,520px);padding:10px 12px 10px 16px;border-radius:999px;background:var(--surface);border:1.5px solid var(--accent);box-shadow:0 8px 28px rgba(0,0,0,.28);font-size:13px;}
#installBar span{flex:1;min-width:0;line-height:1.35;} #installBar .inst-btn{height:34px;padding:0 16px;}
.inst-x{width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:var(--ink-dim);font-size:15px;cursor:pointer;flex:none;}
.inst-dev{margin:0 0 10px;font-size:13px;color:var(--ink-dim);} .inst-steps{margin:8px 0 14px;padding-left:20px;line-height:1.8;font-size:14px;} .inst-off{margin-top:6px;padding-top:12px;border-top:1px solid var(--border);} .inst-off h4{margin:0 0 4px;font-size:14px;color:var(--accent-strong);}
@media (max-width:767px){body.oa-docked #installBar{display:none;}}

/* 설치 안내 막대: 한 줄로 작고 단정하게 */
#installBar{gap:10px;padding:8px 8px 8px 12px;border-radius:16px;max-width:none;width:auto;white-space:nowrap;font-size:14px;font-weight:700;border-width:1px;box-shadow:0 6px 22px rgba(0,0,0,.3);}
#installBar img{border-radius:8px;flex:none;}
#installBar span{flex:none;line-height:1;}
#installBar .inst-btn{height:32px;padding:0 16px;font-size:13px;}
#installBar .inst-x{width:28px;height:28px;}

/* 발표자 보기 */
#presPV{position:fixed;inset:0;z-index:50;background:var(--bg);display:flex;flex-direction:column;gap:10px;padding:10px 14px 14px;overflow:auto;--ar:1.7778;}
.pv-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.pv-box{display:flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);}
.pv-box b{font-size:22px;font-variant-numeric:tabular-nums;} .pv-tl{font-size:11px;font-weight:700;color:var(--ink-dim);}
#pvRem{font-size:12px;font-weight:800;color:var(--accent-strong);} #pvRem.over{color:var(--danger);}
.pv-gap{flex:1;} .pv-ic{min-width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);color:var(--ink);cursor:pointer;font-weight:700;}
.pv-sel{height:32px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--ink);}
.pv-btn{height:38px;padding:0 14px;border-radius:10px;border:1.5px solid var(--border);background:var(--surface);color:var(--ink);font-weight:700;font-size:13px;cursor:pointer;}
.pv-btn.end{border-color:var(--danger);color:var(--danger);}
.pv-btn svg{width:20px;height:20px;vertical-align:-4px;margin-right:4px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.pv-main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);gap:14px;align-items:start;}
@media (max-width:1000px){.pv-main{grid-template-columns:1fr;}}
.pv-cur,.pv-side{display:flex;flex-direction:column;gap:8px;min-width:0;}
.pv-h{display:flex;align-items:center;justify-content:space-between;gap:8px;} .pv-h h4{margin:0;font-size:13px;color:var(--accent-strong);} .pv-h h4 small{font-weight:600;color:var(--ink-dim);margin-left:6px;} .pv-h span{font-size:12px;font-weight:700;color:var(--ink-dim);}
.pv-frame{position:relative;width:min(100%,calc((100vh - 330px) * var(--ar)));aspect-ratio:16/9;background:#000;border:2px solid var(--accent);border-radius:10px;overflow:hidden;}
.pv-frame.sm{width:100%;border-color:var(--border);}
.pv-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;}
.pv-off{display:none;position:absolute;inset:0;background:#000;color:#fff;font-weight:800;align-items:center;justify-content:center;font-size:22px;}
.pv-nav{display:flex;align-items:center;gap:10px;width:min(100%,calc((100vh - 330px) * var(--ar)));}
.pv-big{height:54px;padding:0 22px;border-radius:12px;border:2px solid var(--border);background:var(--surface);color:var(--ink);font-weight:800;font-size:16px;cursor:pointer;} .pv-big.go{background:var(--accent);border-color:var(--accent);color:var(--surface);}
.pv-lbl{flex:1;text-align:center;font-weight:800;font-size:17px;min-width:0;}
.pv-tools{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:4px;}
.pv-grp{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;border:1px solid var(--border);border-radius:10px;background:var(--surface);} .pv-grp b{min-width:34px;text-align:center;font-size:13px;}
.pv-seg{height:32px;padding:0 10px;border-radius:8px;border:1.5px solid var(--border);background:var(--surface);color:var(--ink);font-weight:700;font-size:12.5px;cursor:pointer;} .pv-seg.on{background:var(--ink);color:var(--surface);border-color:var(--ink);} .pv-seg:disabled{opacity:.4;} .pv-seg i{font-style:normal;font-size:10px;opacity:.6;}
#pvNote{width:100%;min-height:120px;height:22vh;resize:vertical;border:1.5px solid var(--border);border-radius:10px;background:var(--surface);color:var(--ink);padding:10px;font-family:inherit;line-height:1.5;}
.pv-verses{display:flex;flex-wrap:wrap;gap:4px;max-height:20vh;overflow:auto;} .pv-verses button{min-width:36px;height:32px;border-radius:8px;border:1.5px solid var(--border);background:var(--surface);color:var(--ink);cursor:pointer;font-weight:700;} .pv-verses button.cur{background:var(--accent);border-color:var(--accent);color:var(--surface);}
#presPV button:focus-visible,#presPV select:focus-visible,#presPV textarea:focus-visible{outline:3px solid #ffb300;outline-offset:2px;}
@media (max-width:767px){#presPV{display:none;}}
body:has(#presPV) #installBar,body.oa-docked #installBar{display:none;}

/* 두 번째 모니터에 전체 화면으로 띄우는 발표 화면(iframe)의 자리: 평소엔 보이지 않고, 전체 화면이 되면 그 모니터를 가득 채운다 */
#presFsHost{position:fixed;right:0;bottom:0;width:2px;height:2px;overflow:hidden;opacity:0;pointer-events:none;}
#presFsHost iframe{width:100%;height:100%;border:0;display:block;}
#presFsHost:fullscreen{opacity:1;pointer-events:auto;overflow:visible;background:#000;}
.pv-btn.go{background:var(--accent);border-color:var(--accent);color:var(--surface);}

.pv-frame.inking iframe{pointer-events:auto;}
.pv-ink{flex-wrap:wrap;} .pv-sw{width:24px;height:24px;border-radius:50%;border:2px solid var(--border);cursor:pointer;padding:0;} .pv-sw.on{box-shadow:0 0 0 3px var(--accent);}

/* ===== 발표자 보기: 아이콘 버튼 ===== */
.pv-i{position:relative;width:44px;height:44px;border-radius:12px;border:1.5px solid var(--border);background:var(--surface);color:var(--ink);display:inline-grid;place-items:center;cursor:pointer;padding:0;font-weight:800;font-size:17px;flex:none;}
.pv-i svg{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.pv-i.on{background:var(--ink);border-color:var(--ink);color:var(--surface);} .pv-i:disabled{opacity:.35;cursor:default;} .pv-i.num{width:40px;font-size:17px;} .pv-i.sm{width:36px;height:36px;}
.pv-i em{position:absolute;right:3px;bottom:1px;font-style:normal;font-size:10px;font-weight:700;opacity:.55;line-height:1;}
.pv-i small{position:absolute;left:0;right:0;bottom:2px;text-align:center;font-size:10px;font-weight:800;line-height:1;opacity:.75;}
.pv-i select{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;}
.pv-gi{display:inline-grid;place-items:center;width:30px;height:30px;color:var(--ink-dim);} .pv-gi svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.pv-pct{min-width:48px;text-align:center;font-size:16px;font-variant-numeric:tabular-nums;}
.pv-dot{display:block;border-radius:50%;background:currentColor;} .pv-sep{width:1px;height:28px;background:var(--border);margin:0 4px;}
.pv-grp{gap:6px;padding:5px 8px;border-radius:14px;} .pv-tools{gap:10px;margin-top:8px;}
.pv-sw{width:30px;height:30px;}
.pv-btn{height:42px;font-size:15px;padding:0 16px;} .pv-big{height:58px;font-size:18px;} .pv-lbl{font-size:21px;} .pv-box b{font-size:26px;} .pv-tl{font-size:13px;} .pv-h h4{font-size:15px;} .pv-h h4 small{font-size:12.5px;} .pv-h span{font-size:13.5px;}
#pvNote{font-size:16px;} .pv-verses button{min-width:42px;height:38px;font-size:16px;} #pvRem{font-size:14px;} .pv-sel{height:36px;font-size:14px;} .pv-ic{min-width:36px;height:36px;font-size:15px;}

/* ===== 컨트롤 글자 키우기(방송 · 발표) ===== */
.oa-seg{font-size:14.5px;} .oa-tab{font-size:15px;} .oa-cap{font-size:13.5px;} .oa-chip{font-size:14.5px;} .oa-sel{font-size:14.5px;} .oa-input{font-size:15px;}
.oa-pass,.oa-slotgo{font-size:15.5px;} .oa-onair,.oa-open,.oa-go{font-size:14px;} .oa-pname{font-size:15px;} .oa-trow{font-size:14.5px;} .oa-tt{font-size:15px;} .oa-ctlnote{font-size:13.5px;} .oa-apply{font-size:15px;} .oa-mcell span{font-size:13px;}
#onairPanel .oa-lbl,#onairEdit .oa-lbl{font-size:14.5px;} #onairPanel .oa-help,#onairEdit .oa-help{font-size:13px;} #onairPanel .oa-note,#onairEdit .oa-note{font-size:13.5px;}
#onairPanel .oa-card h4,#onairEdit .oa-card h4,.oa-card h4{font-size:15.5px;} #onairPanel .oa-grp>summary,#onairEdit .oa-grp>summary{font-size:15px;} .oa-head,.oa-phead{font-size:15px;}
.pres-seg,.pres-btn,.pres-nav,.pres-passage{font-size:14.5px;}

/* ===== 성경 읽기: 글자 위아래 여백 약 40% 줄임 ===== */
.verse-line{margin:0 0 .57em;line-height:1.54;}
.reading>.verse-line:first-child{margin-top:.7em;}
.compare-col .verse-line{line-height:1.48;}

/* =====================================================
   디자인 다듬기: 테두리를 줄이고, 면(톤)과 부드러운 그림자로 구분한다
   ===================================================== */
:root{--border:#e8e4d8;--on-accent:#ffffff;--shadow:0 1px 2px rgba(20,40,32,.04),0 8px 24px rgba(20,40,32,.06);}
html.dark{--border:rgba(255,255,255,.09);--on-accent:#0e1513;--shadow:0 1px 0 rgba(255,255,255,.04) inset,0 10px 28px rgba(0,0,0,.4);}
.header{border-bottom:0;box-shadow:0 1px 0 var(--border);}
.bottom-controls{border-top:0;box-shadow:0 -1px 0 var(--border);}
.bc-btn,.toolbar-btn,.grid-btn,.lang-select{border-color:transparent;background:var(--surface2);}
.bc-btn:hover,.toolbar-btn:hover{border-color:transparent;background:var(--surface3);} .grid-btn:hover{border-color:transparent;background:var(--accent-soft);}
.bc-pos,.hdr-chip{border-color:transparent;}
.card,.home-card,.login-card,.compare-verse-block{border-color:transparent;}
.card:hover,.home-card:hover{border-color:transparent;box-shadow:0 2px 4px rgba(0,0,0,.05),0 12px 30px rgba(0,0,0,.1);}
.modal-sheet{border:0;} .modal-head{border-bottom:0;box-shadow:0 1px 0 var(--border);} .modal-foot{border-top:0;box-shadow:0 -1px 0 var(--border);}
.chapter-title{border-bottom-color:var(--border);}

/* 홈: 이어 읽기 큰 카드 + 묶음 목록 */
.home-resume{display:flex;align-items:center;gap:14px;padding:22px 24px;border-radius:22px;color:var(--on-accent);background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 62%,#000));box-shadow:0 10px 28px color-mix(in srgb,var(--accent) 35%,transparent);}
.hr-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;} .hr-label{font-size:12.5px;font-weight:700;opacity:.8;letter-spacing:.04em;} .hr-title{font-size:26px;font-weight:800;letter-spacing:-.04em;line-height:1.2;} .hr-sub{font-size:14px;opacity:.85;}
.hr-go{font-size:34px;opacity:.85;line-height:1;}
.home-resume:hover{transform:translateY(-1px);}
.home-group-label{font-size:12.5px;font-weight:700;color:var(--ink-dim);letter-spacing:.05em;margin:20px 6px 8px;}
.home-group{background:var(--surface);border-radius:22px;box-shadow:var(--shadow);overflow:hidden;}
.home-row{display:flex;align-items:center;gap:16px;width:100%;padding:16px 18px;border:0;border-radius:0;background:none;text-align:left;color:var(--ink);cursor:pointer;}
.home-row+.home-row{box-shadow:0 -1px 0 var(--border);}
.home-row:hover{background:var(--surface2);}
.home-wrap{gap:0;} .home-hero{padding-bottom:18px;}

/* 방송 · 발표 컨트롤: 테두리 대신 톤으로 */
#onairPanel,#onairPrev,#onairEdit{border-color:transparent;}
.oa-card{border-color:transparent;box-shadow:var(--shadow);}
.oa-seg,.oa-sel,.oa-input,.oa-nav,.oa-slotgo,.oa-pass,.oa-chip,.oa-pname,.oa-nq,.oa-trow,.oa-cam,.oa-mcell,.oa-tnow{border-color:transparent;background:var(--surface2);}
.oa-pass{background:var(--accent-soft);} .oa-chip.on,.oa-tab.on{background:var(--ink);} .oa-chip.on{background:var(--accent);}
.oa-tab{border-color:transparent;} .oa-grp{border-color:transparent;background:var(--surface2);} .oa-lookbar{gap:10px;}
.oa-preset{border-color:transparent;background:var(--surface);box-shadow:var(--shadow);} .oa-pvopts{border-bottom:0;} .oa-phead,.oa-head{border-bottom:0;}
.pv-i,.pv-seg,.pv-btn,.pv-sel,.pv-ic{border-color:transparent;background:var(--surface2);}
.pv-i.on,.pv-seg.on{background:var(--ink);} .pv-btn.go,.pv-big.go{background:var(--accent);}
.pv-grp,.pv-box{border-color:transparent;background:var(--surface);box-shadow:var(--shadow);}
.pv-big{border-color:transparent;background:var(--surface2);} .pv-big.go{background:var(--accent);color:var(--on-accent);}
.pv-frame{border-width:0;box-shadow:0 0 0 2px var(--accent),0 12px 32px rgba(0,0,0,.25);} .pv-frame.sm{box-shadow:0 8px 24px rgba(0,0,0,.2);}
#pvNote{border-color:transparent;background:var(--surface);box-shadow:var(--shadow);} .pv-verses button{border-color:transparent;background:var(--surface2);}
.pv-live{font-size:13px;font-weight:800;padding:6px 14px;border-radius:999px;background:var(--surface2);color:var(--ink-dim);} .pv-live.on{background:#d62d2d;color:#fff;} .pv-live.blk{background:#222;color:#fff;}

/* 방송: 간단/고급 · 시작 안내 · 모드 아이콘 */
.oa-adv{height:34px;padding:0 14px;border-radius:999px;border:0;background:var(--surface);color:var(--ink);font-weight:700;font-size:13.5px;cursor:pointer;box-shadow:var(--shadow);} .oa-adv.on{background:var(--ink);color:var(--surface);}
.oa-mi{width:18px;height:18px;vertical-align:-4px;margin-right:5px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.oa-guide{display:flex;align-items:stretch;gap:6px;margin:0 0 12px;}
.oa-gstep{flex:1;min-width:0;display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;padding:12px 14px;border-radius:16px;border:0;background:var(--surface);box-shadow:var(--shadow);color:var(--ink);cursor:pointer;}
.oa-gstep b{grid-row:1 / span 2;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--surface2);font-size:14px;color:var(--ink-dim);}
.oa-gstep span{font-weight:800;font-size:15px;} .oa-gstep small{font-size:12.5px;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.oa-gstep.done b{background:#1a8f4d;color:#fff;} .oa-gstep.next{box-shadow:0 0 0 2px var(--accent),var(--shadow);} .oa-gstep.next b{background:var(--accent);color:var(--on-accent);}
.oa-garrow{align-self:center;font-style:normal;color:var(--ink-dim);font-size:22px;}
@media (max-width:1000px){.oa-gstep small{display:none;}}

.home-pwrap{flex-direction:column;align-items:stretch;} .home-pwrap .home-group{width:100%;}
/* 이어 읽기 카드: 위아래 높이 줄임 */
.home-resume{padding:13px 22px;border-radius:18px;gap:12px;} .hr-copy{gap:1px;} .hr-label{font-size:12px;} .hr-title{font-size:21px;line-height:1.2;} .hr-sub{font-size:13px;} .hr-go{font-size:28px;}

.diag-t{width:100%;border-collapse:collapse;font-size:14px;} .diag-t td{padding:7px 4px;border-bottom:1px solid var(--border);vertical-align:top;} .diag-t td:last-child{text-align:right;white-space:nowrap;padding-left:12px;} .diag-h{margin:14px 0 4px;font-size:13px;font-weight:800;color:var(--accent-strong);}

/* 발표자 보기: 화면 비율은 모니터 모양 안에 글자 · 이미지 화면 · 검색 */
.pv-rbox{display:inline-grid;place-items:center;min-width:34px;height:22px;padding:0 5px;border:2.5px solid currentColor;border-radius:5px;font-size:11.5px;font-weight:800;line-height:1;letter-spacing:-.02em;}
.pr-list{display:flex;flex-direction:column;gap:2px;margin-top:6px;max-height:50vh;overflow-y:auto;}
.pr-res{display:flex;flex-direction:column;gap:2px;text-align:left;padding:9px 10px;border:0;border-radius:10px;background:none;color:var(--ink);cursor:pointer;} .pr-res:hover{background:var(--surface2);}
.pr-res b{font-size:12.5px;color:var(--accent-strong);} .pr-res span{font-size:14px;line-height:1.5;}

.pv-click{cursor:pointer;} .pv-click::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;} .pv-click:hover::after{box-shadow:inset 0 0 0 3px var(--accent);}

.oa-btnrow{display:grid;grid-template-columns:1fr 1fr;gap:8px;} .oa-btnrow .oa-seg{width:100%;white-space:normal;line-height:1.25;padding:8px 10px;text-align:center;}

/* 발표 모드 성경 검색: 돋보기 아이콘 버튼 */
.pr-sbtn{flex:none;width:46px;height:46px;border:0;border-radius:12px;background:var(--surface2);color:var(--ink);display:inline-grid;place-items:center;cursor:pointer;padding:0;}
.pr-sbtn:hover{filter:brightness(.96);} .pr-sbtn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

.oa-edtext img{max-width:100%;height:auto;vertical-align:middle;} .oa-nci svg{pointer-events:none;} .oa-nci{cursor:pointer;} .oa-ntb button svg{display:block;margin:auto;pointer-events:none;}
.oa-nq.dropbefore{box-shadow:0 -3px 0 0 var(--accent);} .oa-nq.dropafter{box-shadow:0 3px 0 0 var(--accent);} .oa-nq.dragging{opacity:.6;}

.pv-ink-off{width:auto !important;padding:0 10px !important;font-size:12px;font-weight:800;background:rgba(217,45,32,.16) !important;color:#d92d20 !important;white-space:nowrap;}

/* 절로 이동할 때 잠깐 강조 */
.verse-flash{animation:vflash 2.6s ease;} @keyframes vflash{0%,55%{background:rgba(255,214,0,.35);box-shadow:0 0 0 6px rgba(255,214,0,.35);border-radius:6px;}100%{background:transparent;box-shadow:none;}}
/* 북마크 */
.bm-add{padding:4px 0 14px;border-bottom:1px solid var(--border);margin-bottom:10px;} .bm-now{font-size:14px;margin-bottom:8px;}
.bm-row2{display:flex;gap:8px;} .bm-row2 .input{flex:1;min-width:0;} .bm-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
.bm-chip{height:32px;padding:0 12px;border:1px solid var(--border);border-radius:999px;background:var(--surface2);color:var(--ink);font-weight:700;cursor:pointer;} .bm-note{font-size:12px;margin:8px 0 0;}
.bm-list{display:flex;flex-direction:column;gap:6px;} .bm-item{display:flex;align-items:center;gap:6px;}
.bm-go{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface2);color:var(--ink);text-align:left;cursor:pointer;} .bm-go b{font-size:15px;} .bm-go span{font-size:14px;} .bm-go small{opacity:.6;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}

/* 즐겨찾기 · 오프라인 저장 잠금: 평소엔 흐리게, 길게 누르면(1.2초) 전체가 선명해진다 */
body:not(.lib-open) .lib-star,body:not(.lib-open) .off-btn{opacity:.38;}
.lib-star,.off-btn{transition:opacity .15s,box-shadow .15s;-webkit-touch-callout:none;user-select:none;touch-action:manipulation;}
body.lib-open .lib-star,body.lib-open .off-btn{opacity:1;box-shadow:0 0 0 2px var(--accent);border-radius:10px;}
.lib-holding{background-image:linear-gradient(90deg,var(--accent-soft),var(--accent-soft));background-repeat:no-repeat;background-size:0 100%;animation:libhold 1.2s linear forwards;}
@keyframes libhold{to{background-size:100% 100%;}}
.off-btn{display:inline-flex;align-items:center;gap:6px;} .off-ic{flex:none;}
@media (max-width:600px){.off-btn .off-tx{display:none;}.off-btn{width:40px;padding:0;justify-content:center;}}

.softnote{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translate(-50%,6px);background:rgba(20,28,25,.62);color:#fff;font-weight:600;font-size:12.5px;padding:7px 14px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:1000;max-width:84vw;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.softnote.on{opacity:1;transform:translate(-50%,0);}

/* 아이폰: 버튼을 길게 눌러도 글자 선택 · 돋보기 · 복사 메뉴가 뜨지 않게 한다(접두사 필수) */
.lib-star,.lib-star *,.off-btn,.off-btn *,.tr-card,.tr-card *,.lib-row,.lib-row *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;}
.lib-star,.off-btn{touch-action:manipulation;}

/* 색 4·5 */
.verse-line.hl4 .verse-text{background:var(--hl4);} .verse-line.hl5 .verse-text{background:var(--hl5);}
.compare-verse-block.hl4{background:var(--hl4);border-color:var(--hl4b);} .compare-verse-block.hl5{background:var(--hl5);border-color:var(--hl5b);}
.hl-swatch.s4{background:var(--hl4);border-color:var(--hl4b);} .hl-swatch.s5{background:var(--hl5);border-color:var(--hl5b);}
.hl-chip.s4{border-color:var(--hl4b);} .hl-chip.s5{border-color:var(--hl5b);}
.hl-row.hl4{border-left-color:var(--hl4b);background:var(--hl4);} .hl-row.hl5{border-left-color:var(--hl5b);background:var(--hl5);}
/* 속도 진단 아이콘(테두리 없음) */
.diag-ic{text-decoration:none;display:inline-grid;place-items:center;padding:8px;color:var(--ink-dim);} .diag-ic:hover{color:var(--ink);}
/* 선택 바: 하이라이트(겹친 색 → 눌러 펼치기) + 지우개 · 메모 · 복사 · 공유 · 닫기 */
.hl-bar{gap:6px 8px;padding-top:6px;padding-bottom:6px;}
.hl-pal{display:flex;align-items:center;order:1;}
.hl-mark{width:42px;height:42px;border:0;background:none;color:var(--accent-strong);display:grid;place-items:center;cursor:pointer;}
.hl-mark svg,.hl-act svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.hl-sws{display:flex;align-items:center;}
.hl-sw{flex:none;width:30px;height:30px;border-radius:50%;border:2px solid var(--surface);margin-left:-14px;padding:0;position:relative;z-index:calc(10 - var(--i));cursor:pointer;transition:margin .3s cubic-bezier(.2,.8,.2,1),width .3s cubic-bezier(.2,.8,.2,1),height .3s,opacity .2s,transform .3s;}
.hl-sw:first-child{margin-left:0;}
.hl-sw.s1{background:var(--hl1);box-shadow:0 0 0 1.5px var(--hl1b);} .hl-sw.s2{background:var(--hl2);box-shadow:0 0 0 1.5px var(--hl2b);} .hl-sw.s3{background:var(--hl3);box-shadow:0 0 0 1.5px var(--hl3b);} .hl-sw.s4{background:var(--hl4);box-shadow:0 0 0 1.5px var(--hl4b);} .hl-sw.s5{background:var(--hl5);box-shadow:0 0 0 1.5px var(--hl5b);}
.hl-sw:nth-child(n+4){width:0;margin-left:0;opacity:0;border-width:0;pointer-events:none;box-shadow:none;}
.hl-bar.exp .hl-sw{width:38px;height:38px;margin-left:10px;opacity:1;border-width:2px;pointer-events:auto;}
.hl-bar.exp .hl-sw:first-child{margin-left:4px;}
.hl-bar.exp .hl-sw.cur{transform:scale(1.12);}
.hl-bar.exp .hl-pal{flex:1 0 100%;}
.hl-acts{display:flex;align-items:center;gap:6px;order:2;margin-left:auto;}
.hl-bar.exp .hl-acts{flex:1 0 100%;justify-content:space-between;margin-left:0;}
.hl-act{width:42px;height:42px;border:0;background:none;color:var(--ink);display:grid;place-items:center;border-radius:10px;cursor:pointer;}
.hl-act.box{border:1.5px solid var(--border);background:var(--surface);}
.hl-act.x{font-size:20px;color:var(--ink-dim);}
/* 메모 시트 */
.memo-new{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;}
.memo-box{border:1px solid var(--border);border-radius:14px;background:var(--surface2);overflow:hidden;}
.memo-head{width:100%;display:flex;align-items:center;gap:8px;padding:11px 14px;border:0;background:none;color:var(--ink);font-weight:800;font-size:14px;cursor:pointer;text-align:left;}
.memo-head .chev{margin-left:auto;transition:transform .25s;opacity:.6;} .memo-box.open .memo-head .chev{transform:rotate(180deg);}
.memo-list{position:relative;max-height:150px;overflow-y:auto;padding:0 14px 6px;-webkit-overflow-scrolling:touch;transition:max-height .3s ease;overscroll-behavior:contain;}
.memo-box.open .memo-list{max-height:48vh;}
.memo-list.fade{-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);}
.memo-item{padding:10px 0;border-top:0.5px solid var(--border);} .memo-item:first-child{border-top:0;}
.memo-ref{font-size:12px;font-weight:800;color:var(--accent-strong);margin-bottom:3px;display:flex;align-items:center;gap:6px;}
.memo-ref .sp{margin-left:auto;display:flex;gap:2px;}
.memo-ref button{border:0;background:none;color:var(--ink-dim);font-size:12px;padding:4px 6px;cursor:pointer;border-radius:8px;}
.memo-text{white-space:pre-wrap;font-size:14.5px;line-height:1.6;}
.memo-edit{display:flex;flex-direction:column;gap:6px;margin-top:4px;} .memo-edit .row{display:flex;gap:8px;justify-content:flex-end;}

.hl-erase{margin-left:8px;flex:none;}
.hl-bar.exp .hl-sw{margin-left:8px;} .hl-bar.exp .hl-sw:first-child{margin-left:2px;}
.hl-bar.exp .hl-acts{justify-content:space-around;}

/* ===== 형광펜: 밝고 진한 색 + 검은 글자 (어두운 화면에서도 칙칙하지 않게) ===== */
:root{--hl1:#ffe94a;--hl2:#ff9fd2;--hl3:#6fd8ff;--hl4:#82ec92;--hl5:#ffbf6b;--hl1b:#d9b800;--hl2b:#e26aa6;--hl3b:#2fa8de;--hl4b:#45b45a;--hl5b:#e08a1f;}
html.dark{--hl1:#f5e400;--hl2:#ff7cc8;--hl3:#19c6ff;--hl4:#45e869;--hl5:#ffa63d;--hl1b:#f5e400;--hl2b:#ff7cc8;--hl3b:#19c6ff;--hl4b:#45e869;--hl5b:#ffa63d;}
.verse-line.hl1 .verse-text,.verse-line.hl2 .verse-text,.verse-line.hl3 .verse-text,.verse-line.hl4 .verse-text,.verse-line.hl5 .verse-text{color:#15171a;padding:.06em .32em;margin:0 -.32em;border-radius:.4em;}
.verse-line[class*="hl"] .memo-dot{color:#5a3b00;}
.compare-verse-block[class*="hl"] .verse-text,.compare-verse-block[class*="hl"] .compare-verse-head,.compare-verse-block[class*="hl"] .compare-col-name{color:#15171a;}
.hl-row.hl1,.hl-row.hl2,.hl-row.hl3,.hl-row.hl4,.hl-row.hl5{color:#15171a;} .hl-row[class*="hl"] .hl-ref{color:#15171a;} .hl-row[class*="hl"] .hl-memo-view{color:#2b2b2b;}
/* 선택 표시: 가는 점선 밑줄 */
.verse-line.sel .verse-text,.compare-verse-block.sel .verse-text{text-decoration:underline dotted;text-decoration-color:var(--ink-soft);text-decoration-thickness:1.5px;text-underline-offset:.3em;text-decoration-skip-ink:none;}
.compare-verse-block.sel{box-shadow:none;}
.hl-seltitle{text-align:center;font-size:12.5px;font-weight:700;color:var(--ink-soft);padding:6px 12px 2px;}
/* 떠 있는 어두운 시트: 7칸 균등 그리드(점 5 · 지우개/공유 · ✕). 두 상태 모두 같은 칸·같은 높이에 맞춘다 */
.hl-bar2{flex:none;margin:6px 10px 8px;padding:6px 8px 8px;border-radius:26px;background:rgba(36,36,38,.97);color:#f0f0f0;box-shadow:0 8px 28px rgba(0,0,0,.32);touch-action:pan-x;user-select:none;-webkit-user-select:none;}
.hl-grab{width:38px;height:4px;border-radius:2px;background:#5c5c60;margin:0 auto 6px;}
.hl-row2{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:center;justify-items:stretch;height:54px;background:#2c2c2f;border-radius:18px;padding:0 4px;position:relative;}
.hl-row2>*{grid-row:1;}
.hl-dot{position:relative;height:46px;width:100%;border:0;background:none;padding:0;cursor:pointer;z-index:calc(10 - var(--i));transition:transform .34s cubic-bezier(.2,.8,.2,1),opacity .22s;}
.hl-dot::before{content:'';position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px #2c2c2f;}
.hl-dot.c1{--c:var(--hl1);} .hl-dot.c2{--c:var(--hl2);} .hl-dot.c3{--c:var(--hl3);} .hl-dot.c4{--c:var(--hl4);} .hl-dot.c5{--c:var(--hl5);}
.hl-dot.cur::before{box-shadow:0 0 0 2px #2c2c2f,0 0 0 3.5px #e8e8e8;}
.hl-bar2.done .hl-dot{transform:translateX(calc(var(--i) * -100% + var(--k) * 34%));pointer-events:none;}
.hl-bar2.done .hl-dot:nth-child(n+4){opacity:0;}
.hl-stackhit{grid-column:1 / span 2;height:46px;border:0;background:none;display:none;cursor:pointer;z-index:20;}
.hl-bar2.done .hl-stackhit{display:block;}
.hl-erase2{grid-column:6;justify-self:center;width:38px;height:38px;border-radius:11px;border:0;background:#3a3a3e;color:#eee;display:grid;place-items:center;cursor:pointer;transition:opacity .2s;}
.hl-bar2.done .hl-erase2{opacity:0;pointer-events:none;}
.hl-erase2 svg,.hl-a2 svg,.hl-x2 svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.hl-a2{height:46px;width:100%;border:0;background:none;color:#eaeaea;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10.5px;cursor:pointer;border-radius:12px;opacity:0;pointer-events:none;transform:translateY(6px);transition:opacity .3s ease .08s,transform .3s ease .08s;}
.hl-bar2.done .hl-a2{opacity:1;pointer-events:auto;transform:none;}
.hl-x2{grid-column:7;justify-self:center;width:32px;height:32px;border-radius:50%;border:0;background:#e4e4e6;color:#222;display:grid;place-items:center;cursor:pointer;}
.hl-x2 svg{width:16px;height:16px;}
.hl-hint2{text-align:center;font-size:11px;color:#9a9a9f;margin-top:6px;}

.hl-bar2.done .hl-dot.cur::before{box-shadow:0 0 0 2px #2c2c2f;}

/* 형광펜 칸 맞춤: 글자 위치·줄바꿈은 그대로 두고(그리드 유지) 색 면만 좌우로 살짝 넓힌다 */
.verse-line.hl1 .verse-text,.verse-line.hl2 .verse-text,.verse-line.hl3 .verse-text,.verse-line.hl4 .verse-text,.verse-line.hl5 .verse-text{padding:.1em 0;margin:0;border-radius:.35em;}
.verse-line.hl1 .verse-text{box-shadow:-.4em 0 0 var(--hl1),.4em 0 0 var(--hl1);}
.verse-line.hl2 .verse-text{box-shadow:-.4em 0 0 var(--hl2),.4em 0 0 var(--hl2);}
.verse-line.hl3 .verse-text{box-shadow:-.4em 0 0 var(--hl3),.4em 0 0 var(--hl3);}
.verse-line.hl4 .verse-text{box-shadow:-.4em 0 0 var(--hl4),.4em 0 0 var(--hl4);}
.verse-line.hl5 .verse-text{box-shadow:-.4em 0 0 var(--hl5),.4em 0 0 var(--hl5);}

/* 하단 시트도 화면 모드를 따른다(밝은 화면 = 밝은 시트, 어두운 화면 = 어두운 시트) */
:root{--hs-bg:rgba(255,255,255,.98);--hs-row:#f2f2f7;--hs-text:#1f2326;--hs-sub:#8a8d90;--hs-btn:#e5e5ea;--hs-grab:#d1d1d6;--hs-x:#2a2d30;--hs-xfg:#fff;--hs-ring:#f2f2f7;--hs-cur:#1f2326;--hs-shadow:0 8px 28px rgba(30,40,35,.18),0 0 0 1px rgba(0,0,0,.06);}
html.dark{--hs-bg:rgba(18,38,31,.98);--hs-row:#1d3a31;--hs-text:#f0f0f0;--hs-sub:#9a9a9f;--hs-btn:#254238;--hs-grab:#5c5c60;--hs-x:#e4e4e6;--hs-xfg:#222;--hs-ring:#1d3a31;--hs-cur:#e8e8e8;--hs-shadow:0 8px 28px rgba(0,0,0,.32);}
.hl-bar2{background:var(--hs-bg);color:var(--hs-text);box-shadow:var(--hs-shadow);}
.hl-grab{background:var(--hs-grab);}
.hl-row2{background:var(--hs-row);}
.hl-dot::before{box-shadow:0 0 0 2px var(--hs-ring);}
.hl-dot.cur::before{box-shadow:0 0 0 2px var(--hs-ring),0 0 0 3.5px var(--hs-cur);}
.hl-bar2.done .hl-dot.cur::before{box-shadow:0 0 0 2px var(--hs-ring);}
.hl-erase2{background:var(--hs-btn);color:var(--hs-text);}
.hl-a2{color:var(--hs-text);}
.hl-x2{background:var(--hs-x);color:var(--hs-xfg);}
.hl-hint2{color:var(--hs-sub);}

.nar-play,.pres-nav{display:inline-grid;place-items:center;padding:0;}
.nar-play svg,.pres-nav svg{display:block;}

.inst-better{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:12px 14px;margin:0 0 12px;border-radius:12px;background:var(--accent-soft);border:1px solid var(--accent);font-size:14px;} .inst-better span{color:var(--ink-soft);font-size:13px;}
#inappBar{position:fixed;left:0;right:0;top:0;z-index:2000;display:flex;align-items:center;gap:10px;padding:10px 12px;padding-top:calc(10px + env(safe-area-inset-top));background:#fff4cc;color:#3a2c00;font-size:13px;font-weight:700;box-shadow:0 2px 10px rgba(0,0,0,.18);} #inappBar span{flex:1;} #inappBar .inst-btn{flex:none;}

#updateBar{position:fixed;left:50%;top:calc(10px + env(safe-area-inset-top));transform:translateX(-50%);z-index:2100;display:flex;align-items:center;gap:10px;max-width:min(94vw,520px);padding:9px 10px 9px 16px;border-radius:999px;background:var(--ink);color:var(--surface);font-size:13.5px;font-weight:700;box-shadow:0 8px 28px rgba(0,0,0,.28);animation:updin .35s cubic-bezier(.2,.8,.2,1);}
#updateBar span{flex:1;min-width:0;} #updateBar .upd-go{flex:none;height:32px;padding:0 14px;border-radius:999px;border:0;background:var(--accent);color:#fff;font-weight:800;font-size:13px;cursor:pointer;}
#updateBar .upd-x{flex:none;width:28px;height:28px;border-radius:50%;border:0;background:rgba(127,127,127,.28);color:inherit;font-size:13px;cursor:pointer;}
@keyframes updin{from{opacity:0;transform:translate(-50%,-12px);}to{opacity:1;transform:translate(-50%,0);}}

/* 켜진 상태의 테두리가 카드 위아래에서 잘려 양끝 막대처럼 보이던 문제: 버튼은 가운데 정렬 고정 크기, 테두리는 안쪽에 그린다 */
.lib-star,.off-btn{align-self:center;}
.lib-star{height:40px;}
body.lib-open .lib-star,body.lib-open .off-btn{box-shadow:none;outline:2px solid var(--accent);outline-offset:-2px;border-radius:10px;}

/* ===== 하단 시트 v3: 처음엔 겹친 색 + 지우개·메모·복사·공유·닫기가 한 줄, 겹친 색을 누르면 두 줄로 펼쳐진다 ===== */
.hl-row2{grid-auto-rows:54px;grid-template-rows:54px;transition:none;}
.hl-bar2 .hl-dot{grid-column:var(--n);grid-row:1;transform:translateX(calc(var(--i) * -100% + var(--k) * 34%));pointer-events:none;opacity:1;}
.hl-bar2 .hl-dot:nth-child(n+4){opacity:0;}
.hl-bar2.exp .hl-dot{transform:none;pointer-events:auto;opacity:1;}
.hl-stackhit{display:block !important;grid-column:1 / span 2;grid-row:1;}
.hl-bar2.exp .hl-stackhit{display:none !important;}
.hl-erase2{grid-column:3;grid-row:1;opacity:1 !important;pointer-events:auto !important;transition:none;}
.hl-bar2.exp .hl-erase2{grid-column:6;}
.hl-a2{opacity:1 !important;pointer-events:auto !important;transform:none !important;grid-row:1;width:100%;height:46px;}
.hl-a2.n4{grid-column:4;} .hl-a2.n5{grid-column:5;} .hl-a2.n6{grid-column:6;}
.hl-x2{grid-column:7;grid-row:1;}
.hl-bar2.exp .hl-a2,.hl-bar2.exp .hl-x2{grid-row:2;}
.hl-hint2{display:block;}

.hl-row2{height:auto !important;min-height:54px;}

/* ===== v4: 영상처럼 한 줄 유지 — 겹친 색을 누르면 5색이 펼쳐지고 메모·복사·공유는 오른쪽으로 밀려 숨는다(지우개·✕는 그대로) ===== */
.hl-row2{overflow:hidden;}
.hl-bar2.exp .hl-a2,.hl-bar2.exp .hl-x2{grid-row:1 !important;}
.hl-a2{transition:transform .38s cubic-bezier(.2,.8,.2,1),opacity .25s !important;}
.hl-bar2.exp .hl-a2{opacity:0 !important;pointer-events:none !important;}
.hl-bar2.exp .hl-a2.n4{transform:translateX(210%) !important;} .hl-bar2.exp .hl-a2.n5{transform:translateX(230%) !important;} .hl-bar2.exp .hl-a2.n6{transform:translateX(250%) !important;}
.hl-grab{position:relative;cursor:pointer;} .hl-grab::after{content:'';position:absolute;left:-40px;right:-40px;top:-10px;bottom:-12px;}

/* 새 버전 알림 v2: 앱 아이콘 + 두 줄 문구 + 새로고침 버튼, 화면 폭에 맞는 깔끔한 카드 */
#updateBar{position:fixed;left:50%;top:calc(10px + env(safe-area-inset-top));transform:translateX(-50%);z-index:2100;width:min(calc(100vw - 20px),460px);box-sizing:border-box;display:flex;align-items:center;gap:12px;padding:10px 10px 10px 12px;border-radius:20px;background:var(--surface);color:var(--ink);border:1px solid var(--border);box-shadow:0 12px 34px rgba(20,30,25,.2);max-width:none;font-size:14px;font-weight:600;animation:updin2 .42s cubic-bezier(.2,.9,.25,1);}
#updateBar img{flex:none;width:40px;height:40px;border-radius:10px;}
#updateBar .upd-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;} #updateBar .upd-t b{font-size:14.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #updateBar .upd-t small{font-size:12px;color:var(--ink-dim);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#updateBar .upd-go{flex:none;height:36px;padding:0 16px;border-radius:999px;border:0;background:var(--accent);color:#fff;font-weight:800;font-size:13.5px;cursor:pointer;} html.dark #updateBar .upd-go{color:#0e1513;}
#updateBar .upd-x{flex:none;width:30px;height:30px;border-radius:50%;border:0;background:var(--surface2);color:var(--ink-dim);display:grid;place-items:center;cursor:pointer;padding:0;}
@keyframes updin2{from{opacity:0;transform:translate(-50%,-18px) scale(.97);}to{opacity:1;transform:translate(-50%,0) scale(1);}}

/* 설치 안내: 새 버전 알림과 같은 카드 스타일 */
#installBar{left:50%;bottom:calc(12px + env(safe-area-inset-bottom));width:min(calc(100vw - 20px),460px);box-sizing:border-box;max-width:none;gap:12px;padding:10px 10px 10px 12px;border-radius:20px;border:1px solid var(--border);background:var(--surface);box-shadow:0 12px 34px rgba(20,30,25,.2);white-space:normal;font-size:14px;font-weight:600;animation:instin .42s cubic-bezier(.2,.9,.25,1);}
#installBar img{flex:none;width:40px;height:40px;border-radius:10px;}
#installBar .upd-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;} #installBar .upd-t b{font-size:14.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #installBar .upd-t small{font-size:12px;color:var(--ink-dim);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#installBar .upd-go{flex:none;height:36px;padding:0 16px;border-radius:999px;border:0;background:var(--accent);color:#fff;font-weight:800;font-size:13.5px;cursor:pointer;} html.dark #installBar .upd-go{color:#0e1513;}
#installBar .upd-x{flex:none;width:30px;height:30px;border-radius:50%;border:0;background:var(--surface2);color:var(--ink-dim);display:grid;place-items:center;cursor:pointer;padding:0;}
@keyframes instin{from{opacity:0;transform:translate(-50%,18px) scale(.97);}to{opacity:1;transform:translate(-50%,0) scale(1);}}
/* 하이라이트 색 동그라미: 현재 색 표시 링 제거(1번만 달라 보이던 문제) */
.hl-dot.cur::before,.hl-bar2.done .hl-dot.cur::before{box-shadow:0 0 0 2px var(--hs-ring);}
/* 넓은 화면에서도 하이라이트 시트는 폰 폭 정도로 가운데에 */
.hl-bar2{width:min(calc(100% - 20px),440px);box-sizing:border-box;align-self:center;margin-left:auto;margin-right:auto;}