/* 방송 전 사진 점검 — **`precheck_ui.js` 가 만드는 markup 의 모양**이다.
   (`VIEW` 상수와 `shots`ㆍ`pc-pop` 같은 그 파일이 그리는 것들)

   두 화면이 같은 파일을 읽는다 — 웹 시제품(`index.html`)과 설치형의
   사진 점검 화면(`photo_check.py`). 종전에는 이 규칙들이
   `index.html` 의 `<style>` 안에 있었고, 설치형으로 옮기면서
   **베끼면 갈라진다**는 것이 분명해져 파일로 뺐다(2026-10-29).

   여기 두지 않는 것 — `#precheck`(웹의 접는 영역)처럼 **한 화면만의**
   것, 그리고 `body`ㆍ`button`ㆍ`.row`ㆍ`.note` 같은 화면 바탕 규칙.
   바탕은 화면마다 제 모양이 있다. */
.pc-tip { font-size: 12px; line-height: 1.7; color: #c5c9ce;
          background: #10141a; border-left: 3px solid #2a8f57;
          border-radius: 0 6px 6px 0; padding: 8px 10px; margin: 8px 0 12px; }
#drop { border: 1px dashed #3a4046; border-radius: 9px; padding: 12px 14px;
        text-align: center; font-size: 13px; }
#drop.over { border-color: #2a8f57; background: #11251a; }
#drop .row { justify-content: center; align-items: center; }
.pc-btn { display: inline-block; margin: 0; padding: 9px 16px; font-size: 14px;
          color: #e8eaed; background: #222830; border: 1px solid #3a4046;
          border-radius: 7px; cursor: pointer; }
.pc-card { border: 1px solid #2c3137; border-radius: 9px; padding: 10px 12px;
           margin-top: 12px; background: #15191e; }
.pc-top { display: flex; align-items: center; gap: 10px; font-size: 13px;
          flex-wrap: wrap; }
.pc-stat { color: #9aa0a6; font-size: 12px; }
.pc-del { margin-left: auto; font-size: 12px; padding: 4px 10px; }
.pc-body { display: flex; gap: 14px; margin-top: 10px; align-items: flex-start; }
.pc-pic { flex: 0 0 290px; }
.pc-frame { position: relative; display: inline-block; line-height: 0; }
.pc-frame img { max-width: 290px; max-height: 380px; border-radius: 6px;
                cursor: crosshair; user-select: none; -webkit-user-drag: none; }
.pc-sel { display: none; position: absolute; border: 2px solid #ffd54f;
          background: rgba(255,213,79,.18); pointer-events: none; }
.pc-txt { flex: 1 1 320px; min-width: 0; }
.pc-tabs { margin-top: 0; }
.pc-tabs button { font-size: 12px; padding: 6px 11px; }
.pc-tabs button.on { background: #1f6f43; border-color: #2a8f57; }
/* 글자 칸과 **밑줄만 보이는 사본**을 겹쳐 놓는다. 글꼴ㆍ여백ㆍ줄간격이
   똑같아야 밑줄이 글자와 어긋나지 않는다 — 둘을 함께 고칠 것. */
.pc-edit { position: relative; margin-top: 8px; }
.pc-marks, .pc-area {
    box-sizing: border-box; width: 100%; height: 300px; margin: 0;
    padding: 10px 12px; border: 1px solid #3a4046; border-radius: 7px;
    font: 13px/1.6 ui-monospace, Consolas, "Malgun Gothic", monospace;
    white-space: pre-wrap; overflow-wrap: break-word; }
.pc-area { position: relative; z-index: 1; display: block; resize: vertical;
           background: #0f1216; color: #e8eaed; overflow-y: auto; }
/* 위에 겹치는 사본 — 글자는 투명하고 **밑줄만** 보인다. 누르는 것은
   `mark` 뿐이고 나머지는 아래 글자 칸으로 그냥 통과한다. */
.pc-marks { position: absolute; inset: 0; z-index: 2; pointer-events: none;
            background: transparent; border-color: transparent;
            color: transparent; overflow: hidden; }
.pc-marks mark { position: relative; background: transparent; color: transparent;
                 border-bottom: 2px solid #ffd54f; pointer-events: auto;
                 cursor: pointer; }
.pc-pop { position: absolute; left: 0; top: 1.9em; z-index: 9; width: 230px;
          padding: 9px 11px; border: 1px solid #5a5021; border-radius: 8px;
          background: #221f10; color: #e8eaed; font-size: 13px;
          box-shadow: 0 6px 18px rgba(0,0,0,.5); white-space: normal; }
.pc-pop p { margin: 0 0 4px; }
.pc-pop .row { margin-top: 8px; gap: 6px; }
.pc-pop button { font-size: 12px; padding: 6px 10px; }
.pc-again pre, .pc-cmp pre { background: #0f1216; border: 1px solid #2c3137;
    border-radius: 6px; padding: 8px; font-size: 12px; white-space: pre-wrap;
    max-height: 180px; overflow: auto; }
.pc-two { display: flex; gap: 10px; }
.pc-two > div { flex: 1 1 0; min-width: 0; }
/* ---- 점검 결과 — 방송 중 알림과 **같은 3줄 구성**을 쓴다.
       글자 크기만 목록에 맞춰 줄였고, 줄 순서ㆍ라벨은 그대로다. ---- */
.pc-h { font-size: 14px; margin: 16px 0 8px; }
#pcconfirm { margin-top: 10px; font-size: 13px; }
#pcconfirm > p { margin: 4px 0; }
.pcq { border: 1px solid #3a4046; border-left: 4px solid #C62828;
       border-radius: 8px; padding: 10px 12px; margin: 0 0 10px;
       background: #1a1e23; }
/* 자리마다 왼쪽 색만 다르다 — 등급색(theme.py)을 흉내내지 않는다.
   조심(빨강) · 확인 필요(회색) · 갈림(초록). */
.pcq.held { border-left-color: #B0BEC5; }
.pcq.cleared { border-left-color: #2a8f57; }
/* 한 줄에 여러 룰이 걸린 경우 — 줄은 위에 한 번, 이유는 아래에 묶는다. */
.pcr { border-top: 1px solid #2c3137; margin-top: 8px; padding-top: 6px; }
.pcq .pcr:first-of-type { border-top: 0; }
.pcr .rid { font-size: 11px; color: #9aa0a6; font-variant-numeric: tabular-nums; }
/* ③줄에 한 줄 더 붙는 자리 (심사 "아니오" 로 확정된 경우). */
.pcq .a-note { font-size: 13px; color: #c5c9ce; margin: 4px 0 0; }
#declbox { border: 1px solid #2c3137; border-radius: 9px; padding: 10px 12px;
           margin-top: 12px; background: #10141a; }
#declbox label { color: #c5c9ce; }
.pc-rad { margin-top: 6px; gap: 14px; }
.pc-rad label { margin: 0; font-size: 13px; color: #e8eaed; }
#declefflist { margin-top: 8px; }
.pc-chk { display: inline-block; margin: 0 14px 6px 0; font-size: 13px;
          color: #e8eaed; }
.pcq .a-head { font-size: 13px; }
.pcq .a-head .sp { font-weight: normal; font-size: 12px; color: #9aa0a6; }
.pcq .a-said { font-size: 14px; color: #c5c9ce; }
.pcq .a-why { font-size: 14px; }
.pcq .a-rep { font-size: 16px; }
.pc-cut, .pc-cutbox { font-size: 12px; color: #9aa0a6; }
.pc-cut > div { padding: 2px 0; border-bottom: 1px solid #22262b;
                word-break: break-all; }
.pc-cutbox > summary { cursor: pointer; margin-top: 10px; }
@media (max-width: 680px) {
  .pc-body { flex-direction: column; }
  .pc-pic { flex: none; }
  .pc-frame img { max-width: 100%; }
  .pc-two { flex-direction: column; }
}

/* 방송 전 가이드 카드 (guide_templates.js). 등급 색을 쓰지 않는다 — 중립 선만. */
.gd { margin-top: 16px; }
.gd-card { border: 1px solid #3a4046; border-left: 4px solid #5f6368;
           border-radius: 9px; padding: 10px 12px; margin: 0 0 10px; background: #15191e; }
.gd-name { font-size: 14px; margin: 0 0 4px; }
.gd-first { font-size: 13px; color: #c5c9ce; margin: 0 0 6px; }
.gd-lines p { font-size: 13px; margin: 2px 0; }
.gd-spot { font-size: 12px; color: #9aa0a6; }
.gd-card ul { margin: 2px 0 6px; padding-left: 18px; font-size: 14px; }
.gd-foot { font-size: 12px; color: #9aa0a6; line-height: 1.7; margin: 8px 0 0; }