/* PRAISE 온라인 편집 (2026-10-27) — 앱 기본 테마 '무대'(src/themes.js glass-stage · STAGE_DARK)와 같은 값 · 같은 배치
   ① 판 = 위에서 비추는 조명 + 아래로 어둠에 녹아 사라짐 ② 윗변 빛줄기 ③ 단추 104° 흰 5% → 10% ④ 주요 단추 흰 바탕 검은 글자
   ⑤ 색은 상태에만(빨강 = 송출 · 노랑 = 고른 것 · 구역 색 = 이름표) */
:root{
  color-scheme:dark;
  --bg:#000;--pane-solid:#0b0c0d;--card:#101112;--field:rgb(216 244 246 / .035);--tile:rgb(221 234 248 / .05);
  --border:rgb(214 235 253 / .10);--text:#fdfdfd;--sub:rgb(240 246 255 / .65);--muted:rgb(240 246 255 / .52);--disabled:rgb(240 246 255 / .32);
  --btn-edge:rgb(214 235 253 / .12);--hover:rgb(221 234 248 / .06);
  --onair:rgb(255 23 23);--warm:#ffd60a;--good:#3dd68c;--bad:#ff8a8d;
  --font:"Noto Sans KR","Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;
  --r:16px;--r-tile:10px;
  --wall:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),radial-gradient(60% 40% at 50% 0%,rgb(216 236 255 / .05),transparent 70%),#000;
  --panel:radial-gradient(41% 8% at 50% 0%,rgb(255 255 255 / .10),transparent 100%),radial-gradient(70% 25% at 50% 100%,rgb(214 235 253 / .035),transparent 100%),linear-gradient(180deg,#121314 0%,#0c0d0e 55%,#0a0b0c 100%);
  --beam:linear-gradient(90deg,rgb(255 255 255 / 0),rgb(255 255 255 / .9) 50%,rgb(255 255 255 / 0)) 50% 0 / min(300px,70%) 1px no-repeat,radial-gradient(50% 50% at 50% 0%,rgb(143 143 143 / .32),transparent 100%) 50% 0 / min(420px,90%) 36px no-repeat;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--wall);color:var(--text);font:400 14px/1.45 var(--font);-webkit-font-smoothing:antialiased;word-break:keep-all}
body{overflow:hidden}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.spacer{flex:1}
.hint{color:var(--muted);font-size:12.5px}
a{color:inherit}
svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* 단추 (앱 무대 테마 ⑤) */
button{font:600 13px/1 var(--font);color:var(--text);height:30px;padding:0 12px;border-radius:8px;border:1px solid var(--btn-edge);cursor:pointer;white-space:nowrap;
  background:linear-gradient(104deg,rgb(253 253 253 / .05) 5%,rgb(240 240 228 / .10) 100%);box-shadow:inset 0 1px 1px rgb(255 255 255 / .06);transition:background .15s,opacity .15s}
button:hover{background:linear-gradient(104deg,rgb(253 253 253 / .09) 5%,rgb(240 240 228 / .15) 100%)}
button:active{background:rgb(253 253 253 / .16)}
button:disabled{opacity:.42;cursor:default}
button.primary{background:#fdfdfd;color:#000;border-color:transparent;box-shadow:inset 0 1px 0 rgb(255 255 255 / .6)}
button.primary:hover{background:#fff}
button.primary:disabled{background:rgb(253 253 253 / .16);color:rgb(240 246 255 / .45);opacity:1}
button.ico{width:24px;height:24px;padding:0;display:inline-grid;place-items:center;border-radius:7px}
button.ico svg{width:15px;height:15px}
button.mini{height:24px;padding:0 9px;font-size:12px;border-radius:7px}
button.wide{width:100%;height:42px;font-size:14.5px;border-radius:10px}
button.link{all:unset;cursor:pointer;color:var(--text);font-weight:600;font-size:13px;padding:2px 4px;border-radius:4px}
button.link:hover{text-decoration:underline}
button.danger{color:var(--bad)}
button.armed{background:#e5484d;color:#fff;border-color:transparent}
.pill{height:30px;border-radius:999px;padding:0 10px 0 14px;display:inline-flex;align-items:center;gap:4px;max-width:62%}
.pill span{overflow:hidden;text-overflow:ellipsis}
.pill svg{width:14px;height:14px;flex:none}
:focus-visible{outline:2px solid #7cc8ff;outline-offset:2px}
input,textarea,select{font:inherit;color:var(--text);background:var(--field);border:1px solid var(--btn-edge);border-radius:8px;outline:none}
input,select{height:32px;padding:0 10px}
input:focus,textarea:focus,select:focus{border-color:rgb(214 235 253 / .38)}
select option{background:#101112;color:var(--text)}
kbd.bkey{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:6px;border-radius:4px;font:600 10.5px var(--font);color:var(--sub);border:1px solid var(--btn-edge);background:var(--tile)}
.chk{display:inline-flex;align-items:center;gap:6px;color:var(--sub);font-size:13px;cursor:pointer;white-space:nowrap}
.chk input{appearance:none;width:16px;height:16px;padding:0;border-radius:4px;border:1px solid rgb(214 235 253 / .25);background:var(--tile);display:inline-grid;place-items:center;cursor:pointer}
.chk input:checked{background:rgb(214 235 253 / .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6 9.6 3.6' fill='none' stroke='rgb(226,231,238)' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;border-color:rgb(214 235 253 / .34)}

/* 상단 바 */
.app{height:100%;display:grid;grid-template-rows:53px minmax(0,1fr);padding:0 14px 14px}
header{display:flex;align-items:center;gap:10px;min-width:0}
.brand{text-decoration:none;display:flex;align-items:baseline;margin:0 10px 0 12px}
.brandSub{font-weight:700;letter-spacing:.1em;display:inline-block;transform:scaleX(1.12);transform-origin:left;margin-right:.32em;font-size:17px;
  background:linear-gradient(to right bottom,#fff 30%,rgb(255 255 255 / .5));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.topnav{display:flex;gap:2px}
.tnav{background:none!important;border:0;box-shadow:none;color:var(--sub);font-weight:500;font-size:13.5px;height:32px;padding:0 10px}
.tnav:hover{color:var(--text);background:var(--hover)!important}
.tnav.on{color:var(--text);font-weight:700}
header button.head{height:30px}
.hello{margin-left:8px;color:var(--sub);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.saveBox{display:flex;align-items:center;gap:8px}
.saveState{font-size:12.5px;color:var(--muted);white-space:nowrap}
.saveState.dirty{color:var(--warm)}
.saveState.err{color:var(--bad)}
.saveState.ok::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--good);margin-right:6px;vertical-align:1px}

/* 네 패널 (앱 .main 3열 2행 격자 — 예배 순서 · 라이브러리 / 가운데 / 송출) */
.main{display:grid;grid-template-columns:clamp(250px,17.7vw,480px) minmax(0,1fr) clamp(330px,20.8vw,560px);grid-template-rows:minmax(0,1fr) minmax(190px,36%);gap:14px;min-height:0}
.colOrder{grid-column:1;grid-row:1}.colLib{grid-column:1;grid-row:2}
.colCenter{grid-column:2;grid-row:1/3}.colRight{grid-column:3;grid-row:1/3}
.col{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:0;min-width:0;border:1px solid var(--border);border-bottom-color:transparent;border-radius:var(--r);background:var(--panel);overflow:hidden}
.col::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--beam);pointer-events:none}
.rhead{display:flex;align-items:center;gap:6px;padding:0 10px 0 14px;min-height:44px;flex:none}
.rhead .ttl{font-weight:700;font-size:14px;background:linear-gradient(to right bottom,#fff 30%,rgb(255 255 255 / .5));-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.02em}
.scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
.scroll::-webkit-scrollbar{width:10px;height:10px}.scroll::-webkit-scrollbar-thumb{background:rgb(214 235 253 / .14);border-radius:10px;border:3px solid transparent;background-clip:padding-box}
.ro{margin:0 12px 6px;padding:6px 10px;border-radius:8px;font-size:12.5px;color:var(--sub);background:var(--tile)}

/* 예배 순서 줄 */
.order{list-style:none;margin:0;padding:3px 0 10px}
.item{display:flex;align-items:center;gap:10px;padding:0 8px 0 12px;min-height:44px;border-top:1px solid rgb(214 235 253 / .045);cursor:pointer;font-size:14.5px;position:relative;user-select:none}
.item:first-child{border-top:0}
.item:hover{background:var(--hover)}
.item .no{color:var(--muted);font-size:13.5px;min-width:18px;text-align:right;font-variant-numeric:tabular-nums}
.item .th{position:relative;width:42px;height:24px;border-radius:4px;flex:none;background:#000 center / cover no-repeat;border:1px solid rgb(214 235 253 / .12);display:grid;place-items:center;font-size:10px;color:var(--muted);overflow:hidden}
.item .tt{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;overflow:hidden}
.item .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
.item .tsub{color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 100 auto}
.item .acts{display:none;gap:2px;flex:none}
.item:hover .acts,.item:focus-within .acts,.item.cur .acts{display:flex}
.item .acts button{width:24px;height:24px;padding:0;border-radius:6px;background:transparent;border-color:transparent;box-shadow:none;color:var(--sub);display:grid;place-items:center}
.item .acts button:hover{background:var(--hover);color:var(--text)}
.item .acts svg{width:14px;height:14px}
.item.cur{background:linear-gradient(90deg,rgb(255 214 10 / .10),rgb(255 214 10 / .03))}
.item.cur::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:rgb(255 214 10 / .8)}
.item.cur .t{font-weight:700}
.item.cur .no{color:var(--warm)}
.item .dirtyDot{margin-left:2px}
.item.drag{opacity:.35}
.item.dropBefore{box-shadow:inset 0 2px 0 rgb(214 235 253 / .6)}
.item.dropAfter{box-shadow:inset 0 -2px 0 rgb(214 235 253 / .6)}
.tedit{font:inherit;font-size:14.5px;height:28px;flex:1;min-width:0;padding:0 6px}
.empty{padding:28px 18px;text-align:center;color:var(--muted);font-size:13px;line-height:1.7}
.emptyBox{margin:14px;border:1px dashed rgb(214 235 253 / .16);border-radius:12px}
.dirtyDot{width:7px;height:7px;border-radius:50%;background:var(--warm);flex:none;display:inline-block}

/* 라이브러리 */
.rtabs{display:flex;gap:2px;margin:0 12px 8px;padding:3px;border-radius:999px;background:rgb(0 0 0 / .35);border:1px solid rgb(214 235 253 / .06);flex:none}
.rtab{flex:1;height:28px;border-radius:999px;border:0;background:none;box-shadow:none;color:var(--sub);font-weight:600}
.rtab:hover{background:var(--hover)}
.rtab.on{background:linear-gradient(104deg,rgb(253 253 253 / .10),rgb(240 240 228 / .16));color:var(--text)}
.libGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 12px 12px}
.libCell{position:relative;cursor:pointer;border-radius:var(--r-tile)}
.libCell .slide{pointer-events:none}
.libCell .cap{position:absolute;left:0;top:0;z-index:3;max-width:92%;padding:2px 8px 3px;border-radius:var(--r-tile) 0 8px 0;background:rgb(0 0 0 / .72);font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.libCell:hover .slide{border-color:rgb(214 235 253 / .32)!important}
.libRow{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13.5px;grid-column:1/-1;border:1px solid rgb(214 235 253 / .06)}
.libRow:hover{background:var(--hover)}
.libRow .k{color:var(--muted);font-size:12px}

/* 가운데: 편집 · 슬라이드 */
.seg{display:inline-flex;padding:3px;border-radius:999px;background:rgb(0 0 0 / .35);border:1px solid rgb(214 235 253 / .06);gap:2px}
.segb{height:26px;border-radius:999px;border:0;background:none;box-shadow:none;color:var(--sub);font-weight:700;font-size:14px;padding:0 16px}
.segb.on{background:linear-gradient(104deg,rgb(253 253 253 / .10),rgb(240 240 228 / .16));color:var(--text)}
.colCenter .rhead{gap:14px}
.slides{padding:0 14px 30vh}
.sg{margin-bottom:6px}
.sghead{position:sticky;top:0;z-index:4;display:flex;align-items:center;gap:9px;min-height:40px;margin:0 -14px 8px;padding:3px 12px 6px 14px;cursor:pointer;
  background:linear-gradient(180deg,rgb(16 17 18 / .98),rgb(10 11 12 / .94));box-shadow:0 1px 0 rgb(214 235 253 / .06)}
.sghead .sgno{color:var(--muted);font-size:13px;min-width:16px;font-variant-numeric:tabular-nums}
.sghead .sgtt{font-weight:700;font-size:16px;background:linear-gradient(to right bottom,#fff 30%,rgb(255 255 255 / .5));-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sghead .sgmeta{color:var(--muted);font-size:12.5px;white-space:nowrap}
.sghead button{height:22px;padding:0 9px;font-size:11.5px;border-radius:999px}
.sg.cur{background:linear-gradient(180deg,rgb(255 214 10 / .09),rgb(255 214 10 / .04));margin-inline:-14px;padding-inline:14px;box-shadow:inset 3px 0 0 rgb(255 214 10 / .8)}
.sg.cur .sghead{background:linear-gradient(180deg,rgb(40 36 14 / .98),rgb(24 22 10 / .95))}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(188px,1fr));gap:10px;padding-bottom:14px}

/* 슬라이드 칸 = 송출 화면 축소판 (앱 slideNode 와 같은 비율 · 글자 크기는 화면 높이 % → cqh) */
.slide{position:relative;aspect-ratio:16/9;background:#141517;border:1.5px solid rgb(214 235 253 / .12);border-top-color:rgb(214 235 253 / .22);border-radius:var(--r-tile);overflow:hidden;cursor:pointer;
  display:flex;align-items:center;justify-content:center;text-align:center;container-type:size;padding:3.94% 6%;user-select:none}
.slide:hover{border-color:rgb(214 235 253 / .3)}
.slide .txt{position:relative;z-index:1;line-height:1.45;white-space:pre-wrap;color:#f2f4f7;word-break:keep-all;overflow-wrap:anywhere}
.slide .num{position:absolute;left:0;top:0;z-index:2;font-size:13px;line-height:20px;min-width:22px;padding:0 7px;border-radius:0 0 8px 0;color:#c9d1dc;background:rgb(0 0 0 / .45);font-variant-numeric:tabular-nums;font-weight:600}
.slide .lbl{position:absolute;right:7px;top:5px;z-index:2;font-size:12px;color:#ffd78a}
.slide .lbl:empty{display:none}
.slide.secd{border-top:3px solid var(--sec)}
.slide.secd .lbl{padding:0 7px 1px;border-radius:999px;font-weight:600;line-height:1.4;color:color-mix(in srgb,var(--sec),#fff 38%);background:color-mix(in srgb,var(--sec) 15%,rgb(0 0 0 / .55))}
.slide.lblDown .lbl{top:auto;bottom:5px}
.slide.look .sbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
.slide.look::after{content:"";position:absolute;inset:0;z-index:0;background:rgb(0 0 0 / var(--dim,0));pointer-events:none}
.slide.boxed .txt{position:absolute;display:flex;flex-direction:column}
.slide.cur{border-color:#fdfdfd!important;box-shadow:0 0 0 1px #fdfdfd}
.slide.live{border-color:var(--onair)!important;box-shadow:0 0 0 1px var(--onair)}
.slide .fitB{position:absolute;left:6px;bottom:5px;z-index:2;font-size:11px;font-weight:700;padding:0 6px;border-radius:999px;color:#000;background:#ff9f0a}
.slide.fitOver .fitB{background:#ff453a;color:#fff}
.slide.blank{color:var(--muted);font-size:13px}
.slide.blank-black{background:#000}
.slide.memo{background:linear-gradient(180deg,#1d1b16,#141310);border-color:rgb(255 214 120 / .22);align-items:flex-start;justify-content:flex-start;padding:9% 7% 6%;cursor:default}
.slide.memo .txt{font-size:15cqh;color:#f3e6c4;text-align:left}
.slide.memo .lbl{color:#ffd78a;font-weight:700}
.slide.deck{padding:0}
.slide .deckhost{position:absolute;inset:0;container-type:size;overflow:hidden}
.slide.vid .vplay{position:absolute;inset:auto auto 8px 10px;z-index:2;font-size:12px;color:#fff;background:rgb(0 0 0 / .55);padding:2px 8px;border-radius:999px}
.slide .picB{position:absolute;left:6px;bottom:5px;z-index:2;font-size:11px;padding:0 6px;border-radius:999px;background:rgb(0 0 0 / .7);color:var(--sub)}
.slide .offB{position:absolute;right:6px;bottom:5px;z-index:2;font-size:11px;padding:0 6px;border-radius:999px;background:rgb(0 0 0 / .7);color:var(--sub)}

/* 편집 탭: 가사 | 스타일 | 미리보기 (앱 edLayout2 넓은 배치) */
.paneEdit{flex:1;min-height:0;display:flex;flex-direction:column}
.edEmpty{margin:40px auto;color:var(--muted);text-align:center}
.edMain{flex:1;min-height:0;display:flex;flex-direction:column;padding:0 14px 14px}
.edStep{display:flex;align-items:center;gap:10px;min-height:30px;margin-bottom:4px}
.edStepName{font-weight:700;font-size:15px;color:var(--sub)}
.edCols{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,35.5fr) minmax(0,35.5fr) minmax(0,29fr);gap:18px}
.edCol{min-height:0;display:flex;flex-direction:column;gap:8px}
.edCol+.edCol{border-left:1px solid rgb(214 235 253 / .07);padding-left:18px}
.edHead{display:flex;align-items:center;gap:7px;height:28px;font-weight:700;font-size:15px;flex:none}
.edHead svg{width:17px;height:17px;color:var(--sub)}
.edTitle{height:36px;font-size:15px;font-weight:700;padding:0 10px;background:transparent;border-color:transparent}
.edTitle:hover{background:var(--tile)}
.edTitle:focus{background:var(--field);border-color:rgb(214 235 253 / .38)}
.edTextWrap{position:relative;flex:1;min-height:200px;display:flex}
.edTextWrap textarea,.dbText{flex:1;resize:none;padding:12px 76px 12px 12px;font-size:15px;line-height:1.65;background:rgb(0 0 0 / .32);border-color:rgb(214 235 253 / .09);border-radius:10px}
.edSplit{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;align-items:stretch;gap:6px;width:56px}
.edSplit button{height:26px;padding:0;border-radius:10px;font-size:12px}
.edSplit .spl{font-size:11px;color:var(--muted);text-align:center;margin-top:6px}
.edWarn{font-size:12.5px;color:var(--warm);display:flex;flex-direction:column;gap:2px;flex:none}
.edWarn:empty{display:none}
.edWarn .bad{color:var(--bad)}
.pcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-content:start;overflow:auto;min-height:0}
.pcard{position:relative;cursor:pointer;border-radius:var(--r-tile)}
.pcard .slide{pointer-events:none}
.pcard .pname{position:absolute;left:6px;top:6px;z-index:3;max-width:86%;font-size:11.5px;font-weight:700;padding:1px 8px 2px;border-radius:999px;background:rgb(0 0 0 / .65);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard.on .slide{border-color:#fdfdfd!important;box-shadow:0 0 0 1px #fdfdfd}
.pcard.on .pname::before{content:"✓ "}
.pcard[aria-disabled="true"]{cursor:default;opacity:.6}
.edPrev{display:flex;flex-direction:column;gap:10px;overflow:auto;min-height:0;padding-right:4px}
.edPrev .slide{width:100%;flex:none}
.edOther{padding:18px;color:var(--sub);overflow:auto}
.edOther .grid{margin-top:14px}

/* 오른쪽: 송출 */
.onair{height:30px;border-radius:999px;padding:0 14px 0 12px;font-weight:800;letter-spacing:.04em;display:inline-flex;align-items:center;gap:7px}
.onair::before{content:"";width:7px;height:7px;border-radius:50%;background:rgb(240 246 255 / .35)}
.onair.on{background:var(--onair)!important;color:#fff;border-color:transparent}
.onair.on::before{background:#fff;animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}
.onairbox{padding:0 12px;flex:none}
.preview{position:relative;width:100%;aspect-ratio:var(--out-asp,16/9);background:#000;border-radius:6px;overflow:hidden;container-type:size;box-shadow:0 0 0 1px rgb(214 235 253 / .10),0 -1px 0 rgb(255 255 255 / .12)}
.preview .L{position:absolute;inset:0}
.preview .L video,.preview .L img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.outBtns{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 12px 4px;flex:none}
.outBtns button{height:36px;border-radius:999px;font-size:13.5px}
.outBtns button[aria-pressed="true"]{background:rgb(255 214 10 / .18);border-color:rgb(255 214 10 / .5)}
.rsub{display:flex;align-items:center;gap:8px;padding:10px 14px 6px;font-weight:700;font-size:13.5px;flex:none}
.nextSlides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:0 12px 14px}
.nextSlides .nsHead{grid-column:1/-1;font-size:12.5px;font-weight:700;color:var(--sub);margin-top:6px}
.nextSlides .slide .num{font-size:10.5px;line-height:15px;min-width:16px;padding:0 5px}
.nextSlides .slide .lbl{font-size:10px;right:4px;top:3px}

/* 한 화면 보기 (가사DB · 갤러리) */
.view1{display:grid;gap:14px;min-height:0}
#viewDb{grid-template-columns:clamp(280px,24vw,420px) minmax(0,1fr) clamp(260px,22vw,420px)}
.dbFind{padding:0 12px 8px}
.dbFind input{width:100%}
.dbRows{list-style:none;margin:0;padding:0 6px 10px}
.dbRows li{padding:9px 10px;border-radius:8px;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.dbRows li:hover{background:var(--hover)}
.dbRows li.on{background:rgb(255 214 10 / .08);box-shadow:inset 3px 0 0 rgb(255 214 10 / .8)}
.dbRows .t{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dbRows .f{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dbBody{flex:1;min-height:0;display:flex;flex-direction:column;padding:0 14px 14px}
#dbForm{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px}
#dbForm .dbText{flex:1;padding-right:12px}
.dbRow{display:flex;align-items:center;gap:8px}
.dbPrev .edPrev{padding:0 12px 12px}
.fl{font-size:13px;font-weight:600;color:var(--sub);display:block}

/* 떠 있는 것: 메뉴 · 대화상자 · 알림 (앱 무대 테마 대화상자와 같은 판) */
.kmenu,.dlg{border:1px solid rgb(214 235 253 / .10);color:var(--text);border-radius:12px;
  background:linear-gradient(90deg,rgb(255 255 255 / 0),rgb(255 255 255 / .7) 50%,rgb(255 255 255 / 0)) 50% 0 / min(300px,70%) 1px no-repeat,radial-gradient(41% 10% at 50% 0%,rgb(255 255 255 / .09),transparent),linear-gradient(180deg,rgb(18 19 20 / .97),rgb(6 7 8 / .97));
  box-shadow:0 0 0 1px rgb(214 235 253 / .06),0 30px 80px rgb(0 0 0 / .7)}
.kmenu{position:fixed;z-index:50;min-width:200px;max-width:340px;max-height:70vh;overflow:auto;padding:6px;display:flex;flex-direction:column;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.kmenu button{background:none;border:0;box-shadow:none;height:auto;min-height:32px;padding:7px 10px;text-align:left;font-weight:500;font-size:13.5px;display:flex;align-items:center;gap:8px;border-radius:7px;white-space:normal;line-height:1.3}
.kmenu button:hover,.kmenu button:focus-visible{background:var(--hover)}
.kmenu button .sub{margin-left:auto;color:var(--muted);font-size:12px;white-space:nowrap}
.kmenu button.on{font-weight:700}
.kmenu button.on::before{content:"✓";width:12px}
.kmenu button:not(.on)::before{content:"";width:12px}
.kmenu .sep{height:1px;background:rgb(214 235 253 / .08);margin:5px 4px}
.kmenu .mh{font-size:11.5px;color:var(--muted);padding:6px 10px 2px;font-weight:600}
.kmenu.noCheck button::before{display:none}
/* 예배 순서 메뉴 (앱 src/styles.css '예배 순서 메뉴 다시 (2026-10-27)' 와 같은 모양) — 맨 위 공간 · 예배 순서(줄 상자 없이 · 이름 아래 작은 줄 · ⋯) · 아래 알약 두 개 */
.kmenu.svcmenu{max-width:400px;padding:6px}
.kmenu.svcmenu:focus{outline:none}
.svcmenu .svcHead{display:flex;align-items:baseline;gap:6px;padding:8px 10px 4px;font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--muted);flex:none}
.svcmenu .svcHead .n{margin-left:auto;font-weight:500;font-variant-numeric:tabular-nums}
.svcmenu .spaceList,.svcmenu .svclist{display:flex;flex-direction:column;gap:2px}
.svcmenu .svcit .ck{width:14px;flex:none;color:var(--text);font-weight:700;text-align:center}
.svcmenu .svcrow{position:relative;display:flex;align-items:center;border-radius:10px;transition:background-color .12s ease}
.svcmenu .svcrow:hover,.svcmenu .svcrow:focus-within{background:rgb(255 255 255 / .05)}
.svcmenu .svcrow.on{background:rgb(255 255 255 / .08)}
.kmenu.svcmenu .svcrow .svcit{flex:1;min-width:0;padding:7px 6px 7px 10px;gap:8px;border-radius:10px}
.kmenu.svcmenu .svcrow .svcit:hover,.kmenu.svcmenu .svcrow .svcit:focus-visible{background:none}
.svcmenu .svcit .tx{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.svcmenu .svcit .tx .nm{font-size:13.5px;font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svcmenu .svcrow.on .tx .nm{font-weight:700}
.svcmenu .svcit .tx .when{font-size:11px;line-height:1.3;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svcmenu .svcit .tx .when:empty{display:none}
.kmenu.svcmenu .svcmore{flex:none;width:28px;height:28px;min-height:0;margin-right:6px;padding:0;justify-content:center;border-radius:8px;color:var(--sub);opacity:0;transition:opacity .12s ease,background-color .12s ease}
.svcmenu .svcrow:hover .svcmore,.svcmenu .svcrow:focus-within .svcmore,.svcmenu .svcmore[aria-expanded="true"]{opacity:1}
.kmenu.svcmenu .svcmore:hover{background:rgb(255 255 255 / .1);color:var(--text)}
.svcmenu .svcmore svg.dots{width:16px;height:16px;fill:currentColor;stroke:none}
@media (hover:none){.svcmenu .svcmore{opacity:.7}}   /* 휴대폰 · 태블릿: 마우스 올림이 없으니 늘 보이게 */
.kmenu.svcmenu .spaceIt{min-height:32px;padding:6px 10px;gap:8px;border-radius:10px;transition:background-color .12s ease}
.kmenu.svcmenu .spaceIt:hover{background:rgb(255 255 255 / .05)}
.kmenu.svcmenu .spaceIt.on{background:rgb(255 255 255 / .08)}
.svcmenu .spaceIt .sic{display:inline-flex;flex:none;color:var(--muted)}
.svcmenu .spaceIt .sic svg{width:15px;height:15px}
.svcmenu .spaceIt.on .sic{color:var(--text)}
.svcmenu .spaceIt .nm{flex:1 1 auto;min-width:0;font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svcmenu .spaceIt.on .nm{font-weight:700}
.svcmenu .spaceIt .role{flex:none;padding:1px 8px;border-radius:999px;font-size:10.5px;line-height:17px;color:var(--sub);background:rgb(255 255 255 / .07)}
/* 공간 고르기 알약 — 상단 바 인사 오른쪽 (앱 styles.css '공간 고르기 알약' 과 같은 값) · 목록은 위 .spaceIt 그대로 */
.spaceTop{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 9px 0 10px;border-radius:999px;border:1px solid var(--border);background:rgb(255 255 255 / .04);box-shadow:none;color:var(--text);font-size:13px;font-weight:600;white-space:nowrap;max-width:240px;flex:none}
.spaceTop:hover,.spaceTop[aria-expanded="true"]{background:rgb(255 255 255 / .09)}
.spaceTop .sic,.spaceTop .car{display:inline-flex;flex:none;color:var(--sub)}
.spaceTop .sic svg{width:15px;height:15px}
.spaceTop .car svg{width:13px;height:13px;stroke-width:2}
.spaceTop .nm{min-width:0;overflow:hidden;text-overflow:ellipsis}
.spaceTop .role{flex:none;padding:0 7px;border-radius:999px;font-size:10.5px;line-height:17px;font-weight:500;color:var(--sub);background:rgb(255 255 255 / .07)}
.kmenu.spacemenu{max-width:320px}
.svcmenu .svcnone{padding:10px;color:var(--muted);font-size:12.5px;line-height:1.5}
.svcmenu .svcfoot{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:2px 2px 0;flex:none}
.kmenu.svcmenu .svcfoot .svcnew{display:inline-flex;align-items:center;gap:6px;height:30px;min-height:30px;padding:0 12px;border-radius:999px;font-size:12.5px;font-weight:600;background:rgb(255 255 255 / .05)}
.kmenu.svcmenu .svcfoot .svcnew:hover{background:rgb(255 255 255 / .1)}
.svcmenu .sep{margin:6px 4px}
/* ⋯ · 우클릭 메뉴: 삭제는 선 아래 · 두 번 누르기 */
.kmenu.svcctx{min-width:150px;z-index:52}
.kmenu.svcctx button.danger{color:var(--bad)}
.kmenu.svcctx button.armed{background:rgb(255 138 141 / .12)}
.dlg{padding:0;max-width:calc(100vw - 32px);max-height:calc(100vh - 40px)}
.dlg::backdrop{background:rgb(0 0 0 / .55)}
.dlg h2{margin:0;font-size:16px;font-weight:700}
.dhead{display:flex;align-items:center;gap:8px;padding:14px 14px 10px 18px;margin:0}
.dfoot{display:flex;align-items:center;gap:8px;padding:12px 16px 16px}
.findDlg{width:860px;height:min(620px,calc(100vh - 40px))}
.findDlg[open]{display:flex;flex-direction:column}
.findBody{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;padding:0 16px}
.findL{display:flex;flex-direction:column;gap:8px;min-height:0}
.findL input{width:100%}
.findRows{list-style:none;margin:0;padding:0;overflow:auto;flex:1;min-height:0}
.findRows li{padding:8px 10px;border-radius:8px;cursor:pointer}
.findRows li.on{background:rgb(255 214 10 / .1);box-shadow:inset 3px 0 0 rgb(255 214 10 / .8)}
.findRows li .t{font-weight:600}
.findRows li .f{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.findNew{height:34px}
.findR{min-height:0;overflow:auto;border-left:1px solid rgb(214 235 253 / .07);padding-left:14px}
.findPrev{white-space:pre-wrap;font-size:13.5px;line-height:1.6;color:var(--sub)}
.findPrev b{display:block;font-size:15px;color:var(--text);margin-bottom:8px}
.findPrev .newF{display:flex;flex-direction:column;gap:8px}
.findPrev .newF textarea{height:300px;resize:vertical;padding:10px;font-size:14px;line-height:1.6}
.contiDlg{width:min(1060px,calc(100vw - 32px));height:min(720px,calc(100vh - 40px))}
.contiDlg[open]{display:flex;flex-direction:column}
.ctTop{display:flex;align-items:center;gap:10px;padding:0 18px 10px}
.ctTop input{flex:1;max-width:420px}
.ctBody{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:14px;padding:0 16px}
.ctL,.ctR{display:flex;flex-direction:column;gap:6px;min-height:0}
.ctL textarea{flex:1;resize:none;padding:10px;font-size:14px;line-height:1.6}
.ctRows{list-style:none;margin:0;padding:0;overflow:auto;flex:1;display:flex;flex-direction:column;gap:6px}
.ctRows li{display:grid;grid-template-columns:22px minmax(0,1fr) minmax(0,1.1fr) 62px;gap:8px;align-items:center;padding:6px 8px;border-radius:8px;background:var(--tile);border-left:3px solid transparent}
.ctRows li.st-found{border-left-color:var(--good)}.ctRows li.st-near{border-left-color:var(--warm)}.ctRows li.st-new{border-left-color:#64d2ff}.ctRows li.st-skip{opacity:.55}
.ctRows .no{color:var(--muted);font-size:12px;text-align:right}
.ctRows .src{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.ctRows select{width:100%;height:30px;font-size:13px}
.ctRows .st{font-size:12px;color:var(--sub);text-align:center}
.ctRows .ex{grid-column:2/-1;display:flex;gap:6px;flex-wrap:wrap}
.ctRows .ex:empty{display:none}
.tag{font-size:11.5px;padding:1px 8px;border-radius:999px;background:rgb(214 235 253 / .08);color:var(--sub)}
.formDlg{width:440px}
.formDlg>*:not(.dhead):not(.dfoot){margin-left:18px;margin-right:18px}
.formDlg input{width:calc(100% - 36px)}
.fmChips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.fmChips button{height:26px;border-radius:999px;font-size:12.5px;border-top:3px solid var(--sec,transparent)}
.fmOut{min-height:44px;margin-top:8px;font-size:13px;color:var(--sub);line-height:1.6}
.fmOut .bad{color:var(--bad)}
.askDlg{width:380px;padding:18px 18px 0}
.askDlg .dfoot{padding:14px 0 16px}
.askMsg{color:var(--sub);margin:8px 0 0;white-space:pre-line}
.askDlg input{width:100%;margin-top:12px}
.toasts{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:12px;padding:10px 12px 10px 16px;border-radius:12px;font-size:13.5px;max-width:min(560px,calc(100vw - 32px));
  border:1px solid rgb(214 235 253 / .12);background:linear-gradient(180deg,rgb(24 25 27 / .97),rgb(10 11 12 / .97));box-shadow:0 18px 50px rgb(0 0 0 / .6),inset 3px 0 0 var(--tc,rgb(214 235 253 / .4))}
.toast.err{--tc:#e5484d}.toast.ok{--tc:var(--good)}
.toast button{height:26px;font-size:12.5px}

/* 로그인 */
.gate{position:fixed;inset:0;display:grid;place-items:center;padding:16px;overflow:auto}
.gcard{width:min(400px,100%);border:1px solid var(--border);border-radius:var(--r);padding:30px 28px 22px;position:relative;isolation:isolate;background:var(--panel)}
.gcard::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--beam)}
.gbrand{display:flex;align-items:baseline;gap:10px}
.gbrand .brandSub{font-size:22px}
.gsub{color:var(--sub);font-size:13px}
.gtitle{font-size:20px;margin:18px 0 14px;font-weight:700}
.gform{display:flex;flex-direction:column;gap:8px}
.gform input{height:44px;font-size:15px;width:100%}
.pwBox{position:relative}.pwBox input{padding-right:64px}
.eye{position:absolute;right:6px;top:6px;height:32px;background:none!important;border:0;box-shadow:none;color:var(--sub);font-weight:600}
.ferr{color:var(--bad);font-size:13px;margin:0}.ferr:empty{display:none}
.lgWho{display:flex;align-items:center;gap:8px;justify-content:space-between;padding:8px 10px;border-radius:8px;background:var(--tile);margin-bottom:4px;word-break:break-all}
.gmsg{color:var(--sub);line-height:1.7;margin:0 0 6px}
/* 로그인 아래 두 줄 (Apple 계정 화면처럼 · 2026-10-27 사용자) — 링크는 무대 강조색(흰색) · 설명은 회색 · 새 탭으로 가는 링크만 ↗ */
.gfoot{margin:22px 0 0;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;font-size:14px;color:var(--sub);line-height:1.5}
.gfoot p{margin:0}
.glink{all:unset;cursor:pointer;color:var(--text);font-weight:600;border-radius:4px;display:inline-flex;align-items:center;gap:3px}
.glink:hover{text-decoration:underline;text-underline-offset:3px}
.glink:focus-visible,.gquiet:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.glink svg{width:11px;height:11px;stroke-width:1.7;margin-top:1px}
.gquiet{all:unset;cursor:pointer;margin-top:6px;font-size:12.5px;color:var(--muted);border-radius:4px}
.gquiet:hover{color:var(--sub);text-decoration:underline;text-underline-offset:3px}
.rsRow{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:2px}
.rsRow button.link{color:var(--sub);font-weight:500}
.rsRow button.link:disabled{color:var(--disabled);cursor:default;text-decoration:none}
.codeIn{letter-spacing:.3em;font-variant-numeric:tabular-nums}
/* 비밀번호 안전 정도 막대 (홈페이지 가입과 같은 모양 · site/pwrule.js attach) */
.pwMeter{display:flex;flex-direction:column;gap:5px;margin-top:2px}
.pwBar{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.pwBar i{height:4px;border-radius:2px;background:rgb(255 255 255 / .10);transition:background .18s}
.pwMeter[data-level="0"] .pwBar i.on{background:linear-gradient(90deg,rgb(229 72 77 / .55),#e5484d)}
.pwMeter[data-level="1"] .pwBar i.on{background:linear-gradient(90deg,rgb(245 165 36 / .55),#f5a524)}
.pwMeter[data-level="2"] .pwBar i.on,.pwMeter[data-level="3"] .pwBar i.on,.pwMeter[data-level="4"] .pwBar i.on{background:linear-gradient(90deg,rgb(48 164 108 / .55),#30a46c)}
.pwTxt{font-size:12.5px;color:rgb(240 246 255 / .62)}
.pwMeter[data-level="0"] .pwTxt{color:#ff8a8d}

/* 갤러리 */
.galView{grid-template-columns:clamp(200px,16vw,280px) minmax(0,1fr)}
.galBoards{list-style:none;margin:0;padding:0 8px 10px}
.galBoards button{width:100%;justify-content:space-between;display:flex;align-items:center;background:none;border:0;box-shadow:none;height:36px;font-weight:500;font-size:13.5px}
.galBoards button:hover{background:var(--hover)}
.galBoards button.on{font-weight:700;background:rgb(255 214 10 / .08);box-shadow:inset 3px 0 0 rgb(255 214 10 / .8)}
.galBoards .n{color:var(--muted);font-size:12px;font-weight:400}
.galMain .scroll{padding:0 18px 24px}
.gTools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 18px 10px}
.gTools input[type=search]{width:220px}
.posts{list-style:none;margin:0;padding:0}
.posts li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 4px;border-top:1px solid rgb(214 235 253 / .06);cursor:pointer}
.posts li:hover{background:var(--hover)}
.posts .pt{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.posts .pv{grid-column:1;color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.posts .pm{grid-row:1/3;grid-column:2;color:var(--muted);font-size:12px;text-align:right;white-space:nowrap}
.bdg{display:inline-block;font-size:11px;padding:0 7px;border-radius:999px;margin-right:6px;background:rgb(214 235 253 / .08);color:var(--sub);vertical-align:1px}
.bdg.notice{background:rgb(255 214 10 / .16);color:var(--warm)}
.bdg.best{background:rgb(61 214 140 / .14);color:var(--good)}
.pager{display:flex;gap:6px;justify-content:center;padding:14px}
.post h1{font-size:20px;margin:6px 0 4px;letter-spacing:-.01em}
.post .meta{color:var(--muted);font-size:12.5px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.post .body{white-space:pre-wrap;line-height:1.75;margin:18px 0;font-size:14.5px;word-break:keep-all;overflow-wrap:anywhere}
.pimgs{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.pimgs img{max-width:min(320px,100%);max-height:240px;border-radius:8px;cursor:zoom-in;border:1px solid var(--border)}
.atts{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.att{padding:8px 12px;border-radius:8px;background:var(--tile);font-size:13px;color:var(--sub)}
.reacts{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 18px}
.reacts button.on{background:rgb(255 214 10 / .16);border-color:rgb(255 214 10 / .4)}
.reacts .n{margin-left:6px;color:var(--muted);font-weight:500}
.cmts{border-top:1px solid var(--border);padding-top:10px}
.cmt{padding:10px 2px;border-bottom:1px solid rgb(214 235 253 / .05)}
.cmt.accepted{background:rgb(61 214 140 / .06);border-radius:8px;padding:10px}
.cmt .cm{color:var(--muted);font-size:12px;display:flex;gap:8px;align-items:center}
.cmt .cb{white-space:pre-wrap;margin-top:4px;line-height:1.6}
.cform{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.cform textarea,.wform textarea{min-height:90px;resize:vertical;padding:10px;line-height:1.6}
.wform{display:flex;flex-direction:column;gap:10px;max-width:760px}
.wform input[type=text]{width:100%}
.wform textarea{min-height:240px}
.wpics{display:flex;gap:8px;flex-wrap:wrap}
.wpics figure{margin:0;position:relative}
.wpics img{width:110px;height:80px;object-fit:cover;border-radius:8px;border:1px solid var(--border)}
.wpics button{position:absolute;right:4px;top:4px;width:22px;height:22px;padding:0;border-radius:50%}
.imgview{padding:0;background:#000;border:0;max-width:96vw;max-height:94vh}
.imgview img{display:block;max-width:96vw;max-height:94vh}

/* 좁은 화면 (휴대폰 · 작은 창) — 패널을 위아래로 */
@media (max-width:1100px){
  body{overflow:auto}
  .app{height:auto;min-height:100%;grid-template-rows:auto auto}
  header{flex-wrap:wrap;padding:8px 0}
  .main,.view1,#viewDb,.galView{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .colOrder,.colLib,.colCenter,.colRight{grid-column:1;grid-row:auto}
  .colOrder{max-height:60vh}.colLib{max-height:46vh}.colCenter{min-height:80vh}.colRight{min-height:60vh}
  .edCols{grid-template-columns:minmax(0,1fr)}
  .edCol+.edCol{border-left:0;padding-left:0}
  .edTextWrap{min-height:320px}
  .findBody,.ctBody{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}