/* 예배 자막 화면 스타일 — app.css 에서 떼어냈다.
     전부 #subtitleView 아래로 묶여 있고 공용 변수를 쓰지 않아 혼자 쓸 수 있다. */
  #subtitleView{max-width:1600px;margin:0;padding:6px 4px 48px}
  #subtitleView .st-card{background:#fff;border:1px solid #eadfce;border-radius:16px;padding:16px 18px;margin-bottom:14px;box-shadow:0 2px 10px rgba(0,0,0,.04)}
  #subtitleView .st-card h3{margin:0 0 12px;font-size:15px;color:#0a5d54;display:flex;align-items:center;gap:7px}
  #subtitleView .st-card h3::before{content:"";width:8px;height:8px;border-radius:3px;background:#0a5d54}
  /* 맨 위 '주보 불러오기' 카드 — 설명 없이 버튼 하나, 결과는 아래 한 줄로 확인 */
  #subtitleView .st-blogcard{background:linear-gradient(180deg,#f2fbf8,#fff);border-color:#bfe0d7;padding:13px 14px}
  #subtitleView .st-blogcard h3{margin:0 0 10px}
  /* 제목 줄은 카드 위 가로 전체, 그 아래 왼쪽 정사각 버튼 + 오른쪽 정보(세로 중앙 정렬) */
  #subtitleView .st-ok-head{display:flex;align-items:center;gap:7px;padding-bottom:8px;margin-bottom:10px;border-bottom:1px solid #e3ede9}
  #subtitleView .st-ok-head:empty{display:none}
  #subtitleView .st-ok-badge{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
    width:19px;height:19px;border-radius:50%;background:#0a5d54;color:#fff;font-size:11px;font-weight:800}
  #subtitleView .st-ok-head a,#subtitleView .st-ok-head b{font-size:13.5px;font-weight:800;color:#0a5d54;
    text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #subtitleView .st-ok-head a{border-bottom:1px solid #a8ccc3}
  #subtitleView .st-ok-head a:hover{border-bottom-color:#0a5d54}
  #subtitleView .st-getwrap{display:flex;gap:13px;align-items:center}
  #subtitleView .st-getleft{flex:0 0 112px;display:flex;flex-direction:column;gap:7px}
  #subtitleView button.st-getbtn{width:112px;height:112px;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:7px;font-family:inherit;font-weight:800;font-size:13.5px;
    line-height:1.35;color:#fff;background:#0a5d54;border:0;border-radius:12px;cursor:pointer;
    transition:background .15s,transform .06s}
  #subtitleView button.st-getbtn:hover{background:#0d7268}
  #subtitleView button.st-getbtn:active{transform:translateY(1px)}
  #subtitleView button.st-getbtn:disabled{opacity:.55;cursor:default}
  #subtitleView button.st-getbtn svg{width:26px;height:26px;fill:currentColor}
  #subtitleView button.st-linkbtn{width:112px;height:34px;font-family:inherit;font-size:13px;font-weight:700;
    color:#5c6f6a;background:#fff;border:1px solid #cfe3dd;border-radius:10px;cursor:pointer;
    transition:color .15s,border-color .15s,background .15s}
  #subtitleView button.st-linkbtn:hover{color:#0a5d54;border-color:#0a5d54}
  #subtitleView button.st-linkbtn.on{color:#0a5d54;border-color:#0a5d54;background:#eef8f5}
  #subtitleView .st-getinfo{flex:1;min-width:0}
  #subtitleView .st-urlrow{margin-top:9px}
  /* 결과 — 진행/실패를 색으로 구분 */
  #subtitleView .st-idle{font-size:12.5px;color:#9a9384}
  #subtitleView .st-busy{font-size:12.5px;color:#7b7365}
  #subtitleView .st-err{font-size:12.5px;color:#a8443c;background:#fbeeec;border:1px solid #f0c9c4;border-radius:9px;padding:8px 10px}
  #subtitleView table.st-oktbl{width:100%;table-layout:fixed;font-size:12.5px;margin-top:5px;border-collapse:collapse}
  #subtitleView table.st-oktbl th{width:52px;text-align:left;font-weight:400;color:#9a9384;padding:2.5px 0;vertical-align:top}
  #subtitleView table.st-oktbl td{padding:2.5px 0;color:#3a3428;word-break:keep-all}
  #subtitleView table.st-oktbl td.none{color:#bdb7ab}
  #subtitleView .st-warnline{margin-top:7px;font-size:12px;color:#a8863c}
  #subtitleView label{display:block;font-size:12.5px;color:#8a8172;margin:10px 0 4px;font-weight:700}
  #subtitleView input[type=text],#subtitleView input[type=date],#subtitleView textarea{width:100%;box-sizing:border-box;border:1px solid #ddd4c7;border-radius:10px;padding:9px 11px;font-size:14px;font-family:inherit;background:#fcfaf6;color:#3a3428}
  #subtitleView input:focus,#subtitleView textarea:focus{outline:none;border-color:#0a5d54;background:#fff}
  #subtitleView textarea{resize:vertical;min-height:72px}
  #subtitleView .st-row{display:flex;gap:12px;flex-wrap:wrap}
  #subtitleView .st-row>div{flex:1;min-width:170px}
  #subtitleView .st-song{border:1px solid #eadfce;border-radius:12px;padding:12px 14px;margin-bottom:10px;background:#fbf7f0}
  #subtitleView .st-song .st-shead{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
  #subtitleView .st-song .st-shead b{font-size:12.5px;color:#8a8172}
  #subtitleView button.st-btn{font-family:inherit;cursor:pointer;border-radius:10px;border:1px solid #ddd4c7;background:#fff;padding:8px 13px;font-size:13px;color:#3a3428}
  #subtitleView button.st-btn:hover{background:#f6f2ea}
  #subtitleView button.st-add{width:100%;border-style:dashed;color:#8a8172;background:#fbf7f0}
  #subtitleView button.st-small{padding:6px 11px;font-size:12px}
  #subtitleView button.st-primary{background:#0a5d54;color:#fff;border:2px solid #0a5d54;box-sizing:border-box;font-weight:800;font-size:15px;padding:13px 26px;border-radius:12px;cursor:pointer}
  #subtitleView button.st-primary:disabled{opacity:.5;cursor:default}
  #subtitleView .st-hint{font-size:12px;color:#a89f8e;margin-top:6px}
  #subtitleView .st-prev{margin-top:8px;font-size:13px;background:#f6f2ea;border:1px solid #eadfce;border-radius:10px;padding:9px 11px;white-space:pre-wrap;display:none;color:#4a4436;line-height:1.6}
  #subtitleView .st-prev.on{display:block}
  #subtitleView .st-vn{color:#c07a00;font-weight:800}
  #subtitleView .st-foot{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:8px}
  #subtitleView .st-status{font-size:13px;color:#8a8172;flex-basis:100%;text-align:center}
  #subtitleView .st-qr{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;box-sizing:border-box;font-weight:800;font-size:15px;padding:13px 26px;border-radius:12px;border:2px solid #0a5d54;background:#fff;color:#0a5d54;cursor:pointer}
  #subtitleView .st-qr:hover{background:#eaf4f1}
  /* 주보 주소 복사 → QR 주소변경. 한 동작이라 늘 붙여 둔다 */
  #subtitleView .st-qrpair{display:flex;align-items:center;gap:12px}
  /* 주보 주소 복사 — 눌러서 복사한 뒤 옆의 QR 페이지에서 바로 붙여넣는다 */
  #subtitleView button.st-copyurl{display:inline-flex;align-items:center;justify-content:center;gap:7px;box-sizing:border-box;
    font-weight:800;font-size:15px;padding:13px 26px;border-radius:12px;border:2px solid #0a5d54;background:#fff;color:#0a5d54;
    font-family:inherit;cursor:pointer;white-space:nowrap}
  #subtitleView button.st-copyurl:hover{background:#eaf4f1}
  #subtitleView button.st-copyurl:disabled{opacity:.45;cursor:default;background:#fff}
  #subtitleView button.st-copyurl.done{background:#0a5d54;color:#fff}
  #subtitleView button.st-copyurl.fail{border-color:#b1483f;color:#b1483f;background:#fff}
  /* 주보 QR 고정 주소 카드 — 한 번 맞춰 두면 매주 손댈 일이 없다 */
  #subtitleView .st-qrcard{margin-top:14px;background:linear-gradient(180deg,#fbf8f2,#fff)}
  #subtitleView .st-qrfix{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
  #subtitleView .st-qrfix code{flex:1 1 260px;min-width:0;overflow-x:auto;white-space:nowrap;
    font-family:ui-monospace,Consolas,monospace;font-size:12.5px;color:#0a5d54;font-weight:700;
    background:#eef8f5;border:1px solid #bfe0d7;border-radius:9px;padding:9px 11px}
  #subtitleView .st-qrfix button.done{color:#0a5d54;border-color:#0a5d54;background:#eef8f5}
  #subtitleView .st-qrfix button.fail{color:#b1483f;border-color:#b1483f}
  #subtitleView .st-qrnow{display:none;margin-top:9px;font-size:12.5px;color:#4a4436;
    background:#f6f2ea;border:1px solid #eadfce;border-radius:9px;padding:8px 11px;line-height:1.5}
  #subtitleView .st-qrnow.on{display:block}
  #subtitleView .st-qrnow a{color:#0a5d54;font-weight:700}
  #subtitleView .st-deskonly{display:none;text-align:center;padding:48px 20px;color:#8a8172;font-size:15px;line-height:1.7}
  #subtitleView .st-search{display:flex;gap:7px;margin-bottom:7px}
  #subtitleView .st-search input{flex:1;min-width:0}
  #subtitleView .st-search button{white-space:nowrap}
  #subtitleView .st-res{display:none;margin-bottom:7px;border:1px solid #eadfce;border-radius:10px;overflow:hidden;background:#fff;font-size:13px;color:#4a4436}
  #subtitleView .st-res.on{display:block;padding:0}
  #subtitleView .st-res:not(:empty){padding:0}
  #subtitleView .st-res-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px 6px 12px;background:#faf6ee;border-bottom:1px solid #eadfce;font-size:12px;color:#8a8172;font-weight:700}
  #subtitleView .st-res-bar button{padding:4px 10px;font-size:12px}
  #subtitleView .st-hit{padding:9px 12px;cursor:pointer;border-top:1px solid #eadfce}
  #subtitleView .st-hit:first-child{border-top:none}
  #subtitleView .st-hit:hover{background:#f4efe6}
  #subtitleView .st-hit b{color:#c07a00;margin-right:4px}
  #subtitleView .st-hit-l{display:block;color:#8a8172;font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #subtitleView .st-ccm-note{padding:7px 12px;font-size:11px;color:#8a8172;background:rgba(192,122,0,.08);border-top:1px solid #eadfce}
  #subtitleView textarea.st-l{overflow-y:hidden;resize:none;min-height:44px}
  #subtitleView .st-lybar{display:flex;align-items:center;gap:10px;margin-top:7px;flex-wrap:wrap}
  #subtitleView .st-lybar .st-hint{margin-top:0}
  /* 닫는 찬양(찬송가) 절-후렴 반복 배열 */
  #subtitleView .st-rfbar{display:flex;align-items:center;gap:8px;margin-top:7px;flex-wrap:wrap;font-size:12.5px;color:#8a8172;font-weight:700}
  #subtitleView .st-rfbar select{font-family:inherit;font-size:12.5px;padding:5px 8px;border:1px solid #ddd4c7;border-radius:9px;background:#fcfaf6;color:#3a3428;max-width:260px}
  #subtitleView .st-rfbar .st-hint{margin-top:0;font-weight:400}
  /* 찬양 가사 상하 위치 — ▲▼ 단추로 한 칸씩(슬라이더는 정확히 누르기 어렵다) */
  #subtitleView .st-shiftbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  #subtitleView button.st-shift-btn{flex:0 0 auto;padding:10px 17px;font-size:14px;font-weight:700;line-height:1.2}
  #subtitleView button.st-shift-btn:disabled{opacity:.35;cursor:default;background:#fff}
  #subtitleView .st-shift-val{flex:0 0 92px;text-align:center;font-size:13px;font-weight:800;color:#a89f8e}
  #subtitleView .st-shift-val.on{color:#0a5d54}
  #subtitleView .st-shift-reset{margin-left:6px}
  #subtitleView .st-slides{display:none;margin-top:10px}
  #subtitleView .st-slides.on{display:block}
  #subtitleView .st-slides-h{font-size:12.5px;color:#8a8172;margin-bottom:8px}
  #subtitleView .st-slides-h b{color:#0a5d54}
  #subtitleView .st-slides-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
  #subtitleView .st-slide{position:relative;border:1px solid #eadfce;border-radius:10px;overflow:hidden;background:#fff}
  #subtitleView .st-slide.bad{border-color:#e0a9a2}
  #subtitleView .st-slide-n{position:absolute;top:6px;left:8px;z-index:2;font-size:11px;font-weight:700;color:#fff;background:rgba(0,0,0,.45);border-radius:20px;padding:1px 8px}
  #subtitleView .st-slide-scr{aspect-ratio:16/9;container-type:inline-size;display:flex;align-items:center;justify-content:center;padding:10px 12px;background:linear-gradient(135deg,#2d2720,#473e33);text-align:center}
  #subtitleView .st-slide-body{width:100%}
  #subtitleView .stc-line{color:#fff;font-weight:700;font-size:15px;line-height:1.35;text-shadow:0 1px 3px rgba(0,0,0,.5);word-break:keep-all}
  #subtitleView .stc-line.cont{color:#ffd9d2;font-weight:600;font-size:13.5px}
  #subtitleView .st-slide.bad .st-slide-n{background:#c0392b}
  #subtitleView .st-slide-warn{padding:6px 9px;font-size:11px;color:#c0392b;background:rgba(192,57,43,.07);border-top:1px solid #f0d7d2;line-height:1.4}
  /* 2단 작업공간: 왼쪽 편집 폼 / 오른쪽 실시간 전체 미리보기 */
  #subtitleView .st-body{display:flex;gap:20px;align-items:flex-start}
  #subtitleView .st-form-col{flex:1 1 560px;min-width:0;max-width:660px}
  #subtitleView .st-deck{flex:1 1 460px;min-width:340px;position:sticky;top:12px;align-self:flex-start;
    max-height:calc(100vh - 40px);display:flex;flex-direction:column;
    background:#fff;border:1px solid #eadfce;border-radius:16px;box-shadow:0 2px 10px rgba(0,0,0,.04);overflow:hidden}
  #subtitleView .st-deck-h{flex:0 0 auto;padding:13px 16px;border-bottom:1px solid #f0e7d8;display:flex;align-items:center;justify-content:space-between;gap:10px}
  #subtitleView .st-deck-h b{font-size:14px;color:#0a5d54}
  #subtitleView .st-deck-count{font-size:12px;font-weight:800;color:#0a5d54;background:#e7f2f0;border-radius:999px;padding:3px 11px;white-space:nowrap}
  /* 스크롤 래퍼(높이 제한) + 그 안의 격자(내용대로 커짐) — 분리해야 카드가 눌리지 않고 16:9 유지 */
  #subtitleView .st-deck-body{overflow-y:auto;padding:14px 16px 18px}
  #subtitleView .st-deck-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(164px,1fr));gap:11px;align-content:start}
  #subtitleView .st-deck-empty{grid-column:1/-1;color:#a89f8e;font-size:13px;text-align:center;padding:44px 12px;line-height:1.6}
  #subtitleView .st-deck-grp{grid-column:1/-1;font-size:12px;font-weight:800;color:#0a5d54;letter-spacing:.3px;margin:8px 0 -3px}
  /* 카드는 항상 16:9 고정(행 압축 방지) */
  #subtitleView .st-deck-grid .st-slide{align-self:start}
  /* 글자 크기를 카드 폭(cqw)에 비례시켜 모든 슬라이드가 동일 비율의 디자인이 되게 함 */
  #subtitleView .st-deck-body .st-slide-scr{padding:2.5% 3.5%;overflow:hidden;background:#15120e;background-size:cover;background-position:center}
  #subtitleView .st-deck-body .st-slide-n{font-size:10px;padding:1px 6px;top:4px;left:5px;border-radius:20px}
  #subtitleView .st-deck-body .stc-line{font-size:4.7cqw;line-height:1.3}
  #subtitleView .st-deck-body .stc-line.cont{font-size:4.1cqw}
  /* 조금 넘쳐서 이 장만 글자를 줄인 경우 실제 크기를 표시 */
  #subtitleView .stc-szmark{position:absolute;bottom:3px;right:5px;font-size:9px;color:rgba(255,255,255,.55);letter-spacing:.3px}
  /* 실제 템플릿에서 추출한 슬라이드 배경 + 글자 가독성용 어둡게 오버레이 */
  #subtitleView .st-slide-scr.sc-black{background:#000}
  #subtitleView .st-slide-scr.sc-cover{background-image:linear-gradient(rgba(10,15,30,.10),rgba(10,15,30,.60)),url(/tpl/cover.jpg)}
  #subtitleView .st-slide-scr.sc-sermon{background-image:linear-gradient(rgba(0,0,0,.30),rgba(0,0,0,.44)),url(/tpl/sermon.jpg)}
  #subtitleView .st-slide-scr.sc-ad{background-image:linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.42)),url(/tpl/ad.jpg)}
  #subtitleView .st-slide-scr.sc-closing{background-image:linear-gradient(rgba(0,0,0,.26),rgba(0,0,0,.46)),url(/tpl/closing.jpg)}
  /* 찬양 가사 — 실제 PPT 처럼 글 상자를 화면 높이의 정해진 자리에 놓는다.
     --stc-y = 카드 가운데에서 옮길 거리(cqw). 카드가 16:9 라 화면 높이 1% = 0.5625cqw.
     모서리 표시(pt)는 이 상자 밖에 두므로 함께 움직이지 않는다. */
  #subtitleView .st-slide-scr.sc-lyric .st-slide-body{transform:translateY(var(--stc-y,-15.44cqw))}
  #subtitleView .st-slide-scr.sc-top{align-items:flex-start}
  #subtitleView .st-slide-scr.sc-bottom{align-items:flex-end}
  #subtitleView .st-slide-scr.sc-left{justify-content:flex-start}
  #subtitleView .st-slide-scr.sc-left .st-slide-body{text-align:left}
  #subtitleView .stc-title{color:#ffe14d;font-weight:800;font-size:7cqw;line-height:1.15;text-shadow:0 1px 3px rgba(0,0,0,.85);word-break:keep-all}
  #subtitleView .stc-special{color:#ffe0a3;font-size:3cqw;margin-bottom:1.5cqw;text-shadow:0 1px 2px rgba(0,0,0,.85)}
  #subtitleView .stc-datebig{color:#fff;font-weight:800;font-size:6.2cqw;text-shadow:0 1px 3px rgba(0,0,0,.9)}
  #subtitleView .stc-motto{color:#f6f4f2;font-size:2.4cqw;margin-top:2cqw;letter-spacing:.5px;text-shadow:0 1px 2px rgba(0,0,0,.85)}
  #subtitleView .stc-ref{color:#f8f7f5;font-size:3.4cqw;margin-top:1.5cqw;text-shadow:0 1px 2px rgba(0,0,0,.85)}
  #subtitleView .stc-pastor{color:#ece9e5;font-size:3cqw;margin-top:2cqw;text-shadow:0 1px 2px rgba(0,0,0,.85)}
  #subtitleView .stc-header{color:#ffcf70;font-weight:800;font-size:3.7cqw;line-height:1.2;margin-bottom:1.5cqw;text-shadow:0 1px 2px rgba(0,0,0,.85)}
  #subtitleView .stc-note{color:#dad4cd;font-size:3cqw;margin-top:1.5cqw;line-height:1.3;text-shadow:0 1px 2px rgba(0,0,0,.8)}
  #subtitleView .stc-body{color:#fff;font-size:4.2cqw;line-height:1.35;text-shadow:0 1px 2px rgba(0,0,0,.9)}
  #subtitleView .stc-fixed{color:#f6f4f2;font-size:3.4cqw;letter-spacing:.3px;text-shadow:0 1px 3px rgba(0,0,0,.9)}
  /* 성경 절 슬라이드(설교 본문·인용) — 모든 절 슬라이드가 카드 크기에 비례한 동일 디자인 */
  #subtitleView .stc-versemark{color:#ffc000;font-weight:800;font-size:4.3cqw;line-height:1.22;text-shadow:0 1px 2px rgba(0,0,0,.9)}
  #subtitleView .stc-versetext{color:#fff;font-size:4.1cqw;line-height:1.24;text-shadow:0 1px 2px rgba(0,0,0,.9)}
  #subtitleView .stc-versetext.mk{display:inline}
  #subtitleView .stc-verserow{margin-top:0.5cqw}
  #subtitleView .stc-amen{color:#fff;font-style:italic;font-weight:800;font-size:4.1cqw;margin-top:6cqw;text-shadow:0 1px 2px rgba(0,0,0,.9)}
  /* 전환 슬라이드: 실제 배경(검은 화면 / 기도손 사진) */
  #subtitleView .st-trans.blk .st-slide-scr{background:#000}
  #subtitleView .st-trans.pr .st-slide-scr{background-image:linear-gradient(rgba(0,0,0,.14),rgba(0,0,0,.3)),url(/tpl/prayer.jpg)}
  #subtitleView .stc-translabel{font-size:3cqw;color:rgba(255,255,255,.72);text-shadow:0 1px 2px rgba(0,0,0,.85)}
  /* 넘침 경고: 빨간 테두리 + 모서리 ⚠ (높이 늘리지 않음, 상세는 마우스오버 툴팁) */
  #subtitleView .st-deck-body .st-slide.bad{border-color:#e0a9a2}
  #subtitleView .st-warnmark{position:absolute;top:3px;right:4px;z-index:2;font-size:9px;background:rgba(192,57,43,.9);color:#fff;border-radius:8px;padding:0 4px;line-height:1.5}
  @media(max-width:1180px){ #subtitleView .st-body{flex-direction:column} #subtitleView .st-form-col{max-width:none;flex:1 1 auto;width:100%} #subtitleView .st-deck{position:static;max-height:none;width:100%;flex:1 1 auto} #subtitleView .st-deck-body{max-height:72vh} }
  /* ===== 모바일(≤860px) ===== 한 칸으로 쌓고, 손가락에 맞게 키우고, 미리보기는 접어 둔다 */
  @media(max-width:860px){
    #subtitleView{padding:6px 10px 90px}
    #subtitleView .st-card{padding:12px 12px;border-radius:14px;margin-bottom:11px}
    #subtitleView .st-row{gap:9px}
    #subtitleView .st-row>div{min-width:0;flex:1 1 100%}          /* 한 줄에 하나씩(좁은 화면에서 찌그러짐 방지) */
    #subtitleView input[type=text],#subtitleView input[type=date],#subtitleView textarea{font-size:16px;padding:11px 12px}  /* 16px: iOS 자동 확대 방지 */
    #subtitleView button.st-btn{padding:10px 14px;font-size:14px}
    #subtitleView button.st-primary{width:100%;font-size:16px;padding:15px 20px}
    /* 주보 불러오기: 정사각 버튼을 가로로 눕혀 폭을 아끼고, 표는 아래로 */
    #subtitleView .st-getwrap{flex-direction:column;align-items:stretch;gap:10px}
    #subtitleView .st-getleft{flex:1 1 auto;flex-direction:row;gap:8px}
    #subtitleView button.st-getbtn{flex:1;width:auto;height:52px;flex-direction:row;gap:9px;font-size:15px}
    #subtitleView button.st-getbtn span br{display:none}
    #subtitleView button.st-getbtn svg{width:20px;height:20px}
    #subtitleView button.st-linkbtn{width:84px;height:52px;flex:0 0 84px}
    #subtitleView table.st-oktbl th{width:46px}
    /* 찬양 카드 */
    #subtitleView .st-song{padding:11px 11px}
    #subtitleView .st-search{flex-direction:column;gap:7px}
    #subtitleView .st-search button{width:100%}
    #subtitleView .st-res{max-height:46vh}
    #subtitleView .st-rfbar select{max-width:100%;flex:1 1 auto}
    /* ▲ 위로 [값] ▼ 아래로 가 한 줄, '기본으로'가 그 아래 한 줄 */
    #subtitleView button.st-shift-btn{flex:1 1 0;padding:13px 6px}
    #subtitleView .st-shift-val{flex:0 0 84px}
    #subtitleView .st-shift-reset{flex:1 1 100%;margin-left:0}
    /* 미리보기: 기본은 접어 두고 버튼으로 펼침(입력 화면이 길어지지 않게) */
    #subtitleView .st-deck{border-radius:14px}
    #subtitleView .st-deck-body{max-height:none}
    #subtitleView .st-deck.folded .st-deck-body{display:none}
    #subtitleView .st-deck-h{cursor:pointer;user-select:none}
    #subtitleView .st-deck-h::after{content:"접기 ▲";font-size:12px;font-weight:700;color:#8a8172;flex:0 0 auto}
    #subtitleView .st-deck.folded .st-deck-h::after{content:"펼치기 ▼"}
    #subtitleView .st-deck-grid{grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:9px}
    #subtitleView .st-foot{flex-direction:column;align-items:stretch;gap:9px}
    /* 좁은 화면: QR 버튼 글자가 두 줄로 접혀 높이가 어긋난다 → 세로로 쌓는다 */
    #subtitleView .st-qrpair{flex-direction:column;align-items:stretch;gap:9px}
    #subtitleView .st-qrpair>*{width:100%;font-size:15px;padding:13px 16px}
  }
  @media(max-width:420px){
    #subtitleView .st-deck-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    #subtitleView button.st-linkbtn{width:72px;flex:0 0 72px;font-size:12px}
  }