/* QT 말씀노트. 패드 먼저(가로·세로 모두). 노트의 쪽은 언제나 흰 종이, 둘레만 테마를 따른다.
   테마는 메뉴의 '다크 모드'로 고른다(기본 라이트, html[data-theme], index.html이 먼저 정한다).
   도구 막대·설정 창 모양은 BBC Score(찬양팀 악보 필기 앱)의 것을 그대로 가져왔다. */
:root{
  --bg:#f3f4f7; --surface:#ffffff; --ink:#1a1e24; --muted:#5d6673; --line:#d8dce3;
  --accent:#3b5bdb; --accent-ink:#ffffff; --accent-soft:#e8edfd;
  --stage:#e3e6ec; --chrome:#2b3a55; --chrome-ink:#eef2f8; --chrome-muted:#a9b6cc; --chrome-line:#3d4d6b;
  --ok:#2f7d4f; --ok-soft:#e5f3ea; --warn:#a8670b; --warn-soft:#fbf1df; --new:#1f5fd6; --new-soft:#e6eefc;
  --danger:#c4372b; --mark:#ffe58a;
  --rule:#cfdae8; --rule-margin:#f1c7c7;
  --font:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#121519; --surface:#1b1f25; --ink:#e6e9ed; --muted:#9aa3ae; --line:#2b3139;
  --accent:#8aa2ff; --accent-ink:#0d1330; --accent-soft:#1f2747;
  --stage:#0c0e11; --chrome:#161b22; --chrome-ink:#e6e9ed; --chrome-muted:#8a96a6; --chrome-line:#262e38;
  --ok:#6cc48f; --ok-soft:#1b2e23; --warn:#e3a94f; --warn-soft:#33281a; --new:#7fa3ff; --new-soft:#1c2740;
  --danger:#ff7b70; --mark:#6b5a12;
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--font);
  -webkit-text-size-adjust:100%;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
button,.btn{font:inherit;color:inherit;cursor:pointer;border:1px solid var(--line);background:var(--surface);
  border-radius:9px;padding:8px 13px;min-height:40px;touch-action:manipulation;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none}
button:disabled{opacity:.4;cursor:default}
button.ghost{background:transparent}
button.small,.btn.small{min-height:32px;padding:4px 10px;font-size:.86rem}
button.primary,.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700}
button.danger{color:var(--danger)}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
a{color:var(--accent)}
mark{background:var(--mark);color:inherit;border-radius:3px;padding:0 1px}
.msg{min-height:1.5em;font-size:.92rem;color:var(--muted);margin:0}
.msg.err{color:var(--danger)}
.chint{font-size:.86rem;color:var(--muted)}
.pill{font-size:.74rem;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--bg);color:var(--muted);white-space:nowrap}
.pill.new{background:var(--new-soft);color:var(--new)}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}

.center{min-height:100%;display:flex;align-items:center;justify-content:center;
  padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.brand{display:flex;align-items:center;gap:12px;font-size:1.5rem;letter-spacing:-.01em}
.brand.small{font-size:1.1rem;gap:8px}
.brand img{border-radius:22%}
.login-card{max-width:420px;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:28px;display:flex;flex-direction:column;gap:16px}
.login-card p{margin:0;color:var(--muted)}
#gbtn{min-height:44px}

/* ---------- 목록 ---------- */
#list{min-height:100%;padding-bottom:max(24px,env(safe-area-inset-bottom))}
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;background:var(--bg);
  padding:calc(10px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));
  border-bottom:1px solid var(--line)}
.topbar .sync{margin-left:auto}
.menu-wrap{position:relative}
.menu{position:absolute;right:0;top:calc(100% + 6px);min-width:220px;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:6px;display:flex;flex-direction:column;gap:2px;box-shadow:0 8px 30px rgba(0,0,0,.18);z-index:8}
.menu button{border:0;justify-content:flex-start;background:transparent}
.menu-switch{display:flex;align-items:center;justify-content:space-between!important;gap:12px}
.menu-switch .knob{flex:none;width:40px;height:24px;border-radius:12px;background:var(--line);position:relative;transition:background .15s}
.menu-switch .knob::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.3);transition:left .15s}
.menu-switch[aria-checked="true"] .knob{background:var(--accent)}
.menu-switch[aria-checked="true"] .knob::after{left:19px}
.ver{font-size:.74rem;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.lbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}
.lq-wrap{position:relative;display:flex;align-items:center;flex:1 1 320px;min-width:0}
.lq-wrap .ico{position:absolute;left:12px;width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;pointer-events:none}
#q{width:100%;min-height:44px;padding:6px 36px 6px 38px;border:1px solid var(--line);border-radius:12px;background:var(--surface);
  color:var(--ink);font:inherit;font-size:16px;-webkit-appearance:none;appearance:none}
#q::-webkit-search-cancel-button{display:none}
#q:focus{outline:2px solid var(--accent);outline-offset:-1px}
.lq-clear{position:absolute;right:6px;width:32px;height:32px;min-height:0;padding:0;border:0;border-radius:50%;background:transparent;
  color:var(--muted);font-size:1.3rem;line-height:1}
.add-btn{flex:none;min-height:44px;border-color:var(--accent);color:var(--accent);font-weight:700;white-space:nowrap}
.notes{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;
  padding:16px max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}
.ncard{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:14px;background:var(--surface);
  border:1px solid var(--line);color:var(--ink);text-decoration:none}
.ncard:hover{border-color:var(--accent)}
.nc-date{font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums}
.nc-title{font-size:1.08rem;line-height:1.35}
.nc-sub{font-size:.86rem;color:var(--muted)}
.nc-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;color:var(--muted);padding:48px 16px}
.empty b{color:var(--ink);font-size:1.1rem}
.results{display:flex;flex-direction:column;gap:12px;padding:16px max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));max-width:980px}
.hit{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--line);
  color:var(--ink);text-decoration:none}
.hit:hover{border-color:var(--accent)}
.hit-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.hit ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.hit li{display:flex;gap:8px;align-items:baseline;font-size:.9rem}
.hit li .pill{flex:none}
.hit-s{color:var(--ink);min-width:0;overflow-wrap:anywhere}

/* 동기화 상태. 누르면 지금 동기화. 단추지만 알약 모양 그대로 */
.sync{font-size:.74rem;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap;background:var(--ok-soft);color:var(--ok);
  border:0;min-height:0;line-height:1.5;position:relative}
.sync::after{content:"";position:absolute;inset:-8px -4px}
.sync::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:6px;vertical-align:1px}
.sync[data-state="syncing"]{background:var(--new-soft);color:var(--new)}
.sync[data-state="offline"]{background:var(--bg);color:var(--muted)}
.sync[data-state="error"],.sync[data-state="login"]{background:var(--warn-soft);color:var(--warn)}

/* ---------- 노트 ---------- */
#note{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--stage);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.vbar,.toolbar{flex:none}
.vbar{display:flex;align-items:center;gap:12px;background:var(--chrome);color:var(--chrome-ink);
  padding:calc(6px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 6px max(12px,env(safe-area-inset-left))}
.vbar button:not(.sync){border-color:var(--chrome-line);background:transparent;color:var(--chrome-ink)}
.v-info{min-width:0;flex:1;display:flex;flex-direction:column;line-height:1.3}
.v-title{font-size:.72rem;color:var(--chrome-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-song{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-meta{font-size:.78rem;color:var(--chrome-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-meta:empty{display:none}
.v-right{display:flex;align-items:center;gap:10px}
.vbar button{white-space:nowrap}
.seg{display:flex;border:1px solid var(--chrome-line);border-radius:10px;overflow:hidden}
.seg button{border:0;border-radius:0;min-height:38px;padding:6px 12px}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);font-weight:700}
.vbar .n-panel[aria-pressed="true"]{background:var(--chrome-line)}

/* 도구 막대(GoodNotes 비슷하게): 도구 아이콘 | 도구마다 바뀌는 칸(굵기 3·색 5 / 지우개 / 기호) | 실행취소 …
   늘 한 줄. 화면이 좁으면 줄을 바꾸지 않고 옆으로 밀어서 본다(2026-10-26 '좁은 화면에서 도구 막대가 너무 높다') */
.toolbar{display:none;flex-wrap:nowrap;gap:12px;align-items:center;background:var(--surface);border-bottom:1px solid var(--line);
  padding:6px max(12px,env(safe-area-inset-right)) 6px max(12px,env(safe-area-inset-left));
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.toolbar::-webkit-scrollbar{display:none}
/* 옆에 더 있으면 그쪽 가장자리를 흐리게(밀어 볼 수 있다는 표시) */
.toolbar.more-r{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent)}
.toolbar.more-l{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent)}
.toolbar.more-l.more-r{-webkit-mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent);
  mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
.toolbar > *{flex:none}
.toolbar .tools{order:1}
.toolbar .ctx{order:2}
.toolbar > .grp:not(.tools):not(.ctx){order:4}
.tools button{min-width:48px;padding:0 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;border-color:transparent;background:transparent}
.tools .ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tools .tlabel{font-size:.62rem;line-height:1;margin-top:1px;color:var(--muted);white-space:nowrap}
.toolbar .tools button[aria-pressed="true"]{background:var(--accent-soft);border-color:transparent}
.toolbar .tools button[aria-pressed="true"] .tlabel{color:var(--accent)}
.ctx{gap:10px;flex-wrap:nowrap}
.ctx:empty{display:none}
.cgrp{display:flex;gap:3px;align-items:center}
.cgrp + .cgrp{padding-left:10px;border-left:1px solid var(--line)}
.wpre{width:44px;padding:0!important;display:flex;align-items:center;justify-content:center;border-color:transparent!important;background:transparent}
.wpre i{display:block;width:22px;border-radius:9px;background:var(--ink)}
.toolbar .wpre[aria-pressed="true"]{background:var(--bg)!important}
/* 원은 가로·세로를 같게(모든 단추의 최소 높이 40px가 덮어쓰면 타원이 된다) */
.toolbar .swatch{width:40px;height:40px;min-height:0;padding:0;border-radius:50%;border-color:transparent;background:transparent;position:relative;flex:none}
/* 선명하게: 반투명 그림자(가장자리가 번져 흐려 보인다) 대신 얇은 실선 테두리 */
.swatch::after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--c);border:1px solid rgba(0,0,0,.14)}
.toolbar .swatch[aria-pressed="true"]{background:transparent;border-color:transparent}
.swatch.on::before{content:"";position:absolute;inset:2px;border-radius:50%;border:2px solid var(--c)}
.swatch.on::after{inset:9px}
.seg2 button{min-height:36px;padding:4px 12px}
.switch{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:4px 10px;font-size:.86rem}
.switch .knob{width:30px;height:18px;border-radius:9px;background:var(--line);position:relative;transition:background .15s}
.switch .knob::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.switch[aria-pressed="true"] .knob{background:var(--accent)}
.switch[aria-pressed="true"] .knob::after{left:14px}
.toolbar .switch[aria-pressed="true"]{background:transparent;color:var(--ink);font-weight:400}
.esize{width:44px;flex:none;padding:0!important;display:flex;align-items:center;justify-content:center;border-color:transparent!important;background:transparent}
.esize i{display:block;flex:none;aspect-ratio:1;border-radius:50%;border:2px solid var(--muted);background:repeating-conic-gradient(var(--line) 0 25%,transparent 0 50%) 0 0/6px 6px}
.toolbar .esize[aria-pressed="true"] i{border-color:var(--new)}
.chint{font-size:.84rem;color:var(--muted)}

/* 굵기·색 설정 창 */
.pop{position:fixed;z-index:12;width:min(340px,calc(100vw - 16px));background:var(--surface);color:var(--ink);border-radius:18px;
  padding:16px 18px;box-shadow:0 18px 50px rgba(0,0,0,.28);display:flex;flex-direction:column;gap:12px}
.pop::before{content:"";position:absolute;top:-8px;left:calc(var(--arrow, 50%) - 8px);border:8px solid transparent;border-top:0;border-bottom-color:var(--surface)}
.pop-h{font-weight:700;font-size:1rem;text-align:center}
.pop.wide{width:min(380px,calc(100vw - 16px));max-height:calc(100vh - 140px);overflow-y:auto}
.pop-preview{width:100%;height:90px;display:block}
.ptypes{display:flex;gap:6px}
.ptypes button{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.84rem;padding:8px 4px;border-color:transparent;background:transparent}
.ptypes .ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ptypes button[aria-pressed="true"]{background:var(--bg);font-weight:700}
.opts{display:flex;flex-direction:column;gap:6px;background:var(--bg);border-radius:14px;padding:10px 14px}
.opts .pop-row output{font-variant-numeric:tabular-nums;font-size:.86rem;color:var(--muted)}
/* 연필 진하기 1~5: 단계마다 진해지는 결 막대 */
.dks{display:flex;gap:6px}
.dks button{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-height:0;padding:8px 2px 6px;font-size:.8rem;
  border-color:transparent;background:transparent;color:var(--muted)}
.dks button i{display:block;width:70%;height:6px;border-radius:3px;background:var(--ink);opacity:var(--d)}
.dks button[aria-pressed="true"]{background:var(--surface);border-color:var(--line);color:var(--ink);font-weight:700}
.opt output{font-variant-numeric:tabular-nums;font-size:.86rem;color:var(--muted)}
.opt .pop-row{font-size:.86rem}
.pop-sec{font-weight:700;font-size:.9rem;color:var(--muted);margin-top:2px}
.sets{display:flex;flex-direction:column;background:var(--bg);border-radius:14px;padding:4px 14px}
.setrow{min-height:44px}
.setrow + .setrow{border-top:1px solid var(--line)}
.setrow .switch{padding:0;min-height:0;border:0;background:transparent}
.setrow .switch .knob{width:44px;height:26px;border-radius:13px}
.setrow .switch .knob::after{top:3px;left:3px;width:20px;height:20px}
.setrow .switch[aria-pressed="true"] .knob{background:#34c759}
.setrow .switch[aria-pressed="true"] .knob::after{left:21px}
.pop-row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.9rem}
.pop-mm{font-variant-numeric:tabular-nums;font-weight:700}
.pop input[type="range"]{width:100%;accent-color:var(--accent)}
.lstyles button{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.82rem;padding:8px 4px;border-color:transparent;background:var(--bg)}
.lstyles svg{width:40px;height:10px;stroke:var(--new);stroke-width:3}
.lstyles button[aria-pressed="true"]{border-color:var(--new);background:var(--new-soft)}
.pop-tabs{display:flex;background:var(--bg);border-radius:10px;padding:3px}
.pop-tabs button{flex:1;border:0;min-height:32px;background:transparent;font-size:.86rem}
.pop-tabs button[aria-pressed="true"]{background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.12);font-weight:700}
.pop-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;justify-items:center}
.pc{width:36px;height:36px;min-height:0;padding:0;flex:none;aspect-ratio:1;border-radius:50%;border:1px solid rgba(0,0,0,.14);background:var(--c)}
.pc.on{outline:2.5px solid var(--new);outline-offset:2px}
/* 사용자 색: 아이패드의 색 고르기 칸은 그대로 두면 흐리게 늘어난다. 원은 직접 그리고, 색 고르기 칸은
   그 위에 투명하게 겹쳐 누르면 열리게 한다. */
.cwell{position:relative;display:block;width:36px;height:36px;flex:none;border-radius:50%;background:var(--c);
  border:1px solid rgba(0,0,0,.14);overflow:hidden}
.cwell::after{content:"+";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;
  text-shadow:0 0 2px rgba(0,0,0,.6);pointer-events:none}
.cwell input[type="color"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;cursor:pointer}

/* 지우개 크기 원(지우개로 누르거나 펜을 띄워 둘 때) */
.eraser-cursor{position:fixed;left:0;top:0;z-index:9;pointer-events:none;border-radius:50%;
  border:1.5px solid rgba(60,64,72,.85);background:rgba(255,255,255,.35);box-shadow:0 0 0 1px rgba(255,255,255,.8)}
.grp{display:flex;gap:4px;align-items:center}
.toolbar button{min-height:40px;padding:6px 11px}
.toolbar button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:700}



/* 굵기·색 설정 창 */
.pop{position:fixed;z-index:12;width:min(340px,calc(100vw - 16px));background:var(--surface);color:var(--ink);border-radius:18px;
  padding:16px 18px;box-shadow:0 18px 50px rgba(0,0,0,.28);display:flex;flex-direction:column;gap:12px}
.pop::before{content:"";position:absolute;top:-8px;left:calc(var(--arrow, 50%) - 8px);border:8px solid transparent;border-top:0;border-bottom-color:var(--surface)}
.pop-h{font-weight:700;font-size:1rem;text-align:center}
.pop.wide{width:min(380px,calc(100vw - 16px));max-height:calc(100vh - 140px);overflow-y:auto}
.pop-preview{width:100%;height:90px;display:block}
.ptypes{display:flex;gap:6px}
.ptypes button{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.84rem;padding:8px 4px;border-color:transparent;background:transparent}
.ptypes .ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ptypes button[aria-pressed="true"]{background:var(--bg);font-weight:700}
.opts{display:flex;flex-direction:column;gap:6px;background:var(--bg);border-radius:14px;padding:10px 14px}
.opts .pop-row output{font-variant-numeric:tabular-nums;font-size:.86rem;color:var(--muted)}
/* 연필 진하기 1~5: 단계마다 진해지는 결 막대 */
.dks{display:flex;gap:6px}
.dks button{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-height:0;padding:8px 2px 6px;font-size:.8rem;
  border-color:transparent;background:transparent;color:var(--muted)}
.dks button i{display:block;width:70%;height:6px;border-radius:3px;background:var(--ink);opacity:var(--d)}
.dks button[aria-pressed="true"]{background:var(--surface);border-color:var(--line);color:var(--ink);font-weight:700}
.opt output{font-variant-numeric:tabular-nums;font-size:.86rem;color:var(--muted)}
.opt .pop-row{font-size:.86rem}
.pop-sec{font-weight:700;font-size:.9rem;color:var(--muted);margin-top:2px}
.sets{display:flex;flex-direction:column;background:var(--bg);border-radius:14px;padding:4px 14px}
.setrow{min-height:44px}
.setrow + .setrow{border-top:1px solid var(--line)}
.setrow .switch{padding:0;min-height:0;border:0;background:transparent}
.setrow .switch .knob{width:44px;height:26px;border-radius:13px}
.setrow .switch .knob::after{top:3px;left:3px;width:20px;height:20px}
.setrow .switch[aria-pressed="true"] .knob{background:#34c759}
.setrow .switch[aria-pressed="true"] .knob::after{left:21px}
.pop-row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.9rem}
.pop-mm{font-variant-numeric:tabular-nums;font-weight:700}
.pop input[type="range"]{width:100%;accent-color:var(--accent)}
.lstyles button{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.82rem;padding:8px 4px;border-color:transparent;background:var(--bg)}
.lstyles svg{width:40px;height:10px;stroke:var(--new);stroke-width:3}
.lstyles button[aria-pressed="true"]{border-color:var(--new);background:var(--new-soft)}
.pop-tabs{display:flex;background:var(--bg);border-radius:10px;padding:3px}
.pop-tabs button{flex:1;border:0;min-height:32px;background:transparent;font-size:.86rem}
.pop-tabs button[aria-pressed="true"]{background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.12);font-weight:700}
.pop-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;justify-items:center}
.pc{width:36px;height:36px;min-height:0;padding:0;flex:none;aspect-ratio:1;border-radius:50%;border:1px solid rgba(0,0,0,.14);background:var(--c)}
.pc.on{outline:2.5px solid var(--new);outline-offset:2px}
/* 사용자 색: 아이패드의 색 고르기 칸은 그대로 두면 흐리게 늘어난다. 원은 직접 그리고, 색 고르기 칸은
   그 위에 투명하게 겹쳐 누르면 열리게 한다. */
.cwell{position:relative;display:block;width:36px;height:36px;flex:none;border-radius:50%;background:var(--c);
  border:1px solid rgba(0,0,0,.14);overflow:hidden}
.cwell::after{content:"+";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;
  text-shadow:0 0 2px rgba(0,0,0,.6);pointer-events:none}
.cwell input[type="color"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;cursor:pointer}

/* 지우개 크기 원(지우개로 누르거나 펜을 띄워 둘 때) */
.eraser-cursor{position:fixed;left:0;top:0;z-index:9;pointer-events:none;border-radius:50%;
  border:1.5px solid rgba(60,64,72,.85);background:rgba(255,255,255,.35);box-shadow:0 0 0 1px rgba(255,255,255,.8)}
#note[data-view="edit"] .toolbar{display:flex}
.grp{display:flex;gap:4px;align-items:center}
.toolbar button{min-height:40px;padding:6px 11px}
.toolbar button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:700}
.tsize{width:44px;padding:0!important;border-color:transparent!important;background:transparent}
.tsize span{font-weight:700;line-height:1}
.toolbar .tsize[aria-pressed="true"]{background:var(--bg)!important;color:var(--ink)}

/* 쪽과 옆 칸 */
.nbody{flex:1;min-height:0;display:flex;position:relative}
.stage{flex:1;min-width:0;overflow:auto;touch-action:none;position:relative;scrollbar-width:thin;overscroll-behavior:contain}
.pages{display:flex;flex-direction:column;align-items:center;gap:16px;padding:12px 12px 0}
.pages-foot{display:flex;justify-content:center;padding:16px 12px max(40px,env(safe-area-inset-bottom))}
#note[data-view="read"] .pages-foot{display:none}
.page{position:relative;flex:none;background-color:#fff;box-shadow:0 1px 4px rgba(0,0,0,.22);overflow:hidden;
  --gap:calc(var(--u) * 40)}
/* 줄: 40단위 간격(A4에서 8.4mm), 위 여백 100단위. 모눈: 같은 간격. 색은 연하게(필기가 먼저 보이게) */
.page[data-bg="lines"]{background-image:linear-gradient(to right,transparent calc(var(--u) * 78),var(--rule-margin) calc(var(--u) * 78),var(--rule-margin) calc(var(--u) * 80),transparent calc(var(--u) * 80)),
  repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--gap) - 1px),var(--rule) calc(var(--gap) - 1px),var(--rule) var(--gap));
  background-position:0 0,0 calc(var(--u) * 100);background-size:100% 100%,100% calc(100% - var(--u) * 140);background-repeat:no-repeat}
.page[data-bg="grid"]{background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--gap) - 1px),var(--rule) calc(var(--gap) - 1px),var(--rule) var(--gap)),
  repeating-linear-gradient(to right,transparent 0,transparent calc(var(--gap) - 1px),var(--rule) calc(var(--gap) - 1px),var(--rule) var(--gap));
  background-position:0 calc(var(--u) * 20),calc(var(--u) * 20) 0}
.page .ink{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.pno{position:absolute;right:calc(var(--u) * 30);bottom:calc(var(--u) * 20);font-size:.72rem;color:#9aa3ae;pointer-events:none}
.wetbox{position:fixed;inset:0;z-index:4;pointer-events:none;visibility:hidden}
.wet,.pred{position:fixed;pointer-events:none}
#note:not([data-view="edit"]) .wetbox{display:none}
#note[data-view="edit"] .stage{cursor:crosshair}
#note[data-view="edit"] .stage[data-tool="eraser"]{cursor:cell}
#note[data-view="edit"] .stage[data-tool="text"]{cursor:text}
.text-box{position:absolute;z-index:3;min-height:2em;border:1.5px dashed var(--new);border-radius:4px;padding:0 3px;margin:0;resize:none;overflow:hidden;
  background:rgba(255,255,255,.92);font-family:var(--font);-webkit-user-select:text;user-select:text;outline:none}

.panel{display:none;flex:none;width:400px;max-width:100%;flex-direction:column;background:var(--surface);border-left:1px solid var(--line);
  -webkit-user-select:text;user-select:text;min-height:0}
#note.panel-on .panel{display:flex}
.ptabs-wrap{display:flex;align-items:center;border-bottom:1px solid var(--line);padding:6px 6px 0}
.ptabs{flex:1;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.ptabs::-webkit-scrollbar{display:none}
.ptabs button{border:0;border-radius:8px 8px 0 0;background:transparent;min-height:40px;padding:6px 10px;color:var(--muted);white-space:nowrap;
  border-bottom:2px solid transparent}
.ptabs button[aria-pressed="true"]{color:var(--accent);border-bottom-color:var(--accent);font-weight:700}
.ptabs button i{display:none}
.pclose{min-height:36px;width:36px;padding:0;font-size:1.3rem;border:0}
.ppane{flex:1;overflow:auto;padding:14px 16px max(24px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px}
.psec{display:flex;flex-direction:column;gap:8px}
.psec + .psec{border-top:1px solid var(--line);padding-top:12px}
.psec h3{margin:0;font-size:.95rem}
.psec h4{margin:4px 0 0;font-size:.84rem;color:var(--muted)}
.pform{display:flex;flex-direction:column;gap:10px}
.fld{display:flex;flex-direction:column;gap:4px;font-size:.84rem;color:var(--muted);min-width:0}
.fld input,.qref input,.cform textarea,.att-cap,.att-ocr{min-height:40px;padding:6px 10px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg);color:var(--ink);font:inherit;font-size:16px;width:100%}
.cform textarea,.att-ocr{resize:vertical;line-height:1.5}
.fld input:focus,.qref input:focus,.cform textarea:focus,.att-cap:focus,.att-ocr:focus{outline:2px solid var(--accent);outline-offset:-1px}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.chip{display:flex;align-items:center;border-radius:999px;background:var(--new-soft);color:var(--new)}
.chip button{border:0;background:transparent;color:inherit;min-height:32px}
.chip-go{padding:2px 4px 2px 12px;font-weight:600}
.chip-x{padding:2px 10px 2px 6px;font-size:1.1rem}
.qref{display:flex;gap:6px}
.qref button{flex:none}
.bgseg{width:fit-content;border-color:var(--line)}
.danger-zone{align-items:flex-start}
.pacts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.atts{display:flex;flex-direction:column;gap:14px}
.att{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--bg)}
.att-img img{display:block;width:100%;max-height:260px;object-fit:contain;border-radius:8px;background:#fff}
.att-body{display:flex;flex-direction:column;gap:6px}
.att-h{display:flex;align-items:center;gap:8px}
.att-t{font-size:.8rem;color:var(--muted);flex:1}
.att-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.att-msg{font-size:.82rem;color:var(--muted)}
.cform{display:flex;flex-direction:column;gap:8px}
.cform > button{align-self:flex-end}
.comments{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.comments > li[data-cid]{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--bg)}
.c-h{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--muted)}
.c-h span{flex:1}
.c-body{white-space:pre-wrap;overflow-wrap:anywhere;margin-top:4px}
.ptext{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;margin:0;background:var(--bg);border-radius:10px;padding:10px 12px;line-height:1.6}
.ptext.script{max-height:60vh;overflow:auto}
.songs{margin:0;padding-left:1.4em;display:flex;flex-direction:column;gap:2px}
.songs i{font-style:normal;font-size:.8rem;color:var(--muted)}
details summary{cursor:pointer;color:var(--accent);font-size:.9rem;margin-bottom:6px}

/* 좁은 화면: 옆 칸은 쪽 위에 떠서 열린다 */
@media (max-width:1099px){
  .panel{position:absolute;z-index:7;right:0;top:0;bottom:0;width:min(420px,94vw);box-shadow:-10px 0 30px rgba(0,0,0,.18)}
}
@media (max-width:700px){
  .vbar{gap:8px}
  .v-right{gap:6px}
  .seg button{padding:6px 9px}
  .vbar .sync{font-size:0;padding:6px}
  .vbar .sync::before{margin-right:0;width:9px;height:9px}
}

/* ---------- 성경 창 ---------- */
.dlg-back{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:16px}
.dlg{background:var(--surface);color:var(--ink);border-radius:16px;max-width:440px;width:100%;padding:22px 24px;display:flex;flex-direction:column;gap:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.35)}
.dlg h2{margin:0;font-size:1.15rem}
.dlg.bible{max-width:760px;height:min(88dvh,900px);padding:16px 18px;gap:10px}
.bhead{display:flex;align-items:center;justify-content:space-between}
.bhead small{font-size:.78rem;color:var(--muted);font-weight:500;margin-left:6px}
.bclose{min-height:36px;width:36px;padding:0;font-size:1.4rem;border:0}
.bform{display:flex;gap:8px}
.bq,.bnav select{min-height:42px;padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit;font-size:16px}
.bq{flex:1;min-width:0}
.bnav{display:flex;gap:8px}
.bnav select{flex:1;min-width:0}
.bout{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:10px;-webkit-user-select:text;user-select:text}
.bverses{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;line-height:1.7}
.bverses li{padding:2px 6px;border-radius:6px}
.bverses sup{font-size:.72rem;color:var(--muted);margin-right:6px;font-weight:700;vertical-align:.2em}
.linking .bverses li[data-v]{cursor:pointer}
.linking .bverses li[data-v]:hover{background:var(--bg)}
.bverses li.on{background:var(--accent-soft)}
.bchap-h{display:flex;align-items:center;justify-content:space-between;gap:8px;position:sticky;top:0;background:var(--surface);padding-bottom:4px}
.bsel{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.88rem;color:var(--muted);background:var(--bg);border-radius:10px;padding:8px 10px}
.bsel span{flex:1;min-width:180px}
.bref{display:flex;flex-direction:column;gap:6px}
.bref-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bhits{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.bhit{width:100%;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;border-color:transparent;background:var(--bg);line-height:1.5}
.bhit b{font-size:.84rem;color:var(--accent)}
.bcredit{font-size:.76rem;color:var(--muted);margin:6px 0 0}

/* ---------- 업데이트 창: 크게, 가운데(성경 창보다 위) ---------- */
.dlg-back.update{z-index:35;background:rgba(0,0,0,.55)}
.update .dlg{padding:28px 28px 22px;align-items:center;text-align:center;gap:14px}
.update h2{font-size:1.4rem}
.up-icon{width:64px;height:64px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700}
.up-ver{margin:0;font-variant-numeric:tabular-nums;color:var(--muted)}
.up-ver b{color:var(--ink)}
.dlg-note{margin:0;color:var(--muted);font-size:.92rem;line-height:1.5}
.update .dlg-row{display:flex;gap:10px;width:100%}
.update .dlg-row button{flex:1;min-height:52px;font-size:1.05rem;border-radius:12px}
button.primary:disabled{opacity:.6}

#toast{position:fixed;z-index:40;left:50%;transform:translateX(-50%);bottom:calc(24px + env(safe-area-inset-bottom));
  background:#1d2733;color:#fff;border-radius:12px;padding:10px 14px;display:flex;gap:12px;align-items:center;
  max-width:calc(100% - 32px);box-shadow:0 8px 30px rgba(0,0,0,.3);font-size:.92rem}
#toast button{background:var(--accent);color:var(--accent-ink);border:0;min-height:34px;padding:4px 12px;font-weight:700}
@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto!important}}