/*
 * 예배 순서의 말씀 항목 — 넣기·고치기 창과 목록에서의 모습.
 *
 * project_remote.css가 300줄 한계에 닿아 말씀에 딸린 것만 여기 모았다.
 * 색과 변수는 .ccm-remote가 정의한 것을 그대로 쓴다.
 */

/* ── 순서 목록 머리(+ 메뉴가 들어오면서 한 줄에 둘이 된다) ────────────────── */
.ccm-remote .railhead{display:flex; align-items:center; justify-content:space-between; gap:8px}
.ccm-remote .addwrap{position:relative; flex:none}
.ccm-remote .addbtn{
  width:22px; height:22px; line-height:1; font-size:15px; font-weight:800;
  color:var(--accent); background:var(--accent-soft);
  border:1px solid var(--accent-line); border-radius:7px; cursor:pointer;
}
.ccm-remote .addbtn:hover{background:var(--accent-line); color:var(--ink)}
/* + 를 누르면 뜨는 메뉴. 지금은 Bible 한 줄뿐이라도 여러 줄을 받을 그릇으로 만든다. */
.ccm-remote .addmenu{
  position:absolute; top:calc(100% + 6px); right:0; z-index:30; min-width:120px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 14px 34px -10px rgba(0,0,0,.6); padding:5px; display:flex; flex-direction:column; gap:2px;
}
.ccm-remote .addmenu[hidden]{display:none}
.ccm-remote .addmenu button{
  text-align:left; padding:7px 9px; border-radius:7px; background:transparent; border:0;
  color:var(--ink-2); font-size:12.5px; font-weight:600; cursor:pointer;
}
.ccm-remote .addmenu button:hover{background:var(--surface-3); color:var(--ink)}

/* ── 목록에서의 말씀 항목 ──────────────────────────────────────────────── */
/* 곡과 한눈에 구분되게 꼬리표 색을 달리한다. 곡은 주황(조옮김 키), 말씀은 파랑(번역본). */
.ccm-remote .item.word .ky{
  color:var(--chord); background:rgba(143,199,255,.14); border-color:rgba(143,199,255,.42);
}
.ccm-remote .item .edit{
  flex:none; width:22px; height:22px; border-radius:6px; cursor:pointer;
  background:transparent; border:1px solid transparent; color:var(--muted); font-size:12px;
}
.ccm-remote .item .edit:hover{background:var(--surface-3); border-color:var(--line); color:var(--ink)}

/* ── 말씀 넣기·고치기 창 ───────────────────────────────────────────────── */
.ccm-remote .sheetwrap{
  position:absolute; inset:0; z-index:40; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(5,8,16,.62);
}
.ccm-remote .sheetwrap[hidden]{display:none}
.ccm-remote .sheetwrap .sheet.wide{
  width:min(560px, 100%); max-height:100%; display:flex; flex-direction:column; gap:12px;
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.75);
}
.ccm-remote .sheetwrap .head{display:flex; align-items:center; gap:8px}
.ccm-remote .sheetwrap .head .ttl{font-size:15px; font-weight:800; flex:1}
.ccm-remote .sheetwrap .x{
  background:transparent; border:0; color:var(--muted); font-size:15px; cursor:pointer; padding:2px 4px;
}
.ccm-remote .sheetwrap .x:hover{color:var(--ink)}

.ccm-remote .sheetwrap .fld{display:flex; flex-direction:column; gap:5px; min-height:0}
.ccm-remote .sheetwrap .fld.grow{flex:1; min-height:120px}
.ccm-remote .sheetwrap .fld > span{
  font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.ccm-remote .sheetwrap input,
.ccm-remote .sheetwrap textarea{
  width:100%; background:var(--surface-2); border:1px solid var(--line); border-radius:9px;
  color:var(--ink); font:inherit; font-size:14px; padding:9px 11px;
}
.ccm-remote .sheetwrap textarea{
  flex:1; min-height:120px; resize:vertical; line-height:1.7;
  font-size:14.5px; white-space:pre-wrap;
}
.ccm-remote .sheetwrap input:focus,
.ccm-remote .sheetwrap textarea:focus{border-color:var(--accent); outline:none}

/* 보기 모드 — 한 절씩 넘길지, 가사처럼 흐르게 할지 */
.ccm-remote .sheetwrap .modes{display:flex; gap:6px}
.ccm-remote .sheetwrap .mode{
  flex:1; padding:8px 10px; border-radius:9px; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink-2);
  font-size:12.5px; font-weight:700;
}
.ccm-remote .sheetwrap .mode.on{
  background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent);
}

.ccm-remote .sheetwrap .err{color:var(--stop); font-size:12.5px; font-weight:700; min-height:16px}
.ccm-remote .sheetwrap .foot{display:flex; align-items:center; gap:8px}
.ccm-remote .sheetwrap .foot .spacer{flex:1}
.ccm-remote .sheetwrap .go{
  background:var(--accent); color:#241505; border:0; border-radius:9px;
  padding:9px 18px; font-size:13.5px; font-weight:800; cursor:pointer;
}
.ccm-remote .sheetwrap .del{
  background:var(--stop-soft); color:var(--stop); border:1px solid var(--stop);
  border-radius:9px; padding:9px 14px; font-size:13px; font-weight:700; cursor:pointer;
}

/* 폰에서는 창을 화면에 꽉 채운다. 본문을 붙여넣고 다듬을 자리가 필요하다. */
@media (max-width:659.98px){
  .ccm-remote .sheetwrap{padding:0}
  .ccm-remote .sheetwrap .sheet.wide{
    width:100%; height:100%; max-height:100%; border-radius:0; border:0;
  }
}

/* ── 말씀 미리보기 ─────────────────────────────────────────────────────── */
/* 줄 자체는 가사와 같은 규칙(chord-lyrics-plain)을 타므로 여기서는 말씀에만
   있는 것만 손본다. 회중 화면(live.php)에도 같은 뜻의 규칙이 있어야 한다 —
   한쪽만 고치면 리모트와 TV가 서로 다르게 보인다. */
.ccm-remote .verse-no{
  display:inline-block; margin-right:.4em; opacity:.55;
  font-size:.62em; font-weight:800; vertical-align:.35em;
}
/* 한 절씩 보는 모드는 한 줄뿐이라 위쪽에 붙어 허전하다. 가운데로 끌어올린다. */
.ccm-remote .verse-one{margin-top:12vh}
/* 세로로 흐르는 모드는 절 사이가 가사(.12em)보다 더 떨어져야 읽기 편하다. */
.ccm-remote .scripture-line{margin:.55em 0}

/* 오른쪽 아래 장절 표. live.php의 #scripRef와 같은 뜻 — 둘 다 맞춰 둘 것. */
.ccm-remote .preview .ref{
  position:absolute; right:14px; bottom:10px; font-size:11px; font-weight:700;
  color:var(--muted); pointer-events:none;
}
.ccm-remote .preview .ref[hidden]{display:none}

/* ── 말씀 한 절씩 보기 — 위는 지금 절 고정, 아래는 절 목록(눌러서 이동) ──── */
.ccm-remote .verse-panel{display:none; position:absolute; inset:0; padding:0 8%}
.ccm-remote .preview.verse-mode .inner{display:none}
.ccm-remote .preview.verse-mode .verse-panel{display:flex; flex-direction:column}
.ccm-remote .verse-panel .cur{
  flex:none; padding:9% 0 16px; text-align:center; font-size:var(--lyric-size); font-weight:700;
  line-height:1.5; letter-spacing:-.02em; border-bottom:1px solid var(--line);
}
/* .verse-one의 큰 위 여백(12vh)은 화면 전체를 쓰던 옛 모습을 위한 것이다.
   여기서는 .cur 자체의 padding으로 이미 자리를 잡으니 없앤다. */
.ccm-remote .verse-panel .cur .verse-one{margin-top:0}
.ccm-remote .verse-panel .list{flex:1; min-height:0; overflow-y:auto; padding:10px 0 16px}
.ccm-remote .verse-panel .row{
  padding:8px 10px; margin-bottom:2px; border-radius:8px; cursor:pointer;
  font-size:13px; line-height:1.55; color:var(--ink-2);
}
.ccm-remote .verse-panel .row:hover{background:var(--surface-3)}
.ccm-remote .verse-panel .row.active{background:var(--accent-soft); color:var(--ink); font-weight:700}

/* ── 성경에서 가져오기 줄 ──────────────────────────────────────────────── */
.ccm-remote .sheetwrap .grab{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.ccm-remote .sheetwrap .grab select,
.ccm-remote .sheetwrap .grab input{
  width:auto; flex:0 1 auto; padding:7px 9px; font-size:13px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:8px; color:var(--ink);
}
.ccm-remote .sheetwrap .grab [data-sc-ch],
.ccm-remote .sheetwrap .grab [data-sc-vf],
.ccm-remote .sheetwrap .grab [data-sc-vt]{width:64px}
.ccm-remote .sheetwrap .grab [data-sc-book]{max-width:130px}
.ccm-remote .sheetwrap .grab .go{padding:7px 14px; font-size:13px}
.ccm-remote .sheetwrap .grab .go:disabled{opacity:.55; cursor:default}

/* ── 배경 썸네일 고르기 (악보 편집 창의 배경 고르기와 같은 모습) ─────────── */
.ccm-remote .bgpick{display:flex; gap:8px; overflow-x:auto; padding-bottom:2px}
.ccm-remote .bgthumb{
  flex:none; width:74px; height:46px; border-radius:8px; overflow:hidden; position:relative;
  background:#000; border:2px solid var(--line); cursor:pointer; padding:0;
}
.ccm-remote .bgthumb.on{border-color:var(--accent)}
.ccm-remote .bgthumb img,
.ccm-remote .bgthumb video{width:100%; height:100%; object-fit:cover; display:block}
.ccm-remote .bgthumb.none{display:grid; place-items:center}
.ccm-remote .bgthumb.none span{font-size:10px; font-weight:800; color:var(--muted)}
.ccm-remote .bgthumb .tag{
  position:absolute; right:2px; bottom:2px; font-size:8.5px; font-weight:800; color:#fff;
  background:rgba(0,0,0,.7); border-radius:4px; padding:0 3px;
}